@orangecatai/adgen-canvas 0.0.14 → 0.0.16

package/dist/dev/index.js

@@ -67,10 +67,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-W3WRQE6Q.js";
+} from "./chunk-UJP3DIYP.js";
 import {
   define_import_meta_env_default
-} from "./chunk-3OPVOEOA.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-NKXZX2BO.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,25 +26398,48 @@ 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];
     const frameChildren = getFrameChildren5(allElements, frame.id);
+    const files = app.files;
+    const templateFiles = {};
+    for (const el of frameChildren) {
+      const imgEl = el;
+      if (el.type === "image" && imgEl.fileId) {
+        const file2 = files[imgEl.fileId];
+        if (file2?.dataURL) {
+          templateFiles[imgEl.fileId] = {
+            dataURL: file2.dataURL,
+            mimeType: file2.mimeType
+          };
+        }
+      }
+    }
     onSaveTemplate({
       name: panelState.templateName,
       campaignTag: panelState.campaignTag || void 0,
       label: `${Math.round(frame.width)}x${Math.round(frame.height)}`,
       width: Math.round(frame.width),
       height: Math.round(frame.height),
-      canvasJson: JSON.stringify({ frame: { ...frame }, elements: frameChildren })
+      canvasJson: JSON.stringify({
+        frame: { ...frame },
+        elements: frameChildren,
+        ...Object.keys(templateFiles).length > 0 ? { files: templateFiles } : {}
+      })
     });
     templateBuilderStore.close();
   };
@@ -51027,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
@@ -51039,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
@@ -51058,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
@@ -51073,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
@@ -51089,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
@@ -51432,12 +51782,13 @@ function execAddText(args, ctx) {
       statusMessage: "Failed: missing frameId"
     };
   }
+  const resolvedFontFamily = ctx.brandBodyFontId ?? ctx.brandHeadlineFontId ?? args.fontFamily ?? 2;
   const textEl = newTextElement6({
     x: args.x,
     y: args.y,
     text: args.text,
     fontSize: args.fontSize || 20,
-    fontFamily: args.fontFamily || 2,
+    fontFamily: resolvedFontFamily,
     strokeColor: args.strokeColor || "#000000",
     textAlign: args.textAlign || "left",
     width: args.width,
@@ -51910,8 +52261,7 @@ async function execGenerateHtmlBanner(args, ctx) {
       y: Math.round(frameY),
       width: frameW,
       height: frameH,
-      elementCount: newEls.length,
-      screenshot: screenshot ?? void 0
+      elementCount: newEls.length
     },
     statusMessage: `Banner updated: ${newEls.length} elements in frame "${args.name || "Banner"}" (${frameW}\xD7${frameH})`,
     screenshot: screenshot ?? void 0
@@ -51935,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) {
@@ -51948,20 +52305,29 @@ async function execFinalizeAd(args, ctx) {
   const screenshot = await captureFrameScreenshot(ctx.excalidrawAPI, frameId);
   return {
     success: true,
-    data: { frameId, screenshot: screenshot ?? void 0 },
+    data: { frameId },
     statusMessage: "Ad finalized, ready for review",
     screenshot: screenshot ?? void 0
   };
 }
 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})` : "";
@@ -51973,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);
@@ -51993,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);
@@ -52025,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
@@ -52051,6 +52437,18 @@ async function execLoadTemplateIntoFrame(args, ctx) {
     ];
     const merged = syncMovedIndices7(mergedArr, arrayToMap30(mergedArr));
     ctx.excalidrawAPI.updateScene({ elements: merged });
+    const templateFiles = parsed.files;
+    if (templateFiles && Object.keys(templateFiles).length > 0) {
+      ctx.excalidrawAPI.addFiles(
+        Object.entries(templateFiles).map(([fileId, file2]) => ({
+          id: fileId,
+          dataURL: file2.dataURL,
+          mimeType: file2.mimeType,
+          created: Date.now(),
+          lastRetrieved: Date.now()
+        }))
+      );
+    }
     if (templateId) {
       const frameEl = ctx.excalidrawAPI.getSceneElements().find((el) => el.id === frameId);
       if (frameEl) {
@@ -52062,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,
@@ -52112,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 {
@@ -52152,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) {
@@ -52172,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();
@@ -52190,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;
@@ -52205,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,
@@ -52244,28 +52655,35 @@ 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) => {
-      const { fontSize, wrappedText, height, autoResize } = fitFontSize(value, el);
+    const makeTextMutation = (value, useHeadlineFont = false) => {
+      const { fontSize, wrappedText, height, autoResize } = fitFontSize(
+        value,
+        el
+      );
+      const brandFontId = useHeadlineFont ? ctx.brandHeadlineFontId ?? ctx.brandBodyFontId : ctx.brandBodyFontId;
       return {
         text: wrappedText,
         originalText: value,
         fontSize,
         height,
-        autoResize
+        autoResize,
+        ...brandFontId !== void 0 ? { fontFamily: brandFontId } : {}
       };
     };
     if (slotType === "headline" && args.headline) {
-      mutation = makeTextMutation(args.headline);
+      mutation = makeTextMutation(args.headline, true);
     } else if (slotType === "subhead" && args.subhead) {
       mutation = makeTextMutation(args.subhead);
     } else if (slotType === "cta" && args.cta) {
@@ -52491,7 +52909,11 @@ When the design needs a full-frame photorealistic background (a scene, landscape
 Use hex (\`#rrggbb\`) or \`rgba(r,g,b,a)\`. No named colors (no \`red\`, \`blue\`). CSS gradients (\`linear-gradient\`, \`radial-gradient\`) are allowed.
 
 ### 7. Fonts
-If the Brand Identity context specifies fonts, use those exact font-family names in your HTML \`<style>\` block (e.g. \`font-family: "Brand Font Name", Arial, sans-serif\`). Otherwise default to web-safe: \`Arial\`, \`"Helvetica Neue"\`, \`Helvetica\`, \`sans-serif\`. Do not use serif fonts unless the brand explicitly requires them.
+**MANDATORY \u2014 Brand font enforcement:**
+- If the Brand Identity context specifies fonts with a registered fontFamilyId, you MUST use those fonts everywhere. Do NOT use any other font \u2014 no Arial, no Helvetica, no web-safe fallbacks as primary fonts.
+- In HTML \`<style>\` blocks: use the exact brand font-family name (e.g. \`font-family: "Brand Font Name", sans-serif\`). The canvas renderer maps this name to the registered font automatically.
+- For \`add_text\` calls: the system enforces the brand fontFamilyId automatically \u2014 you do not need to pass a fontFamily param.
+- Only fall back to web-safe fonts (\`Arial\`, \`"Helvetica Neue"\`, \`sans-serif\`) when the Brand Identity context has no font specified at all.
 
 ### 9. No unsupported features
 No \`transform\`, \`animation\`, \`transition\`, \`filter\`, \`clip-path\`, \`<img>\` tags, or JavaScript. No \`box-shadow\`. 
@@ -52590,8 +53012,10 @@ ASSET USE MANDATE: If search_brand_assets() returns any results, you MUST incorp
 
 IMAGE GENERATION SCOPE: generate_image is only for supplementary content images (backgrounds, lifestyle photography) where no brand asset matches AND the brief explicitly requires a photo or illustration. For solid-color backgrounds or brand-asset-only ads, skip generate_image entirely.
 
-TEMPLATE BANK: When the user references a campaign, asks to "use a template", or requests multiple ad sizes, use this workflow:
-1. Call \`list_brand_templates()\` to see available templates
+TEMPLATE BANK: Whenever the user asks to create, make, or build an ad \u2014 even without mentioning templates \u2014 call \`list_brand_templates()\` as your very first action before asking any clarifying questions. Use the returned catalog to ask smarter, more specific questions (e.g. "I see you have a Noida Campaign template \u2014 should I use that, or build from scratch?"). If multiple templates could match, ask which one to use. If none match or the user prefers no template, proceed with HTML generation. Only skip this tool call for messages that are clearly not ad-creation requests (greetings, questions, edits to existing canvas elements, etc.).
+
+Template workflow once you know which template to use:
+1. Call \`list_brand_templates()\` to see available templates (already done above)
 2. Call \`load_template_into_frame(frameId, variantId)\` to insert the template
 3. Call \`get_frame_elements(frameId)\` to inspect which slot types exist (headline, subhead, cta, background, product_image, logo, etc.)
 4. For each **image slot** found (product_image, logo): call \`search_brand_assets()\` to look up the asset. Pass the returned \`blobUrl\` as \`product_image_url\` or \`logo_url\` to \`fill_template_slots\`. Only call \`generate_image\` if no matching asset exists in the bank.
@@ -52714,7 +53138,7 @@ function buildBrandContextMessage(ctx) {
     const { headline, body } = ctx.typography;
     if (headline?.family) {
       const sizeHint = headline.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[headline.sizeScale] ?? headline.sizeScale})` : "";
-      const idNote = headline.fontFamilyId ? ` \u2014 custom font registered in canvas; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS` : ` \u2014 no custom font file loaded; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const idNote = headline.fontFamilyId ? ` \u2014 MANDATORY: use \`font-family: "${headline.family}", sans-serif\` in ALL HTML CSS for headlines. Do NOT use any other font.` : ` \u2014 no custom font file loaded; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
       const fileNote = headline.fontName ? ` [file: ${headline.fontName}]` : "";
       lines.push(
         `**Headline font**: ${headline.family}${headline.weight ? ` weight ${headline.weight}` : ""}${sizeHint}${idNote}${fileNote}`
@@ -52722,7 +53146,7 @@ function buildBrandContextMessage(ctx) {
     }
     if (body?.family) {
       const sizeHint = body.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[body.sizeScale] ?? body.sizeScale})` : "";
-      const idNote = body.fontFamilyId ? ` \u2014 custom font registered in canvas; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS` : ` \u2014 no custom font file loaded; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const idNote = body.fontFamilyId ? ` \u2014 MANDATORY: use \`font-family: "${body.family}", sans-serif\` in ALL HTML CSS for body copy, subheads, CTAs, and any other text. Do NOT use any other font.` : ` \u2014 no custom font file loaded; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
       const fileNote = body.fontName ? ` [file: ${body.fontName}]` : "";
       lines.push(
         `**Body font**: ${body.family}${body.weight ? ` weight ${body.weight}` : ""}${sizeHint}${idNote}${fileNote}`
@@ -52826,7 +53250,9 @@ async function runAgentLoop(opts) {
     ...Object.keys(customFontMap).length ? { customFontMap } : {},
     ...allImageAttachments.length ? { fileAttachments: allImageAttachments } : {},
     ...brandContext?.typography?.headline?.fontName ? { brandHeadlineFontName: brandContext.typography.headline.fontName } : {},
-    ...brandContext?.typography?.body?.fontName ? { brandBodyFontName: brandContext.typography.body.fontName } : {}
+    ...brandContext?.typography?.body?.fontName ? { brandBodyFontName: brandContext.typography.body.fontName } : {},
+    ...brandContext?.typography?.headline?.fontFamilyId ? { brandHeadlineFontId: brandContext.typography.headline.fontFamilyId } : {},
+    ...brandContext?.typography?.body?.fontFamilyId ? { brandBodyFontId: brandContext.typography.body.fontFamilyId } : {}
   };
   const messages = [{ role: "system", content: SYSTEM_PROMPT }];
   if (brandContext) {
@@ -52953,9 +53379,10 @@ ${f.textContent}`).join("\n\n")}`;
             statusMessage: error || "Insufficient credits for image generation"
           };
           const gatedAction = {
-            toolName: name,
-            args: parsedArgs,
-            result: gatedResult
+            result: {
+              success: gatedResult.success,
+              statusMessage: gatedResult.statusMessage
+            }
           };
           toolActions.push(gatedAction);
           onUpdate({
@@ -52981,9 +53408,10 @@ ${f.textContent}`).join("\n\n")}`;
           statusMessage: "Blocked: template already provides text slots"
         };
         const blockedAction = {
-          toolName: name,
-          args: parsedArgs,
-          result: blockedResult
+          result: {
+            success: blockedResult.success,
+            statusMessage: blockedResult.statusMessage
+          }
         };
         toolActions.push(blockedAction);
         onUpdate({
@@ -52994,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;
       }
@@ -53018,9 +53449,10 @@ ${f.textContent}`).join("\n\n")}`;
         }
       }
       const action = {
-        toolName: name,
-        args: parsedArgs,
-        result
+        result: {
+          success: result.success,
+          statusMessage: result.statusMessage
+        }
       };
       toolActions.push(action);
       onUpdate({
@@ -54451,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,
                         {
@@ -54745,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";