@orangecatai/adgen-canvas 0.0.39 → 0.0.40

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-5XP2WJAQ.js";
+} from "./chunk-XWMZCKIQ.js";
 import {
   define_import_meta_env_default
-} from "./chunk-E7VZGEUJ.js";
+} from "./chunk-JWNDQ5YS.js";
 import {
   en_default
 } from "./chunk-LIELFD5T.js";
@@ -9733,7 +9733,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-PUPXCX7M.js").then(
+        (blob2) => import("./data/image-CHTDICZP.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -22814,7 +22814,7 @@ function hasPendingGeneration(elementId) {
 import { useCallback as useCallback17, useEffect as useEffect33, useRef as useRef29, useState as useState31 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords6 } from "@orangecatai/common";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords9 } from "@orangecatai/element";
-import { ArrowUp as ArrowUp2 } from "lucide-react";
+import { ArrowUp as ArrowUp2, ImagePlus as ImagePlus2, X as X2 } from "lucide-react";
 
 // utils/imageCompression.ts
 var MAX_EDGE_PX = 1280;
@@ -23354,243 +23354,6 @@ ${referenceManifest}` : promptWithBrandContext;
   throw new Error("No image was returned by the API.");
 }
 
-// utils/brandContextUtils.ts
-var SIZE_SCALE_MAP = {
-  display: "48\u201372px",
-  large: "32\u201348px",
-  medium: "20\u201328px",
-  small: "14\u201318px"
-};
-function buildBrandContextMessage(ctx) {
-  const lines = [
-    "## Brand Identity \u2014 you MUST apply every guideline below to all ads you create, by default"
-  ];
-  if (ctx.colors) {
-    const { primary, secondary, accent, background } = ctx.colors;
-    const parts = [
-      primary && `Primary: ${primary}`,
-      secondary && `Secondary: ${secondary}`,
-      accent && `Accent/CTA: ${accent}`,
-      background && `Background: ${background}`
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(`**Colors**: ${parts.join(", ")}`);
-    }
-  }
-  if (ctx.typography) {
-    const { headline, body } = ctx.typography;
-    if (headline?.family) {
-      const sizeHint = headline.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[headline.sizeScale] ?? headline.sizeScale})` : "";
-      const fontFileNote = headline.fontFamilyId ? ` \u2014 a brand font; match this typeface closely for the on-image text (use your judgment for which brand font suits headlines vs body copy)` : ` \u2014 render on-image text in a style that matches ${headline.family}`;
-      lines.push(
-        `**Headline font**: ${headline.family}${headline.weight ? ` weight ${headline.weight}` : ""}${sizeHint}${fontFileNote}`
-      );
-    }
-    if (body?.family) {
-      const sizeHint = body.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[body.sizeScale] ?? body.sizeScale})` : "";
-      const fontFileNote = body.fontFamilyId ? ` \u2014 a brand font; match this typeface closely for the on-image text (use your judgment for which brand font suits headlines vs body copy)` : ` \u2014 render on-image text in a style that matches ${body.family}`;
-      lines.push(
-        `**Body font**: ${body.family}${body.weight ? ` weight ${body.weight}` : ""}${sizeHint}${fontFileNote}`
-      );
-    }
-  }
-  if (ctx.visualStyle) {
-    lines.push(`**Visual style**: ${ctx.visualStyle}`);
-  }
-  if (ctx.layoutPattern) {
-    lines.push(`**Layout pattern**: ${ctx.layoutPattern}`);
-  }
-  if (ctx.toneOfVoice) {
-    const { register: register2, vocabulary, ctaStyle, sentenceLength, person } = ctx.toneOfVoice;
-    const parts = [
-      register2 && `register: ${register2}`,
-      vocabulary && `vocabulary: ${vocabulary}`,
-      ctaStyle && `CTA style: ${ctaStyle}`,
-      sentenceLength && `sentence length: ${sentenceLength}`,
-      person && `person: ${person}`
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(`**Tone of voice**: ${parts.join(", ")}`);
-    }
-  }
-  if (ctx.imagery) {
-    const {
-      type,
-      lighting,
-      composition,
-      subjects,
-      grading,
-      depthOfField,
-      environment,
-      negativeSpace
-    } = ctx.imagery;
-    const parts = [
-      type && `type: ${type}`,
-      subjects && `subjects: ${subjects}`,
-      lighting && `lighting: ${lighting}`,
-      grading && `grading: ${grading}`,
-      depthOfField && `depth of field: ${depthOfField}`,
-      environment && `environment: ${environment}`,
-      negativeSpace && `negative space: ${negativeSpace}`,
-      composition && `composition: ${composition}`
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(`**Imagery direction**: ${parts.join(", ")}`);
-    }
-  }
-  lines.push(
-    "",
-    "**Precedence**: these are defaults, not absolutes. If the user's request explicitly states or clearly implies something different from a guideline above \u2014 a different color, mood, style, subject treatment, or tone \u2014 follow the user's explicit instruction for that ad instead of the brand guideline it conflicts with. Do not silently override what the user asked for in favor of brand consistency; only apply a guideline where the user's request is silent on that point."
-  );
-  return lines.join("\n");
-}
-function buildImageGenSafePrompt(prompt, brandContext, opts) {
-  const hasUserReferences = Boolean(opts?.hasUserReferences);
-  const headlineFontName = brandContext.typography?.headline?.family;
-  const bodyFontName = brandContext.typography?.body?.family;
-  const fontNames = [headlineFontName, bodyFontName].filter(
-    (n, i, arr) => Boolean(n) && arr.indexOf(n) === i
-  );
-  const fontHint = fontNames.length ? ` Brand typography: the brand font${fontNames.length > 1 ? "s are" : " is"} ${fontNames.join(
-    " and "
-  )} \u2014 you MUST render ALL on-image text exclusively in this exact typeface as shown in the font reference image${fontNames.length > 1 ? "s" : ""}. Do NOT use any generic, default, or substitute font.` : "";
-  const brandImageInstructions = [];
-  if (brandContext.logoDataUrl) {
-    brandImageInstructions.push(
-      `BRAND LOGO: One of the attached reference images is the exact brand logo graphic \u2014 the reference manifest at the end of this prompt identifies which. Embed it VERBATIM in the ad \u2014 do not redraw, simplify, stylize, or alter it in any way. Do not overlap it with other copy or elements. The logo must appear exactly as it does in the reference image.`
-    );
-  }
-  if (brandContext.headlineFontPreviewDataUrl || brandContext.bodyFontPreviewDataUrl) {
-    const multiple = Boolean(
-      brandContext.headlineFontPreviewDataUrl && brandContext.bodyFontPreviewDataUrl
-    );
-    brandImageInstructions.push(
-      `BRAND FONT: The attached brand font specimen ${multiple ? "images are" : "image is"} the brand's exact typeface${multiple ? "s" : ""}. You MUST render EVERY piece of on-image text \u2014 headlines, subheadlines, CTA, sign-off, and body copy \u2014 EXCLUSIVELY in ${multiple ? "these exact fonts as shown (use the headline specimen for headlines, the body specimen for body/supporting copy)" : "this exact font as shown in the image"}. Do NOT use any generic, default, or substitute font anywhere in the ad.`
-    );
-  }
-  const brandImageHint = brandImageInstructions.length > 0 ? ` ${brandImageInstructions.join(" ")}` : "";
-  const brandNameHint = brandContext.name && !hasUserReferences ? ` This ad is for the brand "${brandContext.name}" \u2014 all visual elements, copy, and style must reflect this brand exclusively.` : "";
-  return `${prompt}${brandNameHint}${fontHint}${brandImageHint} Render all specified copy as crisp, correctly-spelled, legible text within the image.
-
-${PRECEDENCE_LINE}`;
-}
-var clean = (value) => {
-  const trimmed = value?.trim();
-  return trimmed ? trimmed : void 0;
-};
-var PRECEDENCE_LINE = "The subject, action, and setting described at the top are authoritative. Apply this brand direction only where the prompt is silent; where they conflict, the prompt wins.";
-function buildVideoBrandPrompt(prompt, ctx, opts) {
-  const lines = [];
-  const brandName = clean(ctx.name);
-  if (brandName) {
-    lines.push(`This is a brand film for ${brandName}.`);
-  }
-  if (ctx.colors) {
-    const primary = clean(ctx.colors.primary);
-    const secondary = clean(ctx.colors.secondary);
-    const accent = clean(ctx.colors.accent);
-    const background = clean(ctx.colors.background);
-    const parts = [
-      primary && `dominant ${primary}`,
-      secondary && `supporting ${secondary}`,
-      accent && `${accent} reserved for accents and CTA moments`,
-      background && `${background} for backgrounds and negative space`
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(
-        `Palette: ${parts.join(
-          "; "
-        )}. Grade the footage so these read as the natural colour story of the scene rather than as an overlay.`
-      );
-    }
-  }
-  const visualStyle = clean(ctx.visualStyle);
-  if (visualStyle) {
-    lines.push(`Look: ${visualStyle}.`);
-  }
-  if (ctx.imagery) {
-    const {
-      type,
-      subjects,
-      lighting,
-      grading,
-      depthOfField,
-      environment,
-      composition
-    } = ctx.imagery;
-    const parts = [
-      clean(type) && `${clean(type)} footage`,
-      clean(subjects) && `subjects: ${clean(subjects)}`,
-      clean(lighting) && `lighting: ${clean(lighting)}`,
-      clean(grading) && `grade: ${clean(grading)}`,
-      clean(depthOfField) && `depth of field: ${clean(depthOfField)}`,
-      clean(environment) && `environment: ${clean(environment)}`,
-      clean(composition) && `framing: ${clean(composition)}`
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(`Cinematography: ${parts.join(", ")}.`);
-    }
-  }
-  if (ctx.toneOfVoice) {
-    const { register: register2, vocabulary, ctaStyle, person } = ctx.toneOfVoice;
-    const parts = [
-      clean(register2),
-      clean(vocabulary) && `${clean(vocabulary)} vocabulary`,
-      clean(ctaStyle) && `${clean(ctaStyle)} calls to action`,
-      clean(person)
-    ].filter(Boolean);
-    if (parts.length) {
-      lines.push(
-        `Tone: ${parts.join(
-          ", "
-        )} \u2014 applies to any narration, voiceover, or on-screen copy.`
-      );
-    }
-  }
-  const typefaces = [
-    clean(ctx.typography?.headline?.family),
-    clean(ctx.typography?.body?.family)
-  ].filter(
-    (name, i, arr) => Boolean(name) && arr.indexOf(name) === i
-  );
-  if (typefaces.length) {
-    lines.push(
-      `On-screen text: keep to a minimum; if any appears it should read as ${typefaces.join(
-        " or "
-      )}, or a close match in spirit. No paragraphs of text.`
-    );
-  }
-  const userReferenceCount = Math.max(0, opts?.userReferenceCount ?? 0);
-  const hasLogo = Boolean(opts?.hasLogoReference && clean(ctx.logoDataUrl));
-  if (hasLogo) {
-    lines.push(
-      userReferenceCount > 0 ? (
-        // With user references present the logo is no longer first — the
-        // manifest appended below states its actual position.
-        "Brand logo: the brand logo is supplied as one of the attached reference images (see the manifest below). If it appears in frame, reproduce it verbatim \u2014 never redraw, restyle, recolour, or animate its glyphs."
-      ) : "Brand logo: the first reference image is the exact brand logo. If it appears in frame, reproduce it verbatim \u2014 never redraw, restyle, recolour, or animate its glyphs."
-    );
-  }
-  const manifest = userReferenceCount > 0 ? `
-
-${buildReferenceManifest(
-    userReferenceCount,
-    hasLogo ? ["the exact brand logo"] : []
-  )}` : "";
-  if (!lines.length) {
-    return manifest ? `${prompt}${manifest}` : prompt;
-  }
-  const header = brandName ? `## Brand direction \u2014 ${brandName}` : "## Brand direction";
-  return `${prompt}
-
-${header}
-${lines.join(
-    "\n"
-  )}
-
-${PRECEDENCE_LINE}${manifest}`;
-}
-
 // components/ImageGeneratorPanel.tsx
 import { useCallback as useCallback16, useEffect as useEffect32, useRef as useRef28, useState as useState30 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords5 } from "@orangecatai/common";
@@ -25040,7 +24803,6 @@ var ImageGeneratorPanel = ({
   };
   const appState = app.state;
   const imageGenUrl = app.props.imageGenUrl;
-  const brandContext = app.props.brandContext;
   const [prompt, setPrompt] = useState30(() => getPendingPrompt(element.id));
   const [selectedModel, setSelectedModel] = useState30(() => {
     const stored = getStoredSettings(element);
@@ -25319,39 +25081,20 @@ var ImageGeneratorPanel = ({
     let genError = null;
     try {
       const cfg = MODEL_CONFIG[selectedModel];
-      const brandImages = brandContext ? {
-        logo: brandContext.logoDataUrl,
-        fontPreview: brandContext.headlineFontPreviewDataUrl,
-        fontPreviewBody: brandContext.bodyFontPreviewDataUrl,
-        fontUrl: brandContext.headlineFontUrl,
-        brandContextText: buildBrandContextMessage(brandContext)
-      } : void 0;
-      const safePrompt = brandContext ? buildImageGenSafePrompt(prompt, brandContext, {
-        hasUserReferences: referenceImages.length > 0
-      }) : prompt;
       const { aspectRatio, imageSize } = resolveRequestSize(
         selectedModel,
         selectedRatio,
         selectedResolution
       );
       const imageDataUrl = await callOpenRouterImageAPI(
-        safePrompt,
+        prompt,
         cfg.modelId,
         aspectRatio,
         imageSize,
         cfg.textOutput,
         imageGenUrl,
         referenceImages,
-        controller.signal,
-        brandImages,
-        {
-          // The user picked these references — they lead the array and outrank
-          // the brand kit, which still travels with them behind the logo.
-          referenceMode: "user-priority",
-          protectLogo: true,
-          hostBrandAssetSlots: 2,
-          hostAdReferenceSlots: 2
-        }
+        controller.signal
       );
       await app.insertGeneratedImageIntoFrame(imageDataUrl, element);
       onAfterImageGen?.();
@@ -25826,7 +25569,6 @@ var ImageQuickEditPanel = ({
 }) => {
   const appState = app.state;
   const imageGenUrl = app.props.imageGenUrl;
-  const brandContext = app.props.brandContext;
   const [isOpen, setIsOpen] = useState31(
     () => forceOpen || hasPendingGeneration(element.id)
   );
@@ -25876,7 +25618,10 @@ var ImageQuickEditPanel = ({
   const ratioDropdownRef = useRef29(null);
   const resolutionDropdownRef = useRef29(null);
   const modelDropdownRef = useRef29(null);
+  const fileInputRef = useRef29(null);
   const abortControllerRef = useRef29(null);
+  const [referenceImages, setReferenceImages] = useState31([]);
+  const [chipMenu, setChipMenu] = useState31(false);
   const applyRatio = useCallback17((ratioLabel) => {
     setSelectedRatio(ratioLabel);
     setRatioOpen(false);
@@ -25912,6 +25657,36 @@ var ImageQuickEditPanel = ({
   const handleStop = useCallback17(() => {
     abortPendingGeneration(element.id);
   }, [element.id]);
+  const handleImageUpload = useCallback17(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      e.target.value = "";
+      Promise.all(
+        files.map(
+          (file2) => new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => resolve(null);
+            reader.readAsDataURL(file2);
+          })
+        )
+      ).then((results) => {
+        const added = results.filter(
+          (result) => Boolean(result)
+        );
+        setReferenceImages(
+          (current) => [...current, ...added].slice(0, MAX_USER_REFERENCE_IMAGES)
+        );
+      });
+    },
+    []
+  );
+  const handlePickResolved = useCallback17((_slot, dataUrl) => {
+    setReferenceImages(
+      (current) => [...current, dataUrl].slice(0, MAX_USER_REFERENCE_IMAGES)
+    );
+  }, []);
+  const picker = useCanvasFramePicker(app, handlePickResolved);
   const handleGenerate = useCallback17(async () => {
     if (!prompt.trim()) {
       setGenerateError("Please enter a prompt.");
@@ -25955,42 +25730,22 @@ var ImageQuickEditPanel = ({
     try {
       const cfg = MODEL_CONFIG[selectedModel];
       const refDataUrl = element.fileId ? app.files[element.fileId]?.dataURL : void 0;
-      const brandImages = brandContext ? {
-        logo: brandContext.logoDataUrl,
-        fontPreview: brandContext.headlineFontPreviewDataUrl,
-        fontPreviewBody: brandContext.bodyFontPreviewDataUrl,
-        fontUrl: brandContext.headlineFontUrl,
-        brandContextText: buildBrandContextMessage(brandContext)
-      } : void 0;
-      const basePrompt = brandContext ? buildImageGenSafePrompt(prompt, brandContext, {
-        hasUserReferences: Boolean(refDataUrl)
-      }) : prompt;
-      const safePrompt = `${basePrompt} CRITICAL PRESERVATION RULE: Apply ONLY the specific change described above. The number of visual elements (text blocks, logos, images, shapes, buttons) must be IDENTICAL before and after this edit \u2014 do NOT add any new element, do NOT remove any existing element, do NOT rearrange the layout or composition. Every element that exists in the source image must appear exactly once in the output, in the same position and arrangement. Only the specific requested change may differ.`;
       const { aspectRatio, imageSize } = resolveRequestSize(
         selectedModel,
         selectedRatio,
         selectedResolution
       );
       const imageDataUrl = await callOpenRouterImageAPI(
-        safePrompt,
+        prompt,
         cfg.modelId,
         aspectRatio,
         imageSize,
         cfg.textOutput,
         imageGenUrl,
-        void 0,
-        controller.signal,
-        brandImages,
-        {
-          referenceMode: "user-priority",
-          // The image under edit is the subject — it ranks above the brand kit
-          // and is never shed. The logo rides along below it and, uniquely on
-          // this surface, may be dropped if the payload runs out of room.
-          sourceImageDataUrl: refDataUrl,
-          protectLogo: false,
-          hostBrandAssetSlots: 2,
-          hostAdReferenceSlots: 2
-        }
+        [refDataUrl, ...referenceImages].filter(
+          (dataUrl) => Boolean(dataUrl)
+        ),
+        controller.signal
       );
       const dims = getDimensions(
         selectedModel,
@@ -26031,6 +25786,7 @@ var ImageQuickEditPanel = ({
     selectedModel,
     selectedRatio,
     selectedResolution,
+    referenceImages,
     app,
     element,
     onBeforeImageGen,
@@ -26054,6 +25810,13 @@ var ImageQuickEditPanel = ({
   const panelX = panelVpX - appState.offsetLeft;
   const panelY = panelVpY - appState.offsetTop + 16;
   return /* @__PURE__ */ jsxs49(Fragment12, { children: [
+    /* @__PURE__ */ jsx89(
+      ElementPickHighlight,
+      {
+        element: picker.pickingSlot ? picker.hoveredElement : null,
+        appState
+      }
+    ),
     !forceOpen && /* @__PURE__ */ jsx89(
       "div",
       {
@@ -26075,172 +25838,250 @@ var ImageQuickEditPanel = ({
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsx89(
+    isOpen && /* @__PURE__ */ jsxs49(
       "div",
       {
         className: "igp iqep__panel",
         style: { left: `${panelX}px`, top: `${panelY}px` },
         onPointerDown: (e) => e.stopPropagation(),
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsxs49(
-          PromptInput,
-          {
-            isLoading: isGenerating,
-            value: prompt,
-            onValueChange: setPrompt,
-            onSubmit: handleGenerate,
-            className: "igp-container",
-            children: [
-              /* @__PURE__ */ jsx89(
-                PromptInputTextarea,
-                {
-                  placeholder: "Describe your edit\u2026",
-                  className: "igp-textarea",
-                  disableAutosize: false
-                }
-              ),
-              generateError && /* @__PURE__ */ jsx89("div", { className: "igp-error", children: generateError }),
-              /* @__PURE__ */ jsxs49(PromptInputActions, { className: "igp-actions", children: [
-                /* @__PURE__ */ jsx89("div", { className: "igp-actions-left", children: /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: modelDropdownRef, children: [
-                  /* @__PURE__ */ jsx89(PromptInputAction, { tooltip: "Select model", side: "top", children: /* @__PURE__ */ jsxs49(
+        children: [
+          /* @__PURE__ */ jsx89(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/*",
+              multiple: true,
+              style: { display: "none" },
+              onChange: handleImageUpload
+            }
+          ),
+          /* @__PURE__ */ jsxs49(
+            PromptInput,
+            {
+              isLoading: isGenerating,
+              value: prompt,
+              onValueChange: setPrompt,
+              onSubmit: handleGenerate,
+              className: "igp-container",
+              children: [
+                referenceImages.length > 0 && /* @__PURE__ */ jsx89("div", { className: "igp-ref-chips", children: referenceImages.map((src, i) => /* @__PURE__ */ jsxs49("div", { className: "igp-ref-chip", children: [
+                  /* @__PURE__ */ jsx89("img", { src, alt: `Reference ${i + 1}` }),
+                  /* @__PURE__ */ jsxs49("span", { children: [
+                    "Reference ",
+                    i + 1
+                  ] }),
+                  /* @__PURE__ */ jsx89(
                     "button",
                     {
-                      className: "igp-btn",
-                      onClick: () => {
-                        setModelOpen((v) => !v);
-                        setRatioOpen(false);
-                        setResolutionOpen(false);
-                      },
-                      disabled: isGenerating,
-                      children: [
-                        /* @__PURE__ */ jsx89(ModelIcon2, {}),
-                        /* @__PURE__ */ jsx89("span", { children: selectedModel }),
-                        /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
-                      ]
+                      onClick: () => setReferenceImages(
+                        (current) => current.filter((_, index) => index !== i)
+                      ),
+                      title: "Remove",
+                      children: /* @__PURE__ */ jsx89(X2, { size: 10 })
                     }
-                  ) }),
-                  modelOpen && /* @__PURE__ */ jsx89("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--left", children: MODEL_NAMES.map((m) => /* @__PURE__ */ jsxs49(
+                  )
+                ] }, `${i}-${src.slice(-24)}`)) }),
+                picker.pickingSlot && /* @__PURE__ */ jsxs49("div", { className: "chip-pick-hint", children: [
+                  /* @__PURE__ */ jsx89("span", { children: "Click an image or video on the canvas" }),
+                  /* @__PURE__ */ jsx89(
                     "button",
                     {
-                      className: "igp-dropdown-item",
-                      onClick: () => {
-                        setSelectedModel(m);
-                        setModelOpen(false);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: m }),
-                        m === selectedModel && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
-                      ]
-                    },
-                    m
-                  )) })
-                ] }) }),
-                /* @__PURE__ */ jsxs49("div", { className: "igp-actions-right", children: [
-                  /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: resolutionDropdownRef, children: [
-                    /* @__PURE__ */ jsxs49(
-                      "button",
-                      {
-                        className: "igp-btn igp-btn--compact",
-                        onClick: () => {
-                          if (availableResolutions.length <= 1) {
-                            return;
-                          }
-                          setResolutionOpen((v) => !v);
-                          setRatioOpen(false);
-                          setModelOpen(false);
-                        },
-                        disabled: isGenerating || availableResolutions.length <= 1,
-                        title: availableResolutions.length <= 1 ? "Fixed resolution for this model" : void 0,
-                        children: [
-                          /* @__PURE__ */ jsx89("span", { children: selectedResolution }),
-                          availableResolutions.length > 1 && /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
-                        ]
-                      }
-                    ),
-                    resolutionOpen && availableResolutions.length > 1 && /* @__PURE__ */ jsx89("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--right", children: availableResolutions.map(
-                      (r) => /* @__PURE__ */ jsxs49(
+                      className: "chip-pick-hint__cancel",
+                      onClick: picker.cancel,
+                      children: "Cancel"
+                    }
+                  )
+                ] }),
+                picker.isResolving && /* @__PURE__ */ jsx89("div", { className: "chip-pick-hint", children: "Reading video frame\u2026" }),
+                picker.error && /* @__PURE__ */ jsx89("div", { className: "chip-pick-error", children: picker.error }),
+                /* @__PURE__ */ jsx89(
+                  PromptInputTextarea,
+                  {
+                    placeholder: "Describe your edit\u2026",
+                    className: "igp-textarea",
+                    disableAutosize: false
+                  }
+                ),
+                generateError && /* @__PURE__ */ jsx89("div", { className: "igp-error", children: generateError }),
+                /* @__PURE__ */ jsxs49(PromptInputActions, { className: "igp-actions", children: [
+                  /* @__PURE__ */ jsxs49("div", { className: "igp-actions-left", children: [
+                    /* @__PURE__ */ jsxs49("div", { className: "chip-slot", children: [
+                      /* @__PURE__ */ jsx89(
+                        PromptInputAction,
+                        {
+                          tooltip: referenceImages.length >= MAX_USER_REFERENCE_IMAGES ? `Maximum ${MAX_USER_REFERENCE_IMAGES} reference images` : "Add reference images",
+                          side: "top",
+                          children: /* @__PURE__ */ jsx89(
+                            "button",
+                            {
+                              className: `igp-btn igp-btn--icon${referenceImages.length > 0 ? " igp-btn--active" : ""}`,
+                              onClick: () => setChipMenu((open) => !open),
+                              disabled: isGenerating || referenceImages.length >= MAX_USER_REFERENCE_IMAGES,
+                              children: /* @__PURE__ */ jsx89(ImagePlus2, { size: 15 })
+                            }
+                          )
+                        }
+                      ),
+                      chipMenu && /* @__PURE__ */ jsx89(
+                        ChipSourceMenu,
+                        {
+                          onClose: () => setChipMenu(false),
+                          onUpload: () => fileInputRef.current?.click(),
+                          onPickFromCanvas: () => picker.begin("reference", "imageOrVideo")
+                        }
+                      ),
+                      picker.pendingVideo && /* @__PURE__ */ jsx89(
+                        VideoFrameChoiceMenu,
+                        {
+                          onChoose: picker.chooseVideoFrame,
+                          onCancel: picker.cancel
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: modelDropdownRef, children: [
+                      /* @__PURE__ */ jsx89(PromptInputAction, { tooltip: "Select model", side: "top", children: /* @__PURE__ */ jsxs49(
                         "button",
                         {
-                          className: "igp-dropdown-item",
+                          className: "igp-btn",
                           onClick: () => {
-                            setSelectedResolution(r);
+                            setModelOpen((v) => !v);
+                            setRatioOpen(false);
                             setResolutionOpen(false);
                           },
+                          disabled: isGenerating,
+                          children: [
+                            /* @__PURE__ */ jsx89(ModelIcon2, {}),
+                            /* @__PURE__ */ jsx89("span", { children: selectedModel }),
+                            /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
+                          ]
+                        }
+                      ) }),
+                      modelOpen && /* @__PURE__ */ jsx89("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--left", children: MODEL_NAMES.map((m) => /* @__PURE__ */ jsxs49(
+                        "button",
+                        {
+                          className: "igp-dropdown-item",
+                          onClick: () => {
+                            setSelectedModel(m);
+                            setModelOpen(false);
+                          },
                           children: [
-                            /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: r }),
-                            r === selectedResolution && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
+                            /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: m }),
+                            m === selectedModel && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
                           ]
                         },
-                        r
-                      )
-                    ) })
+                        m
+                      )) })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: ratioDropdownRef, children: [
-                    /* @__PURE__ */ jsxs49(
+                  /* @__PURE__ */ jsxs49("div", { className: "igp-actions-right", children: [
+                    /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: resolutionDropdownRef, children: [
+                      /* @__PURE__ */ jsxs49(
+                        "button",
+                        {
+                          className: "igp-btn igp-btn--compact",
+                          onClick: () => {
+                            if (availableResolutions.length <= 1) {
+                              return;
+                            }
+                            setResolutionOpen((v) => !v);
+                            setRatioOpen(false);
+                            setModelOpen(false);
+                          },
+                          disabled: isGenerating || availableResolutions.length <= 1,
+                          title: availableResolutions.length <= 1 ? "Fixed resolution for this model" : void 0,
+                          children: [
+                            /* @__PURE__ */ jsx89("span", { children: selectedResolution }),
+                            availableResolutions.length > 1 && /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
+                          ]
+                        }
+                      ),
+                      resolutionOpen && availableResolutions.length > 1 && /* @__PURE__ */ jsx89("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--right", children: availableResolutions.map(
+                        (r) => /* @__PURE__ */ jsxs49(
+                          "button",
+                          {
+                            className: "igp-dropdown-item",
+                            onClick: () => {
+                              setSelectedResolution(r);
+                              setResolutionOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: r }),
+                              r === selectedResolution && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
+                            ]
+                          },
+                          r
+                        )
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-root", ref: ratioDropdownRef, children: [
+                      /* @__PURE__ */ jsxs49(
+                        "button",
+                        {
+                          className: "igp-btn igp-btn--compact",
+                          onClick: () => {
+                            setRatioOpen((v) => !v);
+                            setResolutionOpen(false);
+                            setModelOpen(false);
+                          },
+                          disabled: isGenerating,
+                          children: [
+                            /* @__PURE__ */ jsx89("span", { children: selectedRatio }),
+                            /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
+                          ]
+                        }
+                      ),
+                      ratioOpen && /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--right igp-dropdown--ratio", children: [
+                        /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-header", children: [
+                          /* @__PURE__ */ jsx89("span", { children: "Output format" }),
+                          /* @__PURE__ */ jsx89(InfoIcon2, {})
+                        ] }),
+                        availableRatios.map(
+                          (ratioLabel) => {
+                            const dims = getDimensions(
+                              selectedModel,
+                              ratioLabel,
+                              selectedResolution
+                            );
+                            return /* @__PURE__ */ jsxs49(
+                              "button",
+                              {
+                                className: "igp-dropdown-item",
+                                onClick: () => applyRatio(ratioLabel),
+                                children: [
+                                  /* @__PURE__ */ jsx89(RatioShapeIcon2, { label: ratioLabel }),
+                                  /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: ratioLabel }),
+                                  /* @__PURE__ */ jsxs49("span", { className: "igp-dims", children: [
+                                    dims.width,
+                                    "\xD7",
+                                    dims.height
+                                  ] }),
+                                  ratioLabel === selectedRatio && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
+                                ]
+                              },
+                              ratioLabel
+                            );
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx89(
                       "button",
                       {
-                        className: "igp-btn igp-btn--compact",
-                        onClick: () => {
-                          setRatioOpen((v) => !v);
-                          setResolutionOpen(false);
-                          setModelOpen(false);
-                        },
-                        disabled: isGenerating,
-                        children: [
-                          /* @__PURE__ */ jsx89("span", { children: selectedRatio }),
-                          /* @__PURE__ */ jsx89(ChevronDownIcon2, {})
-                        ]
+                        className: "igp-generate",
+                        onClick: isGenerating ? handleStop : handleGenerate,
+                        disabled: !isGenerating && !prompt.trim(),
+                        title: isGenerating ? "Stop generation" : "Generate edit",
+                        children: isGenerating ? /* @__PURE__ */ jsx89(SpinnerIcon3, {}) : /* @__PURE__ */ jsx89(ArrowUp2, { size: 16 })
                       }
-                    ),
-                    ratioOpen && /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown igp-dropdown--up igp-dropdown--right igp-dropdown--ratio", children: [
-                      /* @__PURE__ */ jsxs49("div", { className: "igp-dropdown-header", children: [
-                        /* @__PURE__ */ jsx89("span", { children: "Output format" }),
-                        /* @__PURE__ */ jsx89(InfoIcon2, {})
-                      ] }),
-                      availableRatios.map(
-                        (ratioLabel) => {
-                          const dims = getDimensions(
-                            selectedModel,
-                            ratioLabel,
-                            selectedResolution
-                          );
-                          return /* @__PURE__ */ jsxs49(
-                            "button",
-                            {
-                              className: "igp-dropdown-item",
-                              onClick: () => applyRatio(ratioLabel),
-                              children: [
-                                /* @__PURE__ */ jsx89(RatioShapeIcon2, { label: ratioLabel }),
-                                /* @__PURE__ */ jsx89("span", { style: { flex: 1 }, children: ratioLabel }),
-                                /* @__PURE__ */ jsxs49("span", { className: "igp-dims", children: [
-                                  dims.width,
-                                  "\xD7",
-                                  dims.height
-                                ] }),
-                                ratioLabel === selectedRatio && /* @__PURE__ */ jsx89("span", { className: "igp-check", children: /* @__PURE__ */ jsx89(CheckIcon3, {}) })
-                              ]
-                            },
-                            ratioLabel
-                          );
-                        }
-                      )
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx89(
-                    "button",
-                    {
-                      className: "igp-generate",
-                      onClick: isGenerating ? handleStop : handleGenerate,
-                      disabled: !isGenerating && !prompt.trim(),
-                      title: isGenerating ? "Stop generation" : "Generate edit",
-                      children: isGenerating ? /* @__PURE__ */ jsx89(SpinnerIcon3, {}) : /* @__PURE__ */ jsx89(ArrowUp2, { size: 16 })
-                    }
-                  )
+                    )
+                  ] })
                 ] })
-              ] })
-            ]
-          }
-        )
+              ]
+            }
+          )
+        ]
       }
     )
   ] });
@@ -30703,7 +30544,214 @@ import {
   CaptureUpdateAction as CaptureUpdateAction39,
   getElementAbsoluteCoords as getElementAbsoluteCoords12
 } from "@orangecatai/element";
-import { ArrowUp as ArrowUp3, Volume2, X as X3 } from "lucide-react";
+import { ArrowUp as ArrowUp3, Volume2, X as X4 } from "lucide-react";
+
+// utils/brandContextUtils.ts
+var SIZE_SCALE_MAP = {
+  display: "48\u201372px",
+  large: "32\u201348px",
+  medium: "20\u201328px",
+  small: "14\u201318px"
+};
+function buildBrandContextMessage(ctx) {
+  const lines = [
+    "## Brand Identity \u2014 you MUST apply every guideline below to all ads you create, by default"
+  ];
+  if (ctx.colors) {
+    const { primary, secondary, accent, background } = ctx.colors;
+    const parts = [
+      primary && `Primary: ${primary}`,
+      secondary && `Secondary: ${secondary}`,
+      accent && `Accent/CTA: ${accent}`,
+      background && `Background: ${background}`
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(`**Colors**: ${parts.join(", ")}`);
+    }
+  }
+  if (ctx.typography) {
+    const { headline, body } = ctx.typography;
+    if (headline?.family) {
+      const sizeHint = headline.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[headline.sizeScale] ?? headline.sizeScale})` : "";
+      const fontFileNote = headline.fontFamilyId ? ` \u2014 a brand font; match this typeface closely for the on-image text (use your judgment for which brand font suits headlines vs body copy)` : ` \u2014 render on-image text in a style that matches ${headline.family}`;
+      lines.push(
+        `**Headline font**: ${headline.family}${headline.weight ? ` weight ${headline.weight}` : ""}${sizeHint}${fontFileNote}`
+      );
+    }
+    if (body?.family) {
+      const sizeHint = body.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[body.sizeScale] ?? body.sizeScale})` : "";
+      const fontFileNote = body.fontFamilyId ? ` \u2014 a brand font; match this typeface closely for the on-image text (use your judgment for which brand font suits headlines vs body copy)` : ` \u2014 render on-image text in a style that matches ${body.family}`;
+      lines.push(
+        `**Body font**: ${body.family}${body.weight ? ` weight ${body.weight}` : ""}${sizeHint}${fontFileNote}`
+      );
+    }
+  }
+  if (ctx.visualStyle) {
+    lines.push(`**Visual style**: ${ctx.visualStyle}`);
+  }
+  if (ctx.layoutPattern) {
+    lines.push(`**Layout pattern**: ${ctx.layoutPattern}`);
+  }
+  if (ctx.toneOfVoice) {
+    const { register: register2, vocabulary, ctaStyle, sentenceLength, person } = ctx.toneOfVoice;
+    const parts = [
+      register2 && `register: ${register2}`,
+      vocabulary && `vocabulary: ${vocabulary}`,
+      ctaStyle && `CTA style: ${ctaStyle}`,
+      sentenceLength && `sentence length: ${sentenceLength}`,
+      person && `person: ${person}`
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(`**Tone of voice**: ${parts.join(", ")}`);
+    }
+  }
+  if (ctx.imagery) {
+    const {
+      type,
+      lighting,
+      composition,
+      subjects,
+      grading,
+      depthOfField,
+      environment,
+      negativeSpace
+    } = ctx.imagery;
+    const parts = [
+      type && `type: ${type}`,
+      subjects && `subjects: ${subjects}`,
+      lighting && `lighting: ${lighting}`,
+      grading && `grading: ${grading}`,
+      depthOfField && `depth of field: ${depthOfField}`,
+      environment && `environment: ${environment}`,
+      negativeSpace && `negative space: ${negativeSpace}`,
+      composition && `composition: ${composition}`
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(`**Imagery direction**: ${parts.join(", ")}`);
+    }
+  }
+  lines.push(
+    "",
+    "**Precedence**: these are defaults, not absolutes. If the user's request explicitly states or clearly implies something different from a guideline above \u2014 a different color, mood, style, subject treatment, or tone \u2014 follow the user's explicit instruction for that ad instead of the brand guideline it conflicts with. Do not silently override what the user asked for in favor of brand consistency; only apply a guideline where the user's request is silent on that point."
+  );
+  return lines.join("\n");
+}
+var clean = (value) => {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : void 0;
+};
+var PRECEDENCE_LINE = "The subject, action, and setting described at the top are authoritative. Apply this brand direction only where the prompt is silent; where they conflict, the prompt wins.";
+function buildVideoBrandPrompt(prompt, ctx, opts) {
+  const lines = [];
+  const brandName = clean(ctx.name);
+  if (brandName) {
+    lines.push(`This is a brand film for ${brandName}.`);
+  }
+  if (ctx.colors) {
+    const primary = clean(ctx.colors.primary);
+    const secondary = clean(ctx.colors.secondary);
+    const accent = clean(ctx.colors.accent);
+    const background = clean(ctx.colors.background);
+    const parts = [
+      primary && `dominant ${primary}`,
+      secondary && `supporting ${secondary}`,
+      accent && `${accent} reserved for accents and CTA moments`,
+      background && `${background} for backgrounds and negative space`
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(
+        `Palette: ${parts.join(
+          "; "
+        )}. Grade the footage so these read as the natural colour story of the scene rather than as an overlay.`
+      );
+    }
+  }
+  const visualStyle = clean(ctx.visualStyle);
+  if (visualStyle) {
+    lines.push(`Look: ${visualStyle}.`);
+  }
+  if (ctx.imagery) {
+    const {
+      type,
+      subjects,
+      lighting,
+      grading,
+      depthOfField,
+      environment,
+      composition
+    } = ctx.imagery;
+    const parts = [
+      clean(type) && `${clean(type)} footage`,
+      clean(subjects) && `subjects: ${clean(subjects)}`,
+      clean(lighting) && `lighting: ${clean(lighting)}`,
+      clean(grading) && `grade: ${clean(grading)}`,
+      clean(depthOfField) && `depth of field: ${clean(depthOfField)}`,
+      clean(environment) && `environment: ${clean(environment)}`,
+      clean(composition) && `framing: ${clean(composition)}`
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(`Cinematography: ${parts.join(", ")}.`);
+    }
+  }
+  if (ctx.toneOfVoice) {
+    const { register: register2, vocabulary, ctaStyle, person } = ctx.toneOfVoice;
+    const parts = [
+      clean(register2),
+      clean(vocabulary) && `${clean(vocabulary)} vocabulary`,
+      clean(ctaStyle) && `${clean(ctaStyle)} calls to action`,
+      clean(person)
+    ].filter(Boolean);
+    if (parts.length) {
+      lines.push(
+        `Tone: ${parts.join(
+          ", "
+        )} \u2014 applies to any narration, voiceover, or on-screen copy.`
+      );
+    }
+  }
+  const typefaces = [
+    clean(ctx.typography?.headline?.family),
+    clean(ctx.typography?.body?.family)
+  ].filter(
+    (name, i, arr) => Boolean(name) && arr.indexOf(name) === i
+  );
+  if (typefaces.length) {
+    lines.push(
+      `On-screen text: keep to a minimum; if any appears it should read as ${typefaces.join(
+        " or "
+      )}, or a close match in spirit. No paragraphs of text.`
+    );
+  }
+  const userReferenceCount = Math.max(0, opts?.userReferenceCount ?? 0);
+  const hasLogo = Boolean(opts?.hasLogoReference && clean(ctx.logoDataUrl));
+  if (hasLogo) {
+    lines.push(
+      userReferenceCount > 0 ? (
+        // With user references present the logo is no longer first — the
+        // manifest appended below states its actual position.
+        "Brand logo: the brand logo is supplied as one of the attached reference images (see the manifest below). If it appears in frame, reproduce it verbatim \u2014 never redraw, restyle, recolour, or animate its glyphs."
+      ) : "Brand logo: the first reference image is the exact brand logo. If it appears in frame, reproduce it verbatim \u2014 never redraw, restyle, recolour, or animate its glyphs."
+    );
+  }
+  const manifest = userReferenceCount > 0 ? `
+
+${buildReferenceManifest(
+    userReferenceCount,
+    hasLogo ? ["the exact brand logo"] : []
+  )}` : "";
+  if (!lines.length) {
+    return manifest ? `${prompt}${manifest}` : prompt;
+  }
+  const header = brandName ? `## Brand direction \u2014 ${brandName}` : "## Brand direction";
+  return `${prompt}
+
+${header}
+${lines.join(
+    "\n"
+  )}
+
+${PRECEDENCE_LINE}${manifest}`;
+}
 
 // utils/videoApi.ts
 async function submitVideoJob(params, videoGenUrl) {
@@ -30948,7 +30996,7 @@ import {
   useRef as useRef33,
   useState as useState36
 } from "react";
-import { Check, ChevronDown, Loader2, Square, X as X2 } from "lucide-react";
+import { Check, ChevronDown, Loader2, Square, X as X3 } from "lucide-react";
 import { CaptureUpdateAction as CaptureUpdateAction38 } from "@orangecatai/element";
 import { Fragment as Fragment17, jsx as jsx97, jsxs as jsxs54 } from "react/jsx-runtime";
 var BEAT_LABELS = {
@@ -31296,7 +31344,7 @@ var VideoChainPanel = forwardRef6(
           children: [
             isRunning && /* @__PURE__ */ jsx97(Loader2, { className: "vgp-spinner", size: 13 }),
             phase === "done" && /* @__PURE__ */ jsx97(Check, { size: 13 }),
-            phase === "error" && /* @__PURE__ */ jsx97(X2, { size: 13 }),
+            phase === "error" && /* @__PURE__ */ jsx97(X3, { size: 13 }),
             /* @__PURE__ */ jsx97("span", { className: "vgp-chain-summary-text", children: summaryText }),
             isRunning && /* @__PURE__ */ jsx97(
               "span",
@@ -31368,7 +31416,7 @@ var VideoChainPanel = forwardRef6(
                         "%"
                       ] }),
                       segment.status === "failed" && /* @__PURE__ */ jsxs54(Fragment17, { children: [
-                        /* @__PURE__ */ jsx97(X2, { size: 13 }),
+                        /* @__PURE__ */ jsx97(X3, { size: 13 }),
                         " Failed"
                       ] }),
                       segment.status === "queued" && "Queued"
@@ -32538,7 +32586,7 @@ var VideoGeneratorPanel = ({
                         className: "vgp-chip-remove",
                         onClick: () => setFirstFrame(null),
                         disabled: isGenerating,
-                        children: /* @__PURE__ */ jsx98(X3, { size: 9 })
+                        children: /* @__PURE__ */ jsx98(X4, { size: 9 })
                       }
                     )
                   ] }) : /* @__PURE__ */ jsxs55("div", { className: "chip-slot", children: [
@@ -32580,7 +32628,7 @@ var VideoGeneratorPanel = ({
                         className: "vgp-chip-remove",
                         onClick: () => setLastFrame(null),
                         disabled: isGenerating,
-                        children: /* @__PURE__ */ jsx98(X3, { size: 9 })
+                        children: /* @__PURE__ */ jsx98(X4, { size: 9 })
                       }
                     )
                   ] }) : /* @__PURE__ */ jsxs55("div", { className: "chip-slot", children: [
@@ -32634,7 +32682,7 @@ var VideoGeneratorPanel = ({
                               (prev) => prev.filter((_, j) => j !== i)
                             ),
                             disabled: isGenerating,
-                            children: /* @__PURE__ */ jsx98(X3, { size: 9 })
+                            children: /* @__PURE__ */ jsx98(X4, { size: 9 })
                           }
                         )
                       ]
@@ -57227,7 +57275,7 @@ var polyfill_default = polyfill;
 
 // components/StockImagePanel.tsx
 import { useCallback as useCallback33, useEffect as useEffect67, useRef as useRef59, useState as useState59 } from "react";
-import { Loader2 as Loader22, Search, X as X4 } from "lucide-react";
+import { Loader2 as Loader22, Search, X as X5 } from "lucide-react";
 import { nanoid as nanoid3 } from "nanoid";
 import { newImageElement as newImageElement3 } from "@orangecatai/element";
 import { Fragment as Fragment40, jsx as jsx190, jsxs as jsxs110 } from "react/jsx-runtime";
@@ -57595,7 +57643,7 @@ var StockImagePanel = ({
   return /* @__PURE__ */ jsx190("div", { className: "sip", children: /* @__PURE__ */ jsxs110("div", { className: "sip-panel", children: [
     /* @__PURE__ */ jsxs110("div", { className: "sip-header", children: [
       /* @__PURE__ */ jsx190("span", { className: "sip-title", children: "Images" }),
-      /* @__PURE__ */ jsx190("button", { className: "sip-icon-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx190(X4, { size: 15 }) })
+      /* @__PURE__ */ jsx190("button", { className: "sip-icon-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx190(X5, { size: 15 }) })
     ] }),
     /* @__PURE__ */ jsxs110("div", { className: "sip-tabs", children: [
       /* @__PURE__ */ jsxs110(
@@ -57670,7 +57718,7 @@ var StockImagePanel = ({
             className: "sip-search-clear",
             onClick: handleClearQuery,
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx190(X4, { size: 11 })
+            children: /* @__PURE__ */ jsx190(X5, { size: 11 })
           }
         )
       ] }),
@@ -57748,7 +57796,7 @@ var StockImagePanel = ({
             className: "sip-search-clear",
             onClick: handleLibraryClearQuery,
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx190(X4, { size: 11 })
+            children: /* @__PURE__ */ jsx190(X5, { size: 11 })
           }
         )
       ] }),
@@ -58138,7 +58186,7 @@ import {
   Plus,
   Search as Search2,
   Wrench,
-  X as X5
+  X as X6
 } from "lucide-react";
 
 // components/ai-chat/canvasTools.ts
@@ -63251,7 +63299,7 @@ var AIChatPanel = React70.forwardRef(
                   children: /* @__PURE__ */ jsx199(Plus, { size: 15 })
                 }
               ),
-              /* @__PURE__ */ jsx199("button", { className: "acp-icon-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsx199(X5, { size: 15 }) })
+              /* @__PURE__ */ jsx199("button", { className: "acp-icon-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsx199(X6, { size: 15 }) })
             ] }),
             historyOpen && /* @__PURE__ */ jsxs112("div", { className: "acp-history-dropdown", children: [
               /* @__PURE__ */ jsxs112("div", { className: "acp-history-search", children: [
@@ -63435,7 +63483,7 @@ var AIChatPanel = React70.forwardRef(
                 className: "acp-ref-remove",
                 onClick: handleRemoveRef,
                 title: "Remove reference",
-                children: /* @__PURE__ */ jsx199(X5, { size: 10 })
+                children: /* @__PURE__ */ jsx199(X6, { size: 10 })
               }
             )
           ] }) }),
@@ -63455,7 +63503,7 @@ var AIChatPanel = React70.forwardRef(
                 className: "acp-attachment-remove",
                 onClick: () => handleRemoveFile(f.id),
                 title: "Remove file",
-                children: /* @__PURE__ */ jsx199(X5, { size: 10 })
+                children: /* @__PURE__ */ jsx199(X6, { size: 10 })
               }
             )
           ] }, f.id)) }),