@remotion/studio 4.0.445 → 4.0.447

package/dist/esm/previewEntry.mjs

@@ -1499,10 +1499,10 @@ var OpenInEditor = ({ stack, canHaveKeyboardShortcuts }) => {
 
 // src/error-overlay/remotion-overlay/Retry.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
-var RetryButton = ({ onClick }) => {
+var RetryButton = ({ onClick, label: label2 = "Retry" }) => {
   return /* @__PURE__ */ jsx19(Button, {
     onClick,
-    children: "Retry calculateMetadata()"
+    children: label2
   });
 };
 
@@ -1781,7 +1781,8 @@ ${stackLines}`;
             style: spacer2
           }),
           /* @__PURE__ */ jsx23(RetryButton, {
-            onClick: onRetry
+            onClick: onRetry,
+            label: calculateMetadata ? "Retry calculateMetadata()" : "Retry"
           })
         ]
       }) : null,
@@ -2733,7 +2734,7 @@ var enableHotMiddleware = () => {
 };
 
 // src/Studio.tsx
-import { useLayoutEffect as useLayoutEffect4 } from "react";
+import { useLayoutEffect as useLayoutEffect6 } from "react";
 import { createPortal } from "react-dom";
 import { Internals as Internals70 } from "remotion";
 
@@ -3710,7 +3711,96 @@ var ModalsContext = createContext9({
 });
 
 // src/components/CompositionSelectorItem.tsx
-import { useCallback as useCallback25, useContext as useContext9, useMemo as useMemo25, useState as useState22 } from "react";
+import {
+  useCallback as useCallback25,
+  useContext as useContext9,
+  useLayoutEffect as useLayoutEffect3,
+  useMemo as useMemo25,
+  useRef as useRef13,
+  useState as useState22
+} from "react";
+
+// src/helpers/sidebar-scroll-into-view.ts
+var getComputedOverflowY = (el) => {
+  return getComputedStyle(el).overflowY;
+};
+var findVerticalScrollParent = (element) => {
+  let cur = element?.parentElement ?? null;
+  while (cur) {
+    const overflowY = getComputedOverflowY(cur);
+    if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+      return cur;
+    }
+    cur = cur.parentElement;
+  }
+  return null;
+};
+var isVerticallyFullyVisibleInSidebarList = (element) => {
+  const scrollParent = findVerticalScrollParent(element);
+  const rect = element.getBoundingClientRect();
+  if (!scrollParent) {
+    return rect.top >= 0 && rect.bottom <= window.innerHeight;
+  }
+  const parentRect = scrollParent.getBoundingClientRect();
+  return rect.top >= parentRect.top && rect.bottom <= parentRect.bottom;
+};
+var scrollSidebarRowIntoViewIfNeeded = (element) => {
+  if (!element) {
+    return;
+  }
+  if (isVerticallyFullyVisibleInSidebarList(element)) {
+    return;
+  }
+  element.scrollIntoView({ block: "nearest", behavior: "auto" });
+};
+var skipCompositionScrollIntoViewForId = null;
+var markCompositionSidebarScrollFromRowClick = (compositionId) => {
+  skipCompositionScrollIntoViewForId = compositionId;
+};
+var shouldSkipCompositionScrollIntoView = (compositionId) => {
+  if (skipCompositionScrollIntoViewForId === compositionId) {
+    skipCompositionScrollIntoViewForId = null;
+    return true;
+  }
+  return false;
+};
+var maybeScrollCompositionSidebarRowIntoView = ({
+  element,
+  compositionId,
+  selected
+}) => {
+  if (!selected) {
+    return;
+  }
+  if (shouldSkipCompositionScrollIntoView(compositionId)) {
+    return;
+  }
+  scrollSidebarRowIntoViewIfNeeded(element);
+};
+var skipAssetScrollIntoViewForPath = null;
+var markAssetSidebarScrollFromRowClick = (assetPath) => {
+  skipAssetScrollIntoViewForPath = assetPath;
+};
+var shouldSkipAssetScrollIntoView = (assetPath) => {
+  if (skipAssetScrollIntoViewForPath === assetPath) {
+    skipAssetScrollIntoViewForPath = null;
+    return true;
+  }
+  return false;
+};
+var maybeScrollAssetSidebarRowIntoView = ({
+  element,
+  assetPath,
+  selected
+}) => {
+  if (!selected) {
+    return;
+  }
+  if (shouldSkipAssetScrollIntoView(assetPath)) {
+    return;
+  }
+  scrollSidebarRowIntoViewIfNeeded(element);
+};
 
 // src/icons/folder.tsx
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -4599,6 +4689,34 @@ var MenuSubItem = ({
   });
 };
 
+// src/components/NewComposition/menu-typeahead.ts
+var getLabelToMatch = (value) => {
+  if (value.type === "divider" || value.disabled) {
+    return null;
+  }
+  if (typeof value.label === "string") {
+    return value.label;
+  }
+  return null;
+};
+var findTypeaheadMenuItem = ({
+  query,
+  values
+}) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.length === 0) {
+    return null;
+  }
+  const matched = values.find((value) => {
+    const label2 = getLabelToMatch(value);
+    return label2 ? label2.toLowerCase().startsWith(normalizedQuery) : false;
+  });
+  if (!matched || matched.type === "divider") {
+    return null;
+  }
+  return matched.id;
+};
+
 // src/components/NewComposition/MenuContent.tsx
 import { jsx as jsx46 } from "react/jsx-runtime";
 var BORDER_SIZE = 1;
@@ -4626,6 +4744,8 @@ var MenuContent = ({
   const containerRef = useRef10(null);
   const isMobileLayout = useMobileLayout();
   const [subMenuActivated, setSubMenuActivated] = useState19(false);
+  const typeaheadQueryRef = useRef10("");
+  const typeaheadTimeoutRef = useRef10(null);
   if (values[0].type === "divider") {
     throw new Error("first value cant be divide");
   }
@@ -4636,6 +4756,13 @@ var MenuContent = ({
   const onItemSelected = useCallback20((id) => {
     setSelectedItem(id);
   }, []);
+  const clearTypeahead = useCallback20(() => {
+    typeaheadQueryRef.current = "";
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
   const isItemSelectable = useCallback20((v) => {
     return v.type !== "divider" && !v.disabled;
   }, []);
@@ -4709,6 +4836,30 @@ var MenuContent = ({
     }
     setSubMenuActivated("without-mouse");
   }, [onNextMenu, selectedItem, values]);
+  const onTypeahead = useCallback20((event) => {
+    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1 || event.key.trim().length === 0) {
+      return;
+    }
+    const { activeElement } = document;
+    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
+      return;
+    }
+    typeaheadQueryRef.current = `${typeaheadQueryRef.current}${event.key}`;
+    const matchedId = findTypeaheadMenuItem({
+      query: typeaheadQueryRef.current,
+      values
+    });
+    if (matchedId !== null) {
+      setSelectedItem(matchedId);
+    }
+    if (typeaheadTimeoutRef.current !== null) {
+      window.clearTimeout(typeaheadTimeoutRef.current);
+    }
+    typeaheadTimeoutRef.current = window.setTimeout(() => {
+      typeaheadQueryRef.current = "";
+      typeaheadTimeoutRef.current = null;
+    }, 700);
+  }, [values]);
   const containerWithHeight = useMemo20(() => {
     const containerStyles = { ...container11 };
     if (fixedHeight === null) {
@@ -4721,6 +4872,24 @@ var MenuContent = ({
     }
     return containerStyles;
   }, [fixedHeight, isMobileLayout]);
+  useEffect18(() => {
+    if (!keybindings.isHighestContext || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      onTypeahead(event);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      clearTypeahead();
+    };
+  }, [clearTypeahead, keybindings.isHighestContext, onTypeahead]);
+  useEffect18(() => {
+    return () => {
+      clearTypeahead();
+    };
+  }, [clearTypeahead]);
   useEffect18(() => {
     const escapeBinding = keybindings.registerKeybinding({
       event: "keydown",
@@ -5280,6 +5449,18 @@ var CompositionSelectorItem = ({
   const onPointerLeave = useCallback25(() => {
     setHovered(false);
   }, []);
+  const compositionRowRef = useRef13(null);
+  const compositionId = item.type === "composition" ? item.composition.id : null;
+  useLayoutEffect3(() => {
+    if (compositionId === null) {
+      return;
+    }
+    maybeScrollCompositionSidebarRowIntoView({
+      element: compositionRowRef.current,
+      compositionId,
+      selected
+    });
+  }, [compositionId, selected]);
   const style3 = useMemo25(() => {
     return {
       ...itemStyle,
@@ -5296,6 +5477,7 @@ var CompositionSelectorItem = ({
   const onClick = useCallback25((evt) => {
     evt.preventDefault();
     if (item.type === "composition") {
+      markCompositionSidebarScrollFromRowClick(item.composition.id);
       selectComposition(item.composition, true);
     } else {
       toggleFolder(item.folderName, item.parentName);
@@ -5430,6 +5612,7 @@ var CompositionSelectorItem = ({
     children: /* @__PURE__ */ jsx52(Row, {
       align: "center",
       children: /* @__PURE__ */ jsxs22("a", {
+        ref: compositionRowRef,
         style: style3,
         onPointerEnter,
         onPointerLeave,
@@ -5740,7 +5923,7 @@ var writeStaticFile = async ({
 };
 
 // src/helpers/use-asset-drag-events.ts
-import { useCallback as useCallback27, useEffect as useEffect20, useMemo as useMemo27, useRef as useRef13 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect20, useMemo as useMemo27, useRef as useRef14 } from "react";
 import { NoReactInternals } from "remotion/no-react";
 function useAssetDragEvents({
   name,
@@ -5748,7 +5931,7 @@ function useAssetDragEvents({
   dropLocation,
   setDropLocation
 }) {
-  const dragDepthRef = useRef13(0);
+  const dragDepthRef = useRef14(0);
   const combinedParents = useMemo27(() => {
     return [parentFolder, name].filter(NoReactInternals.truthy).join("/");
   }, [name, parentFolder]);
@@ -5781,7 +5964,14 @@ function useAssetDragEvents({
 var use_asset_drag_events_default = useAssetDragEvents;
 
 // src/components/AssetSelectorItem.tsx
-import React39, { useCallback as useCallback28, useContext as useContext11, useMemo as useMemo28, useRef as useRef14, useState as useState23 } from "react";
+import React39, {
+  useCallback as useCallback28,
+  useContext as useContext11,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo28,
+  useRef as useRef15,
+  useState as useState23
+} from "react";
 import { Internals as Internals10 } from "remotion";
 import { NoReactInternals as NoReactInternals3 } from "remotion/no-react";
 
@@ -6165,7 +6355,7 @@ var AssetFolderItem = ({
   readOnlyStudio
 }) => {
   const [hovered, setHovered] = useState23(false);
-  const openFolderTimerRef = useRef14(null);
+  const openFolderTimerRef = useRef15(null);
   const { isDropDiv, onDragEnter, onDragLeave } = use_asset_drag_events_default({
     name: item.name,
     parentFolder,
@@ -6312,7 +6502,16 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   const onPointerLeave = useCallback28(() => {
     setHovered(false);
   }, []);
+  const rowRef = useRef15(null);
+  useLayoutEffect4(() => {
+    maybeScrollAssetSidebarRowIntoView({
+      element: rowRef.current,
+      assetPath: relativePath,
+      selected
+    });
+  }, [relativePath, selected]);
   const onClick = useCallback28(() => {
+    markAssetSidebarScrollFromRowClick(relativePath);
     setCanvasContent({ type: "asset", asset: relativePath });
     pushUrl(`/assets/${relativePath}`);
     if (isMobileLayout) {
@@ -6370,6 +6569,7 @@ var AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }
   return /* @__PURE__ */ jsx57(Row, {
     align: "center",
     children: /* @__PURE__ */ jsxs25("div", {
+      ref: rowRef,
       style: style3,
       onPointerEnter,
       onPointerLeave,
@@ -6998,7 +7198,7 @@ var ExplorerPanel = ({ readOnlyStudio }) => {
 var useSelectAsset = () => {
   const { setCanvasContent } = useContext16(Internals14.CompositionSetters);
   const { setAssetFoldersExpanded } = useContext16(FolderContext);
-  return (asset) => {
+  return useCallback33((asset) => {
     setCanvasContent({ type: "asset", asset });
     explorerSidebarTabs.current?.selectAssetsPanel();
     setAssetFoldersExpanded((ex) => {
@@ -7014,7 +7214,7 @@ var useSelectAsset = () => {
       }
       return newState;
     });
-  };
+  }, [setAssetFoldersExpanded, setCanvasContent]);
 };
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext16(FolderContext);
@@ -7108,7 +7308,7 @@ var InitialCompositionLoader = () => {
           return file.name === newCanvas.asset;
         });
         if (exists) {
-          setCanvasContent(newCanvas);
+          selectAsset(newCanvas.asset);
         }
         return;
       }
@@ -7116,7 +7316,13 @@ var InitialCompositionLoader = () => {
     };
     window.addEventListener("popstate", onchange);
     return () => window.removeEventListener("popstate", onchange);
-  }, [compositions, selectComposition, setCanvasContent, staticFiles]);
+  }, [
+    compositions,
+    selectAsset,
+    selectComposition,
+    setCanvasContent,
+    staticFiles
+  ]);
   return null;
 };
 
@@ -7146,7 +7352,7 @@ import {
   useCallback as useCallback35,
   useEffect as useEffect24,
   useImperativeHandle as useImperativeHandle7,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState30
 } from "react";
 import { AbsoluteFill as AbsoluteFill3 } from "remotion";
@@ -7277,7 +7483,7 @@ var container18 = {
 var askAiModalRef = createRef7();
 var AskAiModal = () => {
   const [state, setState] = useState30("never-opened");
-  const iframe = useRef15(null);
+  const iframe = useRef16(null);
   useImperativeHandle7(askAiModalRef, () => ({
     toggle: () => {
       setState((s) => {
@@ -7388,7 +7594,7 @@ var ControlButton = (props) => {
 
 // src/components/NewComposition/ComboBox.tsx
 import { PlayerInternals as PlayerInternals6 } from "@remotion/player";
-import { useCallback as useCallback36, useEffect as useEffect25, useMemo as useMemo34, useRef as useRef16, useState as useState31 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect25, useMemo as useMemo34, useRef as useRef17, useState as useState31 } from "react";
 import ReactDOM5 from "react-dom";
 import { jsx as jsx69, jsxs as jsxs31, Fragment as Fragment8 } from "react/jsx-runtime";
 var container19 = {
@@ -7409,7 +7615,7 @@ var label3 = {
 var Combobox = ({ values, selectedId, style: customStyle, title: title4 }) => {
   const [hovered, setIsHovered] = useState31(false);
   const [opened, setOpened] = useState31(false);
-  const ref = useRef16(null);
+  const ref = useRef17(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals6.useElementSize(ref, {
     triggerOnWindowResize: true,
@@ -7575,7 +7781,7 @@ var Combobox = ({ values, selectedId, style: customStyle, title: title4 }) => {
 
 // src/components/Preview.tsx
 import { PlayerInternals as PlayerInternals7 } from "@remotion/player";
-import { useContext as useContext20, useEffect as useEffect31, useMemo as useMemo38, useRef as useRef19 } from "react";
+import { useContext as useContext20, useEffect as useEffect31, useMemo as useMemo38, useRef as useRef20 } from "react";
 import { Internals as Internals15 } from "remotion";
 
 // src/helpers/checkerboard-background.ts
@@ -7644,56 +7850,63 @@ var getAssetMetadata = async (canvasContent, addTime) => {
   if (canvasContent.type === "composition") {
     throw new Error("cannot get dimensions for composition");
   }
-  const src = getSrcFromCanvasContent(canvasContent);
-  const file = await fetch(src, {
-    method: "HEAD"
-  });
-  if (file.status === 404) {
-    return { type: "not-found" };
-  }
-  if (file.status !== 200) {
-    throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
-  }
-  const size2 = file.headers.get("content-length");
-  if (!size2) {
-    throw new Error("Unexpected error: content-length is null");
-  }
-  const fetchedAt = Date.now();
-  const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
-  const fileType = getPreviewFileType(src);
-  if (fileType === "video") {
-    const resolution = await getVideoMetadata(srcWithTime);
+  try {
+    const src = getSrcFromCanvasContent(canvasContent);
+    const file = await fetch(src, {
+      method: "HEAD"
+    });
+    if (file.status === 404) {
+      return { type: "not-found" };
+    }
+    if (file.status !== 200) {
+      throw new Error(`Expected status code 200 or 404 for file, got ${file.status}`);
+    }
+    const size2 = file.headers.get("content-length");
+    if (!size2) {
+      throw new Error("Unexpected error: content-length is null");
+    }
+    const fetchedAt = Date.now();
+    const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
+    const fileType = getPreviewFileType(src);
+    if (fileType === "video") {
+      const resolution = await getVideoMetadata(srcWithTime);
+      return {
+        type: "found",
+        size: Number(size2),
+        dimensions: { width: resolution.width, height: resolution.height },
+        fetchedAt
+      };
+    }
+    if (fileType === "image") {
+      const resolution = await new Promise((resolve, reject) => {
+        const img = new Image;
+        img.onload = () => {
+          resolve({
+            type: "found",
+            size: Number(size2),
+            dimensions: { width: img.width, height: img.height },
+            fetchedAt
+          });
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load image"));
+        };
+        img.src = srcWithTime;
+      });
+      return resolution;
+    }
     return {
       type: "found",
+      dimensions: "none",
       size: Number(size2),
-      dimensions: { width: resolution.width, height: resolution.height },
       fetchedAt
     };
+  } catch (err) {
+    return {
+      type: "metadata-error",
+      error: err instanceof Error ? err : new Error(String(err))
+    };
   }
-  if (fileType === "image") {
-    const resolution = await new Promise((resolve, reject) => {
-      const img = new Image;
-      img.onload = () => {
-        resolve({
-          type: "found",
-          size: Number(size2),
-          dimensions: { width: img.width, height: img.height },
-          fetchedAt
-        });
-      };
-      img.onerror = () => {
-        reject(new Error("Failed to load image"));
-      };
-      img.src = srcWithTime;
-    });
-    return resolution;
-  }
-  return {
-    type: "found",
-    dimensions: "none",
-    size: Number(size2),
-    fetchedAt
-  };
 };
 
 // src/components/FilePreview.tsx
@@ -7708,7 +7921,7 @@ import {
   useEffect as useEffect27,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState33
 } from "react";
 
@@ -7718,7 +7931,7 @@ import {
   useEffect as useEffect26,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
-  useRef as useRef17,
+  useRef as useRef18,
   useState as useState32
 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
@@ -7747,7 +7960,7 @@ var getInputBorderColor = ({
 var RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState32(false);
   const [isHovered, setIsHovered] = useState32(false);
-  const inputRef = useRef17(null);
+  const inputRef = useRef18(null);
   const { tabIndex } = useZIndex();
   const style5 = useMemo35(() => {
     return {
@@ -7805,7 +8018,7 @@ var inputBaseStyle2 = {
 var RemTextareaFRFunction = ({ status, ...props }, ref) => {
   const [isFocused, setIsFocused] = useState33(false);
   const [isHovered, setIsHovered] = useState33(false);
-  const inputRef = useRef18(null);
+  const inputRef = useRef19(null);
   const { tabIndex } = useZIndex();
   useImperativeHandle9(ref, () => {
     return inputRef.current;
@@ -7958,6 +8171,9 @@ var FilePreview = ({ fileType, src, currentAsset, assetMetadata }) => {
   if (assetMetadata.type === "not-found") {
     throw new Error('expected to have assetMetadata, got "not-found"');
   }
+  if (assetMetadata.type === "metadata-error") {
+    throw new Error("unexpected metadata-error in FilePreview");
+  }
   if (fileType === "audio") {
     return /* @__PURE__ */ jsx73("audio", {
       src,
@@ -8198,6 +8414,14 @@ var label4 = {
   fontSize: 14,
   color: LIGHT_TEXT
 };
+var assetMetadataErrorContainer = {
+  marginLeft: "auto",
+  marginRight: "auto",
+  width: "100%",
+  position: "absolute",
+  height: "100%",
+  overflowY: "auto"
+};
 var getPreviewFileType = (fileName) => {
   if (!fileName) {
     return "other";
@@ -8242,7 +8466,13 @@ var containerStyle = (options) => {
     backgroundPosition: getCheckerboardBackgroundPos(checkerboardSize)
   };
 };
-var VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadata }) => {
+var VideoPreview = ({
+  canvasSize,
+  contentDimensions,
+  canvasContent,
+  assetMetadata,
+  onRetryAssetMetadata
+}) => {
   if (assetMetadata && assetMetadata.type === "not-found") {
     return /* @__PURE__ */ jsx77("div", {
       style: centeredContainer,
@@ -8252,6 +8482,19 @@ var VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetadat
       })
     });
   }
+  if (assetMetadata && assetMetadata.type === "metadata-error") {
+    return /* @__PURE__ */ jsx77("div", {
+      style: assetMetadataErrorContainer,
+      className: VERTICAL_SCROLLBAR_CLASSNAME,
+      children: /* @__PURE__ */ jsx77(ErrorLoader, {
+        canHaveDismissButton: false,
+        keyboardShortcuts: false,
+        error: assetMetadata.error,
+        onRetry: onRetryAssetMetadata ?? null,
+        calculateMetadata: false
+      }, assetMetadata.error.stack)
+    });
+  }
   if (contentDimensions === null) {
     return /* @__PURE__ */ jsx77("div", {
       style: centeredContainer,
@@ -8373,7 +8616,7 @@ var PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) =
       current?.removeChild(Internals15.portalNode());
     };
   }, []);
-  const portalContainer = useRef19(null);
+  const portalContainer = useRef20(null);
   return /* @__PURE__ */ jsx77("div", {
     ref: portalContainer,
     style: style5
@@ -9868,7 +10111,7 @@ var makeSearchResults = (actions, setSelectedModal) => {
 
 // src/components/Menu/MenuItem.tsx
 import { PlayerInternals as PlayerInternals9 } from "@remotion/player";
-import { useCallback as useCallback38, useMemo as useMemo43, useRef as useRef20, useState as useState37 } from "react";
+import { useCallback as useCallback38, useMemo as useMemo43, useRef as useRef21, useState as useState37 } from "react";
 import ReactDOM6 from "react-dom";
 import { jsx as jsx84, jsxs as jsxs39, Fragment as Fragment13 } from "react/jsx-runtime";
 var container21 = {
@@ -9895,7 +10138,7 @@ var MenuItem = ({
   menu
 }) => {
   const [hovered, setHovered] = useState37(false);
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const size2 = PlayerInternals9.useElementSize(ref, {
     triggerOnWindowResize: true,
     shouldApplyCssTransforms: true
@@ -10337,10 +10580,10 @@ import React125, { useCallback as useCallback96, useContext as useContext64, use
 import { Internals as Internals45 } from "remotion";
 
 // src/helpers/use-breakpoint.ts
-import { useEffect as useEffect35, useRef as useRef21, useState as useState41 } from "react";
+import { useEffect as useEffect35, useRef as useRef22, useState as useState41 } from "react";
 function useBreakpoint(breakpoint2) {
   const [compactUI, setCompactUI] = useState41(window.innerWidth < breakpoint2);
-  const compactUIRef = useRef21(compactUI);
+  const compactUIRef = useRef22(compactUI);
   useEffect35(() => {
     function handleResize() {
       const newValue = window.innerWidth < breakpoint2;
@@ -10370,7 +10613,7 @@ import {
   useContext as useContext33,
   useEffect as useEffect38,
   useMemo as useMemo52,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState43
 } from "react";
 import { Internals as Internals27, watchStaticFile } from "remotion";
@@ -10520,7 +10763,7 @@ var useStudioCanvasDimensions = ({
 }) => {
   const { size: previewSize } = useContext27(Internals23.PreviewSizeContext);
   const { centerX, centerY, scale } = useMemo46(() => {
-    if (contentDimensions === "none" || contentDimensions === null || assetMetadata && assetMetadata.type === "not-found" || !canvasSize) {
+    if (contentDimensions === "none" || contentDimensions === null || assetMetadata && (assetMetadata.type === "not-found" || assetMetadata.type === "metadata-error") || !canvasSize) {
       return {
         centerX: previewSize.translation.x,
         centerY: previewSize.translation.y,
@@ -10732,7 +10975,7 @@ import {
   useContext as useContext31,
   useEffect as useEffect37,
   useMemo as useMemo51,
-  useRef as useRef23
+  useRef as useRef24
 } from "react";
 
 // src/helpers/editor-ruler.ts
@@ -10947,7 +11190,7 @@ import {
   useContext as useContext30,
   useEffect as useEffect36,
   useMemo as useMemo50,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState42
 } from "react";
 import { Internals as Internals25 } from "remotion";
@@ -10964,7 +11207,7 @@ var Ruler = ({
   markingGaps,
   orientation
 }) => {
-  const rulerCanvasRef = useRef22(null);
+  const rulerCanvasRef = useRef23(null);
   const isVerticalRuler = orientation === "vertical";
   const {
     shouldCreateGuideRef,
@@ -11128,7 +11371,7 @@ var EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerRef
     rulerMarkingGaps,
     scale
   }), [verticalRulerScaleRange, rulerMarkingGaps, scale]);
-  const requestAnimationFrameRef = useRef23(null);
+  const requestAnimationFrameRef = useRef24(null);
   const onMouseMove = useCallback43((e) => {
     if (requestAnimationFrameRef.current) {
       cancelAnimationFrame(requestAnimationFrameRef.current);
@@ -11291,14 +11534,14 @@ var ZOOM_PX_FACTOR = 0.003;
 var Canvas = ({ canvasContent, size: size2 }) => {
   const { setSize, size: previewSize } = useContext33(Internals27.PreviewSizeContext);
   const { editorZoomGestures } = useContext33(EditorZoomGesturesContext);
-  const previewSnapshotRef = useRef24({
+  const previewSnapshotRef = useRef25({
     previewSize,
     canvasSize: size2,
     contentDimensions: null
   });
-  const pinchBaseZoomRef = useRef24(null);
-  const suppressWheelFromWebKitPinchRef = useRef24(false);
-  const touchPinchRef = useRef24(null);
+  const pinchBaseZoomRef = useRef25(null);
+  const suppressWheelFromWebKitPinchRef = useRef25(false);
+  const touchPinchRef = useRef25(null);
   const keybindings = useKeybinding();
   const config = Internals27.useUnsafeVideoConfig();
   const areRulersVisible = useIsRulerVisible();
@@ -11669,7 +11912,8 @@ var Canvas = ({ canvasContent, size: size2 }) => {
             canvasContent,
             contentDimensions,
             canvasSize: size2,
-            assetMetadata: assetResolution
+            assetMetadata: assetResolution,
+            onRetryAssetMetadata: fetchMetadata
           }) : null,
           isFit ? null : /* @__PURE__ */ jsx93("div", {
             style: resetZoom,
@@ -11818,7 +12062,8 @@ var CanvasOrLoading = ({ size: size2 }) => {
   }, [resolved, setZoom]);
   if (renderError) {
     return /* @__PURE__ */ jsx96(ErrorLoading, {
-      error: renderError
+      error: renderError,
+      calculateMetadataContext: false
     });
   }
   if (!canvasContent) {
@@ -11861,7 +12106,8 @@ var CanvasOrLoading = ({ size: size2 }) => {
   }
   if (resolved.type === "error") {
     return /* @__PURE__ */ jsx96(ErrorLoading, {
-      error: resolved.error
+      error: resolved.error,
+      calculateMetadataContext: true
     });
   }
   return /* @__PURE__ */ jsxs45(Fragment18, {
@@ -11880,7 +12126,7 @@ var loaderContainer = {
   height: "100%",
   overflowY: "auto"
 };
-var ErrorLoading = ({ error }) => {
+var ErrorLoading = ({ error, calculateMetadataContext }) => {
   return /* @__PURE__ */ jsx96("div", {
     style: loaderContainer,
     className: VERTICAL_SCROLLBAR_CLASSNAME,
@@ -11889,7 +12135,7 @@ var ErrorLoading = ({ error }) => {
       keyboardShortcuts: false,
       error,
       onRetry: () => Internals29.resolveCompositionsRef.current?.reloadCurrentlySelectedComposition(),
-      calculateMetadata: true
+      calculateMetadata: calculateMetadataContext
     }, error.stack)
   });
 };
@@ -12182,7 +12428,7 @@ import {
   useEffect as useEffect44,
   useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo56,
-  useRef as useRef25,
+  useRef as useRef26,
   useState as useState46
 } from "react";
 import { useRemotionEnvironment as useRemotionEnvironment2 } from "remotion";
@@ -12322,7 +12568,7 @@ var SetVisualControlsContext = createContext18({
   }
 });
 var VisualControlsProvider = ({ children }) => {
-  const imperativeHandles = useRef25({});
+  const imperativeHandles = useRef26({});
   const [handles, setHandles] = useState46({});
   const state = useMemo56(() => {
     return {
@@ -12351,7 +12597,7 @@ var VisualControlsProvider = ({ children }) => {
     };
   }, []);
   const z = useZodIfPossible();
-  const changedRef = useRef25(false);
+  const changedRef = useRef26(false);
   const env = useRemotionEnvironment2();
   const visualControl = useCallback47(function(key, value, schema) {
     if (handles && false) {}
@@ -13819,7 +14065,7 @@ var ZodArrayItemEditor = ({ elementSchema, onChange, jsonPath, index, value, may
 
 // src/components/RenderModal/InfoBubble.tsx
 import { PlayerInternals as PlayerInternals11 } from "@remotion/player";
-import { useCallback as useCallback54, useEffect as useEffect46, useMemo as useMemo67, useRef as useRef26, useState as useState50 } from "react";
+import { useCallback as useCallback54, useEffect as useEffect46, useMemo as useMemo67, useRef as useRef27, useState as useState50 } from "react";
 import ReactDOM8 from "react-dom";
 
 // src/components/RenderModal/InfoTooltip.tsx
@@ -13904,7 +14150,7 @@ var container28 = {
 var InfoBubble = ({ title: title4, children }) => {
   const [hovered, setIsHovered] = useState50(false);
   const [opened, setOpened] = useState50(false);
-  const ref2 = useRef26(null);
+  const ref2 = useRef27(null);
   const { tabIndex, currentZIndex } = useZIndex();
   const size2 = PlayerInternals11.useElementSize(ref2, {
     triggerOnWindowResize: true,
@@ -14162,7 +14408,7 @@ var ZodArrayEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =
 import { useCallback as useCallback56 } from "react";
 
 // src/components/Checkbox.tsx
-import { useEffect as useEffect47, useMemo as useMemo69, useRef as useRef27 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo69, useRef as useRef28 } from "react";
 import { jsx as jsx118, jsxs as jsxs58 } from "react/jsx-runtime";
 var size2 = 20;
 var background = {
@@ -14189,7 +14435,7 @@ var box = {
   color: "white"
 };
 var Checkbox = ({ checked, onChange, disabled, name, rounded }) => {
-  const ref2 = useRef27(null);
+  const ref2 = useRef28(null);
   const input2 = useMemo69(() => {
     return {
       appearance: "none",
@@ -14275,7 +14521,7 @@ var colorWithNewOpacity = (color, opacity, zodTypes) => {
 };
 
 // src/components/NewComposition/InputDragger.tsx
-import React82, { useCallback as useCallback57, useEffect as useEffect48, useMemo as useMemo70, useRef as useRef28, useState as useState52 } from "react";
+import React82, { useCallback as useCallback57, useEffect as useEffect48, useMemo as useMemo70, useRef as useRef29, useState as useState52 } from "react";
 import { interpolate as interpolate2 } from "remotion";
 import { jsx as jsx120 } from "react/jsx-runtime";
 var isInt = (num) => {
@@ -14297,8 +14543,8 @@ var InputDraggerForwardRefFn = ({
 }, ref2) => {
   const [inputFallback, setInputFallback] = useState52(false);
   const [dragging, setDragging] = useState52(false);
-  const fallbackRef = useRef28(null);
-  const pointerDownRef = useRef28(false);
+  const fallbackRef = useRef29(null);
+  const pointerDownRef = useRef29(false);
   const style8 = useMemo70(() => {
     return {
       ...inputBaseStyle,
@@ -14465,7 +14711,7 @@ import {
   useEffect as useEffect49,
   useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo71,
-  useRef as useRef29,
+  useRef as useRef30,
   useState as useState53
 } from "react";
 import { jsx as jsx121 } from "react/jsx-runtime";
@@ -14477,7 +14723,7 @@ var inputBaseStyle3 = {
 var RemInputTypeColorForwardRef = ({ status, ...props }, ref2) => {
   const [isFocused, setIsFocused] = useState53(false);
   const [isHovered, setIsHovered] = useState53(false);
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const { tabIndex } = useZIndex();
   const style8 = useMemo71(() => {
     return {
@@ -16658,7 +16904,7 @@ var ClientRenderQueueProcessor = () => {
     if (!compositionRef) {
       throw new Error(`Composition not found for job ${job.id}`);
     }
-    const { blob } = await renderStillOnWeb({
+    const blob = await (await renderStillOnWeb({
       composition: {
         component: compositionRef.component,
         width: compositionRef.width,
@@ -16670,15 +16916,15 @@ var ClientRenderQueueProcessor = () => {
         id: job.compositionId
       },
       frame: job.frame,
-      imageFormat: job.imageFormat,
       inputProps: job.inputProps,
       delayRenderTimeoutInMilliseconds: job.delayRenderTimeout,
       mediaCacheSizeInBytes: job.mediaCacheSizeInBytes,
       logLevel: job.logLevel,
       licenseKey: job.licenseKey ?? undefined,
       scale: job.scale,
-      signal
-    });
+      signal,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
+    })).blob({ format: job.imageFormat });
     return {
       getBlob: () => Promise.resolve(blob),
       width: compositionRef.width,
@@ -16728,7 +16974,8 @@ var ClientRenderQueueProcessor = () => {
         });
       },
       outputTarget: "web-fs",
-      licenseKey: job.licenseKey ?? undefined
+      licenseKey: job.licenseKey ?? undefined,
+      allowHtmlInCanvas: job.allowHtmlInCanvas
     });
     return {
       getBlob,
@@ -17406,7 +17653,8 @@ var makeClientRetryPayload = (job) => {
     initialStillImageFormat: job.type === "client-still" ? job.imageFormat : "png",
     initialKeyframeIntervalInSeconds: job.type === "client-video" ? job.keyframeIntervalInSeconds : null,
     initialMuted: job.type === "client-video" ? job.muted : null,
-    initialTransparent: job.type === "client-video" ? job.transparent : null
+    initialTransparent: job.type === "client-video" ? job.transparent : null,
+    initialAllowHtmlInCanvas: job.allowHtmlInCanvas
   };
 };
 
@@ -18224,7 +18472,7 @@ var OptionsPanel = ({ readOnlyStudio }) => {
 };
 
 // src/components/PreviewToolbar.tsx
-import { useContext as useContext61, useEffect as useEffect60, useRef as useRef32, useState as useState66 } from "react";
+import { useContext as useContext61, useEffect as useEffect60, useRef as useRef33, useState as useState66 } from "react";
 import { Internals as Internals44 } from "remotion";
 
 // src/state/loop.ts
@@ -18277,9 +18525,9 @@ var CheckboardToggle = () => {
 // src/components/FpsCounter.tsx
 import {
   useEffect as useEffect55,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo98,
-  useRef as useRef30,
+  useRef as useRef31,
   useState as useState63
 } from "react";
 import { Internals as Internals37 } from "remotion";
@@ -18300,15 +18548,15 @@ var FpsCounter = ({ playbackSpeed }) => {
   const frame2 = Internals37.Timeline.useTimelinePosition();
   const [marker, rerender] = useState63({});
   const [fps, setFps] = useState63(0);
-  const previousUpdates = useRef30([]);
-  const fpsRef = useRef30(0);
-  const playingRef = useRef30(playing);
-  useLayoutEffect3(() => {
+  const previousUpdates = useRef31([]);
+  const fpsRef = useRef31(0);
+  const playingRef = useRef31(playing);
+  useLayoutEffect5(() => {
     fpsRef.current = 0;
     previousUpdates.current = [];
     playingRef.current = playing;
   }, [playing]);
-  useLayoutEffect3(() => {
+  useLayoutEffect5(() => {
     if (playingRef.current === false)
       return;
     previousUpdates.current = pushWithMaxSize(previousUpdates.current, performance.now(), 15);
@@ -19033,7 +19281,7 @@ var PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds }) => {
 
 // src/components/RenderButton.tsx
 import { PlayerInternals as PlayerInternals14 } from "@remotion/player";
-import { useCallback as useCallback94, useContext as useContext59, useMemo as useMemo100, useRef as useRef31, useState as useState65 } from "react";
+import { useCallback as useCallback94, useContext as useContext59, useMemo as useMemo100, useRef as useRef32, useState as useState65 } from "react";
 import ReactDOM9 from "react-dom";
 import { Internals as Internals42 } from "remotion";
 import { jsx as jsx180, jsxs as jsxs84, Fragment as Fragment24 } from "react/jsx-runtime";
@@ -19107,8 +19355,8 @@ var RenderButton = ({
   const { setSelectedModal } = useContext59(ModalsContext);
   const [preferredRenderType, setPreferredRenderType] = useState65(() => getInitialRenderType(readOnlyStudio));
   const [dropdownOpened, setDropdownOpened] = useState65(false);
-  const dropdownRef = useRef31(null);
-  const containerRef = useRef31(null);
+  const dropdownRef = useRef32(null);
+  const containerRef = useRef32(null);
   const { currentZIndex } = useZIndex();
   const size4 = PlayerInternals14.useElementSize(dropdownRef, {
     triggerOnWindowResize: true,
@@ -19264,7 +19512,8 @@ var RenderButton = ({
       initialKeyframeIntervalInSeconds: null,
       initialTransparent: null,
       initialMuted: null,
-      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes
+      initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
+      initialAllowHtmlInCanvas: defaults.allowHtmlInCanvas
     });
   }, [video, setSelectedModal, getCurrentFrame2, props, inFrame, outFrame]);
   const onClick = useCallback94(() => {
@@ -19660,9 +19909,9 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
   const { setMediaMuted } = useContext61(Internals44.SetMediaVolumeContext);
   const { canvasContent } = useContext61(Internals44.CompositionManager);
   const isVideoComposition = useIsVideoComposition();
-  const previewToolbarRef = useRef32(null);
-  const leftScrollIndicatorRef = useRef32(null);
-  const rightScrollIndicatorRef = useRef32(null);
+  const previewToolbarRef = useRef33(null);
+  const leftScrollIndicatorRef = useRef33(null);
+  const rightScrollIndicatorRef = useRef33(null);
   const isStill = useIsStill();
   const [loop, setLoop] = useState66(loadLoopOption());
   const isFullscreenSupported = checkFullscreenSupport();
@@ -19818,7 +20067,7 @@ var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
 };
 
 // src/components/Splitter/SplitterContainer.tsx
-import { useMemo as useMemo101, useRef as useRef33, useState as useState67 } from "react";
+import { useMemo as useMemo101, useRef as useRef34, useState as useState67 } from "react";
 
 // src/state/timeline.ts
 var localStorageKey4 = (id) => `remotion.editor.timelineFlex.${id}`;
@@ -19873,8 +20122,8 @@ var containerColumn = {
 var SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFlex, id }) => {
   const [initialTimelineFlex, persistFlex] = useTimelineFlex(id);
   const [flexValue, setFlexValue] = useState67(initialTimelineFlex ?? defaultFlex);
-  const ref2 = useRef33(null);
-  const isDragging = useRef33(false);
+  const ref2 = useRef34(null);
+  const isDragging = useRef34(false);
   const value = useMemo101(() => {
     return {
       flexValue,
@@ -19947,7 +20196,7 @@ var SplitterElement = ({ children, type, sticky }) => {
 
 // src/components/Splitter/SplitterHandle.tsx
 import { PlayerInternals as PlayerInternals15 } from "@remotion/player";
-import { useContext as useContext63, useEffect as useEffect61, useRef as useRef34, useState as useState68 } from "react";
+import { useContext as useContext63, useEffect as useEffect61, useRef as useRef35, useState as useState68 } from "react";
 import { jsx as jsx186 } from "react/jsx-runtime";
 var SPLITTER_HANDLE_SIZE = 3;
 var containerRow2 = {
@@ -19962,7 +20211,7 @@ var SplitterHandle = ({ allowToCollapse, onCollapse }) => {
     throw new Error("Cannot find splitter context");
   }
   const [lastPointerUp, setLastPointerUp] = useState68(() => Date.now());
-  const ref2 = useRef34(null);
+  const ref2 = useRef35(null);
   useEffect61(() => {
     if (context.isDragging.current) {
       return;
@@ -20390,7 +20639,7 @@ import {
   useCallback as useCallback98,
   useContext as useContext66,
   useEffect as useEffect64,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState69
 } from "react";
 
@@ -20431,8 +20680,8 @@ var UndoRedoButtons = () => {
   const [redoFile, setRedoFile] = useState69(null);
   const { subscribeToEvent } = useContext66(StudioServerConnectionCtx);
   const keybindings = useKeybinding();
-  const undoInFlight = useRef35(false);
-  const redoInFlight = useRef35(false);
+  const undoInFlight = useRef36(false);
+  const redoInFlight = useRef36(false);
   useEffect64(() => {
     const unsub = subscribeToEvent("undo-redo-stack-changed", (event) => {
       if (event.type !== "undo-redo-stack-changed") {
@@ -20978,7 +21227,7 @@ import {
   useContext as useContext70,
   useEffect as useEffect66,
   useMemo as useMemo108,
-  useRef as useRef36,
+  useRef as useRef37,
   useState as useState73
 } from "react";
 import { Internals as Internals47, useVideoConfig as useVideoConfig4 } from "remotion";
@@ -21142,7 +21391,7 @@ var Inner2 = () => {
     dragging: false
   });
   const { playing, play, pause, seek } = PlayerInternals16.usePlayer();
-  const scroller = useRef36(null);
+  const scroller = useRef37(null);
   const stopInterval = () => {
     if (scroller.current) {
       clearInterval(scroller.current);
@@ -21518,7 +21767,7 @@ var Inner2 = () => {
 
 // src/components/Timeline/TimelineList.tsx
 import { PlayerInternals as PlayerInternals18 } from "@remotion/player";
-import { useRef as useRef40 } from "react";
+import { useRef as useRef41 } from "react";
 
 // src/components/Timeline/TimelineListItem.tsx
 import { useCallback as useCallback111, useContext as useContext74, useMemo as useMemo116 } from "react";
@@ -22418,7 +22667,7 @@ import {
   useContext as useContext73,
   useEffect as useEffect67,
   useMemo as useMemo115,
-  useRef as useRef37,
+  useRef as useRef38,
   useState as useState78
 } from "react";
 import { Internals as Internals49 } from "remotion";
@@ -22448,15 +22697,16 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
   const locationSource = validatedLocation?.source ?? null;
   const locationLine = validatedLocation?.line ?? null;
   const locationColumn = validatedLocation?.column ?? null;
-  const currentLocationSource = useRef37(locationSource);
+  const currentLocationSource = useRef38(locationSource);
   currentLocationSource.current = locationSource;
-  const currentLocationLine = useRef37(locationLine);
+  const currentLocationLine = useRef38(locationLine);
   currentLocationLine.current = locationLine;
-  const currentLocationColumn = useRef37(locationColumn);
+  const currentLocationColumn = useRef38(locationColumn);
   currentLocationColumn.current = locationColumn;
-  const nodePathRef = useRef37(null);
+  const nodePathRef = useRef38(null);
   const [nodePath, setNodePath] = useState78(null);
-  const isMountedRef = useRef37(true);
+  const [jsxInMapCallback, setJsxInMapCallback] = useState78(false);
+  const isMountedRef = useRef38(true);
   const setNodePathBoth = useCallback110((next) => {
     nodePathRef.current = next;
     setNodePath(next);
@@ -22471,11 +22721,13 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
     if (!visualModeEnabled) {
       setPropStatusesForSequence(null);
       setNodePathBoth(null);
+      setJsxInMapCallback(false);
       return;
     }
     if (!clientId || !locationSource || !locationLine || locationColumn === null || !schemaKeysString) {
       setPropStatusesForSequence(null);
       setNodePathBoth(null);
+      setJsxInMapCallback(false);
       return;
     }
     const keys = schemaKeysString.split(",");
@@ -22492,12 +22744,15 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
       if (result.canUpdate) {
         setNodePathBoth(result.nodePath);
         setPropStatusesForSequence(result.props);
+        setJsxInMapCallback(result.jsxInMapCallback);
       } else {
         setNodePathBoth(null);
         setPropStatusesForSequence(null);
+        setJsxInMapCallback(false);
       }
     }).catch((err) => {
       setNodePathBoth(null);
+      setJsxInMapCallback(false);
       Internals49.Log.error(err);
       setPropStatusesForSequence(null);
     });
@@ -22507,6 +22762,7 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
         setPropStatusesForSequence(null);
       }
       setNodePathBoth(null);
+      setJsxInMapCallback(false);
       if (currentNodePath) {
         callApi("/api/unsubscribe-from-sequence-props", {
           fileName: locationSource,
@@ -22541,9 +22797,11 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
       }
       if (event.result.canUpdate) {
         setPropStatusesForSequence(event.result.props);
+        setJsxInMapCallback(event.result.jsxInMapCallback);
       } else {
         setPropStatusesForSequence(null);
         setNodePathBoth(null);
+        setJsxInMapCallback(false);
       }
     };
     const unsub = subscribeToEvent("sequence-props-updated", listener);
@@ -22559,7 +22817,7 @@ var useSequencePropsSubscription = (sequence, originalLocation, visualModeEnable
     setPropStatusesForSequence,
     setNodePathBoth
   ]);
-  return nodePath;
+  return { nodePath, jsxInMapCallback };
 };
 
 // src/components/Timeline/TimelineListItem.tsx
@@ -22595,7 +22853,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
   const { hidden, setHidden } = useContext74(Internals50.SequenceVisibilityToggleContext);
   const { expandedTracks, toggleTrack } = useContext74(ExpandedTracksContext);
   const originalLocation = useResolvedStack(sequence.stack ?? null);
-  const nodePath = useSequencePropsSubscription(sequence, originalLocation, visualModeActive);
+  const { nodePath, jsxInMapCallback } = useSequencePropsSubscription(sequence, originalLocation, visualModeActive);
   const validatedLocation = useMemo116(() => {
     if (!originalLocation || !originalLocation.source || !originalLocation.line) {
       return null;
@@ -22608,6 +22866,31 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
   }, [originalLocation]);
   const canDeleteFromSource = Boolean(nodePath && validatedLocation?.source);
   const deleteDisabled = useMemo116(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+  const duplicateDisabled = deleteDisabled;
+  const onDuplicateSequenceFromSource = useCallback111(async () => {
+    if (!validatedLocation?.source || !nodePath) {
+      return;
+    }
+    if (jsxInMapCallback) {
+      const message = "This sequence is rendered inside a .map() callback. Duplicating inserts another copy in that callback (affecting each list item). Continue?";
+      if (!window.confirm(message)) {
+        return;
+      }
+    }
+    try {
+      const result = await callApi("/api/duplicate-jsx-node", {
+        fileName: validatedLocation.source,
+        nodePath
+      });
+      if (result.success) {
+        showNotification("Duplicated sequence in source file", 2000);
+      } else {
+        showNotification(result.reason, 4000);
+      }
+    } catch (err) {
+      showNotification(err.message, 4000);
+    }
+  }, [jsxInMapCallback, nodePath, validatedLocation?.source]);
   const onDeleteSequenceFromSource = useCallback111(async () => {
     if (!validatedLocation?.source || !nodePath) {
       return;
@@ -22631,6 +22914,23 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
       return [];
     }
     return [
+      {
+        type: "item",
+        id: "duplicate-sequence",
+        keyHint: null,
+        label: "Duplicate",
+        leftItem: null,
+        disabled: duplicateDisabled,
+        onClick: () => {
+          if (duplicateDisabled) {
+            return;
+          }
+          onDuplicateSequenceFromSource();
+        },
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value: "duplicate-sequence"
+      },
       {
         type: "item",
         id: "delete-sequence",
@@ -22649,7 +22949,13 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
         value: "delete-sequence"
       }
     ];
-  }, [deleteDisabled, onDeleteSequenceFromSource, visualModeEnvEnabled]);
+  }, [
+    deleteDisabled,
+    duplicateDisabled,
+    onDeleteSequenceFromSource,
+    onDuplicateSequenceFromSource,
+    visualModeEnvEnabled
+  ]);
   const isExpanded = visualModeActive && (expandedTracks[sequence.id] ?? false);
   const onToggleExpand = useCallback111(() => {
     toggleTrack(sequence.id);
@@ -22748,7 +23054,7 @@ var TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
 };
 
 // src/components/Timeline/TimelineTimeIndicators.tsx
-import { useContext as useContext75, useEffect as useEffect69, useMemo as useMemo117, useRef as useRef39 } from "react";
+import { useContext as useContext75, useEffect as useEffect69, useMemo as useMemo117, useRef as useRef40 } from "react";
 import { Internals as Internals52 } from "remotion";
 
 // src/components/TimeValue.tsx
@@ -22757,7 +23063,7 @@ import {
   useCallback as useCallback112,
   useEffect as useEffect68,
   useImperativeHandle as useImperativeHandle14,
-  useRef as useRef38
+  useRef as useRef39
 } from "react";
 import { Internals as Internals51, useCurrentFrame } from "remotion";
 import { jsx as jsx208, jsxs as jsxs100 } from "react/jsx-runtime";
@@ -22790,7 +23096,7 @@ var TimeValue = () => {
   const isStill = useIsStill();
   const { seek, play, pause, toggle } = PlayerInternals17.usePlayer();
   const keybindings = useKeybinding();
-  const ref2 = useRef38(null);
+  const ref2 = useRef39(null);
   const onTextChange = useCallback112((newVal) => {
     seek(parseInt(newVal, 10));
   }, [seek]);
@@ -22918,7 +23224,7 @@ var TimelineTimeIndicators = () => {
   });
 };
 var Inner3 = ({ windowWidth, durationInFrames, fps }) => {
-  const ref2 = useRef39(null);
+  const ref2 = useRef40(null);
   useEffect69(() => {
     const currentRef = ref2.current;
     if (!currentRef) {
@@ -23001,7 +23307,7 @@ var container42 = {
   background: BACKGROUND
 };
 var TimelineList = ({ timeline }) => {
-  const ref2 = useRef40(null);
+  const ref2 = useRef41(null);
   const size4 = PlayerInternals18.useElementSize(ref2, {
     shouldApplyCssTransforms: false,
     triggerOnWindowResize: false
@@ -23026,7 +23332,7 @@ var TimelineList = ({ timeline }) => {
 };
 
 // src/components/Timeline/TimelinePinchZoom.tsx
-import { useCallback as useCallback113, useContext as useContext76, useEffect as useEffect70, useRef as useRef41 } from "react";
+import { useCallback as useCallback113, useContext as useContext76, useEffect as useEffect70, useRef as useRef42 } from "react";
 import { Internals as Internals53 } from "remotion";
 var ZOOM_WHEEL_DELTA = 0.06;
 var TimelinePinchZoom = () => {
@@ -23035,11 +23341,11 @@ var TimelinePinchZoom = () => {
   const { canvasContent } = useContext76(Internals53.CompositionManager);
   const { zoom, setZoom } = useContext76(TimelineZoomCtx);
   const { editorZoomGestures } = useContext76(EditorZoomGesturesContext);
-  const zoomRef = useRef41(zoom);
+  const zoomRef = useRef42(zoom);
   zoomRef.current = zoom;
-  const pinchBaseZoomRef = useRef41(null);
-  const suppressWheelFromWebKitPinchRef = useRef41(false);
-  const touchPinchRef = useRef41(null);
+  const pinchBaseZoomRef = useRef42(null);
+  const suppressWheelFromWebKitPinchRef = useRef42(false);
+  const touchPinchRef = useRef42(null);
   const onWheel = useCallback113((e) => {
     if (!editorZoomGestures || !isVideoComposition) {
       return;
@@ -23458,7 +23764,7 @@ var useMaxMediaDuration = (s, fps) => {
 };
 
 // src/components/AudioWaveform.tsx
-import { useEffect as useEffect73, useMemo as useMemo119, useRef as useRef42, useState as useState80 } from "react";
+import { useEffect as useEffect73, useMemo as useMemo119, useRef as useRef43, useState as useState80 } from "react";
 import { Internals as Internals55 } from "remotion";
 
 // src/components/parse-color.ts
@@ -23637,9 +23943,9 @@ var AudioWaveform = ({
   if (vidConf === null) {
     throw new Error("Expected video config");
   }
-  const containerRef = useRef42(null);
-  const waveformCanvas = useRef42(null);
-  const volumeCanvas = useRef42(null);
+  const containerRef = useRef43(null);
+  const waveformCanvas = useRef43(null);
+  const volumeCanvas = useRef43(null);
   useEffect73(() => {
     const controller = new AbortController;
     setError(null);
@@ -23835,7 +24141,7 @@ var LoopedTimelineIndicator = ({ loops }) => {
 };
 
 // src/components/Timeline/TimelineImageInfo.tsx
-import { useEffect as useEffect74, useRef as useRef43 } from "react";
+import { useEffect as useEffect74, useRef as useRef44 } from "react";
 import { jsx as jsx215 } from "react/jsx-runtime";
 var HEIGHT = getTimelineLayerHeight("image") - 2;
 var containerStyle3 = {
@@ -23847,7 +24153,7 @@ var containerStyle3 = {
   borderBottomLeftRadius: 2
 };
 var TimelineImageInfo = ({ src, visualizationWidth }) => {
-  const ref2 = useRef43(null);
+  const ref2 = useRef44(null);
   useEffect74(() => {
     const { current } = ref2;
     if (!current) {
@@ -23912,7 +24218,7 @@ var TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
 };
 
 // src/components/Timeline/TimelineVideoInfo.tsx
-import { useEffect as useEffect75, useMemo as useMemo120, useRef as useRef44, useState as useState81 } from "react";
+import { useEffect as useEffect75, useMemo as useMemo120, useRef as useRef45, useState as useState81 } from "react";
 import { useVideoConfig as useVideoConfig5 } from "remotion";
 
 // src/helpers/extract-frames.ts
@@ -24273,9 +24579,9 @@ var TimelineVideoInfo = ({
   postmountWidth
 }) => {
   const { fps } = useVideoConfig5();
-  const ref2 = useRef44(null);
+  const ref2 = useRef45(null);
   const [error, setError] = useState81(null);
-  const aspectRatio = useRef44(getAspectRatioFromCache(src));
+  const aspectRatio = useRef45(getAspectRatioFromCache(src));
   useEffect75(() => {
     if (error) {
       return;
@@ -26250,7 +26556,7 @@ import {
   useContext as useContext91,
   useEffect as useEffect81,
   useMemo as useMemo131,
-  useRef as useRef46,
+  useRef as useRef47,
   useState as useState87
 } from "react";
 import { Internals as Internals64 } from "remotion";
@@ -27148,7 +27454,7 @@ var QuickSwitcherNoResults = ({ query, mode }) => {
 };
 
 // src/components/QuickSwitcher/QuickSwitcherResult.tsx
-import { useEffect as useEffect80, useMemo as useMemo130, useRef as useRef45, useState as useState86 } from "react";
+import { useEffect as useEffect80, useMemo as useMemo130, useRef as useRef46, useState as useState86 } from "react";
 import { jsx as jsx239, jsxs as jsxs122, Fragment as Fragment37 } from "react/jsx-runtime";
 var container50 = {
   paddingLeft: 16,
@@ -27178,7 +27484,7 @@ var labelContainer = {
 };
 var QuickSwitcherResult = ({ result, selected }) => {
   const [hovered, setIsHovered] = useState86(false);
-  const ref2 = useRef45(null);
+  const ref2 = useRef46(null);
   const keybindings = useKeybinding();
   useEffect80(() => {
     const { current } = ref2;
@@ -27356,7 +27662,7 @@ var QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio }
       selectedIndex: 0
     });
   }, [initialMode, invocationTimestamp]);
-  const inputRef = useRef46(null);
+  const inputRef = useRef47(null);
   const selectComposition = useSelectComposition();
   const closeMenu = useCallback122(() => {
     return;
@@ -28132,7 +28438,7 @@ import {
   useEffect as useEffect84,
   useMemo as useMemo142,
   useReducer as useReducer2,
-  useRef as useRef48,
+  useRef as useRef49,
   useState as useState93
 } from "react";
 
@@ -28640,8 +28946,9 @@ var padding3 = {
 var title6 = {
   fontSize: 14
 };
+var DESCRIPTION_FONT_SIZE_PX = 14;
 var description = {
-  fontSize: 14,
+  fontSize: DESCRIPTION_FONT_SIZE_PX,
   maxWidth: 400
 };
 var link3 = {
@@ -28700,9 +29007,22 @@ var OptionExplainer = ({ option }) => {
               }) : null
             ]
           }),
-          /* @__PURE__ */ jsx253("div", {
+          /* @__PURE__ */ jsxs127("div", {
             style: description,
-            children: option.description("ssr")
+            children: [
+              /* @__PURE__ */ jsx253("style", {
+                children: `
+							.__remotion-option-explainer-description a,
+							.__remotion-option-explainer-description code {
+								font-size: ${DESCRIPTION_FONT_SIZE_PX}px;
+							}
+						`
+              }),
+              /* @__PURE__ */ jsx253("div", {
+                className: "__remotion-option-explainer-description",
+                children: option.description("ssr")
+              })
+            ]
           })
         ]
       }),
@@ -30121,12 +30441,12 @@ import { BrowserSafeApis as BrowserSafeApis7 } from "@remotion/renderer/client";
 import { useCallback as useCallback134, useMemo as useMemo137 } from "react";
 
 // src/helpers/use-file-existence.ts
-import { useContext as useContext93, useEffect as useEffect83, useRef as useRef47, useState as useState92 } from "react";
+import { useContext as useContext93, useEffect as useEffect83, useRef as useRef48, useState as useState92 } from "react";
 var useFileExistence = (outName) => {
   const [exists, setExists] = useState92(false);
   const { previewServerState: state, subscribeToEvent } = useContext93(StudioServerConnectionCtx);
   const clientId = state.type === "connected" ? state.clientId : undefined;
-  const currentOutName = useRef47("");
+  const currentOutName = useRef48("");
   currentOutName.current = outName;
   useEffect83(() => {
     if (!clientId) {
@@ -31519,7 +31839,7 @@ var RenderModal = ({
     resolved: { result: resolvedComposition },
     unresolved: unresolvedComposition
   } = context;
-  const isMounted = useRef48(true);
+  const isMounted = useRef49(true);
   const [isVideo] = useState93(() => {
     return typeof resolvedComposition.durationInFrames === "undefined" ? true : resolvedComposition.durationInFrames > 1;
   });
@@ -32665,9 +32985,9 @@ import {
   getEncodableAudioCodecs,
   getSupportedAudioCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect85, useRef as useRef49, useState as useState94 } from "react";
+import { useEffect as useEffect85, useRef as useRef50, useState as useState94 } from "react";
 var useEncodableAudioCodecs = (container61) => {
-  const cacheRef = useRef49({});
+  const cacheRef = useRef50({});
   const [codecsByContainer, setCodecsByContainer] = useState94(() => {
     return {
       [container61]: getSupportedAudioCodecsForContainer(container61)
@@ -32707,9 +33027,9 @@ import {
   getEncodableVideoCodecs,
   getSupportedVideoCodecsForContainer
 } from "@remotion/web-renderer";
-import { useEffect as useEffect86, useRef as useRef50, useState as useState95 } from "react";
+import { useEffect as useEffect86, useRef as useRef51, useState as useState95 } from "react";
 var useEncodableVideoCodecs = (container61) => {
-  const cacheRef = useRef50({});
+  const cacheRef = useRef51({});
   const [codecsByContainer, setCodecsByContainer] = useState95(() => {
     return {
       [container61]: getSupportedVideoCodecsForContainer(container61)
@@ -32820,7 +33140,9 @@ var WebRenderModalAdvanced = ({
   mediaCacheSizeInBytes,
   setMediaCacheSizeInBytes,
   hardwareAcceleration,
-  setHardwareAcceleration
+  setHardwareAcceleration,
+  allowHtmlInCanvas,
+  setAllowHtmlInCanvas
 }) => {
   const toggleCustomMediaCacheSizeInBytes = useCallback143(() => {
     setMediaCacheSizeInBytes((previous) => {
@@ -32830,6 +33152,9 @@ var WebRenderModalAdvanced = ({
       return null;
     });
   }, [setMediaCacheSizeInBytes]);
+  const toggleAllowHtmlInCanvas = useCallback143(() => {
+    setAllowHtmlInCanvas((prev) => !prev);
+  }, [setAllowHtmlInCanvas]);
   const changeMediaCacheSizeInBytes = useCallback143((cb) => {
     setMediaCacheSizeInBytes((prev) => {
       if (prev === null) {
@@ -32941,7 +33266,32 @@ var WebRenderModalAdvanced = ({
             })
           })
         ]
-      }) : null
+      }) : null,
+      /* @__PURE__ */ jsxs146("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsxs146("div", {
+            style: label6,
+            children: [
+              "Allow HTML-in-canvas ",
+              /* @__PURE__ */ jsx278(Spacing, {
+                x: 0.5
+              }),
+              /* @__PURE__ */ jsx278(OptionExplainerBubble, {
+                id: "allowHtmlInCanvasOption"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx278("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx278(Checkbox, {
+              checked: allowHtmlInCanvas,
+              onChange: toggleAllowHtmlInCanvas,
+              name: "allow-html-in-canvas"
+            })
+          })
+        ]
+      })
     ]
   });
 };
@@ -33958,7 +34308,8 @@ var WebRenderModal = ({
   initialHardwareAcceleration,
   initialKeyframeIntervalInSeconds,
   initialTransparent,
-  initialMuted
+  initialMuted,
+  initialAllowHtmlInCanvas
 }) => {
   const context = useContext95(ResolvedCompositionContext);
   const { setSelectedModal } = useContext95(ModalsContext);
@@ -33998,6 +34349,7 @@ var WebRenderModal = ({
   const [muted, setMuted] = useState97(initialMuted ?? false);
   const [scale, setScale] = useState97(initialScale ?? 1);
   const [licenseKey, setLicenseKey] = useState97(initialLicenseKey);
+  const [allowHtmlInCanvas, setAllowHtmlInCanvas] = useState97(initialAllowHtmlInCanvas ?? false);
   const encodableAudioCodecs = useEncodableAudioCodecs(container62);
   const encodableVideoCodecs = useEncodableVideoCodecs(container62);
   const effectiveAudioCodec = useMemo147(() => {
@@ -34190,7 +34542,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     } else {
       addClientVideoJob({
@@ -34213,7 +34566,8 @@ var WebRenderModal = ({
         mediaCacheSizeInBytes,
         logLevel,
         licenseKey,
-        scale
+        scale,
+        allowHtmlInCanvas
       }, compositionRef);
     }
     setSidebarCollapsedState({ left: null, right: "expanded" });
@@ -34253,7 +34607,8 @@ var WebRenderModal = ({
     setSelectedModal,
     addClientStillJob,
     addClientVideoJob,
-    scale
+    scale,
+    allowHtmlInCanvas
   ]);
   return /* @__PURE__ */ jsxs152("div", {
     style: outerModalStyle,
@@ -34448,7 +34803,9 @@ var WebRenderModal = ({
               mediaCacheSizeInBytes,
               setMediaCacheSizeInBytes,
               hardwareAcceleration,
-              setHardwareAcceleration
+              setHardwareAcceleration,
+              allowHtmlInCanvas,
+              setAllowHtmlInCanvas
             }) : /* @__PURE__ */ jsx286(WebRenderModalLicense, {
               licenseKey,
               setLicenseKey,
@@ -35094,15 +35451,15 @@ var SetTimelineInOutProvider = ({ children }) => {
 };
 
 // src/components/ShowGuidesProvider.tsx
-import { useCallback as useCallback153, useMemo as useMemo156, useRef as useRef51, useState as useState106 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo156, useRef as useRef52, useState as useState106 } from "react";
 import { jsx as jsx298 } from "react/jsx-runtime";
 var ShowGuidesProvider = ({ children }) => {
   const [guidesList, setGuidesList] = useState106(() => loadGuidesList());
   const [selectedGuideId, setSelectedGuideId] = useState106(null);
   const [hoveredGuideId, setHoveredGuideId] = useState106(null);
   const [editorShowGuides, setEditorShowGuidesState] = useState106(() => loadEditorShowGuidesOption());
-  const shouldCreateGuideRef = useRef51(false);
-  const shouldDeleteGuideRef = useRef51(false);
+  const shouldCreateGuideRef = useRef52(false);
+  const shouldDeleteGuideRef = useRef52(false);
   const setEditorShowGuides = useCallback153((newValue) => {
     setEditorShowGuidesState((prevState) => {
       const newVal = newValue(prevState);
@@ -35817,7 +36174,7 @@ var StudioInner = ({ rootComponent, readOnly, visualModeEnabled }) => {
   });
 };
 var Studio = ({ rootComponent, readOnly, visualModeEnabled }) => {
-  useLayoutEffect4(() => {
+  useLayoutEffect6(() => {
     injectCSS();
   }, []);
   return /* @__PURE__ */ jsx305(FastRefreshProvider, {