@orangecatai/adgen-canvas 0.0.2 → 0.0.3

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-UV7ECD7A.js";
+} from "./chunk-YOQUQ6O5.js";
 import {
   define_import_meta_env_default
-} from "./chunk-X2WWSILD.js";
+} from "./chunk-EP27W34X.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
@@ -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,
@@ -9626,7 +9626,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-IZS5VEYX.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -10038,7 +10038,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 +10051,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;
       }),
@@ -21838,8 +21838,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 +21856,7 @@ var snapNewElement = (newElement5, app, event, origin, dragOffset, elementsMap)
   const nearestSnapsX = [];
   const nearestSnapsY = [];
   getPointSnaps(
-    [newElement5],
+    [newElement6],
     selectionSnapPoints,
     app,
     event,
@@ -21872,12 +21872,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,
@@ -36860,7 +36860,7 @@ import {
 var _renderNewElementScene = ({
   canvas,
   rc,
-  newElement: newElement5,
+  newElement: newElement6,
   elementsMap,
   allElementsMap,
   scale,
@@ -36880,19 +36880,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,
@@ -38157,13 +38157,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) {
@@ -39705,8 +39705,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
@@ -41850,8 +41850,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 +41859,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 +41881,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 +41891,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 +41901,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()
           )
@@ -44926,20 +44926,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 +44950,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 +44963,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 +44976,7 @@ var App = class _App extends React52.Component {
             };
           }
           this.setState({
-            newElement: newElement5,
+            newElement: newElement6,
             ...LinearElementEditor11.handlePointDragging(
               event,
               this,
@@ -45100,7 +45100,7 @@ var App = class _App extends React52.Component {
         pointerDownState.eventListeners.onMove.flush();
       }
       const {
-        newElement: newElement5,
+        newElement: newElement6,
         resizingElement,
         croppingElementId,
         multiElement,
@@ -45264,28 +45264,28 @@ var App = class _App extends React52.Component {
         pointerDownState,
         childEvent
       );
-      if (newElement5?.type === "freedraw") {
+      if (newElement6?.type === "freedraw") {
         const pointerCoords = viewportCoordsToSceneCoords3(
           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(
@@ -45296,16 +45296,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 +45315,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 +45347,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 +45365,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 +45393,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
@@ -45741,16 +45741,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(
@@ -46518,7 +46518,1934 @@ var DiagramToCodePlugin = (props) => {
 // index.tsx
 import { isElementLink as isElementLink3 } from "@orangecatai/element";
 import { setCustomTextMetricsProvider } from "@orangecatai/element";
+
+// components/AIChatPanel.tsx
+import {
+  useCallback as useCallback24,
+  useEffect as useEffect55,
+  useRef as useRef49,
+  useState as useState49
+} from "react";
+import {
+  ArrowUp as ArrowUp3,
+  AtSign,
+  ChevronDown as ChevronDown2,
+  ChevronRight,
+  Copy,
+  Globe,
+  MessageSquare,
+  Mic,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Search,
+  ThumbsDown,
+  ThumbsUp,
+  Trash,
+  Wrench,
+  X as X2
+} from "lucide-react";
+
+// 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) {
+  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({
+        model: "openai/gpt-4.1-mini",
+        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 (!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,
+    apiKey,
+    toolCtx,
+    onUpdate,
+    signal
+  } = 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;
+    if (isLast && msg.role === "user" && frameScreenshot) {
+      messages.push({
+        role: "user",
+        content: [
+          {
+            type: "image_url",
+            image_url: { url: frameScreenshot }
+          },
+          {
+            type: "text",
+            text: `[Screenshot of the referenced frame is attached above]
+
+${msg.content}`
+          }
+        ]
+      });
+    } 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);
+    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)
+      });
+      const result = await executeCanvasTool(name, rawArgs, toolCtx);
+      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/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 SUGGESTIONS = [
+  "Create a pasta ad",
+  "Design a sale banner",
+  "Make a product showcase",
+  "Help me design"
+];
+var AIChatPanel = ({
+  isOpen,
+  onClose,
+  apiKey,
+  excalidrawAPI,
+  geminiApiKey
+}) => {
+  const [prompt, setPrompt] = useState49("");
+  const [isLoading, setIsLoading] = useState49(false);
+  const [statusText, setStatusText] = useState49("");
+  const [messages, setMessages] = useState49([]);
+  const [sessions, setSessions] = useState49([]);
+  const [currentSessionId, setCurrentSessionId] = useState49(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 historyRef = useRef49(null);
+  const abortControllerRef = useRef49(null);
+  const mentionMenuRef = useRef49(null);
+  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();
+    setMessages([]);
+    setCurrentSessionId(genId());
+    setHistoryOpen(false);
+    setError(null);
+    setPrompt("");
+    setFrameRef(null);
+    setStatusText("");
+  }, [saveCurrentSession]);
+  const handleSwitchSession = useCallback24(
+    (session) => {
+      saveCurrentSession();
+      setMessages(session.messages);
+      setCurrentSessionId(session.id);
+      setHistoryOpen(false);
+      setError(null);
+    },
+    [saveCurrentSession]
+  );
+  const handleAtMention = useCallback24(() => {
+    if (!excalidrawAPI) {
+      return;
+    }
+    setAvailableFrames(listFrames(excalidrawAPI));
+    setMentionMenuOpen(true);
+  }, [excalidrawAPI]);
+  const handlePickFrame = useCallback24(
+    async (frame) => {
+      if (!excalidrawAPI) {
+        return;
+      }
+      setMentionMenuOpen(false);
+      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 handleSend = useCallback24(async () => {
+    const text = prompt.trim();
+    const normalizedKey = apiKey.trim();
+    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 userMsg = {
+      id: genId(),
+      role: "user",
+      content: text,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    const nextMessages = [...messages, userMsg];
+    setMessages(nextMessages);
+    setPrompt("");
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    setIsLoading(true);
+    setError(null);
+    setStatusText("Thinking\u2026");
+    const capturedFrameRef = frameRef;
+    setFrameRef(null);
+    if (!excalidrawAPI) {
+      try {
+        const reply = await callPlainChatAPI(
+          nextMessages,
+          normalizedKey,
+          controller.signal
+        );
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: genId(),
+            role: "assistant",
+            content: reply,
+            timestamp: /* @__PURE__ */ new Date()
+          }
+        ]);
+      } 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,
+        apiKey: normalizedKey,
+        toolCtx: {
+          excalidrawAPI,
+          geminiApiKey: geminiApiKey || "",
+          signal: controller.signal
+        },
+        onUpdate: (update) => {
+          if (update.type !== "final") {
+            setStatusText(update.message);
+          }
+        },
+        signal: controller.signal
+      });
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: genId(),
+          role: "assistant",
+          content: result.reply,
+          timestamp: /* @__PURE__ */ new Date(),
+          toolActions: result.toolActions.length > 0 ? result.toolActions : void 0
+        }
+      ]);
+    } 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
+  ]);
+  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. Use @ to reference selected elements." })
+          ] }),
+          /* @__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__ */ jsxs100(
+                      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", children: /* @__PURE__ */ jsx184(Copy, { size: 14 }) }) }),
+                          /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Upvote", delayDuration: 100, children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__PURE__ */ jsx184(ThumbsUp, { size: 14 }) }) }),
+                          /* @__PURE__ */ jsx184(
+                            MessageAction,
+                            {
+                              tooltip: "Downvote",
+                              delayDuration: 100,
+                              children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__PURE__ */ jsx184(ThumbsDown, { size: 14 }) })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
+                    /* @__PURE__ */ jsx184(MessageContent, { className: "acp-content-user", children: msg.content }),
+                    /* @__PURE__ */ jsxs100(MessageActions, { className: "acp-msg-actions", children: [
+                      /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Edit", delayDuration: 100, children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__PURE__ */ jsx184(Pencil, { size: 14 }) }) }),
+                      /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Delete", delayDuration: 100, children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__PURE__ */ jsx184(Trash, { size: 14 }) }) }),
+                      /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Copy", delayDuration: 100, children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__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 })
+            }
+          )
+        ] }) }),
+        /* @__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 use @ to reference it." }) }),
+          /* @__PURE__ */ jsxs100(
+            PromptInput,
+            {
+              isLoading,
+              value: prompt,
+              onValueChange: setPrompt,
+              onSubmit: handleSend,
+              className: "acp-prompt-input",
+              children: [
+                /* @__PURE__ */ jsx184(
+                  PromptInputTextarea,
+                  {
+                    placeholder: excalidrawAPI ? "Describe an ad to create\u2026" : "Ask anything",
+                    className: "acp-textarea"
+                  }
+                ),
+                /* @__PURE__ */ jsxs100(PromptInputActions, { className: "acp-actions-bar", children: [
+                  /* @__PURE__ */ jsxs100("div", { className: "acp-actions-left", children: [
+                    excalidrawAPI && /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "Reference selection (@)", children: /* @__PURE__ */ jsx184(
+                      "button",
+                      {
+                        className: "acp-pill-btn acp-pill-btn--icon",
+                        onClick: handleAtMention,
+                        children: /* @__PURE__ */ jsx184(AtSign, { size: 16 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "Search", children: /* @__PURE__ */ jsxs100("button", { className: "acp-pill-btn", children: [
+                      /* @__PURE__ */ jsx184(Globe, { size: 15 }),
+                      /* @__PURE__ */ jsx184("span", { children: "Search" })
+                    ] }) }),
+                    /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "More", children: /* @__PURE__ */ jsx184("button", { className: "acp-pill-btn acp-pill-btn--icon", children: /* @__PURE__ */ jsx184(MoreHorizontal, { size: 16 }) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs100("div", { className: "acp-actions-right", children: [
+                    /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "Voice input", children: /* @__PURE__ */ jsx184("button", { className: "acp-pill-btn acp-pill-btn--icon", children: /* @__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 })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+};
+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) {
+  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({
+        model: "openai/gpt-4.1-mini",
+        messages: messages.map((m) => ({ role: m.role, content: m.content }))
+      })
+    }
+  );
+  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 {
@@ -46574,7 +48501,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 +48518,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,
@@ -46670,9 +48597,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,