@orangecatai/adgen-canvas 0.0.12 → 0.0.14

package/dist/dev/index.js

@@ -67,10 +67,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-RAO3IICE.js";
+} from "./chunk-W3WRQE6Q.js";
 import {
   define_import_meta_env_default
-} from "./chunk-RDEPKTPR.js";
+} from "./chunk-3OPVOEOA.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-U7EILU4Y.js").then(
+        (blob2) => import("./data/image-NKXZX2BO.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -24778,6 +24783,17 @@ function fitImageToFrame(imgW, imgH, frameW, frameH) {
   const relY = (frameH - fittedH) / 2;
   return { relX, relY, width: fittedW, height: fittedH };
 }
+function containImageInBbox(imgW, imgH, bboxW, bboxH) {
+  if (imgW <= 0 || imgH <= 0) {
+    return { relX: 0, relY: 0, width: bboxW, height: bboxH };
+  }
+  const scale = Math.min(bboxW / imgW, bboxH / imgH);
+  const fittedW = imgW * scale;
+  const fittedH = imgH * scale;
+  const relX = (bboxW - fittedW) / 2;
+  const relY = (bboxH - fittedH) / 2;
+  return { relX, relY, width: fittedW, height: fittedH };
+}
 async function captureFrameScreenshotFromApp(app, frameId) {
   const elements = app.getSceneElements();
   const frame = elements.find((el) => el.id === frameId);
@@ -25309,12 +25325,19 @@ async function runAutoResizeForDimension(opts) {
         newEls.push({ ...el, frameId });
       } else if (pel.kind === "image") {
         const fileId2 = nanoid();
+        const { width: natW, height: natH } = await getImageNaturalDimensions(pel.dataUrl);
+        const { relX, relY, width: imgW, height: imgH } = containImageInBbox(
+          natW,
+          natH,
+          pel.width,
+          pel.height
+        );
         const el = newImageElement({
           type: "image",
-          x: pel.x,
-          y: pel.y,
-          width: pel.width,
-          height: pel.height,
+          x: pel.x + relX,
+          y: pel.y + relY,
+          width: imgW,
+          height: imgH,
           fileId: fileId2,
           status: "pending",
           scale: [1, 1],
@@ -27468,15 +27491,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, {}),
@@ -51355,7 +51378,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);
@@ -51416,7 +51440,8 @@ function execAddText(args, ctx) {
     fontFamily: args.fontFamily || 2,
     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);
@@ -51459,7 +51484,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,
@@ -52689,15 +52715,17 @@ function buildBrandContextMessage(ctx) {
     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 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 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}`
       );
     }
   }
@@ -52796,7 +52824,9 @@ 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 } : {}
   };
   const messages = [{ role: "system", content: SYSTEM_PROMPT }];
   if (brandContext) {
@@ -55008,11 +55038,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]);