@orangecatai/adgen-canvas 0.0.15 → 0.0.16

package/dist/dev/index.js

@@ -67,10 +67,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-FGSZO5WI.js";
+} from "./chunk-UJP3DIYP.js";
 import {
   define_import_meta_env_default
-} from "./chunk-EL4HTLYE.js";
+} from "./chunk-4VEZT6GV.js";
 import {
   en_default
 } from "./chunk-IFMURN5W.js";
@@ -9770,7 +9770,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-AVR5GHYZ.js").then(
+        (blob2) => import("./data/image-PZBTJSVV.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -22300,7 +22300,13 @@ function notify2() {
 }
 var templateBuilderStore = {
   open(sourceFrameId) {
-    state2 = { ...state2, isOpen: true, templateName: "", campaignTag: "", sourceFrameId: sourceFrameId ?? null };
+    state2 = {
+      ...state2,
+      isOpen: true,
+      templateName: "",
+      campaignTag: "",
+      sourceFrameId: sourceFrameId ?? null
+    };
     notify2();
   },
   close() {
@@ -22493,10 +22499,54 @@ var CheckIcon = () => /* @__PURE__ */ jsx83(
   }
 );
 var TemplateIcon = () => /* @__PURE__ */ jsxs45("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
-  /* @__PURE__ */ jsx83("rect", { x: "1", y: "1", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.4" }),
-  /* @__PURE__ */ jsx83("rect", { x: "8", y: "1", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.4" }),
-  /* @__PURE__ */ jsx83("rect", { x: "1", y: "8", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.4" }),
-  /* @__PURE__ */ jsx83("rect", { x: "8", y: "8", width: "5", height: "5", rx: "1", stroke: "currentColor", strokeWidth: "1.4" })
+  /* @__PURE__ */ jsx83(
+    "rect",
+    {
+      x: "1",
+      y: "1",
+      width: "5",
+      height: "5",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4"
+    }
+  ),
+  /* @__PURE__ */ jsx83(
+    "rect",
+    {
+      x: "8",
+      y: "1",
+      width: "5",
+      height: "5",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4"
+    }
+  ),
+  /* @__PURE__ */ jsx83(
+    "rect",
+    {
+      x: "1",
+      y: "8",
+      width: "5",
+      height: "5",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4"
+    }
+  ),
+  /* @__PURE__ */ jsx83(
+    "rect",
+    {
+      x: "8",
+      y: "8",
+      width: "5",
+      height: "5",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4"
+    }
+  )
 ] });
 var AutoResizeIcon = () => /* @__PURE__ */ jsxs45("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
   /* @__PURE__ */ jsx83(
@@ -22549,7 +22599,9 @@ var FrameToolbar = ({
   const [localWidth, setLocalWidth] = useState27(Math.round(element.width));
   const [localHeight, setLocalHeight] = useState27(Math.round(element.height));
   const [panelState, setPanelState] = useState27(autoResizePanelStore.getState());
-  const [builderState, setBuilderState] = useState27(templateBuilderStore.getState());
+  const [builderState, setBuilderState] = useState27(
+    templateBuilderStore.getState()
+  );
   const dropdownRef = useRef24(null);
   useEffect29(() => {
     return autoResizePanelStore.subscribe(setPanelState);
@@ -22882,6 +22934,12 @@ import { useEffect as useEffect33, useRef as useRef28, useState as useState31 }
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords7 } from "@orangecatai/common";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords10 } from "@orangecatai/element";
 
+// utils/openRouterApiKey.ts
+function resolveOpenRouterApiKey(propKey) {
+  const normalizedPropKey = propKey?.trim();
+  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_OPENROUTER_API_KEY ? define_import_meta_env_default.VITE_APP_OPENROUTER_API_KEY : "") ?? "";
+}
+
 // components/auto-resize/AutoResizePanel.tsx
 import { useCallback as useCallback16, useEffect as useEffect32, useRef as useRef27, useState as useState30 } from "react";
 
@@ -24674,11 +24732,19 @@ function extractFrameInfo(elements, frame, files) {
       if (el.type === "image") {
         const fileData = files[el.fileId];
         if (fileData?.dataURL) {
-          background = { type: "image", dataUrl: fileData.dataURL, elementId: el.id };
+          background = {
+            type: "image",
+            dataUrl: fileData.dataURL,
+            elementId: el.id
+          };
           continue;
         }
       } else if (el.type === "rectangle" && el.backgroundColor && el.backgroundColor !== "transparent") {
-        background = { type: "solid", color: el.backgroundColor, elementId: el.id };
+        background = {
+          type: "solid",
+          color: el.backgroundColor,
+          elementId: el.id
+        };
         continue;
       }
     }
@@ -24797,8 +24863,9 @@ function containImageInBbox(imgW, imgH, bboxW, bboxH) {
 async function captureFrameScreenshotFromApp(app, frameId) {
   const elements = app.getSceneElements();
   const frame = elements.find((el) => el.id === frameId);
-  if (!frame)
+  if (!frame) {
     return null;
+  }
   const children = getFrameChildren4(elements, frameId);
   try {
     const canvas = await exportToCanvas(
@@ -24910,8 +24977,9 @@ async function tagImageElementsWithVision(info, screenshotDataUrl, openRouterApi
   const imageEls = info.foreground.filter(
     (el) => el.kind === "image" && !el.slotType
   );
-  if (imageEls.length === 0)
+  if (imageEls.length === 0) {
     return;
+  }
   const srcW = info.frame.width;
   const srcH = info.frame.height;
   const elementList = imageEls.map((el, i) => {
@@ -24960,8 +25028,9 @@ Return ONLY a JSON object mapping the element number (string key) to its role. E
         })
       }
     );
-    if (!response.ok)
+    if (!response.ok) {
       return;
+    }
     const data = await response.json();
     const raw = data?.choices?.[0]?.message?.content ?? "";
     const parsed = JSON.parse(raw);
@@ -25325,13 +25394,15 @@ async function runAutoResizeForDimension(opts) {
         newEls.push({ ...el, frameId });
       } else if (pel.kind === "image") {
         const fileId2 = nanoid();
-        const { width: natW, height: natH } = await getImageNaturalDimensions(pel.dataUrl);
-        const { relX, relY, width: imgW, height: imgH } = containImageInBbox(
-          natW,
-          natH,
-          pel.width,
-          pel.height
+        const { width: natW, height: natH } = await getImageNaturalDimensions(
+          pel.dataUrl
         );
+        const {
+          relX,
+          relY,
+          width: imgW,
+          height: imgH
+        } = containImageInBbox(natW, natH, pel.width, pel.height);
         const el = newImageElement({
           type: "image",
           x: pel.x + relX,
@@ -25401,7 +25472,9 @@ async function runAutoResizeForDimension(opts) {
     }
     const screenshot = await captureFrameScreenshotFromApp(app, frameId);
     if (!screenshot) {
-      debug(`[AutoResize] ${debugLabel} \u2014 screenshot unavailable, skipping reviewer`);
+      debug(
+        `[AutoResize] ${debugLabel} \u2014 screenshot unavailable, skipping reviewer`
+      );
       break;
     }
     onProgress?.("Reviewing layout\u2026");
@@ -25410,7 +25483,9 @@ async function runAutoResizeForDimension(opts) {
         screenshotDataUrl: screenshot,
         htmlSource: html,
         frame: { id: frameId, width: tgtW, height: tgtH },
-        userBrief: `Auto-resize ad from ${Math.round(srcFrame.width)}\xD7${Math.round(srcFrame.height)} to ${tgtW}\xD7${tgtH}`,
+        userBrief: `Auto-resize ad from ${Math.round(
+          srcFrame.width
+        )}\xD7${Math.round(srcFrame.height)} to ${tgtW}\xD7${tgtH}`,
         apiKey: openRouterApiKey,
         reviewerModel: chatModel,
         signal,
@@ -25418,7 +25493,9 @@ async function runAutoResizeForDimension(opts) {
       });
       reviewRounds++;
       if (feedback.approved) {
-        debug(`[AutoResize] ${debugLabel} \u2014 reviewer approved (round ${reviewRounds})`);
+        debug(
+          `[AutoResize] ${debugLabel} \u2014 reviewer approved (round ${reviewRounds})`
+        );
         break;
       }
       debug(
@@ -25494,7 +25571,10 @@ async function runAutoResize(opts) {
     }));
   }
   const info = extractFrameInfo(elements, sourceFrame, app.files);
-  const sourceScreenshot = await captureFrameScreenshotFromApp(app, sourceFrameId);
+  const sourceScreenshot = await captureFrameScreenshotFromApp(
+    app,
+    sourceFrameId
+  );
   if (sourceScreenshot) {
     await tagImageElementsWithVision(
       info,
@@ -25590,16 +25670,95 @@ var PRESETS = [
   { label: "160\xD7600", width: 160, height: 600, desc: "Wide Skyscraper" }
 ];
 var ResizeIcon = () => /* @__PURE__ */ jsxs48("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
-  /* @__PURE__ */ jsx89("rect", { x: "1.5", y: "1.5", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.4" }),
-  /* @__PURE__ */ jsx89("rect", { x: "7.5", y: "7.5", width: "7", height: "7", rx: "1", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "2 1", opacity: "0.6" }),
-  /* @__PURE__ */ jsx89("path", { d: "M9.5 6.5L13.5 6.5M13.5 6.5L13.5 2.5M13.5 2.5L9.5 2.5", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx89(
+    "rect",
+    {
+      x: "1.5",
+      y: "1.5",
+      width: "7",
+      height: "7",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4"
+    }
+  ),
+  /* @__PURE__ */ jsx89(
+    "rect",
+    {
+      x: "7.5",
+      y: "7.5",
+      width: "7",
+      height: "7",
+      rx: "1",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeDasharray: "2 1",
+      opacity: "0.6"
+    }
+  ),
+  /* @__PURE__ */ jsx89(
+    "path",
+    {
+      d: "M9.5 6.5L13.5 6.5M13.5 6.5L13.5 2.5M13.5 2.5L9.5 2.5",
+      stroke: "currentColor",
+      strokeWidth: "1.3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
 ] });
-var CloseIcon2 = () => /* @__PURE__ */ jsx89("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx89("path", { d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
-var CheckIcon3 = () => /* @__PURE__ */ jsx89("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx89("path", { d: "M2 6.5L4.5 9L10 3", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var SpinnerIcon2 = () => /* @__PURE__ */ jsx89("svg", { className: "arp-spinner", width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx89("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "20 14" }) });
+var CloseIcon2 = () => /* @__PURE__ */ jsx89("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx89(
+  "path",
+  {
+    d: "M1.5 1.5L10.5 10.5M10.5 1.5L1.5 10.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }
+) });
+var CheckIcon3 = () => /* @__PURE__ */ jsx89("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx89(
+  "path",
+  {
+    d: "M2 6.5L4.5 9L10 3",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var SpinnerIcon2 = () => /* @__PURE__ */ jsx89(
+  "svg",
+  {
+    className: "arp-spinner",
+    width: "13",
+    height: "13",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    children: /* @__PURE__ */ jsx89(
+      "circle",
+      {
+        cx: "7",
+        cy: "7",
+        r: "5.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeDasharray: "20 14"
+      }
+    )
+  }
+);
 var ErrorIcon = () => /* @__PURE__ */ jsxs48("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", children: [
   /* @__PURE__ */ jsx89("circle", { cx: "6", cy: "6", r: "4.5", stroke: "currentColor", strokeWidth: "1.3" }),
-  /* @__PURE__ */ jsx89("path", { d: "M6 3.5V6.5", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx89(
+    "path",
+    {
+      d: "M6 3.5V6.5",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round"
+    }
+  ),
   /* @__PURE__ */ jsx89("circle", { cx: "6", cy: "8.5", r: "0.65", fill: "currentColor" })
 ] });
 var CustomDimInput = ({ onAdd }) => {
@@ -25615,10 +25774,41 @@ var CustomDimInput = ({ onAdd }) => {
     }
   };
   return /* @__PURE__ */ jsxs48("div", { className: "arp-custom-row", children: [
-    /* @__PURE__ */ jsx89("input", { className: "arp-custom-input", type: "number", placeholder: "W", value: w, min: 1, onChange: (e) => setW(e.target.value), onPointerDown: (e) => e.stopPropagation() }),
+    /* @__PURE__ */ jsx89(
+      "input",
+      {
+        className: "arp-custom-input",
+        type: "number",
+        placeholder: "W",
+        value: w,
+        min: 1,
+        onChange: (e) => setW(e.target.value),
+        onPointerDown: (e) => e.stopPropagation()
+      }
+    ),
     /* @__PURE__ */ jsx89("span", { className: "arp-custom-x", children: "\xD7" }),
-    /* @__PURE__ */ jsx89("input", { className: "arp-custom-input", type: "number", placeholder: "H", value: h, min: 1, onChange: (e) => setH(e.target.value), onPointerDown: (e) => e.stopPropagation() }),
-    /* @__PURE__ */ jsx89("button", { className: "arp-custom-add", onClick: handleAdd, disabled: !w || !h, title: "Add custom dimension", children: "+ Add" })
+    /* @__PURE__ */ jsx89(
+      "input",
+      {
+        className: "arp-custom-input",
+        type: "number",
+        placeholder: "H",
+        value: h,
+        min: 1,
+        onChange: (e) => setH(e.target.value),
+        onPointerDown: (e) => e.stopPropagation()
+      }
+    ),
+    /* @__PURE__ */ jsx89(
+      "button",
+      {
+        className: "arp-custom-add",
+        onClick: handleAdd,
+        disabled: !w || !h,
+        title: "Add custom dimension",
+        children: "+ Add"
+      }
+    )
   ] });
 };
 var AutoResizePanel = ({
@@ -25649,17 +25839,19 @@ var AutoResizePanel = ({
   const togglePreset = (label) => {
     setSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(label))
+      if (next.has(label)) {
         next.delete(label);
-      else
+      } else {
         next.add(label);
+      }
       return next;
     });
   };
   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]));
   };
@@ -25671,9 +25863,15 @@ var AutoResizePanel = ({
       return next;
     });
   };
-  const updateDimState = useCallback16((label, update) => {
-    setDimStates((prev) => ({ ...prev, [label]: { ...prev[label], ...update } }));
-  }, []);
+  const updateDimState = useCallback16(
+    (label, update) => {
+      setDimStates((prev) => ({
+        ...prev,
+        [label]: { ...prev[label], ...update }
+      }));
+    },
+    []
+  );
   const cleanupShimmer = useCallback16(() => {
     autoResizeStore.clear();
   }, []);
@@ -25684,8 +25882,9 @@ var AutoResizePanel = ({
     };
   }, []);
   const handleGenerate = useCallback16(async () => {
-    if (allDimensions.length === 0)
+    if (allDimensions.length === 0) {
       return;
+    }
     setRunning(true);
     onRunningChange?.(true);
     setGlobalError(null);
@@ -25734,12 +25933,14 @@ var AutoResizePanel = ({
           const dimLabel = allDimensions[idx]?.label ?? label;
           if (phase === "done") {
             updateDimState(dimLabel, { status: "done" });
-            if (preCreatedFrames[idx])
+            if (preCreatedFrames[idx]) {
               autoResizeStore.markComplete(preCreatedFrames[idx].frameId);
+            }
           } else if (phase === "error") {
             updateDimState(dimLabel, { status: "error", error: label });
-            if (preCreatedFrames[idx])
+            if (preCreatedFrames[idx]) {
               autoResizeStore.markComplete(preCreatedFrames[idx].frameId);
+            }
           } else if (phase === "bg-regen") {
             updateDimState(dimLabel, { status: "bg-regen" });
           } else {
@@ -25751,7 +25952,9 @@ var AutoResizePanel = ({
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError" || controller.signal.aborted) {
       } else {
-        setGlobalError(err instanceof Error ? err.message : "An unexpected error occurred");
+        setGlobalError(
+          err instanceof Error ? err.message : "An unexpected error occurred"
+        );
       }
     } finally {
       setRunning(false);
@@ -25777,7 +25980,9 @@ var AutoResizePanel = ({
     onRunningChange?.(false);
     cleanupShimmer();
   };
-  const doneCount = Object.values(dimStates).filter((s) => s.status === "done").length;
+  const doneCount = Object.values(dimStates).filter(
+    (s) => s.status === "done"
+  ).length;
   const totalCount = allDimensions.length;
   const hasResults = doneCount > 0;
   return /* @__PURE__ */ jsx89(Fragment13, { children: /* @__PURE__ */ jsxs48(
@@ -25798,7 +26003,9 @@ var AutoResizePanel = ({
               className: "arp-header__close",
               onClick: () => {
                 if (running) {
-                  if (window.confirm("This will cancel the generation. Are you sure?")) {
+                  if (window.confirm(
+                    "This will cancel the generation. Are you sure?"
+                  )) {
                     handleCancel();
                     onClose();
                   }
@@ -25835,7 +26042,14 @@ var AutoResizePanel = ({
                   state3.status === "waiting" && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--waiting", children: "\u2026" }),
                   (state3.status === "bg-regen" || state3.status === "layout" || state3.status === "inserting") && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--running", children: /* @__PURE__ */ jsx89(SpinnerIcon2, {}) }),
                   state3.status === "done" && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--done", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) }),
-                  state3.status === "error" && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--error", title: state3.error, children: /* @__PURE__ */ jsx89(ErrorIcon, {}) })
+                  state3.status === "error" && /* @__PURE__ */ jsx89(
+                    "span",
+                    {
+                      className: "arp-status arp-status--error",
+                      title: state3.error,
+                      children: /* @__PURE__ */ jsx89(ErrorIcon, {})
+                    }
+                  )
                 ] })
               ]
             },
@@ -25847,9 +26061,23 @@ var AutoResizePanel = ({
           return /* @__PURE__ */ jsxs48("div", { className: "arp-extra-tag", children: [
             /* @__PURE__ */ jsx89("span", { children: d.label }),
             state3?.status === "done" && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--done", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) }),
-            state3?.status === "error" && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--error", title: state3.error, children: /* @__PURE__ */ jsx89(ErrorIcon, {}) }),
+            state3?.status === "error" && /* @__PURE__ */ jsx89(
+              "span",
+              {
+                className: "arp-status arp-status--error",
+                title: state3.error,
+                children: /* @__PURE__ */ jsx89(ErrorIcon, {})
+              }
+            ),
             (state3?.status === "bg-regen" || state3?.status === "layout") && /* @__PURE__ */ jsx89("span", { className: "arp-status arp-status--running", children: /* @__PURE__ */ jsx89(SpinnerIcon2, {}) }),
-            !running && /* @__PURE__ */ jsx89("button", { className: "arp-extra-tag__remove", onClick: () => removeExtra(d.label), children: "\xD7" })
+            !running && /* @__PURE__ */ jsx89(
+              "button",
+              {
+                className: "arp-extra-tag__remove",
+                onClick: () => removeExtra(d.label),
+                children: "\xD7"
+              }
+            )
           ] }, d.label);
         }) }),
         !running && /* @__PURE__ */ jsxs48(Fragment13, { children: [
@@ -25858,7 +26086,13 @@ var AutoResizePanel = ({
         ] }),
         globalError && /* @__PURE__ */ jsx89("div", { className: "arp-error", children: globalError }),
         running && totalCount > 0 && /* @__PURE__ */ jsxs48("div", { className: "arp-progress", children: [
-          /* @__PURE__ */ jsx89("div", { className: "arp-progress__bar-bg", children: /* @__PURE__ */ jsx89("div", { className: "arp-progress__bar-fill", style: { width: `${doneCount / totalCount * 100}%` } }) }),
+          /* @__PURE__ */ jsx89("div", { className: "arp-progress__bar-bg", children: /* @__PURE__ */ jsx89(
+            "div",
+            {
+              className: "arp-progress__bar-fill",
+              style: { width: `${doneCount / totalCount * 100}%` }
+            }
+          ) }),
           /* @__PURE__ */ jsxs48("span", { className: "arp-progress__text", children: [
             doneCount,
             "/",
@@ -25867,20 +26101,30 @@ var AutoResizePanel = ({
           ] })
         ] }),
         /* @__PURE__ */ jsx89("div", { className: "arp-actions", children: running ? /* @__PURE__ */ jsx89("button", { className: "arp-btn arp-btn--cancel", onClick: handleCancel, children: "Cancel" }) : hasResults ? /* @__PURE__ */ jsxs48(Fragment13, { children: [
-          /* @__PURE__ */ jsx89("button", { className: "arp-btn arp-btn--primary", onClick: handleGenerate, disabled: allDimensions.length === 0, children: "Generate more" }),
+          /* @__PURE__ */ jsx89(
+            "button",
+            {
+              className: "arp-btn arp-btn--primary",
+              onClick: handleGenerate,
+              disabled: allDimensions.length === 0,
+              children: "Generate more"
+            }
+          ),
           /* @__PURE__ */ jsx89("button", { className: "arp-btn arp-btn--ghost", onClick: onClose, children: "Done" })
-        ] }) : /* @__PURE__ */ jsx89("button", { className: "arp-btn arp-btn--primary", onClick: handleGenerate, disabled: allDimensions.length === 0, children: allDimensions.length === 0 ? "Select sizes above" : `Generate ${allDimensions.length} size${allDimensions.length !== 1 ? "s" : ""}` }) })
+        ] }) : /* @__PURE__ */ jsx89(
+          "button",
+          {
+            className: "arp-btn arp-btn--primary",
+            onClick: handleGenerate,
+            disabled: allDimensions.length === 0,
+            children: allDimensions.length === 0 ? "Select sizes above" : `Generate ${allDimensions.length} size${allDimensions.length !== 1 ? "s" : ""}`
+          }
+        ) })
       ]
     }
   ) });
 };
 
-// utils/openRouterApiKey.ts
-function resolveOpenRouterApiKey(propKey) {
-  const normalizedPropKey = propKey?.trim();
-  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_OPENROUTER_API_KEY ? define_import_meta_env_default.VITE_APP_OPENROUTER_API_KEY : "") ?? "";
-}
-
 // components/auto-resize/AutoResizePanelHost.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
 var AutoResizePanelHost = ({ app }) => {
@@ -25970,12 +26214,22 @@ import { arrayToMap as arrayToMap23 } from "@orangecatai/common";
 var SLOT_TYPES = [
   { id: "background", label: "Background", color: "#94a3b8", kind: "rect" },
   { id: "logo", label: "Logo", color: "#f97316", kind: "image" },
-  { id: "product_image", label: "Product Image", color: "#22c55e", kind: "image" },
+  {
+    id: "product_image",
+    label: "Product Image",
+    color: "#22c55e",
+    kind: "image"
+  },
   { id: "headline", label: "Headline", color: "#3b82f6", kind: "text" },
   { id: "subhead", label: "Subhead", color: "#8b5cf6", kind: "text" },
   { id: "cta", label: "CTA", color: "#ef4444", kind: "text" },
   { id: "signoff", label: "Signoff", color: "#64748b", kind: "text" },
-  { id: "auxiliary_image", label: "Aux Image", color: "#14b8a6", kind: "image" }
+  {
+    id: "auxiliary_image",
+    label: "Aux Image",
+    color: "#14b8a6",
+    kind: "image"
+  }
 ];
 
 // components/template-builder/TemplateBuilderTray.tsx
@@ -26004,7 +26258,11 @@ var TemplateBuilderTray = ({ app }) => {
         strokeColor: "transparent",
         opacity: 60
       });
-      newEl = { ...base, frameId: frame.id, customData: { slotType: slot.id, isSlot: true } };
+      newEl = {
+        ...base,
+        frameId: frame.id,
+        customData: { slotType: slot.id, isSlot: true }
+      };
     } else if (slot.kind === "text") {
       const base = newTextElement3({
         text: slot.label,
@@ -26013,7 +26271,11 @@ var TemplateBuilderTray = ({ app }) => {
         fontSize: 32,
         strokeColor: slot.color
       });
-      newEl = { ...base, frameId: frame.id, customData: { slotType: slot.id, isSlot: true } };
+      newEl = {
+        ...base,
+        frameId: frame.id,
+        customData: { slotType: slot.id, isSlot: true }
+      };
     } else {
       const base = newElement5({
         type: "rectangle",
@@ -26026,7 +26288,11 @@ var TemplateBuilderTray = ({ app }) => {
         strokeColor: slot.color,
         opacity: 40
       });
-      newEl = { ...base, frameId: frame.id, customData: { slotType: slot.id, isSlot: true } };
+      newEl = {
+        ...base,
+        frameId: frame.id,
+        customData: { slotType: slot.id, isSlot: true }
+      };
     }
     const elements = app.getSceneElements();
     const newElements = [...elements, newEl];
@@ -26132,14 +26398,19 @@ var TemplateBuilderPanelHost = ({
     }
     if (framesToSave.length === 0) {
       framesToSave = allElements.filter((el) => {
-        if (el.isDeleted || !isFrameLikeElement11(el))
+        if (el.isDeleted || !isFrameLikeElement11(el)) {
           return false;
+        }
         const children = getFrameChildren5(allElements, el.id);
-        return children.some((child) => child.customData?.isSlot === true);
+        return children.some(
+          (child) => child.customData?.isSlot === true
+        );
       });
     }
     if (framesToSave.length === 0) {
-      alert("No frame found to save. Please select a frame on the canvas first.");
+      alert(
+        "No frame found to save. Please select a frame on the canvas first."
+      );
       return;
     }
     const frame = framesToSave[0];
@@ -51045,8 +51316,15 @@ var BANNER_TOOLS = [
       parameters: {
         type: "object",
         properties: {
-          query: { type: "string", description: "Search query \u2014 name or tag keywords" },
-          type: { type: "string", enum: ["product", "logo", "lifestyle", "auxiliary"], description: "Optional filter by asset type" }
+          query: {
+            type: "string",
+            description: "Search query \u2014 name or tag keywords"
+          },
+          type: {
+            type: "string",
+            enum: ["product", "logo", "lifestyle", "auxiliary"],
+            description: "Optional filter by asset type"
+          }
         },
         required: ["query"],
         additionalProperties: false
@@ -51057,11 +51335,29 @@ var BANNER_TOOLS = [
     type: "function",
     function: {
       name: "list_brand_templates",
-      description: "List available brand templates. Call this when the user mentions a campaign, template, or asks for multiple sizes.",
+      description: `List available brand templates by keyword search across template names, campaign tags, and labels.
+
+MANDATORY SEARCH PROTOCOL \u2014 follow exactly, no shortcuts:
+
+ATTEMPT 1: Generate TWO sets of 10 keywords each from the user's request:
+  - Set A (campaign tag variations): 10 synonyms/abbreviations/phrasings of the campaign topic (e.g. for "noida datacenter": ["datacenter", "data center", "dc", "noida dc", "noida datacenter", "data centre", "server farm", "cloud infra", "hyperscale", "colocation"])
+  - Set B (template name variations): 10 different name keywords the template might have (e.g. ["noida", "datacenter campaign", "new datacenter", "dc launch", "infrastructure", "cloud", "enterprise", "b2b", "tech", "facility"])
+  Merge all 20 into the keywords array. Call list_brand_templates with all 20.
+
+IF templates returned is empty \u2192 ATTEMPT 2 (MANDATORY \u2014 do NOT skip):
+  Generate a completely DIFFERENT set of 20 keywords \u2014 do not reuse any from attempt 1. Think laterally: different synonyms, related industry terms, the city name, brand-adjacent words, seasonal terms. Call list_brand_templates again with the new 20.
+
+ONLY after both attempts return empty \u2192 tell the user no matching template was found.
+
+If no search context exists, call with an empty keywords array to list all templates.`,
       parameters: {
         type: "object",
         properties: {
-          campaignTag: { type: "string", description: "Optional campaign tag to filter templates" }
+          keywords: {
+            type: "array",
+            items: { type: "string" },
+            description: "Up to 20 keyword variations to search across template names, campaign tags, and labels. All are OR-matched case-insensitively. Generate 10 tag synonyms + 10 name variations from the user's request."
+          }
         },
         required: [],
         additionalProperties: false
@@ -51076,7 +51372,10 @@ var BANNER_TOOLS = [
       parameters: {
         type: "object",
         properties: {
-          variantId: { type: "string", description: "The template ID to fetch" }
+          variantId: {
+            type: "string",
+            description: "The template ID to fetch"
+          }
         },
         required: ["variantId"],
         additionalProperties: false
@@ -51091,8 +51390,14 @@ var BANNER_TOOLS = [
       parameters: {
         type: "object",
         properties: {
-          frameId: { type: "string", description: "The frame ID to load the template into" },
-          variantId: { type: "string", description: "The template ID to load (from list_brand_templates)" }
+          frameId: {
+            type: "string",
+            description: "The frame ID to load the template into"
+          },
+          variantId: {
+            type: "string",
+            description: "The template ID to load (from list_brand_templates)"
+          }
         },
         required: ["frameId", "variantId"],
         additionalProperties: false
@@ -51107,18 +51412,45 @@ var BANNER_TOOLS = [
       parameters: {
         type: "object",
         properties: {
-          frameId: { type: "string", description: "The frame ID containing slot elements" },
-          headline: { type: "string", description: "Text for the headline slot" },
+          frameId: {
+            type: "string",
+            description: "The frame ID containing slot elements"
+          },
+          headline: {
+            type: "string",
+            description: "Text for the headline slot"
+          },
           subhead: { type: "string", description: "Text for the subhead slot" },
           cta: { type: "string", description: "Text for the CTA slot" },
           signoff: { type: "string", description: "Text for the signoff slot" },
-          product_image_url: { type: "string", description: "URL for the product image slot (from search_brand_assets blobUrl, or a generated image data URL)" },
-          product_image_asset_id: { type: "string", description: "Asset ID for the product image (from search_brand_assets [id:...] field). Required when using a brand asset so the image can be swapped later." },
-          logo_url: { type: "string", description: "URL for the logo slot (from search_brand_assets blobUrl)" },
-          logo_asset_id: { type: "string", description: "Asset ID for the logo (from search_brand_assets [id:...] field). Required when using a brand asset." },
-          auxiliary_image_url: { type: "string", description: "URL for the auxiliary image slot" },
-          auxiliary_image_asset_id: { type: "string", description: "Asset ID for the auxiliary image (from search_brand_assets [id:...] field). Required when using a brand asset." },
-          background_color: { type: "string", description: "Hex color (e.g. #000000) for the background slot" }
+          product_image_url: {
+            type: "string",
+            description: "URL for the product image slot (from search_brand_assets blobUrl, or a generated image data URL)"
+          },
+          product_image_asset_id: {
+            type: "string",
+            description: "Asset ID for the product image (from search_brand_assets [id:...] field). Required when using a brand asset so the image can be swapped later."
+          },
+          logo_url: {
+            type: "string",
+            description: "URL for the logo slot (from search_brand_assets blobUrl)"
+          },
+          logo_asset_id: {
+            type: "string",
+            description: "Asset ID for the logo (from search_brand_assets [id:...] field). Required when using a brand asset."
+          },
+          auxiliary_image_url: {
+            type: "string",
+            description: "URL for the auxiliary image slot"
+          },
+          auxiliary_image_asset_id: {
+            type: "string",
+            description: "Asset ID for the auxiliary image (from search_brand_assets [id:...] field). Required when using a brand asset."
+          },
+          background_color: {
+            type: "string",
+            description: "Hex color (e.g. #000000) for the background slot"
+          }
         },
         required: ["frameId"],
         additionalProperties: false
@@ -51953,12 +52285,19 @@ async function execSearchBrandAssets(args, ctx) {
     const list = assets.map((a) => `- ${a.name} (${a.assetType}) [id:${a.id}]: ${a.blobUrl}`).join("\n");
     return {
       success: true,
-      data: { assets, summary: `Found ${assets.length} brand asset(s):
-${list}` },
+      data: {
+        assets,
+        summary: `Found ${assets.length} brand asset(s):
+${list}`
+      },
       statusMessage: `Found ${assets.length} assets`
     };
   } catch {
-    return { success: false, error: "Failed to search brand assets.", statusMessage: "Asset search failed" };
+    return {
+      success: false,
+      error: "Failed to search brand assets.",
+      statusMessage: "Asset search failed"
+    };
   }
 }
 async function execFinalizeAd(args, ctx) {
@@ -51972,14 +52311,23 @@ async function execFinalizeAd(args, ctx) {
   };
 }
 async function execListBrandTemplates(args, ctx) {
-  const campaignTag = args.campaignTag;
+  let keywords;
+  if (Array.isArray(args.keywords) && args.keywords.length > 0) {
+    keywords = args.keywords;
+  } else if (args.query || args.campaignTag) {
+    keywords = [args.query ?? args.campaignTag];
+  }
   if (!ctx.onListBrandTemplates) {
     return { success: true, statusMessage: "No template list configured" };
   }
   try {
-    const templates = await ctx.onListBrandTemplates(campaignTag);
+    const templates = await ctx.onListBrandTemplates(keywords);
     if (templates.length === 0) {
-      return { success: true, data: { templates: [] }, statusMessage: "No templates found" };
+      return {
+        success: true,
+        data: { templates: [] },
+        statusMessage: "No templates found"
+      };
     }
     const list = templates.map((t2) => {
       const dims = t2.width && t2.height ? ` (${t2.width}x${t2.height})` : "";
@@ -51991,13 +52339,21 @@ async function execListBrandTemplates(args, ctx) {
       statusMessage: `Found ${templates.length} template(s)`
     };
   } catch {
-    return { success: false, error: "Failed to list brand templates.", statusMessage: "Template list failed" };
+    return {
+      success: false,
+      error: "Failed to list brand templates.",
+      statusMessage: "Template list failed"
+    };
   }
 }
 async function execGetTemplateVariant(args, ctx) {
   const templateId = args.variantId;
   if (!ctx.onGetTemplateVariant) {
-    return { success: false, error: "Template fetching not configured.", statusMessage: "No template fetch configured" };
+    return {
+      success: false,
+      error: "Template fetching not configured.",
+      statusMessage: "No template fetch configured"
+    };
   }
   try {
     const { canvasJson } = await ctx.onGetTemplateVariant(templateId);
@@ -52011,14 +52367,22 @@ async function execGetTemplateVariant(args, ctx) {
       statusMessage: "Template fetched"
     };
   } catch {
-    return { success: false, error: "Failed to fetch template.", statusMessage: "Template fetch failed" };
+    return {
+      success: false,
+      error: "Failed to fetch template.",
+      statusMessage: "Template fetch failed"
+    };
   }
 }
 async function execLoadTemplateIntoFrame(args, ctx) {
   const frameId = args.frameId;
   const templateId = args.variantId;
   if (!ctx.onGetTemplateVariant) {
-    return { success: false, error: "Template fetching not configured.", statusMessage: "No template fetch configured" };
+    return {
+      success: false,
+      error: "Template fetching not configured.",
+      statusMessage: "No template fetch configured"
+    };
   }
   try {
     const cachedJson = ctx._templateJsonCache?.get(templateId);
@@ -52043,7 +52407,11 @@ async function execLoadTemplateIntoFrame(args, ctx) {
     const allElements = ctx.excalidrawAPI.getSceneElements();
     const targetFrame = allElements.find((el) => el.id === frameId);
     if (!targetFrame) {
-      return { success: false, error: `Frame ${frameId} not found.`, statusMessage: "Frame not found" };
+      return {
+        success: false,
+        error: `Frame ${frameId} not found.`,
+        statusMessage: "Frame not found"
+      };
     }
     const withoutOldChildren = allElements.filter(
       (el) => el.frameId !== frameId
@@ -52092,7 +52460,11 @@ async function execLoadTemplateIntoFrame(args, ctx) {
         });
       }
     }
-    return { success: true, data: { frameId }, statusMessage: "Template loaded" };
+    return {
+      success: true,
+      data: { frameId },
+      statusMessage: "Template loaded"
+    };
   } catch (e) {
     return {
       success: false,
@@ -52142,7 +52514,12 @@ function fitFontSize(text, slotEl) {
     }
   }
   if (bestFs !== -1) {
-    return { fontSize: bestFs, wrappedText: bestWrapped, height: bestHeight, autoResize: false };
+    return {
+      fontSize: bestFs,
+      wrappedText: bestWrapped,
+      height: bestHeight,
+      autoResize: false
+    };
   }
   const minCheck = testFit(MIN_FONT_SIZE3);
   return {
@@ -52182,8 +52559,9 @@ async function execFillTemplateSlots(args, ctx) {
   const imageJobs = [];
   allElements.forEach((el, index) => {
     const elAny = el;
-    if (elAny.frameId !== frameId)
+    if (elAny.frameId !== frameId) {
       return;
+    }
     const slotType = elAny.customData?.slotType;
     const url = slotType ? imageUrlBySlotType[slotType] : void 0;
     if (url) {
@@ -52202,8 +52580,9 @@ async function execFillTemplateSlots(args, ctx) {
     imageJobs.map(async (job) => {
       try {
         const res = await fetch(job.url);
-        if (!res.ok)
+        if (!res.ok) {
           return;
+        }
         const blob = await res.blob();
         const dataURL = await new Promise((resolve, reject) => {
           const reader = new FileReader();
@@ -52220,8 +52599,9 @@ async function execFillTemplateSlots(args, ctx) {
   await Promise.all(
     imageJobs.map(
       (job) => new Promise((resolve) => {
-        if (!job.dataURL)
+        if (!job.dataURL) {
           return resolve();
+        }
         const img = new Image();
         img.onload = () => {
           job.naturalWidth = img.naturalWidth;
@@ -52235,8 +52615,9 @@ async function execFillTemplateSlots(args, ctx) {
   );
   const imageReplacements = /* @__PURE__ */ new Map();
   for (const job of imageJobs) {
-    if (!job.fileId)
+    if (!job.fileId) {
       continue;
+    }
     const { x, y, width, height } = containFit(
       job.el.x,
       job.el.y,
@@ -52274,18 +52655,23 @@ async function execFillTemplateSlots(args, ctx) {
   let filledCount = 0;
   const updatedElements = allElements.map((el, index) => {
     const elWithFrame = el;
-    if (elWithFrame.frameId !== frameId)
+    if (elWithFrame.frameId !== frameId) {
       return el;
+    }
     const slotType = elWithFrame.customData?.slotType;
-    if (!slotType)
+    if (!slotType) {
       return el;
+    }
     if (imageReplacements.has(index)) {
       filledCount++;
       return imageReplacements.get(index);
     }
     let mutation = {};
     const makeTextMutation = (value, useHeadlineFont = false) => {
-      const { fontSize, wrappedText, height, autoResize } = fitFontSize(value, el);
+      const { fontSize, wrappedText, height, autoResize } = fitFontSize(
+        value,
+        el
+      );
       const brandFontId = useHeadlineFont ? ctx.brandHeadlineFontId ?? ctx.brandBodyFontId : ctx.brandBodyFontId;
       return {
         text: wrappedText,
@@ -52993,7 +53379,10 @@ ${f.textContent}`).join("\n\n")}`;
             statusMessage: error || "Insufficient credits for image generation"
           };
           const gatedAction = {
-            result: { success: gatedResult.success, statusMessage: gatedResult.statusMessage }
+            result: {
+              success: gatedResult.success,
+              statusMessage: gatedResult.statusMessage
+            }
           };
           toolActions.push(gatedAction);
           onUpdate({
@@ -53019,7 +53408,10 @@ ${f.textContent}`).join("\n\n")}`;
           statusMessage: "Blocked: template already provides text slots"
         };
         const blockedAction = {
-          result: { success: blockedResult.success, statusMessage: blockedResult.statusMessage }
+          result: {
+            success: blockedResult.success,
+            statusMessage: blockedResult.statusMessage
+          }
         };
         toolActions.push(blockedAction);
         onUpdate({
@@ -53030,7 +53422,10 @@ ${f.textContent}`).join("\n\n")}`;
         messages.push({
           role: "tool",
           tool_call_id: toolCall.id,
-          content: JSON.stringify({ success: false, error: blockedResult.error })
+          content: JSON.stringify({
+            success: false,
+            error: blockedResult.error
+          })
         });
         continue;
       }
@@ -53054,7 +53449,10 @@ ${f.textContent}`).join("\n\n")}`;
         }
       }
       const action = {
-        result: { success: result.success, statusMessage: result.statusMessage }
+        result: {
+          success: result.success,
+          statusMessage: result.statusMessage
+        }
       };
       toolActions.push(action);
       onUpdate({
@@ -54485,7 +54883,12 @@ var AIChatPanel = React63.forwardRef(
                           actions: msg.toolActions
                         }
                       ),
-                      msg.reviewFeedback && /* @__PURE__ */ jsx192(ReviewCritiqueCard, { feedback: msg.reviewFeedback }),
+                      msg.reviewFeedback && /* @__PURE__ */ jsx192(
+                        ReviewCritiqueCard,
+                        {
+                          feedback: msg.reviewFeedback
+                        }
+                      ),
                       /* @__PURE__ */ jsx192(
                         MessageContent,
                         {
@@ -54779,44 +55182,65 @@ function ToolActionsDisplay({ actions: actions2 }) {
 function ReviewCritiqueCard({ feedback }) {
   const [expanded, setExpanded] = useState55(false);
   const severityClass = (severity) => {
-    if (severity === "critical")
+    if (severity === "critical") {
       return "acp-review-issue--critical";
-    if (severity === "major")
+    }
+    if (severity === "major") {
       return "acp-review-issue--major";
+    }
     return "acp-review-issue--minor";
   };
   const approved = feedback.approved;
-  return /* @__PURE__ */ jsxs106("div", { className: `acp-review-card ${approved ? "acp-review-card--ok" : "acp-review-card--issues"}`, children: [
-    /* @__PURE__ */ jsxs106(
-      "button",
-      {
-        className: "acp-review-toggle",
-        onClick: () => setExpanded((v) => !v),
-        children: [
-          /* @__PURE__ */ jsx192("span", { className: `acp-review-badge ${approved ? "acp-review-badge--ok" : "acp-review-badge--issues"}`, children: approved ? "\u2713 Design approved" : `${feedback.issues.length} issue${feedback.issues.length !== 1 ? "s" : ""} found` }),
-          /* @__PURE__ */ jsx192("span", { className: "acp-review-summary", children: feedback.summary }),
-          !approved && feedback.issues.length > 0 && /* @__PURE__ */ jsx192(
-            ChevronRight,
-            {
-              size: 12,
-              className: `acp-tool-chevron ${expanded ? "acp-tool-chevron--open" : ""}`
-            }
-          )
-        ]
-      }
-    ),
-    expanded && !approved && feedback.issues.length > 0 && /* @__PURE__ */ jsx192("div", { className: "acp-review-issues", children: feedback.issues.map((iss, i) => /* @__PURE__ */ jsxs106("div", { className: `acp-review-issue ${severityClass(iss.severity)}`, children: [
-      /* @__PURE__ */ jsxs106("div", { className: "acp-review-issue-header", children: [
-        /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-severity", children: iss.severity }),
-        /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-element", children: iss.element }),
-        /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-problem", children: iss.problem })
-      ] }),
-      /* @__PURE__ */ jsxs106("div", { className: "acp-review-issue-fix", children: [
-        "\u2192 ",
-        iss.preciseInstruction
-      ] })
-    ] }, i)) })
-  ] });
+  return /* @__PURE__ */ jsxs106(
+    "div",
+    {
+      className: `acp-review-card ${approved ? "acp-review-card--ok" : "acp-review-card--issues"}`,
+      children: [
+        /* @__PURE__ */ jsxs106(
+          "button",
+          {
+            className: "acp-review-toggle",
+            onClick: () => setExpanded((v) => !v),
+            children: [
+              /* @__PURE__ */ jsx192(
+                "span",
+                {
+                  className: `acp-review-badge ${approved ? "acp-review-badge--ok" : "acp-review-badge--issues"}`,
+                  children: approved ? "\u2713 Design approved" : `${feedback.issues.length} issue${feedback.issues.length !== 1 ? "s" : ""} found`
+                }
+              ),
+              /* @__PURE__ */ jsx192("span", { className: "acp-review-summary", children: feedback.summary }),
+              !approved && feedback.issues.length > 0 && /* @__PURE__ */ jsx192(
+                ChevronRight,
+                {
+                  size: 12,
+                  className: `acp-tool-chevron ${expanded ? "acp-tool-chevron--open" : ""}`
+                }
+              )
+            ]
+          }
+        ),
+        expanded && !approved && feedback.issues.length > 0 && /* @__PURE__ */ jsx192("div", { className: "acp-review-issues", children: feedback.issues.map((iss, i) => /* @__PURE__ */ jsxs106(
+          "div",
+          {
+            className: `acp-review-issue ${severityClass(iss.severity)}`,
+            children: [
+              /* @__PURE__ */ jsxs106("div", { className: "acp-review-issue-header", children: [
+                /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-severity", children: iss.severity }),
+                /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-element", children: iss.element }),
+                /* @__PURE__ */ jsx192("span", { className: "acp-review-issue-problem", children: iss.problem })
+              ] }),
+              /* @__PURE__ */ jsxs106("div", { className: "acp-review-issue-fix", children: [
+                "\u2192 ",
+                iss.preciseInstruction
+              ] })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
 }
 async function callPlainChatAPI(messages, apiKey, signal, opts) {
   const baseModel = opts?.chatModel || "google/gemini-3.1-flash-lite-preview";