@orangecatai/adgen-canvas 0.0.39 → 0.1.0

package/dist/dev/chunk-T57LHRZV.js

@@ -0,0 +1,2167 @@
+import {
+  HOST_ASSET_BYTE_RESERVATION,
+  MAX_REFERENCE_IMAGES,
+  MAX_USER_REFERENCE_IMAGES,
+  REFERENCE_WIRE_BUDGET_BYTES
+} from "./chunk-LWUV2KR2.js";
+
+// components/auto-resize/frameSource.ts
+import { getFrameChildren } from "@orangecatai/element";
+function getLiveFrameChildren(elements, frame) {
+  return getFrameChildren(elements, frame.id).filter((el) => !el.isDeleted);
+}
+function isStructuredFrame(elements, frame) {
+  const children = getLiveFrameChildren(elements, frame);
+  if (children.length > 1) {
+    return true;
+  }
+  return children.some((el) => {
+    if (el.type === "text") {
+      return true;
+    }
+    const customData = el.customData;
+    return typeof customData?.decomposeType === "string";
+  });
+}
+var AUTO_RESIZE_FLAT_FRAME_REASON = "Make this ad editable first \u2014 Auto Resize needs separate layers to re-lay-out.";
+
+// utils/imageCompression.ts
+var MAX_EDGE_PX = 1280;
+var JPEG_QUALITY = 0.78;
+var PASSTHROUGH_BYTES = 200 * 1024;
+var DECODE_TIMEOUT_MS = 1e4;
+function dataUrlWireBytes(dataUrl) {
+  const commaIdx = dataUrl.indexOf(",");
+  return commaIdx >= 0 ? dataUrl.length - commaIdx - 1 : dataUrl.length;
+}
+function isRasterImageDataUrl(dataUrl) {
+  return /^data:image\/(png|jpe?g|gif|webp);base64,/i.test(dataUrl);
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const timer = setTimeout(() => {
+      img.onload = null;
+      img.onerror = null;
+      reject(new Error("image decode timed out"));
+    }, DECODE_TIMEOUT_MS);
+    img.onload = () => {
+      clearTimeout(timer);
+      resolve(img);
+    };
+    img.onerror = () => {
+      clearTimeout(timer);
+      reject(new Error("image decode failed"));
+    };
+    img.src = src;
+  });
+}
+function encodeAt(img, w, h, quality) {
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, w, h);
+  ctx.drawImage(img, 0, 0, w, h);
+  return canvas.toDataURL("image/jpeg", quality);
+}
+async function shrinkImageDataUrl(dataUrl) {
+  if (!isRasterImageDataUrl(dataUrl)) {
+    return dataUrl;
+  }
+  if (dataUrlWireBytes(dataUrl) <= PASSTHROUGH_BYTES) {
+    return dataUrl;
+  }
+  try {
+    const img = await loadImage(dataUrl);
+    const { width, height } = img;
+    if (!width || !height) {
+      return dataUrl;
+    }
+    const scale = Math.min(1, MAX_EDGE_PX / Math.max(width, height));
+    const shrunk = encodeAt(
+      img,
+      Math.max(1, Math.round(width * scale)),
+      Math.max(1, Math.round(height * scale)),
+      JPEG_QUALITY
+    );
+    if (!shrunk) {
+      return dataUrl;
+    }
+    return dataUrlWireBytes(shrunk) < dataUrlWireBytes(dataUrl) ? shrunk : dataUrl;
+  } catch {
+    return dataUrl;
+  }
+}
+async function reencodeAtEdge(dataUrl, edge, quality = 0.7) {
+  if (!isRasterImageDataUrl(dataUrl)) {
+    return dataUrl;
+  }
+  try {
+    const img = await loadImage(dataUrl);
+    if (!img.width || !img.height) {
+      return dataUrl;
+    }
+    const scale = Math.min(1, edge / Math.max(img.width, img.height));
+    const out = encodeAt(
+      img,
+      Math.max(1, Math.round(img.width * scale)),
+      Math.max(1, Math.round(img.height * scale)),
+      quality
+    );
+    if (!out) {
+      return dataUrl;
+    }
+    return dataUrlWireBytes(out) < dataUrlWireBytes(dataUrl) ? out : dataUrl;
+  } catch {
+    return dataUrl;
+  }
+}
+var ESCALATION_EDGES = [960, 720, 512];
+
+// utils/referenceBudget.ts
+var REFERENCE_TIERS = [
+  "user",
+  "source",
+  "logo",
+  "brandAsset",
+  "adReference"
+];
+var TIER_FLOOR = {
+  brandAsset: 1,
+  adReference: 1
+};
+var slotBytes = (slot) => slot.bytes ?? (slot.dataUrl ? dataUrlWireBytes(slot.dataUrl) : 0);
+var totalBytes = (slots) => slots.reduce((sum, slot) => sum + slotBytes(slot), 0);
+function orderByPriority(slots) {
+  return [...slots].sort(
+    (a, b) => REFERENCE_TIERS.indexOf(a.tier) - REFERENCE_TIERS.indexOf(b.tier)
+  );
+}
+function shedOrder(slots, protectLogo) {
+  const of = (tier) => slots.filter((s) => s.tier === tier);
+  const brandAssets = of("brandAsset");
+  const adReferences = of("adReference");
+  const surplus = (tier, list) => list.slice(TIER_FLOOR[tier] ?? 0).reverse();
+  return [
+    // Extras first, tail-first within each tier, lowest priority tier first.
+    ...surplus("adReference", adReferences),
+    ...surplus("brandAsset", brandAssets),
+    // Then whole tiers, still lowest priority first.
+    ...adReferences.slice(0, TIER_FLOOR.adReference ?? 0),
+    ...brandAssets.slice(0, TIER_FLOOR.brandAsset ?? 0),
+    // The logo outlives every brand asset, and on generate flows is never shed.
+    ...protectLogo ? [] : of("logo")
+  ];
+}
+function allocateReferences(slots, options = {}) {
+  const maxImages = options.maxImages ?? MAX_REFERENCE_IMAGES;
+  const maxBytes = options.maxBytes ?? REFERENCE_WIRE_BUDGET_BYTES;
+  const budget = maxBytes - (options.reservedBytes ?? 0);
+  const protectLogo = options.protectLogo ?? true;
+  const dropped = [];
+  let kept = [];
+  let userSeen = 0;
+  for (const slot of orderByPriority(slots)) {
+    if (slot.tier === "user") {
+      userSeen += 1;
+      if (userSeen > MAX_USER_REFERENCE_IMAGES) {
+        dropped.push({ tier: slot.tier, label: slot.label, reason: "count" });
+        continue;
+      }
+    }
+    kept.push(slot);
+  }
+  const shed = (reason, stillOver) => {
+    for (const victim of shedOrder(kept, protectLogo)) {
+      if (!stillOver()) {
+        return;
+      }
+      kept = kept.filter((s) => s !== victim);
+      dropped.push({ tier: victim.tier, label: victim.label, reason });
+    }
+  };
+  shed("count", () => kept.length > maxImages);
+  shed("bytes", () => totalBytes(kept) > budget);
+  return {
+    kept,
+    dropped,
+    bytes: totalBytes(kept),
+    overBudget: kept.length > maxImages || totalBytes(kept) > budget
+  };
+}
+async function prepareReferences(slots, options = {}) {
+  const maxBytes = options.maxBytes ?? REFERENCE_WIRE_BUDGET_BYTES;
+  const budget = maxBytes - (options.reservedBytes ?? 0);
+  const compressed = await Promise.all(
+    slots.map(
+      async (slot) => slot.dataUrl ? {
+        ...slot,
+        dataUrl: await shrinkImageDataUrl(slot.dataUrl),
+        bytes: void 0
+      } : slot
+    )
+  );
+  for (const edge of ESCALATION_EDGES) {
+    if (totalBytes(compressed) <= budget) {
+      break;
+    }
+    const largestFirst = compressed.map((slot, index) => ({ slot, index })).filter(({ slot }) => Boolean(slot.dataUrl)).sort((a, b) => slotBytes(b.slot) - slotBytes(a.slot));
+    for (const { slot, index } of largestFirst) {
+      if (totalBytes(compressed) <= budget) {
+        break;
+      }
+      compressed[index] = {
+        ...slot,
+        dataUrl: await reencodeAtEdge(slot.dataUrl, edge),
+        bytes: void 0
+      };
+    }
+  }
+  return allocateReferences(compressed, options);
+}
+
+// utils/imageApi.ts
+var EXACT_PIXEL_SIZE = /^\d+x\d+$/;
+var isOpenAIImageModel = (modelId) => modelId.startsWith("openai/gpt-image");
+var PIXEL_STEP = 16;
+var MAX_EDGE = 3840;
+var MAX_EDGE_RATIO = 3;
+var MIN_PIXELS = 655360;
+var MAX_PIXELS = 8294400;
+var PRESET_ASPECT_RATIOS = [
+  { label: "16:9", value: 16 / 9 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "1:1", value: 1 },
+  { label: "3:4", value: 3 / 4 },
+  { label: "9:16", value: 9 / 16 }
+];
+function nearestPresetAspectRatio(frameW, frameH) {
+  const target = frameW / frameH;
+  return PRESET_ASPECT_RATIOS.reduce(
+    (best, candidate) => Math.abs(candidate.value - target) < Math.abs(best.value - target) ? candidate : best
+  ).label;
+}
+function resolveImageOutputSize(modelId, frameW, frameH) {
+  const usable = Number.isFinite(frameW) && Number.isFinite(frameH) && frameW > 0 && frameH > 0;
+  if (!usable) {
+    return { aspectRatio: "1:1", imageSize: null };
+  }
+  if (!isOpenAIImageModel(modelId)) {
+    return {
+      aspectRatio: nearestPresetAspectRatio(frameW, frameH),
+      imageSize: null
+    };
+  }
+  const target = frameW / frameH;
+  const ratio = Math.max(frameW, frameH) / Math.min(frameW, frameH);
+  const clamp = ratio > MAX_EDGE_RATIO ? MAX_EDGE_RATIO / ratio : 1;
+  let w = frameW > frameH ? frameW * clamp : frameW;
+  let h = frameW > frameH ? frameH : frameH * clamp;
+  const edgeScale = Math.min(1, MAX_EDGE / Math.max(w, h));
+  w *= edgeScale;
+  h *= edgeScale;
+  const pixels = w * h;
+  const pixelScale = pixels < MIN_PIXELS ? Math.sqrt(MIN_PIXELS / pixels) : pixels > MAX_PIXELS ? Math.sqrt(MAX_PIXELS / pixels) : 1;
+  w *= pixelScale;
+  h *= pixelScale;
+  const snap = (v, up) => Math.max(
+    PIXEL_STEP,
+    (up ? Math.ceil(v / PIXEL_STEP) : Math.floor(v / PIXEL_STEP)) * PIXEL_STEP
+  );
+  let best = null;
+  let bestError = Infinity;
+  for (const upW of [false, true]) {
+    for (const upH of [false, true]) {
+      const cw = snap(w, upW);
+      const ch = snap(h, upH);
+      const area = cw * ch;
+      if (Math.max(cw, ch) > MAX_EDGE || Math.max(cw, ch) / Math.min(cw, ch) > MAX_EDGE_RATIO || area < MIN_PIXELS || area > MAX_PIXELS) {
+        continue;
+      }
+      const error = Math.abs(cw / ch - target);
+      if (error < bestError) {
+        bestError = error;
+        best = { w: cw, h: ch };
+      }
+    }
+  }
+  if (!best) {
+    return {
+      aspectRatio: nearestPresetAspectRatio(frameW, frameH),
+      imageSize: null
+    };
+  }
+  return { aspectRatio: null, imageSize: `${best.w}x${best.h}` };
+}
+var DEMOTED_BRAND_HEADER = "BRAND DIRECTION \u2014 OPTIONAL DEFAULTS. Everything in this section is subordinate to the user's instruction and the USER REFERENCE images above. Apply it only where they are silent, and discard any part of it that contradicts them \u2014 including colour values, typography, and layout.";
+function buildReferenceManifest(userReferenceCount, brandLabels, logoIsAttached = false, hasSourceImage = false) {
+  if (userReferenceCount === 0 && !hasSourceImage && brandLabels.length === 0) {
+    return "";
+  }
+  const lines = [
+    "ATTACHED REFERENCE IMAGES (in the order supplied):"
+  ];
+  let slot = 0;
+  for (let i = 0; i < userReferenceCount; i++) {
+    lines.push(
+      `  ${++slot}. USER REFERENCE \u2014 supplied by the user for this specific request.`
+    );
+  }
+  if (hasSourceImage) {
+    lines.push(
+      `  ${++slot}. SOURCE IMAGE \u2014 the existing image being edited. Preserve it exactly except for the change the user asked for.`
+    );
+  }
+  brandLabels.forEach((label) => {
+    lines.push(`  ${++slot}. Brand kit asset \u2014 ${label}.`);
+  });
+  const hasUserAuthority = userReferenceCount > 0 || hasSourceImage;
+  if (!hasUserAuthority) {
+    return lines.join("\n");
+  }
+  const refWord = userReferenceCount === 0 ? "SOURCE IMAGE" : userReferenceCount === 1 ? "USER REFERENCE image" : "USER REFERENCE images";
+  lines.push(
+    "",
+    `PRIORITY \u2014 ABSOLUTE: the user's written instruction and the ${refWord} above outrank every other input. Follow the user's instruction exactly and treat ${userReferenceCount === 0 ? "it" : "them"} as the governing reference for subject, composition, style, colour, and typography. Where they contradict the brand kit, the brand guidelines, or any brand reference ad \u2014 including instructions given earlier in this prompt \u2014 the user's instruction and references WIN and the brand direction is overruled. Apply brand direction only where the user's instruction and references are silent.`
+  );
+  if (logoIsAttached) {
+    lines.push(
+      "",
+      `LOGO \u2014 EXACT ARTWORK: the brand logo listed above is the ONLY logo permitted in this image. Wherever a logo appears, it must be that artwork reproduced pixel-for-pixel \u2014 no redrawing, simplification, restyling, or recolouring \u2014 and it replaces any logo, emblem, or wordmark visible in the other reference images. This is not overruled by the precedence rule above; the precedence rule governs subject, composition, and style, not the identity of the logo. If the user explicitly asked for no logo, honour that instead.`
+    );
+  }
+  return lines.join("\n");
+}
+async function callOpenRouterImageAPI(prompt, modelId, aspectRatio, imageSize, textOutput, imageGenUrl, referenceImageDataUrl, signal, brandImages, options) {
+  const referenceMode = options?.referenceMode ?? "legacy-positional";
+  const userReferences = (Array.isArray(referenceImageDataUrl) ? referenceImageDataUrl : referenceImageDataUrl ? [referenceImageDataUrl] : []).filter((url) => Boolean(url && url.trim()));
+  const hostBrandAssetSlots = options?.hostBrandAssetSlots ?? 0;
+  const hostAdReferenceSlots = options?.hostAdReferenceSlots ?? 0;
+  const placeholder = (tier, label) => ({
+    tier,
+    dataUrl: "",
+    label,
+    bytes: HOST_ASSET_BYTE_RESERVATION
+  });
+  const slots = [
+    ...userReferences.map(
+      (dataUrl) => ({ tier: "user", dataUrl })
+    ),
+    ...options?.sourceImageDataUrl ? [
+      {
+        tier: "source",
+        dataUrl: options.sourceImageDataUrl,
+        label: "the image being edited"
+      }
+    ] : [],
+    ...brandImages?.logo ? [
+      {
+        tier: "logo",
+        dataUrl: brandImages.logo,
+        label: "the exact brand logo graphic"
+      }
+    ] : [],
+    ...brandImages?.fontPreview ? [
+      {
+        tier: "brandAsset",
+        dataUrl: brandImages.fontPreview,
+        label: "a brand font specimen (headline typeface)"
+      }
+    ] : [],
+    ...brandImages?.fontPreviewBody ? [
+      {
+        tier: "brandAsset",
+        dataUrl: brandImages.fontPreviewBody,
+        label: "a brand font specimen (body typeface)"
+      }
+    ] : [],
+    ...Array.from(
+      { length: hostBrandAssetSlots },
+      () => placeholder("brandAsset", "a brand product/lifestyle photo")
+    ),
+    ...Array.from(
+      { length: hostAdReferenceSlots },
+      () => placeholder("adReference", "an existing ad creative or template")
+    )
+  ];
+  const allocation = await prepareReferences(slots, {
+    protectLogo: options?.protectLogo ?? true,
+    // The prompt, the brand context block, and the JSON envelope all ride along
+    // in the same body, so they are charged against the image budget.
+    reservedBytes: prompt.length + (brandImages?.brandContextText?.length ?? 0)
+  });
+  if (allocation.dropped.length > 0) {
+    console.warn(
+      `[imageApi] reference budget \u2014 dropped ${allocation.dropped.map((d) => `${d.tier}${d.label ? ` (${d.label})` : ""}:${d.reason}`).join(", ")}; kept ${allocation.kept.length} slot(s), ${Math.round(
+        allocation.bytes / 1024
+      )} KB`
+    );
+  }
+  const keptOfTier = (tier) => allocation.kept.filter((s) => s.tier === tier);
+  const attached = allocation.kept.filter((s) => Boolean(s.dataUrl));
+  const keptHostBrandAssets = keptOfTier("brandAsset").filter(
+    (s) => !s.dataUrl
+  ).length;
+  const keptHostAdReferences = keptOfTier("adReference").filter(
+    (s) => !s.dataUrl
+  ).length;
+  const keptUserReferenceCount = keptOfTier("user").length;
+  const keptSourceCount = keptOfTier("source").length;
+  const orderedReferences = referenceMode === "legacy-positional" ? [
+    ...attached.filter((s) => s.tier !== "user" && s.tier !== "source").map((s) => s.dataUrl),
+    ...attached.filter((s) => s.tier === "user" || s.tier === "source").map((s) => s.dataUrl)
+  ] : attached.map((s) => s.dataUrl);
+  const brandLabels = referenceMode === "user-priority" ? attached.filter((s) => s.tier !== "user" && s.tier !== "source").map((s) => s.label).filter((label) => Boolean(label)) : [];
+  const logoIsAttached = keptOfTier("logo").length > 0;
+  const referenceManifest = referenceMode === "user-priority" ? buildReferenceManifest(
+    keptUserReferenceCount,
+    brandLabels,
+    logoIsAttached,
+    keptSourceCount > 0
+  ) : "";
+  const userSuppliedReferences = referenceMode === "user-priority" && (keptUserReferenceCount > 0 || keptSourceCount > 0);
+  const referenceParts = orderedReferences.map((url) => ({
+    type: "image_url",
+    image_url: { url }
+  }));
+  const isGrok = modelId.startsWith("x-ai/");
+  const isSourceful = modelId.startsWith("sourceful/");
+  const isOpenAIImagesAPI = isOpenAIImageModel(modelId);
+  const brandContextText = brandImages?.brandContextText;
+  const promptWithBrandContext = !brandContextText ? prompt : userSuppliedReferences ? `${prompt}
+
+---
+
+${DEMOTED_BRAND_HEADER}
+
+${brandContextText}` : `${brandContextText}
+
+---
+
+${prompt}`;
+  const effectivePrompt = referenceManifest ? `${promptWithBrandContext}
+
+${referenceManifest}` : promptWithBrandContext;
+  let body;
+  if (isOpenAIImagesAPI) {
+    body = {
+      model: modelId,
+      prompt: effectivePrompt,
+      // Two mutually exclusive ways to ask for a size:
+      //
+      //   • `size: "1088x1360"` — exact pixels. Authoritative, and OpenRouter
+      //     400s if `resolution` or `aspect_ratio` is sent alongside it.
+      //   • `resolution: "1K" | "2K" | …` — a tier, which combines with
+      //     `aspect_ratio`. `resolution` accepts ONLY that enum; passing
+      //     pixels to it is a ZodError.
+      ...imageSize && EXACT_PIXEL_SIZE.test(imageSize) ? { size: imageSize } : {
+        ...aspectRatio ? { aspect_ratio: aspectRatio } : {},
+        ...imageSize ? { resolution: imageSize } : {}
+      },
+      ...referenceParts.length > 0 ? { input_references: referenceParts } : {},
+      ...options?.quality ? { quality: options.quality } : {},
+      ...options?.background ? { background: options.background } : {},
+      ...options?.background === "transparent" ? { output_format: options.outputFormat ?? "png" } : {}
+    };
+  } else if (isGrok) {
+    const content2 = referenceParts.length > 0 ? [...referenceParts, { type: "text", text: effectivePrompt }] : effectivePrompt;
+    body = {
+      model: modelId,
+      messages: [{ role: "user", content: content2 }],
+      stream: false
+    };
+  } else {
+    const contentParts = [
+      ...referenceParts,
+      { type: "text", text: effectivePrompt }
+    ];
+    const imageConfig = {
+      // These models only take preset ratios, so callers always supply one.
+      aspect_ratio: aspectRatio ?? "1:1"
+    };
+    if (imageSize) {
+      imageConfig.image_size = imageSize;
+    }
+    if (isSourceful && brandImages?.fontUrl) {
+      const fontSampleText = brandImages.fontText || "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789";
+      imageConfig.font_inputs = [
+        {
+          font_url: brandImages.fontUrl,
+          text: fontSampleText
+        }
+      ];
+    }
+    body = {
+      model: modelId,
+      messages: [{ role: "user", content: contentParts }],
+      modalities: textOutput ? ["image", "text"] : ["image"],
+      stream: false,
+      image_config: imageConfig
+    };
+  }
+  if (referenceMode === "user-priority" && referenceParts.length > 0) {
+    body.x_reference_manifest = {
+      userReferenceCount: keptUserReferenceCount,
+      sourceReferenceCount: keptSourceCount,
+      totalReferenceCount: referenceParts.length,
+      logoAttached: logoIsAttached,
+      // How many of its own assets the host may append, decided by the budget
+      // above. The host compresses each one to maxHostAssetBytes so the
+      // reservation the SDK made for it stays honest.
+      brandAssetSlots: keptHostBrandAssets,
+      adReferenceSlots: keptHostAdReferences,
+      maxHostAssetBytes: HOST_ASSET_BYTE_RESERVATION
+    };
+  }
+  const response = await fetch(imageGenUrl, {
+    method: "POST",
+    signal,
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+  if (!response.ok) {
+    let message = `OpenRouter API error ${response.status}`;
+    try {
+      const err = await response.json();
+      if (err?.error?.message) {
+        message = err.error.message;
+      }
+    } catch {
+    }
+    throw new Error(message);
+  }
+  const data = await response.json();
+  const imagesApiResult = data?.data?.[0];
+  if (imagesApiResult?.b64_json) {
+    const mediaType = imagesApiResult.media_type ?? "image/png";
+    return `data:${mediaType};base64,${imagesApiResult.b64_json}`;
+  }
+  const images = data?.choices?.[0]?.message?.images;
+  if (images?.[0]?.image_url?.url) {
+    return images[0].image_url.url;
+  }
+  const content = data?.choices?.[0]?.message?.content;
+  if (typeof content === "string" && content.length > 0) {
+    return content;
+  }
+  if (Array.isArray(content)) {
+    const imgPart = content.find(
+      (p) => p?.type === "image_url" && p?.image_url?.url
+    );
+    if (imgPart?.image_url?.url) {
+      return imgPart.image_url.url;
+    }
+  }
+  throw new Error("No image was returned by the API.");
+}
+
+// components/auto-resize/autoResizeStore.ts
+var activities = [];
+var stepSequence = 0;
+var loadingFrames = [];
+var listeners = /* @__PURE__ */ new Set();
+function notify() {
+  listeners.forEach((fn) => fn());
+}
+var autoResizeStore = {
+  startActivity(frame, cancel) {
+    activities = [
+      ...activities.filter((a) => a.frameId !== frame.frameId),
+      { ...frame, status: "running", steps: [], cancel }
+    ];
+    const completed = activities.filter((a) => a.status !== "running").slice(-20);
+    activities = activities.filter(
+      (a) => a.status === "running" || completed.includes(a)
+    );
+    notify();
+  },
+  startStep(frameId, kind, name, model) {
+    const id = ++stepSequence;
+    const activity = activities.find((a) => a.frameId === frameId);
+    activity?.steps.push({
+      id,
+      kind,
+      name,
+      model,
+      status: "running",
+      startedAt: Date.now()
+    });
+    notify();
+    return id;
+  },
+  endStep(frameId, id, status, detail) {
+    const step = activities.find((a) => a.frameId === frameId)?.steps.find((s) => s.id === id);
+    if (step) {
+      Object.assign(step, { status, detail, finishedAt: Date.now() });
+    }
+    notify();
+  },
+  finishActivity(frameId, status) {
+    const activity = activities.find((a) => a.frameId === frameId);
+    if (activity) {
+      activity.status = status;
+      activity.cancel = void 0;
+    }
+    notify();
+  },
+  cancelActivity(frameId) {
+    activities.find((a) => a.frameId === frameId)?.cancel?.();
+  },
+  dismissActivity(frameId) {
+    activities = activities.filter(
+      (a) => a.frameId !== frameId || a.status === "running"
+    );
+    notify();
+  },
+  getActivities() {
+    return activities;
+  },
+  resetActivity() {
+    activities.forEach((a) => a.cancel?.());
+    activities = [];
+    notify();
+  },
+  setLoadingFrames(frames) {
+    loadingFrames = [...frames];
+    notify();
+  },
+  markComplete(frameId) {
+    loadingFrames = loadingFrames.filter((f) => f.frameId !== frameId);
+    notify();
+  },
+  clear() {
+    loadingFrames = [];
+    notify();
+  },
+  getLoadingFrames() {
+    return loadingFrames;
+  },
+  subscribe(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  }
+};
+
+// components/auto-resize/backgroundExtend.ts
+var SOLID_TEXTURE_ENERGY = 4;
+var SOLID_MEAN_SPREAD = 6;
+var STATIONARY_MEAN_SPREAD = 20;
+var GRADIENT_MIN_RANGE = 18;
+var MONOTONIC_RATIO = 0.8;
+var SPLIT_MIN_DELTA = 55;
+var SPLIT_EDGE_MARGIN = 0.12;
+var PATCH_GRID = 8;
+function clampInt(v, lo, hi) {
+  return Math.max(lo, Math.min(hi, Math.round(v)));
+}
+function colorDistance(a, b) {
+  return Math.sqrt((a.r - b.r) ** 2 + (a.g - b.g) ** 2 + (a.b - b.b) ** 2);
+}
+function toHex({
+  r,
+  g,
+  b
+}) {
+  const h = (v) => clampInt(v, 0, 255).toString(16).padStart(2, "0");
+  return `#${h(r)}${h(g)}${h(b)}`;
+}
+function regionMeans(buf, rect) {
+  const x0 = clampInt(rect.x, 0, buf.width);
+  const y0 = clampInt(rect.y, 0, buf.height);
+  const x1 = clampInt(rect.x + rect.w, 0, buf.width);
+  const y1 = clampInt(rect.y + rect.h, 0, buf.height);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let n = 0;
+  const lumas = [];
+  for (let y = y0; y < y1; y++) {
+    for (let x = x0; x < x1; x++) {
+      const i = (y * buf.width + x) * 4;
+      const pr = buf.data[i];
+      const pg = buf.data[i + 1];
+      const pb = buf.data[i + 2];
+      r += pr;
+      g += pg;
+      b += pb;
+      lumas.push(0.299 * pr + 0.587 * pg + 0.114 * pb);
+      n++;
+    }
+  }
+  if (n === 0) {
+    return { mean: { r: 0, g: 0, b: 0 }, lumaStdev: 0 };
+  }
+  const mean = { r: r / n, g: g / n, b: b / n };
+  const lumaMean = lumas.reduce((s, v) => s + v, 0) / lumas.length;
+  const variance = lumas.reduce((s, v) => s + (v - lumaMean) ** 2, 0) / lumas.length;
+  return { mean, lumaStdev: Math.sqrt(variance) };
+}
+function lineMeans(buf, axis) {
+  const outer = axis === "x" ? buf.width : buf.height;
+  const inner = axis === "x" ? buf.height : buf.width;
+  const out = [];
+  for (let o = 0; o < outer; o++) {
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    for (let i = 0; i < inner; i++) {
+      const x = axis === "x" ? o : i;
+      const y = axis === "x" ? i : o;
+      const idx = (y * buf.width + x) * 4;
+      r += buf.data[idx];
+      g += buf.data[idx + 1];
+      b += buf.data[idx + 2];
+    }
+    out.push({ r: r / inner, g: g / inner, b: b / inner });
+  }
+  return out;
+}
+function detectSplit(buf) {
+  let best = null;
+  for (const axis of ["x", "y"]) {
+    const means = lineMeans(buf, axis);
+    const len2 = means.length;
+    if (len2 < 8) {
+      continue;
+    }
+    const lo = Math.floor(len2 * SPLIT_EDGE_MARGIN);
+    const hi = Math.ceil(len2 * (1 - SPLIT_EDGE_MARGIN));
+    for (let i = lo; i < hi - 1; i++) {
+      const delta = colorDistance(means[i], means[i + 1]);
+      if (delta >= SPLIT_MIN_DELTA && (!best || delta > best.delta)) {
+        best = { axis, index: i + 1, delta };
+      }
+    }
+  }
+  if (!best) {
+    return null;
+  }
+  const len = best.axis === "x" ? buf.width : buf.height;
+  return { axis: best.axis, at: best.index / len };
+}
+function analyzeRegion(buf, rect) {
+  const patchW = rect.w / PATCH_GRID;
+  const patchH = rect.h / PATCH_GRID;
+  const means = [];
+  const energies = [];
+  for (let gy = 0; gy < PATCH_GRID; gy++) {
+    for (let gx = 0; gx < PATCH_GRID; gx++) {
+      const { mean, lumaStdev } = regionMeans(buf, {
+        x: rect.x + gx * patchW,
+        y: rect.y + gy * patchH,
+        w: patchW,
+        h: patchH
+      });
+      means.push(mean);
+      energies.push(lumaStdev);
+    }
+  }
+  const textureEnergy = energies.reduce((s, v) => s + v, 0) / energies.length;
+  const overall = means.reduce(
+    (acc, m) => ({ r: acc.r + m.r, g: acc.g + m.g, b: acc.b + m.b }),
+    { r: 0, g: 0, b: 0 }
+  );
+  const meanColor = {
+    r: overall.r / means.length,
+    g: overall.g / means.length,
+    b: overall.b / means.length
+  };
+  const meanSpread = Math.max(...means.map((m) => colorDistance(m, meanColor)));
+  const monotonic = isMonotonic(means);
+  let verdict;
+  if (textureEnergy < SOLID_TEXTURE_ENERGY && meanSpread < SOLID_MEAN_SPREAD) {
+    verdict = "solid";
+  } else if (meanSpread < STATIONARY_MEAN_SPREAD) {
+    verdict = "texture";
+  } else if (monotonic) {
+    verdict = "gradient";
+  } else {
+    verdict = "photo";
+  }
+  return { rect, textureEnergy, meanSpread, monotonic, meanColor, verdict };
+}
+function isMonotonic(means) {
+  const luma = (m) => 0.299 * m.r + 0.587 * m.g + 0.114 * m.b;
+  for (const axis of ["x", "y"]) {
+    const series = [];
+    for (let a = 0; a < PATCH_GRID; a++) {
+      let sum = 0;
+      for (let b = 0; b < PATCH_GRID; b++) {
+        const idx = axis === "x" ? b * PATCH_GRID + a : a * PATCH_GRID + b;
+        sum += luma(means[idx]);
+      }
+      series.push(sum / PATCH_GRID);
+    }
+    const range = Math.max(...series) - Math.min(...series);
+    if (range < GRADIENT_MIN_RANGE) {
+      continue;
+    }
+    let up = 0;
+    let down = 0;
+    for (let i = 1; i < series.length; i++) {
+      if (series[i] > series[i - 1]) {
+        up++;
+      } else if (series[i] < series[i - 1]) {
+        down++;
+      }
+    }
+    const steps = series.length - 1;
+    if (Math.max(up, down) / steps >= MONOTONIC_RATIO) {
+      return true;
+    }
+  }
+  return false;
+}
+function classifyBackground(buf) {
+  const split = detectSplit(buf);
+  if (!split) {
+    const stats = analyzeRegion(buf, {
+      x: 0,
+      y: 0,
+      w: buf.width,
+      h: buf.height
+    });
+    return {
+      kind: stats.verdict,
+      solidColor: stats.verdict === "solid" ? toHex(stats.meanColor) : void 0,
+      regions: [stats]
+    };
+  }
+  const rects = split.axis === "x" ? [
+    { x: 0, y: 0, w: buf.width * split.at, h: buf.height },
+    {
+      x: buf.width * split.at,
+      y: 0,
+      w: buf.width * (1 - split.at),
+      h: buf.height
+    }
+  ] : [
+    { x: 0, y: 0, w: buf.width, h: buf.height * split.at },
+    {
+      x: 0,
+      y: buf.height * split.at,
+      w: buf.width,
+      h: buf.height * (1 - split.at)
+    }
+  ];
+  const regions = rects.map((r) => analyzeRegion(buf, r));
+  const extendable = regions.every(
+    (r) => r.verdict === "solid" || r.verdict === "texture"
+  );
+  if (!extendable) {
+    const whole = analyzeRegion(buf, {
+      x: 0,
+      y: 0,
+      w: buf.width,
+      h: buf.height
+    });
+    return {
+      kind: whole.verdict === "solid" ? "texture" : whole.verdict,
+      regions
+    };
+  }
+  return { kind: "panels", split, regions };
+}
+function makeCanvas(w, h) {
+  const c = document.createElement("canvas");
+  c.width = Math.max(1, Math.round(w));
+  c.height = Math.max(1, Math.round(h));
+  return c;
+}
+async function loadImageElement(dataUrl) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load background image"));
+    img.src = dataUrl;
+  });
+}
+async function imageToPixelBuffer(dataUrl, maxSide = 512) {
+  const img = await loadImageElement(dataUrl);
+  const scale = Math.min(1, maxSide / Math.max(img.width, img.height));
+  const w = Math.max(1, Math.round(img.width * scale));
+  const h = Math.max(1, Math.round(img.height * scale));
+  const canvas = makeCanvas(w, h);
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) {
+    throw new Error("2D canvas context unavailable");
+  }
+  ctx.drawImage(img, 0, 0, w, h);
+  const imageData = ctx.getImageData(0, 0, w, h);
+  return { data: imageData.data, width: w, height: h };
+}
+function mirrorTile(ctx, img, srcRect, dst) {
+  const tw = Math.max(1, srcRect.w);
+  const th = Math.max(1, srcRect.h);
+  const cols = Math.ceil(dst.w / tw);
+  const rows = Math.ceil(dst.h / th);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(dst.x, dst.y, dst.w, dst.h);
+  ctx.clip();
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const flipX = col % 2 === 1;
+      const flipY = row % 2 === 1;
+      ctx.save();
+      ctx.translate(
+        dst.x + col * tw + (flipX ? tw : 0),
+        dst.y + row * th + (flipY ? th : 0)
+      );
+      ctx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+      ctx.drawImage(
+        img,
+        srcRect.x,
+        srcRect.y,
+        srcRect.w,
+        srcRect.h,
+        0,
+        0,
+        tw,
+        th
+      );
+      ctx.restore();
+    }
+  }
+  ctx.restore();
+}
+function edgeExtend(ctx, img, tgtW, tgtH) {
+  const scale = Math.min(tgtW / img.width, tgtH / img.height);
+  const coreW = img.width * scale;
+  const coreH = img.height * scale;
+  const coreX = (tgtW - coreW) / 2;
+  const coreY = (tgtH - coreH) / 2;
+  const STRIP = Math.max(1, Math.round(Math.min(img.width, img.height) * 0.04));
+  if (coreX > 0) {
+    ctx.drawImage(img, 0, 0, STRIP, img.height, 0, coreY, coreX, coreH);
+    ctx.drawImage(
+      img,
+      img.width - STRIP,
+      0,
+      STRIP,
+      img.height,
+      coreX + coreW,
+      coreY,
+      tgtW - (coreX + coreW),
+      coreH
+    );
+  }
+  if (coreY > 0) {
+    ctx.drawImage(img, 0, 0, img.width, STRIP, 0, 0, tgtW, coreY);
+    ctx.drawImage(
+      img,
+      0,
+      img.height - STRIP,
+      img.width,
+      STRIP,
+      0,
+      coreY + coreH,
+      tgtW,
+      tgtH - (coreY + coreH)
+    );
+  }
+  ctx.drawImage(img, coreX, coreY, coreW, coreH);
+}
+function drawCover(ctx, img, tgtW, tgtH) {
+  const scale = Math.max(tgtW / img.width, tgtH / img.height);
+  const w = img.width * scale;
+  const h = img.height * scale;
+  ctx.drawImage(img, (tgtW - w) / 2, (tgtH - h) / 2, w, h);
+}
+async function buildTargetBackground(bg, tgtW, tgtH, opts) {
+  if (bg.type === "none") {
+    return { kind: "none" };
+  }
+  if (bg.type === "solid") {
+    return { kind: "solid", color: bg.color };
+  }
+  const img = await loadImageElement(bg.dataUrl);
+  if (!opts.needsExtension) {
+    const canvas2 = makeCanvas(tgtW, tgtH);
+    const ctx2 = canvas2.getContext("2d");
+    if (!ctx2) {
+      throw new Error("2D canvas context unavailable");
+    }
+    drawCover(ctx2, img, tgtW, tgtH);
+    return {
+      kind: "image",
+      dataUrl: canvas2.toDataURL("image/png"),
+      strategy: "scaled"
+    };
+  }
+  opts.onProgress?.("Analysing background\u2026");
+  const buf = await imageToPixelBuffer(bg.dataUrl);
+  const classification = classifyBackground(buf);
+  const sx = img.width / buf.width;
+  const sy = img.height / buf.height;
+  if (classification.kind === "solid" && classification.solidColor) {
+    return { kind: "solid", color: classification.solidColor };
+  }
+  const canvas = makeCanvas(tgtW, tgtH);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("2D canvas context unavailable");
+  }
+  if (classification.kind === "texture") {
+    opts.onProgress?.("Tiling background texture\u2026");
+    const patch = {
+      x: img.width * 0.25,
+      y: img.height * 0.25,
+      w: img.width * 0.5,
+      h: img.height * 0.5
+    };
+    mirrorTile(ctx, img, patch, { x: 0, y: 0, w: tgtW, h: tgtH });
+    return {
+      kind: "image",
+      dataUrl: canvas.toDataURL("image/png"),
+      strategy: "texture"
+    };
+  }
+  if (classification.kind === "panels" && classification.split) {
+    opts.onProgress?.("Rebuilding background panels\u2026");
+    const { axis, at } = classification.split;
+    for (let i = 0; i < 2; i++) {
+      const region = classification.regions[i];
+      const srcRect = {
+        x: region.rect.x * sx,
+        y: region.rect.y * sy,
+        w: region.rect.w * sx,
+        h: region.rect.h * sy
+      };
+      const dst = axis === "x" ? {
+        x: i === 0 ? 0 : tgtW * at,
+        y: 0,
+        w: i === 0 ? tgtW * at : tgtW * (1 - at),
+        h: tgtH
+      } : {
+        x: 0,
+        y: i === 0 ? 0 : tgtH * at,
+        w: tgtW,
+        h: i === 0 ? tgtH * at : tgtH * (1 - at)
+      };
+      if (region.verdict === "solid") {
+        ctx.fillStyle = toHex(region.meanColor);
+        ctx.fillRect(dst.x, dst.y, dst.w, dst.h);
+      } else {
+        const inset = 0.15;
+        mirrorTile(
+          ctx,
+          img,
+          {
+            x: srcRect.x + srcRect.w * inset,
+            y: srcRect.y + srcRect.h * inset,
+            w: srcRect.w * (1 - inset * 2),
+            h: srcRect.h * (1 - inset * 2)
+          },
+          dst
+        );
+      }
+    }
+    return {
+      kind: "image",
+      dataUrl: canvas.toDataURL("image/png"),
+      strategy: "panels"
+    };
+  }
+  if (classification.kind === "photo") {
+    if (img.width >= tgtW && img.height >= tgtH) {
+      opts.onProgress?.("Re-cropping background\u2026");
+      drawCover(ctx, img, tgtW, tgtH);
+      return {
+        kind: "image",
+        dataUrl: canvas.toDataURL("image/png"),
+        strategy: "scaled"
+      };
+    }
+    if (opts.outpaint) {
+      opts.onProgress?.("Extending background\u2026");
+      try {
+        const out = await opts.outpaint({
+          dataUrl: bg.dataUrl,
+          targetWidth: tgtW,
+          targetHeight: tgtH
+        });
+        if (out) {
+          const outImg = await loadImageElement(out);
+          drawCover(ctx, outImg, tgtW, tgtH);
+          return {
+            kind: "image",
+            dataUrl: canvas.toDataURL("image/png"),
+            strategy: "photo"
+          };
+        }
+      } catch {
+      }
+    }
+  }
+  opts.onProgress?.("Extending background edges\u2026");
+  edgeExtend(ctx, img, tgtW, tgtH);
+  return {
+    kind: "image",
+    dataUrl: canvas.toDataURL("image/png"),
+    strategy: "gradient"
+  };
+}
+
+// components/auto-resize/autoResizeEngine.ts
+import { nanoid } from "nanoid";
+import {
+  newFrameElement,
+  newElement,
+  newTextElement,
+  newImageElement,
+  getFrameChildren as getFrameChildren2,
+  syncMovedIndices,
+  styledTextToHtml
+} from "@orangecatai/element";
+import { FRAME_STYLE, arrayToMap } from "@orangecatai/common";
+
+// components/ai-chat/htmlToExcalidraw.ts
+import { normalizeStyleRanges } from "@orangecatai/element";
+var IFRAME_TIMEOUT_MS = 6e3;
+var MIN_DIMENSION_PX = 2;
+function colorToHex(color) {
+  if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
+    return "transparent";
+  }
+  if (color.startsWith("#")) {
+    return color;
+  }
+  const match = color.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([0-9.]+))?\)/
+  );
+  if (!match) {
+    return color;
+  }
+  const r = parseInt(match[1], 10);
+  const g = parseInt(match[2], 10);
+  const b = parseInt(match[3], 10);
+  const hex = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+  return hex;
+}
+function cssAlphaToOpacity(color) {
+  const match = color.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*([0-9.]+)\)/);
+  if (match) {
+    return Math.round(parseFloat(match[1]) * 100);
+  }
+  return 100;
+}
+function mapFontFamily(fontFamily, customFontMap) {
+  const lower = fontFamily.toLowerCase();
+  if (customFontMap) {
+    for (const [name, id] of Object.entries(customFontMap)) {
+      if (lower.includes(name)) {
+        return id;
+      }
+    }
+  }
+  if (lower.includes("sans-serif") || lower.includes("arial") || lower.includes("helvetica") || lower.includes("verdana") || lower.includes("impact") || lower.includes("nunito") || lower.includes("roboto") || lower.includes("inter") || lower.includes("liberation sans") || lower.includes("tahoma") || lower.includes("trebuchet")) {
+    return 2;
+  }
+  if (lower.includes("georgia") || lower.includes("serif") || lower.includes("cursive") || lower.includes("script") || lower.includes("times") || lower.includes("playfair")) {
+    return 1;
+  }
+  if (lower.includes("courier") || lower.includes("mono") || lower.includes("cascadia")) {
+    return 3;
+  }
+  return 2;
+}
+function applyTextTransform(text, transform) {
+  switch (transform) {
+    case "uppercase":
+      return text.toUpperCase();
+    case "lowercase":
+      return text.toLowerCase();
+    case "capitalize":
+      return text.replace(/\b\w/g, (c) => c.toUpperCase());
+    default:
+      return text;
+  }
+}
+function parseFontSize(fontSize) {
+  const px = parseFloat(fontSize);
+  return isNaN(px) ? 16 : Math.round(px);
+}
+function parseBorderRadius(style) {
+  const raw = style.borderTopLeftRadius || "0";
+  const px = parseFloat(raw);
+  return isNaN(px) ? 0 : Math.round(px);
+}
+function detectEllipse(style, width, height) {
+  const raw = style.borderTopLeftRadius || "0";
+  if (raw.includes("%")) {
+    const pct = parseFloat(raw);
+    if (!isNaN(pct) && pct >= 50) {
+      return true;
+    }
+  } else {
+    const px = parseFloat(raw);
+    if (!isNaN(px) && px > 0 && px >= width / 2 && px >= height / 2) {
+      return true;
+    }
+  }
+  return false;
+}
+function isGradient(bgImage) {
+  return bgImage !== "none" && (bgImage.includes("linear-gradient") || bgImage.includes("radial-gradient"));
+}
+function extractGradientColor(bgImage) {
+  const matches = [...bgImage.matchAll(/(#[\da-fA-F]{3,8}|rgba?\([^)]+\))/g)];
+  if (matches.length === 0) {
+    return "#1a1a2e";
+  }
+  if (matches.length === 1) {
+    return colorToHex(matches[0][1]);
+  }
+  if (bgImage.includes("repeating")) {
+    return colorToHex(matches[0][1]);
+  }
+  const first = colorToHex(matches[0][1]).replace("#", "").padEnd(6, "0");
+  const last = colorToHex(matches[matches.length - 1][1]).replace("#", "").padEnd(6, "0");
+  const r1 = parseInt(first.slice(0, 2), 16);
+  const g1 = parseInt(first.slice(2, 4), 16);
+  const b1 = parseInt(first.slice(4, 6), 16);
+  const r2 = parseInt(last.slice(0, 2), 16);
+  const g2 = parseInt(last.slice(2, 4), 16);
+  const b2 = parseInt(last.slice(4, 6), 16);
+  const avg = (v1, v2) => Math.round((v1 + v2) / 2).toString(16).padStart(2, "0");
+  return `#${avg(r1, r2)}${avg(g1, g2)}${avg(b1, b2)}`;
+}
+function extractDataUri(bgImage) {
+  const match = bgImage.match(/url\("?(data:[^")]+)"?\)/);
+  return match ? match[1] : null;
+}
+function getTextAlign(align) {
+  if (align === "center") {
+    return "center";
+  }
+  if (align === "right" || align === "end") {
+    return "right";
+  }
+  return "left";
+}
+var INLINE_TAGS = /* @__PURE__ */ new Set(["SPAN", "EM", "STRONG", "B", "I", "A", "LABEL"]);
+function getFullText(el) {
+  return getFullTextWithStyles(el)?.text ?? null;
+}
+function getFullTextWithStyles(el, getStyle, customFontMap) {
+  let text = "";
+  let hasInlineContent = false;
+  const ranges = [];
+  const parentStyle = getStyle?.(el);
+  const inlineStyle = (child) => {
+    if (!getStyle || !parentStyle) {
+      return {};
+    }
+    const style = getStyle(child);
+    const run = {};
+    const weight = parseInt(style.fontWeight, 10);
+    const parentWeight = parseInt(parentStyle.fontWeight, 10);
+    if (weight >= 600 && !(parentWeight >= 600)) {
+      run.bold = true;
+    }
+    if (style.fontStyle !== "normal" && parentStyle.fontStyle === "normal") {
+      run.italic = true;
+    }
+    const decoration = `${style.textDecorationLine || style.textDecoration}`;
+    if (decoration.includes("underline")) {
+      run.underline = true;
+    }
+    if (decoration.includes("line-through")) {
+      run.strikethrough = true;
+    }
+    if (style.color && style.color !== parentStyle.color) {
+      run.color = colorToHex(style.color);
+    }
+    if (style.fontSize && style.fontSize !== parentStyle.fontSize) {
+      run.fontSize = parseFontSize(style.fontSize);
+    }
+    if (style.fontFamily && style.fontFamily !== parentStyle.fontFamily && customFontMap) {
+      run.fontFamily = mapFontFamily(
+        style.fontFamily,
+        customFontMap
+      );
+    }
+    return run;
+  };
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const t = node.textContent || "";
+      if (t.trim()) {
+        hasInlineContent = true;
+      }
+      text += t;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const child = node;
+      if (child.tagName === "BR") {
+        text += "\n";
+        hasInlineContent = true;
+      } else if (INLINE_TAGS.has(child.tagName)) {
+        const t = child.textContent || "";
+        if (t.trim()) {
+          hasInlineContent = true;
+        }
+        const start = text.length;
+        text += t;
+        const style = inlineStyle(child);
+        if (Object.keys(style).length) {
+          ranges.push({ start, end: text.length, style });
+        }
+      }
+    }
+  }
+  const leading = text.match(/^\s+/)?.[0].length ?? 0;
+  const trimmed = text.replace(/^\s+|\s+$/g, "");
+  if (!hasInlineContent || !trimmed) {
+    return null;
+  }
+  return {
+    text: trimmed,
+    styleRanges: normalizeStyleRanges(
+      ranges.map((range) => ({
+        start: range.start - leading,
+        end: range.end - leading,
+        style: range.style
+      })),
+      trimmed.length
+    )
+  };
+}
+async function htmlToExcalidrawElements(html, frameX, frameY, frameWidth, frameHeight, customFontMap) {
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText = `
+    position: fixed;
+    left: -${frameWidth + 200}px;
+    top: 0;
+    width: ${frameWidth}px;
+    height: ${frameHeight}px;
+    border: none;
+    visibility: hidden;
+  `;
+  document.body.appendChild(iframe);
+  try {
+    await new Promise((resolve, reject) => {
+      const timer = setTimeout(() => resolve(), IFRAME_TIMEOUT_MS);
+      iframe.addEventListener(
+        "load",
+        () => {
+          clearTimeout(timer);
+          resolve();
+        },
+        { once: true }
+      );
+      iframe.addEventListener(
+        "error",
+        () => {
+          clearTimeout(timer);
+          reject(new Error("iframe load error"));
+        },
+        { once: true }
+      );
+      const baseStyles = `<style>
+        * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
+        body { margin: 0; padding: 0; }
+      </style>`;
+      iframe.srcdoc = baseStyles + html;
+    });
+    const doc = iframe.contentDocument;
+    if (!doc) {
+      return [];
+    }
+    const root = doc.querySelector(".canvas");
+    if (!root) {
+    }
+    const rootEl = root ?? doc.body;
+    const rootRect = rootEl.getBoundingClientRect();
+    const allEls = Array.from(rootEl.querySelectorAll("*"));
+    const parsed = [];
+    for (const el of allEls) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width < MIN_DIMENSION_PX || rect.height < MIN_DIMENSION_PX) {
+        continue;
+      }
+      const style = iframe.contentWindow.getComputedStyle(el);
+      if (style.display === "none" || style.visibility === "hidden") {
+        continue;
+      }
+      if (INLINE_TAGS.has(el.tagName) && el.parentElement && getFullText(el.parentElement) !== null) {
+        continue;
+      }
+      const clipPath = style.clipPath || style.webkitClipPath || "none";
+      if (clipPath !== "none" && clipPath.includes("polygon")) {
+        continue;
+      }
+      const x = Math.round(frameX + (rect.left - rootRect.left));
+      const y = Math.round(frameY + (rect.top - rootRect.top));
+      const w = Math.round(rect.width);
+      const h = Math.round(rect.height);
+      const globalOpacity = Math.round(parseFloat(style.opacity ?? "1") * 100);
+      const bgImage = style.backgroundImage || "none";
+      const bgColor = style.backgroundColor || "transparent";
+      const borderColor = style.borderColor || "transparent";
+      const borderWidth = parseFloat(style.borderWidth || "0");
+      const dataUri = extractDataUri(bgImage);
+      if (dataUri) {
+        parsed.push({
+          kind: "image",
+          x,
+          y,
+          width: w,
+          height: h,
+          dataUrl: dataUri
+        });
+        continue;
+      }
+      const directTextWithStyles = getFullTextWithStyles(
+        el,
+        (node) => iframe.contentWindow.getComputedStyle(node),
+        customFontMap
+      );
+      let directText = directTextWithStyles?.text ?? null;
+      if (directText) {
+        const textTransform = style.textTransform || "none";
+        directText = applyTextTransform(directText, textTransform);
+        const textOpacity = globalOpacity < 100 ? globalOpacity : cssAlphaToOpacity(style.color || "rgb(0,0,0)");
+        const align = getTextAlign(style.textAlign || "left");
+        let textX = x;
+        if (align === "center") {
+          textX = x + w / 2;
+        } else if (align === "right") {
+          textX = x + w;
+        }
+        parsed.push({
+          kind: "text",
+          x: textX,
+          y,
+          width: w,
+          height: h,
+          text: directText,
+          styleRanges: directTextWithStyles?.styleRanges,
+          fontSize: parseFontSize(style.fontSize || "16px"),
+          fontFamily: mapFontFamily(style.fontFamily || "", customFontMap),
+          color: colorToHex(style.color || "#000000"),
+          textAlign: align,
+          opacity: Math.min(globalOpacity, textOpacity)
+        });
+      }
+      const hasVisibleBg = bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
+      const hasGradient = isGradient(bgImage);
+      const hasVisibleBorder = borderWidth > 0 && borderColor !== "transparent" && borderColor !== "rgba(0, 0, 0, 0)";
+      if (hasVisibleBg || hasGradient || hasVisibleBorder) {
+        const hexBg = hasGradient ? extractGradientColor(bgImage) : colorToHex(bgColor);
+        const shouldBeEllipse = detectEllipse(style, w, h);
+        const shapeEl = shouldBeEllipse ? {
+          kind: "ellipse",
+          x,
+          y,
+          width: w,
+          height: h,
+          backgroundColor: hasVisibleBg || hasGradient ? hexBg : "transparent",
+          strokeColor: hasVisibleBorder ? colorToHex(borderColor) : "transparent",
+          strokeWidth: hasVisibleBorder ? Math.round(borderWidth) : 0,
+          opacity: globalOpacity
+        } : {
+          kind: "rectangle",
+          x,
+          y,
+          width: w,
+          height: h,
+          backgroundColor: hasVisibleBg || hasGradient ? hexBg : "transparent",
+          strokeColor: hasVisibleBorder ? colorToHex(borderColor) : "transparent",
+          strokeWidth: hasVisibleBorder ? Math.round(borderWidth) : 0,
+          opacity: globalOpacity,
+          borderRadius: parseBorderRadius(style)
+        };
+        if (hasGradient) {
+          shapeEl.backgroundGradient = bgImage;
+        }
+        if (directText) {
+          parsed.splice(parsed.length - 1, 0, shapeEl);
+        } else {
+          parsed.push(shapeEl);
+        }
+      }
+    }
+    return parsed;
+  } finally {
+    document.body.removeChild(iframe);
+  }
+}
+
+// components/ai-chat/imagePayload.ts
+var MAX_REQUEST_WIRE_BYTES = 3.5 * 1024 * 1024;
+function isImagePart(part) {
+  return !!part && typeof part === "object" && part.type === "image_url" && typeof part.image_url?.url === "string";
+}
+function collectImageParts(messages) {
+  const out = [];
+  messages.forEach((m, msgIndex) => {
+    if (!Array.isArray(m.content)) {
+      return;
+    }
+    for (const part of m.content) {
+      if (isImagePart(part)) {
+        out.push({ msgIndex, part });
+      }
+    }
+  });
+  return out;
+}
+async function normalizeRequestImages(messages) {
+  const loose = messages;
+  const parts = collectImageParts(loose);
+  if (parts.length === 0) {
+    return messages;
+  }
+  const shrunk = await Promise.all(
+    parts.map(({ part }) => shrinkImageDataUrl(part.image_url.url))
+  );
+  parts.forEach(({ part }, i) => {
+    part.image_url.url = shrunk[i];
+  });
+  const bodySize = () => JSON.stringify(messages).length;
+  if (bodySize() <= MAX_REQUEST_WIRE_BYTES) {
+    return messages;
+  }
+  for (const edge of [960, 720, 512]) {
+    const ordered = [...parts].sort(
+      (a, b) => dataUrlWireBytes(b.part.image_url.url) - dataUrlWireBytes(a.part.image_url.url)
+    );
+    for (const { part } of ordered) {
+      part.image_url.url = await reencodeAtEdge(part.image_url.url, edge);
+      if (bodySize() <= MAX_REQUEST_WIRE_BYTES) {
+        return messages;
+      }
+    }
+  }
+  const lastMsgIndex = loose.length - 1;
+  for (const { msgIndex, part } of parts) {
+    if (msgIndex === lastMsgIndex) {
+      continue;
+    }
+    const owner = loose[msgIndex];
+    if (!Array.isArray(owner.content)) {
+      continue;
+    }
+    owner.content = owner.content.filter((p) => p !== part);
+    console.warn(
+      "[imagePayload] dropped an image from an earlier turn to fit the request cap"
+    );
+    if (bodySize() <= MAX_REQUEST_WIRE_BYTES) {
+      return messages;
+    }
+  }
+  return messages;
+}
+async function describeChatError(response) {
+  const raw = await response.text().catch(() => "");
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.error?.message) {
+      return parsed.error.message;
+    }
+    if (typeof parsed?.error === "string") {
+      return parsed.error;
+    }
+  } catch {
+  }
+  if (response.status === 413) {
+    return "This request was too large to send. Try attaching fewer images, or start a new chat to clear older ones.";
+  }
+  if (response.status === 429) {
+    return "Rate limited \u2014 please wait a moment and try again.";
+  }
+  if (response.status === 401 || response.status === 403) {
+    return "This request was not authorised. Please refresh and try again.";
+  }
+  if (response.status >= 500) {
+    return `The AI service is temporarily unavailable (${response.status}). Please try again.`;
+  }
+  const detail = raw.trim().slice(0, 200);
+  return detail ? `Request failed (${response.status}): ${detail}` : `Request failed (${response.status}).`;
+}
+
+// components/ai-chat/reviewerAgent.ts
+var REVIEWER_SYSTEM_PROMPT = `You are the Brand Governance Agent \u2014 a Senior Ad Creative Director, Brand Compliance Officer, and Legal QA Auditor combined. You receive a rendered screenshot of a finished advertisement that was generated as a SINGLE AI image \u2014 the visuals AND all copy (headline, subheadline, CTA, body text, sign-off) are part of the image itself.
+
+Your job is to evaluate every output before it moves forward, covering BOTH creative quality AND brand-governance compliance. Return precise, actionable fixes that the art director will fold into a REVISED IMAGE-GENERATION PROMPT (the ad is regenerated, not edited element-by-element).
+
+## What you check (in priority order)
+
+### A \u2014 Creative Quality
+
+1. **Copy correctness** \u2014 Is every word of on-image text spelled correctly and rendered cleanly? AI image models frequently garble, misspell, duplicate, or drop letters. Flag any misspelled, malformed, gibberish, or truncated text and state the exact words that must appear.
+2. **Copy legibility** \u2014 Is the text large enough and high-contrast enough to read at a glance? Is it clear of busy areas of the image? Is the visual hierarchy right (headline dominant, CTA distinct)?
+3. **CTA prominence** \u2014 Is the call-to-action clearly readable and styled as an actionable element?
+4. **Composition & polish** \u2014 Balanced layout, adequate margins, no awkward cropping of subjects or text, professional advertising quality.
+
+### B \u2014 Brand Governance (check every dimension below)
+
+5. **Brand tone** \u2014 Does the copy register match the brand's prescribed tone-of-voice (e.g. friendly vs. authoritative, casual vs. formal, sentence length, vocabulary level, person/voice)? Flag tone drift even if individual words are correct.
+6. **Logo usage** \u2014 If a brand logo is visible in the ad: Is it correctly placed (not distorted, not overlapping busy areas)? Is it at an appropriate size? Has it been cropped, recolored, or stretched in violation of brand standards? If a logo was expected and is absent, flag that too.
+7. **Claim accuracy** \u2014 Are product or service claims in the copy factual and supportable? Flag superlatives ("best", "fastest", "#1") that are unqualified, exaggerated feature claims, and any copy that overpromises.
+8. **Legal mandatories** \u2014 Are required legal elements present where the brief or brand guidelines demand them (e.g. trademark symbols \u2122/\xAE, copyright notices, required taglines, mandated disclosures)?
+9. **Offer disclaimers** \u2014 If the ad contains a promotional offer, price, discount, or time-limited deal, is the appropriate disclaimer or terms-and-conditions reference visible (e.g. "T&Cs apply", "while stocks last", "offer ends DD/MM/YYYY")?
+10. **Regulatory sensitivity** \u2014 Does the ad touch regulated categories (finance, health, alcohol, gambling, children, pharmaceuticals, food nutrition claims)? If so, flag any copy that would likely breach sector-specific advertising standards (e.g. health benefit claims without qualification, alcohol ads implying social success, financial promotions without risk warnings).
+11. **Prohibited language** \u2014 Is there any language that is explicitly banned by the brand's guidelines or that is generally off-limits in advertising (hate speech, discriminatory language, demeaning stereotypes, shock tactics beyond what the brief permits)?
+12. **Competitive claims** \u2014 Does the ad make comparative or disparaging claims about named competitors or competitor products? Unless the brief explicitly permits a named comparison, flag these as requiring legal review.
+13. **Data/privacy concerns** \u2014 Does the copy contain, imply, or reference personally identifiable information, user data, or surveillance-style targeting language that could raise GDPR/CCPA concerns or erode consumer trust?
+
+## Rules for your critique
+
+- **Express every fix as a prompt-level instruction**, e.g. "Regenerate with the headline reading exactly 'Fresh Pasta, Made Daily' in a bold sans-serif" or "Add 'T&Cs apply' in small text at the bottom of the ad." Do NOT describe CSS, element coordinates, or canvas operations \u2014 there is no editable layer; the whole ad is regenerated from the prompt.
+- **Quote exact copy.** When text is wrong or missing, state the precise words that must appear so the next prompt can render them correctly.
+- If something is fine, do NOT invent issues. Approve confidently.
+- **User brief overrides brand guidelines.** If the user explicitly requested a color, style, or layout, treat it as intentional. Brand guidelines apply only where the brief is silent.
+- **NEVER suggest changes to the logo.** The logo is a supplied brand asset. Do NOT flag it as needing to be altered, recoloured, repositioned based on taste, or replaced. If you believe the logo is absent or severely distorted (e.g. unreadable), you may note it under the "logo" element, but your fix must only ask to reproduce it faithfully \u2014 never to redesign, recolour, or remove it.
+- **NEVER suggest changing the visual content of image elements.** Your mandate covers text copy correctness, legibility, legal mandatories, and brand tone. Do NOT suggest changing what an image depicts, what a product looks like, what the background scene contains, or the composition of any image asset. Only flag content that breaks a named compliance rule.
+- **Severity guide** \u2014 critical: blocks legal/compliance sign-off or is factually wrong; major: clear brand or quality failure that needs fixing before launch; minor: polish or preference that would improve the creative.
+
+## Approval criteria
+
+Set approved=true with an empty issues array only when ALL of the following are true:
+- All on-image copy is correctly spelled and matches the intended words
+- All text is legible (adequate size and contrast)
+- The CTA is clearly readable and distinct
+- Brand colors/typographic register are respected (where the brief is silent)
+- Brand tone-of-voice matches the prescribed register
+- Logo (if present) follows brand usage standards
+- No unqualified superlatives or unsupportable claims
+- All required legal mandatories and offer disclaimers are present
+- No regulatory red flags for the category
+- No prohibited language or inappropriate content
+- No unlicensed competitive claims or comparative disparagement
+- No data/privacy red flags in the copy
+- The composition looks intentional and professional
+
+## Output
+
+Return ONLY a JSON object matching this schema exactly. No markdown, no prose, no code fences.
+
+{
+  "approved": boolean,
+  "issues": [
+    {
+      "element": "headline" | "subheadline" | "cta" | "image" | "layout" | "brand" | "brand_tone" | "logo" | "claim" | "legal" | "disclaimer" | "regulatory" | "prohibited_language" | "competitive_claim" | "privacy",
+      "severity": "critical" | "major" | "minor",
+      "problem": "string \u2014 one sentence describing what is wrong",
+      "fix": "string \u2014 one-line direction",
+      "preciseInstruction": "string \u2014 a prompt-level instruction for the regenerated image, quoting exact copy where relevant"
+    }
+  ],
+  "summary": "string \u2014 1-2 sentences overall verdict"
+}
+
+## Example output (issues found)
+
+{
+  "approved": false,
+  "issues": [
+    {
+      "element": "headline",
+      "severity": "critical",
+      "problem": "The headline renders as 'Frsh Psata' \u2014 the AI image garbled the text.",
+      "fix": "Regenerate so the headline is spelled correctly.",
+      "preciseInstruction": "Regenerate the ad with the headline reading EXACTLY 'Fresh Pasta' in a bold sans-serif, crisp and legible, no misspellings."
+    },
+    {
+      "element": "claim",
+      "severity": "critical",
+      "problem": "Copy reads 'The World's Best Pasta' \u2014 an unqualified superlative with no supporting evidence.",
+      "fix": "Remove or qualify the superlative.",
+      "preciseInstruction": "Replace 'The World's Best Pasta' with a specific, supportable claim such as 'Award-Winning Fresh Pasta' or 'Loved by 10,000 Customers'."
+    },
+    {
+      "element": "disclaimer",
+      "severity": "major",
+      "problem": "The ad promotes '50% off today only' with no terms-and-conditions reference.",
+      "fix": "Add a disclaimer line for the limited-time offer.",
+      "preciseInstruction": "Add small text at the bottom of the ad reading 'Offer valid today only. T&Cs apply. While stocks last.'"
+    },
+    {
+      "element": "brand_tone",
+      "severity": "minor",
+      "problem": "The copy uses formal third-person language ('One may enjoy...') against a brand voice that is casual and second-person.",
+      "fix": "Rewrite in the brand's casual, direct voice.",
+      "preciseInstruction": "Replace the body copy with second-person, conversational language matching the brand tone, e.g. 'You'll love every bite \u2014 made fresh for you, every day.'"
+    }
+  ],
+  "summary": "Critical compliance and quality issues: misspelled headline, unqualified superlative, missing offer disclaimer, and tone-of-voice drift. Regenerate the image with the corrections above."
+}
+
+## Example output (approved)
+
+{
+  "approved": true,
+  "issues": [],
+  "summary": "Clean, compliant creative: copy is correctly spelled and legible, all claims are supportable, legal mandatories are present, brand tone and colors are on-point, and the composition looks polished and professional."
+}`;
+function buildReviewerBrandSummary(ctx) {
+  const parts = [];
+  if (ctx.colors) {
+    const { primary, secondary, accent, background } = ctx.colors;
+    const colorParts = [
+      primary && `primary: ${primary}`,
+      secondary && `secondary: ${secondary}`,
+      accent && `CTA/accent: ${accent}`,
+      background && `background: ${background}`
+    ].filter(Boolean);
+    if (colorParts.length) {
+      parts.push(`Brand colors \u2014 ${colorParts.join(", ")}`);
+    }
+  }
+  if (ctx.typography) {
+    const { headline, body } = ctx.typography;
+    if (headline?.family) {
+      parts.push(
+        `Headline font: ${headline.family}${headline.weight ? ` ${headline.weight}` : ""}`
+      );
+    }
+    if (body?.family) {
+      parts.push(
+        `Body font: ${body.family}${body.weight ? ` ${body.weight}` : ""}`
+      );
+    }
+  }
+  if (ctx.visualStyle) {
+    parts.push(`Visual style: ${ctx.visualStyle}`);
+  }
+  if (ctx.toneOfVoice) {
+    const { register, vocabulary, ctaStyle, sentenceLength, person } = ctx.toneOfVoice;
+    const toneParts = [
+      register && `register: ${register}`,
+      vocabulary && `vocabulary: ${vocabulary}`,
+      person && `person/voice: ${person}`,
+      sentenceLength && `sentence length: ${sentenceLength}`,
+      ctaStyle && `CTA style: ${ctaStyle}`
+    ].filter(Boolean);
+    if (toneParts.length) {
+      parts.push(`Tone-of-voice \u2014 ${toneParts.join(", ")}`);
+    }
+  }
+  if (ctx.logoDataUrl) {
+    const isBase64 = ctx.logoDataUrl.startsWith("data:");
+    parts.push(
+      `Logo: provided as ${isBase64 ? "base64 data URL" : "external URL"} \u2014 a reference image is attached separately; verify it appears correctly in the ad (correct placement, scale, no distortion or recolouring)`
+    );
+  }
+  return parts.join("\n");
+}
+async function runReviewerAgent(opts) {
+  const {
+    screenshotDataUrl,
+    htmlSource,
+    frame,
+    // imagePlacement retained in opts type for backward compatibility but unused
+    // in the image-first flow (the ad is a single full-frame generated image).
+    userBrief,
+    originalImageDataUrl,
+    brandContext,
+    chatUrl,
+    reviewerModel = "google/gemini-2.5-flash",
+    signal,
+    iteration
+  } = opts;
+  const fallback = {
+    approved: true,
+    issues: [],
+    summary: "Reviewer unavailable; skipping.",
+    iteration
+  };
+  const logoDataUrl = brandContext?.logoDataUrl;
+  const logoIsBase64 = typeof logoDataUrl === "string" && logoDataUrl.startsWith("data:");
+  const logoIsExternalUrl = typeof logoDataUrl === "string" && !logoIsBase64;
+  const fontPreviewDataUrl = brandContext?.headlineFontPreviewDataUrl;
+  const fontPreviewIsBase64 = typeof fontPreviewDataUrl === "string" && fontPreviewDataUrl.startsWith("data:");
+  const bodyFontPreviewDataUrl = brandContext?.bodyFontPreviewDataUrl;
+  const bodyFontPreviewIsBase64 = typeof bodyFontPreviewDataUrl === "string" && bodyFontPreviewDataUrl.startsWith("data:");
+  const originalImageIsBase64 = typeof originalImageDataUrl === "string" && originalImageDataUrl.startsWith("data:");
+  const contextLines = [
+    `## Ad Brief (what the user requested)`,
+    userBrief,
+    ``,
+    `## Frame dimensions`,
+    `Width: ${frame.width}px, Height: ${frame.height}px`
+  ];
+  if (originalImageIsBase64) {
+    contextLines.push(
+      ``,
+      `## Original reference image (what the user uploaded)`,
+      `The image the user originally attached is included below (immediately after the ad screenshot). Judge fidelity against it: the generated ad should preserve the subject, composition, and style of this reference unless the brief explicitly asked for a different treatment. Flag it as an issue if the ad has drifted from this reference in ways the brief did not request (wrong subject, different color scheme, altered composition).`
+    );
+  }
+  if (brandContext) {
+    const brandSummary = buildReviewerBrandSummary(brandContext);
+    if (brandSummary) {
+      contextLines.push(``, `## Brand guidelines`, brandSummary);
+    }
+  }
+  if (logoIsBase64) {
+    contextLines.push(
+      ``,
+      `## Brand logo (reference)`,
+      `The brand logo is attached below (after the ad screenshot${originalImageIsBase64 ? " and the original reference image" : ""}). Use it to evaluate whether the logo in the ad matches the brand's actual logo in colour, shape, and typographic treatment.`
+    );
+  } else if (logoIsExternalUrl) {
+    contextLines.push(
+      ``,
+      `## Brand logo (reference \u2014 URL, may not be visible)`,
+      `A logo URL was provided but could not be embedded as an image. Evaluate logo usage from what is visible in the ad screenshot only.`
+    );
+  }
+  if (fontPreviewIsBase64 || bodyFontPreviewIsBase64) {
+    const multiple = fontPreviewIsBase64 && bodyFontPreviewIsBase64;
+    contextLines.push(
+      ``,
+      `## Brand font preview${multiple ? "s" : ""} (reference)`,
+      `The brand font preview${multiple ? "s are" : " is"} attached below. Use ${multiple ? "them" : "it"} to evaluate whether the on-image text matches the brand typeface \u2014 check letterforms, weight, and typographic style. The brand may use ${multiple ? "either font" : "this font"} for headlines or body copy; do NOT flag a font as an issue simply because of which role it is applied to \u2014 only flag text that does not match the brand fonts at all.`
+    );
+  }
+  if (htmlSource && htmlSource.trim()) {
+    contextLines.push(``, `## Source (legacy)`, "```", htmlSource, "```");
+  }
+  contextLines.push(
+    ``,
+    `## Your task`,
+    `The screenshot of the generated ad is attached above. The whole ad (visuals + all copy) is a single AI-generated image. Evaluate it as the Brand Governance Agent \u2014 check creative quality (copy correctness, legibility, CTA, composition) AND all brand-governance dimensions (brand tone, logo usage, claim accuracy, legal mandatories, offer disclaimers, regulatory sensitivity, prohibited language, competitive claims, data/privacy concerns). Return your JSON critique. Every fix must be phrased as an instruction for regenerating the image.`
+  );
+  const userContent = [
+    {
+      type: "image_url",
+      image_url: { url: screenshotDataUrl }
+    }
+  ];
+  if (originalImageIsBase64 && originalImageDataUrl) {
+    userContent.push({
+      type: "image_url",
+      image_url: { url: originalImageDataUrl }
+    });
+  }
+  if (logoIsBase64 && logoDataUrl) {
+    userContent.push({
+      type: "image_url",
+      image_url: { url: logoDataUrl }
+    });
+  }
+  if (fontPreviewIsBase64 && fontPreviewDataUrl) {
+    userContent.push({
+      type: "image_url",
+      image_url: { url: fontPreviewDataUrl }
+    });
+  }
+  if (bodyFontPreviewIsBase64 && bodyFontPreviewDataUrl) {
+    userContent.push({
+      type: "image_url",
+      image_url: { url: bodyFontPreviewDataUrl }
+    });
+  }
+  userContent.push({
+    type: "text",
+    text: contextLines.join("\n")
+  });
+  const payload = {
+    model: reviewerModel,
+    messages: await normalizeRequestImages([
+      { role: "system", content: REVIEWER_SYSTEM_PROMPT },
+      { role: "user", content: userContent }
+    ]),
+    response_format: { type: "json_object" },
+    stream: false,
+    temperature: 0.2
+    // low temperature for consistent, precise critiques
+  };
+  let response;
+  try {
+    response = await fetch(chatUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "HTTP-Referer": "https://dughub.app",
+        "X-Title": "ADGEN Reviewer"
+      },
+      body: JSON.stringify(payload),
+      signal
+    });
+  } catch (err) {
+    if (err instanceof Error && err.name === "AbortError") {
+      throw err;
+    }
+    return fallback;
+  }
+  if (!response.ok) {
+    return fallback;
+  }
+  let raw;
+  try {
+    const data = await response.json();
+    raw = data?.choices?.[0]?.message?.content ?? "";
+  } catch {
+    return fallback;
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    const issues = Array.isArray(parsed.issues) ? parsed.issues.filter(
+      (iss) => iss && typeof iss.element === "string" && typeof iss.severity === "string" && typeof iss.problem === "string" && typeof iss.preciseInstruction === "string"
+    ) : [];
+    const approved = typeof parsed.approved === "boolean" ? parsed.approved : issues.length === 0;
+    return {
+      approved,
+      issues,
+      summary: typeof parsed.summary === "string" && parsed.summary.trim() ? parsed.summary : approved ? "Banner looks good." : `${issues.length} issue(s) found.`,
+      iteration
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+// components/auto-resize/autoResizeEngine.ts
+var GEMINI_RATIOS = {
+  "21:9": 21 / 9,
+  "16:9": 16 / 9,
+  "4:3": 4 / 3,
+  "3:2": 3 / 2,
+  "1:1": 1,
+  "9:16": 9 / 16,
+  "3:4": 3 / 4,
+  "2:3": 2 / 3,
+  "5:4": 5 / 4,
+  "4:5": 4 / 5,
+  "4:1": 4 / 1,
+  "1:4": 1 / 4,
+  "8:1": 8 / 1,
+  "1:8": 1 / 8
+};
+var AR_DIFF_TOLERANCE = 0.12;
+var CROP_LOSS_THRESHOLD = 0.35;
+function computeCropLoss(sourceAR, targetAR) {
+  if (sourceAR >= targetAR) {
+    const usedWidth = targetAR * 1;
+    return 1 - usedWidth / sourceAR;
+  }
+  const usedHeight = sourceAR / targetAR;
+  return 1 - usedHeight;
+}
+function needsBackgroundRegeneration(srcW, srcH, tgtW, tgtH) {
+  const srcAR = srcW / srcH;
+  const tgtAR = tgtW / tgtH;
+  const arDiff = Math.abs(srcAR - tgtAR);
+  if (arDiff <= AR_DIFF_TOLERANCE) {
+    return false;
+  }
+  return computeCropLoss(srcAR, tgtAR) > CROP_LOSS_THRESHOLD;
+}
+function nearestGeminiAspectRatio(w, h) {
+  const target = w / h;
+  let best = "1:1";
+  let bestDiff = Infinity;
+  for (const [label, ratio] of Object.entries(GEMINI_RATIOS)) {
+    const diff = Math.abs(target - ratio);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = label;
+    }
+  }
+  return best;
+}
+var GEMINI_RESOLUTION_TABLE = {
+  "1:1": {
+    "0.5K": [512, 512],
+    "1K": [1024, 1024],
+    "2K": [2048, 2048],
+    "4K": [4096, 4096]
+  },
+  "1:4": {
+    "0.5K": [256, 1024],
+    "1K": [512, 2048],
+    "2K": [1024, 4096],
+    "4K": [2048, 8192]
+  },
+  "1:8": {
+    "0.5K": [192, 1536],
+    "1K": [384, 3072],
+    "2K": [768, 6144],
+    "4K": [1536, 12288]
+  },
+  "2:3": {
+    "0.5K": [424, 632],
+    "1K": [848, 1264],
+    "2K": [1696, 2528],
+    "4K": [3392, 5056]
+  },
+  "3:2": {
+    "0.5K": [632, 424],
+    "1K": [1264, 848],
+    "2K": [2528, 1696],
+    "4K": [5056, 3392]
+  },
+  "3:4": {
+    "0.5K": [448, 600],
+    "1K": [896, 1200],
+    "2K": [1792, 2400],
+    "4K": [3584, 4800]
+  },
+  "4:1": {
+    "0.5K": [1024, 256],
+    "1K": [2048, 512],
+    "2K": [4096, 1024],
+    "4K": [8192, 2048]
+  },
+  "4:3": {
+    "0.5K": [600, 448],
+    "1K": [1200, 896],
+    "2K": [2400, 1792],
+    "4K": [4800, 3584]
+  },
+  "4:5": {
+    "0.5K": [464, 576],
+    "1K": [928, 1152],
+    "2K": [1856, 2304],
+    "4K": [3712, 4608]
+  },
+  "5:4": {
+    "0.5K": [576, 464],
+    "1K": [1152, 928],
+    "2K": [2304, 1856],
+    "4K": [4608, 3712]
+  },
+  "8:1": {
+    "0.5K": [1536, 192],
+    "1K": [3072, 384],
+    "2K": [6144, 768],
+    "4K": [12288, 1536]
+  },
+  "9:16": {
+    "0.5K": [384, 688],
+    "1K": [768, 1376],
+    "2K": [1536, 2752],
+    "4K": [3072, 5504]
+  },
+  "16:9": {
+    "0.5K": [688, 384],
+    "1K": [1376, 768],
+    "2K": [2752, 1536],
+    "4K": [5504, 3072]
+  },
+  "21:9": {
+    "0.5K": [792, 168],
+    "1K": [1584, 672],
+    "2K": [3168, 1344],
+    "4K": [6336, 2688]
+  }
+};
+var AUTO_RESIZE_RESOLUTIONS = ["0.5K", "1K", "2K", "4K"];
+var AUTO_RESIZE_ASPECT_RATIOS = [
+  { ratio: "1:1", desc: "Square" },
+  { ratio: "16:9", desc: "Landscape" },
+  { ratio: "9:16", desc: "Portrait / Story" },
+  { ratio: "4:3", desc: "Landscape" },
+  { ratio: "3:4", desc: "Portrait" },
+  { ratio: "3:2", desc: "Landscape" },
+  { ratio: "2:3", desc: "Portrait" },
+  { ratio: "5:4", desc: "Landscape" },
+  { ratio: "4:5", desc: "Portrait" },
+  { ratio: "21:9", desc: "Ultrawide" },
+  { ratio: "4:1", desc: "Wide strip" },
+  { ratio: "1:4", desc: "Tall strip" },
+  { ratio: "8:1", desc: "Banner" },
+  { ratio: "1:8", desc: "Skyscraper" }
+];
+function geminiDimsFor(ratio, resolution) {
+  const row = GEMINI_RESOLUTION_TABLE[ratio] ?? GEMINI_RESOLUTION_TABLE["1:1"];
+  const dims = row[resolution] ?? row["1K"] ?? [1024, 1024];
+  return { width: dims[0], height: dims[1] };
+}
+function selectOptimalResolution(targetW, targetH, aspectRatio) {
+  const resolutions = GEMINI_RESOLUTION_TABLE[aspectRatio];
+  if (!resolutions) {
+    return "1K";
+  }
+  const targetArea = targetW * targetH;
+  let best = "1K";
+  let bestDiff = Infinity;
+  for (const [resLevel, [w, h]] of Object.entries(resolutions)) {
+    const resArea = w * h;
+    const diff = Math.abs(resArea - targetArea);
+    if (resArea >= targetArea) {
+      if (diff < bestDiff) {
+        bestDiff = diff;
+        best = resLevel;
+      }
+    } else if (bestDiff === Infinity || diff < bestDiff) {
+      bestDiff = diff;
+      best = resLevel;
+    }
+  }
+  return best;
+}
+function preCreateAllFrames(targetDimensions, sourceFrame, app) {
+  const startX = sourceFrame.x + sourceFrame.width + 80;
+  const frameInfos = targetDimensions.map((dim, i) => {
+    const y = targetDimensions.slice(0, i).reduce((acc, d) => acc + d.height + 40, sourceFrame.y);
+    const newFrame = newFrameElement({
+      ...FRAME_STYLE,
+      x: startX,
+      y,
+      width: dim.width,
+      height: dim.height,
+      opacity: 100,
+      locked: false,
+      name: dim.label ?? `${dim.width}\xD7${dim.height}`
+    });
+    return {
+      frame: newFrame,
+      x: startX,
+      y,
+      width: dim.width,
+      height: dim.height
+    };
+  });
+  const currentEls = app.getSceneElements();
+  const newFrameEls = frameInfos.map((fi) => fi.frame);
+  const withFrames = [...currentEls, ...newFrameEls];
+  syncMovedIndices(withFrames, arrayToMap(newFrameEls));
+  app.updateScene({ elements: withFrames });
+  return frameInfos.map((fi) => ({
+    frameId: fi.frame.id,
+    x: fi.x,
+    y: fi.y,
+    width: fi.width,
+    height: fi.height
+  }));
+}
+async function runAutoResize(opts) {
+  const { runNativeAutoResize } = await import("./components/auto-resize/nativeResizeAgent-5XWJJ74W.js");
+  return runNativeAutoResize(opts);
+}
+
+export {
+  isStructuredFrame,
+  AUTO_RESIZE_FLAT_FRAME_REASON,
+  isOpenAIImageModel,
+  resolveImageOutputSize,
+  buildReferenceManifest,
+  callOpenRouterImageAPI,
+  autoResizeStore,
+  htmlToExcalidrawElements,
+  normalizeRequestImages,
+  describeChatError,
+  runReviewerAgent,
+  buildTargetBackground,
+  needsBackgroundRegeneration,
+  nearestGeminiAspectRatio,
+  AUTO_RESIZE_RESOLUTIONS,
+  AUTO_RESIZE_ASPECT_RATIOS,
+  geminiDimsFor,
+  selectOptimalResolution,
+  preCreateAllFrames,
+  runAutoResize
+};
+//# sourceMappingURL=chunk-T57LHRZV.js.map