@orangecatai/adgen-canvas 0.0.3 → 0.0.5

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-YOQUQ6O5.js";
+} from "./chunk-3FGOYDLK.js";
 import {
   define_import_meta_env_default
-} from "./chunk-EP27W34X.js";
+} from "./chunk-IRIUFXMO.js";
 import {
   en_default
 } from "./chunk-IFMURN5W.js";
@@ -158,7 +158,7 @@ import {
   isWritableElement as isWritableElement5,
   sceneCoordsToViewportCoords as sceneCoordsToViewportCoords10,
   tupleToCoors,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords4,
   wrapEvent as wrapEvent2,
   updateObject as updateObject2,
   updateActiveTool as updateActiveTool7,
@@ -197,7 +197,7 @@ import {
 import {
   getObservedAppState,
   getCommonBounds as getCommonBounds11,
-  getElementAbsoluteCoords as getElementAbsoluteCoords11,
+  getElementAbsoluteCoords as getElementAbsoluteCoords12,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
   fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
   getHoveredElementForBinding as getHoveredElementForBinding2,
@@ -7687,9 +7687,14 @@ import {
   ZOOM_STEP,
   updateActiveTool as updateActiveTool2,
   CODES as CODES2,
-  KEYS as KEYS12
+  KEYS as KEYS12,
+  viewportCoordsToSceneCoords
 } from "@orangecatai/common";
-import { getNonDeletedElements as getNonDeletedElements5 } from "@orangecatai/element";
+import {
+  getElementAbsoluteCoords,
+  getNonDeletedElements as getNonDeletedElements5,
+  getVisibleElements
+} from "@orangecatai/element";
 import { newElementWith as newElementWith3 } from "@orangecatai/element";
 import { getCommonBounds } from "@orangecatai/element";
 import { CaptureUpdateAction as CaptureUpdateAction6 } from "@orangecatai/element";
@@ -8070,6 +8075,77 @@ var zoomValueToFitBoundsOnViewport = (bounds, viewportDimensions, viewportZoomFa
   const adjustedZoomValue = smallestZoomValue * clamp(viewportZoomFactor, 0.1, 1);
   return Math.min(adjustedZoomValue, 1);
 };
+var COMFORTABLE_VIEWPORT_ZOOM_FACTOR = 0.8;
+var intersectsBounds = (a, b) => a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+var expandBounds = (bounds, margin) => [
+  bounds[0] - margin,
+  bounds[1] - margin,
+  bounds[2] + margin,
+  bounds[3] + margin
+];
+var getBoundsCenterDistance = (bounds, point) => {
+  const centerX = (bounds[0] + bounds[2]) / 2;
+  const centerY = (bounds[1] + bounds[3]) / 2;
+  return Math.hypot(centerX - point.x, centerY - point.y);
+};
+var toSceneBounds = (bounds) => [bounds[0], bounds[1], bounds[2], bounds[3]];
+var getNearestContentCluster = (elements, appState) => {
+  const nonDeletedElements = getNonDeletedElements5(elements);
+  if (!nonDeletedElements.length) {
+    return [];
+  }
+  const candidateElements = getVisibleElements(nonDeletedElements);
+  const clusterCandidates = candidateElements.length ? candidateElements : nonDeletedElements;
+  const elementsMap = new Map(
+    nonDeletedElements.map((element) => [element.id, element])
+  );
+  const viewportCenter = viewportCoordsToSceneCoords(
+    {
+      clientX: appState.offsetLeft + appState.width / 2,
+      clientY: appState.offsetTop + appState.height / 2
+    },
+    appState
+  );
+  const anchor = clusterCandidates.reduce((closest, element) => {
+    const bounds = toSceneBounds(
+      getElementAbsoluteCoords(element, elementsMap)
+    );
+    if (!closest) {
+      return { element, bounds };
+    }
+    return getBoundsCenterDistance(bounds, viewportCenter) < getBoundsCenterDistance(closest.bounds, viewportCenter) ? { element, bounds } : closest;
+  }, null);
+  if (!anchor) {
+    return [];
+  }
+  const proximityMargin = Math.max(
+    160 / appState.zoom.value,
+    0.12 * Math.min(appState.width, appState.height) / appState.zoom.value
+  );
+  const cluster = /* @__PURE__ */ new Map([
+    [anchor.element.id, anchor.element]
+  ]);
+  let clusterBounds = anchor.bounds;
+  let changed = true;
+  while (changed) {
+    changed = false;
+    const expandedBounds = expandBounds(clusterBounds, proximityMargin);
+    for (const element of clusterCandidates) {
+      if (cluster.has(element.id)) {
+        continue;
+      }
+      const elementBounds = toSceneBounds(
+        getElementAbsoluteCoords(element, elementsMap)
+      );
+      if (intersectsBounds(elementBounds, expandedBounds)) {
+        cluster.set(element.id, element);
+        clusterBounds = getCommonBounds([...cluster.values()]);
+        changed = true;
+      }
+    }
+  }
+  return [...cluster.values()];
+};
 var zoomToFitBounds = ({
   bounds,
   appState,
@@ -8207,6 +8283,50 @@ var actionZoomToFit = register({
   }),
   keyTest: (event) => event.code === CODES2.ONE && event.shiftKey && !event.altKey && !event[KEYS12.CTRL_OR_CMD]
 });
+var actionScrollBackToContent = register({
+  name: "scrollBackToContent",
+  label: "buttons.scrollBackToContent",
+  icon: zoomAreaIcon,
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    const targetElements = selectedElements.length ? selectedElements : getNearestContentCluster(elements, appState);
+    if (!targetElements.length) {
+      return false;
+    }
+    return zoomToFit({
+      targetElements,
+      appState: {
+        ...appState,
+        userToFollow: null
+      },
+      fitToViewport: true,
+      viewportZoomFactor: COMFORTABLE_VIEWPORT_ZOOM_FACTOR,
+      canvasOffsets: app.getEditorUIOffsets()
+    });
+  },
+  PanelComponent: ({ updateData }) => /* @__PURE__ */ jsx36(
+    Tooltip,
+    {
+      label: t("buttons.scrollBackToContent"),
+      style: { height: "100%" },
+      children: /* @__PURE__ */ jsx36(
+        ToolButton,
+        {
+          type: "button",
+          className: "scroll-back-to-content-button zoom-button",
+          icon: zoomAreaIcon,
+          title: t("buttons.scrollBackToContent"),
+          "aria-label": t("buttons.scrollBackToContent"),
+          onClick: () => {
+            updateData(null);
+          }
+        }
+      )
+    }
+  )
+});
 var actionToggleTheme = register({
   name: "toggleTheme",
   label: (_, appState) => {
@@ -9626,7 +9746,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-IZS5VEYX.js").then(
+        (blob2) => import("./data/image-HH4XNQRO.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -11863,13 +11983,13 @@ import {
   useState as useState10
 } from "react";
 import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS27 } from "@orangecatai/common";
-import { getElementAbsoluteCoords } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords2 } from "@orangecatai/element";
 import { hitElementBoundingBox } from "@orangecatai/element";
 import { isElementLink } from "@orangecatai/element";
 import { getEmbedLink, embeddableURLValidator } from "@orangecatai/element";
 import {
   sceneCoordsToViewportCoords,
-  viewportCoordsToSceneCoords,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2,
   wrapEvent,
   isLocalLink,
   normalizeLink
@@ -12122,7 +12242,7 @@ var Hyperlink = ({
   );
 };
 var getCoordsForPopover = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1] = getElementAbsoluteCoords2(element, elementsMap);
   const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
     { sceneX: x1 + element.width / 2, sceneY: y1 },
     appState
@@ -12154,7 +12274,7 @@ var renderTooltip = (element, appState, elementsMap) => {
   tooltipDiv.classList.add("excalidraw-tooltip--visible");
   tooltipDiv.style.maxWidth = "20rem";
   tooltipDiv.textContent = isElementLink(element.link) ? t("labels.link.goToElement") : element.link;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
   const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
     [x1, y1, x2, y2],
     element.angle,
@@ -12187,7 +12307,7 @@ var hideHyperlinkToolip = () => {
   }
 };
 var shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) => {
-  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords2(
     { clientX, clientY },
     appState
   );
@@ -12195,7 +12315,7 @@ var shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) =
   if (hitElementBoundingBox(pointFrom4(sceneX, sceneY), element, elementsMap)) {
     return false;
   }
-  const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1, x2] = getElementAbsoluteCoords2(element, elementsMap);
   if (sceneX >= x1 && sceneX <= x2 && sceneY >= y1 - SPACE_BOTTOM && sceneY <= y1) {
     return false;
   }
@@ -12444,7 +12564,7 @@ import {
 } from "@orangecatai/element";
 import {
   getCommonBoundingBox as getCommonBoundingBox2,
-  getElementAbsoluteCoords as getElementAbsoluteCoords2
+  getElementAbsoluteCoords as getElementAbsoluteCoords3
 } from "@orangecatai/element";
 import {
   getBoundTextElement as getBoundTextElement4,
@@ -12547,7 +12667,7 @@ var Panel = ({
     positionRef.current = newPositionRef;
     let bottomLeft;
     if (elements2.length === 1) {
-      const [x1, , , y2, cx, cy] = getElementAbsoluteCoords2(
+      const [x1, , , y2, cx, cy] = getElementAbsoluteCoords3(
         elements2[0],
         app.scene.getNonDeletedElementsMap()
       );
@@ -17769,14 +17889,17 @@ var ShapesSwitcher = ({
     ] })
   ] });
 };
+var ScrollBackToContentAction = ({
+  renderAction
+}) => renderAction("scrollBackToContent");
 var ZoomActions = ({
   renderAction,
   zoom
-}) => /* @__PURE__ */ jsx75(Stack_default.Col, { gap: 1, className: CLASSES5.ZOOM_ACTIONS, children: /* @__PURE__ */ jsxs42(Stack_default.Row, { align: "center", children: [
+}) => /* @__PURE__ */ jsxs42(Stack_default.Row, { align: "center", className: CLASSES5.ZOOM_ACTIONS, children: [
   renderAction("zoomOut"),
   renderAction("resetZoom"),
   renderAction("zoomIn")
-] }) });
+] });
 var UndoRedoActions = ({
   renderAction,
   className
@@ -18679,7 +18802,7 @@ import {
   vectorFromPoint,
   vectorScale
 } from "@orangecatai/math";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords3 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords4 } from "@orangecatai/element";
 var getCurvePathOps = (shape) => {
   if (!shape) {
     return [];
@@ -19011,7 +19134,7 @@ var FOCUS_POINT_SIZE = 10 / 1.5;
 // ../element/src/sizeHelpers.ts
 import {
   SHIFT_LOCKING_ANGLE,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3
 } from "@orangecatai/common";
 import {
   normalizeRadians,
@@ -20988,7 +21111,7 @@ import { TOOL_TYPE, KEYS as KEYS43 } from "@orangecatai/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
-  getElementAbsoluteCoords as getElementAbsoluteCoords5
+  getElementAbsoluteCoords as getElementAbsoluteCoords6
 } from "@orangecatai/element";
 import { isBoundToContainer as isBoundToContainer6 } from "@orangecatai/element";
 import { getMaximumGroups } from "@orangecatai/element";
@@ -21051,7 +21174,7 @@ var getElementsCorners = (elements, elementsMap, {
   let result = [];
   if (elements.length === 1) {
     const element = elements[0];
-    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords5(
+    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords6(
       element,
       elementsMap
     );
@@ -22051,11 +22174,11 @@ var Renderer = class {
 
 // components/ElementCanvasButtons.tsx
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords6 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@orangecatai/element";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var CONTAINER_PADDING = 5;
 var getContainerCoords2 = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords6(element, elementsMap);
+  const [x1, y1] = getElementAbsoluteCoords7(element, elementsMap);
   const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords3(
     { sceneX: x1 + element.width, sceneY: y1 },
     appState
@@ -22092,7 +22215,7 @@ var ElementCanvasButtons = ({
 // components/FrameToolbar.tsx
 import { useCallback as useCallback14, useEffect as useEffect29, useRef as useRef24, useState as useState27 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords4 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords8 } from "@orangecatai/element";
 import { isFrameLikeElement as isFrameLikeElement9 } from "@orangecatai/element";
 import { Fragment as Fragment11, jsx as jsx83, jsxs as jsxs45 } from "react/jsx-runtime";
 var ASPECT_RATIOS = [
@@ -22289,7 +22412,7 @@ var FrameToolbar = ({
     Math.round(element.width),
     Math.round(element.height)
   );
-  const [x1, y1] = getElementAbsoluteCoords7(
+  const [x1, y1] = getElementAbsoluteCoords8(
     element,
     app.scene.getNonDeletedElementsMap()
   );
@@ -22482,13 +22605,14 @@ import { useCallback as useCallback15, useEffect as useEffect30, useRef as useRe
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords5 } from "@orangecatai/common";
 import {
   CaptureUpdateAction as CaptureUpdateAction36,
-  getElementAbsoluteCoords as getElementAbsoluteCoords8
+  getElementAbsoluteCoords as getElementAbsoluteCoords9
 } from "@orangecatai/element";
 import { ArrowUp, ImagePlus, X } from "lucide-react";
 
 // utils/geminiApiKey.ts
 function resolveGeminiApiKey(propKey) {
-  return propKey ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_GEMINI_API_KEY ? define_import_meta_env_default.VITE_APP_GEMINI_API_KEY : "") ?? "";
+  const normalizedPropKey = propKey?.trim();
+  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_GEMINI_API_KEY ? define_import_meta_env_default.VITE_APP_GEMINI_API_KEY : "") ?? "";
 }
 
 // components/image-generation/pendingGenerations.ts
@@ -23144,14 +23268,28 @@ var RatioShapeIcon = ({ label }) => {
 };
 var ImageGeneratorPanel = ({
   element,
-  app
+  app,
+  onBeforeImageGen,
+  onAfterImageGen
 }) => {
+  const getStoredSettings = (frame) => {
+    const stored = frame.customData?.imageGenerator;
+    if (!stored) {
+      return null;
+    }
+    return {
+      model: stored.model,
+      ratio: stored.ratio,
+      resolution: stored.resolution
+    };
+  };
   const appState = app.state;
   const resolvedApiKey = resolveGeminiApiKey(app.props.geminiApiKey);
   const [prompt, setPrompt] = useState29(() => getPendingPrompt(element.id));
   const [selectedModel, setSelectedModel] = useState29(() => {
-    const s = getPendingSettings(element.id);
-    return s?.model ?? "Gemini 3.1 Flash";
+    const stored = getStoredSettings(element);
+    const pending = getPendingSettings(element.id);
+    return stored?.model ?? pending?.model ?? "Gemini 3.1 Flash";
   });
   const modelCfg = MODEL_CONFIG[selectedModel];
   const availableRatios = modelCfg.supportedRatios;
@@ -23159,15 +23297,39 @@ var ImageGeneratorPanel = ({
   const defaultRatio = availableRatios.includes("2:3") ? "2:3" : availableRatios[0];
   const defaultResolution = availableResolutions.includes("2K") ? "2K" : availableResolutions[availableResolutions.length - 1];
   const [selectedRatio, setSelectedRatio] = useState29(() => {
-    const s = getPendingSettings(element.id);
-    return s?.ratio ?? defaultRatio;
+    const stored = getStoredSettings(element);
+    const pending = getPendingSettings(element.id);
+    return stored?.ratio ?? pending?.ratio ?? defaultRatio;
   });
   const [selectedResolution, setSelectedResolution] = useState29(
     () => {
-      const s = getPendingSettings(element.id);
-      return s?.resolution ?? defaultResolution;
+      const stored = getStoredSettings(element);
+      const pending = getPendingSettings(element.id);
+      return stored?.resolution ?? pending?.resolution ?? defaultResolution;
     }
   );
+  const persistFrameSettings = useCallback15(
+    (settings) => {
+      app.scene.mutateElement(element, {
+        customData: {
+          ...element.customData ?? {},
+          imageGenerator: settings
+        }
+      });
+    },
+    [app.scene, element]
+  );
+  const fitFrameIntoView = useCallback15(
+    (frame, animate = false) => {
+      app.scrollToContent(frame, {
+        fitToViewport: true,
+        viewportZoomFactor: 0.8,
+        animate,
+        canvasOffsets: app.getEditorUIOffsets()
+      });
+    },
+    [app]
+  );
   const isInitialModelMount = useRef26(true);
   useEffect30(() => {
     if (isInitialModelMount.current) {
@@ -23196,8 +23358,13 @@ var ImageGeneratorPanel = ({
       width: dims.width,
       height: dims.height
     });
+    persistFrameSettings({
+      model: selectedModel,
+      ratio: newRatio,
+      resolution: newRes
+    });
     app.syncActionResult({ captureUpdate: CaptureUpdateAction36.IMMEDIATELY });
-  }, [selectedModel]);
+  }, [selectedModel, app, element, persistFrameSettings]);
   const [isGenerating, setIsGenerating] = useState29(
     () => hasPendingGeneration(element.id)
   );
@@ -23217,6 +23384,32 @@ var ImageGeneratorPanel = ({
     elementRef.current = element;
     appRef.current = app;
   });
+  useEffect30(() => {
+    if (!element.customData?.imageGeneratorAutoFitPending) {
+      return;
+    }
+    let frameId = 0;
+    let cancelled = false;
+    const run = () => {
+      if (cancelled) {
+        return;
+      }
+      fitFrameIntoView(element);
+      app.scene.mutateElement(element, {
+        customData: {
+          ...element.customData ?? {},
+          imageGeneratorAutoFitPending: false
+        }
+      });
+    };
+    frameId = window.requestAnimationFrame(() => {
+      frameId = window.requestAnimationFrame(run);
+    });
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [app.scene, element, fitFrameIntoView]);
   const applyRatio = useCallback15(
     (ratioLabel) => {
       setSelectedRatio(ratioLabel);
@@ -23224,7 +23417,15 @@ var ImageGeneratorPanel = ({
       const dims = getDimensions(selectedModel, ratioLabel, selectedResolution);
       appRef.current.scene.mutateElement(elementRef.current, {
         width: dims.width,
-        height: dims.height
+        height: dims.height,
+        customData: {
+          ...elementRef.current.customData ?? {},
+          imageGenerator: {
+            model: selectedModel,
+            ratio: ratioLabel,
+            resolution: selectedResolution
+          }
+        }
       });
       appRef.current.syncActionResult({
         captureUpdate: CaptureUpdateAction36.IMMEDIATELY
@@ -23239,7 +23440,15 @@ var ImageGeneratorPanel = ({
       const dims = getDimensions(selectedModel, selectedRatio, res);
       appRef.current.scene.mutateElement(elementRef.current, {
         width: dims.width,
-        height: dims.height
+        height: dims.height,
+        customData: {
+          ...elementRef.current.customData ?? {},
+          imageGenerator: {
+            model: selectedModel,
+            ratio: selectedRatio,
+            resolution: res
+          }
+        }
       });
       appRef.current.syncActionResult({
         captureUpdate: CaptureUpdateAction36.IMMEDIATELY
@@ -23301,6 +23510,20 @@ var ImageGeneratorPanel = ({
       );
       return;
     }
+    if (onBeforeImageGen) {
+      try {
+        const { allowed, error } = await onBeforeImageGen();
+        if (!allowed) {
+          setGenerateError(
+            error || "Insufficient credits for image generation"
+          );
+          return;
+        }
+      } catch {
+        setGenerateError("Credit check failed");
+        return;
+      }
+    }
     const controller = new AbortController();
     abortControllerRef.current = controller;
     startPendingGeneration(
@@ -23330,6 +23553,7 @@ var ImageGeneratorPanel = ({
         controller.signal
       );
       await app.insertGeneratedImageIntoFrame(imageDataUrl, element);
+      onAfterImageGen?.();
     } catch (err) {
       if (err instanceof Error) {
         if (err.name === "AbortError") {
@@ -23359,12 +23583,14 @@ var ImageGeneratorPanel = ({
     selectedResolution,
     referenceImage,
     app,
-    element
+    element,
+    onBeforeImageGen,
+    onAfterImageGen
   ]);
   if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled || appState.selectedElementsAreBeingDragged) {
     return null;
   }
-  const [x1, , , y2] = getElementAbsoluteCoords8(
+  const [x1, , , y2] = getElementAbsoluteCoords9(
     element,
     app.scene.getNonDeletedElementsMap()
   );
@@ -23440,6 +23666,11 @@ var ImageGeneratorPanel = ({
                       {
                         className: "igp-dropdown-item",
                         onClick: () => {
+                          persistFrameSettings({
+                            model: m,
+                            ratio: selectedRatio,
+                            resolution: selectedResolution
+                          });
                           setSelectedModel(m);
                           setModelOpen(false);
                         },
@@ -23568,7 +23799,7 @@ var ImageGeneratorPanel = ({
 // components/ImageQuickEditPanel.tsx
 import { useCallback as useCallback16, useEffect as useEffect31, useRef as useRef27, useState as useState30 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords6 } from "@orangecatai/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords9 } from "@orangecatai/element";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords10 } from "@orangecatai/element";
 import { ArrowUp as ArrowUp2 } from "lucide-react";
 import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
 var ChevronDownIcon3 = () => /* @__PURE__ */ jsx88("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx88(
@@ -23671,7 +23902,9 @@ var RatioShapeIcon2 = ({ label }) => {
 };
 var ImageQuickEditPanel = ({
   element,
-  app
+  app,
+  onBeforeImageGen,
+  onAfterImageGen
 }) => {
   const appState = app.state;
   const resolvedApiKey = resolveGeminiApiKey(app.props.geminiApiKey);
@@ -23770,6 +24003,20 @@ var ImageQuickEditPanel = ({
       );
       return;
     }
+    if (onBeforeImageGen) {
+      try {
+        const { allowed, error } = await onBeforeImageGen();
+        if (!allowed) {
+          setGenerateError(
+            error || "Insufficient credits for image generation"
+          );
+          return;
+        }
+      } catch {
+        setGenerateError("Credit check failed");
+        return;
+      }
+    }
     const controller = new AbortController();
     abortControllerRef.current = controller;
     startPendingGeneration(
@@ -23810,6 +24057,7 @@ var ImageQuickEditPanel = ({
         dims.width,
         dims.height
       );
+      onAfterImageGen?.();
     } catch (err) {
       if (err instanceof Error) {
         if (err.name === "AbortError") {
@@ -23838,13 +24086,15 @@ var ImageQuickEditPanel = ({
     selectedRatio,
     selectedResolution,
     app,
-    element
+    element,
+    onBeforeImageGen,
+    onAfterImageGen
   ]);
   if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled || appState.selectedElementsAreBeingDragged) {
     return null;
   }
   const elementsMap = app.scene.getNonDeletedElementsMap();
-  const [x1, y1, , y2] = getElementAbsoluteCoords9(element, elementsMap);
+  const [x1, y1, , y2] = getElementAbsoluteCoords10(element, elementsMap);
   const { x: triggerVpX, y: triggerVpY } = sceneCoordsToViewportCoords6(
     { sceneX: x1 + element.width / 2, sceneY: y1 },
     appState
@@ -26767,24 +27017,40 @@ var Footer = ({
             className: clsx47("layer-ui__wrapper__footer-left zen-mode-transition", {
               "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
             }),
-            children: /* @__PURE__ */ jsx104(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs60(Section, { heading: "canvasActions", children: [
+            children: /* @__PURE__ */ jsx104(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsx104(Section, { heading: "canvasActions", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 1, className: "footer-canvas-actions", children: [
               /* @__PURE__ */ jsx104(
-                ZoomActions,
+                ScrollBackToContentAction,
                 {
-                  renderAction: actionManager.renderAction,
-                  zoom: appState.zoom
+                  renderAction: actionManager.renderAction
                 }
               ),
-              !appState.viewModeEnabled && /* @__PURE__ */ jsx104(
-                UndoRedoActions,
+              /* @__PURE__ */ jsxs60(
+                Stack_default.Row,
                 {
-                  renderAction: actionManager.renderAction,
-                  className: clsx47("zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
-                  })
+                  align: "center",
+                  gap: 1,
+                  className: "footer-canvas-actions-row",
+                  children: [
+                    /* @__PURE__ */ jsx104(
+                      ZoomActions,
+                      {
+                        renderAction: actionManager.renderAction,
+                        zoom: appState.zoom
+                      }
+                    ),
+                    !appState.viewModeEnabled && /* @__PURE__ */ jsx104(
+                      UndoRedoActions,
+                      {
+                        renderAction: actionManager.renderAction,
+                        className: clsx47("zen-mode-transition", {
+                          "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
+                        })
+                      }
+                    )
+                  ]
                 }
               )
-            ] }) })
+            ] }) }) })
           }
         ),
         /* @__PURE__ */ jsx104(FooterCenterTunnel.Out, {}),
@@ -35050,7 +35316,7 @@ import {
 } from "@orangecatai/element";
 import {
   getCommonBounds as getCommonBounds9,
-  getElementAbsoluteCoords as getElementAbsoluteCoords10
+  getElementAbsoluteCoords as getElementAbsoluteCoords11
 } from "@orangecatai/element";
 import {
   getGlobalFixedPointForBindableElement as getGlobalFixedPointForBindableElement2,
@@ -35837,7 +36103,7 @@ var renderSelectionBorder = (context, appState, elementProperties) => {
   context.restore();
 };
 var renderFrameHighlight = (context, appState, frame, elementsMap) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords10(frame, elementsMap);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords11(frame, elementsMap);
   const width = x2 - x1;
   const height = y2 - y1;
   context.strokeStyle = "rgb(0,118,255)";
@@ -36098,7 +36364,7 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
   });
 };
 var renderCropHandles = (context, renderConfig, appState, croppingElement, elementsMap) => {
-  const [x1, y1, , , cx, cy] = getElementAbsoluteCoords10(
+  const [x1, y1, , , cx, cy] = getElementAbsoluteCoords11(
     croppingElement,
     elementsMap
   );
@@ -36379,7 +36645,7 @@ var _renderInteractiveScene = ({
           }
         }
         if (selectionColors.length) {
-          const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords10(
+          const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords11(
             element,
             elementsMap,
             true
@@ -36506,7 +36772,7 @@ var _renderInteractiveScene = ({
   appState.searchMatches?.matches.forEach(({ id, focus, matchedLines }) => {
     const element = elementsMap.get(id);
     if (element) {
-      const [elementX1, elementY1, , , cx, cy] = getElementAbsoluteCoords10(
+      const [elementX1, elementY1, , , cx, cy] = getElementAbsoluteCoords11(
         element,
         elementsMap,
         true
@@ -37275,11 +37541,11 @@ var App = class _App extends React52.Component {
           );
           if (frameNameDiv) {
             const box = frameNameDiv.getBoundingClientRect();
-            const boxSceneTopLeft = viewportCoordsToSceneCoords3(
+            const boxSceneTopLeft = viewportCoordsToSceneCoords4(
               { clientX: box.x, clientY: box.y },
               this.state
             );
-            const boxSceneBottomRight = viewportCoordsToSceneCoords3(
+            const boxSceneBottomRight = viewportCoordsToSceneCoords4(
               { clientX: box.right, clientY: box.bottom },
               this.state
             );
@@ -37569,7 +37835,10 @@ var App = class _App extends React52.Component {
         locked: false,
         backgroundColor: "#cce8f5",
         fillStyle: "solid",
-        customData: { type: "image-generator" }
+        customData: {
+          type: "image-generator",
+          imageGeneratorAutoFitPending: true
+        }
       });
       this.scene.insertElement(frame);
       this.setActiveTool({ type: "selection" });
@@ -37614,7 +37883,7 @@ var App = class _App extends React52.Component {
       const CLEARANCE = 25;
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const allElements = this.scene.getNonDeletedElements().filter((el) => el.id !== sourceElement.id);
-      const [sx1, sy1, sx2, sy2] = getElementAbsoluteCoords11(
+      const [sx1, sy1, sx2, sy2] = getElementAbsoluteCoords12(
         sourceElement,
         elementsMap
       );
@@ -37632,7 +37901,7 @@ var App = class _App extends React52.Component {
         const right = cRight + CLEARANCE;
         const bottom = cBottom + CLEARANCE;
         return allElements.some((el) => {
-          const [ex1, ey1, ex2, ey2] = getElementAbsoluteCoords11(el, elementsMap);
+          const [ex1, ey1, ex2, ey2] = getElementAbsoluteCoords12(el, elementsMap);
           return ex1 < right && ex2 > left && ey1 < bottom && ey2 > top;
         });
       };
@@ -38118,7 +38387,7 @@ var App = class _App extends React52.Component {
       const elementsCenterY = distance2(minY, maxY) / 2;
       const clientX = typeof opts.position === "object" ? opts.position.clientX : opts.position === "cursor" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;
       const clientY = typeof opts.position === "object" ? opts.position.clientY : opts.position === "cursor" ? this.lastViewportPosition.y : this.state.height / 2 + this.state.offsetTop;
-      const { x, y } = viewportCoordsToSceneCoords3(
+      const { x, y } = viewportCoordsToSceneCoords4(
         { clientX, clientY },
         this.state
       );
@@ -38970,7 +39239,7 @@ var App = class _App extends React52.Component {
           bindMode: "orbit"
         });
         if (this.lastPointerMoveEvent && getFeatureFlag4("COMPLEX_BINDINGS")) {
-          const scenePointer = viewportCoordsToSceneCoords3(
+          const scenePointer = viewportCoordsToSceneCoords4(
             {
               clientX: this.lastPointerMoveEvent.clientX,
               clientY: this.lastPointerMoveEvent.clientY
@@ -39371,7 +39640,7 @@ var App = class _App extends React52.Component {
         return;
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
-      let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         event,
         this.state
       );
@@ -39536,7 +39805,7 @@ var App = class _App extends React52.Component {
       if (!this.hitLinkElement || draggedDistance > DRAGGING_THRESHOLD3) {
         return;
       }
-      const lastPointerDownCoords = viewportCoordsToSceneCoords3(
+      const lastPointerDownCoords = viewportCoordsToSceneCoords4(
         this.lastPointerDownEvent,
         this.state
       );
@@ -39548,7 +39817,7 @@ var App = class _App extends React52.Component {
         pointFrom29(lastPointerDownCoords.x, lastPointerDownCoords.y),
         this.editorInterface.formFactor === "phone"
       );
-      const lastPointerUpCoords = viewportCoordsToSceneCoords3(
+      const lastPointerUpCoords = viewportCoordsToSceneCoords4(
         this.lastPointerUpEvent,
         this.state
       );
@@ -39596,7 +39865,7 @@ var App = class _App extends React52.Component {
     __publicField(this, "handleCanvasPointerMove", (event) => {
       this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
       this.lastPointerMoveEvent = event.nativeEvent;
-      const scenePointer = viewportCoordsToSceneCoords3(event, this.state);
+      const scenePointer = viewportCoordsToSceneCoords4(event, this.state);
       const { x: scenePointerX, y: scenePointerY } = scenePointer;
       this.lastPointerMoveCoords = {
         x: scenePointerX,
@@ -40072,7 +40341,7 @@ var App = class _App extends React52.Component {
       invalidateContextMenu = true;
     });
     __publicField(this, "handleCanvasPointerDown", (event) => {
-      const scenePointer = viewportCoordsToSceneCoords3(event, this.state);
+      const scenePointer = viewportCoordsToSceneCoords4(event, this.state);
       const { x: scenePointerX, y: scenePointerY } = scenePointer;
       this.lastPointerMoveCoords = {
         x: scenePointerX,
@@ -40364,7 +40633,7 @@ var App = class _App extends React52.Component {
       }
       this.removePointer(event);
       this.lastPointerUpEvent = event;
-      const scenePointer = viewportCoordsToSceneCoords3(
+      const scenePointer = viewportCoordsToSceneCoords4(
         { clientX: event.clientX, clientY: event.clientY },
         this.state
       );
@@ -41444,7 +41713,7 @@ var App = class _App extends React52.Component {
       try {
         const clientX = this.state.width / 2 + this.state.offsetLeft;
         const clientY = this.state.height / 2 + this.state.offsetTop;
-        const { x, y } = viewportCoordsToSceneCoords3(
+        const { x, y } = viewportCoordsToSceneCoords4(
           { clientX, clientY },
           this.state
         );
@@ -41619,7 +41888,7 @@ var App = class _App extends React52.Component {
       });
     });
     __publicField(this, "handleAppOnDrop", async (event) => {
-      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         event,
         this.state
       );
@@ -41786,7 +42055,7 @@ var App = class _App extends React52.Component {
       event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== this.state.preferredSelectionTool.type) {
         return;
       }
-      const { x, y } = viewportCoordsToSceneCoords3(event, this.state);
+      const { x, y } = viewportCoordsToSceneCoords4(event, this.state);
       const element = this.getElementAtPosition(x, y, {
         preferSelected: true,
         includeLockedElements: true
@@ -42206,7 +42475,7 @@ var App = class _App extends React52.Component {
       if (!x || !y) {
         return;
       }
-      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+      const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         { clientX: x, clientY: y },
         this.state
       );
@@ -42631,7 +42900,7 @@ var App = class _App extends React52.Component {
       return false;
     }
     const viewportClickStart_scenePoint = pointFrom29(
-      viewportCoordsToSceneCoords3(
+      viewportCoordsToSceneCoords4(
         {
           clientX: this.lastPointerDownEvent.clientX,
           clientY: this.lastPointerDownEvent.clientY
@@ -42640,7 +42909,7 @@ var App = class _App extends React52.Component {
       )
     );
     const viewportClickEnd_scenePoint = pointFrom29(
-      viewportCoordsToSceneCoords3(
+      viewportCoordsToSceneCoords4(
         {
           clientX: this.lastPointerUpEvent.clientX,
           clientY: this.lastPointerUpEvent.clientY
@@ -43161,14 +43430,18 @@ var App = class _App extends React52.Component {
                           ImageGeneratorPanel,
                           {
                             element: firstSelectedElement,
-                            app: this
+                            app: this,
+                            onBeforeImageGen: this.props.onBeforeImageGen,
+                            onAfterImageGen: this.props.onAfterImageGen
                           }
                         ),
                         selectedElements.length === 1 && isImageElement9(firstSelectedElement) && !this.state.viewModeEnabled && /* @__PURE__ */ jsx168(
                           ImageQuickEditPanel,
                           {
                             element: firstSelectedElement,
-                            app: this
+                            app: this,
+                            onBeforeImageGen: this.props.onBeforeImageGen,
+                            onAfterImageGen: this.props.onAfterImageGen
                           }
                         ),
                         this.state.toast !== null && /* @__PURE__ */ jsx168(
@@ -43702,7 +43975,7 @@ var App = class _App extends React52.Component {
   }
   // TODO: Cover with tests
   async insertClipboardContent(data, dataTransferFiles, isPlainPaste) {
-    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords3(
+    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
       {
         clientX: this.lastViewportPosition.x,
         clientY: this.lastViewportPosition.y
@@ -43849,7 +44122,7 @@ var App = class _App extends React52.Component {
     }
   }
   addTextFromPaste(text, isPlainPaste = false) {
-    const { x, y } = viewportCoordsToSceneCoords3(
+    const { x, y } = viewportCoordsToSceneCoords4(
       {
         clientX: this.lastViewportPosition.x,
         clientY: this.lastViewportPosition.y
@@ -44153,7 +44426,7 @@ var App = class _App extends React52.Component {
       if (elements[index].isDeleted) {
         continue;
       }
-      const [x1, y1, x2, y2] = getElementAbsoluteCoords11(
+      const [x1, y1, x2, y2] = getElementAbsoluteCoords12(
         elements[index],
         this.scene.getNonDeletedElementsMap()
       );
@@ -44286,7 +44559,7 @@ var App = class _App extends React52.Component {
     }
   }
   initialPointerDownState(event) {
-    const origin = viewportCoordsToSceneCoords3(event, this.state);
+    const origin = viewportCoordsToSceneCoords4(event, this.state);
     const selectedElements = this.scene.getSelectedElements(this.state);
     const [minX, minY, maxX, maxY] = getCommonBounds11(selectedElements);
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
@@ -44450,7 +44723,7 @@ var App = class _App extends React52.Component {
       if (this.state.openDialog?.name === "elementLinkSelector") {
         return;
       }
-      const pointerCoords = viewportCoordsToSceneCoords3(event, this.state);
+      const pointerCoords = viewportCoordsToSceneCoords4(event, this.state);
       if (this.state.activeLockedId) {
         this.setState({
           activeLockedId: null
@@ -44699,7 +44972,7 @@ var App = class _App extends React52.Component {
                 );
                 instantDragOffset[0] *= image.naturalWidth / uncroppedSize.width;
                 instantDragOffset[1] *= image.naturalHeight / uncroppedSize.height;
-                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords11(
+                const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords12(
                   croppingElement,
                   elementsMap
                 );
@@ -44867,7 +45140,7 @@ var App = class _App extends React52.Component {
                 },
                 []
               );
-              pointerDownState.drag.origin = viewportCoordsToSceneCoords3(
+              pointerDownState.drag.origin = viewportCoordsToSceneCoords4(
                 event,
                 this.state
               );
@@ -45127,7 +45400,7 @@ var App = class _App extends React52.Component {
       SnapCache.setVisibleGaps(null);
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
       const hitElements = pointerDownState.hit.allHitElements;
-      const sceneCoords = viewportCoordsToSceneCoords3(
+      const sceneCoords = viewportCoordsToSceneCoords4(
         { clientX: childEvent.clientX, clientY: childEvent.clientY },
         this.state
       );
@@ -45265,7 +45538,7 @@ var App = class _App extends React52.Component {
         childEvent
       );
       if (newElement6?.type === "freedraw") {
-        const pointerCoords = viewportCoordsToSceneCoords3(
+        const pointerCoords = viewportCoordsToSceneCoords4(
           childEvent,
           this.state
         );
@@ -45288,7 +45561,7 @@ var App = class _App extends React52.Component {
         if (newElement6.points.length > 1 && newElement6.points[1][0] !== 0 && newElement6.points[1][1] !== 0) {
           this.store.scheduleCapture();
         }
-        const pointerCoords = viewportCoordsToSceneCoords3(
+        const pointerCoords = viewportCoordsToSceneCoords4(
           childEvent,
           this.state
         );
@@ -45420,7 +45693,7 @@ var App = class _App extends React52.Component {
         this.scene.triggerUpdate();
       }
       if (pointerDownState.drag.hasOccurred) {
-        const sceneCoords2 = viewportCoordsToSceneCoords3(childEvent, this.state);
+        const sceneCoords2 = viewportCoordsToSceneCoords4(childEvent, this.state);
         if (this.state.selectedLinearElement && this.state.selectedLinearElement.isDragging) {
           const linearElement = this.scene.getElement(
             this.state.selectedLinearElement.elementId
@@ -45573,7 +45846,7 @@ var App = class _App extends React52.Component {
           pointFrom29(pointerEnd.clientX, pointerEnd.clientY)
         );
         if (draggedDistance === 0) {
-          const scenePointer = viewportCoordsToSceneCoords3(
+          const scenePointer = viewportCoordsToSceneCoords4(
             {
               clientX: pointerEnd.clientX,
               clientY: pointerEnd.clientY
@@ -46300,7 +46573,7 @@ import {
   UserIdleState as UserIdleState2,
   normalizeLink as normalizeLink4,
   sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords4,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords5,
   getFormFactor as getFormFactor2
 } from "@orangecatai/common";
 import {
@@ -46520,32 +46793,37 @@ import { isElementLink as isElementLink3 } from "@orangecatai/element";
 import { setCustomTextMetricsProvider } from "@orangecatai/element";
 
 // components/AIChatPanel.tsx
-import {
+import React57, {
   useCallback as useCallback24,
   useEffect as useEffect55,
+  useImperativeHandle as useImperativeHandle4,
   useRef as useRef49,
   useState as useState49
 } from "react";
 import {
   ArrowUp as ArrowUp3,
   AtSign,
+  Check,
   ChevronDown as ChevronDown2,
   ChevronRight,
   Copy,
   Globe,
   MessageSquare,
   Mic,
-  MoreHorizontal,
-  Pencil,
+  MicOff,
+  Paperclip,
   Plus,
   Search,
-  ThumbsDown,
-  ThumbsUp,
-  Trash,
   Wrench,
   X as X2
 } from "lucide-react";
 
+// utils/openRouterApiKey.ts
+function resolveOpenRouterApiKey(propKey) {
+  const normalizedPropKey = propKey?.trim();
+  return (normalizedPropKey ? normalizedPropKey : void 0) ?? (typeof import.meta !== "undefined" && define_import_meta_env_default?.VITE_APP_OPENROUTER_API_KEY ? define_import_meta_env_default.VITE_APP_OPENROUTER_API_KEY : "") ?? "";
+}
+
 // components/ai-chat/canvasTools.ts
 import { nanoid as nanoid2 } from "nanoid";
 import {
@@ -46880,17 +47158,12 @@ async function captureFrameScreenshot(api, frameId) {
   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
-      }
-    );
+    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;
@@ -46965,12 +47238,15 @@ 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")
+  if (type === "text") {
     return 3 /* TEXT */;
-  if (type === "image")
+  }
+  if (type === "image") {
     return 1 /* IMAGE */;
-  if (coversFrame(x, y, w, h, frame))
+  }
+  if (coversFrame(x, y, w, h, frame)) {
     return 0 /* BG_FILL */;
+  }
   return 2 /* SHAPE */;
 }
 function findInsertIndexByTier(elements, frameIndex, tier) {
@@ -46979,9 +47255,17 @@ function findInsertIndexByTier(elements, frameIndex, tier) {
   let insertAt = frameIndex + 1;
   for (let i = frameIndex + 1; i < elements.length; i++) {
     const el = elements[i];
-    if (el.frameId !== frameId)
+    if (el.frameId !== frameId) {
       continue;
-    const elTier = getElementTier(el.type, el.x, el.y, el.width, el.height, frame);
+    }
+    const elTier = getElementTier(
+      el.type,
+      el.x,
+      el.y,
+      el.width,
+      el.height,
+      frame
+    );
     if (elTier > tier) {
       return i;
     }
@@ -47113,7 +47397,11 @@ function execAddText(args, ctx) {
   }
   const updatedText = { ...textEl, frameId };
   const newElements = [...elements];
-  const insertAt = findInsertIndexByTier(newElements, frameIndex, 3 /* TEXT */);
+  const insertAt = findInsertIndexByTier(
+    newElements,
+    frameIndex,
+    3 /* TEXT */
+  );
   newElements.splice(insertAt, 0, updatedText);
   ctx.excalidrawAPI.updateScene({ elements: newElements });
   return {
@@ -47203,7 +47491,11 @@ async function execGenerateImage(args, ctx) {
     }
     const updatedImage = { ...imageEl, frameId };
     const newElements = [...currentElements];
-    const insertAt = findInsertIndexByTier(newElements, currentFrameIndex, 1 /* IMAGE */);
+    const insertAt = findInsertIndexByTier(
+      newElements,
+      currentFrameIndex,
+      1 /* IMAGE */
+    );
     newElements.splice(insertAt, 0, updatedImage);
     ctx.excalidrawAPI.updateScene({ elements: newElements });
     ctx.excalidrawAPI.addFiles([
@@ -47394,7 +47686,33 @@ When asked to create an ad or visual from scratch:
 - 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) {
+async function callOpenRouter(messages, apiKey, signal, webSearchEnabled) {
+  const model = webSearchEnabled ? "openai/gpt-4.1-mini:online" : "openai/gpt-4.1-mini";
+  const body = {
+    model,
+    messages: messages.map((m) => {
+      if (m.role === "assistant" && m.tool_calls) {
+        return {
+          role: m.role,
+          content: m.content,
+          tool_calls: m.tool_calls
+        };
+      }
+      if (m.role === "tool") {
+        return {
+          role: m.role,
+          tool_call_id: m.tool_call_id,
+          content: m.content
+        };
+      }
+      return { role: m.role, content: m.content };
+    }),
+    tools: CANVAS_TOOLS,
+    tool_choice: "auto"
+  };
+  if (webSearchEnabled) {
+    body.plugins = [{ id: "web", max_results: 5 }];
+  }
   const response = await fetch(
     "https://openrouter.ai/api/v1/chat/completions",
     {
@@ -47404,28 +47722,7 @@ async function callOpenRouter(messages, apiKey, signal) {
         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"
-      })
+      body: JSON.stringify(body)
     }
   );
   if (!response.ok) {
@@ -47454,10 +47751,14 @@ async function runAgentLoop(opts) {
     userMessages,
     elementContext,
     frameScreenshot,
+    fileAttachments,
+    webSearchEnabled,
     apiKey,
     toolCtx,
     onUpdate,
-    signal
+    signal,
+    onBeforeImageGen,
+    onAfterImageGen
   } = opts;
   const messages = [{ role: "system", content: SYSTEM_PROMPT }];
   if (elementContext) {
@@ -47471,22 +47772,43 @@ ${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}`
+    const hasMultimodal = isLast && msg.role === "user" && (frameScreenshot || fileAttachments && fileAttachments.some((a) => a.type === "image"));
+    const hasTextFiles = isLast && msg.role === "user" && fileAttachments && fileAttachments.some((a) => a.type === "text");
+    if (hasMultimodal || hasTextFiles) {
+      const contentParts = [];
+      if (frameScreenshot) {
+        contentParts.push({
+          type: "image_url",
+          image_url: { url: frameScreenshot }
+        });
+      }
+      if (fileAttachments) {
+        for (const att of fileAttachments) {
+          if (att.type === "image" && att.dataUrl) {
+            contentParts.push({
+              type: "image_url",
+              image_url: { url: att.dataUrl }
+            });
           }
-        ]
-      });
+        }
+      }
+      let text = msg.content;
+      if (frameScreenshot) {
+        text = `[Screenshot of the referenced frame is attached above]
+
+${text}`;
+      }
+      if (fileAttachments) {
+        const textFiles = fileAttachments.filter((a) => a.type === "text");
+        if (textFiles.length > 0) {
+          text += `
+
+${textFiles.map((f) => `[File: ${f.name}]
+${f.textContent}`).join("\n\n")}`;
+        }
+      }
+      contentParts.push({ type: "text", text });
+      messages.push({ role: "user", content: contentParts });
     } else {
       messages.push({ role: msg.role, content: msg.content });
     }
@@ -47499,7 +47821,12 @@ ${msg.content}`
       type: "status",
       message: iterations === 1 ? "Thinking\u2026" : "Processing tool results\u2026"
     });
-    const response = await callOpenRouter(messages, apiKey, signal);
+    const response = await callOpenRouter(
+      messages,
+      apiKey,
+      signal,
+      webSearchEnabled
+    );
     if (!response.tool_calls || response.tool_calls.length === 0) {
       const reply = response.content || "Done!";
       onUpdate({ type: "final", message: reply });
@@ -47521,7 +47848,46 @@ ${msg.content}`
         type: "tool_start",
         message: formatToolStartMessage(name, parsedArgs)
       });
+      if (name === "generate_image" && onBeforeImageGen) {
+        let gateResult;
+        try {
+          gateResult = await onBeforeImageGen();
+        } catch {
+          gateResult = { allowed: false, error: "Credit check failed" };
+        }
+        const { allowed, error } = gateResult;
+        if (!allowed) {
+          const gatedResult = {
+            success: false,
+            error: error || "Insufficient credits for image generation",
+            statusMessage: error || "Insufficient credits for image generation"
+          };
+          const gatedAction = {
+            toolName: name,
+            args: parsedArgs,
+            result: gatedResult
+          };
+          toolActions.push(gatedAction);
+          onUpdate({
+            type: "tool_done",
+            message: gatedResult.statusMessage,
+            toolAction: gatedAction
+          });
+          messages.push({
+            role: "tool",
+            tool_call_id: toolCall.id,
+            content: JSON.stringify({
+              success: false,
+              error: gatedResult.error
+            })
+          });
+          continue;
+        }
+      }
       const result = await executeCanvasTool(name, rawArgs, toolCtx);
+      if (name === "generate_image" && result.success && onAfterImageGen) {
+        onAfterImageGen();
+      }
       const action = {
         toolName: name,
         args: parsedArgs,
@@ -47567,6 +47933,100 @@ function formatToolStartMessage(name, args) {
   }
 }
 
+// components/ai-chat/audioUtils.ts
+async function blobToWavBase64(blob) {
+  const arrayBuffer = await blob.arrayBuffer();
+  const audioCtx = new AudioContext();
+  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+  await audioCtx.close();
+  const numChannels = audioBuffer.numberOfChannels;
+  const sampleRate = audioBuffer.sampleRate;
+  const numSamples = audioBuffer.length;
+  const bytesPerSample = 2;
+  const dataSize = numSamples * numChannels * bytesPerSample;
+  const bufferSize = 44 + dataSize;
+  const wavBuffer = new ArrayBuffer(bufferSize);
+  const view = new DataView(wavBuffer);
+  const writeStr = (offset2, str) => {
+    for (let i = 0; i < str.length; i++) {
+      view.setUint8(offset2 + i, str.charCodeAt(i));
+    }
+  };
+  writeStr(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  writeStr(8, "WAVE");
+  writeStr(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numChannels * bytesPerSample, true);
+  view.setUint16(32, numChannels * bytesPerSample, true);
+  view.setUint16(34, 16, true);
+  writeStr(36, "data");
+  view.setUint32(40, dataSize, true);
+  let offset = 44;
+  for (let i = 0; i < numSamples; i++) {
+    for (let ch = 0; ch < numChannels; ch++) {
+      const sample = audioBuffer.getChannelData(ch)[i];
+      const clamped = Math.max(-1, Math.min(1, sample));
+      const int16 = clamped < 0 ? clamped * 32768 : clamped * 32767;
+      view.setInt16(offset, int16, true);
+      offset += 2;
+    }
+  }
+  const uint8 = new Uint8Array(wavBuffer);
+  const CHUNK = 8192;
+  let binary = "";
+  for (let i = 0; i < uint8.length; i += CHUNK) {
+    binary += String.fromCharCode(...uint8.subarray(i, i + CHUNK));
+  }
+  return btoa(binary);
+}
+async function transcribeAudio(base64Audio, format, apiKey) {
+  const response = await fetch(
+    "https://openrouter.ai/api/v1/chat/completions",
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        model: "mistralai/voxtral-small-24b-2507",
+        messages: [
+          {
+            role: "user",
+            content: [
+              {
+                type: "text",
+                text: "Transcribe this audio. Return only the transcription text, nothing else."
+              },
+              {
+                type: "input_audio",
+                input_audio: { data: base64Audio, format }
+              }
+            ]
+          }
+        ]
+      })
+    }
+  );
+  if (!response.ok) {
+    let message = `Transcription error ${response.status}`;
+    try {
+      const err = await response.json();
+      if (err?.error?.message) {
+        message = err.error.message;
+      }
+    } catch {
+    }
+    throw new Error(message);
+  }
+  const data = await response.json();
+  return data?.choices?.[0]?.message?.content || "";
+}
+
 // components/ui/chat-container.tsx
 import { StickToBottom } from "use-stick-to-bottom";
 import { jsx as jsx177 } from "react/jsx-runtime";
@@ -47897,479 +48357,873 @@ import { jsx as jsx184, jsxs as jsxs100 } from "react/jsx-runtime";
 function genId() {
   return Math.random().toString(36).slice(2, 10);
 }
+var MAX_ATTACHED_FILES = 3;
+var MAX_FILE_SIZE_BYTES = 10 * 1024 * 1024;
 var SUGGESTIONS = [
   "Create a pasta ad",
   "Design a sale banner",
   "Make a product showcase",
   "Help me design"
 ];
-var AIChatPanel = ({
-  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;
+var AIChatPanel = React57.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    apiKey,
+    excalidrawAPI,
+    geminiApiKey,
+    initialMessages,
+    initialSessionId,
+    initialSessions,
+    onMessagesChange,
+    onSessionCreate,
+    onSessionSwitch,
+    onBeforeSend,
+    onAfterSend,
+    onBeforeImageGen,
+    onAfterImageGen
+  }, ref) => {
+    const [prompt, setPrompt] = useState49("");
+    const [isLoading, setIsLoading] = useState49(false);
+    const [statusText, setStatusText] = useState49("");
+    const [messages, setMessages] = useState49(
+      initialMessages ?? []
+    );
+    const [sessions, setSessions] = useState49(
+      initialSessions ?? []
+    );
+    const [currentSessionId, setCurrentSessionId] = useState49(
+      initialSessionId ?? genId
+    );
+    const [historyOpen, setHistoryOpen] = useState49(false);
+    const [historySearch, setHistorySearch] = useState49("");
+    const [error, setError] = useState49(null);
+    const [frameRef, setFrameRef] = useState49(null);
+    const [mentionMenuOpen, setMentionMenuOpen] = useState49(false);
+    const [availableFrames, setAvailableFrames] = useState49([]);
+    const [attachedFiles, setAttachedFiles] = useState49([]);
+    const [webSearchEnabled, setWebSearchEnabled] = useState49(false);
+    const [isSendPending, setIsSendPending] = useState49(false);
+    const [isLoadingSession, setIsLoadingSession] = useState49(false);
+    const [isRecording, setIsRecording] = useState49(false);
+    const [isTranscribing, setIsTranscribing] = useState49(false);
+    const [copiedMsgId, setCopiedMsgId] = useState49(null);
+    const historyRef = useRef49(null);
+    const abortControllerRef = useRef49(null);
+    const mentionMenuRef = useRef49(null);
+    const fileInputRef = useRef49(null);
+    const mediaRecorderRef = useRef49(null);
+    const audioChunksRef = useRef49([]);
+    const prevPromptRef = useRef49("");
+    const voiceUsedRef = useRef49(false);
+    const currentSessionIdRef = useRef49(currentSessionId);
+    useEffect55(() => {
+      currentSessionIdRef.current = currentSessionId;
+    }, [currentSessionId]);
+    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 = (() => {
+      const sessionTitle = sessions.find(
+        (s) => s.id === currentSessionId
+      )?.title;
+      if (sessionTitle) {
+        return sessionTitle;
+      }
+      if (messages.length > 0) {
+        return messages[0].content.slice(0, 30) + (messages[0].content.length > 30 ? "\u2026" : "");
+      }
+      return "New chat";
+    })();
+    const saveCurrentSession = useCallback24(() => {
+      if (messages.length === 0) {
+        return;
       }
-      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) => {
+      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(session.messages);
-      setCurrentSessionId(session.id);
+      const newSessionId = genId();
+      setMessages([]);
+      setCurrentSessionId(newSessionId);
+      setIsLoadingSession(false);
       setHistoryOpen(false);
       setError(null);
-    },
-    [saveCurrentSession]
-  );
-  const handleAtMention = useCallback24(() => {
-    if (!excalidrawAPI) {
-      return;
-    }
-    setAvailableFrames(listFrames(excalidrawAPI));
-    setMentionMenuOpen(true);
-  }, [excalidrawAPI]);
-  const handlePickFrame = useCallback24(
-    async (frame) => {
-      if (!excalidrawAPI) {
+      setPrompt("");
+      setFrameRef(null);
+      setAttachedFiles([]);
+      setStatusText("");
+    }, [saveCurrentSession]);
+    const handleSwitchSession = useCallback24(
+      (session) => {
+        saveCurrentSession();
+        setCurrentSessionId(session.id);
+        setHistoryOpen(false);
+        setError(null);
+        if (session.messages.length > 0) {
+          setMessages(session.messages);
+          setIsLoadingSession(false);
+        } else {
+          setMessages([]);
+          setIsLoadingSession(true);
+          if (onSessionSwitch) {
+            onSessionSwitch(session.id);
+          }
+        }
+      },
+      [saveCurrentSession, onSessionSwitch]
+    );
+    const handlePromptChange = useCallback24(
+      (value) => {
+        const prevValue = prevPromptRef.current;
+        setPrompt(value);
+        prevPromptRef.current = value;
+        if (excalidrawAPI && value.length > prevValue.length && value.endsWith("@")) {
+          setAvailableFrames(listFrames(excalidrawAPI));
+          setMentionMenuOpen(true);
+        }
+      },
+      [excalidrawAPI]
+    );
+    const handlePickFrame = useCallback24(
+      async (frame) => {
+        if (!excalidrawAPI) {
+          return;
+        }
+        setMentionMenuOpen(false);
+        setPrompt((prev) => {
+          const atIndex2 = prev.lastIndexOf("@");
+          return atIndex2 >= 0 ? prev.slice(0, atIndex2) : prev;
+        });
+        const atIndex = prevPromptRef.current.lastIndexOf("@");
+        prevPromptRef.current = atIndex >= 0 ? prevPromptRef.current.slice(0, atIndex) : prevPromptRef.current;
+        const ctx = getFrameContext(excalidrawAPI, frame.id);
+        if (!ctx) {
+          return;
+        }
+        const screenshot = await captureFrameScreenshot(
+          excalidrawAPI,
+          frame.id
+        );
+        setFrameRef({
+          frameId: frame.id,
+          label: ctx.frameInfo.name,
+          serialized: ctx.serialized,
+          screenshot: screenshot ?? void 0
+        });
+      },
+      [excalidrawAPI]
+    );
+    const handleRemoveRef = useCallback24(() => {
+      setFrameRef(null);
+    }, []);
+    const handleFileUpload = useCallback24(
+      (e) => {
+        const files = e.target.files;
+        if (!files) {
+          return;
+        }
+        const remaining = MAX_ATTACHED_FILES - attachedFiles.length;
+        if (remaining <= 0) {
+          return;
+        }
+        const toAdd = Array.from(files).slice(0, remaining);
+        for (const file2 of toAdd) {
+          if (file2.size > MAX_FILE_SIZE_BYTES) {
+            setError(`"${file2.name}" is too large (max 10 MB).`);
+            continue;
+          }
+          const id = genId();
+          const isImage = file2.type.startsWith("image/");
+          const reader = new FileReader();
+          if (isImage) {
+            reader.onload = () => {
+              setAttachedFiles(
+                (prev) => prev.length < MAX_ATTACHED_FILES ? [
+                  ...prev,
+                  {
+                    id,
+                    file: file2,
+                    name: file2.name,
+                    type: "image",
+                    dataUrl: reader.result
+                  }
+                ] : prev
+              );
+            };
+            reader.readAsDataURL(file2);
+          } else {
+            reader.onload = () => {
+              setAttachedFiles(
+                (prev) => prev.length < MAX_ATTACHED_FILES ? [
+                  ...prev,
+                  {
+                    id,
+                    file: file2,
+                    name: file2.name,
+                    type: "text",
+                    textContent: reader.result
+                  }
+                ] : prev
+              );
+            };
+            reader.readAsText(file2);
+          }
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      },
+      [attachedFiles.length]
+    );
+    const handleRemoveFile = useCallback24((fileId) => {
+      setAttachedFiles((prev) => prev.filter((f) => f.id !== fileId));
+    }, []);
+    const toggleWebSearch = useCallback24(() => {
+      setWebSearchEnabled((prev) => !prev);
+    }, []);
+    const handleVoiceInput = useCallback24(async () => {
+      if (isRecording) {
+        mediaRecorderRef.current?.stop();
+        setIsRecording(false);
+        voiceUsedRef.current = true;
         return;
       }
-      setMentionMenuOpen(false);
-      const ctx = getFrameContext(excalidrawAPI, frame.id);
-      if (!ctx) {
-        return;
+      let stream = null;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const mimeType = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
+        const mediaRecorder = new MediaRecorder(stream, { mimeType });
+        mediaRecorderRef.current = mediaRecorder;
+        audioChunksRef.current = [];
+        mediaRecorder.ondataavailable = (e) => {
+          if (e.data.size > 0) {
+            audioChunksRef.current.push(e.data);
+          }
+        };
+        mediaRecorder.onstop = async () => {
+          stream?.getTracks().forEach((t2) => t2.stop());
+          const audioBlob = new Blob(audioChunksRef.current, {
+            type: mediaRecorder.mimeType
+          });
+          const normalizedKey = resolveOpenRouterApiKey(apiKey);
+          if (!normalizedKey) {
+            setError("No API key for voice transcription.");
+            return;
+          }
+          setIsTranscribing(true);
+          setStatusText("Transcribing\u2026");
+          try {
+            const wavBase64 = await blobToWavBase64(audioBlob);
+            const transcription = await transcribeAudio(
+              wavBase64,
+              "wav",
+              normalizedKey
+            );
+            const updated = (prevPromptRef.current ? `${prevPromptRef.current} ` : "") + transcription;
+            prevPromptRef.current = updated;
+            setPrompt(updated);
+          } catch (err) {
+            voiceUsedRef.current = false;
+            setError(
+              err instanceof Error ? err.message : "Transcription failed"
+            );
+          } finally {
+            setIsTranscribing(false);
+            setStatusText("");
+          }
+        };
+        mediaRecorder.start();
+        setIsRecording(true);
+      } catch {
+        stream?.getTracks().forEach((t2) => t2.stop());
+        setError("Could not access microphone. Check browser permissions.");
       }
-      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."
+    }, [isRecording, apiKey]);
+    const handleCopy = useCallback24((msgId, content) => {
+      navigator.clipboard.writeText(content).then(
+        () => {
+          setCopiedMsgId(msgId);
+          setTimeout(() => setCopiedMsgId(null), 2e3);
+        },
+        () => {
+          setError("Copy failed \u2014 please grant clipboard permission.");
+        }
       );
-      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,
-          {
+    }, []);
+    const handleSend = useCallback24(
+      async (textOverride) => {
+        const text = (textOverride ?? prompt).trim();
+        const normalizedKey = resolveOpenRouterApiKey(apiKey);
+        if (!text || isLoading || isSendPending) {
+          voiceUsedRef.current = false;
+          return;
+        }
+        if (!normalizedKey) {
+          voiceUsedRef.current = false;
+          setError(
+            "No OpenRouter API key. Set VITE_APP_OPENROUTER_API_KEY in .env or pass the key via the `apiKey` prop."
+          );
+          return;
+        }
+        const capturedFiles = [...attachedFiles];
+        const capturedWebSearch = webSearchEnabled;
+        const capturedFrameRef = frameRef;
+        const userMsg = {
+          id: genId(),
+          role: "user",
+          content: text,
+          timestamp: /* @__PURE__ */ new Date(),
+          attachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+            name: f.name,
+            type: f.type,
+            dataUrl: f.dataUrl
+          })) : void 0
+        };
+        const isFirstMessage = messages.length === 0;
+        const prevMessages = messages;
+        const nextMessages = [...messages, userMsg];
+        setMessages(nextMessages);
+        setPrompt("");
+        prevPromptRef.current = "";
+        setAttachedFiles([]);
+        setFrameRef(null);
+        setIsSendPending(true);
+        setError(null);
+        const hadVoice = voiceUsedRef.current;
+        voiceUsedRef.current = false;
+        if (onBeforeSend) {
+          const { allowed, error: creditError } = await onBeforeSend({
+            hasVoice: hadVoice
+          });
+          if (!allowed) {
+            setMessages(prevMessages);
+            setError(creditError || "Insufficient credits");
+            setIsSendPending(false);
+            return;
+          }
+        }
+        setIsSendPending(false);
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        setIsLoading(true);
+        setStatusText("Thinking\u2026");
+        if (!excalidrawAPI) {
+          try {
+            const reply = await callPlainChatAPI(
+              nextMessages,
+              normalizedKey,
+              controller.signal,
+              {
+                webSearchEnabled: capturedWebSearch,
+                attachments: capturedFiles
+              }
+            );
+            const assistantMsg = {
+              id: genId(),
+              role: "assistant",
+              content: reply,
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            const updatedMessages = [...nextMessages, assistantMsg];
+            setMessages(updatedMessages);
+            if (onAfterSend) {
+              onAfterSend({ hasVoice: hadVoice });
+            }
+            if (isFirstMessage && onSessionCreate) {
+              onSessionCreate({
+                id: currentSessionId,
+                title: text.slice(0, 40)
+              });
+            }
+            if (onMessagesChange) {
+              onMessagesChange(updatedMessages, currentSessionId);
+            }
+          } catch (err) {
+            if (err instanceof Error && err.name !== "AbortError") {
+              setError(err.message);
+            }
+          } finally {
+            abortControllerRef.current = null;
+            setIsLoading(false);
+            setStatusText("");
+          }
+          return;
+        }
+        try {
+          const result = await runAgentLoop({
+            userMessages: nextMessages.map((m) => ({
+              role: m.role,
+              content: m.content
+            })),
+            elementContext: capturedFrameRef?.serialized,
+            frameScreenshot: capturedFrameRef?.screenshot,
+            fileAttachments: capturedFiles.length > 0 ? capturedFiles.map((f) => ({
+              name: f.name,
+              type: f.type,
+              dataUrl: f.dataUrl,
+              textContent: f.textContent
+            })) : void 0,
+            webSearchEnabled: capturedWebSearch,
+            apiKey: normalizedKey,
+            toolCtx: {
+              excalidrawAPI,
+              geminiApiKey: geminiApiKey || "",
+              signal: controller.signal
+            },
+            onUpdate: (update) => {
+              if (update.type !== "final") {
+                setStatusText(update.message);
+              }
+            },
+            signal: controller.signal,
+            onBeforeImageGen,
+            onAfterImageGen
+          });
+          const assistantMsgAgent = {
             id: genId(),
             role: "assistant",
-            content: reply,
-            timestamp: /* @__PURE__ */ new Date()
+            content: result.reply,
+            timestamp: /* @__PURE__ */ new Date(),
+            toolActions: result.toolActions.length > 0 ? result.toolActions : void 0
+          };
+          const updatedMessagesAgent = [...nextMessages, assistantMsgAgent];
+          setMessages(updatedMessagesAgent);
+          if (onAfterSend) {
+            onAfterSend({ hasVoice: hadVoice });
           }
-        ]);
-      } catch (err) {
-        if (err instanceof Error && err.name !== "AbortError") {
-          setError(err.message);
+          if (isFirstMessage && onSessionCreate) {
+            onSessionCreate({ id: currentSessionId, title: text.slice(0, 40) });
+          }
+          if (onMessagesChange) {
+            onMessagesChange(updatedMessagesAgent, currentSessionId);
+          }
+        } catch (err) {
+          if (err instanceof Error && err.name !== "AbortError") {
+            setError(err.message);
+          }
+        } finally {
+          abortControllerRef.current = null;
+          setIsLoading(false);
+          setStatusText("");
         }
-      } 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);
+      },
+      [
+        prompt,
+        isLoading,
+        isSendPending,
+        messages,
+        apiKey,
+        excalidrawAPI,
+        geminiApiKey,
+        frameRef,
+        attachedFiles,
+        webSearchEnabled,
+        currentSessionId,
+        onBeforeSend,
+        onAfterSend,
+        onMessagesChange,
+        onSessionCreate,
+        onBeforeImageGen,
+        onAfterImageGen
+      ]
+    );
+    useImperativeHandle4(
+      ref,
+      () => ({
+        setMessages: (msgs, sessionId) => {
+          const targetSessionId = sessionId ?? currentSessionIdRef.current;
+          setSessions((prev) => {
+            const idx = prev.findIndex((s) => s.id === targetSessionId);
+            if (idx >= 0) {
+              const next = [...prev];
+              next[idx] = { ...next[idx], messages: msgs };
+              return next;
+            }
+            return prev;
+          });
+          if (targetSessionId === currentSessionIdRef.current) {
+            setMessages(msgs);
+            setIsLoadingSession(false);
           }
         },
-        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("");
+        send: (text) => handleSend(text)
+      }),
+      [handleSend]
+    );
+    const handleStop = useCallback24(() => {
+      abortControllerRef.current?.abort();
+    }, []);
+    const handleChip = useCallback24((chip) => {
+      setPrompt(chip);
+    }, []);
+    const filteredSessions = sessions.filter(
+      (s) => historySearch ? s.title.toLowerCase().includes(historySearch.toLowerCase()) : true
+    );
+    if (!isOpen) {
+      return null;
     }
-  }, [
-    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(
+    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-icon-btn",
-                onClick: handleNewChat,
-                title: "New chat",
-                children: /* @__PURE__ */ jsx184(Plus, { size: 15 })
+                className: "acp-title-btn",
+                onClick: () => setHistoryOpen((v) => !v),
+                title: "Chat history",
+                children: [
+                  /* @__PURE__ */ jsx184("span", { children: currentTitle }),
+                  /* @__PURE__ */ jsx184(ChevronDown2, { size: 13 })
+                ]
               }
             ),
-            /* @__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__ */ jsxs100("div", { className: "acp-header-right", children: [
               /* @__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",
+                  className: "acp-icon-btn",
                   onClick: handleNewChat,
-                  children: [
-                    /* @__PURE__ */ jsx184(Plus, { size: 13 }),
-                    /* @__PURE__ */ jsx184("span", { children: "New chat" })
-                  ]
+                  title: "New chat",
+                  children: /* @__PURE__ */ jsx184(Plus, { size: 15 })
                 }
               ),
-              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("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,
+          /* @__PURE__ */ jsx184("div", { className: "acp-messages-wrap", children: isLoadingSession ? /* @__PURE__ */ jsx184("div", { className: "acp-empty", children: /* @__PURE__ */ jsxs100("div", { className: "acp-loading-session", children: [
+            /* @__PURE__ */ jsxs100("div", { className: "acp-loading-dots", children: [
+              /* @__PURE__ */ jsx184("span", {}),
+              /* @__PURE__ */ jsx184("span", {}),
+              /* @__PURE__ */ jsx184("span", {})
+            ] }),
+            /* @__PURE__ */ jsx184("span", { className: "acp-status-text", children: "Loading chat\u2026" })
+          ] }) }) : messages.length === 0 && !isLoading && !isSendPending ? /* @__PURE__ */ jsxs100("div", { className: "acp-empty", children: [
+            /* @__PURE__ */ jsx184("div", { className: "acp-empty-icon", children: /* @__PURE__ */ jsx184(MessageSquare, { size: 22 }) }),
+            /* @__PURE__ */ jsxs100("div", { children: [
+              /* @__PURE__ */ jsx184("div", { className: "acp-empty-title", children: "AI Ad Designer" }),
+              /* @__PURE__ */ jsx184("div", { className: "acp-empty-sub", children: "Describe an ad and I'll create it on the canvas. Type @ to reference frames." })
+            ] }),
+            /* @__PURE__ */ jsx184("div", { className: "acp-chips", children: SUGGESTIONS.map((chip) => /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-chip",
+                onClick: () => handleChip(chip),
+                children: chip
+              },
+              chip
+            )) })
+          ] }) : /* @__PURE__ */ jsxs100(ChatContainerRoot, { className: "acp-chat-root", children: [
+            /* @__PURE__ */ jsxs100(ChatContainerContent, { className: "acp-chat-content", children: [
+              messages.map((msg, index) => {
+                const isAssistant = msg.role === "assistant";
+                const isLast = index === messages.length - 1;
+                return /* @__PURE__ */ jsx184(
+                  Message,
+                  {
+                    className: `acp-msg ${isAssistant ? "acp-msg--assistant" : "acp-msg--user"}`,
+                    children: isAssistant ? /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
+                      msg.toolActions && msg.toolActions.length > 0 && /* @__PURE__ */ jsx184(ToolActionsDisplay, { actions: msg.toolActions }),
+                      /* @__PURE__ */ jsx184(
+                        MessageContent,
+                        {
+                          markdown: true,
+                          className: "acp-content-assistant",
+                          children: msg.content
+                        }
+                      ),
+                      /* @__PURE__ */ jsx184(
+                        MessageActions,
+                        {
+                          className: `acp-msg-actions${isLast ? " acp-msg-actions--visible" : ""}`,
+                          children: /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Copy", delayDuration: 100, children: /* @__PURE__ */ jsx184(
+                            "button",
                             {
-                              tooltip: "Downvote",
-                              delayDuration: 100,
-                              children: /* @__PURE__ */ jsx184("button", { className: "acp-action-btn", children: /* @__PURE__ */ jsx184(ThumbsDown, { size: 14 }) })
+                              className: "acp-action-btn",
+                              onClick: () => handleCopy(msg.id, msg.content),
+                              children: copiedMsgId === msg.id ? /* @__PURE__ */ jsx184(Check, { size: 14 }) : /* @__PURE__ */ jsx184(Copy, { size: 14 })
                             }
-                          )
-                        ]
-                      }
-                    )
-                  ] }) : /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
-                    /* @__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 }) }) })
+                          ) })
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs100("div", { className: "acp-msg-inner", children: [
+                      msg.attachments && msg.attachments.length > 0 && /* @__PURE__ */ jsx184("div", { className: "acp-msg-attachments", children: msg.attachments.map(
+                        (att, i) => att.type === "image" && att.dataUrl ? /* @__PURE__ */ jsx184(
+                          "img",
+                          {
+                            src: att.dataUrl,
+                            alt: att.name,
+                            className: "acp-msg-att-thumb",
+                            title: att.name
+                          },
+                          i
+                        ) : /* @__PURE__ */ jsxs100("span", { className: "acp-msg-att-pill", children: [
+                          /* @__PURE__ */ jsx184(Paperclip, { size: 11 }),
+                          att.name
+                        ] }, i)
+                      ) }),
+                      /* @__PURE__ */ jsx184(MessageContent, { className: "acp-content-user", children: msg.content }),
+                      /* @__PURE__ */ jsx184(MessageActions, { className: "acp-msg-actions", children: /* @__PURE__ */ jsx184(MessageAction, { tooltip: "Copy", delayDuration: 100, children: /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-action-btn",
+                          onClick: () => handleCopy(msg.id, msg.content),
+                          children: copiedMsgId === msg.id ? /* @__PURE__ */ jsx184(Check, { size: 14 }) : /* @__PURE__ */ jsx184(Copy, { size: 14 })
+                        }
+                      ) }) })
+                    ] })
+                  },
+                  msg.id
+                );
+              }),
+              isLoading && /* @__PURE__ */ jsx184(Message, { className: "acp-msg acp-msg--assistant", children: /* @__PURE__ */ jsx184("div", { className: "acp-msg-inner", children: /* @__PURE__ */ jsxs100("div", { className: "acp-status-indicator", children: [
+                /* @__PURE__ */ jsxs100("div", { className: "acp-loading-dots", children: [
+                  /* @__PURE__ */ jsx184("span", {}),
+                  /* @__PURE__ */ jsx184("span", {}),
+                  /* @__PURE__ */ jsx184("span", {})
+                ] }),
+                statusText && /* @__PURE__ */ jsx184("span", { className: "acp-status-text", children: statusText })
+              ] }) }) })
+            ] }),
+            /* @__PURE__ */ jsx184("div", { className: "acp-scroll-anchor", children: /* @__PURE__ */ jsx184(ScrollButton, { className: "acp-scroll-btn" }) })
+          ] }) }),
+          error && /* @__PURE__ */ jsx184("div", { className: "acp-error", children: error }),
+          frameRef && /* @__PURE__ */ jsx184("div", { className: "acp-ref-area", children: /* @__PURE__ */ jsxs100("div", { className: "acp-ref-pill", children: [
+            /* @__PURE__ */ jsx184(AtSign, { size: 12 }),
+            /* @__PURE__ */ jsx184("span", { children: frameRef.label }),
+            /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-ref-remove",
+                onClick: handleRemoveRef,
+                title: "Remove reference",
+                children: /* @__PURE__ */ jsx184(X2, { size: 10 })
+              }
+            )
+          ] }) }),
+          attachedFiles.length > 0 && /* @__PURE__ */ jsx184("div", { className: "acp-attachments-area", children: attachedFiles.map((f) => /* @__PURE__ */ jsxs100("div", { className: "acp-attachment-pill", children: [
+            f.type === "image" && f.dataUrl ? /* @__PURE__ */ jsx184(
+              "img",
+              {
+                src: f.dataUrl,
+                alt: f.name,
+                className: "acp-attachment-thumb"
+              }
+            ) : /* @__PURE__ */ jsx184(Paperclip, { size: 12 }),
+            /* @__PURE__ */ jsx184("span", { children: f.name }),
+            /* @__PURE__ */ jsx184(
+              "button",
+              {
+                className: "acp-attachment-remove",
+                onClick: () => handleRemoveFile(f.id),
+                title: "Remove file",
+                children: /* @__PURE__ */ jsx184(X2, { size: 10 })
+              }
+            )
+          ] }, f.id)) }),
+          /* @__PURE__ */ jsx184("div", { className: "acp-input-area", children: /* @__PURE__ */ jsxs100("div", { className: "acp-input-wrapper", ref: mentionMenuRef, children: [
+            mentionMenuOpen && /* @__PURE__ */ jsx184("div", { className: "acp-mention-menu", children: availableFrames.length > 0 ? availableFrames.map((f) => /* @__PURE__ */ jsxs100(
+              "button",
+              {
+                className: "acp-mention-item",
+                onClick: () => handlePickFrame(f),
+                children: [
+                  /* @__PURE__ */ jsx184(AtSign, { size: 14 }),
+                  /* @__PURE__ */ jsxs100("span", { children: [
+                    f.name,
+                    " ",
+                    /* @__PURE__ */ jsxs100("span", { className: "acp-mention-dim", children: [
+                      "(",
+                      f.width,
+                      "x",
+                      f.height,
+                      ", ",
+                      f.childCount,
+                      " items)"
                     ] })
                   ] })
-                },
-                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 })
-                      }
-                    )
+                ]
+              },
+              f.id
+            )) : /* @__PURE__ */ jsx184("div", { className: "acp-mention-empty", children: "No frames on the canvas. Create a frame first, then type @ to reference it." }) }),
+            /* @__PURE__ */ jsx184(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                multiple: true,
+                accept: "image/*,.txt,.json,.csv,.md,.html,.css,.js,.ts,.tsx,.jsx,.py,.xml",
+                onChange: handleFileUpload,
+                style: { display: "none" }
+              }
+            ),
+            /* @__PURE__ */ jsxs100(
+              PromptInput,
+              {
+                isLoading,
+                value: prompt,
+                onValueChange: handlePromptChange,
+                onSubmit: () => handleSend(),
+                className: "acp-prompt-input",
+                children: [
+                  /* @__PURE__ */ jsx184(
+                    PromptInputTextarea,
+                    {
+                      placeholder: excalidrawAPI ? "Describe an ad to create\u2026 (@ for frames)" : "Ask anything",
+                      className: "acp-textarea"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs100(PromptInputActions, { className: "acp-actions-bar", children: [
+                    /* @__PURE__ */ jsxs100("div", { className: "acp-actions-left", children: [
+                      /* @__PURE__ */ jsx184(PromptInputAction, { tooltip: "Attach files (max 3)", children: /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-pill-btn acp-pill-btn--icon",
+                          onClick: () => fileInputRef.current?.click(),
+                          disabled: attachedFiles.length >= MAX_ATTACHED_FILES,
+                          children: /* @__PURE__ */ jsx184(Paperclip, { size: 16 })
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx184(
+                        PromptInputAction,
+                        {
+                          tooltip: webSearchEnabled ? "Web search enabled" : "Enable web search",
+                          children: /* @__PURE__ */ jsxs100(
+                            "button",
+                            {
+                              className: `acp-pill-btn${webSearchEnabled ? " acp-pill-btn--active" : ""}`,
+                              onClick: toggleWebSearch,
+                              children: [
+                                /* @__PURE__ */ jsx184(Globe, { size: 15 }),
+                                /* @__PURE__ */ jsx184("span", { children: "Search" })
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs100("div", { className: "acp-actions-right", children: [
+                      /* @__PURE__ */ jsx184(
+                        PromptInputAction,
+                        {
+                          tooltip: isTranscribing ? "Transcribing\u2026" : isRecording ? "Stop recording" : "Voice input",
+                          children: /* @__PURE__ */ jsx184(
+                            "button",
+                            {
+                              className: `acp-pill-btn acp-pill-btn--icon${isRecording ? " acp-pill-btn--recording" : ""}${isTranscribing ? " acp-pill-btn--transcribing" : ""}`,
+                              onClick: handleVoiceInput,
+                              disabled: isTranscribing,
+                              children: isTranscribing ? /* @__PURE__ */ jsx184(
+                                "svg",
+                                {
+                                  width: "16",
+                                  height: "16",
+                                  viewBox: "0 0 24 24",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  strokeWidth: "2",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  className: "acp-mic-spinner",
+                                  children: /* @__PURE__ */ jsx184("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+                                }
+                              ) : isRecording ? /* @__PURE__ */ jsx184(MicOff, { size: 16 }) : /* @__PURE__ */ jsx184(Mic, { size: 16 })
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx184(
+                        "button",
+                        {
+                          className: "acp-send-btn",
+                          onClick: isLoading ? handleStop : () => handleSend(),
+                          disabled: !isLoading && (!prompt.trim() || isSendPending),
+                          title: isLoading ? "Stop" : "Send",
+                          children: isLoading ? /* @__PURE__ */ jsx184("span", { className: "acp-stop-square" }) : /* @__PURE__ */ jsx184(ArrowUp3, { size: 16 })
+                        }
+                      )
+                    ] })
                   ] })
-                ] })
-              ]
-            }
-          )
-        ] }) })
-      ] })
-    }
-  );
-};
+                ]
+              }
+            )
+          ] }) })
+        ] })
+      }
+    );
+  }
+);
+AIChatPanel.displayName = "AIChatPanel";
 function ToolActionsDisplay({ actions: actions2 }) {
   const [expanded, setExpanded] = useState49(false);
   return /* @__PURE__ */ jsxs100("div", { className: "acp-tool-actions", children: [
@@ -48409,7 +49263,37 @@ function ToolActionsDisplay({ actions: actions2 }) {
     )) })
   ] });
 }
-async function callPlainChatAPI(messages, apiKey, signal) {
+async function callPlainChatAPI(messages, apiKey, signal, opts) {
+  const model = opts?.webSearchEnabled ? "openai/gpt-4.1-mini:online" : "openai/gpt-4.1-mini";
+  const apiMessages = messages.map((m, i) => {
+    const isLast = i === messages.length - 1;
+    if (isLast && m.role === "user" && opts?.attachments?.length) {
+      const content2 = [];
+      for (const att of opts.attachments) {
+        if (att.type === "image" && att.dataUrl) {
+          content2.push({
+            type: "image_url",
+            image_url: { url: att.dataUrl }
+          });
+        }
+      }
+      let text = m.content;
+      const textFiles = opts.attachments.filter((a) => a.type === "text");
+      if (textFiles.length > 0) {
+        text += `
+
+${textFiles.map((f) => `[File: ${f.name}]
+${f.textContent}`).join("\n\n")}`;
+      }
+      content2.push({ type: "text", text });
+      return { role: m.role, content: content2 };
+    }
+    return { role: m.role, content: m.content };
+  });
+  const body = { model, messages: apiMessages };
+  if (opts?.webSearchEnabled) {
+    body.plugins = [{ id: "web", max_results: 5 }];
+  }
   const response = await fetch(
     "https://openrouter.ai/api/v1/chat/completions",
     {
@@ -48419,10 +49303,7 @@ async function callPlainChatAPI(messages, apiKey, signal) {
         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 }))
-      })
+      body: JSON.stringify(body)
     }
   );
   if (!response.ok) {
@@ -48482,7 +49363,10 @@ var ExcalidrawBase = (props) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
-    renderScrollbars
+    geminiApiKey,
+    renderScrollbars,
+    onBeforeImageGen,
+    onAfterImageGen
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -48554,7 +49438,10 @@ var ExcalidrawBase = (props) => {
       renderEmbeddable,
       aiEnabled: aiEnabled !== false,
       showDeprecatedFonts,
+      geminiApiKey,
       renderScrollbars,
+      onBeforeImageGen,
+      onAfterImageGen,
       children
     }
   ) }) });
@@ -48668,7 +49555,7 @@ export {
   useHandleLibrary,
   useI18n,
   useStylesPanelMode,
-  viewportCoordsToSceneCoords4 as viewportCoordsToSceneCoords,
+  viewportCoordsToSceneCoords5 as viewportCoordsToSceneCoords,
   zoomToFitBounds
 };
 //# sourceMappingURL=index.js.map