@orangecatai/adgen-canvas 0.0.7 → 0.0.8

package/dist/dev/index.js

@@ -67,10 +67,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-2Q3FNCU4.js";
+} from "./chunk-LAGHQ2FH.js";
 import {
   define_import_meta_env_default
-} from "./chunk-MW637LK5.js";
+} from "./chunk-FAXV62EG.js";
 import {
   en_default
 } from "./chunk-IFMURN5W.js";
@@ -9765,7 +9765,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-L2UC5LX5.js").then(
+        (blob2) => import("./data/image-FJMUJMRD.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -23539,8 +23539,9 @@ function detectEllipse(style, width, height) {
   const raw = style.borderTopLeftRadius || "0";
   if (raw.includes("%")) {
     const pct = parseFloat(raw);
-    if (!isNaN(pct) && pct >= 50)
+    if (!isNaN(pct) && pct >= 50) {
       return true;
+    }
   } else {
     const px = parseFloat(raw);
     if (!isNaN(px) && px > 0 && px >= width / 2 && px >= height / 2) {
@@ -23553,13 +23554,13 @@ function isGradient(bgImage) {
   return bgImage !== "none" && (bgImage.includes("linear-gradient") || bgImage.includes("radial-gradient"));
 }
 function extractGradientColor(bgImage) {
-  const matches = [
-    ...bgImage.matchAll(/(#[\da-fA-F]{3,8}|rgba?\([^)]+\))/g)
-  ];
-  if (matches.length === 0)
+  const matches = [...bgImage.matchAll(/(#[\da-fA-F]{3,8}|rgba?\([^)]+\))/g)];
+  if (matches.length === 0) {
     return "#1a1a2e";
-  if (matches.length === 1)
+  }
+  if (matches.length === 1) {
     return colorToHex(matches[0][1]);
+  }
   if (bgImage.includes("repeating")) {
     return colorToHex(matches[0][1]);
   }
@@ -23594,8 +23595,9 @@ function getFullText(el) {
   for (const node of el.childNodes) {
     if (node.nodeType === Node.TEXT_NODE) {
       const t2 = node.textContent || "";
-      if (t2.trim())
+      if (t2.trim()) {
         hasInlineContent = true;
+      }
       text += t2;
     } else if (node.nodeType === Node.ELEMENT_NODE) {
       const child = node;
@@ -23604,8 +23606,9 @@ function getFullText(el) {
         hasInlineContent = true;
       } else if (INLINE_TAGS.has(child.tagName)) {
         const t2 = child.textContent || "";
-        if (t2.trim())
+        if (t2.trim()) {
           hasInlineContent = true;
+        }
         text += t2;
       }
     }
@@ -23681,9 +23684,7 @@ async function htmlToExcalidrawElements(html, frameX, frameY, frameWidth, frameH
       const y = Math.round(frameY + (rect.top - rootRect.top));
       const w = Math.round(rect.width);
       const h = Math.round(rect.height);
-      const globalOpacity = Math.round(
-        parseFloat(style.opacity ?? "1") * 100
-      );
+      const globalOpacity = Math.round(parseFloat(style.opacity ?? "1") * 100);
       const bgImage = style.backgroundImage || "none";
       const bgColor = style.backgroundColor || "transparent";
       const borderColor = style.borderColor || "transparent";
@@ -23867,10 +23868,9 @@ function computeCropLoss(sourceAR, targetAR) {
   if (sourceAR >= targetAR) {
     const usedWidth = targetAR * 1;
     return 1 - usedWidth / sourceAR;
-  } else {
-    const usedHeight = sourceAR / targetAR;
-    return 1 - usedHeight;
   }
+  const usedHeight = sourceAR / targetAR;
+  return 1 - usedHeight;
 }
 function needsBackgroundRegeneration(srcW, srcH, tgtW, tgtH) {
   const srcAR = srcW / srcH;
@@ -23915,14 +23915,18 @@ function fitImageToFrame(imgW, imgH, frameW, frameH) {
 }
 function classifyBannerType(w, h) {
   const ar = w / h;
-  if (ar >= 3.5)
+  if (ar >= 3.5) {
     return "horizontal-strip";
-  if (ar <= 1 / 3.5)
+  }
+  if (ar <= 1 / 3.5) {
     return "vertical-strip";
-  if (ar >= 1.6)
+  }
+  if (ar >= 1.6) {
     return "landscape";
-  if (ar <= 0.65)
+  }
+  if (ar <= 0.65) {
     return "portrait";
+  }
   return "square";
 }
 function getBannerLayoutGuidance(srcW, srcH, tgtW, tgtH) {
@@ -23934,7 +23938,13 @@ HORIZONTAL STRIP BANNER (${tgtW}\xD7${tgtH}) \u2014 VERY WIDE AND SHORT:
 \u2022 This is an extreme format. Height is tiny so you must be ruthless with vertical space.
 \u2022 Arrange elements in a horizontal flow \u2014 LEFT to RIGHT.
 \u2022 Brand/logo: anchor hard left (x: 8\u201320px, vertically centred).
-\u2022 Headline text: place in the centre-left region; REDUCE font size aggressively (aim for ~${Math.max(10, Math.round(tgtH * 0.35))}\u2013${Math.max(14, Math.round(tgtH * 0.5))}px). Single line only \u2014 no wrapping.
+\u2022 Headline text: place in the centre-left region; REDUCE font size aggressively (aim for ~${Math.max(
+      10,
+      Math.round(tgtH * 0.35)
+    )}\u2013${Math.max(
+      14,
+      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 NOTHING should be taller than the canvas. All elements must fit within ${tgtH}px height.
@@ -23942,9 +23952,14 @@ HORIZONTAL STRIP BANNER (${tgtW}\xD7${tgtH}) \u2014 VERY WIDE AND SHORT:
     "vertical-strip": `
 VERTICAL STRIP BANNER (${tgtW}\xD7${tgtH}) \u2014 NARROW AND TALL:
 \u2022 Stack all elements VERTICALLY, reading from TOP to BOTTOM.
-\u2022 Brand/logo: top-centre, small (height \u2248 ${Math.round(tgtH * 0.07)}px). Leave 8\u201316px top padding.
+\u2022 Brand/logo: top-centre, small (height \u2248 ${Math.round(
+      tgtH * 0.07
+    )}px). Leave 8\u201316px top padding.
 \u2022 Hero/product image: centre of canvas, width \u2248 85% of canvas width, maintain aspect ratio.
-\u2022 Headline text: below the image, centred, font size \u2248 ${Math.max(12, Math.round(tgtW * 0.1))}\u2013${Math.max(16, Math.round(tgtW * 0.14))}px, text-align: centre.
+\u2022 Headline text: below the image, centred, font size \u2248 ${Math.max(
+      12,
+      Math.round(tgtW * 0.1)
+    )}\u2013${Math.max(16, Math.round(tgtW * 0.14))}px, text-align: centre.
 \u2022 Sub-headline or body text: below headline, smaller font, centred.
 \u2022 CTA button: at the bottom (bottom 12% of canvas), centred, ~80% width.
 \u2022 Leave \u22658px horizontal padding on each side \u2014 nothing should touch the edges.`,
@@ -23971,7 +23986,10 @@ LANDSCAPE FORMAT (${tgtW}\xD7${tgtH}):
 \u2022 Product image: right half or left half (check source for preference).
 \u2022 Headline + subtext: on the opposite side from image.
 \u2022 CTA: below the text block.
-\u2022 Scale font sizes to \u2265${Math.max(16, Math.round(tgtH * 0.05))}px for readability.`
+\u2022 Scale font sizes to \u2265${Math.max(
+      16,
+      Math.round(tgtH * 0.05)
+    )}px for readability.`
   };
   let result = guidance[type] ?? guidance.square;
   if (srcType !== type) {
@@ -23995,18 +24013,35 @@ function buildAutoResizePrompt(info, targetW, targetH) {
     const pctW = (el.width / srcW * 100).toFixed(1);
     const pctH = (el.height / srcH * 100).toFixed(1);
     if (el.kind === "text") {
-      return `[${i + 1}] TEXT \u2014 source pos: x=${Math.round(el.relX)}px (${pctX}% of W), y=${Math.round(el.relY)}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(el.height)}px (${pctW}%\xD7${pctH}% of canvas)
+      return `[${i + 1}] TEXT \u2014 source pos: x=${Math.round(
+        el.relX
+      )}px (${pctX}% of W), y=${Math.round(
+        el.relY
+      )}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(
+        el.height
+      )}px (${pctW}%\xD7${pctH}% of canvas)
     content: "${el.text.replace(/"/g, '\\"').slice(0, 200)}"
     style: font-size: ${el.fontSize}px, color: ${el.color}, text-align: ${el.textAlign}, opacity: ${Math.round(el.opacity)}%`;
     } else if (el.kind === "image") {
       const placeholder = `IMG_PLACEHOLDER_${i}`;
       imagePlaceholders.set(placeholder, el.dataUrl);
-      return `[${i + 1}] IMAGE \u2014 source pos: x=${Math.round(el.relX)}px (${pctX}% of W), y=${Math.round(el.relY)}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(el.height)}px (${pctW}%\xD7${pctH}% of canvas)
+      return `[${i + 1}] IMAGE \u2014 source pos: x=${Math.round(
+        el.relX
+      )}px (${pctX}% of W), y=${Math.round(
+        el.relY
+      )}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(
+        el.height
+      )}px (${pctW}%\xD7${pctH}% of canvas)
     Place this image as: background-image: url(${placeholder}); background-size: cover; background-position: center; opacity: ${(el.opacity / 100).toFixed(2)}`;
-    } else {
-      return `[${i + 1}] SHAPE/RECT \u2014 source pos: x=${Math.round(el.relX)}px (${pctX}% of W), y=${Math.round(el.relY)}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(el.height)}px (${pctW}%\xD7${pctH}% of canvas)
-    style: background-color: ${el.backgroundColor}, border-radius: ${el.borderRadius}px, opacity: ${Math.round(el.opacity)}%`;
     }
+    return `[${i + 1}] SHAPE/RECT \u2014 source pos: x=${Math.round(
+      el.relX
+    )}px (${pctX}% of W), y=${Math.round(
+      el.relY
+    )}px (${pctY}% of H), size: ${Math.round(el.width)}\xD7${Math.round(
+      el.height
+    )}px (${pctW}%\xD7${pctH}% of canvas)
+    style: background-color: ${el.backgroundColor}, border-radius: ${el.borderRadius}px, opacity: ${Math.round(el.opacity)}%`;
   }).join("\n\n");
   const layoutGuidance = getBannerLayoutGuidance(srcW, srcH, targetW, targetH);
   const bgCss = background.type === "solid" ? `background-color: ${background.color};` : "";
@@ -24044,20 +24079,23 @@ Return ONLY the raw HTML. No markdown, no code fences, no explanation.`;
   return { prompt, imagePlaceholders };
 }
 async function callOpenRouterForHtml(prompt, apiKey, model, signal) {
-  const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
-    method: "POST",
-    signal,
-    headers: {
-      Authorization: `Bearer ${apiKey}`,
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({
-      model,
-      messages: [{ role: "user", content: prompt }],
-      stream: false,
-      temperature: 0.3
-    })
-  });
+  const response = await fetch(
+    "https://openrouter.ai/api/v1/chat/completions",
+    {
+      method: "POST",
+      signal,
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        model,
+        messages: [{ role: "user", content: prompt }],
+        stream: false,
+        temperature: 0.3
+      })
+    }
+  );
   if (!response.ok) {
     let msg = `OpenRouter API error ${response.status}`;
     try {
@@ -24076,8 +24114,9 @@ async function callOpenRouterForHtml(prompt, apiKey, model, signal) {
 }
 function findInsertAfterFrame(elements, frameId) {
   const frameIdx = elements.findIndex((el) => el.id === frameId);
-  if (frameIdx < 0)
+  if (frameIdx < 0) {
     return elements.length;
+  }
   let end = frameIdx + 1;
   for (let i = frameIdx + 1; i < elements.length; i++) {
     const el = elements[i];
@@ -24129,12 +24168,19 @@ async function runAutoResizeForDimension(opts) {
   let bgImageDataUrl = null;
   if (info.background.type === "image") {
     const srcBgUrl = info.background.dataUrl;
-    const needsRegen = needsBackgroundRegeneration(srcFrame.width, srcFrame.height, tgtW, tgtH);
+    const needsRegen = needsBackgroundRegeneration(
+      srcFrame.width,
+      srcFrame.height,
+      tgtW,
+      tgtH
+    );
     debug(`[AutoResize] ${debugLabel} \u2014 background: needsRegen=${needsRegen}`);
     if (needsRegen) {
       onProgress?.("Regenerating background image\u2026");
       const ar = nearestGeminiAspectRatio(tgtW, tgtH);
-      debug(`[AutoResize] ${debugLabel} \u2014 calling Gemini for background regen (ar=${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,
@@ -24155,13 +24201,15 @@ async function runAutoResizeForDimension(opts) {
   }
   if (bgImageDataUrl) {
     onProgress?.("Placing background\u2026");
-    const { width: imgNatW, height: imgNatH } = await getImageNaturalDimensions(bgImageDataUrl);
-    const { relX, relY, width: imgW, height: imgH } = fitImageToFrame(
-      imgNatW,
-      imgNatH,
-      tgtW,
-      tgtH
+    const { width: imgNatW, height: imgNatH } = await getImageNaturalDimensions(
+      bgImageDataUrl
     );
+    const {
+      relX,
+      relY,
+      width: imgW,
+      height: imgH
+    } = fitImageToFrame(imgNatW, imgNatH, tgtW, tgtH);
     const bgFileId = nanoid();
     const bgEl = newImageElement({
       type: "image",
@@ -24194,7 +24242,9 @@ async function runAutoResizeForDimension(opts) {
     ]);
   }
   onProgress?.("Generating layout\u2026");
-  debug(`[AutoResize] ${debugLabel} \u2014 calling OpenRouter for HTML layout (model=${chatModel})`);
+  debug(
+    `[AutoResize] ${debugLabel} \u2014 calling OpenRouter for HTML layout (model=${chatModel})`
+  );
   const { prompt, imagePlaceholders } = buildAutoResizePrompt(info, tgtW, tgtH);
   let html = await callOpenRouterForHtml(
     prompt,
@@ -24205,7 +24255,9 @@ async function runAutoResizeForDimension(opts) {
   if (!html || html.length < 20) {
     throw new Error("LLM returned empty HTML");
   }
-  debug(`[AutoResize] ${debugLabel} \u2014 HTML received (${html.length} chars), substituting ${imagePlaceholders.size} image placeholder(s)\u2026`);
+  debug(
+    `[AutoResize] ${debugLabel} \u2014 HTML received (${html.length} chars), substituting ${imagePlaceholders.size} image placeholder(s)\u2026`
+  );
   for (const [placeholder, dataUrl] of imagePlaceholders) {
     html = html.split(`url(${placeholder})`).join(`url(${dataUrl})`);
   }
@@ -24334,7 +24386,9 @@ async function runAutoResizeForDimension(opts) {
   if (imageFiles.length > 0) {
     app.addFiles(imageFiles);
   }
-  debug(`[AutoResize] ${debugLabel} \u2014 inserted ${newEls.length} elements (${bgEls.length} bg, ${fgEls.length} fg)`);
+  debug(
+    `[AutoResize] ${debugLabel} \u2014 inserted ${newEls.length} elements (${bgEls.length} bg, ${fgEls.length} fg)`
+  );
   return { frameId };
 }
 function preCreateAllFrames(targetDimensions, sourceFrame, app) {
@@ -24351,7 +24405,13 @@ function preCreateAllFrames(targetDimensions, sourceFrame, app) {
       locked: false,
       name: dim.label ?? `${dim.width}\xD7${dim.height}`
     });
-    return { frame: newFrame, x: startX, y, width: dim.width, height: dim.height };
+    return {
+      frame: newFrame,
+      x: startX,
+      y,
+      width: dim.width,
+      height: dim.height
+    };
   });
   const currentEls = app.getSceneElements();
   const newFrameEls = frameInfos.map((fi) => fi.frame);
@@ -24384,9 +24444,7 @@ async function runAutoResize(opts) {
   } = opts;
   const results = new Array(targetDimensions.length);
   const elements = app.getSceneElements();
-  const sourceFrame = elements.find(
-    (el) => el.id === sourceFrameId
-  );
+  const sourceFrame = elements.find((el) => el.id === sourceFrameId);
   if (!sourceFrame) {
     return targetDimensions.map(() => ({
       status: "error",
@@ -24401,11 +24459,15 @@ async function runAutoResize(opts) {
   }));
   const BATCH_SIZE = 3;
   const total = targetDimensions.length;
-  debug(`[AutoResize] Starting ${total} dimension(s), batch size ${BATCH_SIZE}`);
+  debug(
+    `[AutoResize] Starting ${total} dimension(s), batch size ${BATCH_SIZE}`
+  );
   for (let batchStart = 0; batchStart < total; batchStart += BATCH_SIZE) {
     const batchEnd = Math.min(batchStart + BATCH_SIZE, total);
     const batchNum = Math.floor(batchStart / BATCH_SIZE) + 1;
-    debug(`[AutoResize] Batch ${batchNum}: dimensions ${batchStart + 1}\u2013${batchEnd} of ${total}`);
+    debug(
+      `[AutoResize] Batch ${batchNum}: dimensions ${batchStart + 1}\u2013${batchEnd} of ${total}`
+    );
     await Promise.allSettled(
       targetDimensions.slice(batchStart, batchEnd).map(async (dim, batchIdx) => {
         const i = batchStart + batchIdx;
@@ -24423,7 +24485,9 @@ async function runAutoResize(opts) {
           debug(`[AutoResize] ${debugLabel} \u2014 credits OK`);
         }
         onProgress?.(i, total, "bg-regen", label);
-        debug(`[AutoResize] ${debugLabel} \u2014 starting at (${placements[i].x}, ${placements[i].y})`);
+        debug(
+          `[AutoResize] ${debugLabel} \u2014 starting at (${placements[i].x}, ${placements[i].y})`
+        );
         try {
           const { frameId } = await runAutoResizeForDimension({
             info,
@@ -24593,9 +24657,7 @@ var ErrorIcon = () => /* @__PURE__ */ jsxs47("svg", { width: "11", height: "11",
   ),
   /* @__PURE__ */ jsx87("circle", { cx: "6", cy: "8.5", r: "0.65", fill: "currentColor" })
 ] });
-var CustomDimInput = ({
-  onAdd
-}) => {
+var CustomDimInput = ({ onAdd }) => {
   const [w, setW] = useState29("");
   const [h, setH] = useState29("");
   const handleAdd = () => {
@@ -24682,8 +24744,9 @@ var AutoResizePanel = ({
   };
   const addCustom = (dim) => {
     const key = dim.label;
-    if (selected.has(key))
+    if (selected.has(key)) {
       return;
+    }
     setExtras((prev) => [...prev, dim]);
     setSelected((prev) => /* @__PURE__ */ new Set([...prev, key]));
   };
@@ -24714,8 +24777,9 @@ var AutoResizePanel = ({
     };
   }, []);
   const handleGenerate = useCallback15(async () => {
-    if (allDimensions.length === 0)
+    if (allDimensions.length === 0) {
       return;
+    }
     setRunning(true);
     setGlobalError(null);
     const initialStates = {};
@@ -24738,9 +24802,7 @@ var AutoResizePanel = ({
       }
     }
     const elements = app.getSceneElements();
-    const sourceFrame = elements.find(
-      (el) => el.id === element.id
-    );
+    const sourceFrame = elements.find((el) => el.id === element.id);
     let preCreatedFrames = [];
     if (sourceFrame) {
       preCreatedFrames = preCreateAllFrames(allDimensions, sourceFrame, app);
@@ -24793,7 +24855,18 @@ var AutoResizePanel = ({
       abortRef.current = null;
       cleanupShimmer();
     }
-  }, [allDimensions, app, element.id, updateDimState, cleanupShimmer, onBeforeAutoResize, onAfterAutoResize, openRouterApiKey, chatModel, agentImageModel]);
+  }, [
+    allDimensions,
+    app,
+    element.id,
+    updateDimState,
+    cleanupShimmer,
+    onBeforeAutoResize,
+    onAfterAutoResize,
+    openRouterApiKey,
+    chatModel,
+    agentImageModel
+  ]);
   const handleCancel = () => {
     abortRef.current?.abort();
     setRunning(false);
@@ -25377,7 +25450,9 @@ var FrameToolbar = ({
               onClose: () => setShowAutoResize(false),
               onBeforeAutoResize: app.props.onBeforeAutoResize,
               onAfterAutoResize: app.props.onAfterAutoResize,
-              openRouterApiKey: resolveOpenRouterApiKey(app.props.openRouterApiKey),
+              openRouterApiKey: resolveOpenRouterApiKey(
+                app.props.openRouterApiKey
+              ),
               chatModel: app.props.chatModel ?? "google/gemini-2.0-flash-001",
               agentImageModel: app.props.agentImageModel
             }
@@ -25397,8 +25472,9 @@ var AutoResizeShimmerLayer = () => {
   const [, forceUpdate] = useReducer((n) => n + 1, 0);
   useEffect32(() => autoResizeStore.subscribe(forceUpdate), []);
   const frames = autoResizeStore.getLoadingFrames();
-  if (frames.length === 0)
+  if (frames.length === 0) {
     return null;
+  }
   const zoomVal = appState.zoom.value;
   return /* @__PURE__ */ jsx89(Fragment13, { children: frames.map((frame) => {
     const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords6(
@@ -49971,8 +50047,14 @@ var BANNER_TOOLS = [
             type: "string",
             description: "Detailed generation prompt. When using a reference image, describe what you want Gemini to produce \u2014 e.g. 'use this building as the subject, wide cinematic crop with open sky on the left for text overlay'."
           },
-          x: { type: "number", description: "X position relative to the frame's top-left corner" },
-          y: { type: "number", description: "Y position relative to the frame's top-left corner" },
+          x: {
+            type: "number",
+            description: "X position relative to the frame's top-left corner"
+          },
+          y: {
+            type: "number",
+            description: "Y position relative to the frame's top-left corner"
+          },
           width: { type: "number", description: "Image width in pixels" },
           height: { type: "number", description: "Image height in pixels" },
           referenceImageIndex: {
@@ -50061,39 +50143,12 @@ var BANNER_TOOLS = [
       parameters: {
         type: "object",
         properties: {
-          elementId: { type: "string", description: "ID of the element to delete" }
-        },
-        required: ["elementId"],
-        additionalProperties: false
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "generate_image",
-      description: "Generate an image using AI (Gemini) and place it onto the canvas. Always call this for any photo or image content \u2014 even when the user has attached a reference image. The attached image is passed to Gemini as visual reference; Gemini generates the final output. Use referenceImageIndex to tell Gemini which user attachment to reference. IMPORTANT: your prompt must describe a purely visual scene \u2014 NO text, NO typography, NO words, NO captions, NO watermarks. All copy is handled by the HTML layer. A 'no text' safety suffix will be auto-appended, but you must also describe composition clearly (e.g. which side should be left open/empty for the HTML text).",
-      parameters: {
-        type: "object",
-        properties: {
-          frameId: {
-            type: "string",
-            description: "ID of the parent frame to insert the image into"
-          },
-          prompt: {
+          elementId: {
             type: "string",
-            description: "Detailed generation prompt. When using a reference image, describe what you want Gemini to produce \u2014 e.g. 'use this building as the subject, wide cinematic crop with open sky on the left for text overlay'."
-          },
-          x: { type: "number", description: "X position relative to the frame's top-left corner" },
-          y: { type: "number", description: "Y position relative to the frame's top-left corner" },
-          width: { type: "number", description: "Image width in pixels" },
-          height: { type: "number", description: "Image height in pixels" },
-          referenceImageIndex: {
-            type: "number",
-            description: "0-based index of the user's attached image to pass to Gemini as reference. Always use 0 when the user has attached an image."
+            description: "ID of the element to delete"
           }
         },
-        required: ["frameId", "prompt", "x", "y", "width", "height"],
+        required: ["elementId"],
         additionalProperties: false
       }
     }
@@ -50707,7 +50762,14 @@ async function execGenerateHtmlBanner(args, ctx) {
   }
   let parsedEls;
   try {
-    parsedEls = await htmlToExcalidrawElements(html, frameX, frameY, frameW, frameH, ctx.customFontMap);
+    parsedEls = await htmlToExcalidrawElements(
+      html,
+      frameX,
+      frameY,
+      frameW,
+      frameH,
+      ctx.customFontMap
+    );
   } catch (err) {
     const msg = err instanceof Error ? err.message : "HTML parse failed";
     return {
@@ -50717,7 +50779,9 @@ async function execGenerateHtmlBanner(args, ctx) {
     };
   }
   if (parsedEls.length === 0) {
-    const bgMatch = html.match(/\.(?:bg|canvas)[^{]*\{[^}]*background(?:-color)?:\s*(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))/);
+    const bgMatch = html.match(
+      /\.(?:bg|canvas)[^{]*\{[^}]*background(?:-color)?:\s*(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))/
+    );
     const fallbackBg = bgMatch ? bgMatch[1] : null;
     if (fallbackBg) {
       const bgRect = newElement6({
@@ -50833,7 +50897,9 @@ async function execGenerateHtmlBanner(args, ctx) {
   const frameIdx = currentEls.findIndex((el) => el.id === frame.id);
   const existingChildren = getFrameChildren8(currentEls, frame.id);
   const firstImageChildIdx = existingChildren.length > 0 ? currentEls.findIndex((el) => el.id === existingChildren[0].id) : frameIdx + 1;
-  const afterAllChildrenIdx = existingChildren.length > 0 ? currentEls.findIndex((el) => el.id === existingChildren[existingChildren.length - 1].id) + 1 : frameIdx + 1;
+  const afterAllChildrenIdx = existingChildren.length > 0 ? currentEls.findIndex(
+    (el) => el.id === existingChildren[existingChildren.length - 1].id
+  ) + 1 : frameIdx + 1;
   const withNew = [
     ...currentEls.slice(0, firstImageChildIdx),
     ...bgEls,
@@ -50848,10 +50914,7 @@ async function execGenerateHtmlBanner(args, ctx) {
     ctx.excalidrawAPI.addFiles(imageFiles);
   }
   ctx.excalidrawAPI.scrollToContent(frame, { fitToViewport: false });
-  const screenshot = await captureFrameScreenshot(
-    ctx.excalidrawAPI,
-    frame.id
-  );
+  const screenshot = await captureFrameScreenshot(ctx.excalidrawAPI, frame.id);
   return {
     success: true,
     data: {
@@ -51554,14 +51617,14 @@ ${f.textContent}`).join("\n\n")}`;
           htmlBannerFailures++;
           if (htmlBannerFailures >= 2 && imageGenData) {
             const frameW = Math.round(
-              augmentedToolCtx.excalidrawAPI.getSceneElements().find(
-                (el) => el.id === imageGenData.frameId
-              )?.width ?? 512
+              augmentedToolCtx.excalidrawAPI.getSceneElements().find((el) => el.id === imageGenData.frameId)?.width ?? 512
             );
             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(augmentedToolCtx.excalidrawAPI.getSceneElements().find((el) => el.id === imageGenData.frameId)?.height ?? 512)} inside frameId="${imageGenData.frameId}")
+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(
+                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
 3. Call add_rectangle for the CTA button background with a border-radius