@orangecatai/adgen-canvas 0.0.13 → 0.0.15

package/dist/dev/index.js

@@ -67,10 +67,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-SL25BHFI.js";
+} from "./chunk-FGSZO5WI.js";
 import {
   define_import_meta_env_default
-} from "./chunk-SNMJI5ML.js";
+} from "./chunk-EL4HTLYE.js";
 import {
   en_default
 } from "./chunk-IFMURN5W.js";
@@ -84,7 +84,7 @@ import {
 } from "./chunk-XDFCUUT6.js";
 
 // index.tsx
-import React64, { useEffect as useEffect62 } from "react";
+import React64, { useEffect as useEffect62, useMemo as useMemo15 } from "react";
 import { DEFAULT_UI_OPTIONS, isShallowEqual as isShallowEqual10 } from "@orangecatai/common";
 
 // components/App.tsx
@@ -5250,7 +5250,8 @@ import React10, {
   useState as useState6,
   useRef as useRef9,
   useEffect as useEffect10,
-  useCallback as useCallback3
+  useCallback as useCallback3,
+  useSyncExternalStore
 } from "react";
 import {
   arrayToList,
@@ -5526,6 +5527,10 @@ var FontPickerList = React10.memo(
     const stylesPanelMode = useStylesPanelMode();
     const [searchTerm, setSearchTerm] = useState6("");
     const inputRef = useRef9(null);
+    const customFontVersion = useSyncExternalStore(
+      Fonts.subscribeToCustomFonts,
+      Fonts.getCustomFontVersion
+    );
     const allFonts = useMemo(
       () => Array.from(Fonts.registered.entries()).filter(
         ([_, { metadata }]) => !metadata.private && !metadata.fallback
@@ -5548,7 +5553,7 @@ var FontPickerList = React10.memo(
       }).sort(
         (a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1
       ),
-      []
+      [customFontVersion]
     );
     const sceneFamilies = useMemo(
       () => new Set(fonts.getSceneFamilies()),
@@ -9765,7 +9770,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-AVAYTNBV.js").then(
+        (blob2) => import("./data/image-AVR5GHYZ.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -26139,13 +26144,31 @@ var TemplateBuilderPanelHost = ({
     }
     const frame = framesToSave[0];
     const frameChildren = getFrameChildren5(allElements, frame.id);
+    const files = app.files;
+    const templateFiles = {};
+    for (const el of frameChildren) {
+      const imgEl = el;
+      if (el.type === "image" && imgEl.fileId) {
+        const file2 = files[imgEl.fileId];
+        if (file2?.dataURL) {
+          templateFiles[imgEl.fileId] = {
+            dataURL: file2.dataURL,
+            mimeType: file2.mimeType
+          };
+        }
+      }
+    }
     onSaveTemplate({
       name: panelState.templateName,
       campaignTag: panelState.campaignTag || void 0,
       label: `${Math.round(frame.width)}x${Math.round(frame.height)}`,
       width: Math.round(frame.width),
       height: Math.round(frame.height),
-      canvasJson: JSON.stringify({ frame: { ...frame }, elements: frameChildren })
+      canvasJson: JSON.stringify({
+        frame: { ...frame },
+        elements: frameChildren,
+        ...Object.keys(templateFiles).length > 0 ? { files: templateFiles } : {}
+      })
     });
     templateBuilderStore.close();
   };
@@ -27486,15 +27509,15 @@ var ImageEditToolbar = ({
               },
               tool.id
             )),
-            !!element.customData?.brandAssetId && /* @__PURE__ */ jsxs52(
+            !!callbacks?.onSwapAsset && /* @__PURE__ */ jsxs52(
               "button",
               {
                 type: "button",
                 className: "iet__tool-btn",
                 onClick: () => {
-                  void callbacks?.onSwapAsset?.(element.id);
+                  void callbacks.onSwapAsset(element.id);
                 },
-                title: "Swap brand asset",
+                title: "Swap image from asset bank",
                 disabled: isToolbarBusy,
                 children: [
                   /* @__PURE__ */ jsx94(SwapAssetIcon, {}),
@@ -51373,7 +51396,8 @@ function execAddRectangle(args, ctx) {
     fillStyle: args.fillStyle || "solid",
     strokeColor: args.strokeColor || "transparent",
     strokeWidth: args.strokeWidth ?? 0,
-    opacity: args.opacity ?? 100
+    opacity: args.opacity ?? 100,
+    roughness: 0
   });
   const elements = ctx.excalidrawAPI.getSceneElements();
   const frameIndex = elements.findIndex((el) => el.id === frameId);
@@ -51426,15 +51450,17 @@ function execAddText(args, ctx) {
       statusMessage: "Failed: missing frameId"
     };
   }
+  const resolvedFontFamily = ctx.brandBodyFontId ?? ctx.brandHeadlineFontId ?? args.fontFamily ?? 2;
   const textEl = newTextElement6({
     x: args.x,
     y: args.y,
     text: args.text,
     fontSize: args.fontSize || 20,
-    fontFamily: args.fontFamily || 2,
+    fontFamily: resolvedFontFamily,
     strokeColor: args.strokeColor || "#000000",
     textAlign: args.textAlign || "left",
-    width: args.width
+    width: args.width,
+    roughness: 0
   });
   const elements = ctx.excalidrawAPI.getSceneElements();
   const frameIndex = elements.findIndex((el) => el.id === frameId);
@@ -51477,7 +51503,8 @@ async function execGenerateImage(args, ctx) {
   const height = args.height;
   const referenceImageIndex = args.referenceImageIndex;
   const referenceImageDataUrl = referenceImageIndex !== void 0 ? ctx.fileAttachments?.[referenceImageIndex]?.dataUrl : void 0;
-  const safePrompt = `${prompt} \u2014 NO text, NO typography, NO words, NO captions, NO watermarks, NO overlaid copy. Pure clean visual image only.`;
+  const fontHint = ctx.brandHeadlineFontName ? ` Brand typography: ${ctx.brandHeadlineFontName}.` : ctx.brandBodyFontName ? ` Brand typography: ${ctx.brandBodyFontName}.` : "";
+  const safePrompt = `${prompt}${fontHint} \u2014 NO text, NO typography, NO words, NO captions, NO watermarks, NO overlaid copy. Pure clean visual image only.`;
   if (!frameId || !prompt) {
     return {
       success: false,
@@ -51902,8 +51929,7 @@ async function execGenerateHtmlBanner(args, ctx) {
       y: Math.round(frameY),
       width: frameW,
       height: frameH,
-      elementCount: newEls.length,
-      screenshot: screenshot ?? void 0
+      elementCount: newEls.length
     },
     statusMessage: `Banner updated: ${newEls.length} elements in frame "${args.name || "Banner"}" (${frameW}\xD7${frameH})`,
     screenshot: screenshot ?? void 0
@@ -51940,7 +51966,7 @@ async function execFinalizeAd(args, ctx) {
   const screenshot = await captureFrameScreenshot(ctx.excalidrawAPI, frameId);
   return {
     success: true,
-    data: { frameId, screenshot: screenshot ?? void 0 },
+    data: { frameId },
     statusMessage: "Ad finalized, ready for review",
     screenshot: screenshot ?? void 0
   };
@@ -52043,6 +52069,18 @@ async function execLoadTemplateIntoFrame(args, ctx) {
     ];
     const merged = syncMovedIndices7(mergedArr, arrayToMap30(mergedArr));
     ctx.excalidrawAPI.updateScene({ elements: merged });
+    const templateFiles = parsed.files;
+    if (templateFiles && Object.keys(templateFiles).length > 0) {
+      ctx.excalidrawAPI.addFiles(
+        Object.entries(templateFiles).map(([fileId, file2]) => ({
+          id: fileId,
+          dataURL: file2.dataURL,
+          mimeType: file2.mimeType,
+          created: Date.now(),
+          lastRetrieved: Date.now()
+        }))
+      );
+    }
     if (templateId) {
       const frameEl = ctx.excalidrawAPI.getSceneElements().find((el) => el.id === frameId);
       if (frameEl) {
@@ -52246,18 +52284,20 @@ async function execFillTemplateSlots(args, ctx) {
       return imageReplacements.get(index);
     }
     let mutation = {};
-    const makeTextMutation = (value) => {
+    const makeTextMutation = (value, useHeadlineFont = false) => {
       const { fontSize, wrappedText, height, autoResize } = fitFontSize(value, el);
+      const brandFontId = useHeadlineFont ? ctx.brandHeadlineFontId ?? ctx.brandBodyFontId : ctx.brandBodyFontId;
       return {
         text: wrappedText,
         originalText: value,
         fontSize,
         height,
-        autoResize
+        autoResize,
+        ...brandFontId !== void 0 ? { fontFamily: brandFontId } : {}
       };
     };
     if (slotType === "headline" && args.headline) {
-      mutation = makeTextMutation(args.headline);
+      mutation = makeTextMutation(args.headline, true);
     } else if (slotType === "subhead" && args.subhead) {
       mutation = makeTextMutation(args.subhead);
     } else if (slotType === "cta" && args.cta) {
@@ -52483,7 +52523,11 @@ When the design needs a full-frame photorealistic background (a scene, landscape
 Use hex (\`#rrggbb\`) or \`rgba(r,g,b,a)\`. No named colors (no \`red\`, \`blue\`). CSS gradients (\`linear-gradient\`, \`radial-gradient\`) are allowed.
 
 ### 7. Fonts
-If the Brand Identity context specifies fonts, use those exact font-family names in your HTML \`<style>\` block (e.g. \`font-family: "Brand Font Name", Arial, sans-serif\`). Otherwise default to web-safe: \`Arial\`, \`"Helvetica Neue"\`, \`Helvetica\`, \`sans-serif\`. Do not use serif fonts unless the brand explicitly requires them.
+**MANDATORY \u2014 Brand font enforcement:**
+- If the Brand Identity context specifies fonts with a registered fontFamilyId, you MUST use those fonts everywhere. Do NOT use any other font \u2014 no Arial, no Helvetica, no web-safe fallbacks as primary fonts.
+- In HTML \`<style>\` blocks: use the exact brand font-family name (e.g. \`font-family: "Brand Font Name", sans-serif\`). The canvas renderer maps this name to the registered font automatically.
+- For \`add_text\` calls: the system enforces the brand fontFamilyId automatically \u2014 you do not need to pass a fontFamily param.
+- Only fall back to web-safe fonts (\`Arial\`, \`"Helvetica Neue"\`, \`sans-serif\`) when the Brand Identity context has no font specified at all.
 
 ### 9. No unsupported features
 No \`transform\`, \`animation\`, \`transition\`, \`filter\`, \`clip-path\`, \`<img>\` tags, or JavaScript. No \`box-shadow\`. 
@@ -52582,8 +52626,10 @@ ASSET USE MANDATE: If search_brand_assets() returns any results, you MUST incorp
 
 IMAGE GENERATION SCOPE: generate_image is only for supplementary content images (backgrounds, lifestyle photography) where no brand asset matches AND the brief explicitly requires a photo or illustration. For solid-color backgrounds or brand-asset-only ads, skip generate_image entirely.
 
-TEMPLATE BANK: When the user references a campaign, asks to "use a template", or requests multiple ad sizes, use this workflow:
-1. Call \`list_brand_templates()\` to see available templates
+TEMPLATE BANK: Whenever the user asks to create, make, or build an ad \u2014 even without mentioning templates \u2014 call \`list_brand_templates()\` as your very first action before asking any clarifying questions. Use the returned catalog to ask smarter, more specific questions (e.g. "I see you have a Noida Campaign template \u2014 should I use that, or build from scratch?"). If multiple templates could match, ask which one to use. If none match or the user prefers no template, proceed with HTML generation. Only skip this tool call for messages that are clearly not ad-creation requests (greetings, questions, edits to existing canvas elements, etc.).
+
+Template workflow once you know which template to use:
+1. Call \`list_brand_templates()\` to see available templates (already done above)
 2. Call \`load_template_into_frame(frameId, variantId)\` to insert the template
 3. Call \`get_frame_elements(frameId)\` to inspect which slot types exist (headline, subhead, cta, background, product_image, logo, etc.)
 4. For each **image slot** found (product_image, logo): call \`search_brand_assets()\` to look up the asset. Pass the returned \`blobUrl\` as \`product_image_url\` or \`logo_url\` to \`fill_template_slots\`. Only call \`generate_image\` if no matching asset exists in the bank.
@@ -52706,16 +52752,18 @@ function buildBrandContextMessage(ctx) {
     const { headline, body } = ctx.typography;
     if (headline?.family) {
       const sizeHint = headline.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[headline.sizeScale] ?? headline.sizeScale})` : "";
-      const idNote = headline.fontFamilyId ? ` \u2014 custom font registered in canvas; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS` : ` \u2014 no custom font file loaded; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const idNote = headline.fontFamilyId ? ` \u2014 MANDATORY: use \`font-family: "${headline.family}", sans-serif\` in ALL HTML CSS for headlines. Do NOT use any other font.` : ` \u2014 no custom font file loaded; use \`font-family: "${headline.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const fileNote = headline.fontName ? ` [file: ${headline.fontName}]` : "";
       lines.push(
-        `**Headline font**: ${headline.family}${headline.weight ? ` weight ${headline.weight}` : ""}${sizeHint}${idNote}`
+        `**Headline font**: ${headline.family}${headline.weight ? ` weight ${headline.weight}` : ""}${sizeHint}${idNote}${fileNote}`
       );
     }
     if (body?.family) {
       const sizeHint = body.sizeScale ? ` (suggested size: ${SIZE_SCALE_MAP[body.sizeScale] ?? body.sizeScale})` : "";
-      const idNote = body.fontFamilyId ? ` \u2014 custom font registered in canvas; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS` : ` \u2014 no custom font file loaded; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const idNote = body.fontFamilyId ? ` \u2014 MANDATORY: use \`font-family: "${body.family}", sans-serif\` in ALL HTML CSS for body copy, subheads, CTAs, and any other text. Do NOT use any other font.` : ` \u2014 no custom font file loaded; use \`font-family: "${body.family}", Arial, sans-serif\` in your HTML CSS (will render as Arial on canvas)`;
+      const fileNote = body.fontName ? ` [file: ${body.fontName}]` : "";
       lines.push(
-        `**Body font**: ${body.family}${body.weight ? ` weight ${body.weight}` : ""}${sizeHint}${idNote}`
+        `**Body font**: ${body.family}${body.weight ? ` weight ${body.weight}` : ""}${sizeHint}${idNote}${fileNote}`
       );
     }
   }
@@ -52814,7 +52862,11 @@ async function runAgentLoop(opts) {
   const augmentedToolCtx = {
     ...toolCtx,
     ...Object.keys(customFontMap).length ? { customFontMap } : {},
-    ...allImageAttachments.length ? { fileAttachments: allImageAttachments } : {}
+    ...allImageAttachments.length ? { fileAttachments: allImageAttachments } : {},
+    ...brandContext?.typography?.headline?.fontName ? { brandHeadlineFontName: brandContext.typography.headline.fontName } : {},
+    ...brandContext?.typography?.body?.fontName ? { brandBodyFontName: brandContext.typography.body.fontName } : {},
+    ...brandContext?.typography?.headline?.fontFamilyId ? { brandHeadlineFontId: brandContext.typography.headline.fontFamilyId } : {},
+    ...brandContext?.typography?.body?.fontFamilyId ? { brandBodyFontId: brandContext.typography.body.fontFamilyId } : {}
   };
   const messages = [{ role: "system", content: SYSTEM_PROMPT }];
   if (brandContext) {
@@ -52941,9 +52993,7 @@ ${f.textContent}`).join("\n\n")}`;
             statusMessage: error || "Insufficient credits for image generation"
           };
           const gatedAction = {
-            toolName: name,
-            args: parsedArgs,
-            result: gatedResult
+            result: { success: gatedResult.success, statusMessage: gatedResult.statusMessage }
           };
           toolActions.push(gatedAction);
           onUpdate({
@@ -52969,9 +53019,7 @@ ${f.textContent}`).join("\n\n")}`;
           statusMessage: "Blocked: template already provides text slots"
         };
         const blockedAction = {
-          toolName: name,
-          args: parsedArgs,
-          result: blockedResult
+          result: { success: blockedResult.success, statusMessage: blockedResult.statusMessage }
         };
         toolActions.push(blockedAction);
         onUpdate({
@@ -53006,9 +53054,7 @@ ${f.textContent}`).join("\n\n")}`;
         }
       }
       const action = {
-        toolName: name,
-        args: parsedArgs,
-        result
+        result: { success: result.success, statusMessage: result.statusMessage }
       };
       toolActions.push(action);
       onUpdate({
@@ -55026,11 +55072,8 @@ var ExcalidrawBase = (props) => {
       document.removeEventListener("touchmove", handleTouchMove);
     };
   }, []);
-  useEffect62(() => {
-    if (!customFonts?.length) {
-      return;
-    }
-    for (const spec of customFonts) {
+  useMemo15(() => {
+    for (const spec of customFonts ?? []) {
       Fonts.registerCustomFont(spec);
     }
   }, [customFonts]);