@orangecatai/adgen-canvas 0.0.2 → 0.0.4

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-UV7ECD7A.js";
+} from "./chunk-3FGOYDLK.js";
 import {
   define_import_meta_env_default
-} from "./chunk-X2WWSILD.js";
+} from "./chunk-IRIUFXMO.js";
 import {
   en_default
 } from "./chunk-IFMURN5W.js";
@@ -83,7 +83,7 @@ import {
 } from "./chunk-XDFCUUT6.js";
 
 // index.tsx
-import React54, { useEffect as useEffect54 } from "react";
+import React58, { useEffect as useEffect56 } from "react";
 import { DEFAULT_UI_OPTIONS, isShallowEqual as isShallowEqual10 } from "@orangecatai/common";
 
 // components/App.tsx
@@ -158,7 +158,7 @@ import {
   isWritableElement as isWritableElement5,
   sceneCoordsToViewportCoords as sceneCoordsToViewportCoords10,
   tupleToCoors,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords4,
   wrapEvent as wrapEvent2,
   updateObject as updateObject2,
   updateActiveTool as updateActiveTool7,
@@ -197,7 +197,7 @@ import {
 import {
   getObservedAppState,
   getCommonBounds as getCommonBounds11,
-  getElementAbsoluteCoords as getElementAbsoluteCoords11,
+  getElementAbsoluteCoords as getElementAbsoluteCoords12,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
   fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
   getHoveredElementForBinding as getHoveredElementForBinding2,
@@ -6242,20 +6242,20 @@ var changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) =>
       if (isTextElement2(oldElement)) {
         const newFontSize = getNewFontSize(oldElement);
         newFontSizes.add(newFontSize);
-        let newElement5 = newElementWith2(oldElement, {
+        let newElement6 = newElementWith2(oldElement, {
           fontSize: newFontSize
         });
         redrawTextBoundingBox(
-          newElement5,
+          newElement6,
           app.scene.getContainerElement(oldElement),
           app.scene
         );
-        newElement5 = offsetElementAfterFontResize(
+        newElement6 = offsetElementAfterFontResize(
           oldElement,
-          newElement5,
+          newElement6,
           app.scene
         );
-        return newElement5;
+        return newElement6;
       }
       return oldElement;
     },
@@ -6794,10 +6794,10 @@ var actionChangeFontFamily = register({
         (element) => {
           const cachedElement = cachedElements?.get(element.id);
           if (cachedElement) {
-            const newElement5 = newElementWith2(element, {
+            const newElement6 = newElementWith2(element, {
               ...cachedElement
             });
-            return newElement5;
+            return newElement6;
           }
           return element;
         },
@@ -6865,7 +6865,7 @@ var actionChangeFontFamily = register({
           appState,
           (oldElement) => {
             if (isTextElement2(oldElement) && (oldElement.fontFamily !== nextFontFamily || currentItemFontFamily)) {
-              const newElement5 = newElementWith2(
+              const newElement6 = newElementWith2(
                 oldElement,
                 {
                   fontFamily: nextFontFamily,
@@ -6880,11 +6880,11 @@ var actionChangeFontFamily = register({
               if (!skipFontFaceCheck) {
                 uniqueChars = /* @__PURE__ */ new Set([
                   ...uniqueChars,
-                  ...Array.from(newElement5.originalText)
+                  ...Array.from(newElement6.originalText)
                 ]);
               }
-              elementContainerMapping.set(newElement5, container);
-              return newElement5;
+              elementContainerMapping.set(newElement6, container);
+              return newElement6;
             }
             return oldElement;
           },
@@ -7070,16 +7070,16 @@ var actionChangeTextAlign = register({
         appState,
         (oldElement) => {
           if (isTextElement2(oldElement)) {
-            const newElement5 = newElementWith2(
+            const newElement6 = newElementWith2(
               oldElement,
               { textAlign: value }
             );
             redrawTextBoundingBox(
-              newElement5,
+              newElement6,
               app.scene.getContainerElement(oldElement),
               app.scene
             );
-            return newElement5;
+            return newElement6;
           }
           return oldElement;
         },
@@ -7164,16 +7164,16 @@ var actionChangeVerticalAlign = register({
         appState,
         (oldElement) => {
           if (isTextElement2(oldElement)) {
-            const newElement5 = newElementWith2(
+            const newElement6 = newElementWith2(
               oldElement,
               { verticalAlign: value }
             );
             redrawTextBoundingBox(
-              newElement5,
+              newElement6,
               app.scene.getContainerElement(oldElement),
               app.scene
             );
-            return newElement5;
+            return newElement6;
           }
           return oldElement;
         },
@@ -7493,7 +7493,7 @@ var actionChangeArrowType = register({
         -1,
         elementsMap
       );
-      let newElement5 = newElementWith2(el, {
+      let newElement6 = newElementWith2(el, {
         x: value === ARROW_TYPE.elbow ? startPoint[0] : el.x,
         y: value === ARROW_TYPE.elbow ? startPoint[1] : el.y,
         roundness: value === ARROW_TYPE.round ? {
@@ -7524,53 +7524,53 @@ var actionChangeArrowType = register({
           )
         ] : el.points
       });
-      if (isElbowArrow2(newElement5)) {
-        newElement5.fixedSegments = null;
+      if (isElbowArrow2(newElement6)) {
+        newElement6.fixedSegments = null;
         const elementsMap2 = app.scene.getNonDeletedElementsMap();
         app.dismissLinearEditor();
         const startGlobalPoint = LinearElementEditor4.getPointAtIndexGlobalCoordinates(
-          newElement5,
+          newElement6,
           0,
           elementsMap2
         );
         const endGlobalPoint = LinearElementEditor4.getPointAtIndexGlobalCoordinates(
-          newElement5,
+          newElement6,
           -1,
           elementsMap2
         );
-        const startElement = newElement5.startBinding && elementsMap2.get(
-          newElement5.startBinding.elementId
+        const startElement = newElement6.startBinding && elementsMap2.get(
+          newElement6.startBinding.elementId
         );
-        const endElement = newElement5.endBinding && elementsMap2.get(
-          newElement5.endBinding.elementId
+        const endElement = newElement6.endBinding && elementsMap2.get(
+          newElement6.endBinding.elementId
         );
-        const startBinding = startElement && newElement5.startBinding ? {
+        const startBinding = startElement && newElement6.startBinding ? {
           // @ts-ignore TS cannot discern check above
-          ...newElement5.startBinding,
+          ...newElement6.startBinding,
           ...calculateFixedPointForElbowArrowBinding(
-            newElement5,
+            newElement6,
             startElement,
             "start",
             elementsMap2
           )
         } : null;
-        const endBinding = endElement && newElement5.endBinding ? {
+        const endBinding = endElement && newElement6.endBinding ? {
           // @ts-ignore TS cannot discern check above
-          ...newElement5.endBinding,
+          ...newElement6.endBinding,
           ...calculateFixedPointForElbowArrowBinding(
-            newElement5,
+            newElement6,
             endElement,
             "end",
             elementsMap2
           )
         } : null;
-        newElement5 = {
-          ...newElement5,
+        newElement6 = {
+          ...newElement6,
           startBinding,
           endBinding,
-          ...updateElbowArrowPoints(newElement5, elementsMap2, {
+          ...updateElbowArrowPoints(newElement6, elementsMap2, {
             points: [startGlobalPoint, endGlobalPoint].map(
-              (p) => pointFrom(p[0] - newElement5.x, p[1] - newElement5.y)
+              (p) => pointFrom(p[0] - newElement6.x, p[1] - newElement6.y)
             ),
             startBinding,
             endBinding,
@@ -7579,13 +7579,13 @@ var actionChangeArrowType = register({
         };
       } else {
         const elementsMap2 = app.scene.getNonDeletedElementsMap();
-        if (newElement5.startBinding) {
+        if (newElement6.startBinding) {
           const startElement = elementsMap2.get(
-            newElement5.startBinding.elementId
+            newElement6.startBinding.elementId
           );
           if (startElement) {
             bindBindingElement(
-              newElement5,
+              newElement6,
               startElement,
               appState.bindMode === "inside" ? "inside" : "orbit",
               "start",
@@ -7593,13 +7593,13 @@ var actionChangeArrowType = register({
             );
           }
         }
-        if (newElement5.endBinding) {
+        if (newElement6.endBinding) {
           const endElement = elementsMap2.get(
-            newElement5.endBinding.elementId
+            newElement6.endBinding.elementId
           );
           if (endElement) {
             bindBindingElement(
-              newElement5,
+              newElement6,
               endElement,
               appState.bindMode === "inside" ? "inside" : "orbit",
               "end",
@@ -7608,7 +7608,7 @@ var actionChangeArrowType = register({
           }
         }
       }
-      return newElement5;
+      return newElement6;
     });
     const newState = {
       ...appState,
@@ -7687,9 +7687,14 @@ import {
   ZOOM_STEP,
   updateActiveTool as updateActiveTool2,
   CODES as CODES2,
-  KEYS as KEYS12
+  KEYS as KEYS12,
+  viewportCoordsToSceneCoords
 } from "@orangecatai/common";
-import { getNonDeletedElements as getNonDeletedElements5 } from "@orangecatai/element";
+import {
+  getElementAbsoluteCoords,
+  getNonDeletedElements as getNonDeletedElements5,
+  getVisibleElements
+} from "@orangecatai/element";
 import { newElementWith as newElementWith3 } from "@orangecatai/element";
 import { getCommonBounds } from "@orangecatai/element";
 import { CaptureUpdateAction as CaptureUpdateAction6 } from "@orangecatai/element";
@@ -8070,6 +8075,77 @@ var zoomValueToFitBoundsOnViewport = (bounds, viewportDimensions, viewportZoomFa
   const adjustedZoomValue = smallestZoomValue * clamp(viewportZoomFactor, 0.1, 1);
   return Math.min(adjustedZoomValue, 1);
 };
+var COMFORTABLE_VIEWPORT_ZOOM_FACTOR = 0.8;
+var intersectsBounds = (a, b) => a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+var expandBounds = (bounds, margin) => [
+  bounds[0] - margin,
+  bounds[1] - margin,
+  bounds[2] + margin,
+  bounds[3] + margin
+];
+var getBoundsCenterDistance = (bounds, point) => {
+  const centerX = (bounds[0] + bounds[2]) / 2;
+  const centerY = (bounds[1] + bounds[3]) / 2;
+  return Math.hypot(centerX - point.x, centerY - point.y);
+};
+var toSceneBounds = (bounds) => [bounds[0], bounds[1], bounds[2], bounds[3]];
+var getNearestContentCluster = (elements, appState) => {
+  const nonDeletedElements = getNonDeletedElements5(elements);
+  if (!nonDeletedElements.length) {
+    return [];
+  }
+  const candidateElements = getVisibleElements(nonDeletedElements);
+  const clusterCandidates = candidateElements.length ? candidateElements : nonDeletedElements;
+  const elementsMap = new Map(
+    nonDeletedElements.map((element) => [element.id, element])
+  );
+  const viewportCenter = viewportCoordsToSceneCoords(
+    {
+      clientX: appState.offsetLeft + appState.width / 2,
+      clientY: appState.offsetTop + appState.height / 2
+    },
+    appState
+  );
+  const anchor = clusterCandidates.reduce((closest, element) => {
+    const bounds = toSceneBounds(
+      getElementAbsoluteCoords(element, elementsMap)
+    );
+    if (!closest) {
+      return { element, bounds };
+    }
+    return getBoundsCenterDistance(bounds, viewportCenter) < getBoundsCenterDistance(closest.bounds, viewportCenter) ? { element, bounds } : closest;
+  }, null);
+  if (!anchor) {
+    return [];
+  }
+  const proximityMargin = Math.max(
+    160 / appState.zoom.value,
+    0.12 * Math.min(appState.width, appState.height) / appState.zoom.value
+  );
+  const cluster = /* @__PURE__ */ new Map([
+    [anchor.element.id, anchor.element]
+  ]);
+  let clusterBounds = anchor.bounds;
+  let changed = true;
+  while (changed) {
+    changed = false;
+    const expandedBounds = expandBounds(clusterBounds, proximityMargin);
+    for (const element of clusterCandidates) {
+      if (cluster.has(element.id)) {
+        continue;
+      }
+      const elementBounds = toSceneBounds(
+        getElementAbsoluteCoords(element, elementsMap)
+      );
+      if (intersectsBounds(elementBounds, expandedBounds)) {
+        cluster.set(element.id, element);
+        clusterBounds = getCommonBounds([...cluster.values()]);
+        changed = true;
+      }
+    }
+  }
+  return [...cluster.values()];
+};
 var zoomToFitBounds = ({
   bounds,
   appState,
@@ -8207,6 +8283,50 @@ var actionZoomToFit = register({
   }),
   keyTest: (event) => event.code === CODES2.ONE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD]
 });
+var actionScrollBackToContent = register({
+  name: "scrollBackToContent",
+  label: "buttons.scrollBackToContent",
+  icon: zoomAreaIcon,
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    const targetElements = selectedElements.length ? selectedElements : getNearestContentCluster(elements, appState);
+    if (!targetElements.length) {
+      return false;
+    }
+    return zoomToFit({
+      targetElements,
+      appState: {
+        ...appState,
+        userToFollow: null
+      },
+      fitToViewport: true,
+      viewportZoomFactor: COMFORTABLE_VIEWPORT_ZOOM_FACTOR,
+      canvasOffsets: app.getEditorUIOffsets()
+    });
+  },
+  PanelComponent: ({ updateData }) => /* @__PURE__ */ jsx36(
+    Tooltip,
+    {
+      label: t("buttons.scrollBackToContent"),
+      style: { height: "100%" },
+      children: /* @__PURE__ */ jsx36(
+        ToolButton,
+        {
+          type: "button",
+          className: "scroll-back-to-content-button zoom-button",
+          icon: zoomAreaIcon,
+          title: t("buttons.scrollBackToContent"),
+          "aria-label": t("buttons.scrollBackToContent"),
+          onClick: () => {
+            updateData(null);
+          }
+        }
+      )
+    }
+  )
+});
 var actionToggleTheme = register({
   name: "toggleTheme",
   label: (_, appState) => {
@@ -9626,7 +9746,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-H4O52A73.js").then(
+        (blob2) => import("./data/image-HH4XNQRO.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -10038,7 +10158,7 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
-          let newElement5 = newElementWith5(element, {
+          let newElement6 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
             strokeColor: elementStylesToCopyFrom?.strokeColor,
@@ -10051,36 +10171,36 @@ var actionPasteStyles = register({
               element
             ) ? elementStylesToCopyFrom.roundness : getDefaultRoundnessTypeForElement(element) : null
           });
-          if (isTextElement3(newElement5)) {
+          if (isTextElement3(newElement6)) {
             const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE3;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY3;
-            newElement5 = newElementWith5(newElement5, {
+            newElement6 = newElementWith5(newElement6, {
               fontSize,
               fontFamily,
               textAlign: elementStylesToCopyFrom.textAlign || DEFAULT_TEXT_ALIGN,
               lineHeight: elementStylesToCopyFrom.lineHeight || getLineHeight2(fontFamily)
             });
             let container = null;
-            if (newElement5.containerId) {
+            if (newElement6.containerId) {
               container = selectedElements.find(
-                (element2) => isTextElement3(newElement5) && element2.id === newElement5.containerId
+                (element2) => isTextElement3(newElement6) && element2.id === newElement6.containerId
               ) || null;
             }
-            redrawTextBoundingBox2(newElement5, container, app.scene);
+            redrawTextBoundingBox2(newElement6, container, app.scene);
           }
-          if (newElement5.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
-            newElement5 = newElementWith5(newElement5, {
+          if (newElement6.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
+            newElement6 = newElementWith5(newElement6, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead
             });
           }
           if (isFrameLikeElement4(element)) {
-            newElement5 = newElementWith5(newElement5, {
+            newElement6 = newElementWith5(newElement6, {
               roundness: null,
               backgroundColor: "transparent"
             });
           }
-          return newElement5;
+          return newElement6;
         }
         return element;
       }),
@@ -11863,13 +11983,13 @@ import {
   useState as useState10
 } from "react";
 import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS27 } from "@orangecatai/common";
-import { getElementAbsoluteCoords } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords2 } from "@orangecatai/element";
 import { hitElementBoundingBox } from "@orangecatai/element";
 import { isElementLink } from "@orangecatai/element";
 import { getEmbedLink, embeddableURLValidator } from "@orangecatai/element";
 import {
   sceneCoordsToViewportCoords,
-  viewportCoordsToSceneCoords,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2,
   wrapEvent,
   isLocalLink,
   normalizeLink
@@ -12122,7 +12242,7 @@ var Hyperlink = ({
   );
 };
 var getCoordsForPopover = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1] = getElementAbsoluteCoords2(element, elementsMap);
   const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
     { sceneX: x1 + element.width / 2, sceneY: y1 },
     appState
@@ -12154,7 +12274,7 @@ var renderTooltip = (element, appState, elementsMap) => {
   tooltipDiv.classList.add("excalidraw-tooltip--visible");
   tooltipDiv.style.maxWidth = "20rem";
   tooltipDiv.textContent = isElementLink(element.link) ? t("labels.link.goToElement") : element.link;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
   const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
     [x1, y1, x2, y2],
     element.angle,
@@ -12187,7 +12307,7 @@ var hideHyperlinkToolip = () => {
   }
 };
 var shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) => {
-  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords2(
     { clientX, clientY },
     appState
   );
@@ -12195,7 +12315,7 @@ var shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) =
   if (hitElementBoundingBox(pointFrom4(sceneX, sceneY), element, elementsMap)) {
     return false;
   }
-  const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1, x2] = getElementAbsoluteCoords2(element, elementsMap);
   if (sceneX >= x1 && sceneX <= x2 && sceneY >= y1 - SPACE_BOTTOM && sceneY <= y1) {
     return false;
   }
@@ -12444,7 +12564,7 @@ import {
 } from "@orangecatai/element";
 import {
   getCommonBoundingBox as getCommonBoundingBox2,
-  getElementAbsoluteCoords as getElementAbsoluteCoords2
+  getElementAbsoluteCoords as getElementAbsoluteCoords3
 } from "@orangecatai/element";
 import {
   getBoundTextElement as getBoundTextElement4,
@@ -12547,7 +12667,7 @@ var Panel = ({
     positionRef.current = newPositionRef;
     let bottomLeft;
     if (elements2.length === 1) {
-      const [x1, , , y2, cx, cy] = getElementAbsoluteCoords2(
+      const [x1, , , y2, cx, cy] = getElementAbsoluteCoords3(
         elements2[0],
         app.scene.getNonDeletedElementsMap()
       );
@@ -17769,14 +17889,17 @@ var ShapesSwitcher = ({
     ] })
   ] });
 };
+var ScrollBackToContentAction = ({
+  renderAction
+}) => renderAction("scrollBackToContent");
 var ZoomActions = ({
   renderAction,
   zoom
-}) => /* @__PURE__ */ jsx75(Stack_default.Col, { gap: 1, className: CLASSES5.ZOOM_ACTIONS, children: /* @__PURE__ */ jsxs42(Stack_default.Row, { align: "center", children: [
+}) => /* @__PURE__ */ jsxs42(Stack_default.Row, { align: "center", className: CLASSES5.ZOOM_ACTIONS, children: [
   renderAction("zoomOut"),
   renderAction("resetZoom"),
   renderAction("zoomIn")
-] }) });
+] });
 var UndoRedoActions = ({
   renderAction,
   className
@@ -18679,7 +18802,7 @@ import {
   vectorFromPoint,
   vectorScale
 } from "@orangecatai/math";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords3 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords4 } from "@orangecatai/element";
 var getCurvePathOps = (shape) => {
   if (!shape) {
     return [];
@@ -19011,7 +19134,7 @@ var FOCUS_POINT_SIZE = 10 / 1.5;
 // ../element/src/sizeHelpers.ts
 import {
   SHIFT_LOCKING_ANGLE,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3
 } from "@orangecatai/common";
 import {
   normalizeRadians,
@@ -20988,7 +21111,7 @@ import { TOOL_TYPE, KEYS as KEYS43 } from "@orangecatai/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
-  getElementAbsoluteCoords as getElementAbsoluteCoords5
+  getElementAbsoluteCoords as getElementAbsoluteCoords6
 } from "@orangecatai/element";
 import { isBoundToContainer as isBoundToContainer6 } from "@orangecatai/element";
 import { getMaximumGroups } from "@orangecatai/element";
@@ -21051,7 +21174,7 @@ var getElementsCorners = (elements, elementsMap, {
   let result = [];
   if (elements.length === 1) {
     const element = elements[0];
-    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords5(
+    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords6(
       element,
       elementsMap
     );
@@ -21838,8 +21961,8 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
     snapLines: pointSnapLines
   };
 };
-var snapNewElement = (newElement5, app, event, origin, dragOffset, elementsMap) => {
-  if (!isSnappingEnabled({ event, selectedElements: [newElement5], app })) {
+var snapNewElement = (newElement6, app, event, origin, dragOffset, elementsMap) => {
+  if (!isSnappingEnabled({ event, selectedElements: [newElement6], app })) {
     return {
       snapOffset: { x: 0, y: 0 },
       snapLines: []
@@ -21856,7 +21979,7 @@ var snapNewElement = (newElement5, app, event, origin, dragOffset, elementsMap)
   const nearestSnapsX = [];
   const nearestSnapsY = [];
   getPointSnaps(
-    [newElement5],
+    [newElement6],
     selectionSnapPoints,
     app,
     event,
@@ -21872,12 +21995,12 @@ var snapNewElement = (newElement5, app, event, origin, dragOffset, elementsMap)
   minOffset.y = 0;
   nearestSnapsX.length = 0;
   nearestSnapsY.length = 0;
-  const corners = getElementsCorners([newElement5], elementsMap, {
+  const corners = getElementsCorners([newElement6], elementsMap, {
     boundingBoxCorners: true,
     omitCenter: true
   });
   getPointSnaps(
-    [newElement5],
+    [newElement6],
     corners,
     app,
     event,
@@ -22051,11 +22174,11 @@ var Renderer = class {
 
 // components/ElementCanvasButtons.tsx
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords6 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@orangecatai/element";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var CONTAINER_PADDING = 5;
 var getContainerCoords2 = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords6(element, elementsMap);
+  const [x1, y1] = getElementAbsoluteCoords7(element, elementsMap);
   const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords3(
     { sceneX: x1 + element.width, sceneY: y1 },
     appState
@@ -22092,7 +22215,7 @@ var ElementCanvasButtons = ({
 // components/FrameToolbar.tsx
 import { useCallback as useCallback14, useEffect as useEffect29, useRef as useRef24, useState as useState27 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords4 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords8 } from "@orangecatai/element";
 import { isFrameLikeElement as isFrameLikeElement9 } from "@orangecatai/element";
 import { Fragment as Fragment11, jsx as jsx83, jsxs as jsxs45 } from "react/jsx-runtime";
 var ASPECT_RATIOS = [
@@ -22289,7 +22412,7 @@ var FrameToolbar = ({
     Math.round(element.width),
     Math.round(element.height)
   );
-  const [x1, y1] = getElementAbsoluteCoords7(
+  const [x1, y1] = getElementAbsoluteCoords8(
     element,
     app.scene.getNonDeletedElementsMap()
   );
@@ -22482,13 +22605,14 @@ import { useCallback as useCallback15, useEffect as useEffect30, useRef as useRe
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords5 } from "@orangecatai/common";
 import {
   CaptureUpdateAction as CaptureUpdateAction36,
-  getElementAbsoluteCoords as getElementAbsoluteCoords8
+  getElementAbsoluteCoords as getElementAbsoluteCoords9
 } from "@orangecatai/element";
 import { ArrowUp, ImagePlus, X } from "lucide-react";
 
 // utils/geminiApiKey.ts
 function resolveGeminiApiKey(propKey) {
-  return propKey ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_GEMINI_API_KEY ? define_import_meta_env_default.VITE_APP_GEMINI_API_KEY : "") ?? "";
+  const normalizedPropKey = propKey?.trim();
+  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_GEMINI_API_KEY ? define_import_meta_env_default.VITE_APP_GEMINI_API_KEY : "") ?? "";
 }
 
 // components/image-generation/pendingGenerations.ts
@@ -23144,14 +23268,28 @@ var RatioShapeIcon = ({ label }) => {
 };
 var ImageGeneratorPanel = ({
   element,
-  app
+  app,
+  onBeforeImageGen,
+  onAfterImageGen
 }) => {
+  const getStoredSettings = (frame) => {
+    const stored = frame.customData?.imageGenerator;
+    if (!stored) {
+      return null;
+    }
+    return {
+      model: stored.model,
+      ratio: stored.ratio,
+      resolution: stored.resolution
+    };
+  };
   const appState = app.state;
   const resolvedApiKey = resolveGeminiApiKey(app.props.geminiApiKey);
   const [prompt, setPrompt] = useState29(() => getPendingPrompt(element.id));
   const [selectedModel, setSelectedModel] = useState29(() => {
-    const s = getPendingSettings(element.id);
-    return s?.model ?? "Gemini 3.1 Flash";
+    const stored = getStoredSettings(element);
+    const pending = getPendingSettings(element.id);
+    return stored?.model ?? pending?.model ?? "Gemini 3.1 Flash";
   });
   const modelCfg = MODEL_CONFIG[selectedModel];
   const availableRatios = modelCfg.supportedRatios;
@@ -23159,15 +23297,39 @@ var ImageGeneratorPanel = ({
   const defaultRatio = availableRatios.includes("2:3") ? "2:3" : availableRatios[0];
   const defaultResolution = availableResolutions.includes("2K") ? "2K" : availableResolutions[availableResolutions.length - 1];
   const [selectedRatio, setSelectedRatio] = useState29(() => {
-    const s = getPendingSettings(element.id);
-    return s?.ratio ?? defaultRatio;
+    const stored = getStoredSettings(element);
+    const pending = getPendingSettings(element.id);
+    return stored?.ratio ?? pending?.ratio ?? defaultRatio;
   });
   const [selectedResolution, setSelectedResolution] = useState29(
     () => {
-      const s = getPendingSettings(element.id);
-      return s?.resolution ?? defaultResolution;
+      const stored = getStoredSettings(element);
+      const pending = getPendingSettings(element.id);
+      return stored?.resolution ?? pending?.resolution ?? defaultResolution;
     }
   );
+  const persistFrameSettings = useCallback15(
+    (settings) => {
+      app.scene.mutateElement(element, {
+        customData: {
+          ...element.customData ?? {},
+          imageGenerator: settings
+        }
+      });
+    },
+    [app.scene, element]
+  );
+  const fitFrameIntoView = useCallback15(
+    (frame, animate = false) => {
+      app.scrollToContent(frame, {
+        fitToViewport: true,
+        viewportZoomFactor: 0.8,
+        animate,
+        canvasOffsets: app.getEditorUIOffsets()
+      });
+    },
+    [app]
+  );
   const isInitialModelMount = useRef26(true);
   useEffect30(() => {
     if (isInitialModelMount.current) {
@@ -23196,8 +23358,13 @@ var ImageGeneratorPanel = ({
       width: dims.width,
       height: dims.height
     });
+    persistFrameSettings({
+      model: selectedModel,
+      ratio: newRatio,
+      resolution: newRes
+    });
     app.syncActionResult({ captureUpdate: CaptureUpdateAction36.IMMEDIATELY });
-  }, [selectedModel]);
+  }, [selectedModel, app, element, persistFrameSettings]);
   const [isGenerating, setIsGenerating] = useState29(
     () => hasPendingGeneration(element.id)
   );
@@ -23217,6 +23384,32 @@ var ImageGeneratorPanel = ({
     elementRef.current = element;
     appRef.current = app;
   });
+  useEffect30(() => {
+    if (!element.customData?.imageGeneratorAutoFitPending) {
+      return;
+    }
+    let frameId = 0;
+    let cancelled = false;
+    const run = () => {
+      if (cancelled) {
+        return;
+      }
+      fitFrameIntoView(element);
+      app.scene.mutateElement(element, {
+        customData: {
+          ...element.customData ?? {},
+          imageGeneratorAutoFitPending: false
+        }
+      });
+    };
+    frameId = window.requestAnimationFrame(() => {
+      frameId = window.requestAnimationFrame(run);
+    });
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [app.scene, element, fitFrameIntoView]);
   const applyRatio = useCallback15(
     (ratioLabel) => {
       setSelectedRatio(ratioLabel);
@@ -23224,7 +23417,15 @@ var ImageGeneratorPanel = ({
       const dims = getDimensions(selectedModel, ratioLabel, selectedResolution);
       appRef.current.scene.mutateElement(elementRef.current, {
         width: dims.width,
-        height: dims.height
+        height: dims.height,
+        customData: {
+          ...elementRef.current.customData ?? {},
+          imageGenerator: {
+            model: selectedModel,
+            ratio: ratioLabel,
+            resolution: selectedResolution
+          }
+        }
       });
       appRef.current.syncActionResult({
         captureUpdate: CaptureUpdateAction36.IMMEDIATELY
@@ -23239,7 +23440,15 @@ var ImageGeneratorPanel = ({
       const dims = getDimensions(selectedModel, selectedRatio, res);
       appRef.current.scene.mutateElement(elementRef.current, {
         width: dims.width,
-        height: dims.height
+        height: dims.height,
+        customData: {
+          ...elementRef.current.customData ?? {},
+          imageGenerator: {
+            model: selectedModel,
+            ratio: selectedRatio,
+            resolution: res
+          }
+        }
       });
       appRef.current.syncActionResult({
         captureUpdate: CaptureUpdateAction36.IMMEDIATELY
@@ -23301,6 +23510,20 @@ var ImageGeneratorPanel = ({
       );
       return;
     }
+    if (onBeforeImageGen) {
+      try {
+        const { allowed, error } = await onBeforeImageGen();
+        if (!allowed) {
+          setGenerateError(
+            error || "Insufficient credits for image generation"
+          );
+          return;
+        }
+      } catch {
+        setGenerateError("Credit check failed");
+        return;
+      }
+    }
     const controller = new AbortController();
     abortControllerRef.current = controller;
     startPendingGeneration(
@@ -23330,6 +23553,7 @@ var ImageGeneratorPanel = ({
         controller.signal
       );
       await app.insertGeneratedImageIntoFrame(imageDataUrl, element);
+      onAfterImageGen?.();
     } catch (err) {
       if (err instanceof Error) {
         if (err.name === "AbortError") {
@@ -23359,12 +23583,14 @@ var ImageGeneratorPanel = ({
     selectedResolution,
     referenceImage,
     app,
-    element
+    element,
+    onBeforeImageGen,
+    onAfterImageGen
   ]);
   if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled || appState.selectedElementsAreBeingDragged) {
     return null;
   }
-  const [x1, , , y2] = getElementAbsoluteCoords8(
+  const [x1, , , y2] = getElementAbsoluteCoords9(
     element,
     app.scene.getNonDeletedElementsMap()
   );
@@ -23440,6 +23666,11 @@ var ImageGeneratorPanel = ({
                       {
                         className: "igp-dropdown-item",
                         onClick: () => {
+                          persistFrameSettings({
+                            model: m,
+                            ratio: selectedRatio,
+                            resolution: selectedResolution
+                          });
                           setSelectedModel(m);
                           setModelOpen(false);
                         },
@@ -23568,7 +23799,7 @@ var ImageGeneratorPanel = ({
 // components/ImageQuickEditPanel.tsx
 import { useCallback as useCallback16, useEffect as useEffect31, useRef as useRef27, useState as useState30 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords6 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords9 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords10 } from "@orangecatai/element";
 import { ArrowUp as ArrowUp2 } from "lucide-react";
 import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
 var ChevronDownIcon3 = () => /* @__PURE__ */ jsx88("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx88(
@@ -23671,7 +23902,9 @@ var RatioShapeIcon2 = ({ label }) => {
 };
 var ImageQuickEditPanel = ({
   element,
-  app
+  app,
+  onBeforeImageGen,
+  onAfterImageGen
 }) => {
   const appState = app.state;
   const resolvedApiKey = resolveGeminiApiKey(app.props.geminiApiKey);
@@ -23770,6 +24003,20 @@ var ImageQuickEditPanel = ({
       );
       return;
     }
+    if (onBeforeImageGen) {
+      try {
+        const { allowed, error } = await onBeforeImageGen();
+        if (!allowed) {
+          setGenerateError(
+            error || "Insufficient credits for image generation"
+          );
+          return;
+        }
+      } catch {
+        setGenerateError("Credit check failed");
+        return;
+      }
+    }
     const controller = new AbortController();
     abortControllerRef.current = controller;
     startPendingGeneration(
@@ -23810,6 +24057,7 @@ var ImageQuickEditPanel = ({
         dims.width,
         dims.height
       );
+      onAfterImageGen?.();
     } catch (err) {
       if (err instanceof Error) {
         if (err.name === "AbortError") {
@@ -23838,13 +24086,15 @@ var ImageQuickEditPanel = ({
     selectedRatio,
     selectedResolution,
     app,
-    element
+    element,
+    onBeforeImageGen,
+    onAfterImageGen
   ]);
   if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled || appState.selectedElementsAreBeingDragged) {
     return null;
   }
   const elementsMap = app.scene.getNonDeletedElementsMap();
-  const [x1, y1, , y2] = getElementAbsoluteCoords9(element, elementsMap);
+  const [x1, y1, , y2] = getElementAbsoluteCoords10(element, elementsMap);
   const { x: triggerVpX, y: triggerVpY } = sceneCoordsToViewportCoords6(
     { sceneX: x1 + element.width / 2, sceneY: y1 },
     appState
@@ -26767,24 +27017,40 @@ var Footer = ({
             className: clsx47("layer-ui__wrapper__footer-left zen-mode-transition", {
               "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
             }),
-            children: /* @__PURE__ */ jsx104(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs60(Section, { heading: "canvasActions", children: [
+            children: /* @__PURE__ */ jsx104(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsx104(Section, { heading: "canvasActions", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 1, className: "footer-canvas-actions", children: [
               /* @__PURE__ */ jsx104(
-                ZoomActions,
+                ScrollBackToContentAction,
                 {
-                  renderAction: actionManager.renderAction,
-                  zoom: appState.zoom
+                  renderAction: actionManager.renderAction
                 }
               ),
-              !appState.viewModeEnabled && /* @__PURE__ */ jsx104(
-                UndoRedoActions,
+              /* @__PURE__ */ jsxs60(
+                Stack_default.Row,
                 {
-                  renderAction: actionManager.renderAction,
-                  className: clsx47("zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
-                  })
+                  align: "center",
+                  gap: 1,
+                  className: "footer-canvas-actions-row",
+                  children: [
+                    /* @__PURE__ */ jsx104(
+                      ZoomActions,
+                      {
+                        renderAction: actionManager.renderAction,
+                        zoom: appState.zoom
+                      }
+                    ),
+                    !appState.viewModeEnabled && /* @__PURE__ */ jsx104(
+                      UndoRedoActions,
+                      {
+                        renderAction: actionManager.renderAction,
+                        className: clsx47("zen-mode-transition", {
+                          "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
+                        })
+                      }
+                    )
+                  ]
                 }
               )
-            ] }) })
+            ] }) }) })
           }
         ),
         /* @__PURE__ */ jsx104(FooterCenterTunnel.Out, {}),
@@ -35050,7 +35316,7 @@ import {
 } from "@orangecatai/element";
 import {
   getCommonBounds as getCommonBounds9,
-  getElementAbsoluteCoords as getElementAbsoluteCoords10
+  getElementAbsoluteCoords as getElementAbsoluteCoords11
 } from "@orangecatai/element";
 import {
   getGlobalFixedPointForBindableElement as getGlobalFixedPointForBindableElement2,
@@ -35837,7 +36103,7 @@ var renderSelectionBorder = (context, appState, elementProperties) => {
   context.restore();
 };
 var renderFrameHighlight = (context, appState, frame, elementsMap) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords10(frame, elementsMap);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords11(frame, elementsMap);
   const width = x2 - x1;
   const height = y2 - y1;
   context.strokeStyle = "rgb(0,118,255)";
@@ -36098,7 +36364,7 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
   });
 };
 var renderCropHandles = (context, renderConfig, appState, croppingElement, elementsMap) => {
-  const [x1, y1, , , cx, cy] = getElementAbsoluteCoords10(
+  const [x1, y1, , , cx, cy] = getElementAbsoluteCoords11(
     croppingElement,
     elementsMap
   );
@@ -36379,7 +36645,7 @@ var _renderInteractiveScene = ({
           }
         }
         if (selectionColors.length) {
-          const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords10(
+          const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords11(
             element,
             elementsMap,
             true
@@ -36506,7 +36772,7 @@ var _renderInteractiveScene = ({
   appState.searchMatches?.matches.forEach(({ id, focus, matchedLines }) => {
     const element = elementsMap.get(id);
     if (element) {
-      const [elementX1, elementY1, , , cx, cy] = getElementAbsoluteCoords10(
+      const [elementX1, elementY1, , , cx, cy] = getElementAbsoluteCoords11(
         element,
         elementsMap,
         true
@@ -36860,7 +37126,7 @@ import {
 var _renderNewElementScene = ({
   canvas,
   rc,
-  newElement: newElement5,
+  newElement: newElement6,
   elementsMap,
   allElementsMap,
   scale,
@@ -36880,19 +37146,19 @@ var _renderNewElementScene = ({
     });
     context.save();
     context.scale(appState.zoom.value, appState.zoom.value);
-    if (newElement5 && newElement5.type !== "selection") {
-      if (isInvisiblySmallElement2(newElement5)) {
+    if (newElement6 && newElement6.type !== "selection") {
+      if (isInvisiblySmallElement2(newElement6)) {
         return;
       }
-      const frameId = newElement5.frameId || appState.frameToHighlight?.id;
+      const frameId = newElement6.frameId || appState.frameToHighlight?.id;
       if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {
-        const frame = getTargetFrame(newElement5, elementsMap, appState);
-        if (frame && shouldApplyFrameClip(newElement5, frame, appState, elementsMap)) {
+        const frame = getTargetFrame(newElement6, elementsMap, appState);
+        if (frame && shouldApplyFrameClip(newElement6, frame, appState, elementsMap)) {
           frameClip(frame, context, renderConfig, appState);
         }
       }
       renderElement(
-        newElement5,
+        newElement6,
         elementsMap,
         allElementsMap,
         rc,
@@ -37275,11 +37541,11 @@ var App = class _App extends React52.Component {
           );
           if (frameNameDiv) {
             const box = frameNameDiv.getBoundingClientRect();
-            const boxSceneTopLeft = viewportCoordsToSceneCoords3(
+            const boxSceneTopLeft = viewportCoordsToSceneCoords4(
               { clientX: box.x, clientY: box.y },
               this.state
             );
-            const boxSceneBottomRight = viewportCoordsToSceneCoords3(
+            const boxSceneBottomRight = viewportCoordsToSceneCoords4(
               { clientX: box.right, clientY: box.bottom },
               this.state
             );
@@ -37569,7 +37835,10 @@ var App = class _App extends React52.Component {
         locked: false,
         backgroundColor: "#cce8f5",
         fillStyle: "solid",
-        customData: { type: "image-generator" }
+        customData: {
+          type: "image-generator",
+          imageGeneratorAutoFitPending: true
+        }
       });
       this.scene.insertElement(frame);
       this.setActiveTool({ type: "selection" });
@@ -37614,7 +37883,7 @@ var App = class _App extends React52.Component {
       const CLEARANCE = 25;
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const allElements = this.scene.getNonDeletedElements().filter((el) => el.id !== sourceElement.id);
-      const [sx1, sy1, sx2, sy2] = getElementAbsoluteCoords11(
+      const [sx1, sy1, sx2, sy2] = getElementAbsoluteCoords12(
         sourceElement,
         elementsMap
       );
@@ -37632,7 +37901,7 @@ var App = class _App extends React52.Component {
         const right = cRight + CLEARANCE;
         const bottom = cBottom + CLEARANCE;
         return allElements.some((el) => {
-          const [ex1, ey1, ex2, ey2] = getElementAbsoluteCoords11(el, elementsMap);
+          const [ex1, ey1, ex2, ey2] = getElementAbsoluteCoords12(el, elementsMap);
           return ex1 < right && ex2 > left && ey1 < bottom && ey2 > top;
         });
       };
@@ -38118,7 +38387,7 @@ var App = class _App extends React52.Component {
       const elementsCenterY = distance2(minY, maxY) / 2;
       const clientX = typeof opts.position === "object" ? opts.position.clientX : opts.position === "cursor" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;
       const clientY = typeof opts.position === "object" ? opts.position.clientY : opts.position === "cursor" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;
-      const { x, y } = viewportCoordsToSceneCoords3(
+      const { x, y } = viewportCoordsToSceneCoords4(
         { clientX, clientY },
         this.state
       );
@@ -38157,13 +38426,13 @@ var App = class _App extends React52.Component {
         );
       }
       this.scene.replaceAllElements(nextElements);
-      duplicatedElements.forEach((newElement5) => {
-        if (isTextElement19(newElement5) && isBoundToContainer9(newElement5)) {
+      duplicatedElements.forEach((newElement6) => {
+        if (isTextElement19(newElement6) && isBoundToContainer9(newElement6)) {
           const container = getContainerElement5(
-            newElement5,
+            newElement6,
             this.scene.getElementsMapIncludingDeleted()
           );
-          redrawTextBoundingBox8(newElement5, container, this.scene);
+          redrawTextBoundingBox8(newElement6, container, this.scene);
         }
       });
       if (isSafari2) {
@@ -38970,7 +39239,7 @@ var App = class _App extends React52.Component {
           bindMode: "orbit"
         });
         if (this.lastPointerMoveEvent && getFeatureFlag4("COMPLEX_BINDINGS")) {
-          const scenePointer = viewportCoordsToSceneCoords3(
+          const scenePointer = viewportCoordsToSceneCoords4(
             {
               clientX: this.lastPointerMoveEvent.clientX,
               clientY: this.lastPointerMoveEvent.clientY
@@ -39371,7 +39640,7 @@ var App = class _App extends React52.Component {
         return;
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
-      let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         event,
         this.state
       );
@@ -39536,7 +39805,7 @@ var App = class _App extends React52.Component {
       if (!this.hitLinkElement || draggedDistance > DRAGGING_THRESHOLD3) {
         return;
       }
-      const lastPointerDownCoords = viewportCoordsToSceneCoords3(
+      const lastPointerDownCoords = viewportCoordsToSceneCoords4(
         this.lastPointerDownEvent,
         this.state
       );
@@ -39548,7 +39817,7 @@ var App = class _App extends React52.Component {
         pointFrom29(lastPointerDownCoords.x, lastPointerDownCoords.y),
         this.editorInterface.formFactor === "phone"
       );
-      const lastPointerUpCoords = viewportCoordsToSceneCoords3(
+      const lastPointerUpCoords = viewportCoordsToSceneCoords4(
         this.lastPointerUpEvent,
         this.state
       );
@@ -39596,7 +39865,7 @@ var App = class _App extends React52.Component {
     __publicField(this, "handleCanvasPointerMove", (event) => {
       this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
       this.lastPointerMoveEvent = event.nativeEvent;
-      const scenePointer = viewportCoordsToSceneCoords3(event, this.state);
+      const scenePointer = viewportCoordsToSceneCoords4(event, this.state);
       const { x: scenePointerX, y: scenePointerY } = scenePointer;
       this.lastPointerMoveCoords = {
         x: scenePointerX,
@@ -39705,8 +39974,8 @@ var App = class _App extends React52.Component {
         }
       }
       if (isBindingElementType(this.state.activeTool.type)) {
-        const { newElement: newElement5 } = this.state;
-        if (!newElement5 && isBindingEnabled2(this.state)) {
+        const { newElement: newElement6 } = this.state;
+        if (!newElement6 && isBindingEnabled2(this.state)) {
           const globalPoint = pointFrom29(
             scenePointerX,
             scenePointerY
@@ -40072,7 +40341,7 @@ var App = class _App extends React52.Component {
       invalidateContextMenu = true;
     });
     __publicField(this, "handleCanvasPointerDown", (event) => {
-      const scenePointer = viewportCoordsToSceneCoords3(event, this.state);
+      const scenePointer = viewportCoordsToSceneCoords4(event, this.state);
       const { x: scenePointerX, y: scenePointerY } = scenePointer;
       this.lastPointerMoveCoords = {
         x: scenePointerX,
@@ -40364,7 +40633,7 @@ var App = class _App extends React52.Component {
       }
       this.removePointer(event);
       this.lastPointerUpEvent = event;
-      const scenePointer = viewportCoordsToSceneCoords3(
+      const scenePointer = viewportCoordsToSceneCoords4(
         { clientX: event.clientX, clientY: event.clientY },
         this.state
       );
@@ -41444,7 +41713,7 @@ var App = class _App extends React52.Component {
       try {
         const clientX = this.state.width / 2 + this.state.offsetLeft;
         const clientY = this.state.height / 2 + this.state.offsetTop;
-        const { x, y } = viewportCoordsToSceneCoords3(
+        const { x, y } = viewportCoordsToSceneCoords4(
           { clientX, clientY },
           this.state
         );
@@ -41619,7 +41888,7 @@ var App = class _App extends React52.Component {
       });
     });
     __publicField(this, "handleAppOnDrop", async (event) => {
-      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         event,
         this.state
       );
@@ -41786,7 +42055,7 @@ var App = class _App extends React52.Component {
       event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== this.state.preferredSelectionTool.type) {
         return;
       }
-      const { x, y } = viewportCoordsToSceneCoords3(event, this.state);
+      const { x, y } = viewportCoordsToSceneCoords4(event, this.state);
       const element = this.getElementAtPosition(x, y, {
         preferSelected: true,
         includeLockedElements: true
@@ -41850,8 +42119,8 @@ var App = class _App extends React52.Component {
         });
         return;
       }
-      const newElement5 = this.state.newElement;
-      if (!newElement5) {
+      const newElement6 = this.state.newElement;
+      if (!newElement6) {
         return;
       }
       let [gridX, gridY] = getGridPoint2(
@@ -41859,11 +42128,11 @@ var App = class _App extends React52.Component {
         pointerCoords.y,
         event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
-      const image = isInitializedImageElement3(newElement5) && this.imageCache.get(newElement5.fileId)?.image;
+      const image = isInitializedImageElement3(newElement6) && this.imageCache.get(newElement6.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
-      this.maybeCacheReferenceSnapPoints(event, [newElement5]);
+      this.maybeCacheReferenceSnapPoints(event, [newElement6]);
       const { snapOffset, snapLines } = snapNewElement(
-        newElement5,
+        newElement6,
         this,
         event,
         {
@@ -41881,9 +42150,9 @@ var App = class _App extends React52.Component {
       this.setState({
         snapLines
       });
-      if (!isBindingElement4(newElement5)) {
+      if (!isBindingElement4(newElement6)) {
         dragNewElement({
-          newElement: newElement5,
+          newElement: newElement6,
           elementType: this.state.activeTool.type,
           originX: pointerDownState.originInGrid.x,
           originY: pointerDownState.originInGrid.y,
@@ -41891,7 +42160,7 @@ var App = class _App extends React52.Component {
           y: gridY,
           width: distance2(pointerDownState.originInGrid.x, gridX),
           height: distance2(pointerDownState.originInGrid.y, gridY),
-          shouldMaintainAspectRatio: isImageElement9(newElement5) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+          shouldMaintainAspectRatio: isImageElement9(newElement6) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
           shouldResizeFromCenter: shouldResizeFromCenter(event),
           zoom: this.state.zoom.value,
           scene: this.scene,
@@ -41901,13 +42170,13 @@ var App = class _App extends React52.Component {
         });
       }
       this.setState({
-        newElement: newElement5
+        newElement: newElement6
       });
       if (this.state.activeTool.type === TOOL_TYPE3.frame || this.state.activeTool.type === TOOL_TYPE3.magicframe) {
         this.setState({
           elementsToHighlight: getElementsInResizingFrame4(
             this.scene.getNonDeletedElements(),
-            newElement5,
+            newElement6,
             this.state,
             this.scene.getNonDeletedElementsMap()
           )
@@ -42206,7 +42475,7 @@ var App = class _App extends React52.Component {
       if (!x || !y) {
         return;
       }
-      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         { clientX: x, clientY: y },
         this.state
       );
@@ -42631,7 +42900,7 @@ var App = class _App extends React52.Component {
       return false;
     }
     const viewportClickStart_scenePoint = pointFrom29(
-      viewportCoordsToSceneCoords3(
+      viewportCoordsToSceneCoords4(
         {
           clientX: this.lastPointerDownEvent.clientX,
           clientY: this.lastPointerDownEvent.clientY
@@ -42640,7 +42909,7 @@ var App = class _App extends React52.Component {
       )
     );
     const viewportClickEnd_scenePoint = pointFrom29(
-      viewportCoordsToSceneCoords3(
+      viewportCoordsToSceneCoords4(
         {
           clientX: this.lastPointerUpEvent.clientX,
           clientY: this.lastPointerUpEvent.clientY
@@ -43161,14 +43430,18 @@ var App = class _App extends React52.Component {
                           ImageGeneratorPanel,
                           {
                             element: firstSelectedElement,
-                            app: this
+                            app: this,
+                            onBeforeImageGen: this.props.onBeforeImageGen,
+                            onAfterImageGen: this.props.onAfterImageGen
                           }
                         ),
                         selectedElements.length === 1 && isImageElement9(firstSelectedElement) && !this.state.viewModeEnabled && /* @__PURE__ */ jsx168(
                           ImageQuickEditPanel,
                           {
                             element: firstSelectedElement,
-                            app: this
+                            app: this,
+                            onBeforeImageGen: this.props.onBeforeImageGen,
+                            onAfterImageGen: this.props.onAfterImageGen
                           }
                         ),
                         this.state.toast !== null && /* @__PURE__ */ jsx168(
@@ -43702,7 +43975,7 @@ var App = class _App extends React52.Component {
   }
   // TODO: Cover with tests
   async insertClipboardContent(data, dataTransferFiles, isPlainPaste) {
-    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
       {
         clientX: this.lastViewportPosition.x,
         clientY: this.lastViewportPosition.y
@@ -43849,7 +44122,7 @@ var App = class _App extends React52.Component {
     }
   }
   addTextFromPaste(text, isPlainPaste = false) {
-    const { x, y } = viewportCoordsToSceneCoords3(
+    const { x, y } = viewportCoordsToSceneCoords4(
       {
         clientX: this.lastViewportPosition.x,
         clientY: this.lastViewportPosition.y
@@ -44153,7 +44426,7 @@ var App = class _App extends React52.Component {
       if (elements[index].isDeleted) {
         continue;
       }
-      const [x1, y1, x2, y2] = getElementAbsoluteCoords11(
+      const [x1, y1, x2, y2] = getElementAbsoluteCoords12(
         elements[index],
         this.scene.getNonDeletedElementsMap()
       );
@@ -44286,7 +44559,7 @@ var App = class _App extends React52.Component {
     }
   }
   initialPointerDownState(event) {
-    const origin = viewportCoordsToSceneCoords3(event, this.state);
+    const origin = viewportCoordsToSceneCoords4(event, this.state);
     const selectedElements = this.scene.getSelectedElements(this.state);
     const [minX, minY, maxX, maxY] = getCommonBounds11(selectedElements);
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
@@ -44450,7 +44723,7 @@ var App = class _App extends React52.Component {
       if (this.state.openDialog?.name === "elementLinkSelector") {
         return;
       }
-      const pointerCoords = viewportCoordsToSceneCoords3(event, this.state);
+      const pointerCoords = viewportCoordsToSceneCoords4(event, this.state);
       if (this.state.activeLockedId) {
         this.setState({
           activeLockedId: null
@@ -44699,7 +44972,7 @@ var App = class _App extends React52.Component {
                 );
                 instantDragOffset[0] *= image.naturalWidth / uncroppedSize.width;
                 instantDragOffset[1] *= image.naturalHeight / uncroppedSize.height;
-                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords11(
+                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords12(
                   croppingElement,
                   elementsMap
                 );
@@ -44867,7 +45140,7 @@ var App = class _App extends React52.Component {
                 },
                 []
               );
-              pointerDownState.drag.origin = viewportCoordsToSceneCoords3(
+              pointerDownState.drag.origin = viewportCoordsToSceneCoords4(
                 event,
                 this.state
               );
@@ -44926,20 +45199,20 @@ var App = class _App extends React52.Component {
           );
         }
       } else {
-        const newElement5 = this.state.newElement;
-        if (!newElement5) {
+        const newElement6 = this.state.newElement;
+        if (!newElement6) {
           return;
         }
-        if (newElement5.type === "freedraw") {
-          const points = newElement5.points;
-          const dx = pointerCoords.x - newElement5.x;
-          const dy = pointerCoords.y - newElement5.y;
+        if (newElement6.type === "freedraw") {
+          const points = newElement6.points;
+          const dx = pointerCoords.x - newElement6.x;
+          const dy = pointerCoords.y - newElement6.y;
           const lastPoint = points.length > 0 && points[points.length - 1];
           const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
           if (!discardPoint) {
-            const pressures = newElement5.simulatePressure ? newElement5.pressures : [...newElement5.pressures, event.pressure];
+            const pressures = newElement6.simulatePressure ? newElement6.pressures : [...newElement6.pressures, event.pressure];
             this.scene.mutateElement(
-              newElement5,
+              newElement6,
               {
                 points: [...points, pointFrom29(dx, dy)],
                 pressures
@@ -44950,12 +45223,12 @@ var App = class _App extends React52.Component {
               }
             );
             this.setState({
-              newElement: newElement5
+              newElement: newElement6
             });
           }
-        } else if (isLinearElement12(newElement5) && !newElement5.isDeleted) {
+        } else if (isLinearElement12(newElement6) && !newElement6.isDeleted) {
           pointerDownState.drag.hasOccurred = true;
-          const points = newElement5.points;
+          const points = newElement6.points;
           invariant16(
             points.length > 1,
             "Do not create linear elements with less than 2 points"
@@ -44963,7 +45236,7 @@ var App = class _App extends React52.Component {
           let linearElementEditor = this.state.selectedLinearElement;
           if (!linearElementEditor) {
             linearElementEditor = new LinearElementEditor11(
-              newElement5,
+              newElement6,
               this.scene.getNonDeletedElementsMap()
             );
             linearElementEditor = {
@@ -44976,7 +45249,7 @@ var App = class _App extends React52.Component {
             };
           }
           this.setState({
-            newElement: newElement5,
+            newElement: newElement6,
             ...LinearElementEditor11.handlePointDragging(
               event,
               this,
@@ -45100,7 +45373,7 @@ var App = class _App extends React52.Component {
         pointerDownState.eventListeners.onMove.flush();
       }
       const {
-        newElement: newElement5,
+        newElement: newElement6,
         resizingElement,
         croppingElementId,
         multiElement,
@@ -45127,7 +45400,7 @@ var App = class _App extends React52.Component {
       SnapCache.setVisibleGaps(null);
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
       const hitElements = pointerDownState.hit.allHitElements;
-      const sceneCoords = viewportCoordsToSceneCoords3(
+      const sceneCoords = viewportCoordsToSceneCoords4(
         { clientX: childEvent.clientX, clientY: childEvent.clientY },
         this.state
       );
@@ -45264,31 +45537,31 @@ var App = class _App extends React52.Component {
         pointerDownState,
         childEvent
       );
-      if (newElement5?.type === "freedraw") {
-        const pointerCoords = viewportCoordsToSceneCoords3(
+      if (newElement6?.type === "freedraw") {
+        const pointerCoords = viewportCoordsToSceneCoords4(
           childEvent,
           this.state
         );
-        const points = newElement5.points;
-        let dx = pointerCoords.x - newElement5.x;
-        let dy = pointerCoords.y - newElement5.y;
+        const points = newElement6.points;
+        let dx = pointerCoords.x - newElement6.x;
+        let dy = pointerCoords.y - newElement6.y;
         if (dx === points[0][0] && dy === points[0][1]) {
           dy += 1e-4;
           dx += 1e-4;
         }
-        const pressures = newElement5.simulatePressure ? [] : [...newElement5.pressures, childEvent.pressure];
-        this.scene.mutateElement(newElement5, {
+        const pressures = newElement6.simulatePressure ? [] : [...newElement6.pressures, childEvent.pressure];
+        this.scene.mutateElement(newElement6, {
           points: [...points, pointFrom29(dx, dy)],
           pressures
         });
         this.actionManager.executeAction(actionFinalize);
         return;
       }
-      if (isLinearElement12(newElement5)) {
-        if (newElement5.points.length > 1 && newElement5.points[1][0] !== 0 && newElement5.points[1][1] !== 0) {
+      if (isLinearElement12(newElement6)) {
+        if (newElement6.points.length > 1 && newElement6.points[1][0] !== 0 && newElement6.points[1][1] !== 0) {
           this.store.scheduleCapture();
         }
-        const pointerCoords = viewportCoordsToSceneCoords3(
+        const pointerCoords = viewportCoordsToSceneCoords4(
           childEvent,
           this.state
         );
@@ -45296,16 +45569,16 @@ var App = class _App extends React52.Component {
           pointFrom29(pointerCoords.x, pointerCoords.y),
           pointFrom29(pointerDownState.origin.x, pointerDownState.origin.y)
         ) * this.state.zoom.value;
-        if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement5 && !multiElement) {
+        if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement6 && !multiElement) {
           if (this.editorInterface.isTouchScreen) {
             const FIXED_DELTA_X = Math.min(
               this.state.width * 0.7 / this.state.zoom.value,
               100
             );
             this.scene.mutateElement(
-              newElement5,
+              newElement6,
               {
-                x: newElement5.x - FIXED_DELTA_X / 2,
+                x: newElement6.x - FIXED_DELTA_X / 2,
                 points: [
                   pointFrom29(0, 0),
                   pointFrom29(FIXED_DELTA_X, 0)
@@ -45315,22 +45588,22 @@ var App = class _App extends React52.Component {
             );
             this.actionManager.executeAction(actionFinalize);
           } else {
-            const dx = pointerCoords.x - newElement5.x;
-            const dy = pointerCoords.y - newElement5.y;
+            const dx = pointerCoords.x - newElement6.x;
+            const dy = pointerCoords.y - newElement6.y;
             this.scene.mutateElement(
-              newElement5,
+              newElement6,
               {
-                points: [newElement5.points[0], pointFrom29(dx, dy)]
+                points: [newElement6.points[0], pointFrom29(dx, dy)]
               },
               { informMutation: false, isDragging: false }
             );
             this.setState({
-              multiElement: newElement5,
-              newElement: newElement5
+              multiElement: newElement6,
+              newElement: newElement6
             });
           }
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
-          if (isLinearElement12(newElement5)) {
+          if (isLinearElement12(newElement6)) {
             this.actionManager.executeAction(actionFinalize, "ui", {
               event: childEvent,
               sceneCoords
@@ -45347,12 +45620,12 @@ var App = class _App extends React52.Component {
               selectedElementIds: makeNextSelectedElementIds2(
                 {
                   ...prevState.selectedElementIds,
-                  [newElement5.id]: true
+                  [newElement6.id]: true
                 },
                 prevState
               ),
               selectedLinearElement: new LinearElementEditor11(
-                newElement5,
+                newElement6,
                 this.scene.getNonDeletedElementsMap()
               )
             }));
@@ -45365,27 +45638,27 @@ var App = class _App extends React52.Component {
         }
         return;
       }
-      if (isTextElement19(newElement5)) {
+      if (isTextElement19(newElement6)) {
         const minWidth = getMinTextElementWidth(
           getFontString9({
-            fontSize: newElement5.fontSize,
-            fontFamily: newElement5.fontFamily
+            fontSize: newElement6.fontSize,
+            fontFamily: newElement6.fontFamily
           }),
-          newElement5.lineHeight
+          newElement6.lineHeight
         );
-        if (newElement5.width < minWidth) {
-          this.scene.mutateElement(newElement5, {
+        if (newElement6.width < minWidth) {
+          this.scene.mutateElement(newElement6, {
             autoResize: true
           });
         }
         this.resetCursor();
-        this.handleTextWysiwyg(newElement5, {
+        this.handleTextWysiwyg(newElement6, {
           isExistingElement: true
         });
       }
-      if (activeTool.type !== "selection" && newElement5 && isInvisiblySmallElement3(newElement5)) {
+      if (activeTool.type !== "selection" && newElement6 && isInvisiblySmallElement3(newElement6)) {
         this.updateScene({
-          elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== newElement5.id),
+          elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== newElement6.id),
           appState: {
             newElement: null
           },
@@ -45393,25 +45666,25 @@ var App = class _App extends React52.Component {
         });
         return;
       }
-      if (isFrameLikeElement16(newElement5)) {
+      if (isFrameLikeElement16(newElement6)) {
         const elementsInsideFrame = getElementsInNewFrame(
           this.scene.getElementsIncludingDeleted(),
-          newElement5,
+          newElement6,
           this.scene.getNonDeletedElementsMap()
         );
         this.scene.replaceAllElements(
           addElementsToFrame2(
             this.scene.getElementsMapIncludingDeleted(),
             elementsInsideFrame,
-            newElement5,
+            newElement6,
             this.state
           )
         );
       }
-      if (newElement5) {
+      if (newElement6) {
         this.scene.mutateElement(
-          newElement5,
-          getNormalizedDimensions(newElement5),
+          newElement6,
+          getNormalizedDimensions(newElement6),
           {
             informMutation: false,
             isDragging: false
@@ -45420,7 +45693,7 @@ var App = class _App extends React52.Component {
         this.scene.triggerUpdate();
       }
       if (pointerDownState.drag.hasOccurred) {
-        const sceneCoords2 = viewportCoordsToSceneCoords3(childEvent, this.state);
+        const sceneCoords2 = viewportCoordsToSceneCoords4(childEvent, this.state);
         if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {
           const linearElement = this.scene.getElement(
             this.state.selectedLinearElement.elementId
@@ -45573,7 +45846,7 @@ var App = class _App extends React52.Component {
           pointFrom29(pointerEnd.clientX, pointerEnd.clientY)
         );
         if (draggedDistance === 0) {
-          const scenePointer = viewportCoordsToSceneCoords3(
+          const scenePointer = viewportCoordsToSceneCoords4(
             {
               clientX: pointerEnd.clientX,
               clientY: pointerEnd.clientY
@@ -45741,16 +46014,16 @@ var App = class _App extends React52.Component {
         setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         return;
       }
-      if (!activeTool.locked && activeTool.type !== "freedraw" && newElement5) {
+      if (!activeTool.locked && activeTool.type !== "freedraw" && newElement6) {
         this.setState((prevState) => ({
           selectedElementIds: makeNextSelectedElementIds2(
             {
               ...prevState.selectedElementIds,
-              [newElement5.id]: true
+              [newElement6.id]: true
             },
             prevState
           ),
-          showHyperlinkPopup: isEmbeddableElement4(newElement5) && !newElement5.link ? "editor" : prevState.showHyperlinkPopup
+          showHyperlinkPopup: isEmbeddableElement4(newElement6) && !newElement6.link ? "editor" : prevState.showHyperlinkPopup
         }));
       }
       if (activeTool.type !== "selection" || isSomeElementSelected(this.scene.getNonDeletedElements(), this.state) || !isShallowEqual9(
@@ -46300,7 +46573,7 @@ import {
   UserIdleState as UserIdleState2,
   normalizeLink as normalizeLink4,
   sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords4,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords5,
   getFormFactor as getFormFactor2
 } from "@orangecatai/common";
 import {
@@ -46518,7 +46791,2465 @@ var DiagramToCodePlugin = (props) => {
 // index.tsx
 import { isElementLink as isElementLink3 } from "@orangecatai/element";
 import { setCustomTextMetricsProvider } from "@orangecatai/element";
+
+// components/AIChatPanel.tsx
+import React57, {
+  useCallback as useCallback24,
+  useEffect as useEffect55,
+  useImperativeHandle as useImperativeHandle4,
+  useRef as useRef49,
+  useState as useState49
+} from "react";
+import {
+  ArrowUp as ArrowUp3,
+  AtSign,
+  Check,
+  ChevronDown as ChevronDown2,
+  ChevronRight,
+  Copy,
+  Globe,
+  MessageSquare,
+  Mic,
+  MicOff,
+  Paperclip,
+  Plus,
+  Search,
+  Wrench,
+  X as X2
+} from "lucide-react";
+
+// utils/openRouterApiKey.ts
+function resolveOpenRouterApiKey(propKey) {
+  const normalizedPropKey = propKey?.trim();
+  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_OPENROUTER_API_KEY ? define_import_meta_env_default.VITE_APP_OPENROUTER_API_KEY : "") ?? "";
+}
+
+// components/ai-chat/canvasTools.ts
+import { nanoid as nanoid2 } from "nanoid";
+import {
+  newFrameElement as newFrameElement3,
+  newElement as newElement5,
+  newTextElement as newTextElement4,
+  newImageElement as newImageElement2,
+  getFrameChildren as getFrameChildren7,
+  isFrameLikeElement as isFrameLikeElement17
+} from "@orangecatai/element";
+import { FRAME_STYLE as FRAME_STYLE5 } from "@orangecatai/common";
+var CANVAS_TOOLS = [
+  {
+    type: "function",
+    function: {
+      name: "create_frame",
+      description: "Create a new frame on the canvas. Frames act as artboards that clip their children. Default size is 512x512.",
+      parameters: {
+        type: "object",
+        properties: {
+          width: {
+            type: "number",
+            description: "Frame width in pixels (default 512)"
+          },
+          height: {
+            type: "number",
+            description: "Frame height in pixels (default 512)"
+          },
+          name: {
+            type: "string",
+            description: "Optional display name for the frame"
+          }
+        },
+        required: [],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "add_rectangle",
+      description: "Add a filled rectangle inside a frame. Commonly used for solid background fills behind images and text.",
+      parameters: {
+        type: "object",
+        properties: {
+          frameId: {
+            type: "string",
+            description: "ID of the parent frame"
+          },
+          x: {
+            type: "number",
+            description: "X position relative to canvas (use the frame's x for full coverage)"
+          },
+          y: {
+            type: "number",
+            description: "Y position relative to canvas (use the frame's y for full coverage)"
+          },
+          width: {
+            type: "number",
+            description: "Rectangle width in pixels"
+          },
+          height: {
+            type: "number",
+            description: "Rectangle height in pixels"
+          },
+          backgroundColor: {
+            type: "string",
+            description: 'Fill color as hex string e.g. "#1a1a2e". Use "transparent" for no fill.'
+          },
+          fillStyle: {
+            type: "string",
+            enum: ["solid", "hachure", "cross-hatch"],
+            description: 'Fill style (default "solid")'
+          },
+          strokeColor: {
+            type: "string",
+            description: 'Stroke/border color as hex (default "transparent")'
+          },
+          strokeWidth: {
+            type: "number",
+            description: "Stroke width in pixels (default 0)"
+          },
+          opacity: {
+            type: "number",
+            description: "Opacity 0-100 (default 100)"
+          }
+        },
+        required: ["frameId", "x", "y", "width", "height", "backgroundColor"],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "add_text",
+      description: "Add a text element inside a frame. Use for headlines, subheads, body copy, CTAs etc.",
+      parameters: {
+        type: "object",
+        properties: {
+          frameId: {
+            type: "string",
+            description: "ID of the parent frame"
+          },
+          x: {
+            type: "number",
+            description: "X position (canvas coordinates)"
+          },
+          y: {
+            type: "number",
+            description: "Y position (canvas coordinates)"
+          },
+          text: {
+            type: "string",
+            description: "The text content"
+          },
+          fontSize: {
+            type: "number",
+            description: "Font size in pixels (default 20)"
+          },
+          fontFamily: {
+            type: "number",
+            enum: [1, 2, 3, 4, 5],
+            description: "Font family: 1=Excalifont(hand), 2=Nunito(sans), 3=Comic Shanns(code), 4=Liberation Sans(clean sans), 5=cascadia(code). Default 2."
+          },
+          strokeColor: {
+            type: "string",
+            description: 'Text color as hex string (default "#000000")'
+          },
+          textAlign: {
+            type: "string",
+            enum: ["left", "center", "right"],
+            description: "Horizontal alignment (default left)"
+          },
+          width: {
+            type: "number",
+            description: "Optional fixed width for text wrapping"
+          }
+        },
+        required: ["frameId", "x", "y", "text"],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "generate_image",
+      description: "Generate an image using AI (Gemini) from a text prompt and place it inside a frame. Use for hero images, product shots, backgrounds, illustrations etc.",
+      parameters: {
+        type: "object",
+        properties: {
+          frameId: {
+            type: "string",
+            description: "ID of the parent frame to insert the image into"
+          },
+          prompt: {
+            type: "string",
+            description: "Detailed image generation prompt describing what to create"
+          },
+          x: {
+            type: "number",
+            description: "X position for the image (canvas coordinates)"
+          },
+          y: {
+            type: "number",
+            description: "Y position for the image (canvas coordinates)"
+          },
+          width: {
+            type: "number",
+            description: "Image width in pixels"
+          },
+          height: {
+            type: "number",
+            description: "Image height in pixels"
+          }
+        },
+        required: ["frameId", "prompt", "x", "y", "width", "height"],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "update_element",
+      description: "Update properties of an existing element (move, resize, recolor, change text, etc.)",
+      parameters: {
+        type: "object",
+        properties: {
+          elementId: {
+            type: "string",
+            description: "ID of the element to update"
+          },
+          x: { type: "number", description: "New X position" },
+          y: { type: "number", description: "New Y position" },
+          width: { type: "number", description: "New width" },
+          height: { type: "number", description: "New height" },
+          backgroundColor: {
+            type: "string",
+            description: "New background/fill color"
+          },
+          strokeColor: {
+            type: "string",
+            description: "New stroke/text color"
+          },
+          opacity: { type: "number", description: "New opacity 0-100" },
+          fontSize: {
+            type: "number",
+            description: "New font size (text elements only)"
+          },
+          text: {
+            type: "string",
+            description: "New text content (text elements only)"
+          },
+          fillStyle: {
+            type: "string",
+            enum: ["solid", "hachure", "cross-hatch"],
+            description: "New fill style"
+          }
+        },
+        required: ["elementId"],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "delete_element",
+      description: "Delete an element from the canvas",
+      parameters: {
+        type: "object",
+        properties: {
+          elementId: {
+            type: "string",
+            description: "ID of the element to delete"
+          }
+        },
+        required: ["elementId"],
+        additionalProperties: false
+      }
+    }
+  },
+  {
+    type: "function",
+    function: {
+      name: "get_frame_elements",
+      description: "Get all child elements inside a frame. Returns their IDs, types, positions, sizes, colors, and text content. Use this to understand the current layout before making changes.",
+      parameters: {
+        type: "object",
+        properties: {
+          frameId: {
+            type: "string",
+            description: "ID of the frame to inspect"
+          }
+        },
+        required: ["frameId"],
+        additionalProperties: false
+      }
+    }
+  }
+];
+function serializeElement(el) {
+  const base = {
+    id: el.id,
+    type: el.type,
+    x: Math.round(el.x),
+    y: Math.round(el.y),
+    width: Math.round(el.width),
+    height: Math.round(el.height)
+  };
+  if (el.backgroundColor && el.backgroundColor !== "transparent") {
+    base.backgroundColor = el.backgroundColor;
+  }
+  if (el.strokeColor && el.strokeColor !== "#1e1e1e") {
+    base.strokeColor = el.strokeColor;
+  }
+  if (el.opacity !== 100) {
+    base.opacity = el.opacity;
+  }
+  if (el.fillStyle && el.fillStyle !== "solid") {
+    base.fillStyle = el.fillStyle;
+  }
+  if (el.type === "text") {
+    const textEl = el;
+    base.text = textEl.text;
+    base.fontSize = textEl.fontSize;
+    base.fontFamily = textEl.fontFamily;
+    base.textAlign = textEl.textAlign;
+  }
+  if (el.type === "image") {
+    base.type = "image";
+  }
+  if (el.type === "frame") {
+    const frameEl = el;
+    if (frameEl.name) {
+      base.name = frameEl.name;
+    }
+  }
+  return base;
+}
+function serializeElements(elements) {
+  return elements.map(serializeElement);
+}
+function listFrames(api) {
+  const elements = api.getSceneElements();
+  const frames = [];
+  for (const el of elements) {
+    if (isFrameLikeElement17(el)) {
+      const children = getFrameChildren7(elements, el.id);
+      const frameLike = el;
+      frames.push({
+        id: el.id,
+        name: frameLike.name || `Frame ${Math.round(el.width)}\xD7${Math.round(el.height)}`,
+        width: Math.round(el.width),
+        height: Math.round(el.height),
+        childCount: children.length
+      });
+    }
+  }
+  return frames;
+}
+async function captureFrameScreenshot(api, frameId) {
+  const elements = api.getSceneElements();
+  const frame = elements.find((el) => el.id === frameId);
+  if (!frame || !isFrameLikeElement17(frame)) {
+    return null;
+  }
+  const appState = api.getAppState();
+  const files = api.getFiles();
+  const children = getFrameChildren7(elements, frameId);
+  try {
+    const canvas = await exportToCanvas([...children, frame], appState, files, {
+      exportBackground: true,
+      viewBackgroundColor: appState.viewBackgroundColor,
+      exportingFrame: frame,
+      exportPadding: 0
+    });
+    return canvas.toDataURL("image/jpeg", 0.7);
+  } catch {
+    return null;
+  }
+}
+function getFrameContext(api, frameId) {
+  const elements = api.getSceneElements();
+  const frame = elements.find((el) => el.id === frameId);
+  if (!frame || !isFrameLikeElement17(frame)) {
+    return null;
+  }
+  const children = getFrameChildren7(elements, frameId);
+  const frameLike = frame;
+  const frameInfo = {
+    id: frame.id,
+    name: frameLike.name || `Frame ${Math.round(frame.width)}\xD7${Math.round(frame.height)}`,
+    width: Math.round(frame.width),
+    height: Math.round(frame.height),
+    childCount: children.length
+  };
+  const data = {
+    frame: serializeElement(frame),
+    children: serializeElements(children)
+  };
+  return {
+    serialized: JSON.stringify(data, null, 2),
+    frameInfo
+  };
+}
+async function executeCanvasTool(toolName, rawArgs, ctx) {
+  let args;
+  try {
+    args = JSON.parse(rawArgs);
+  } catch {
+    return {
+      success: false,
+      error: "Invalid JSON arguments",
+      statusMessage: "Failed to parse tool arguments"
+    };
+  }
+  switch (toolName) {
+    case "create_frame":
+      return execCreateFrame(args, ctx);
+    case "add_rectangle":
+      return execAddRectangle(args, ctx);
+    case "add_text":
+      return execAddText(args, ctx);
+    case "generate_image":
+      return execGenerateImage(args, ctx);
+    case "update_element":
+      return execUpdateElement(args, ctx);
+    case "delete_element":
+      return execDeleteElement(args, ctx);
+    case "get_frame_elements":
+      return execGetFrameElements(args, ctx);
+    default:
+      return {
+        success: false,
+        error: `Unknown tool: ${toolName}`,
+        statusMessage: `Unknown tool: ${toolName}`
+      };
+  }
+}
+function getViewportCenter(api) {
+  const appState = api.getAppState();
+  const x = -appState.scrollX + appState.width / 2 / appState.zoom.value;
+  const y = -appState.scrollY + appState.height / 2 / appState.zoom.value;
+  return { x, y };
+}
+var COVER_TOLERANCE = 10;
+function coversFrame(elX, elY, elW, elH, frameEl) {
+  return Math.abs(elX - frameEl.x) < COVER_TOLERANCE && Math.abs(elY - frameEl.y) < COVER_TOLERANCE && Math.abs(elW - frameEl.width) < COVER_TOLERANCE && Math.abs(elH - frameEl.height) < COVER_TOLERANCE;
+}
+function getElementTier(type, x, y, w, h, frame) {
+  if (type === "text") {
+    return 3 /* TEXT */;
+  }
+  if (type === "image") {
+    return 1 /* IMAGE */;
+  }
+  if (coversFrame(x, y, w, h, frame)) {
+    return 0 /* BG_FILL */;
+  }
+  return 2 /* SHAPE */;
+}
+function findInsertIndexByTier(elements, frameIndex, tier) {
+  const frame = elements[frameIndex];
+  const frameId = frame.id;
+  let insertAt = frameIndex + 1;
+  for (let i = frameIndex + 1; i < elements.length; i++) {
+    const el = elements[i];
+    if (el.frameId !== frameId) {
+      continue;
+    }
+    const elTier = getElementTier(
+      el.type,
+      el.x,
+      el.y,
+      el.width,
+      el.height,
+      frame
+    );
+    if (elTier > tier) {
+      return i;
+    }
+    insertAt = i + 1;
+  }
+  return insertAt;
+}
+function execCreateFrame(args, ctx) {
+  const width = args.width || 512;
+  const height = args.height || 512;
+  const name = args.name || null;
+  const center = getViewportCenter(ctx.excalidrawAPI);
+  const frame = newFrameElement3({
+    ...FRAME_STYLE5,
+    x: center.x - width / 2,
+    y: center.y - height / 2,
+    width,
+    height,
+    opacity: 100,
+    locked: false,
+    name: name ?? void 0
+  });
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  ctx.excalidrawAPI.updateScene({
+    elements: [...elements, frame]
+  });
+  ctx.excalidrawAPI.scrollToContent(frame, { fitToViewport: false });
+  return {
+    success: true,
+    data: {
+      frameId: frame.id,
+      x: Math.round(frame.x),
+      y: Math.round(frame.y),
+      width,
+      height
+    },
+    statusMessage: `Created frame "${name || "Ad Frame"}" (${width}\xD7${height})`
+  };
+}
+function execAddRectangle(args, ctx) {
+  const frameId = args.frameId;
+  if (!frameId) {
+    return {
+      success: false,
+      error: "frameId is required",
+      statusMessage: "Failed: missing frameId"
+    };
+  }
+  const rect = newElement5({
+    type: "rectangle",
+    x: args.x,
+    y: args.y,
+    width: args.width,
+    height: args.height,
+    backgroundColor: args.backgroundColor || "transparent",
+    fillStyle: args.fillStyle || "solid",
+    strokeColor: args.strokeColor || "transparent",
+    strokeWidth: args.strokeWidth ?? 0,
+    opacity: args.opacity ?? 100
+  });
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const frameIndex = elements.findIndex((el) => el.id === frameId);
+  if (frameIndex === -1) {
+    return {
+      success: false,
+      error: `Frame ${frameId} not found`,
+      statusMessage: "Failed: frame not found"
+    };
+  }
+  const frame = elements[frameIndex];
+  const tier = getElementTier(
+    "rectangle",
+    args.x,
+    args.y,
+    args.width,
+    args.height,
+    frame
+  );
+  const updatedRect = { ...rect, frameId };
+  const newElements = [...elements];
+  const insertAt = findInsertIndexByTier(newElements, frameIndex, tier);
+  newElements.splice(insertAt, 0, updatedRect);
+  ctx.excalidrawAPI.updateScene({ elements: newElements });
+  const isBg = tier === 0 /* BG_FILL */;
+  return {
+    success: true,
+    data: {
+      elementId: rect.id,
+      type: "rectangle",
+      x: Math.round(rect.x),
+      y: Math.round(rect.y),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      backgroundColor: rect.backgroundColor,
+      isBackground: isBg
+    },
+    statusMessage: `Added ${isBg ? "background " : ""}rectangle (${Math.round(
+      rect.width
+    )}\xD7${Math.round(rect.height)}) with fill ${rect.backgroundColor}`
+  };
+}
+function execAddText(args, ctx) {
+  const frameId = args.frameId;
+  if (!frameId) {
+    return {
+      success: false,
+      error: "frameId is required",
+      statusMessage: "Failed: missing frameId"
+    };
+  }
+  const textEl = newTextElement4({
+    x: args.x,
+    y: args.y,
+    text: args.text,
+    fontSize: args.fontSize || 20,
+    fontFamily: args.fontFamily || 2,
+    strokeColor: args.strokeColor || "#000000",
+    textAlign: args.textAlign || "left",
+    width: args.width
+  });
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const frameIndex = elements.findIndex((el) => el.id === frameId);
+  if (frameIndex === -1) {
+    return {
+      success: false,
+      error: `Frame ${frameId} not found`,
+      statusMessage: "Failed: frame not found"
+    };
+  }
+  const updatedText = { ...textEl, frameId };
+  const newElements = [...elements];
+  const insertAt = findInsertIndexByTier(
+    newElements,
+    frameIndex,
+    3 /* TEXT */
+  );
+  newElements.splice(insertAt, 0, updatedText);
+  ctx.excalidrawAPI.updateScene({ elements: newElements });
+  return {
+    success: true,
+    data: {
+      elementId: textEl.id,
+      type: "text",
+      x: Math.round(textEl.x),
+      y: Math.round(textEl.y),
+      text: args.text,
+      fontSize: args.fontSize || 20
+    },
+    statusMessage: `Added text "${args.text.slice(0, 40)}${args.text.length > 40 ? "\u2026" : ""}"`
+  };
+}
+async function execGenerateImage(args, ctx) {
+  const frameId = args.frameId;
+  const prompt = args.prompt;
+  const x = args.x;
+  const y = args.y;
+  const width = args.width;
+  const height = args.height;
+  if (!frameId || !prompt) {
+    return {
+      success: false,
+      error: "frameId and prompt are required",
+      statusMessage: "Failed: missing required parameters"
+    };
+  }
+  if (!ctx.geminiApiKey) {
+    return {
+      success: false,
+      error: "No Gemini API key configured. Set geminiApiKey prop or VITE_APP_GEMINI_API_KEY.",
+      statusMessage: "Failed: no Gemini API key"
+    };
+  }
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const frameIndex = elements.findIndex((el) => el.id === frameId);
+  if (frameIndex === -1) {
+    return {
+      success: false,
+      error: `Frame ${frameId} not found`,
+      statusMessage: "Failed: frame not found"
+    };
+  }
+  const aspectRatio = width >= height ? width / height > 1.3 ? "16:9" : "1:1" : "9:16";
+  try {
+    const imageDataUrl = await callGeminiAPI(
+      prompt,
+      "gemini-2.5-flash-image",
+      aspectRatio,
+      "1K",
+      false,
+      false,
+      ctx.geminiApiKey,
+      void 0,
+      ctx.signal
+    );
+    if (ctx.signal?.aborted) {
+      return {
+        success: false,
+        error: "Cancelled",
+        statusMessage: "Image generation cancelled"
+      };
+    }
+    const fileId = nanoid2();
+    const imageEl = newImageElement2({
+      type: "image",
+      x,
+      y,
+      width,
+      height,
+      fileId,
+      status: "pending",
+      scale: [1, 1]
+    });
+    const currentElements = ctx.excalidrawAPI.getSceneElements();
+    const currentFrameIndex = currentElements.findIndex(
+      (el) => el.id === frameId
+    );
+    if (currentFrameIndex === -1) {
+      return {
+        success: false,
+        error: `Frame ${frameId} was removed during image generation`,
+        statusMessage: "Failed: frame no longer exists"
+      };
+    }
+    const updatedImage = { ...imageEl, frameId };
+    const newElements = [...currentElements];
+    const insertAt = findInsertIndexByTier(
+      newElements,
+      currentFrameIndex,
+      1 /* IMAGE */
+    );
+    newElements.splice(insertAt, 0, updatedImage);
+    ctx.excalidrawAPI.updateScene({ elements: newElements });
+    ctx.excalidrawAPI.addFiles([
+      {
+        id: fileId,
+        dataURL: imageDataUrl,
+        mimeType: getMimeTypeFromDataURL(imageDataUrl),
+        created: Date.now(),
+        lastRetrieved: Date.now()
+      }
+    ]);
+    return {
+      success: true,
+      data: {
+        elementId: imageEl.id,
+        type: "image",
+        x: Math.round(x),
+        y: Math.round(y),
+        width: Math.round(width),
+        height: Math.round(height)
+      },
+      statusMessage: `Generated image from prompt "${prompt.slice(0, 50)}${prompt.length > 50 ? "\u2026" : ""}"`
+    };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Image generation failed";
+    return {
+      success: false,
+      error: message,
+      statusMessage: `Image generation failed: ${message}`
+    };
+  }
+}
+function execUpdateElement(args, ctx) {
+  const elementId = args.elementId;
+  if (!elementId) {
+    return {
+      success: false,
+      error: "elementId is required",
+      statusMessage: "Failed: missing elementId"
+    };
+  }
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const element = elements.find((el) => el.id === elementId);
+  if (!element) {
+    return {
+      success: false,
+      error: `Element ${elementId} not found`,
+      statusMessage: "Failed: element not found"
+    };
+  }
+  const updates = {};
+  const allowedKeys = [
+    "x",
+    "y",
+    "width",
+    "height",
+    "backgroundColor",
+    "strokeColor",
+    "opacity",
+    "fontSize",
+    "text",
+    "fillStyle"
+  ];
+  for (const key of allowedKeys) {
+    if (args[key] !== void 0) {
+      updates[key] = args[key];
+    }
+  }
+  if (Object.keys(updates).length === 0) {
+    return {
+      success: false,
+      error: "No valid properties to update",
+      statusMessage: "Failed: nothing to update"
+    };
+  }
+  if (updates.text !== void 0 && element.type === "text" && (updates.width === void 0 || updates.height === void 0)) {
+    return {
+      success: false,
+      error: "Updating text content requires providing new width and height to avoid clipping.",
+      statusMessage: "Failed: text update requires width and height"
+    };
+  }
+  ctx.excalidrawAPI.mutateElement(element, updates);
+  return {
+    success: true,
+    data: { elementId, updated: Object.keys(updates) },
+    statusMessage: `Updated element (${Object.keys(updates).join(", ")})`
+  };
+}
+function execDeleteElement(args, ctx) {
+  const elementId = args.elementId;
+  if (!elementId) {
+    return {
+      success: false,
+      error: "elementId is required",
+      statusMessage: "Failed: missing elementId"
+    };
+  }
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const element = elements.find((el) => el.id === elementId);
+  if (!element) {
+    return {
+      success: false,
+      error: `Element ${elementId} not found`,
+      statusMessage: "Failed: element not found"
+    };
+  }
+  ctx.excalidrawAPI.mutateElement(element, { isDeleted: true });
+  return {
+    success: true,
+    data: { elementId },
+    statusMessage: `Deleted element ${elementId}`
+  };
+}
+function execGetFrameElements(args, ctx) {
+  const frameId = args.frameId;
+  if (!frameId) {
+    return {
+      success: false,
+      error: "frameId is required",
+      statusMessage: "Failed: missing frameId"
+    };
+  }
+  const elements = ctx.excalidrawAPI.getSceneElements();
+  const frame = elements.find((el) => el.id === frameId);
+  if (!frame) {
+    return {
+      success: false,
+      error: `Frame ${frameId} not found`,
+      statusMessage: "Failed: frame not found"
+    };
+  }
+  const children = getFrameChildren7(elements, frameId);
+  const serialized = serializeElements(children);
+  return {
+    success: true,
+    data: {
+      frameId,
+      frame: serializeElement(frame),
+      children: serialized,
+      childCount: serialized.length
+    },
+    statusMessage: `Found ${serialized.length} elements in frame`
+  };
+}
+
+// components/ai-chat/agentLoop.ts
+var SYSTEM_PROMPT = `You are an AI ad designer assistant embedded in a canvas editor (Excalidraw-based). You create advertisements, graphics, and visual compositions by calling tools that manipulate canvas elements.
+
+## Your Capabilities
+You have tools to: create frames, add rectangles (for backgrounds/shapes), add text, generate AI images, update elements, delete elements, and inspect frame contents.
+
+## Design Process
+When asked to create an ad or visual from scratch:
+1. **Create a frame** first (default 512\xD7512 unless the user specifies a size). This is the artboard.
+2. **Add a background** \u2014 use add_rectangle at the frame's exact position and size with a solid fill color. This is the base layer.
+3. **Generate a hero image** \u2014 use generate_image to create the main visual. Position it within the frame. It can be full-bleed (same size/position as frame) or partial.
+4. **Add headline text** \u2014 large, bold text. Position it where it's readable against the background/image. Use contrasting colors (white text on dark images, dark text on light backgrounds).
+5. **Add subhead text** \u2014 smaller supporting text below the headline.
+
+## Layout & Z-ordering Rules
+- Elements are rendered in insertion order. Add background rectangle FIRST, then images, then text ON TOP.
+- All element positions use absolute canvas coordinates. The frame's x,y is the top-left corner.
+- To place an element at a frame's top-left: use the frame's x,y values.
+- To center text horizontally in a frame: set text x = frame.x + (frame.width - estimated_text_width) / 2
+- Leave padding from edges (at least 20px from frame borders for text).
+- Headline font size: 28-48px depending on frame size. Subhead: 16-24px.
+
+## Color & Typography
+- Use font family 2 (Nunito/clean sans-serif) for professional ads.
+- For dark backgrounds: use white (#ffffff) or light text.
+- For light backgrounds: use dark (#1a1a2e or #000000) text.
+- Popular ad background colors: deep navy (#1a1a2e), warm red (#c0392b), forest green (#27ae60), elegant black (#111111), soft cream (#fdf6e3).
+
+## When modifying existing elements (@ context provided)
+- The user may reference existing elements via @ mentions. Their current state will be described in the message.
+- Use get_frame_elements to see the full current state of a frame before making changes.
+- Use update_element to modify properties. Use delete_element to remove things.
+- Preserve existing elements unless explicitly asked to change them.
+
+## Image Generation Tips
+- Write detailed, descriptive prompts for generate_image. Include style, mood, composition, colors.
+- Example: "A steaming bowl of creamy pasta on a rustic wooden table, warm golden lighting, top-down view, food photography style, appetizing, high quality"
+- The image will be generated by Gemini AI and placed at the coordinates you specify.
+
+## Important
+- Always respond with a brief summary of what you created/modified after completing the tools.
+- If the user's request is unclear, use the available tools to create a reasonable default and explain what you did.
+- Coordinates: frame x,y is the top-left corner. Width extends right, height extends down.`;
+var MAX_ITERATIONS = 15;
+async function callOpenRouter(messages, apiKey, signal, webSearchEnabled) {
+  const model = webSearchEnabled ? "openai/gpt-4.1-mini:online" : "openai/gpt-4.1-mini";
+  const body = {
+    model,
+    messages: messages.map((m) => {
+      if (m.role === "assistant" && m.tool_calls) {
+        return {
+          role: m.role,
+          content: m.content,
+          tool_calls: m.tool_calls
+        };
+      }
+      if (m.role === "tool") {
+        return {
+          role: m.role,
+          tool_call_id: m.tool_call_id,
+          content: m.content
+        };
+      }
+      return { role: m.role, content: m.content };
+    }),
+    tools: CANVAS_TOOLS,
+    tool_choice: "auto"
+  };
+  if (webSearchEnabled) {
+    body.plugins = [{ id: "web", max_results: 5 }];
+  }
+  const response = await fetch(
+    "https://openrouter.ai/api/v1/chat/completions",
+    {
+      method: "POST",
+      signal,
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(body)
+    }
+  );
+  if (!response.ok) {
+    let message = `OpenRouter 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 choice = data?.choices?.[0]?.message;
+  if (!choice) {
+    throw new Error("No response returned by the API.");
+  }
+  return {
+    content: choice.content ?? null,
+    tool_calls: choice.tool_calls ?? void 0
+  };
+}
+async function runAgentLoop(opts) {
+  const {
+    userMessages,
+    elementContext,
+    frameScreenshot,
+    fileAttachments,
+    webSearchEnabled,
+    apiKey,
+    toolCtx,
+    onUpdate,
+    signal,
+    onBeforeImageGen,
+    onAfterImageGen
+  } = opts;
+  const messages = [{ role: "system", content: SYSTEM_PROMPT }];
+  if (elementContext) {
+    messages.push({
+      role: "system",
+      content: `The user has referenced a frame (via @ mention). Here are the frame details and its child elements. Use these IDs and properties when modifying or working with these elements:
+
+${elementContext}`
+    });
+  }
+  for (let i = 0; i < userMessages.length; i++) {
+    const msg = userMessages[i];
+    const isLast = i === userMessages.length - 1;
+    const hasMultimodal = isLast && msg.role === "user" && (frameScreenshot || fileAttachments && fileAttachments.some((a) => a.type === "image"));
+    const hasTextFiles = isLast && msg.role === "user" && fileAttachments && fileAttachments.some((a) => a.type === "text");
+    if (hasMultimodal || hasTextFiles) {
+      const contentParts = [];
+      if (frameScreenshot) {
+        contentParts.push({
+          type: "image_url",
+          image_url: { url: frameScreenshot }
+        });
+      }
+      if (fileAttachments) {
+        for (const att of fileAttachments) {
+          if (att.type === "image" && att.dataUrl) {
+            contentParts.push({
+              type: "image_url",
+              image_url: { url: att.dataUrl }
+            });
+          }
+        }
+      }
+      let text = msg.content;
+      if (frameScreenshot) {
+        text = `[Screenshot of the referenced frame is attached above]
+
+${text}`;
+      }
+      if (fileAttachments) {
+        const textFiles = fileAttachments.filter((a) => a.type === "text");
+        if (textFiles.length > 0) {
+          text += `
+
+${textFiles.map((f) => `[File: ${f.name}]
+${f.textContent}`).join("\n\n")}`;
+        }
+      }
+      contentParts.push({ type: "text", text });
+      messages.push({ role: "user", content: contentParts });
+    } else {
+      messages.push({ role: msg.role, content: msg.content });
+    }
+  }
+  const toolActions = [];
+  let iterations = 0;
+  while (iterations < MAX_ITERATIONS) {
+    iterations++;
+    onUpdate({
+      type: "status",
+      message: iterations === 1 ? "Thinking\u2026" : "Processing tool results\u2026"
+    });
+    const response = await callOpenRouter(
+      messages,
+      apiKey,
+      signal,
+      webSearchEnabled
+    );
+    if (!response.tool_calls || response.tool_calls.length === 0) {
+      const reply = response.content || "Done!";
+      onUpdate({ type: "final", message: reply });
+      return { reply, toolActions };
+    }
+    messages.push({
+      role: "assistant",
+      content: response.content,
+      tool_calls: response.tool_calls
+    });
+    for (const toolCall of response.tool_calls) {
+      const { name, arguments: rawArgs } = toolCall.function;
+      let parsedArgs = {};
+      try {
+        parsedArgs = JSON.parse(rawArgs);
+      } catch {
+      }
+      onUpdate({
+        type: "tool_start",
+        message: formatToolStartMessage(name, parsedArgs)
+      });
+      if (name === "generate_image" && onBeforeImageGen) {
+        const { allowed, error } = await onBeforeImageGen();
+        if (!allowed) {
+          const gatedResult = {
+            success: false,
+            error: error || "Insufficient credits for image generation",
+            statusMessage: error || "Insufficient credits for image generation"
+          };
+          const gatedAction = {
+            toolName: name,
+            args: parsedArgs,
+            result: gatedResult
+          };
+          toolActions.push(gatedAction);
+          onUpdate({
+            type: "tool_done",
+            message: gatedResult.statusMessage,
+            toolAction: gatedAction
+          });
+          messages.push({
+            role: "tool",
+            tool_call_id: toolCall.id,
+            content: JSON.stringify({
+              success: false,
+              error: gatedResult.error
+            })
+          });
+          continue;
+        }
+      }
+      const result = await executeCanvasTool(name, rawArgs, toolCtx);
+      if (name === "generate_image" && result.success && onAfterImageGen) {
+        onAfterImageGen();
+      }
+      const action = {
+        toolName: name,
+        args: parsedArgs,
+        result
+      };
+      toolActions.push(action);
+      onUpdate({
+        type: "tool_done",
+        message: result.statusMessage,
+        toolAction: action
+      });
+      messages.push({
+        role: "tool",
+        tool_call_id: toolCall.id,
+        content: JSON.stringify(
+          result.success ? { success: true, ...result.data } : { success: false, error: result.error }
+        )
+      });
+    }
+  }
+  const fallbackReply = "I've completed the available operations. Let me know if you'd like any adjustments!";
+  onUpdate({ type: "final", message: fallbackReply });
+  return { reply: fallbackReply, toolActions };
+}
+function formatToolStartMessage(name, args) {
+  switch (name) {
+    case "create_frame":
+      return `Creating frame (${args.width || 512}\xD7${args.height || 512})\u2026`;
+    case "add_rectangle":
+      return `Adding background rectangle\u2026`;
+    case "add_text":
+      return `Adding text "${String(args.text || "").slice(0, 30)}"\u2026`;
+    case "generate_image":
+      return `Generating image \u2014 this may take a moment\u2026`;
+    case "update_element":
+      return `Updating element\u2026`;
+    case "delete_element":
+      return `Deleting element\u2026`;
+    case "get_frame_elements":
+      return `Inspecting frame contents\u2026`;
+    default:
+      return `Running ${name}\u2026`;
+  }
+}
+
+// components/ai-chat/audioUtils.ts
+async function blobToWavBase64(blob) {
+  const arrayBuffer = await blob.arrayBuffer();
+  const audioCtx = new AudioContext();
+  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+  await audioCtx.close();
+  const numChannels = audioBuffer.numberOfChannels;
+  const sampleRate = audioBuffer.sampleRate;
+  const numSamples = audioBuffer.length;
+  const bytesPerSample = 2;
+  const dataSize = numSamples * numChannels * bytesPerSample;
+  const bufferSize = 44 + dataSize;
+  const wavBuffer = new ArrayBuffer(bufferSize);
+  const view = new DataView(wavBuffer);
+  const writeStr = (offset2, str) => {
+    for (let i = 0; i < str.length; i++) {
+      view.setUint8(offset2 + i, str.charCodeAt(i));
+    }
+  };
+  writeStr(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  writeStr(8, "WAVE");
+  writeStr(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numChannels * bytesPerSample, true);
+  view.setUint16(32, numChannels * bytesPerSample, true);
+  view.setUint16(34, 16, true);
+  writeStr(36, "data");
+  view.setUint32(40, dataSize, true);
+  let offset = 44;
+  for (let i = 0; i < numSamples; i++) {
+    for (let ch = 0; ch < numChannels; ch++) {
+      const sample = audioBuffer.getChannelData(ch)[i];
+      const clamped = Math.max(-1, Math.min(1, sample));
+      const int16 = clamped < 0 ? clamped * 32768 : clamped * 32767;
+      view.setInt16(offset, int16, true);
+      offset += 2;
+    }
+  }
+  const uint8 = new Uint8Array(wavBuffer);
+  const CHUNK = 8192;
+  let binary = "";
+  for (let i = 0; i < uint8.length; i += CHUNK) {
+    binary += String.fromCharCode(...uint8.subarray(i, i + CHUNK));
+  }
+  return btoa(binary);
+}
+async function transcribeAudio(base64Audio, format, apiKey) {
+  const response = await fetch(
+    "https://openrouter.ai/api/v1/chat/completions",
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        model: "mistralai/voxtral-small-24b-2507",
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "Transcribe this audio. Return only the transcription text, nothing else."
+              },
+              {
+                type: "input_audio",
+                input_audio: { data: base64Audio, format }
+              }
+            ]
+          }
+        ]
+      })
+    }
+  );
+  if (!response.ok) {
+    let message = `Transcription 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();
+  return data?.choices?.[0]?.message?.content || "";
+}
+
+// components/ui/chat-container.tsx
+import { StickToBottom } from "use-stick-to-bottom";
 import { jsx as jsx177 } from "react/jsx-runtime";
+function ChatContainerRoot({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx177(
+    StickToBottom,
+    {
+      className: cn("flex overflow-y-auto", className),
+      resize: "smooth",
+      initial: "instant",
+      role: "log",
+      ...props,
+      children
+    }
+  );
+}
+function ChatContainerContent({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx177(
+    StickToBottom.Content,
+    {
+      className: cn("flex w-full flex-col", className),
+      ...props,
+      children
+    }
+  );
+}
+
+// components/ui/markdown.tsx
+import { marked } from "marked";
+import { memo as memo6, useId, useMemo as useMemo13 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkBreaks from "remark-breaks";
+import remarkGfm from "remark-gfm";
+
+// components/ui/code-block.tsx
+import { useEffect as useEffect54, useState as useState48 } from "react";
+import { codeToHtml } from "shiki";
+import { jsx as jsx178 } from "react/jsx-runtime";
+function CodeBlock({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx178(
+    "div",
+    {
+      className: cn(
+        "not-prose flex w-full flex-col overflow-clip border",
+        "border-zinc-200 bg-white text-zinc-950 rounded-xl dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function CodeBlockCode({
+  code,
+  language = "tsx",
+  theme = "github-light",
+  className,
+  ...props
+}) {
+  const [highlightedHtml, setHighlightedHtml] = useState48(null);
+  useEffect54(() => {
+    async function highlight() {
+      if (!code) {
+        setHighlightedHtml("<pre><code></code></pre>");
+        return;
+      }
+      const html = await codeToHtml(code, { lang: language, theme });
+      setHighlightedHtml(html);
+    }
+    highlight();
+  }, [code, language, theme]);
+  const classNames = cn(
+    "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
+    className
+  );
+  return highlightedHtml ? /* @__PURE__ */ jsx178(
+    "div",
+    {
+      className: classNames,
+      dangerouslySetInnerHTML: { __html: highlightedHtml },
+      ...props
+    }
+  ) : /* @__PURE__ */ jsx178("div", { className: classNames, ...props, children: /* @__PURE__ */ jsx178("pre", { children: /* @__PURE__ */ jsx178("code", { children: code }) }) });
+}
+
+// components/ui/markdown.tsx
+import { Fragment as Fragment33, jsx as jsx179 } from "react/jsx-runtime";
+function parseMarkdownIntoBlocks(markdown) {
+  const tokens = marked.lexer(markdown);
+  return tokens.map((token) => token.raw);
+}
+function extractLanguage(className) {
+  if (!className) {
+    return "plaintext";
+  }
+  const match = className.match(/language-(\w+)/);
+  return match ? match[1] : "plaintext";
+}
+var INITIAL_COMPONENTS = {
+  code: function CodeComponent({ className, children, ...props }) {
+    const isInline = !props.node?.position?.start.line || props.node?.position?.start.line === props.node?.position?.end.line;
+    if (isInline) {
+      return /* @__PURE__ */ jsx179(
+        "span",
+        {
+          className: cn(
+            "bg-zinc-50 rounded-sm px-1 font-mono text-sm dark:bg-zinc-900",
+            className
+          ),
+          ...props,
+          children
+        }
+      );
+    }
+    const language = extractLanguage(className);
+    return /* @__PURE__ */ jsx179(CodeBlock, { className, children: /* @__PURE__ */ jsx179(CodeBlockCode, { code: children, language }) });
+  },
+  pre: function PreComponent({ children }) {
+    return /* @__PURE__ */ jsx179(Fragment33, { children });
+  }
+};
+var MemoizedMarkdownBlock = memo6(
+  ({
+    content,
+    components = INITIAL_COMPONENTS
+  }) => {
+    return /* @__PURE__ */ jsx179(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm, remarkBreaks],
+        components,
+        children: content
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.content === nextProps.content;
+  }
+);
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+function MarkdownComponent({
+  children,
+  id,
+  className,
+  components = INITIAL_COMPONENTS
+}) {
+  const generatedId = useId();
+  const blockId = id ?? generatedId;
+  const blocks = useMemo13(() => parseMarkdownIntoBlocks(children), [children]);
+  return /* @__PURE__ */ jsx179("div", { className, children: blocks.map((block, index) => /* @__PURE__ */ jsx179(
+    MemoizedMarkdownBlock,
+    {
+      content: block,
+      components
+    },
+    `${blockId}-block-${index}`
+  )) });
+}
+var Markdown = memo6(MarkdownComponent);
+Markdown.displayName = "Markdown";
+
+// components/ui/avatar.tsx
+import * as React55 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx180 } from "react/jsx-runtime";
+var Avatar2 = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx180(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar2.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx180(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React55.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx180(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// components/ui/message.tsx
+import { jsx as jsx181, jsxs as jsxs99 } from "react/jsx-runtime";
+var Message = ({ children, className, ...props }) => /* @__PURE__ */ jsx181("div", { className: cn("flex gap-3", className), ...props, children });
+var MessageContent = ({
+  children,
+  markdown = false,
+  className,
+  ...props
+}) => {
+  const classNames = cn(
+    "rounded-lg p-2 text-zinc-950 bg-zinc-100 prose break-words whitespace-normal dark:text-zinc-50 dark:bg-zinc-800",
+    className
+  );
+  return markdown ? /* @__PURE__ */ jsx181(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx181("div", { className: classNames, ...props, children });
+};
+var MessageActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx181(
+  "div",
+  {
+    className: cn(
+      "text-zinc-500 flex items-center gap-2 dark:text-zinc-400",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var MessageAction = ({
+  tooltip,
+  children,
+  className,
+  side = "top",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx181(TooltipProvider, { children: /* @__PURE__ */ jsxs99(Tooltip2, { ...props, children: [
+    /* @__PURE__ */ jsx181(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx181(TooltipContent, { side, className, children: tooltip })
+  ] }) });
+};
+
+// components/ui/scroll-button.tsx
+import { ChevronDown } from "lucide-react";
+import { useStickToBottomContext } from "use-stick-to-bottom";
+
+// components/ui/button.tsx
+import * as React56 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx182 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-zinc-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-900 text-zinc-50 shadow hover:bg-zinc-900/90 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/90",
+        destructive: "bg-red-500 text-zinc-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+        outline: "border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+        secondary: "bg-zinc-100 text-zinc-900 shadow-sm hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+        ghost: "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button2 = React56.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx182(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button2.displayName = "Button";
+
+// components/ui/scroll-button.tsx
+import { jsx as jsx183 } from "react/jsx-runtime";
+function ScrollButton({
+  className,
+  variant = "outline",
+  size = "sm",
+  ...props
+}) {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  return /* @__PURE__ */ jsx183(
+    Button2,
+    {
+      variant,
+      size,
+      className: cn(
+        "h-10 w-10 rounded-full transition-all duration-150 ease-out",
+        !isAtBottom ? "translate-y-0 scale-100 opacity-100" : "pointer-events-none translate-y-4 scale-95 opacity-0",
+        className
+      ),
+      onClick: () => scrollToBottom(),
+      ...props,
+      children: /* @__PURE__ */ jsx183(ChevronDown, { className: "h-5 w-5" })
+    }
+  );
+}
+
+// components/AIChatPanel.tsx
+import { jsx as jsx184, jsxs as jsxs100 } from "react/jsx-runtime";
+function genId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+var MAX_ATTACHED_FILES = 3;
+var MAX_FILE_SIZE_BYTES = 10 * 1024 * 1024;
+var SUGGESTIONS = [
+  "Create a pasta ad",
+  "Design a sale banner",
+  "Make a product showcase",
+  "Help me design"
+];
+var AIChatPanel = React57.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    apiKey,
+    excalidrawAPI,
+    geminiApiKey,
+    initialMessages,
+    initialSessionId,
+    initialSessions,
+    onMessagesChange,
+    onSessionCreate,
+    onSessionSwitch,
+    onBeforeSend,
+    onAfterSend,
+    onBeforeImageGen,
+    onAfterImageGen
+  }, ref) => {
+    const [prompt, setPrompt] = useState49("");
+    const [isLoading, setIsLoading] = useState49(false);
+    const [statusText, setStatusText] = useState49("");
+    const [messages, setMessages] = useState49(
+      initialMessages ?? []
+    );
+    const [sessions, setSessions] = useState49(
+      initialSessions ?? []
+    );
+    const [currentSessionId, setCurrentSessionId] = useState49(
+      initialSessionId ?? genId
+    );
+    const [historyOpen, setHistoryOpen] = useState49(false);
+    const [historySearch, setHistorySearch] = useState49("");
+    const [error, setError] = useState49(null);
+    const [frameRef, setFrameRef] = useState49(null);
+    const [mentionMenuOpen, setMentionMenuOpen] = useState49(false);
+    const [availableFrames, setAvailableFrames] = useState49([]);
+    const [attachedFiles, setAttachedFiles] = useState49([]);
+    const [webSearchEnabled, setWebSearchEnabled] = useState49(false);
+    const [isRecording, setIsRecording] = useState49(false);
+    const [isTranscribing, setIsTranscribing] = useState49(false);
+    const [copiedMsgId, setCopiedMsgId] = useState49(null);
+    const historyRef = useRef49(null);
+    const abortControllerRef = useRef49(null);
+    const mentionMenuRef = useRef49(null);
+    const fileInputRef = useRef49(null);
+    const mediaRecorderRef = useRef49(null);
+    const audioChunksRef = useRef49([]);
+    const prevPromptRef = useRef49("");
+    const voiceUsedRef = useRef49(false);
+    useEffect55(() => {
+      const handler = (e) => {
+        if (historyRef.current && !historyRef.current.contains(e.target)) {
+          setHistoryOpen(false);
+        }
+        if (mentionMenuRef.current && !mentionMenuRef.current.contains(e.target)) {
+          setMentionMenuOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, []);
+    useEffect55(() => {
+      if (!isOpen) {
+        abortControllerRef.current?.abort();
+      }
+    }, [isOpen]);
+    const currentTitle = messages.length > 0 ? messages[0].content.slice(0, 30) + (messages[0].content.length > 30 ? "\u2026" : "") : "New chat";
+    const saveCurrentSession = useCallback24(() => {
+      if (messages.length === 0) {
+        return;
+      }
+      const title = messages[0].content.slice(0, 40) + (messages[0].content.length > 40 ? "\u2026" : "");
+      setSessions((prev) => {
+        const existing = prev.findIndex((s) => s.id === currentSessionId);
+        const updated = { id: currentSessionId, title, messages };
+        if (existing >= 0) {
+          const next = [...prev];
+          next[existing] = updated;
+          return next;
+        }
+        return [updated, ...prev];
+      });
+    }, [messages, currentSessionId]);
+    const handleNewChat = useCallback24(() => {
+      saveCurrentSession();
+      const newSessionId = genId();
+      setMessages([]);
+      setCurrentSessionId(newSessionId);
+      setHistoryOpen(false);
+      setError(null);
+      setPrompt("");
+      setFrameRef(null);
+      setAttachedFiles([]);
+      setStatusText("");
+      if (onSessionCreate) {
+        onSessionCreate({ id: newSessionId, title: "New chat" });
+      }
+    }, [saveCurrentSession, onSessionCreate]);
+    const handleSwitchSession = useCallback24(
+      (session) => {
+        saveCurrentSession();
+        setMessages(session.messages);
+        setCurrentSessionId(session.id);
+        setHistoryOpen(false);
+        setError(null);
+        if (onSessionSwitch) {
+          onSessionSwitch(session.id);
+        }
+      },
+      [saveCurrentSession, onSessionSwitch]
+    );
+    const handlePromptChange = useCallback24(
+      (value) => {
+        const prevValue = prevPromptRef.current;
+        setPrompt(value);
+        prevPromptRef.current = value;
+        if (excalidrawAPI && value.length > prevValue.length && value.endsWith("@")) {
+          setAvailableFrames(listFrames(excalidrawAPI));
+          setMentionMenuOpen(true);
+        }
+      },
+      [excalidrawAPI]
+    );
+    const handlePickFrame = useCallback24(
+      async (frame) => {
+        if (!excalidrawAPI) {
+          return;
+        }
+        setMentionMenuOpen(false);
+        setPrompt((prev) => {
+          const atIndex2 = prev.lastIndexOf("@");
+          return atIndex2 >= 0 ? prev.slice(0, atIndex2) : prev;
+        });
+        const atIndex = prevPromptRef.current.lastIndexOf("@");
+        prevPromptRef.current = atIndex >= 0 ? prevPromptRef.current.slice(0, atIndex) : prevPromptRef.current;
+        const ctx = getFrameContext(excalidrawAPI, frame.id);
+        if (!ctx) {
+          return;
+        }
+        const screenshot = await captureFrameScreenshot(excalidrawAPI, frame.id);
+        setFrameRef({
+          frameId: frame.id,
+          label: ctx.frameInfo.name,
+          serialized: ctx.serialized,
+          screenshot: screenshot ?? void 0
+        });
+      },
+      [excalidrawAPI]
+    );
+    const handleRemoveRef = useCallback24(() => {
+      setFrameRef(null);
+    }, []);
+    const handleFileUpload = useCallback24(
+      (e) => {
+        const files = e.target.files;
+        if (!files) {
+          return;
+        }
+        const remaining = MAX_ATTACHED_FILES - attachedFiles.length;
+        if (remaining <= 0) {
+          return;
+        }
+        const toAdd = Array.from(files).slice(0, remaining);
+        for (const file2 of toAdd) {
+          if (file2.size > MAX_FILE_SIZE_BYTES) {
+            setError(`"${file2.name}" is too large (max 10 MB).`);
+            continue;
+          }
+          const id = genId();
+          const isImage = file2.type.startsWith("image/");
+          const reader = new FileReader();
+          if (isImage) {
+            reader.onload = () => {
+              setAttachedFiles(
+                (prev) => prev.length < MAX_ATTACHED_FILES ? [
+                  ...prev,
+                  {
+                    id,
+                    file: file2,
+                    name: file2.name,
+                    type: "image",
+                    dataUrl: reader.result
+                  }
+                ] : prev
+              );
+            };
+            reader.readAsDataURL(file2);
+          } else {
+            reader.onload = () => {
+              setAttachedFiles(
+                (prev) => prev.length < MAX_ATTACHED_FILES ? [
+                  ...prev,
+                  {
+                    id,
+                    file: file2,
+                    name: file2.name,
+                    type: "text",
+                    textContent: reader.result
+                  }
+                ] : prev
+              );
+            };
+            reader.readAsText(file2);
+          }
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      },
+      [attachedFiles.length]
+    );
+    const handleRemoveFile = useCallback24((fileId) => {
+      setAttachedFiles((prev) => prev.filter((f) => f.id !== fileId));
+    }, []);
+    const toggleWebSearch = useCallback24(() => {
+      setWebSearchEnabled((prev) => !prev);
+    }, []);
+    const handleVoiceInput = useCallback24(async () => {
+      if (isRecording) {
+        mediaRecorderRef.current?.stop();
+        setIsRecording(false);
+        voiceUsedRef.current = true;
+        return;
+      }
+      let stream = null;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mimeType = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+        const mediaRecorder = new MediaRecorder(stream, { mimeType });
+        mediaRecorderRef.current = mediaRecorder;
+        audioChunksRef.current = [];
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) {
+            audioChunksRef.current.push(e.data);
+          }
+        };
+        mediaRecorder.onstop = async () => {
+          stream?.getTracks().forEach((t2) => t2.stop());
+          const audioBlob = new Blob(audioChunksRef.current, {
+            type: mediaRecorder.mimeType
+          });
+          const normalizedKey = resolveOpenRouterApiKey(apiKey);
+          if (!normalizedKey) {
+            setError("No API key for voice transcription.");
+            return;
+          }
+          setIsTranscribing(true);
+          setStatusText("Transcribing\u2026");
+          try {
+            const wavBase64 = await blobToWavBase64(audioBlob);
+            const transcription = await transcribeAudio(
+              wavBase64,
+              "wav",
+              normalizedKey
+            );
+            const updated = (prevPromptRef.current ? `${prevPromptRef.current} ` : "") + transcription;
+            prevPromptRef.current = updated;
+            setPrompt(updated);
+          } catch (err) {
+            setError(err instanceof Error ? err.message : "Transcription failed");
+          } finally {
+            setIsTranscribing(false);
+            setStatusText("");
+          }
+        };
+        mediaRecorder.start();
+        setIsRecording(true);
+      } catch {
+        stream?.getTracks().forEach((t2) => t2.stop());
+        setError("Could not access microphone. Check browser permissions.");
+      }
+    }, [isRecording, apiKey]);
+    const handleCopy = useCallback24((msgId, content) => {
+      navigator.clipboard.writeText(content).then(
+        () => {
+          setCopiedMsgId(msgId);
+          setTimeout(() => setCopiedMsgId(null), 2e3);
+        },
+        () => {
+          setError("Copy failed \u2014 please grant clipboard permission.");
+        }
+      );
+    }, []);
+    const handleSend = useCallback24(async (textOverride) => {
+      const text = (textOverride ?? prompt).trim();
+      const normalizedKey = resolveOpenRouterApiKey(apiKey);
+      if (!text || isLoading) {
+        return;
+      }
+      if (!normalizedKey) {
+        setError(
+          "No OpenRouter API key. Set VITE_APP_OPENROUTER_API_KEY in .env or pass the key via the `apiKey` prop."
+        );
+        return;
+      }
+      const hadVoice = voiceUsedRef.current;
+      voiceUsedRef.current = false;
+      if (onBeforeSend) {
+        const { allowed, error: creditError } = await onBeforeSend({
+          hasVoice: hadVoice
+        });
+        if (!allowed) {
+          setError(creditError || "Insufficient credits");
+          return;
+        }
+      }
+      const capturedFiles = [...attachedFiles];
+      const capturedWebSearch = webSearchEnabled;
+      const capturedFrameRef = frameRef;
+      const userMsg = {
+        id: genId(),
+        role: "user",
+        content: text,
+        timestamp: /* @__PURE__ */ new Date(),
+        attachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+          name: f.name,
+          type: f.type,
+          dataUrl: f.dataUrl
+        })) : void 0
+      };
+      const nextMessages = [...messages, userMsg];
+      setMessages(nextMessages);
+      setPrompt("");
+      prevPromptRef.current = "";
+      setAttachedFiles([]);
+      setFrameRef(null);
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      setIsLoading(true);
+      setError(null);
+      setStatusText("Thinking\u2026");
+      if (!excalidrawAPI) {
+        try {
+          const reply = await callPlainChatAPI(
+            nextMessages,
+            normalizedKey,
+            controller.signal,
+            {
+              webSearchEnabled: capturedWebSearch,
+              attachments: capturedFiles
+            }
+          );
+          const assistantMsg = {
+            id: genId(),
+            role: "assistant",
+            content: reply,
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          const updatedMessages = [...nextMessages, assistantMsg];
+          setMessages(updatedMessages);
+          if (onAfterSend) {
+            onAfterSend({ hasVoice: hadVoice });
+          }
+          if (onMessagesChange) {
+            onMessagesChange(updatedMessages, currentSessionId);
+          }
+        } catch (err) {
+          if (err instanceof Error && err.name !== "AbortError") {
+            setError(err.message);
+          }
+        } finally {
+          abortControllerRef.current = null;
+          setIsLoading(false);
+          setStatusText("");
+        }
+        return;
+      }
+      try {
+        const result = await runAgentLoop({
+          userMessages: nextMessages.map((m) => ({
+            role: m.role,
+            content: m.content
+          })),
+          elementContext: capturedFrameRef?.serialized,
+          frameScreenshot: capturedFrameRef?.screenshot,
+          fileAttachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+            name: f.name,
+            type: f.type,
+            dataUrl: f.dataUrl,
+            textContent: f.textContent
+          })) : void 0,
+          webSearchEnabled: capturedWebSearch,
+          apiKey: normalizedKey,
+          toolCtx: {
+            excalidrawAPI,
+            geminiApiKey: geminiApiKey || "",
+            signal: controller.signal
+          },
+          onUpdate: (update) => {
+            if (update.type !== "final") {
+              setStatusText(update.message);
+            }
+          },
+          signal: controller.signal,
+          onBeforeImageGen,
+          onAfterImageGen
+        });
+        const assistantMsgAgent = {
+          id: genId(),
+          role: "assistant",
+          content: result.reply,
+          timestamp: /* @__PURE__ */ new Date(),
+          toolActions: result.toolActions.length > 0 ? result.toolActions : void 0
+        };
+        const updatedMessagesAgent = [...nextMessages, assistantMsgAgent];
+        setMessages(updatedMessagesAgent);
+        if (onAfterSend) {
+          onAfterSend({ hasVoice: hadVoice });
+        }
+        if (onMessagesChange) {
+          onMessagesChange(updatedMessagesAgent, currentSessionId);
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name !== "AbortError") {
+          setError(err.message);
+        }
+      } finally {
+        abortControllerRef.current = null;
+        setIsLoading(false);
+        setStatusText("");
+      }
+    }, [
+      prompt,
+      isLoading,
+      messages,
+      apiKey,
+      excalidrawAPI,
+      geminiApiKey,
+      frameRef,
+      attachedFiles,
+      webSearchEnabled,
+      currentSessionId,
+      onBeforeSend,
+      onAfterSend,
+      onMessagesChange,
+      onBeforeImageGen,
+      onAfterImageGen
+    ]);
+    useImperativeHandle4(
+      ref,
+      () => ({
+        setMessages,
+        send: (text) => handleSend(text)
+      }),
+      [setMessages, handleSend]
+    );
+    const handleStop = useCallback24(() => {
+      abortControllerRef.current?.abort();
+    }, []);
+    const handleChip = useCallback24((chip) => {
+      setPrompt(chip);
+    }, []);
+    const filteredSessions = sessions.filter(
+      (s) => historySearch ? s.title.toLowerCase().includes(historySearch.toLowerCase()) : true
+    );
+    if (!isOpen) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx184(
+      "div",
+      {
+        className: "acp",
+        onPointerDown: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs100("div", { className: "acp-panel", children: [
+          /* @__PURE__ */ jsxs100("div", { className: "acp-header", ref: historyRef, children: [
+            /* @__PURE__ */ jsxs100(
+              "button",
+              {
+                className: "acp-title-btn",
+                onClick: () => setHistoryOpen((v) => !v),
+                title: "Chat history",
+                children: [
+                  /* @__PURE__ */ jsx184("span", { children: currentTitle }),
+                  /* @__PURE__ */ jsx184(ChevronDown2, { size: 13 })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs100("div", { className: "acp-header-right", children: [
+              /* @__PURE__ */ jsx184(
+                "button",
+                {
+                  className: "acp-icon-btn",
+                  onClick: handleNewChat,
+                  title: "New chat",
+                  children: /* @__PURE__ */ jsx184(Plus, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ jsx184("button", { className: "acp-icon-btn", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsx184(X2, { size: 15 }) })
+            ] }),
+            historyOpen && /* @__PURE__ */ jsxs100("div", { className: "acp-history-dropdown", children: [
+              /* @__PURE__ */ jsxs100("div", { className: "acp-history-search", children: [
+                /* @__PURE__ */ jsx184(Search, { size: 13 }),
+                /* @__PURE__ */ jsx184(
+                  "input",
+                  {
+                    type: "search",
+                    placeholder: "Search chats\u2026",
+                    value: historySearch,
+                    onChange: (e) => setHistorySearch(e.target.value),
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs100("div", { className: "acp-history-list", children: [
+                /* @__PURE__ */ jsxs100(
+                  "button",
+                  {
+                    className: "acp-history-item acp-history-item--new",
+                    onClick: handleNewChat,
+                    children: [
+                      /* @__PURE__ */ jsx184(Plus, { size: 13 }),
+                      /* @__PURE__ */ jsx184("span", { children: "New chat" })
+                    ]
+                  }
+                ),
+                filteredSessions.map((session) => /* @__PURE__ */ jsxs100(
+                  "button",
+                  {
+                    className: "acp-history-item",
+                    onClick: () => handleSwitchSession(session),
+                    children: [
+                      /* @__PURE__ */ jsx184(MessageSquare, { size: 13 }),
+                      /* @__PURE__ */ jsx184("span", { children: session.title })
+                    ]
+                  },
+                  session.id
+                )),
+                filteredSessions.length === 0 && historySearch && /* @__PURE__ */ jsx184("div", { className: "acp-history-empty", children: "No matching chats" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx184("div", { className: "acp-messages-wrap", children: messages.length === 0 && !isLoading ? /* @__PURE__ */ jsxs100("div", { className: "acp-empty", children: [
+            /* @__PURE__ */ jsx184("div", { className: "acp-empty-icon", children: /* @__PURE__ */ jsx184(MessageSquare, { size: 22 }) }),
+            /* @__PURE__ */ jsxs100("div", { children: [
+              /* @__PURE__ */ jsx184("div", { className: "acp-empty-title", children: "AI Ad Designer" }),
+              /* @__PURE__ */ jsx184("div", { className: "acp-empty-sub", children: "Describe an ad and I'll create it on the canvas. Type @ to reference frames." })
+            ] }),
+            /* @__PURE__ */ jsx184("div", { className: "acp-chips", children: SUGGESTIONS.map((chip) => /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-chip",
+                onClick: () => handleChip(chip),
+                children: chip
+              },
+              chip
+            )) })
+          ] }) : /* @__PURE__ */ jsxs100(ChatContainerRoot, { className: "acp-chat-root", children: [
+            /* @__PURE__ */ jsxs100(ChatContainerContent, { className: "acp-chat-content", children: [
+              messages.map((msg, index) => {
+                const isAssistant = msg.role === "assistant";
+                const isLast = index === messages.length - 1;
+                return /* @__PURE__ */ jsx184(
+                  Message,
+                  {
+                    className: `acp-msg ${isAssistant ? "acp-msg--assistant" : "acp-msg--user"}`,
+                    children: isAssistant ? /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
+                      msg.toolActions && msg.toolActions.length > 0 && /* @__PURE__ */ jsx184(ToolActionsDisplay, { actions: msg.toolActions }),
+                      /* @__PURE__ */ jsx184(
+                        MessageContent,
+                        {
+                          markdown: true,
+                          className: "acp-content-assistant",
+                          children: msg.content
+                        }
+                      ),
+                      /* @__PURE__ */ jsx184(
+                        MessageActions,
+                        {
+                          className: `acp-msg-actions${isLast ? " acp-msg-actions--visible" : ""}`,
+                          children: /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Copy", delayDuration: 100, children: /* @__PURE__ */ jsx184(
+                            "button",
+                            {
+                              className: "acp-action-btn",
+                              onClick: () => handleCopy(msg.id, msg.content),
+                              children: copiedMsgId === msg.id ? /* @__PURE__ */ jsx184(Check, { size: 14 }) : /* @__PURE__ */ jsx184(Copy, { size: 14 })
+                            }
+                          ) })
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
+                      msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx184("div", { className: "acp-msg-attachments", children: msg.attachments.map(
+                        (att, i) => att.type === "image" && att.dataUrl ? /* @__PURE__ */ jsx184(
+                          "img",
+                          {
+                            src: att.dataUrl,
+                            alt: att.name,
+                            className: "acp-msg-att-thumb",
+                            title: att.name
+                          },
+                          i
+                        ) : /* @__PURE__ */ jsxs100("span", { className: "acp-msg-att-pill", children: [
+                          /* @__PURE__ */ jsx184(Paperclip, { size: 11 }),
+                          att.name
+                        ] }, i)
+                      ) }),
+                      /* @__PURE__ */ jsx184(MessageContent, { className: "acp-content-user", children: msg.content }),
+                      /* @__PURE__ */ jsx184(MessageActions, { className: "acp-msg-actions", children: /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Copy", delayDuration: 100, children: /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-action-btn",
+                          onClick: () => handleCopy(msg.id, msg.content),
+                          children: copiedMsgId === msg.id ? /* @__PURE__ */ jsx184(Check, { size: 14 }) : /* @__PURE__ */ jsx184(Copy, { size: 14 })
+                        }
+                      ) }) })
+                    ] })
+                  },
+                  msg.id
+                );
+              }),
+              isLoading && /* @__PURE__ */ jsx184(Message, { className: "acp-msg acp-msg--assistant", children: /* @__PURE__ */ jsx184("div", { className: "acp-msg-inner", children: /* @__PURE__ */ jsxs100("div", { className: "acp-status-indicator", children: [
+                /* @__PURE__ */ jsxs100("div", { className: "acp-loading-dots", children: [
+                  /* @__PURE__ */ jsx184("span", {}),
+                  /* @__PURE__ */ jsx184("span", {}),
+                  /* @__PURE__ */ jsx184("span", {})
+                ] }),
+                statusText && /* @__PURE__ */ jsx184("span", { className: "acp-status-text", children: statusText })
+              ] }) }) })
+            ] }),
+            /* @__PURE__ */ jsx184("div", { className: "acp-scroll-anchor", children: /* @__PURE__ */ jsx184(ScrollButton, { className: "acp-scroll-btn" }) })
+          ] }) }),
+          error && /* @__PURE__ */ jsx184("div", { className: "acp-error", children: error }),
+          frameRef && /* @__PURE__ */ jsx184("div", { className: "acp-ref-area", children: /* @__PURE__ */ jsxs100("div", { className: "acp-ref-pill", children: [
+            /* @__PURE__ */ jsx184(AtSign, { size: 12 }),
+            /* @__PURE__ */ jsx184("span", { children: frameRef.label }),
+            /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-ref-remove",
+                onClick: handleRemoveRef,
+                title: "Remove reference",
+                children: /* @__PURE__ */ jsx184(X2, { size: 10 })
+              }
+            )
+          ] }) }),
+          attachedFiles.length > 0 && /* @__PURE__ */ jsx184("div", { className: "acp-attachments-area", children: attachedFiles.map((f) => /* @__PURE__ */ jsxs100("div", { className: "acp-attachment-pill", children: [
+            f.type === "image" && f.dataUrl ? /* @__PURE__ */ jsx184(
+              "img",
+              {
+                src: f.dataUrl,
+                alt: f.name,
+                className: "acp-attachment-thumb"
+              }
+            ) : /* @__PURE__ */ jsx184(Paperclip, { size: 12 }),
+            /* @__PURE__ */ jsx184("span", { children: f.name }),
+            /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-attachment-remove",
+                onClick: () => handleRemoveFile(f.id),
+                title: "Remove file",
+                children: /* @__PURE__ */ jsx184(X2, { size: 10 })
+              }
+            )
+          ] }, f.id)) }),
+          /* @__PURE__ */ jsx184("div", { className: "acp-input-area", children: /* @__PURE__ */ jsxs100("div", { className: "acp-input-wrapper", ref: mentionMenuRef, children: [
+            mentionMenuOpen && /* @__PURE__ */ jsx184("div", { className: "acp-mention-menu", children: availableFrames.length > 0 ? availableFrames.map((f) => /* @__PURE__ */ jsxs100(
+              "button",
+              {
+                className: "acp-mention-item",
+                onClick: () => handlePickFrame(f),
+                children: [
+                  /* @__PURE__ */ jsx184(AtSign, { size: 14 }),
+                  /* @__PURE__ */ jsxs100("span", { children: [
+                    f.name,
+                    " ",
+                    /* @__PURE__ */ jsxs100("span", { className: "acp-mention-dim", children: [
+                      "(",
+                      f.width,
+                      "x",
+                      f.height,
+                      ", ",
+                      f.childCount,
+                      " items)"
+                    ] })
+                  ] })
+                ]
+              },
+              f.id
+            )) : /* @__PURE__ */ jsx184("div", { className: "acp-mention-empty", children: "No frames on the canvas. Create a frame first, then type @ to reference it." }) }),
+            /* @__PURE__ */ jsx184(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept: "image/*,.txt,.json,.csv,.md,.html,.css,.js,.ts,.tsx,.jsx,.py,.xml",
+                onChange: handleFileUpload,
+                style: { display: "none" }
+              }
+            ),
+            /* @__PURE__ */ jsxs100(
+              PromptInput,
+              {
+                isLoading,
+                value: prompt,
+                onValueChange: handlePromptChange,
+                onSubmit: () => handleSend(),
+                className: "acp-prompt-input",
+                children: [
+                  /* @__PURE__ */ jsx184(
+                    PromptInputTextarea,
+                    {
+                      placeholder: excalidrawAPI ? "Describe an ad to create\u2026 (@ for frames)" : "Ask anything",
+                      className: "acp-textarea"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs100(PromptInputActions, { className: "acp-actions-bar", children: [
+                    /* @__PURE__ */ jsxs100("div", { className: "acp-actions-left", children: [
+                      /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "Attach files (max 3)", children: /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-pill-btn acp-pill-btn--icon",
+                          onClick: () => fileInputRef.current?.click(),
+                          disabled: attachedFiles.length >= MAX_ATTACHED_FILES,
+                          children: /* @__PURE__ */ jsx184(Paperclip, { size: 16 })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx184(
+                        PromptInputAction,
+                        {
+                          tooltip: webSearchEnabled ? "Web search enabled" : "Enable web search",
+                          children: /* @__PURE__ */ jsxs100(
+                            "button",
+                            {
+                              className: `acp-pill-btn${webSearchEnabled ? " acp-pill-btn--active" : ""}`,
+                              onClick: toggleWebSearch,
+                              children: [
+                                /* @__PURE__ */ jsx184(Globe, { size: 15 }),
+                                /* @__PURE__ */ jsx184("span", { children: "Search" })
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs100("div", { className: "acp-actions-right", children: [
+                      /* @__PURE__ */ jsx184(
+                        PromptInputAction,
+                        {
+                          tooltip: isTranscribing ? "Transcribing\u2026" : isRecording ? "Stop recording" : "Voice input",
+                          children: /* @__PURE__ */ jsx184(
+                            "button",
+                            {
+                              className: `acp-pill-btn acp-pill-btn--icon${isRecording ? " acp-pill-btn--recording" : ""}${isTranscribing ? " acp-pill-btn--transcribing" : ""}`,
+                              onClick: handleVoiceInput,
+                              disabled: isTranscribing,
+                              children: isTranscribing ? /* @__PURE__ */ jsx184(
+                                "svg",
+                                {
+                                  width: "16",
+                                  height: "16",
+                                  viewBox: "0 0 24 24",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  className: "acp-mic-spinner",
+                                  children: /* @__PURE__ */ jsx184("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                                }
+                              ) : isRecording ? /* @__PURE__ */ jsx184(MicOff, { size: 16 }) : /* @__PURE__ */ jsx184(Mic, { size: 16 })
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-send-btn",
+                          onClick: isLoading ? handleStop : () => handleSend(),
+                          disabled: !isLoading && !prompt.trim(),
+                          title: isLoading ? "Stop" : "Send",
+                          children: isLoading ? /* @__PURE__ */ jsx184("span", { className: "acp-stop-square" }) : /* @__PURE__ */ jsx184(ArrowUp3, { size: 16 })
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }) })
+        ] })
+      }
+    );
+  }
+);
+AIChatPanel.displayName = "AIChatPanel";
+function ToolActionsDisplay({ actions: actions2 }) {
+  const [expanded, setExpanded] = useState49(false);
+  return /* @__PURE__ */ jsxs100("div", { className: "acp-tool-actions", children: [
+    /* @__PURE__ */ jsxs100(
+      "button",
+      {
+        className: "acp-tool-actions-toggle",
+        onClick: () => setExpanded((v) => !v),
+        children: [
+          /* @__PURE__ */ jsx184(Wrench, { size: 13 }),
+          /* @__PURE__ */ jsxs100("span", { children: [
+            actions2.length,
+            " action",
+            actions2.length !== 1 ? "s" : "",
+            " performed"
+          ] }),
+          /* @__PURE__ */ jsx184(
+            ChevronRight,
+            {
+              size: 12,
+              className: `acp-tool-chevron ${expanded ? "acp-tool-chevron--open" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx184("div", { className: "acp-tool-actions-list", children: actions2.map((action, i) => /* @__PURE__ */ jsxs100(
+      "div",
+      {
+        className: `acp-tool-action-item ${action.result.success ? "acp-tool-action-item--ok" : "acp-tool-action-item--err"}`,
+        children: [
+          /* @__PURE__ */ jsx184("span", { className: "acp-tool-action-dot" }),
+          /* @__PURE__ */ jsx184("span", { children: action.result.statusMessage })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+async function callPlainChatAPI(messages, apiKey, signal, opts) {
+  const model = opts?.webSearchEnabled ? "openai/gpt-4.1-mini:online" : "openai/gpt-4.1-mini";
+  const apiMessages = messages.map((m, i) => {
+    const isLast = i === messages.length - 1;
+    if (isLast && m.role === "user" && opts?.attachments?.length) {
+      const content2 = [];
+      for (const att of opts.attachments) {
+        if (att.type === "image" && att.dataUrl) {
+          content2.push({
+            type: "image_url",
+            image_url: { url: att.dataUrl }
+          });
+        }
+      }
+      let text = m.content;
+      const textFiles = opts.attachments.filter((a) => a.type === "text");
+      if (textFiles.length > 0) {
+        text += `
+
+${textFiles.map((f) => `[File: ${f.name}]
+${f.textContent}`).join("\n\n")}`;
+      }
+      content2.push({ type: "text", text });
+      return { role: m.role, content: content2 };
+    }
+    return { role: m.role, content: m.content };
+  });
+  const body = { model, messages: apiMessages };
+  if (opts?.webSearchEnabled) {
+    body.plugins = [{ id: "web", max_results: 5 }];
+  }
+  const response = await fetch(
+    "https://openrouter.ai/api/v1/chat/completions",
+    {
+      method: "POST",
+      signal,
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(body)
+    }
+  );
+  if (!response.ok) {
+    let message = `OpenRouter 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 content = data?.choices?.[0]?.message?.content;
+  if (!content) {
+    throw new Error("No response returned by the API.");
+  }
+  return content;
+}
+
+// index.tsx
+import { jsx as jsx185 } from "react/jsx-runtime";
 polyfill_default();
 var ExcalidrawBase = (props) => {
   const {
@@ -46555,7 +49286,10 @@ var ExcalidrawBase = (props) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
-    renderScrollbars
+    geminiApiKey,
+    renderScrollbars,
+    onBeforeImageGen,
+    onAfterImageGen
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -46574,7 +49308,7 @@ var ExcalidrawBase = (props) => {
   if (UIOptions.canvasActions.toggleTheme === null && typeof theme === "undefined") {
     UIOptions.canvasActions.toggleTheme = true;
   }
-  useEffect54(() => {
+  useEffect56(() => {
     const importPolyfill = async () => {
       await import("canvas-roundrect-polyfill");
     };
@@ -46591,7 +49325,7 @@ var ExcalidrawBase = (props) => {
       document.removeEventListener("touchmove", handleTouchMove);
     };
   }, []);
-  return /* @__PURE__ */ jsx177(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx177(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsx185(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx185(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx185(
     App_default,
     {
       onChange,
@@ -46627,7 +49361,10 @@ var ExcalidrawBase = (props) => {
       renderEmbeddable,
       aiEnabled: aiEnabled !== false,
       showDeprecatedFonts,
+      geminiApiKey,
       renderScrollbars,
+      onBeforeImageGen,
+      onAfterImageGen,
       children
     }
   ) }) });
@@ -46670,9 +49407,10 @@ var areEqual5 = (prevProps, nextProps) => {
   });
   return isUIOptionsSame && isShallowEqual10(prev, next);
 };
-var Excalidraw = React54.memo(ExcalidrawBase, areEqual5);
+var Excalidraw = React58.memo(ExcalidrawBase, areEqual5);
 Excalidraw.displayName = "Excalidraw";
 export {
+  AIChatPanel,
   Button,
   CaptureUpdateAction39 as CaptureUpdateAction,
   CommandPalette,
@@ -46740,7 +49478,7 @@ export {
   useHandleLibrary,
   useI18n,
   useStylesPanelMode,
-  viewportCoordsToSceneCoords4 as viewportCoordsToSceneCoords,
+  viewportCoordsToSceneCoords5 as viewportCoordsToSceneCoords,
   zoomToFitBounds
 };
 //# sourceMappingURL=index.js.map