@orangecatai/adgen-canvas 0.0.24 → 0.0.26

package/dist/dev/index.js

@@ -66,10 +66,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-3IT4IPF5.js";
+} from "./chunk-HAGQZMXY.js";
 import {
   define_import_meta_env_default
-} from "./chunk-T44CUBOH.js";
+} from "./chunk-M6SLPQMN.js";
 import {
   en_default
 } from "./chunk-LIELFD5T.js";
@@ -111,7 +111,7 @@ import {
   shouldMaintainAspectRatio,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
   isArrowKey as isArrowKey2,
-  KEYS as KEYS55,
+  KEYS as KEYS56,
   APP_NAME as APP_NAME2,
   CURSOR_TYPE as CURSOR_TYPE4,
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
@@ -318,7 +318,7 @@ import {
   isNonDeletedElement,
   Scene,
   Store,
-  CaptureUpdateAction as CaptureUpdateAction39,
+  CaptureUpdateAction as CaptureUpdateAction40,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement8,
   isSimpleArrow,
@@ -8793,6 +8793,7 @@ import {
 } from "@orangecatai/common";
 import { getNonDeletedElements as getNonDeletedElements7 } from "@orangecatai/element";
 import { CaptureUpdateAction as CaptureUpdateAction9 } from "@orangecatai/element";
+import { viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2 } from "@orangecatai/common";
 
 // components/CheckboxItem.tsx
 import clsx17 from "clsx";
@@ -9795,7 +9796,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-CVNEYNEF.js").then(
+        (blob2) => import("./data/image-TSTRTL65.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9836,9 +9837,6 @@ ${t(
   }
 };
 
-// actions/actionExport.tsx
-import { viewportCoordsToSceneCoords as viewportCoordsToSceneCoords2 } from "@orangecatai/common";
-
 // data/resave.ts
 var resaveAsImageWithScene = async (elements, appState, files, name) => {
   const { exportBackground, viewBackgroundColor, fileHandle } = appState;
@@ -10071,15 +10069,24 @@ var actionLoadScene = register({
   },
   perform: async (elements, appState, _, app) => {
     try {
-      const file2 = await fileOpen({ description: "Excalidraw or video files" });
+      const file2 = await fileOpen({
+        description: "Excalidraw or video files"
+      });
       if (isSupportedVideoFile(file2)) {
         const clientX = appState.width / 2 + appState.offsetLeft;
         const clientY = appState.height / 2 + appState.offsetTop;
-        const { x, y } = viewportCoordsToSceneCoords2({ clientX, clientY }, appState);
+        const { x, y } = viewportCoordsToSceneCoords2(
+          { clientX, clientY },
+          appState
+        );
         await app.insertVideos([file2], x, y);
         return false;
       }
-      const { elements: loadedElements, appState: loadedAppState, files } = await loadFromBlob(file2, appState, elements, file2.handle ?? null);
+      const {
+        elements: loadedElements,
+        appState: loadedAppState,
+        files
+      } = await loadFromBlob(file2, appState, elements, file2.handle ?? null);
       return {
         elements: loadedElements,
         appState: loadedAppState,
@@ -13372,6 +13379,8 @@ var shortcutMap = {
   toggleHandTool: [getShortcutKey("H")],
   setFrameAsActiveTool: [getShortcutKey("F")],
   cycleThroughFrameChildren: [getShortcutKey("CtrlOrCmd+J")],
+  openImageGenerator: [getShortcutKey("G")],
+  openVideoGenerator: [getShortcutKey("M")],
   saveFileToDisk: [getShortcutKey("CtrlOrCmd+S")],
   saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
   toggleShortcuts: [getShortcutKey("?")],
@@ -17850,8 +17859,8 @@ var ShapesSwitcher = ({
         icon: imageGeneratorToolIcon,
         checked: false,
         name: "editor-current-shape",
-        title: `Image Generator \u2014 A`,
-        keyBindingLabel: "A",
+        title: `Image Generator \u2014 G`,
+        keyBindingLabel: "G",
         "aria-label": "Image Generator",
         "data-testid": "toolbar-image-generator",
         onChange: () => {
@@ -17868,8 +17877,8 @@ var ShapesSwitcher = ({
         icon: videoGeneratorToolIcon,
         checked: false,
         name: "editor-current-shape",
-        title: "Video Generator \u2014 V",
-        keyBindingLabel: "V",
+        title: "Video Generator \u2014 M",
+        keyBindingLabel: "M",
         "aria-label": "Video Generator",
         "data-testid": "toolbar-video-generator",
         onChange: () => {
@@ -20759,21 +20768,57 @@ var actionWrapSelectionInFrame = register({
   }
 });
 
+// actions/actionGenerators.ts
+import { KEYS as KEYS42 } from "@orangecatai/common";
+import { CaptureUpdateAction as CaptureUpdateAction33 } from "@orangecatai/element";
+var actionOpenImageGenerator = register({
+  name: "openImageGenerator",
+  label: "Image Generator",
+  icon: imageGeneratorToolIcon,
+  viewMode: false,
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    app.onImageGeneratorSelect();
+    return {
+      elements: null,
+      appState: null,
+      captureUpdate: CaptureUpdateAction33.EVENTUALLY
+    };
+  },
+  keyTest: (event) => !event[KEYS42.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS42.G
+});
+var actionOpenVideoGenerator = register({
+  name: "openVideoGenerator",
+  label: "Video Generator",
+  icon: videoGeneratorToolIcon,
+  viewMode: false,
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    app.onVideoGeneratorSelect();
+    return {
+      elements: null,
+      appState: null,
+      captureUpdate: CaptureUpdateAction33.EVENTUALLY
+    };
+  },
+  keyTest: (event) => !event[KEYS42.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS42.M
+});
+
 // actions/actionHistory.tsx
 import {
   isWindows,
-  KEYS as KEYS42,
+  KEYS as KEYS43,
   matchKey,
   arrayToMap as arrayToMap21,
   MOBILE_ACTION_BUTTON_BG as MOBILE_ACTION_BUTTON_BG4
 } from "@orangecatai/common";
-import { CaptureUpdateAction as CaptureUpdateAction34 } from "@orangecatai/element";
+import { CaptureUpdateAction as CaptureUpdateAction35 } from "@orangecatai/element";
 import { orderByFractionalIndex } from "@orangecatai/element";
 
 // history.ts
 import { Emitter as Emitter2 } from "@orangecatai/common";
 import {
-  CaptureUpdateAction as CaptureUpdateAction33,
+  CaptureUpdateAction as CaptureUpdateAction34,
   StoreChange,
   StoreDelta
 } from "@orangecatai/element";
@@ -20887,7 +20932,7 @@ var History = class _History {
       if (historyDelta === null) {
         return;
       }
-      const action = CaptureUpdateAction33.IMMEDIATELY;
+      const action = CaptureUpdateAction34.IMMEDIATELY;
       let prevSnapshot = this.store.snapshot;
       let nextElements = elements;
       let nextAppState = appState;
@@ -20968,7 +21013,7 @@ var executeHistoryAction = (app, appState, updater) => {
   if (!appState.multiElement && !appState.resizingElement && !appState.editingTextElement && !appState.newElement && !appState.selectedElementsAreBeingDragged && !appState.selectionElement && !app.flowChartCreator.isCreatingChart) {
     const result = updater();
     if (!result) {
-      return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
+      return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
     }
     const [nextElementsMap, nextAppState] = result;
     const nextElements = orderByFractionalIndex(
@@ -20977,10 +21022,10 @@ var executeHistoryAction = (app, appState, updater) => {
     return {
       appState: nextAppState,
       elements: nextElements,
-      captureUpdate: CaptureUpdateAction34.NEVER
+      captureUpdate: CaptureUpdateAction35.NEVER
     };
   }
-  return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
+  return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
 };
 var createUndoAction = (history) => ({
   name: "undo",
@@ -20993,7 +21038,7 @@ var createUndoAction = (history) => ({
     appState,
     () => history.undo(arrayToMap21(elements), appState)
   ),
-  keyTest: (event) => event[KEYS42.CTRL_OR_CMD] && matchKey(event, KEYS42.Z) && !event.shiftKey,
+  keyTest: (event) => event[KEYS43.CTRL_OR_CMD] && matchKey(event, KEYS43.Z) && !event.shiftKey,
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -21031,7 +21076,7 @@ var createRedoAction = (history) => ({
     appState,
     () => history.redo(arrayToMap21(elements), appState)
   ),
-  keyTest: (event) => event[KEYS42.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS42.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS42.Y),
+  keyTest: (event) => event[KEYS43.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS43.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS43.Y),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -21064,7 +21109,7 @@ import { getFontString as getFontString6 } from "@orangecatai/common";
 import { newElementWith as newElementWith10 } from "@orangecatai/element";
 import { measureText as measureText4 } from "@orangecatai/element";
 import { isTextElement as isTextElement9 } from "@orangecatai/element";
-import { CaptureUpdateAction as CaptureUpdateAction35 } from "@orangecatai/element";
+import { CaptureUpdateAction as CaptureUpdateAction36 } from "@orangecatai/element";
 var actionTextAutoResize = register({
   name: "autoResize",
   label: "labels.autoResize",
@@ -21094,7 +21139,7 @@ var actionTextAutoResize = register({
         }
         return element;
       }),
-      captureUpdate: CaptureUpdateAction35.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction36.IMMEDIATELY
     };
   }
 });
@@ -21302,7 +21347,7 @@ import {
   rangeIntersection,
   rangesOverlap
 } from "@orangecatai/math";
-import { TOOL_TYPE, KEYS as KEYS43 } from "@orangecatai/common";
+import { TOOL_TYPE, KEYS as KEYS44 } from "@orangecatai/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
@@ -21348,7 +21393,7 @@ var isSnappingEnabled = ({
 }) => {
   if (event) {
     const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
-    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS43.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS43.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS44.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS44.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -23970,6 +24015,70 @@ var GEMINI_RATIOS = {
   "8:1": 8 / 1,
   "1:8": 1 / 8
 };
+var CUSTOM_RESIZE_DELTA_THRESHOLD = 0.2;
+var EXTREME_AR_THRESHOLD = 4;
+function ratioLogDelta(a, b) {
+  return Math.abs(Math.log(a / b));
+}
+function isBigAspectRatioDelta(targetW, targetH) {
+  const targetAR = targetW / targetH;
+  if (targetAR >= EXTREME_AR_THRESHOLD || targetAR <= 1 / EXTREME_AR_THRESHOLD) {
+    return true;
+  }
+  let minDelta = Infinity;
+  for (const value of Object.values(GEMINI_RATIOS)) {
+    const delta = ratioLogDelta(value, targetAR);
+    if (delta < minDelta) {
+      minDelta = delta;
+    }
+  }
+  return minDelta > CUSTOM_RESIZE_DELTA_THRESHOLD;
+}
+async function callCustomResizeProxy(customResizeUrl, sourceImageDataUrl, targetWidth, targetHeight, signal) {
+  const res = await fetch(customResizeUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      imageDataUrl: sourceImageDataUrl,
+      targetWidth,
+      targetHeight
+    }),
+    signal
+  });
+  if (!res.ok) {
+    const body = await res.text().catch(() => "");
+    throw new Error(
+      `Custom resize failed ${res.status}: ${body.slice(0, 300)}`
+    );
+  }
+  const data = await res.json();
+  if (typeof data?.dataUrl !== "string") {
+    throw new Error("Custom resize response missing dataUrl");
+  }
+  return data.dataUrl;
+}
+async function callTier1CropProxy(tier1CropUrl, generatedImageDataUrl, sourceImageDataUrl, targetWidth, targetHeight, signal) {
+  const res = await fetch(tier1CropUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      generatedImageDataUrl,
+      sourceImageDataUrl,
+      targetWidth,
+      targetHeight
+    }),
+    signal
+  });
+  if (!res.ok) {
+    const body = await res.text().catch(() => "");
+    throw new Error(`Tier-1 crop failed ${res.status}: ${body.slice(0, 300)}`);
+  }
+  const data = await res.json();
+  if (typeof data?.dataUrl !== "string") {
+    throw new Error("Tier-1 crop response missing dataUrl");
+  }
+  return data.dataUrl;
+}
 function nearestGeminiAspectRatio(w, h) {
   const target = w / h;
   let best = "1:1";
@@ -24209,6 +24318,7 @@ HARD REQUIREMENTS:
 \u2022 LOGO INTEGRITY: The brand logo must appear exactly as supplied \u2014 same shape, colours, and proportions. Do NOT alter, recolour, distort, or replace it. Do NOT squish or stretch the logo horizontally or vertically.
 \u2022 Do NOT squish, stretch, or distort any element horizontally or vertically \u2014 maintain the natural aspect ratio of every visual, logo, product image, and text block.
 \u2022 RE-ARRANGE the composition to suit the new aspect ratio \u2014 reposition and rescale elements so the layout feels native to ${tgtW}\xD7${tgtH}. Do NOT simply stretch, squash, or letterbox the original. If the new aspect ratio leaves empty areas after placing all elements, those areas should be filled with the background colour or a natural extension of the background \u2014 never with repeated ad content.
+\u2022 NO BORDER OR FRAME: the ad's background must extend all the way to every edge of the ${tgtW}\xD7${tgtH} canvas. Do NOT add a decorative border, outline, frame, vignette, or dim band around the ad \u2014 even as a stylistic flourish. The output should look like a single continuous ad filling the canvas, not a smaller ad pasted onto a bordered/framed backdrop.
 \u2022 Maintain professional advertising quality: balanced layout, clear visual hierarchy, generous but purposeful spacing.
 
 Output ONLY the final recomposed ad image at ${tgtW}\xD7${tgtH}.`;
@@ -24221,6 +24331,8 @@ async function runAutoResizeForDimension(opts) {
     placementY,
     app,
     autoResizeUrl,
+    customResizeUrl,
+    tier1CropUrl,
     agentImageModel,
     sourceFrame,
     sourceScreenshot,
@@ -24259,34 +24371,65 @@ async function runAutoResizeForDimension(opts) {
   if (!sourceScreenshot) {
     throw new Error("Source frame screenshot unavailable");
   }
-  const aspectRatio = nearestGeminiAspectRatio(tgtW, tgtH);
-  const resolution = clampResolutionForModel(
-    selectOptimalResolution(tgtW, tgtH, aspectRatio),
-    imageModel
-  );
-  debug(
-    `[AutoResize] ${debugLabel} \u2014 image-gen recompose (model=${imageModel}, ar=${aspectRatio}, res=${resolution}, logo=${!!brandImages?.logo}, fontPreview=${!!brandImages?.fontPreview})`
-  );
-  onProgress?.("Generating ad\u2026");
-  const prompt = buildAutoResizeImagePrompt(
-    Math.round(sourceFrame.width),
-    Math.round(sourceFrame.height),
-    tgtW,
-    tgtH,
-    aspectRatio,
-    brandImages
-  );
-  const generatedDataUrl = await callOpenRouterImageAPI(
-    prompt,
-    imageModel,
-    aspectRatio,
-    resolution,
-    false,
-    autoResizeUrl,
-    sourceScreenshot,
-    signal,
-    brandImages
-  );
+  const useBigDeltaPipeline = !!customResizeUrl && isBigAspectRatioDelta(tgtW, tgtH);
+  let generatedDataUrl;
+  let placedAtExactTargetSize = false;
+  if (useBigDeltaPipeline) {
+    debug(
+      `[AutoResize] ${debugLabel} \u2014 big AR delta, routing to Tier-2 custom-resize`
+    );
+    onProgress?.("Recomposing for extreme aspect ratio\u2026");
+    generatedDataUrl = await callCustomResizeProxy(
+      customResizeUrl,
+      sourceScreenshot,
+      tgtW,
+      tgtH,
+      signal
+    );
+    placedAtExactTargetSize = true;
+  } else {
+    const aspectRatio = nearestGeminiAspectRatio(tgtW, tgtH);
+    const resolution = clampResolutionForModel(
+      selectOptimalResolution(tgtW, tgtH, aspectRatio),
+      imageModel
+    );
+    debug(
+      `[AutoResize] ${debugLabel} \u2014 image-gen recompose (model=${imageModel}, ar=${aspectRatio}, res=${resolution}, logo=${!!brandImages?.logo}, fontPreview=${!!brandImages?.fontPreview})`
+    );
+    onProgress?.("Generating ad\u2026");
+    const prompt = buildAutoResizeImagePrompt(
+      Math.round(sourceFrame.width),
+      Math.round(sourceFrame.height),
+      tgtW,
+      tgtH,
+      aspectRatio,
+      brandImages
+    );
+    generatedDataUrl = await callOpenRouterImageAPI(
+      prompt,
+      imageModel,
+      aspectRatio,
+      resolution,
+      false,
+      autoResizeUrl,
+      sourceScreenshot,
+      signal,
+      brandImages
+    );
+    if (tier1CropUrl) {
+      debug(`[AutoResize] ${debugLabel} \u2014 Tier-1 element-aware crop`);
+      onProgress?.("Fitting ad to frame\u2026");
+      generatedDataUrl = await callTier1CropProxy(
+        tier1CropUrl,
+        generatedDataUrl,
+        sourceScreenshot,
+        tgtW,
+        tgtH,
+        signal
+      );
+      placedAtExactTargetSize = true;
+    }
+  }
   onProgress?.("Placing ad\u2026");
   const { width: imgNatW, height: imgNatH } = await getImageNaturalDimensions(
     generatedDataUrl
@@ -24296,7 +24439,7 @@ async function runAutoResizeForDimension(opts) {
     relY,
     width: imgW,
     height: imgH
-  } = fitImageToFrame(imgNatW, imgNatH, tgtW, tgtH);
+  } = placedAtExactTargetSize ? { relX: 0, relY: 0, width: tgtW, height: tgtH } : fitImageToFrame(imgNatW, imgNatH, tgtW, tgtH);
   const currentPos = getCurrentFramePosition();
   const fileId = nanoid();
   const imgEl = newImageElement({
@@ -24372,6 +24515,8 @@ async function runAutoResize(opts) {
     targetDimensions,
     app,
     autoResizeUrl,
+    customResizeUrl,
+    tier1CropUrl,
     agentImageModel,
     onBeforeAutoResize,
     onAfterAutoResize,
@@ -24438,6 +24583,8 @@ async function runAutoResize(opts) {
             existingFrameId: preCreatedFrameInfos?.[i]?.frameId,
             app,
             autoResizeUrl,
+            customResizeUrl,
+            tier1CropUrl,
             agentImageModel,
             sourceFrame,
             sourceScreenshot,
@@ -24625,6 +24772,8 @@ var AutoResizePanel = ({
   onAfterAutoResize,
   onRunningChange,
   autoResizeUrl,
+  customResizeUrl,
+  tier1CropUrl,
   chatModel,
   agentImageModel
 }) => {
@@ -24733,6 +24882,8 @@ var AutoResizePanel = ({
         preCreatedFrameInfos: preCreatedFrames.length > 0 ? preCreatedFrames : void 0,
         app,
         autoResizeUrl,
+        customResizeUrl,
+        tier1CropUrl,
         chatModel,
         agentImageModel,
         customFontMap,
@@ -24781,6 +24932,8 @@ var AutoResizePanel = ({
     onBeforeAutoResize,
     onAfterAutoResize,
     autoResizeUrl,
+    customResizeUrl,
+    tier1CropUrl,
     chatModel,
     agentImageModel
   ]);
@@ -25063,6 +25216,8 @@ var AutoResizePanelHost = ({ app }) => {
           onBeforeAutoResize: app.props.onBeforeAutoResize,
           onAfterAutoResize: app.props.onAfterAutoResize,
           autoResizeUrl: app.props.autoResizeUrl ?? "",
+          customResizeUrl: app.props.customResizeUrl,
+          tier1CropUrl: app.props.tier1CropUrl,
           chatModel: app.props.chatModel ?? "google/gemini-3.1-flash-lite-preview",
           agentImageModel: app.props.agentImageModel
         }
@@ -25502,7 +25657,7 @@ var TemplateBuilderPanelHost = ({
 import { useCallback as useCallback16, useEffect as useEffect35, useRef as useRef28, useState as useState32 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords8 } from "@orangecatai/common";
 import {
-  CaptureUpdateAction as CaptureUpdateAction36,
+  CaptureUpdateAction as CaptureUpdateAction37,
   getElementAbsoluteCoords as getElementAbsoluteCoords10
 } from "@orangecatai/element";
 import { ArrowUp, ImagePlus, X } from "lucide-react";
@@ -26679,7 +26834,7 @@ var ImageGeneratorPanel = ({
       ratio: newRatio,
       resolution: newRes
     });
-    app.syncActionResult({ captureUpdate: CaptureUpdateAction36.IMMEDIATELY });
+    app.syncActionResult({ captureUpdate: CaptureUpdateAction37.IMMEDIATELY });
   }, [selectedModel, app, element, persistFrameSettings]);
   const [isGenerating, setIsGenerating] = useState32(
     () => hasPendingGeneration(element.id)
@@ -26744,7 +26899,7 @@ var ImageGeneratorPanel = ({
         }
       });
       appRef.current.syncActionResult({
-        captureUpdate: CaptureUpdateAction36.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction37.IMMEDIATELY
       });
     },
     [selectedModel, selectedResolution]
@@ -26767,7 +26922,7 @@ var ImageGeneratorPanel = ({
         }
       });
       appRef.current.syncActionResult({
-        captureUpdate: CaptureUpdateAction36.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction37.IMMEDIATELY
       });
     },
     [selectedModel, selectedRatio]
@@ -27124,7 +27279,7 @@ var ImageGeneratorPanel = ({
 import { useCallback as useCallback17, useEffect as useEffect36, useRef as useRef29, useState as useState33 } from "react";
 import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords9 } from "@orangecatai/common";
 import {
-  CaptureUpdateAction as CaptureUpdateAction37,
+  CaptureUpdateAction as CaptureUpdateAction38,
   getElementAbsoluteCoords as getElementAbsoluteCoords11
 } from "@orangecatai/element";
 import { ArrowUp as ArrowUp2, Volume2, X as X2 } from "lucide-react";
@@ -27138,7 +27293,9 @@ async function submitVideoJob(params, videoGenUrl) {
   });
   if (!res.ok) {
     const data2 = await res.json().catch(() => ({}));
-    throw new Error(data2.error || `Submission failed (${res.status})`);
+    throw new Error(
+      data2.error || `Submission failed (${res.status})`
+    );
   }
   const data = await res.json();
   return { jobId: data.jobId };
@@ -27155,14 +27312,18 @@ async function pollVideoJob(jobId, videoGenStatusUrl, onProgress, signal) {
         const timer = setTimeout(resolve, POLL_INTERVAL_MS);
         signal?.addEventListener("abort", () => {
           clearTimeout(timer);
-          reject(Object.assign(new Error("AbortError"), { name: "AbortError" }));
+          reject(
+            Object.assign(new Error("AbortError"), { name: "AbortError" })
+          );
         });
       });
     }
     const res = await fetch(`${videoGenStatusUrl}/${jobId}`, { signal });
     if (!res.ok) {
       const data2 = await res.json().catch(() => ({}));
-      throw new Error(data2.error || `Status check failed (${res.status})`);
+      throw new Error(
+        data2.error || `Status check failed (${res.status})`
+      );
     }
     const data = await res.json();
     if (data.status === "done" && data.videoPresignedUrl) {
@@ -27257,7 +27418,15 @@ var VIDEO_MODEL_CONFIG = {
     supportsResolution: true,
     supportedResolutions: ["480p", "720p", "1080p", "4K"],
     supportsNegativePrompt: false,
-    supportedRatios: ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9", "9:21"],
+    supportedRatios: [
+      "16:9",
+      "9:16",
+      "1:1",
+      "4:3",
+      "3:4",
+      "21:9",
+      "9:21"
+    ],
     frameInputMode: "dual-frame",
     supportsInputReferences: true,
     supportsSeed: true
@@ -27274,7 +27443,15 @@ var VIDEO_MODEL_CONFIG = {
     supportsResolution: true,
     supportedResolutions: ["480p", "720p"],
     supportsNegativePrompt: false,
-    supportedRatios: ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9", "9:21"],
+    supportedRatios: [
+      "16:9",
+      "9:16",
+      "1:1",
+      "4:3",
+      "3:4",
+      "21:9",
+      "9:21"
+    ],
     frameInputMode: "dual-frame",
     supportsInputReferences: true,
     supportsSeed: true
@@ -27291,7 +27468,15 @@ var VIDEO_MODEL_CONFIG = {
     supportsResolution: true,
     supportedResolutions: ["720p", "1080p"],
     supportsNegativePrompt: false,
-    supportedRatios: ["16:9", "9:16", "1:1", "4:3", "3:4", "21:9", "9:21"],
+    supportedRatios: [
+      "16:9",
+      "9:16",
+      "1:1",
+      "4:3",
+      "3:4",
+      "21:9",
+      "9:21"
+    ],
     frameInputMode: "start-only",
     supportsInputReferences: false,
     supportsSeed: true
@@ -27308,13 +27493,23 @@ var VIDEO_MODEL_CONFIG = {
     supportsResolution: true,
     supportedResolutions: ["480p", "720p"],
     supportsNegativePrompt: false,
-    supportedRatios: ["16:9", "9:16", "1:1", "4:3", "3:4", "3:2", "2:3"],
+    supportedRatios: [
+      "16:9",
+      "9:16",
+      "1:1",
+      "4:3",
+      "3:4",
+      "3:2",
+      "2:3"
+    ],
     frameInputMode: "start-only",
     supportsInputReferences: false,
     supportsSeed: true
   }
 };
-var VIDEO_MODEL_NAMES = Object.keys(VIDEO_MODEL_CONFIG);
+var VIDEO_MODEL_NAMES = Object.keys(
+  VIDEO_MODEL_CONFIG
+);
 var RATIO_DIMS = {
   "16:9": [1280, 720],
   "9:16": [720, 1280],
@@ -27334,41 +27529,252 @@ var CAMERA_MOVEMENTS = [
   { label: "Fixed lens", phrase: "static fixed camera, no camera movement" },
   { label: "Handheld", phrase: "handheld camera with natural subtle shake" },
   { label: "Zoom out", phrase: "camera slowly zooms out from the subject" },
-  { label: "Advance", phrase: "camera slowly moves forward toward the subject" },
+  {
+    label: "Advance",
+    phrase: "camera slowly moves forward toward the subject"
+  },
   { label: "Follow", phrase: "camera tracks and follows the subject" },
   { label: "Orbit", phrase: "camera slowly orbits around the subject" },
-  { label: "Surround", phrase: "camera circles the subject in a 360-degree sweep" },
+  {
+    label: "Surround",
+    phrase: "camera circles the subject in a 360-degree sweep"
+  },
   { label: "Shake right", phrase: "camera shakes and pans to the right" },
   { label: "Shake left", phrase: "camera shakes and pans to the left" },
   { label: "Shake up", phrase: "camera shakes upward" }
 ];
-var ChevronDownIcon3 = () => /* @__PURE__ */ jsx94("svg", { width: "9", height: "9", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx94("path", { d: "M2.5 3.75L5 6.25L7.5 3.75", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var CheckIcon4 = () => /* @__PURE__ */ jsx94("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx94("path", { d: "M2.5 7.5L5.5 10.5L11.5 3.5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronDownIcon3 = () => /* @__PURE__ */ jsx94("svg", { width: "9", height: "9", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx94(
+  "path",
+  {
+    d: "M2.5 3.75L5 6.25L7.5 3.75",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var CheckIcon4 = () => /* @__PURE__ */ jsx94("svg", { width: "12", height: "12", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx94(
+  "path",
+  {
+    d: "M2.5 7.5L5.5 10.5L11.5 3.5",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
 var CameraMovementIcon = () => /* @__PURE__ */ jsxs51("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", children: [
   /* @__PURE__ */ jsx94("circle", { cx: "8", cy: "8", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
-  /* @__PURE__ */ jsx94("path", { d: "M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14M3.93 3.93l1.06 1.06M11.01 11.01l1.06 1.06M3.93 12.07l1.06-1.06M11.01 4.99l1.06-1.06", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" })
+  /* @__PURE__ */ jsx94(
+    "path",
+    {
+      d: "M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14M3.93 3.93l1.06 1.06M11.01 11.01l1.06 1.06M3.93 12.07l1.06-1.06M11.01 4.99l1.06-1.06",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round"
+    }
+  )
 ] });
-var ModelIcon2 = () => /* @__PURE__ */ jsx94("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx94("path", { d: "M8 2L10.5 5.5H13.5L11.5 8L13 11.5L8 9.5L3 11.5L4.5 8L2.5 5.5H5.5L8 2Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }) });
-var SpinnerIcon3 = () => /* @__PURE__ */ jsx94("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", className: "vgp-spinner", children: /* @__PURE__ */ jsx94("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "20 14" }) });
+var ModelIcon2 = () => /* @__PURE__ */ jsx94("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx94(
+  "path",
+  {
+    d: "M8 2L10.5 5.5H13.5L11.5 8L13 11.5L8 9.5L3 11.5L4.5 8L2.5 5.5H5.5L8 2Z",
+    stroke: "currentColor",
+    strokeWidth: "1.3",
+    strokeLinejoin: "round"
+  }
+) });
+var SpinnerIcon3 = () => /* @__PURE__ */ jsx94(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    className: "vgp-spinner",
+    children: /* @__PURE__ */ jsx94(
+      "circle",
+      {
+        cx: "7",
+        cy: "7",
+        r: "5.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeDasharray: "20 14"
+      }
+    )
+  }
+);
 var ImageUploadIcon = () => /* @__PURE__ */ jsxs51("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
-  /* @__PURE__ */ jsx94("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.3" }),
+  /* @__PURE__ */ jsx94(
+    "rect",
+    {
+      x: "2",
+      y: "2",
+      width: "12",
+      height: "12",
+      rx: "2",
+      stroke: "currentColor",
+      strokeWidth: "1.3"
+    }
+  ),
   /* @__PURE__ */ jsx94("circle", { cx: "5.5", cy: "6", r: "1.2", fill: "currentColor" }),
-  /* @__PURE__ */ jsx94("path", { d: "M2 11l3.5-3.5 2.5 2.5 2-2 3 3", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx94(
+    "path",
+    {
+      d: "M2 11l3.5-3.5 2.5 2.5 2-2 3 3",
+      stroke: "currentColor",
+      strokeWidth: "1.3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
 ] });
 var FramesIcon = () => /* @__PURE__ */ jsxs51("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", children: [
-  /* @__PURE__ */ jsx94("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.3" }),
-  /* @__PURE__ */ jsx94("line", { x1: "5", y1: "3", x2: "5", y2: "13", stroke: "currentColor", strokeWidth: "1.3" }),
-  /* @__PURE__ */ jsx94("line", { x1: "11", y1: "3", x2: "11", y2: "13", stroke: "currentColor", strokeWidth: "1.3" })
+  /* @__PURE__ */ jsx94(
+    "rect",
+    {
+      x: "1",
+      y: "3",
+      width: "14",
+      height: "10",
+      rx: "2",
+      stroke: "currentColor",
+      strokeWidth: "1.3"
+    }
+  ),
+  /* @__PURE__ */ jsx94(
+    "line",
+    {
+      x1: "5",
+      y1: "3",
+      x2: "5",
+      y2: "13",
+      stroke: "currentColor",
+      strokeWidth: "1.3"
+    }
+  ),
+  /* @__PURE__ */ jsx94(
+    "line",
+    {
+      x1: "11",
+      y1: "3",
+      x2: "11",
+      y2: "13",
+      stroke: "currentColor",
+      strokeWidth: "1.3"
+    }
+  )
 ] });
-var RatioIcon169 = () => /* @__PURE__ */ jsx94("svg", { width: "16", height: "11", viewBox: "0 0 16 11", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "14.5", height: "9.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon916 = () => /* @__PURE__ */ jsx94("svg", { width: "11", height: "16", viewBox: "0 0 11 16", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "9.5", height: "14.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon11 = () => /* @__PURE__ */ jsx94("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "11.5", height: "11.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon43 = () => /* @__PURE__ */ jsx94("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "14.5", height: "10.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon34 = () => /* @__PURE__ */ jsx94("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "10.5", height: "14.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon219 = () => /* @__PURE__ */ jsx94("svg", { width: "18", height: "8", viewBox: "0 0 18 8", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "16.5", height: "6.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon921 = () => /* @__PURE__ */ jsx94("svg", { width: "8", height: "18", viewBox: "0 0 8 18", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "6.5", height: "16.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon32 = () => /* @__PURE__ */ jsx94("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "13.5", height: "8.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
-var RatioIcon23 = () => /* @__PURE__ */ jsx94("svg", { width: "10", height: "15", viewBox: "0 0 10 15", fill: "none", children: /* @__PURE__ */ jsx94("rect", { x: "0.75", y: "0.75", width: "8.5", height: "13.5", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }) });
+var RatioIcon169 = () => /* @__PURE__ */ jsx94("svg", { width: "16", height: "11", viewBox: "0 0 16 11", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "14.5",
+    height: "9.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon916 = () => /* @__PURE__ */ jsx94("svg", { width: "11", height: "16", viewBox: "0 0 11 16", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "9.5",
+    height: "14.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon11 = () => /* @__PURE__ */ jsx94("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "11.5",
+    height: "11.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon43 = () => /* @__PURE__ */ jsx94("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "14.5",
+    height: "10.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon34 = () => /* @__PURE__ */ jsx94("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "10.5",
+    height: "14.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon219 = () => /* @__PURE__ */ jsx94("svg", { width: "18", height: "8", viewBox: "0 0 18 8", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "16.5",
+    height: "6.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon921 = () => /* @__PURE__ */ jsx94("svg", { width: "8", height: "18", viewBox: "0 0 8 18", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "6.5",
+    height: "16.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon32 = () => /* @__PURE__ */ jsx94("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "13.5",
+    height: "8.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
+var RatioIcon23 = () => /* @__PURE__ */ jsx94("svg", { width: "10", height: "15", viewBox: "0 0 10 15", fill: "none", children: /* @__PURE__ */ jsx94(
+  "rect",
+  {
+    x: "0.75",
+    y: "0.75",
+    width: "8.5",
+    height: "13.5",
+    rx: "1.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }
+) });
 var RATIO_ICONS = {
   "16:9": /* @__PURE__ */ jsx94(RatioIcon169, {}),
   "9:16": /* @__PURE__ */ jsx94(RatioIcon916, {}),
@@ -27391,8 +27797,9 @@ var VideoGeneratorPanel = ({
   const videoGenStatusUrl = app.props.videoGenStatusUrl;
   const getStoredSettings = (frame) => {
     const stored2 = frame.customData?.videoGenerator;
-    if (!stored2)
+    if (!stored2) {
       return null;
+    }
     return {
       model: stored2.model,
       ratio: stored2.ratio,
@@ -27407,20 +27814,25 @@ var VideoGeneratorPanel = ({
   const defaultRatio = stored?.ratio ?? "16:9";
   const defaultResolution = stored?.resolution ?? (modelCfg.supportsResolution ? VIDEO_MODEL_CONFIG[defaultModel].supportedResolutions?.[1] ?? void 0 : void 0);
   const defaultDuration = (() => {
-    if (stored?.duration != null)
+    if (stored?.duration != null) {
       return stored.duration;
-    if (!modelCfg.supportsDuration)
+    }
+    if (!modelCfg.supportsDuration) {
       return void 0;
+    }
     const cfg2 = modelCfg;
-    if (cfg2.durationMode === "choices")
+    if (cfg2.durationMode === "choices") {
       return cfg2.durationValues?.[0];
+    }
     return cfg2.minDuration ?? 5;
   })();
   const [prompt, setPrompt] = useState33("");
   const [selectedModel, setSelectedModel] = useState33(defaultModel);
   const [selectedRatio, setSelectedRatio] = useState33(defaultRatio);
   const [selectedResolution, setSelectedResolution] = useState33(defaultResolution);
-  const [selectedDuration, setSelectedDuration] = useState33(defaultDuration);
+  const [selectedDuration, setSelectedDuration] = useState33(
+    defaultDuration
+  );
   const [generateAudio, setGenerateAudio] = useState33(true);
   const [negativePrompt, setNegativePrompt] = useState33("");
   const [firstFrame, setFirstFrame] = useState33(null);
@@ -27428,7 +27840,9 @@ var VideoGeneratorPanel = ({
   const [inputReferences, setInputReferences] = useState33([]);
   const [seed, setSeed] = useState33(void 0);
   const [inputMode, setInputMode] = useState33("frames");
-  const [cameraMovement, setCameraMovement] = useState33(stored?.cameraMovement ?? null);
+  const [cameraMovement, setCameraMovement] = useState33(
+    stored?.cameraMovement ?? null
+  );
   const [genStatus, setGenStatus] = useState33("idle");
   const [progress, setProgress] = useState33(0);
   const [generateError, setGenerateError] = useState33(null);
@@ -27479,7 +27893,9 @@ var VideoGeneratorPanel = ({
       } else {
         const min = ncfg.minDuration ?? 3;
         const max = ncfg.maxDuration ?? 15;
-        setSelectedDuration(Math.min(max, Math.max(min, selectedDuration ?? min)));
+        setSelectedDuration(
+          Math.min(max, Math.max(min, selectedDuration ?? min))
+        );
       }
     } else {
       setSelectedDuration(void 0);
@@ -27511,13 +27927,15 @@ var VideoGeneratorPanel = ({
     return () => document.removeEventListener("mousedown", handler);
   }, []);
   useEffect36(() => {
-    if (!element.customData?.videoGeneratorAutoFitPending)
+    if (!element.customData?.videoGeneratorAutoFitPending) {
       return;
+    }
     let frameId = 0;
     let cancelled = false;
     const run = () => {
-      if (cancelled)
+      if (cancelled) {
         return;
+      }
       app.scrollToContent(element, {
         fitToViewport: true,
         viewportZoomFactor: 0.8,
@@ -27546,12 +27964,19 @@ var VideoGeneratorPanel = ({
         videoGenerator: settings
       }
     });
-    appRef.current.syncActionResult({ captureUpdate: CaptureUpdateAction37.IMMEDIATELY });
+    appRef.current.syncActionResult({
+      captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+    });
   }, []);
   const applyRatioResize = useCallback17((newRatio) => {
     const [w, h] = RATIO_DIMS[newRatio] ?? [1280, 720];
-    appRef.current.scene.mutateElement(elementRef.current, { width: w, height: h });
-    appRef.current.syncActionResult({ captureUpdate: CaptureUpdateAction37.IMMEDIATELY });
+    appRef.current.scene.mutateElement(elementRef.current, {
+      width: w,
+      height: h
+    });
+    appRef.current.syncActionResult({
+      captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+    });
     window.requestAnimationFrame(() => {
       appRef.current.scrollToContent(elementRef.current, {
         fitToViewport: true,
@@ -27564,31 +27989,39 @@ var VideoGeneratorPanel = ({
   const handleFrameUpload = useCallback17(
     (which) => (e) => {
       const file2 = e.target.files?.[0];
-      if (!file2)
+      if (!file2) {
         return;
+      }
       const reader = new FileReader();
       reader.onload = () => {
-        if (which === "first")
+        if (which === "first") {
           setFirstFrame(reader.result);
-        else
+        } else {
           setLastFrame(reader.result);
+        }
+      };
+      reader.readAsDataURL(file2);
+      e.target.value = "";
+    },
+    []
+  );
+  const handleRefUpload = useCallback17(
+    (e) => {
+      const file2 = e.target.files?.[0];
+      if (!file2) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        setInputReferences(
+          (prev) => [...prev, reader.result].slice(0, 3)
+        );
       };
       reader.readAsDataURL(file2);
       e.target.value = "";
     },
     []
   );
-  const handleRefUpload = useCallback17((e) => {
-    const file2 = e.target.files?.[0];
-    if (!file2)
-      return;
-    const reader = new FileReader();
-    reader.onload = () => {
-      setInputReferences((prev) => [...prev, reader.result].slice(0, 3));
-    };
-    reader.readAsDataURL(file2);
-    e.target.value = "";
-  }, []);
   const isGenerating = genStatus === "submitting" || genStatus === "polling";
   const handleStop = useCallback17(() => {
     abortControllerRef.current?.abort();
@@ -27611,7 +28044,9 @@ var VideoGeneratorPanel = ({
       try {
         const { allowed, error } = await onBeforeVideoGen();
         if (!allowed) {
-          setGenerateError(error || "Insufficient credits for video generation");
+          setGenerateError(
+            error || "Insufficient credits for video generation"
+          );
           setGenStatus("error");
           return;
         }
@@ -27635,7 +28070,9 @@ var VideoGeneratorPanel = ({
           ...selectedDuration != null && { duration: selectedDuration },
           ...selectedResolution != null && { resolution: selectedResolution },
           ...firstFrame && { firstFrameDataUrl: firstFrame },
-          ...lastFrame && currentCfg.supportsLastFrame && currentCfg.frameInputMode === "dual-frame" && { lastFrameDataUrl: lastFrame },
+          ...lastFrame && currentCfg.supportsLastFrame && currentCfg.frameInputMode === "dual-frame" && {
+            lastFrameDataUrl: lastFrame
+          },
           ...currentCfg.audioMode === "toggle" && { audio: generateAudio },
           ...negativePrompt.trim() && currentCfg.supportsNegativePrompt && {
             negativePrompt: negativePrompt.trim()
@@ -27654,7 +28091,10 @@ var VideoGeneratorPanel = ({
         (p) => setProgress(p),
         controller.signal
       );
-      appRef.current.insertGeneratedVideoIntoFrame(videoPresignedUrl, elementRef.current);
+      appRef.current.insertGeneratedVideoIntoFrame(
+        videoPresignedUrl,
+        elementRef.current
+      );
       persistSettings({
         model: selectedModel,
         ratio: selectedRatio,
@@ -27671,7 +28111,9 @@ var VideoGeneratorPanel = ({
       if (err instanceof Error && err.name === "AbortError") {
         setGenStatus("idle");
       } else {
-        setGenerateError(err instanceof Error ? err.message : "Generation failed");
+        setGenerateError(
+          err instanceof Error ? err.message : "Generation failed"
+        );
         setGenStatus("error");
       }
     } finally {
@@ -27743,9 +28185,36 @@ var VideoGeneratorPanel = ({
   const durationMax = cfgDuration.maxDuration ?? 15;
   const currentDuration = selectedDuration ?? (isDurationChoices ? durationChoices[0] : durationMin);
   return /* @__PURE__ */ jsxs51(Fragment15, { children: [
-    /* @__PURE__ */ jsx94("input", { ref: firstFrameInputRef, type: "file", accept: "image/*", onChange: handleFrameUpload("first"), style: { display: "none" } }),
-    /* @__PURE__ */ jsx94("input", { ref: lastFrameInputRef, type: "file", accept: "image/*", onChange: handleFrameUpload("last"), style: { display: "none" } }),
-    /* @__PURE__ */ jsx94("input", { ref: inputRefUploadRef, type: "file", accept: "image/*", onChange: handleRefUpload, style: { display: "none" } }),
+    /* @__PURE__ */ jsx94(
+      "input",
+      {
+        ref: firstFrameInputRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleFrameUpload("first"),
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx94(
+      "input",
+      {
+        ref: lastFrameInputRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleFrameUpload("last"),
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx94(
+      "input",
+      {
+        ref: inputRefUploadRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleRefUpload,
+        style: { display: "none" }
+      }
+    ),
     isGenerating && /* @__PURE__ */ jsx94(
       "div",
       {
@@ -27827,22 +28296,32 @@ var VideoGeneratorPanel = ({
                 ))
               ] }),
               showRefChips && /* @__PURE__ */ jsxs51("div", { className: "vgp-chips-row", children: [
-                inputReferences.map((ref, i) => /* @__PURE__ */ jsxs51("div", { className: "vgp-chip vgp-chip--set", title: `Reference ${i + 1}`, children: [
-                  /* @__PURE__ */ jsx94("img", { src: ref, alt: "", className: "vgp-chip-thumb" }),
-                  /* @__PURE__ */ jsxs51("span", { className: "vgp-chip-label", children: [
-                    "Ref ",
-                    i + 1
-                  ] }),
-                  /* @__PURE__ */ jsx94(
-                    "button",
-                    {
-                      className: "vgp-chip-remove",
-                      onClick: () => setInputReferences((prev) => prev.filter((_, j) => j !== i)),
-                      disabled: isGenerating,
-                      children: /* @__PURE__ */ jsx94(X2, { size: 9 })
-                    }
-                  )
-                ] }, i)),
+                inputReferences.map((ref, i) => /* @__PURE__ */ jsxs51(
+                  "div",
+                  {
+                    className: "vgp-chip vgp-chip--set",
+                    title: `Reference ${i + 1}`,
+                    children: [
+                      /* @__PURE__ */ jsx94("img", { src: ref, alt: "", className: "vgp-chip-thumb" }),
+                      /* @__PURE__ */ jsxs51("span", { className: "vgp-chip-label", children: [
+                        "Ref ",
+                        i + 1
+                      ] }),
+                      /* @__PURE__ */ jsx94(
+                        "button",
+                        {
+                          className: "vgp-chip-remove",
+                          onClick: () => setInputReferences(
+                            (prev) => prev.filter((_, j) => j !== i)
+                          ),
+                          disabled: isGenerating,
+                          children: /* @__PURE__ */ jsx94(X2, { size: 9 })
+                        }
+                      )
+                    ]
+                  },
+                  i
+                )),
                 inputReferences.length < 3 && /* @__PURE__ */ jsxs51(
                   "button",
                   {
@@ -27868,7 +28347,13 @@ var VideoGeneratorPanel = ({
               isGenerating && /* @__PURE__ */ jsxs51("div", { className: "vgp-status", children: [
                 /* @__PURE__ */ jsx94(SpinnerIcon3, {}),
                 /* @__PURE__ */ jsx94("span", { className: "vgp-status-text", children: genStatus === "submitting" ? "Submitting\u2026" : progress > 0 ? `Generating\u2026 ${Math.round(progress * 100)}%` : "Generating\u2026" }),
-                progress > 0 && /* @__PURE__ */ jsx94("div", { className: "vgp-progress-wrap", children: /* @__PURE__ */ jsx94("div", { className: "vgp-progress-bar", style: { width: `${Math.round(progress * 100)}%` } }) })
+                progress > 0 && /* @__PURE__ */ jsx94("div", { className: "vgp-progress-wrap", children: /* @__PURE__ */ jsx94(
+                  "div",
+                  {
+                    className: "vgp-progress-bar",
+                    style: { width: `${Math.round(progress * 100)}%` }
+                  }
+                ) })
               ] }),
               /* @__PURE__ */ jsxs51(PromptInputActions, { className: "vgp-actions", children: [
                 /* @__PURE__ */ jsxs51("div", { className: "vgp-actions-left", children: [
@@ -27944,10 +28429,17 @@ var VideoGeneratorPanel = ({
                         ]
                       }
                     ),
-                    frameTypeOpen && /* @__PURE__ */ jsx94("div", { className: "vgp-dropdown vgp-dropdown--up vgp-dropdown--left", children: /* @__PURE__ */ jsxs51("button", { className: "vgp-dropdown-item", onClick: () => setFrameTypeOpen(false), children: [
-                      /* @__PURE__ */ jsx94("span", { style: { flex: 1 }, children: frameTypeLabel }),
-                      /* @__PURE__ */ jsx94("span", { className: "vgp-check", children: /* @__PURE__ */ jsx94(CheckIcon4, {}) })
-                    ] }) })
+                    frameTypeOpen && /* @__PURE__ */ jsx94("div", { className: "vgp-dropdown vgp-dropdown--up vgp-dropdown--left", children: /* @__PURE__ */ jsxs51(
+                      "button",
+                      {
+                        className: "vgp-dropdown-item",
+                        onClick: () => setFrameTypeOpen(false),
+                        children: [
+                          /* @__PURE__ */ jsx94("span", { style: { flex: 1 }, children: frameTypeLabel }),
+                          /* @__PURE__ */ jsx94("span", { className: "vgp-check", children: /* @__PURE__ */ jsx94(CheckIcon4, {}) })
+                        ]
+                      }
+                    ) })
                   ] }),
                   /* @__PURE__ */ jsxs51("div", { className: "vgp-dropdown-root", ref: cameraDropdownRef, children: [
                     /* @__PURE__ */ jsxs51(
@@ -27976,7 +28468,13 @@ var VideoGeneratorPanel = ({
                           onClick: () => {
                             setCameraMovement(null);
                             setCameraOpen(false);
-                            persistSettings({ model: selectedModel, ratio: selectedRatio, resolution: selectedResolution, duration: selectedDuration, cameraMovement: void 0 });
+                            persistSettings({
+                              model: selectedModel,
+                              ratio: selectedRatio,
+                              resolution: selectedResolution,
+                              duration: selectedDuration,
+                              cameraMovement: void 0
+                            });
                           },
                           children: [
                             /* @__PURE__ */ jsx94("span", { style: { flex: 1 }, children: "None" }),
@@ -27992,7 +28490,13 @@ var VideoGeneratorPanel = ({
                           onClick: () => {
                             setCameraMovement(label);
                             setCameraOpen(false);
-                            persistSettings({ model: selectedModel, ratio: selectedRatio, resolution: selectedResolution, duration: selectedDuration, cameraMovement: label });
+                            persistSettings({
+                              model: selectedModel,
+                              ratio: selectedRatio,
+                              resolution: selectedResolution,
+                              duration: selectedDuration,
+                              cameraMovement: label
+                            });
                           },
                           children: [
                             /* @__PURE__ */ jsx94("span", { style: { flex: 1 }, children: label }),
@@ -28031,7 +28535,12 @@ var VideoGeneratorPanel = ({
                             className: `vgp-pill${selectedResolution === res ? " vgp-pill--active" : ""}`,
                             onClick: () => {
                               setSelectedResolution(res);
-                              persistSettings({ model: selectedModel, ratio: selectedRatio, resolution: res, duration: selectedDuration });
+                              persistSettings({
+                                model: selectedModel,
+                                ratio: selectedRatio,
+                                resolution: res,
+                                duration: selectedDuration
+                              });
                             },
                             children: res
                           },
@@ -28046,7 +28555,12 @@ var VideoGeneratorPanel = ({
                             className: `vgp-pill vgp-pill--ratio${selectedRatio === r ? " vgp-pill--active" : ""}`,
                             onClick: () => {
                               setSelectedRatio(r);
-                              persistSettings({ model: selectedModel, ratio: r, resolution: selectedResolution, duration: selectedDuration });
+                              persistSettings({
+                                model: selectedModel,
+                                ratio: r,
+                                resolution: selectedResolution,
+                                duration: selectedDuration
+                              });
                               applyRatioResize(r);
                             },
                             children: [
@@ -28065,7 +28579,12 @@ var VideoGeneratorPanel = ({
                             className: `vgp-pill${currentDuration === v ? " vgp-pill--active" : ""}`,
                             onClick: () => {
                               setSelectedDuration(v);
-                              persistSettings({ model: selectedModel, ratio: selectedRatio, resolution: selectedResolution, duration: v });
+                              persistSettings({
+                                model: selectedModel,
+                                ratio: selectedRatio,
+                                resolution: selectedResolution,
+                                duration: v
+                              });
                             },
                             children: [
                               v,
@@ -28094,7 +28613,12 @@ var VideoGeneratorPanel = ({
                             onChange: (e) => {
                               const v = Number(e.target.value);
                               setSelectedDuration(v);
-                              persistSettings({ model: selectedModel, ratio: selectedRatio, resolution: selectedResolution, duration: v });
+                              persistSettings({
+                                model: selectedModel,
+                                ratio: selectedRatio,
+                                resolution: selectedResolution,
+                                duration: v
+                              });
                             }
                           }
                         )
@@ -28106,7 +28630,18 @@ var VideoGeneratorPanel = ({
                           {
                             className: "vgp-toggle-btn",
                             onClick: () => setGenerateAudio((v) => !v),
-                            children: /* @__PURE__ */ jsx94("div", { className: `vgp-toggle-track${generateAudio ? " vgp-toggle-track--on" : ""}`, children: /* @__PURE__ */ jsx94("div", { className: `vgp-toggle-thumb${generateAudio ? " vgp-toggle-thumb--on" : ""}` }) })
+                            children: /* @__PURE__ */ jsx94(
+                              "div",
+                              {
+                                className: `vgp-toggle-track${generateAudio ? " vgp-toggle-track--on" : ""}`,
+                                children: /* @__PURE__ */ jsx94(
+                                  "div",
+                                  {
+                                    className: `vgp-toggle-thumb${generateAudio ? " vgp-toggle-thumb--on" : ""}`
+                                  }
+                                )
+                              }
+                            )
                           }
                         )
                       ] }),
@@ -28142,7 +28677,9 @@ var VideoGeneratorPanel = ({
                             min: 0,
                             onChange: (e) => {
                               const v = e.target.value;
-                              setSeed(v === "" ? void 0 : Math.max(0, parseInt(v, 10)));
+                              setSeed(
+                                v === "" ? void 0 : Math.max(0, parseInt(v, 10))
+                              );
                             }
                           }
                         )
@@ -28184,7 +28721,12 @@ var VideoGeneratorPanel = ({
                         className: "vgp-dropdown-item",
                         onClick: () => {
                           setSelectedModel(m);
-                          persistSettings({ model: m, ratio: selectedRatio, resolution: selectedResolution, duration: selectedDuration });
+                          persistSettings({
+                            model: m,
+                            ratio: selectedRatio,
+                            resolution: selectedResolution,
+                            duration: selectedDuration
+                          });
                           setModelOpen(false);
                         },
                         children: [
@@ -29467,7 +30009,7 @@ var isRenderThrottlingEnabled = (() => {
 // wysiwyg/textWysiwyg.tsx
 import {
   CODES as CODES12,
-  KEYS as KEYS44,
+  KEYS as KEYS45,
   CLASSES as CLASSES7,
   POINTER_BUTTON,
   THEME as THEME11,
@@ -29782,7 +30324,7 @@ var textWysiwyg = ({
       app.actionManager.executeAction(actionDecreaseFontSize);
     } else if (actionIncreaseFontSize.keyTest(event)) {
       app.actionManager.executeAction(actionIncreaseFontSize);
-    } else if (event.key === KEYS44.ESCAPE) {
+    } else if (event.key === KEYS45.ESCAPE) {
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
@@ -29790,14 +30332,14 @@ var textWysiwyg = ({
       event.preventDefault();
       handleSubmit();
       app.actionManager.executeAction(actionSaveToActiveFile);
-    } else if (event.key === KEYS44.ENTER && event[KEYS44.CTRL_OR_CMD]) {
+    } else if (event.key === KEYS45.ENTER && event[KEYS45.CTRL_OR_CMD]) {
       event.preventDefault();
       if (event.isComposing || event.keyCode === 229) {
         return;
       }
       submittedViaKeyboard = true;
       handleSubmit();
-    } else if (event.key === KEYS44.TAB || event[KEYS44.CTRL_OR_CMD] && (event.code === CODES12.BRACKET_LEFT || event.code === CODES12.BRACKET_RIGHT)) {
+    } else if (event.key === KEYS45.TAB || event[KEYS45.CTRL_OR_CMD] && (event.code === CODES12.BRACKET_LEFT || event.code === CODES12.BRACKET_RIGHT)) {
       event.preventDefault();
       if (event.isComposing) {
         return;
@@ -30639,7 +31181,7 @@ import React43 from "react";
 // components/Popover.tsx
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef31, useEffect as useEffect38 } from "react";
 import { unstable_batchedUpdates as unstable_batchedUpdates2 } from "react-dom";
-import { KEYS as KEYS45, queryFocusableElements as queryFocusableElements2 } from "@orangecatai/common";
+import { KEYS as KEYS46, queryFocusableElements as queryFocusableElements2 } from "@orangecatai/common";
 import clsx38 from "clsx";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var Popover8 = ({
@@ -30664,7 +31206,7 @@ var Popover8 = ({
       container.focus();
     }
     const handleKeyDown = (event) => {
-      if (event.key === KEYS45.TAB) {
+      if (event.key === KEYS46.TAB) {
         const focusableElements = queryFocusableElements2(container);
         const { activeElement } = document;
         const currentIndex = focusableElements.findIndex(
@@ -30965,11 +31507,11 @@ var LockButton = (props) => {
 // components/MobileToolBar.tsx
 import { useState as useState37, useEffect as useEffect40 } from "react";
 import clsx43 from "clsx";
-import { KEYS as KEYS47, capitalizeString as capitalizeString4 } from "@orangecatai/common";
+import { KEYS as KEYS48, capitalizeString as capitalizeString4 } from "@orangecatai/common";
 
 // components/HandButton.tsx
 import clsx42 from "clsx";
-import { KEYS as KEYS46 } from "@orangecatai/common";
+import { KEYS as KEYS47 } from "@orangecatai/common";
 import { jsx as jsx103 } from "react/jsx-runtime";
 var HandButton = (props) => {
   return /* @__PURE__ */ jsx103(
@@ -30981,9 +31523,9 @@ var HandButton = (props) => {
       name: "editor-current-shape",
       checked: props.checked,
       title: `${props.title} \u2014 H`,
-      keyBindingLabel: !props.isMobile ? KEYS46.H.toLocaleUpperCase() : void 0,
+      keyBindingLabel: !props.isMobile ? KEYS47.H.toLocaleUpperCase() : void 0,
       "aria-label": `${props.title} \u2014 H`,
-      "aria-keyshortcuts": KEYS46.H,
+      "aria-keyshortcuts": KEYS47.H,
       "data-testid": `toolbar-hand`,
       onChange: () => props.onChange?.()
     }
@@ -31301,7 +31843,7 @@ var MobileToolBar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "text" }),
                     icon: TextIcon,
-                    shortcut: KEYS47.T.toLocaleUpperCase(),
+                    shortcut: KEYS48.T.toLocaleUpperCase(),
                     "data-testid": "toolbar-text",
                     selected: activeTool.type === "text",
                     children: t("toolBar.text")
@@ -31322,7 +31864,7 @@ var MobileToolBar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "frame" }),
                     icon: frameToolIcon,
-                    shortcut: KEYS47.F.toLocaleUpperCase(),
+                    shortcut: KEYS48.F.toLocaleUpperCase(),
                     "data-testid": "toolbar-frame",
                     selected: frameToolSelected,
                     children: t("toolBar.frame")
@@ -31345,7 +31887,7 @@ var MobileToolBar = ({
                     icon: laserPointerToolIcon,
                     "data-testid": "toolbar-laser",
                     selected: laserToolSelected,
-                    shortcut: KEYS47.K.toLocaleUpperCase(),
+                    shortcut: KEYS48.K.toLocaleUpperCase(),
                     children: t("toolBar.laser")
                   }
                 ),
@@ -32547,7 +33089,7 @@ import {
   CLASSES as CLASSES8,
   EVENT as EVENT10,
   isDevEnv as isDevEnv7,
-  KEYS as KEYS48,
+  KEYS as KEYS49,
   updateObject
 } from "@orangecatai/common";
 
@@ -32787,7 +33329,7 @@ var SidebarInner = forwardRef6(
     );
     useEffect43(() => {
       const handleKeyDown = (event) => {
-        if (event.key === KEYS48.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
+        if (event.key === KEYS49.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
           closeLibrary();
         }
       };
@@ -33748,7 +34290,7 @@ import {
 import { isElementCompletelyInViewport } from "@orangecatai/element";
 import { measureText as measureText5 } from "@orangecatai/element";
 import {
-  KEYS as KEYS49,
+  KEYS as KEYS50,
   randomInteger as randomInteger3,
   addEventListener as addEventListener2,
   getFontString as getFontString8
@@ -33921,7 +34463,7 @@ var SearchMenu2 = () => {
   });
   useEffect44(() => {
     const eventHandler = (event) => {
-      if (event.key === KEYS49.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
+      if (event.key === KEYS50.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
         event.preventDefault();
         event.stopPropagation();
         setAppState({
@@ -33929,7 +34471,7 @@ var SearchMenu2 = () => {
         });
         return;
       }
-      if (event[KEYS49.CTRL_OR_CMD] && event.key === KEYS49.F) {
+      if (event[KEYS50.CTRL_OR_CMD] && event.key === KEYS50.F) {
         event.preventDefault();
         event.stopPropagation();
         if (app.state.openDialog) {
@@ -33947,14 +34489,14 @@ var SearchMenu2 = () => {
       }
       if (event.target instanceof HTMLElement && event.target.closest(".layer-ui__search")) {
         if (stableState.searchMatches.items.length) {
-          if (event.key === KEYS49.ENTER) {
+          if (event.key === KEYS50.ENTER) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
-          if (event.key === KEYS49.ARROW_UP) {
+          if (event.key === KEYS50.ARROW_UP) {
             event.stopPropagation();
             stableState.goToPreviousItem();
-          } else if (event.key === KEYS49.ARROW_DOWN) {
+          } else if (event.key === KEYS50.ARROW_DOWN) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
@@ -34431,7 +34973,7 @@ import { EDITOR_LS_KEYS as EDITOR_LS_KEYS3, debounce as debounce3, isDevEnv as i
 
 // components/TTDDialog/TTDDialogInput.tsx
 import { useEffect as useEffect45, useRef as useRef38 } from "react";
-import { EVENT as EVENT12, KEYS as KEYS50 } from "@orangecatai/common";
+import { EVENT as EVENT12, KEYS as KEYS51 } from "@orangecatai/common";
 import { jsx as jsx132 } from "react/jsx-runtime";
 var TTDDialogInput = ({
   input,
@@ -34449,7 +34991,7 @@ var TTDDialogInput = ({
     const textarea = ref.current;
     if (textarea) {
       const handleKeyDown = (event) => {
-        if (event[KEYS50.CTRL_OR_CMD] && event.key === KEYS50.ENTER) {
+        if (event[KEYS51.CTRL_OR_CMD] && event.key === KEYS51.ENTER) {
           event.preventDefault();
           callbackRef.current?.();
         }
@@ -34840,7 +35382,7 @@ import { useRef as useRef44 } from "react";
 
 // components/TTDDialog/Chat/ChatInterface.tsx
 import { useRef as useRef40, useEffect as useEffect48, useLayoutEffect as useLayoutEffect10 } from "react";
-import { KEYS as KEYS51 } from "@orangecatai/common";
+import { KEYS as KEYS52 } from "@orangecatai/common";
 
 // components/TTDDialog/TTDWelcomeMessage.tsx
 import { jsx as jsx138, jsxs as jsxs83 } from "react/jsx-runtime";
@@ -35053,7 +35595,7 @@ var ChatInterface = ({
     onPromptChange("");
   };
   const handleKeyDown = (event) => {
-    if (event.key === KEYS51.ENTER && !event.shiftKey) {
+    if (event.key === KEYS52.ENTER && !event.shiftKey) {
       event.preventDefault();
       if (!isGenerating) {
         handleSubmit();
@@ -36403,9 +36945,9 @@ import { updateBindings as updateBindings3 } from "@orangecatai/element";
 // components/Stats/DragInput.tsx
 import clsx60 from "clsx";
 import { useEffect as useEffect52, useRef as useRef46, useState as useState48 } from "react";
-import { EVENT as EVENT13, KEYS as KEYS52, cloneJSON as cloneJSON3 } from "@orangecatai/common";
+import { EVENT as EVENT13, KEYS as KEYS53, cloneJSON as cloneJSON3 } from "@orangecatai/common";
 import { deepCopyElement as deepCopyElement4 } from "@orangecatai/element";
-import { CaptureUpdateAction as CaptureUpdateAction38 } from "@orangecatai/element";
+import { CaptureUpdateAction as CaptureUpdateAction39 } from "@orangecatai/element";
 
 // components/Stats/utils.ts
 import { pointFrom as pointFrom23, pointRotateRads as pointRotateRads16 } from "@orangecatai/math";
@@ -36615,7 +37157,7 @@ var StatsDragInput = ({
         setAppState
       });
       app.syncActionResult({
-        captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
       });
     }
   };
@@ -36723,7 +37265,7 @@ var StatsDragInput = ({
                     false
                   );
                   app.syncActionResult({
-                    captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+                    captureUpdate: CaptureUpdateAction39.IMMEDIATELY
                   });
                   dragFinishedCallback?.({
                     app,
@@ -36762,7 +37304,7 @@ var StatsDragInput = ({
             onKeyDown: (event) => {
               if (editable) {
                 const eventTarget = event.target;
-                if (eventTarget instanceof HTMLInputElement && event.key === KEYS52.ENTER) {
+                if (eventTarget instanceof HTMLInputElement && event.key === KEYS53.ENTER) {
                   handleInputValue(eventTarget.value, elements, appState);
                   app.focusContainer();
                 }
@@ -38493,7 +39035,7 @@ var StatsInner = memo5(
 
 // components/ElementLinkDialog.tsx
 import { useCallback as useCallback26, useEffect as useEffect54, useState as useState50 } from "react";
-import { normalizeLink as normalizeLink2, KEYS as KEYS53 } from "@orangecatai/common";
+import { normalizeLink as normalizeLink2, KEYS as KEYS54 } from "@orangecatai/common";
 import {
   defaultGetElementLinkFromSelection as defaultGetElementLinkFromSelection2,
   getLinkIdAndTypeFromSelection as getLinkIdAndTypeFromSelection2
@@ -38549,10 +39091,10 @@ var ElementLinkDialog = ({
   }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
   useEffect54(() => {
     const handleKeyDown = (event) => {
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS53.ENTER) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS54.ENTER) {
         handleConfirm();
       }
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS53.ESCAPE) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS54.ESCAPE) {
         onClose?.();
       }
     };
@@ -38578,7 +39120,7 @@ var ElementLinkDialog = ({
             setNextLink(value);
           },
           onKeyDown: (event) => {
-            if (event.key === KEYS53.ENTER) {
+            if (event.key === KEYS54.ENTER) {
               handleConfirm();
             }
           },
@@ -38658,7 +39200,7 @@ var ErrorDialog = ({
 // components/HelpDialog.tsx
 import React54 from "react";
 import { isDarwin as isDarwin4, isFirefox as isFirefox3, isWindows as isWindows2 } from "@orangecatai/common";
-import { KEYS as KEYS54 } from "@orangecatai/common";
+import { KEYS as KEYS55 } from "@orangecatai/common";
 import { Fragment as Fragment32, jsx as jsx163, jsxs as jsxs93 } from "react/jsx-runtime";
 var Header = () => /* @__PURE__ */ jsxs93("div", { className: "HelpDialog__header", children: [
   /* @__PURE__ */ jsxs93(
@@ -38771,78 +39313,78 @@ var HelpDialog = ({ onClose }) => {
               className: "HelpDialog__island--tools",
               caption: t("helpDialog.tools"),
               children: [
-                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS54.H] }),
+                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS55.H] }),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.selection"),
-                    shortcuts: [KEYS54.V, KEYS54["1"]]
+                    shortcuts: [KEYS55.V, KEYS55["1"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.rectangle"),
-                    shortcuts: [KEYS54.R, KEYS54["2"]]
+                    shortcuts: [KEYS55.R, KEYS55["2"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.diamond"),
-                    shortcuts: [KEYS54.D, KEYS54["3"]]
+                    shortcuts: [KEYS55.D, KEYS55["3"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.ellipse"),
-                    shortcuts: [KEYS54.O, KEYS54["4"]]
+                    shortcuts: [KEYS55.O, KEYS55["4"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.arrow"),
-                    shortcuts: [KEYS54.A, KEYS54["5"]]
+                    shortcuts: [KEYS55.A, KEYS55["5"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.line"),
-                    shortcuts: [KEYS54.L, KEYS54["6"]]
+                    shortcuts: [KEYS55.L, KEYS55["6"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.freedraw"),
-                    shortcuts: [KEYS54.P, KEYS54["7"]]
+                    shortcuts: [KEYS55.P, KEYS55["7"]]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.text"),
-                    shortcuts: [KEYS54.T, KEYS54["8"]]
+                    shortcuts: [KEYS55.T, KEYS55["8"]]
                   }
                 ),
-                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.image"), shortcuts: [KEYS54["9"]] }),
+                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.image"), shortcuts: [KEYS55["9"]] }),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("toolBar.eraser"),
-                    shortcuts: [KEYS54.E, KEYS54["0"]]
+                    shortcuts: [KEYS55.E, KEYS55["0"]]
                   }
                 ),
-                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.frame"), shortcuts: [KEYS54.F] }),
-                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.laser"), shortcuts: [KEYS54.K] }),
+                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.frame"), shortcuts: [KEYS55.F] }),
+                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.laser"), shortcuts: [KEYS55.K] }),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
                     label: t("labels.eyeDropper"),
-                    shortcuts: [KEYS54.I, "Shift+S", "Shift+G"]
+                    shortcuts: [KEYS55.I, "Shift+S", "Shift+G"]
                   }
                 ),
                 /* @__PURE__ */ jsx163(
@@ -38921,7 +39463,7 @@ var HelpDialog = ({ onClose }) => {
                     isOr: true
                   }
                 ),
-                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS54.Q] }),
+                /* @__PURE__ */ jsx163(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS55.Q] }),
                 /* @__PURE__ */ jsx163(
                   Shortcut,
                   {
@@ -40662,40 +41204,108 @@ var PauseIcon = () => /* @__PURE__ */ jsxs99("svg", { width: "15", height: "15",
 ] });
 var VolumeIcon = ({ level }) => {
   if (level === 0) {
-    return /* @__PURE__ */ jsxs99("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
-      /* @__PURE__ */ jsx172("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
-      /* @__PURE__ */ jsx172("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
-    ] });
+    return /* @__PURE__ */ jsxs99(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+          /* @__PURE__ */ jsx172("line", { x1: "23", y1: "9", x2: "17", y2: "15" }),
+          /* @__PURE__ */ jsx172("line", { x1: "17", y1: "9", x2: "23", y2: "15" })
+        ]
+      }
+    );
   }
   if (level < 0.5) {
-    return /* @__PURE__ */ jsxs99("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
-      /* @__PURE__ */ jsx172("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-    ] });
+    return /* @__PURE__ */ jsxs99(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+          /* @__PURE__ */ jsx172("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs99("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
-    /* @__PURE__ */ jsx172("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
-    /* @__PURE__ */ jsx172("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-  ] });
+  return /* @__PURE__ */ jsxs99(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx172("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        /* @__PURE__ */ jsx172("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+        /* @__PURE__ */ jsx172("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+      ]
+    }
+  );
 };
-var DownloadIcon3 = () => /* @__PURE__ */ jsxs99("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx172("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-  /* @__PURE__ */ jsx172("polyline", { points: "7 10 12 15 17 10" }),
-  /* @__PURE__ */ jsx172("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-] });
-var VideoFilmIcon = () => /* @__PURE__ */ jsxs99("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx172("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2" }),
-  /* @__PURE__ */ jsx172("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
-  /* @__PURE__ */ jsx172("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
-  /* @__PURE__ */ jsx172("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-  /* @__PURE__ */ jsx172("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
-  /* @__PURE__ */ jsx172("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
-  /* @__PURE__ */ jsx172("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
-  /* @__PURE__ */ jsx172("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
-] });
-var VideoElement = ({ element, videoDownloadProxyUrl }) => {
+var DownloadIcon3 = () => /* @__PURE__ */ jsxs99(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx172("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ jsx172("polyline", { points: "7 10 12 15 17 10" }),
+      /* @__PURE__ */ jsx172("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+    ]
+  }
+);
+var VideoFilmIcon = () => /* @__PURE__ */ jsxs99(
+  "svg",
+  {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx172("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2" }),
+      /* @__PURE__ */ jsx172("line", { x1: "7", y1: "2", x2: "7", y2: "22" }),
+      /* @__PURE__ */ jsx172("line", { x1: "17", y1: "2", x2: "17", y2: "22" }),
+      /* @__PURE__ */ jsx172("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+      /* @__PURE__ */ jsx172("line", { x1: "2", y1: "7", x2: "7", y2: "7" }),
+      /* @__PURE__ */ jsx172("line", { x1: "2", y1: "17", x2: "7", y2: "17" }),
+      /* @__PURE__ */ jsx172("line", { x1: "17", y1: "17", x2: "22", y2: "17" }),
+      /* @__PURE__ */ jsx172("line", { x1: "17", y1: "7", x2: "22", y2: "7" })
+    ]
+  }
+);
+var VideoElement = ({
+  element,
+  videoDownloadProxyUrl
+}) => {
   const {
     status,
     videoUrl,
@@ -40723,8 +41333,9 @@ var VideoElement = ({ element, videoDownloadProxyUrl }) => {
     }
     if (v.paused) {
       v.play().catch((err) => {
-        if (err.name !== "AbortError")
+        if (err.name !== "AbortError") {
           throw err;
+        }
       });
       setPaused(false);
     } else {
@@ -40755,15 +41366,19 @@ var VideoElement = ({ element, videoDownloadProxyUrl }) => {
     },
     []
   );
-  const playbackUrl = videoDownloadProxyUrl && videoUrl ? `${videoDownloadProxyUrl}?url=${encodeURIComponent(videoUrl)}` : videoUrl;
+  const isBlobUrl = videoUrl?.startsWith("blob:") ?? false;
+  const playbackUrl = videoDownloadProxyUrl && videoUrl && !isBlobUrl ? `${videoDownloadProxyUrl}?url=${encodeURIComponent(videoUrl)}` : videoUrl;
   const handleDownload = useCallback28(
     (e) => {
       e.stopPropagation();
-      if (!videoUrl)
+      if (!videoUrl) {
         return;
+      }
       const filename = `video.${element.mimeType === "video/quicktime" ? "mov" : "mp4"}`;
-      if (videoDownloadProxyUrl) {
-        const proxyHref = `${videoDownloadProxyUrl}?url=${encodeURIComponent(videoUrl)}&download=1`;
+      if (videoDownloadProxyUrl && !isBlobUrl) {
+        const proxyHref = `${videoDownloadProxyUrl}?url=${encodeURIComponent(
+          videoUrl
+        )}&download=1`;
         const a = document.createElement("a");
         a.href = proxyHref;
         a.download = filename;
@@ -40775,11 +41390,27 @@ var VideoElement = ({ element, videoDownloadProxyUrl }) => {
         a.click();
       }
     },
-    [videoUrl, element.mimeType, videoDownloadProxyUrl]
+    [videoUrl, element.mimeType, videoDownloadProxyUrl, isBlobUrl]
   );
   const stopProp = (e) => e.stopPropagation();
   const totalDur = videoDuration || duration || 0;
-  const toolbar = /* @__PURE__ */ jsx172("div", { className: "video-el__toolbar", onClick: stopProp, onPointerDown: stopProp, children: /* @__PURE__ */ jsx172("button", { className: "video-el__tool-btn", onClick: handleDownload, title: "Download", children: /* @__PURE__ */ jsx172(DownloadIcon3, {}) }) });
+  const toolbar = /* @__PURE__ */ jsx172(
+    "div",
+    {
+      className: "video-el__toolbar",
+      onClick: stopProp,
+      onPointerDown: stopProp,
+      children: /* @__PURE__ */ jsx172(
+        "button",
+        {
+          className: "video-el__tool-btn",
+          onClick: handleDownload,
+          title: "Download",
+          children: /* @__PURE__ */ jsx172(DownloadIcon3, {})
+        }
+      )
+    }
+  );
   if (status === "uploading" && !videoUrl) {
     return /* @__PURE__ */ jsxs99("div", { className: "video-el__uploading", children: [
       /* @__PURE__ */ jsx172("div", { className: "video-el__spinner" }),
@@ -40834,10 +41465,17 @@ var VideoElement = ({ element, videoDownloadProxyUrl }) => {
               onClick: stopProp,
               onPointerDown: stopProp,
               children: [
-                /* @__PURE__ */ jsx172("button", { className: "video-el__ctrl-btn", onClick: (e) => {
-                  e.stopPropagation();
-                  togglePlayPause();
-                }, children: paused ? /* @__PURE__ */ jsx172(PlayIcon, {}) : /* @__PURE__ */ jsx172(PauseIcon, {}) }),
+                /* @__PURE__ */ jsx172(
+                  "button",
+                  {
+                    className: "video-el__ctrl-btn",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      togglePlayPause();
+                    },
+                    children: paused ? /* @__PURE__ */ jsx172(PlayIcon, {}) : /* @__PURE__ */ jsx172(PauseIcon, {})
+                  }
+                ),
                 /* @__PURE__ */ jsx172(
                   "input",
                   {
@@ -43446,7 +44084,7 @@ var App = class _App extends React61.Component {
               onFocus: (e) => e.target.select(),
               onBlur: () => this.resetEditingFrame(f),
               onKeyDown: (event) => {
-                if (event.key === KEYS55.ESCAPE || event.key === KEYS55.ENTER) {
+                if (event.key === KEYS56.ESCAPE || event.key === KEYS56.ENTER) {
                   this.resetEditingFrame(f);
                 }
               },
@@ -43756,7 +44394,7 @@ var App = class _App extends React61.Component {
         this.scene.insertElement(videoEl);
         this.scene.mutateElement(videoEl, { frameId: frameElement.id });
       }
-      this.syncActionResult({ captureUpdate: CaptureUpdateAction39.IMMEDIATELY });
+      this.syncActionResult({ captureUpdate: CaptureUpdateAction40.IMMEDIATELY });
     });
     /**
      * Inserts a generated image near a source element (≥ 25 px clearance).
@@ -43824,12 +44462,12 @@ var App = class _App extends React61.Component {
             if (shouldUpdateStrokeColor) {
               this.syncActionResult({
                 appState: { ...this.state, currentItemStrokeColor: color },
-                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
               });
             } else {
               this.syncActionResult({
                 appState: { ...this.state, currentItemBackgroundColor: color },
-                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
               });
             }
           } else {
@@ -43842,7 +44480,7 @@ var App = class _App extends React61.Component {
                 }
                 return el;
               }),
-              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
             });
           }
         },
@@ -44045,7 +44683,7 @@ var App = class _App extends React61.Component {
         elements: restoredElements,
         appState: restoredAppState,
         files: initialData?.files,
-        captureUpdate: CaptureUpdateAction39.NEVER
+        captureUpdate: CaptureUpdateAction40.NEVER
       });
       this.clearImageShapeCache();
       this.fonts.loadSceneFonts().then((fontFaces) => {
@@ -44722,7 +45360,7 @@ var App = class _App extends React61.Component {
           });
         }
         if (!isInputLike(event.target)) {
-          if ((event.key === KEYS55.ESCAPE || event.key === KEYS55.ENTER) && this.state.croppingElementId) {
+          if ((event.key === KEYS56.ESCAPE || event.key === KEYS56.ENTER) && this.state.croppingElementId) {
             this.finishImageCropping();
             return;
           }
@@ -44730,13 +45368,13 @@ var App = class _App extends React61.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS55.ENTER) {
+          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS56.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
-          if (event.key === KEYS55.ESCAPE) {
+          if (event.key === KEYS56.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
-          } else if (event.key === KEYS55.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
+          } else if (event.key === KEYS56.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
             CLASSES11.CONVERT_ELEMENT_TYPE_POPUP
           ))) {
             event.preventDefault();
@@ -44755,13 +45393,13 @@ var App = class _App extends React61.Component {
               });
             }
           }
-          if (event.key === KEYS55.ESCAPE && this.flowChartCreator.isCreatingChart) {
+          if (event.key === KEYS56.ESCAPE && this.flowChartCreator.isCreatingChart) {
             this.flowChartCreator.clear();
             this.triggerRender(true);
             return;
           }
           const arrowKeyPressed = isArrowKey2(event.key);
-          if (event[KEYS55.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
+          if (event[KEYS56.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
             event.preventDefault();
             const selectedElements2 = getSelectedElements(
               this.scene.getNonDeletedElementsMap(),
@@ -44845,7 +45483,7 @@ var App = class _App extends React61.Component {
             }
           }
         }
-        if (event[KEYS55.CTRL_OR_CMD] && event.key === KEYS55.P && !event.shiftKey && !event.altKey) {
+        if (event[KEYS56.CTRL_OR_CMD] && event.key === KEYS56.P && !event.shiftKey && !event.altKey) {
           this.setToast({
             message: t("commandPalette.shortcutHint", {
               shortcut: getShortcutFromShortcutName("commandPalette")
@@ -44854,19 +45492,19 @@ var App = class _App extends React61.Component {
           event.preventDefault();
           return;
         }
-        if (event[KEYS55.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS55.V) {
+        if (event[KEYS56.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS56.V) {
           IS_PLAIN_PASTE = event.shiftKey;
           clearTimeout(IS_PLAIN_PASTE_TIMER);
           IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {
             IS_PLAIN_PASTE = false;
           }, 100);
         }
-        if (event[KEYS55.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS55.V) {
+        if (event[KEYS56.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS56.V) {
           event.preventDefault();
           this.onVideoToolbarButtonClick();
           return;
         }
-        if (event[KEYS55.CTRL_OR_CMD] && isWritableElement5(event.target)) {
+        if (event[KEYS56.CTRL_OR_CMD] && isWritableElement5(event.target)) {
           if (event.code === CODES13.MINUS || event.code === CODES13.EQUAL) {
             event.preventDefault();
             return;
@@ -44875,24 +45513,24 @@ var App = class _App extends React61.Component {
         if (
           // inside an input
           isWritableElement5(event.target) && // unless pressing escape (finalize action)
-          event.key !== KEYS55.ESCAPE || // or unless using arrows (to move between buttons)
+          event.key !== KEYS56.ESCAPE || // or unless using arrows (to move between buttons)
           isArrowKey2(event.key) && isInputLike(event.target)
         ) {
           return;
         }
-        if (event.key === KEYS55.QUESTION_MARK) {
+        if (event.key === KEYS56.QUESTION_MARK) {
           this.setState({
             openDialog: { name: "help" }
           });
           return;
-        } else if (event.key.toLowerCase() === KEYS55.E && event.shiftKey && event[KEYS55.CTRL_OR_CMD]) {
+        } else if (event.key.toLowerCase() === KEYS56.E && event.shiftKey && event[KEYS56.CTRL_OR_CMD]) {
           event.preventDefault();
           this.setState({ openDialog: { name: "imageExport" } });
           return;
         }
-        if (event.key === KEYS55.PAGE_UP || event.key === KEYS55.PAGE_DOWN) {
+        if (event.key === KEYS56.PAGE_UP || event.key === KEYS56.PAGE_DOWN) {
           let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;
-          if (event.key === KEYS55.PAGE_DOWN) {
+          if (event.key === KEYS56.PAGE_DOWN) {
             offset = -offset;
           }
           if (event.shiftKey) {
@@ -44908,7 +45546,7 @@ var App = class _App extends React61.Component {
         if (this.state.openDialog?.name === "elementLinkSelector") {
           return;
         }
-        if (event.key === KEYS55.ALT) {
+        if (event.key === KEYS56.ALT) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.handleSkipBindMode();
           } else {
@@ -44919,7 +45557,7 @@ var App = class _App extends React61.Component {
           return;
         }
         const shouldPreventToolSwitching = this.props.viewModeEnabled === true;
-        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS55.ESCAPE) {
+        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS56.ESCAPE) {
           this.setActiveTool({ type: "hand" });
           return;
         }
@@ -44950,7 +45588,7 @@ var App = class _App extends React61.Component {
             }
             event.stopPropagation();
             return;
-          } else if (event.key === KEYS55.Q) {
+          } else if (event.key === KEYS56.Q) {
             this.toggleLock("keyboard");
             event.stopPropagation();
             return;
@@ -44959,7 +45597,7 @@ var App = class _App extends React61.Component {
         if (this.state.viewModeEnabled) {
           return;
         }
-        if (event[KEYS55.CTRL_OR_CMD] && this.state.isBindingEnabled) {
+        if (event[KEYS56.CTRL_OR_CMD] && this.state.isBindingEnabled) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.resetDelayedBindMode();
           }
@@ -44992,13 +45630,13 @@ var App = class _App extends React61.Component {
           const step = this.getEffectiveGridSize() && (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.getEffectiveGridSize()) || (event.shiftKey ? ELEMENT_SHIFT_TRANSLATE_AMOUNT : ELEMENT_TRANSLATE_AMOUNT);
           let offsetX = 0;
           let offsetY = 0;
-          if (event.key === KEYS55.ARROW_LEFT) {
+          if (event.key === KEYS56.ARROW_LEFT) {
             offsetX = -step;
-          } else if (event.key === KEYS55.ARROW_RIGHT) {
+          } else if (event.key === KEYS56.ARROW_RIGHT) {
             offsetX = step;
-          } else if (event.key === KEYS55.ARROW_UP) {
+          } else if (event.key === KEYS56.ARROW_UP) {
             offsetY = -step;
-          } else if (event.key === KEYS55.ARROW_DOWN) {
+          } else if (event.key === KEYS56.ARROW_DOWN) {
             offsetY = step;
           }
           selectedElements.forEach((element) => {
@@ -45016,11 +45654,11 @@ var App = class _App extends React61.Component {
           });
           this.scene.triggerUpdate();
           event.preventDefault();
-        } else if (event.key === KEYS55.ENTER) {
+        } else if (event.key === KEYS56.ENTER) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (selectedElements.length === 1) {
             const selectedElement = selectedElements[0];
-            if (event[KEYS55.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
+            if (event[KEYS56.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
               if (isLinearElement12(selectedElement)) {
                 if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
@@ -45055,26 +45693,26 @@ var App = class _App extends React61.Component {
             }
           }
         }
-        if (event.key === KEYS55.SPACE && gesture.pointers.size === 0) {
+        if (event.key === KEYS56.SPACE && gesture.pointers.size === 0) {
           isHoldingSpace = true;
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
           event.preventDefault();
         }
-        if ((event.key === KEYS55.G || event.key === KEYS55.S) && !event.altKey && !event[KEYS55.CTRL_OR_CMD]) {
+        if ((event.key === KEYS56.G || event.key === KEYS56.S) && !event.altKey && !event[KEYS56.CTRL_OR_CMD]) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
           }
-          if (event.key === KEYS55.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
+          if (event.key === KEYS56.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
             this.setState({ openPopup: "elementBackground" });
             event.stopPropagation();
           }
-          if (event.key === KEYS55.S) {
+          if (event.key === KEYS56.S) {
             this.setState({ openPopup: "elementStroke" });
             event.stopPropagation();
           }
         }
-        if (!event[KEYS55.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS55.F) {
+        if (!event[KEYS56.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS56.F) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
@@ -45089,12 +45727,12 @@ var App = class _App extends React61.Component {
             this.setState({ openPopup: "fontFamily" });
           }
         }
-        if (event[KEYS55.CTRL_OR_CMD] && (event.key === KEYS55.BACKSPACE || event.key === KEYS55.DELETE)) {
+        if (event[KEYS56.CTRL_OR_CMD] && (event.key === KEYS56.BACKSPACE || event.key === KEYS56.DELETE)) {
           this.updateEditorAtom(activeConfirmDialogAtom, "clearCanvas");
         }
         const lowerCased = event.key.toLocaleLowerCase();
-        const isPickingStroke = lowerCased === KEYS55.S && event.shiftKey;
-        const isPickingBackground = event.key === KEYS55.I || lowerCased === KEYS55.G && event.shiftKey;
+        const isPickingStroke = lowerCased === KEYS56.S && event.shiftKey;
+        const isPickingBackground = event.key === KEYS56.I || lowerCased === KEYS56.G && event.shiftKey;
         if (isPickingStroke || isPickingBackground) {
           this.openEyeDropper({
             type: isPickingStroke ? "stroke" : "background"
@@ -45103,7 +45741,7 @@ var App = class _App extends React61.Component {
       }
     ));
     __publicField(this, "onKeyUp", withBatchedUpdates((event) => {
-      if (event.key === KEYS55.SPACE) {
+      if (event.key === KEYS56.SPACE) {
         if (this.state.viewModeEnabled && this.state.activeTool.type !== "laser" || this.state.openDialog?.name === "elementLinkSelector") {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
         } else if (isSelectionLikeTool(this.state.activeTool.type)) {
@@ -45119,10 +45757,10 @@ var App = class _App extends React61.Component {
         }
         isHoldingSpace = false;
       }
-      if (event.key === KEYS55.ALT) {
+      if (event.key === KEYS56.ALT) {
         maybeHandleArrowPointlikeDrag({ app: this, event });
       }
-      if (event.key === KEYS55.ALT && this.state.bindMode === "skip" || !event[KEYS55.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
+      if (event.key === KEYS56.ALT && this.state.bindMode === "skip" || !event[KEYS56.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
         this.setState({
           bindMode: "orbit"
         });
@@ -45150,7 +45788,7 @@ var App = class _App extends React61.Component {
           }
         }
       }
-      if (!event[KEYS55.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
+      if (!event[KEYS56.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
         flushSync3(() => {
           this.setState({ isBindingEnabled: true });
         });
@@ -45201,11 +45839,11 @@ var App = class _App extends React61.Component {
         if (this.flowChartNavigator.isExploring) {
           this.flowChartNavigator.clear();
           this.syncActionResult({
-            captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+            captureUpdate: CaptureUpdateAction40.IMMEDIATELY
           });
         }
       }
-      if (!event[KEYS55.CTRL_OR_CMD]) {
+      if (!event[KEYS56.CTRL_OR_CMD]) {
         if (this.flowChartCreator.isCreatingChart) {
           if (this.flowChartCreator.pendingNodes?.length) {
             this.scene.insertElements(this.flowChartCreator.pendingNodes);
@@ -45243,7 +45881,7 @@ var App = class _App extends React61.Component {
           }
           this.flowChartCreator.clear();
           this.syncActionResult({
-            captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+            captureUpdate: CaptureUpdateAction40.IMMEDIATELY
           });
         }
       }
@@ -45534,7 +46172,7 @@ var App = class _App extends React61.Component {
       );
       if (selectedElements.length === 1 && isLinearElement12(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
-        if ((event[KEYS55.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
+        if ((event[KEYS56.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
           this.actionManager.executeAction(actionToggleLinearEditor);
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow10(selectedElements[0])) {
@@ -45619,7 +46257,7 @@ var App = class _App extends React61.Component {
         }
       }
       resetCursor(this.interactiveCanvas);
-      if (!event[KEYS55.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
+      if (!event[KEYS56.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
         const hitElement = this.getElementAtPosition(sceneX, sceneY);
         if (isIframeLikeElement2(hitElement)) {
           this.setState({
@@ -46168,7 +46806,7 @@ var App = class _App extends React61.Component {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         } else if (
           // if using cmd/ctrl, we're not dragging
-          !event[KEYS55.CTRL_OR_CMD]
+          !event[KEYS56.CTRL_OR_CMD]
         ) {
           if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(
             scenePointer,
@@ -46287,7 +46925,7 @@ var App = class _App extends React61.Component {
               this.state
             )
           },
-          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction39.EVENTUALLY : CaptureUpdateAction39.NEVER
+          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction40.EVENTUALLY : CaptureUpdateAction40.NEVER
         });
         return;
       }
@@ -46841,7 +47479,7 @@ var App = class _App extends React61.Component {
               ) : makeNextSelectedElementIds2({}, prevState)
             }));
           } else if (hitElement != null) {
-            if (event[KEYS55.CTRL_OR_CMD]) {
+            if (event[KEYS56.CTRL_OR_CMD]) {
               if (event.altKey) {
                 if (this.state.openDialog?.name === "elementLinkSelector") {
                   this.setOpenDialog(null);
@@ -47049,7 +47687,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const element = newIframeElement({
         type: "iframe",
@@ -47079,7 +47717,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const embedLink = getEmbedLink2(link);
       if (!embedLink) {
@@ -47119,7 +47757,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -47223,7 +47861,7 @@ var App = class _App extends React61.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerDownState.origin.x,
           pointerDownState.origin.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
           x: gridX,
@@ -47359,7 +47997,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -47407,7 +48045,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const constructorOpts = {
         x: gridX,
@@ -47644,7 +48282,10 @@ var App = class _App extends React61.Component {
         }
         const clientX = this.state.width / 2 + this.state.offsetLeft;
         const clientY = this.state.height / 2 + this.state.offsetTop;
-        const { x, y } = viewportCoordsToSceneCoords5({ clientX, clientY }, this.state);
+        const { x, y } = viewportCoordsToSceneCoords5(
+          { clientX, clientY },
+          this.state
+        );
         await this.insertVideos(files, x, y);
       };
       input.click();
@@ -47676,7 +48317,7 @@ var App = class _App extends React61.Component {
         files
       });
       if (erroredFiles.size) {
-        this.store.scheduleAction(CaptureUpdateAction39.NEVER);
+        this.store.scheduleAction(CaptureUpdateAction40.NEVER);
         this.scene.replaceAllElements(
           this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement3(element) && erroredFiles.has(element.fileId)) {
@@ -47786,7 +48427,7 @@ var App = class _App extends React61.Component {
           )
         },
         elements: nextElements,
-        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction40.IMMEDIATELY
       });
       this.setState({}, () => {
         this.actionManager.executeAction(actionFinalize);
@@ -47806,7 +48447,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const w = width ?? 320 / this.state.zoom.value;
       const h = height ?? 180 / this.state.zoom.value;
@@ -47923,7 +48564,7 @@ var App = class _App extends React61.Component {
           )
         },
         elements: nextElements,
-        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction40.IMMEDIATELY
       });
       this.props.onAfterVideoUpload?.();
     });
@@ -47951,7 +48592,7 @@ var App = class _App extends React61.Component {
                 isLoading: false
               },
               replaceFiles: true,
-              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
             });
             return;
           } catch (error) {
@@ -48065,7 +48706,7 @@ var App = class _App extends React61.Component {
         if (ret.type === MIME_TYPES9.excalidraw) {
           syncInvalidIndices(elements.concat(ret.data.elements));
           this.store.scheduleMicroAction({
-            action: CaptureUpdateAction39.NEVER,
+            action: CaptureUpdateAction40.NEVER,
             elements,
             appState: void 0
           });
@@ -48077,7 +48718,7 @@ var App = class _App extends React61.Component {
               isLoading: false
             },
             replaceFiles: true,
-            captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+            captureUpdate: CaptureUpdateAction40.IMMEDIATELY
           });
         } else if (ret.type === MIME_TYPES9.excalidrawlib) {
           await this.library.updateLibrary({
@@ -48170,7 +48811,7 @@ var App = class _App extends React61.Component {
       let [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const image = isInitializedImageElement3(newElement8) && this.imageCache.get(newElement8.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
@@ -48236,7 +48877,7 @@ var App = class _App extends React61.Component {
       const [x, y] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
       if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
@@ -48248,7 +48889,7 @@ var App = class _App extends React61.Component {
           const [gridX, gridY] = getGridPoint2(
             pointerCoords.x,
             pointerCoords.y,
-            event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+            event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
           );
           const dragOffset = {
             x: gridX - pointerDownState.originInGrid.x,
@@ -48312,7 +48953,7 @@ var App = class _App extends React61.Component {
       let [resizeX, resizeY] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const frameElementsOffsetsMap = /* @__PURE__ */ new Map();
       selectedFrames.forEach((frame) => {
@@ -48331,7 +48972,7 @@ var App = class _App extends React61.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const dragOffset = {
           x: gridX - pointerDownState.originInGrid.x,
@@ -48467,7 +49108,7 @@ var App = class _App extends React61.Component {
     __publicField(this, "handleWheel", withBatchedUpdates(
       (event) => {
         if (!(event.target instanceof HTMLCanvasElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLIFrameElement || event.target instanceof HTMLElement && event.target.classList.contains(CLASSES11.FRAME_NAME))) {
-          if (event[KEYS55.CTRL_OR_CMD]) {
+          if (event[KEYS56.CTRL_OR_CMD]) {
             event.preventDefault();
           }
           return;
@@ -49312,10 +49953,7 @@ var App = class _App extends React61.Component {
             pointerEvents: POINTER_EVENTS.enabled,
             opacity: getRenderOpacity(
               el,
-              getContainingFrame3(
-                el,
-                this.scene.getNonDeletedElementsMap()
-              ),
+              getContainingFrame3(el, this.scene.getNonDeletedElementsMap()),
               this.elementsPendingErasure,
               null,
               this.state.openDialog?.name === "elementLinkSelector" ? DEFAULT_REDUCED_GLOBAL_ALPHA2 : 1
@@ -49331,7 +49969,14 @@ var App = class _App extends React61.Component {
                 transform: `rotate(${el.angle}rad)`,
                 pointerEvents: POINTER_EVENTS.enabled
               },
-              children: /* @__PURE__ */ jsx179(VideoElement, { element: el, isActive: true, videoDownloadProxyUrl: this.props.videoDownloadProxyUrl })
+              children: /* @__PURE__ */ jsx179(
+                VideoElement,
+                {
+                  element: el,
+                  isActive: true,
+                  videoDownloadProxyUrl: this.props.videoDownloadProxyUrl
+                }
+              )
             }
           )
         },
@@ -50686,12 +51331,12 @@ var App = class _App extends React61.Component {
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
-      withCmdOrCtrl: event[KEYS55.CTRL_OR_CMD],
+      withCmdOrCtrl: event[KEYS56.CTRL_OR_CMD],
       originInGrid: tupleToCoors(
         getGridPoint2(
           origin.x,
           origin.y,
-          event[KEYS55.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
+          event[KEYS56.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
         )
       ),
       scrollbars: isOverScrollBars(
@@ -50832,7 +51477,7 @@ var App = class _App extends React61.Component {
   }
   onKeyUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((event) => {
-      event.key === KEYS55.ALT && event.preventDefault();
+      event.key === KEYS56.ALT && event.preventDefault();
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
@@ -50854,7 +51499,7 @@ var App = class _App extends React61.Component {
         const [gridX2, gridY2] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         let index = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
         if (index < 0) {
@@ -50919,7 +51564,7 @@ var App = class _App extends React61.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
@@ -50967,7 +51612,7 @@ var App = class _App extends React61.Component {
             this.state.selectedLinearElement,
             pointerCoords,
             this,
-            !event[KEYS55.CTRL_OR_CMD],
+            !event[KEYS56.CTRL_OR_CMD],
             this.scene
           );
           if (!ret) {
@@ -51165,7 +51810,7 @@ var App = class _App extends React61.Component {
               dragOffset,
               this.scene,
               snapOffset,
-              event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+              event[KEYS56.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
             );
           }
           this.setState({
@@ -51783,7 +52428,7 @@ var App = class _App extends React61.Component {
           appState: {
             newElement: null
           },
-          captureUpdate: CaptureUpdateAction39.NEVER
+          captureUpdate: CaptureUpdateAction40.NEVER
         });
         return;
       }
@@ -51910,7 +52555,7 @@ var App = class _App extends React61.Component {
       if (resizingElement && isInvisiblySmallElement3(resizingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== resizingElement.id),
-          captureUpdate: CaptureUpdateAction39.NEVER
+          captureUpdate: CaptureUpdateAction40.NEVER
         });
       }
       if (pointerDownState.resize.isResizing) {
@@ -53280,7 +53925,7 @@ import {
   newElementWith as newElementWith12,
   bumpVersion
 } from "@orangecatai/element";
-import { CaptureUpdateAction as CaptureUpdateAction40 } from "@orangecatai/element";
+import { CaptureUpdateAction as CaptureUpdateAction41 } from "@orangecatai/element";
 
 // components/TTDDialog/TTDDialogTrigger.tsx
 import { jsx as jsx188 } from "react/jsx-runtime";
@@ -58628,6 +59273,8 @@ var ExcalidrawBase = (props) => {
     showDeprecatedFonts,
     imageGenUrl,
     autoResizeUrl,
+    customResizeUrl,
+    tier1CropUrl,
     removeBgUrl,
     renderScrollbars,
     onBeforeImageGen,
@@ -58734,6 +59381,8 @@ var ExcalidrawBase = (props) => {
       showDeprecatedFonts,
       imageGenUrl,
       autoResizeUrl,
+      customResizeUrl,
+      tier1CropUrl,
       removeBgUrl,
       renderScrollbars,
       onBeforeImageGen,
@@ -58808,7 +59457,7 @@ Excalidraw.displayName = "Excalidraw";
 export {
   AIChatPanel,
   Button,
-  CaptureUpdateAction40 as CaptureUpdateAction,
+  CaptureUpdateAction41 as CaptureUpdateAction,
   CommandPalette,
   DEFAULT_LASER_COLOR2 as DEFAULT_LASER_COLOR,
   DefaultSidebar,