@orangecatai/adgen-canvas 0.0.18 → 0.0.19

package/dist/dev/index.js

@@ -67,13 +67,13 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-V5POPSPR.js";
+} from "./chunk-JFIHKE5E.js";
 import {
   define_import_meta_env_default
-} from "./chunk-MCENPNB7.js";
+} from "./chunk-SFB47GDQ.js";
 import {
   en_default
-} from "./chunk-IFMURN5W.js";
+} from "./chunk-4K5LIQQU.js";
 import {
   percentages_default
 } from "./chunk-URPEKBQ3.js";
@@ -390,7 +390,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-GCXOD4LK.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-CGDBECYD.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-G5QZC24A.js"),
-  "./locales/en.json": () => import("./locales/en-ZZQASRYX.js"),
+  "./locales/en.json": () => import("./locales/en-IMRJ2ODG.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-UMEOH76W.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-IWRZXJC5.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-QOYVIIJA.js"),
@@ -5553,6 +5553,7 @@ var FontPickerList = React10.memo(
       }).sort(
         (a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1
       ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [customFontVersion]
     );
     const sceneFamilies = useMemo(
@@ -9770,7 +9771,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-5TNF6BOW.js").then(
+        (blob2) => import("./data/image-OXVYDFFE.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13339,6 +13340,7 @@ var shortcutMap = {
   toggleEraserTool: [getShortcutKey("E")],
   toggleHandTool: [getShortcutKey("H")],
   setFrameAsActiveTool: [getShortcutKey("F")],
+  cycleThroughFrameChildren: [getShortcutKey("CtrlOrCmd+J")],
   saveFileToDisk: [getShortcutKey("CtrlOrCmd+S")],
   saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
   toggleShortcuts: [getShortcutKey("?")],
@@ -20553,6 +20555,103 @@ var actionSetFrameAsActiveTool = register({
   },
   keyTest: (event) => !event[KEYS41.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS41.F
 });
+var actionCycleThroughFrameChildren = register({
+  name: "cycleThroughFrameChildren",
+  label: "labels.cycleThroughFrameChildren",
+  trackEvent: { category: "element" },
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    if (selectedElements.length === 1) {
+      const selected = selectedElements[0];
+      return isFrameLikeElement8(selected) || Boolean(selected.frameId);
+    }
+    return false;
+  },
+  perform: (elements, appState, _, app) => {
+    const selectedElement = app.scene.getSelectedElements(appState).at(0);
+    if (!selectedElement) {
+      return {
+        elements,
+        appState,
+        captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      };
+    }
+    let frameId = null;
+    let currentlySelectedId = null;
+    if (isFrameLikeElement8(selectedElement)) {
+      frameId = selectedElement.id;
+    } else if (selectedElement.frameId) {
+      frameId = selectedElement.frameId;
+      currentlySelectedId = selectedElement.id;
+    }
+    if (!frameId) {
+      return {
+        elements,
+        appState,
+        captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      };
+    }
+    const frameChildren = getFrameChildren3(
+      getNonDeletedElements12(elements),
+      frameId
+    ).filter((element) => !(element.type === "text" && element.containerId));
+    if (frameChildren.length === 0) {
+      if (!isFrameLikeElement8(selectedElement)) {
+        const frame = elements.find((el) => el.id === frameId);
+        if (frame) {
+          return {
+            elements,
+            appState: {
+              ...appState,
+              selectedElementIds: { [frame.id]: true }
+            },
+            captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+          };
+        }
+      }
+      return {
+        elements,
+        appState,
+        captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      };
+    }
+    let nextElementToSelect;
+    if (isFrameLikeElement8(selectedElement)) {
+      nextElementToSelect = frameChildren[0];
+    } else if (currentlySelectedId) {
+      const currentIndex = frameChildren.findIndex(
+        (el) => el.id === currentlySelectedId
+      );
+      if (currentIndex >= 0 && currentIndex < frameChildren.length - 1) {
+        nextElementToSelect = frameChildren[currentIndex + 1];
+      } else {
+        const frame = elements.find((el) => el.id === frameId);
+        if (frame) {
+          return {
+            elements,
+            appState: {
+              ...appState,
+              selectedElementIds: { [frame.id]: true }
+            },
+            captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+          };
+        }
+        nextElementToSelect = frameChildren[0];
+      }
+    } else {
+      nextElementToSelect = frameChildren[0];
+    }
+    return {
+      elements,
+      appState: {
+        ...appState,
+        selectedElementIds: { [nextElementToSelect.id]: true }
+      },
+      captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+    };
+  },
+  keyTest: (event) => event[KEYS41.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key === KEYS41.J
+});
 var actionWrapSelectionInFrame = register({
   name: "wrapSelectionInFrame",
   label: "labels.wrapSelectionInFrame",
@@ -20584,8 +20683,17 @@ var actionWrapSelectionInFrame = register({
         });
       }
     }
+    const allElements = app.scene.getElementsIncludingDeleted();
+    const firstSelectedIndex = allElements.findIndex(
+      (el) => selectedElements.some((sel) => sel.id === el.id)
+    );
+    const elementsWithFrame = firstSelectedIndex >= 0 ? [
+      ...allElements.slice(0, firstSelectedIndex),
+      frame,
+      ...allElements.slice(firstSelectedIndex)
+    ] : [...allElements, frame];
     const nextElements = addElementsToFrame(
-      [...app.scene.getElementsIncludingDeleted(), frame],
+      elementsWithFrame,
       selectedElements,
       frame,
       appState
@@ -22892,6 +23000,7 @@ var autoResizeStore = {
 import { Fragment as Fragment12, jsx as jsx84 } from "react/jsx-runtime";
 var AutoResizeShimmerLayer = () => {
   const appState = useExcalidrawAppState();
+  const sceneElements = useExcalidrawElements();
   const [, forceUpdate] = useReducer((n) => n + 1, 0);
   useEffect30(() => autoResizeStore.subscribe(forceUpdate), []);
   const frames = autoResizeStore.getLoadingFrames();
@@ -22899,15 +23008,21 @@ var AutoResizeShimmerLayer = () => {
     return null;
   }
   const zoomVal = appState.zoom.value;
-  return /* @__PURE__ */ jsx84(Fragment12, { children: frames.map((frame) => {
+  return /* @__PURE__ */ jsx84(Fragment12, { children: frames.map((frameInfo) => {
+    const currentFrame = sceneElements.find(
+      (el) => el.id === frameInfo.frameId && el.type === "frame"
+    );
+    if (!currentFrame) {
+      return null;
+    }
     const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords5(
-      { sceneX: frame.x, sceneY: frame.y },
+      { sceneX: currentFrame.x, sceneY: currentFrame.y },
       appState
     );
     const left = viewportX - appState.offsetLeft;
     const top = viewportY - appState.offsetTop;
-    const width = frame.width * zoomVal;
-    const height = frame.height * zoomVal;
+    const width = currentFrame.width * zoomVal;
+    const height = currentFrame.height * zoomVal;
     return /* @__PURE__ */ jsx84(
       "div",
       {
@@ -22924,7 +23039,7 @@ var AutoResizeShimmerLayer = () => {
           boxSizing: "border-box"
         }
       },
-      frame.frameId
+      frameInfo.frameId
     );
   }) });
 };
@@ -23232,7 +23347,7 @@ function PromptInputAction({
 import { jsx as jsx88, jsxs as jsxs47 } from "react/jsx-runtime";
 var MODEL_CONFIG = {
   "Gemini 2.5 Flash": {
-    geminiModelId: "gemini-3.1-flash-image-preview",
+    geminiModelId: "gemini-3.1-flash-image",
     supportsImageSize: false,
     supportsThinking: false,
     supportedResolutions: ["1K"],
@@ -23250,7 +23365,7 @@ var MODEL_CONFIG = {
     ]
   },
   "Gemini 3.1 Flash": {
-    geminiModelId: "gemini-3.1-flash-image-preview",
+    geminiModelId: "gemini-3.1-flash-image",
     supportsImageSize: true,
     supportsThinking: true,
     supportedResolutions: ["0.5K", "1K", "2K", "4K"],
@@ -23272,7 +23387,7 @@ var MODEL_CONFIG = {
     ]
   },
   "Gemini 3 Pro": {
-    geminiModelId: "gemini-3-pro-image-preview",
+    geminiModelId: "gemini-3-pro-image",
     supportsImageSize: true,
     supportsThinking: false,
     supportedResolutions: ["1K", "2K", "4K"],
@@ -24687,13 +24802,13 @@ async function runReviewerAgent(opts) {
 }
 
 // components/auto-resize/autoResizeEngine.ts
-var DEBUG_AUTO_RESIZE = false;
+var DEBUG_AUTO_RESIZE = true;
 var debug = (...args) => {
   if (DEBUG_AUTO_RESIZE) {
     console.log(...args);
   }
 };
-var DEFAULT_BG_REGEN_MODEL = "gemini-3.1-flash-image-preview";
+var DEFAULT_BG_REGEN_MODEL = "gemini-3.1-flash-image";
 var MAX_REVIEW_ROUNDS = 2;
 var GEMINI_RATIOS = {
   "21:9": 21 / 9,
@@ -24739,6 +24854,9 @@ function extractFrameInfo(elements, frame, files) {
           };
           continue;
         }
+        console.warn(
+          `[AutoResize] extractFrameInfo: full-frame image element has no file data (fileId=${el.fileId}). Will fall back to frame.backgroundColor.`
+        );
       } else if (el.type === "rectangle" && el.backgroundColor && el.backgroundColor !== "transparent") {
         background = {
           type: "solid",
@@ -24798,6 +24916,16 @@ function extractFrameInfo(elements, frame, files) {
       }
     }
   }
+  if (background.type === "none") {
+    const fc = frame.backgroundColor;
+    const isBlankOrWhite = !fc || fc === "transparent" || fc === "#ffffff" || fc === "#ffffffff" || fc === "#fff" || fc === "#FFFFFF";
+    if (!isBlankOrWhite) {
+      background = { type: "solid", color: fc };
+      debug(
+        `[AutoResize] extractFrameInfo: using frame.backgroundColor as fallback background: ${fc}`
+      );
+    }
+  }
   return { frame, background, foreground };
 }
 function computeCropLoss(sourceAR, targetAR) {
@@ -24830,6 +24958,115 @@ function nearestGeminiAspectRatio(w, h) {
   }
   return best;
 }
+var GEMINI_RESOLUTION_TABLE = {
+  "1:1": {
+    "0.5K": [512, 512],
+    "1K": [1024, 1024],
+    "2K": [2048, 2048],
+    "4K": [4096, 4096]
+  },
+  "1:4": {
+    "0.5K": [256, 1024],
+    "1K": [512, 2048],
+    "2K": [1024, 4096],
+    "4K": [2048, 8192]
+  },
+  "1:8": {
+    "0.5K": [192, 1536],
+    "1K": [384, 3072],
+    "2K": [768, 6144],
+    "4K": [1536, 12288]
+  },
+  "2:3": {
+    "0.5K": [424, 632],
+    "1K": [848, 1264],
+    "2K": [1696, 2528],
+    "4K": [3392, 5056]
+  },
+  "3:2": {
+    "0.5K": [632, 424],
+    "1K": [1264, 848],
+    "2K": [2528, 1696],
+    "4K": [5056, 3392]
+  },
+  "3:4": {
+    "0.5K": [448, 600],
+    "1K": [896, 1200],
+    "2K": [1792, 2400],
+    "4K": [3584, 4800]
+  },
+  "4:1": {
+    "0.5K": [1024, 256],
+    "1K": [2048, 512],
+    "2K": [4096, 1024],
+    "4K": [8192, 2048]
+  },
+  "4:3": {
+    "0.5K": [600, 448],
+    "1K": [1200, 896],
+    "2K": [2400, 1792],
+    "4K": [4800, 3584]
+  },
+  "4:5": {
+    "0.5K": [464, 576],
+    "1K": [928, 1152],
+    "2K": [1856, 2304],
+    "4K": [3712, 4608]
+  },
+  "5:4": {
+    "0.5K": [576, 464],
+    "1K": [1152, 928],
+    "2K": [2304, 1856],
+    "4K": [4608, 3712]
+  },
+  "8:1": {
+    "0.5K": [1536, 192],
+    "1K": [3072, 384],
+    "2K": [6144, 768],
+    "4K": [12288, 1536]
+  },
+  "9:16": {
+    "0.5K": [384, 688],
+    "1K": [768, 1376],
+    "2K": [1536, 2752],
+    "4K": [3072, 5504]
+  },
+  "16:9": {
+    "0.5K": [688, 384],
+    "1K": [1376, 768],
+    "2K": [2752, 1536],
+    "4K": [5504, 3072]
+  },
+  "21:9": {
+    "0.5K": [792, 168],
+    "1K": [1584, 672],
+    "2K": [3168, 1344],
+    "4K": [6336, 2688]
+  }
+};
+function selectOptimalResolution(targetW, targetH, aspectRatio) {
+  const resolutions = GEMINI_RESOLUTION_TABLE[aspectRatio];
+  if (!resolutions) {
+    return "1K";
+  }
+  const targetArea = targetW * targetH;
+  let best = "1K";
+  let bestDiff = Infinity;
+  for (const [resLevel, [w, h]] of Object.entries(resolutions)) {
+    const resArea = w * h;
+    const diff = Math.abs(resArea - targetArea);
+    if (resArea >= targetArea) {
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        best = resLevel;
+      }
+    } else if (bestDiff === Infinity || diff < bestDiff) {
+      bestDiff = diff;
+      best = resLevel;
+    }
+  }
+  return best;
+}
 function getImageNaturalDimensions(dataUrl) {
   return new Promise((resolve) => {
     const img = new Image();
@@ -24838,6 +25075,32 @@ function getImageNaturalDimensions(dataUrl) {
     img.src = dataUrl;
   });
 }
+function downscaleForGemini(dataUrl, maxDim = 800, quality = 0.85) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      const { naturalWidth: w, naturalHeight: h } = img;
+      if (w <= maxDim && h <= maxDim) {
+        const canvas2 = document.createElement("canvas");
+        canvas2.width = w;
+        canvas2.height = h;
+        canvas2.getContext("2d").drawImage(img, 0, 0);
+        resolve(canvas2.toDataURL("image/jpeg", quality));
+        return;
+      }
+      const scale = maxDim / Math.max(w, h);
+      const dw = Math.round(w * scale);
+      const dh = Math.round(h * scale);
+      const canvas = document.createElement("canvas");
+      canvas.width = dw;
+      canvas.height = dh;
+      canvas.getContext("2d").drawImage(img, 0, 0, dw, dh);
+      resolve(canvas.toDataURL("image/jpeg", quality));
+    };
+    img.onerror = () => resolve(dataUrl);
+    img.src = dataUrl;
+  });
+}
 function fitImageToFrame(imgW, imgH, frameW, frameH) {
   if (imgW <= 0 || imgH <= 0) {
     return { relX: 0, relY: 0, width: frameW, height: frameH };
@@ -24860,6 +25123,57 @@ function containImageInBbox(imgW, imgH, bboxW, bboxH) {
   const relY = (bboxH - fittedH) / 2;
   return { relX, relY, width: fittedW, height: fittedH };
 }
+function getProductMinBox(targetW, targetH) {
+  const ar = targetW / targetH;
+  if (ar >= 3.5) {
+    return {
+      minWidth: Math.min(targetW, Math.max(Math.round(targetW * 0.28), 300)),
+      minHeight: Math.round(targetH * 0.72)
+    };
+  }
+  if (ar <= 1 / 3.5) {
+    return {
+      minWidth: Math.round(targetW * 0.82),
+      minHeight: Math.round(targetH * 0.34)
+    };
+  }
+  if (ar <= 0.65) {
+    return {
+      minWidth: Math.round(targetW * 0.76),
+      minHeight: Math.round(targetH * 0.32)
+    };
+  }
+  if (ar >= 1.6) {
+    return {
+      minWidth: Math.round(targetW * 0.36),
+      minHeight: Math.round(targetH * 0.58)
+    };
+  }
+  return {
+    minWidth: Math.round(targetW * 0.54),
+    minHeight: Math.round(targetH * 0.42)
+  };
+}
+function enforceMinProductBox({
+  x,
+  y,
+  width,
+  height,
+  targetW,
+  targetH
+}) {
+  const { minWidth, minHeight } = getProductMinBox(targetW, targetH);
+  const nextWidth = Math.min(targetW, Math.max(width, minWidth));
+  const nextHeight = Math.min(targetH, Math.max(height, minHeight));
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  return {
+    x: Math.min(Math.max(centerX - nextWidth / 2, 0), targetW - nextWidth),
+    y: Math.min(Math.max(centerY - nextHeight / 2, 0), targetH - nextHeight),
+    width: nextWidth,
+    height: nextHeight
+  };
+}
 async function captureFrameScreenshotFromApp(app, frameId) {
   const elements = app.getSceneElements();
   const frame = elements.find((el) => el.id === frameId);
@@ -24917,7 +25231,11 @@ HORIZONTAL STRIP BANNER (${tgtW}\xD7${tgtH}) \u2014 VERY WIDE AND SHORT:
       Math.round(tgtH * 0.5)
     )}px). Single line only \u2014 no wrapping.
 \u2022 CTA button / call-to-action text: anchor hard right with right padding 8\u201316px, vertically centred.
-\u2022 Product image (if present): place centre or centre-right; height = ~80% of canvas height.
+\u2022 Product image (if present): place centre or centre-right; height = 70\u201390% of canvas height (${Math.round(
+      tgtH * 0.7
+    )}\u2013${Math.round(
+      tgtH * 0.9
+    )}px); width = AT LEAST 300px to ensure product remains visible and impactful.
 \u2022 NOTHING should be taller than the canvas. All elements must fit within ${tgtH}px height.
 \u2022 Remove or collapse any decorative shapes that cannot fit at this scale.`,
     "vertical-strip": `
@@ -25108,6 +25426,17 @@ ${elementsDesc || "(no foreground elements)"}
 ## Target canvas: ${targetW}\xD7${targetH}
 ${layoutGuidance}
 
+## Non-negotiable element count rule
+The transformed frame must contain EXACTLY ${foreground.length} component(s), matching the ${foreground.length} source element(s) listed above.
+Create a strict one-to-one mapping: source element [1] becomes output child [1], source element [2] becomes output child [2], and so on.
+Do NOT add any new elements, components, headlines, subheadlines, CTA buttons, badges, logos, captions, decorative shapes, overlays, or background layers.
+Do NOT remove any source elements.
+Do NOT split one source element into multiple output elements.
+Do NOT merge multiple source elements into one output element.
+If the source has zero text elements, the output must have zero text elements.
+If the source does not include a headline or CTA, the output must not include a headline or CTA.
+The layout guidance is only for repositioning and resizing existing elements; it never permits adding new content.
+
 ## Task
 Produce complete, self-contained HTML that represents this ad at exactly ${targetW}\xD7${targetH} pixels.
 Preserve the original text content, image assets, colors, and brand identity.
@@ -25115,17 +25444,18 @@ Only change positions and sizes.
 
 ## STRICT HTML CONTRACT (parser requirements \u2014 do NOT deviate):
 1. Root element MUST be: <div class="canvas" style="position: relative; width: ${targetW}px; height: ${targetH}px; overflow: hidden; ${bgCss}">
-2. Every child element MUST have: position: absolute; left: Xpx; top: Ypx; width: Wpx; height: Hpx
-3. Use ONLY <div> elements. NO <span>, <p>, <img>, <h1>\u2013<h6>, <button>, etc.
-4. Text: inline style with color, font-size (px), font-weight, text-align, line-height, white-space: pre-wrap
-5. Images: background-image: url(IMG_PLACEHOLDER_N); background-size: contain; background-repeat: no-repeat; background-position: center
-6. Shapes: background-color in hex (#rrggbb). Gradients allowed (linear-gradient only).
-7. NO flexbox. NO grid. NO transform. NO animation. NO filter. NO clip-path.
-8. Use the exact IMG_PLACEHOLDER_N tokens provided above \u2014 do NOT substitute real URLs.
-9. All numeric values in px. No %, em, rem, vw, vh.
-10. Opacity via CSS opacity property (0\u20131 decimal).
-11. border-radius in px if needed.
-12. One purpose per div: background fill OR image OR text (never mixed).
+2. The .canvas root MUST contain exactly ${foreground.length} direct child <div> element(s), one for each source element listed above, in the same order.
+3. Every child element MUST have: position: absolute; left: Xpx; top: Ypx; width: Wpx; height: Hpx
+4. Use ONLY <div> elements. NO <span>, <p>, <img>, <h1>\u2013<h6>, <button>, etc.
+5. Text: inline style with color, font-size (px), font-weight, text-align, line-height, white-space: pre-wrap
+6. Images: background-image: url(IMG_PLACEHOLDER_N); background-size: contain; background-repeat: no-repeat; background-position: center
+7. Shapes: background-color in hex (#rrggbb). Gradients allowed (linear-gradient only).
+8. NO flexbox. NO grid. NO transform. NO animation. NO filter. NO clip-path.
+9. Use the exact IMG_PLACEHOLDER_N tokens provided above \u2014 do NOT substitute real URLs.
+10. All numeric values in px. No %, em, rem, vw, vh.
+11. Opacity via CSS opacity property (0\u20131 decimal).
+12. border-radius in px if needed.
+13. One purpose per div: background fill OR image OR text (never mixed).
 
 Return ONLY the raw HTML. No markdown, no code fences, no explanation.`;
   return { prompt, imagePlaceholders };
@@ -25197,6 +25527,14 @@ async function runAutoResizeForDimension(opts) {
     existingFrameId
   } = opts;
   const srcFrame = info.frame;
+  const getCurrentFramePosition = () => {
+    const currentEls = app.getSceneElements();
+    const currentFrame = currentEls.find((el) => el.id === frameId);
+    if (currentFrame) {
+      return { x: currentFrame.x, y: currentFrame.y };
+    }
+    return { x: placementX, y: placementY };
+  };
   let frameId;
   if (existingFrameId) {
     frameId = existingFrameId;
@@ -25218,35 +25556,69 @@ async function runAutoResizeForDimension(opts) {
     frameId = newFrame.id;
   }
   let bgImageDataUrl = null;
+  const needsRegen = needsBackgroundRegeneration(
+    srcFrame.width,
+    srcFrame.height,
+    tgtW,
+    tgtH
+  );
+  debug(
+    `[AutoResize] ${debugLabel} \u2014 background: type=${info.background.type}, needsRegen=${needsRegen}`
+  );
   if (info.background.type === "image") {
     const srcBgUrl = info.background.dataUrl;
-    const needsRegen = needsBackgroundRegeneration(
-      srcFrame.width,
-      srcFrame.height,
-      tgtW,
-      tgtH
-    );
-    debug(`[AutoResize] ${debugLabel} \u2014 background: needsRegen=${needsRegen}`);
-    if (needsRegen) {
+    if (!srcBgUrl) {
+      console.warn(
+        `[AutoResize] ${debugLabel} \u2014 image background missing dataUrl`
+      );
+    }
+    if (needsRegen && srcBgUrl) {
       onProgress?.("Regenerating background image\u2026");
       const ar = nearestGeminiAspectRatio(tgtW, tgtH);
+      const resolution = selectOptimalResolution(tgtW, tgtH, ar);
       debug(
-        `[AutoResize] ${debugLabel} \u2014 calling Gemini for background regen (ar=${ar})`
-      );
-      bgImageDataUrl = await callGeminiAPI(
-        `You are given an input background image. Preserve the original scene identity, composition, color palette, and style. Outpaint only beyond the existing edges so the final image fits aspect ratio ${ar}. Keep the center subject and key content unchanged. Ensure all surfaces extend with natural, seamless continuity \u2014 no visible seams, repeated patterns, or tiling artifacts. For areas far from the center, gradually soften into ambient bokeh rather than extending sharp textures. Do not add text, logos, watermarks, UI, symbols, or new unrelated objects. Avoid altering brand-relevant details.`,
-        agentImageModel || DEFAULT_BG_REGEN_MODEL,
-        ar,
-        "1K",
-        // resolution parameter — supportsImageSize=false so this is ignored by API
-        false,
-        // supportsImageSize: false → no imageSize sent to API, uses default
-        false,
-        // supportsThinking
-        geminiApiKey,
-        srcBgUrl,
-        signal
+        `[AutoResize] ${debugLabel} \u2014 calling Gemini for background regen (ar=${ar}, res=${resolution})`
       );
+      try {
+        const compressedBgUrl = await downscaleForGemini(srcBgUrl);
+        debug(
+          `[AutoResize] bg-regen starting: ar=${ar}`,
+          `keyLen=${geminiApiKey.length}`,
+          `compressedLen=${compressedBgUrl.length}`,
+          `model=${agentImageModel || DEFAULT_BG_REGEN_MODEL}`
+        );
+        debug(
+          `[AutoResize] ${debugLabel} \u2014 reference image compressed for Gemini`
+        );
+        bgImageDataUrl = await callGeminiAPI(
+          `Expand this image to fill the full canvas dimensions. 
+Preserve the original scene exactly \u2014 same lighting, color palette, style, and mood. 
+Fill any new areas with content that naturally continues the existing scene, 
+as if the camera simply zoomed out.\xA0The original image content must appear embedded naturally within the larger scene, 
+with no visible boundary or transition between old and new areas.
+No blurring, softening, or bokeh. 
+No visible seams, tiling, repeated patterns, or artifacts. 
+No new text, logos, watermarks, or unrelated objects added.`,
+          agentImageModel || DEFAULT_BG_REGEN_MODEL,
+          ar,
+          resolution,
+          // Dynamic resolution based on target dimensions
+          true,
+          // supportsImageSize: true → sends imageSize to API, required for extreme ratios (8:1, 4:1, etc.)
+          false,
+          // supportsThinking
+          geminiApiKey,
+          compressedBgUrl,
+          signal
+        );
+        debug(`[AutoResize] ${debugLabel} \u2014 bg-regen succeeded`);
+      } catch (bgErr) {
+        console.error(
+          `[AutoResize] bg-regen failed for ${debugLabel}:`,
+          bgErr instanceof Error ? bgErr.message : String(bgErr)
+        );
+        bgImageDataUrl = srcBgUrl;
+      }
     } else {
       bgImageDataUrl = srcBgUrl;
     }
@@ -25262,11 +25634,12 @@ async function runAutoResizeForDimension(opts) {
       width: imgW,
       height: imgH
     } = fitImageToFrame(imgNatW, imgNatH, tgtW, tgtH);
+    const currentPos = getCurrentFramePosition();
     const bgFileId = nanoid();
     const bgEl = newImageElement({
       type: "image",
-      x: placementX + relX,
-      y: placementY + relY,
+      x: currentPos.x + relX,
+      y: currentPos.y + relY,
       width: imgW,
       height: imgH,
       fileId: bgFileId,
@@ -25322,12 +25695,13 @@ async function runAutoResizeForDimension(opts) {
       html = html.split(`url(${placeholder})`).join(`url(${dataUrl})`);
     }
     onProgress?.("Parsing layout\u2026");
+    const currentPos = getCurrentFramePosition();
     let parsedEls;
     try {
       parsedEls = await htmlToExcalidrawElements(
         html,
-        placementX,
-        placementY,
+        currentPos.x,
+        currentPos.y,
         tgtW,
         tgtH,
         customFontMap
@@ -25340,6 +25714,11 @@ async function runAutoResizeForDimension(opts) {
     if (!parsedEls || parsedEls.length === 0) {
       throw new Error("HTML parser produced no elements");
     }
+    const productDataUrls = new Set(
+      info.foreground.filter(
+        (el) => el.kind === "image" && el.slotType === "product"
+      ).map((el) => el.dataUrl)
+    );
     onProgress?.("Inserting elements\u2026");
     const newEls = [];
     const imageFiles = [];
@@ -25393,6 +25772,20 @@ async function runAutoResizeForDimension(opts) {
         });
         newEls.push({ ...el, frameId });
       } else if (pel.kind === "image") {
+        const isProduct = productDataUrls.has(pel.dataUrl);
+        const adjusted = isProduct ? enforceMinProductBox({
+          x: pel.x - currentPos.x,
+          y: pel.y - currentPos.y,
+          width: pel.width,
+          height: pel.height,
+          targetW: tgtW,
+          targetH: tgtH
+        }) : {
+          x: pel.x - currentPos.x,
+          y: pel.y - currentPos.y,
+          width: pel.width,
+          height: pel.height
+        };
         const fileId2 = nanoid();
         const { width: natW, height: natH } = await getImageNaturalDimensions(
           pel.dataUrl
@@ -25402,17 +25795,20 @@ async function runAutoResizeForDimension(opts) {
           relY,
           width: imgW,
           height: imgH
-        } = containImageInBbox(natW, natH, pel.width, pel.height);
+        } = containImageInBbox(natW, natH, adjusted.width, adjusted.height);
         const el = newImageElement({
           type: "image",
-          x: pel.x + relX,
-          y: pel.y + relY,
+          x: currentPos.x + adjusted.x + relX,
+          y: currentPos.y + adjusted.y + relY,
           width: imgW,
           height: imgH,
           fileId: fileId2,
           status: "pending",
           scale: [1, 1],
-          customData: { generatedByHtml: true }
+          customData: {
+            generatedByHtml: true,
+            ...isProduct ? { slotType: "product" } : {}
+          }
         });
         newEls.push({ ...el, frameId });
         imageFiles.push({
@@ -25468,6 +25864,16 @@ async function runAutoResizeForDimension(opts) {
     );
     if (reviewRounds >= MAX_REVIEW_ROUNDS) {
       debug(`[AutoResize] ${debugLabel} \u2014 reviewer cap reached, finalising`);
+      if (lastFeedback && lastFeedback.issues.length > 0) {
+        debug(
+          `[AutoResize] ${debugLabel} \u2014 WARNING: Giving up with ${lastFeedback.issues.length} unresolved issue(s)`
+        );
+        lastFeedback.issues.forEach((issue, i) => {
+          debug(
+            `[AutoResize] ${debugLabel} \u2014   Unresolved ${i + 1}: [${issue.severity}] ${issue.element}: ${issue.problem}`
+          );
+        });
+      }
       break;
     }
     const screenshot = await captureFrameScreenshotFromApp(app, frameId);
@@ -25501,6 +25907,14 @@ async function runAutoResizeForDimension(opts) {
       debug(
         `[AutoResize] ${debugLabel} \u2014 reviewer found ${feedback.issues.length} issue(s), regenerating\u2026`
       );
+      feedback.issues.forEach((issue, i) => {
+        debug(
+          `[AutoResize] ${debugLabel} \u2014 Issue ${i + 1}: [${issue.severity.toUpperCase()}] ${issue.element}: ${issue.problem}`
+        );
+        debug(
+          `[AutoResize] ${debugLabel} \u2014   Fix: ${issue.preciseInstruction}`
+        );
+      });
       lastFeedback = feedback;
       onProgress?.("Refining layout\u2026");
     } catch {
@@ -26132,9 +26546,19 @@ var AutoResizePanelHost = ({ app }) => {
     autoResizePanelStore.getState()
   );
   const panelRef = useRef28(null);
+  const [dragOffset, setDragOffset] = useState31(
+    null
+  );
+  const [isDragging, setIsDragging] = useState31(false);
+  const dragStartRef = useRef28(null);
   useEffect33(() => {
     return autoResizePanelStore.subscribe(setPanelState);
   }, []);
+  useEffect33(() => {
+    if (panelState.isOpen) {
+      setDragOffset(null);
+    }
+  }, [panelState.element?.id]);
   useEffect33(() => {
     if (!panelState.isOpen) {
       return;
@@ -26150,6 +26574,32 @@ var AutoResizePanelHost = ({ app }) => {
     document.addEventListener("mousedown", handleMouseDown);
     return () => document.removeEventListener("mousedown", handleMouseDown);
   }, [panelState.isOpen, panelState.isRunning]);
+  useEffect33(() => {
+    if (!isDragging) {
+      return;
+    }
+    const handleMouseMove = (e) => {
+      if (!dragStartRef.current) {
+        return;
+      }
+      const deltaX = e.clientX - dragStartRef.current.mouseX;
+      const deltaY = e.clientY - dragStartRef.current.mouseY;
+      setDragOffset({
+        x: dragStartRef.current.panelX + deltaX,
+        y: dragStartRef.current.panelY + deltaY
+      });
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      dragStartRef.current = null;
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
   if (!panelState.isOpen || !panelState.element) {
     return null;
   }
@@ -26163,19 +26613,38 @@ var AutoResizePanelHost = ({ app }) => {
     { sceneX: x1 + element.width / 2, sceneY: y1 },
     appState
   );
-  const panelX = viewportX - appState.offsetLeft;
-  const panelY = Math.max(viewportY - appState.offsetTop - 82, 8);
+  const defaultPanelX = viewportX - appState.offsetLeft;
+  const defaultPanelY = Math.max(viewportY - appState.offsetTop - 82, 8);
+  const finalPanelX = dragOffset !== null ? dragOffset.x : defaultPanelX;
+  const finalPanelY = dragOffset !== null ? dragOffset.y : defaultPanelY;
+  const handleDragStart = (e) => {
+    const target = e.target;
+    if (!target.closest(".arp-header")) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    dragStartRef.current = {
+      mouseX: e.clientX,
+      mouseY: e.clientY,
+      panelX: finalPanelX,
+      panelY: finalPanelY
+    };
+  };
   return /* @__PURE__ */ jsx90(
     "div",
     {
       ref: panelRef,
+      onMouseDown: handleDragStart,
       style: {
         position: "absolute",
-        left: `${panelX}px`,
-        top: `${panelY}px`,
-        transform: "translateX(-50%)",
+        left: `${finalPanelX}px`,
+        top: `${finalPanelY}px`,
+        transform: dragOffset !== null ? "none" : "translateX(-50%)",
         zIndex: "var(--zIndex-canvasButtons)",
-        pointerEvents: "all"
+        pointerEvents: "all",
+        cursor: isDragging ? "grabbing" : "default"
       },
       children: /* @__PURE__ */ jsx90(
         AutoResizePanel,
@@ -53209,7 +53678,9 @@ async function runAgentLoop(opts) {
     webSearchEnabled,
     apiKey,
     chatModel,
-    agentImageModel,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    agentImageModel: _agentImageModel,
+    // Currently unused but kept for future use
     toolCtx,
     onUpdate,
     signal,
@@ -53503,7 +53974,8 @@ ${f.textContent}`).join("\n\n")}`;
             messages.push({
               role: "user",
               content: `generate_html_banner has failed ${htmlBannerFailures} times. STOP trying generate_html_banner. Instead, build the text layer using primitive tools in this order:
-1. Call add_rectangle to create the background zone (left side of the frame: x=0, y=0, width=${imageGenData.x > 0 ? imageGenData.x : Math.round(frameW * 0.45)}, height=${Math.round(
+1. Call add_rectangle to create the background zone (left side of the frame: x=0, y=0, width=${imageGenData.x > 0 ? imageGenData.x : Math.round(frameW * 0.45)}, height=${// eslint-disable-next-line no-loop-func
+              Math.round(
                 augmentedToolCtx.excalidrawAPI.getSceneElements().find((el) => el.id === imageGenData.frameId)?.height ?? 512
               )} inside frameId="${imageGenData.frameId}")
 2. Call add_text for each text element (headline, subheadline, CTA label) inside the same frameId
@@ -53539,14 +54011,20 @@ Use the frameId="${imageGenData.frameId}" for all elements. Keep all elements wi
             htmlSource: parsedArgs.html ?? "",
             frame: {
               id: imageGenData?.frameId ?? "",
-              width: imageGenData ? (() => {
-                const el = augmentedToolCtx.excalidrawAPI.getSceneElements().find((e) => e.id === imageGenData.frameId);
-                return Math.round(el?.width ?? 512);
-              })() : 512,
-              height: imageGenData ? (() => {
-                const el = augmentedToolCtx.excalidrawAPI.getSceneElements().find((e) => e.id === imageGenData.frameId);
-                return Math.round(el?.height ?? 512);
-              })() : 512
+              width: imageGenData ? (
+                // eslint-disable-next-line no-loop-func
+                (() => {
+                  const el = augmentedToolCtx.excalidrawAPI.getSceneElements().find((e) => e.id === imageGenData.frameId);
+                  return Math.round(el?.width ?? 512);
+                })()
+              ) : 512,
+              height: imageGenData ? (
+                // eslint-disable-next-line no-loop-func
+                (() => {
+                  const el = augmentedToolCtx.excalidrawAPI.getSceneElements().find((e) => e.id === imageGenData.frameId);
+                  return Math.round(el?.height ?? 512);
+                })()
+              ) : 512
             },
             imagePlacement: imageGenData ? {
               x: imageGenData.x,
@@ -54736,6 +55214,7 @@ var AIChatPanel = React63.forwardRef(
           setStatusText("");
         }
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
         prompt,
         isLoading,