@remotion/studio 4.0.522 → 4.0.523

package/dist/esm/index-xhe2m2qr.mjs

@@ -0,0 +1,1146 @@
+import {
+  getStudioKeyboardShortcuts,
+  getStudioKeyboardShortcutsEnabled
+} from "./index-5zrb1ft4.mjs";
+import {
+  BACKGROUND,
+  BLUE,
+  BORDER_BLACK,
+  CURRENT_COLOR,
+  FAIL_COLOR,
+  LIGHT_TEXT,
+  SHADOW_BLACK,
+  TRANSPARENT,
+  WARNING_COLOR,
+  WHITE,
+  WHITE_ALPHA_20,
+  getBackgroundFromHoverState
+} from "./index-jg13hf2g.mjs";
+
+// src/components/layout.tsx
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var SPACING_UNIT = 8;
+var COMPACT_CONTROL_ROW_HEIGHT = 28;
+var COMPACT_INLINE_ROW_HEIGHT = 22;
+var Spacing = ({ x = 0, y = 0, block = false }) => {
+  const style = useMemo(() => {
+    return {
+      display: block ? "block" : "inline-block",
+      width: x * SPACING_UNIT,
+      height: y * SPACING_UNIT,
+      flexShrink: 0
+    };
+  }, [block, x, y]);
+  return /* @__PURE__ */ jsx("div", {
+    style
+  });
+};
+var flexCss = { flex: 1 };
+var Flex = ({ children }) => /* @__PURE__ */ jsx("div", {
+  style: flexCss,
+  children
+});
+var Row = ({ children, justify, className, align, flex, style = {}, ...other }) => {
+  const finalStyle = useMemo(() => {
+    return {
+      ...style,
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: justify ?? "flex-start",
+      alignItems: align ?? "flex-start",
+      flex: flex ?? undefined
+    };
+  }, [align, flex, justify, style]);
+  return /* @__PURE__ */ jsx("div", {
+    className,
+    style: finalStyle,
+    ...other,
+    children
+  });
+};
+var Column = ({ children, justify, className, align, style = {} }) => {
+  const finalStyle = useMemo(() => {
+    return {
+      ...style,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: justify ?? "flex-start",
+      alignItems: align ?? "flex-start"
+    };
+  }, [align, justify, style]);
+  return /* @__PURE__ */ jsx("div", {
+    className,
+    style: finalStyle,
+    children
+  });
+};
+
+// src/components/InlineAction.tsx
+import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
+
+// src/helpers/hoverable.ts
+var HOVERABLE_CLASS_NAME = "__remotion-hoverable";
+var HOVER_GROUP_CLASS_NAME = "__remotion-hover-group";
+var HOVER_GROUP_REVEAL_CLASS_NAME = "__remotion-hover-group-reveal";
+var FOCUS_VISIBLE_ONLY_CLASS_NAME = "__remotion-focus-visible-only";
+var BG_VARIABLE = "--remotion-hoverable-bg";
+var HOVER_BG_VARIABLE = "--remotion-hoverable-hover-bg";
+var COLOR_VARIABLE = "--remotion-hoverable-color";
+var HOVER_COLOR_VARIABLE = "--remotion-hoverable-hover-color";
+var NO_HOVER_BACKGROUND_STYLE = {
+  [HOVER_BG_VARIABLE]: TRANSPARENT
+};
+var hoverableStyle = ({
+  idleBackground,
+  hoverBackground,
+  idleColor,
+  hoverColor
+}) => {
+  return {
+    [BG_VARIABLE]: idleBackground,
+    [HOVER_BG_VARIABLE]: hoverBackground,
+    [COLOR_VARIABLE]: idleColor,
+    [HOVER_COLOR_VARIABLE]: hoverColor
+  };
+};
+var hoverable = `.${HOVERABLE_CLASS_NAME}.${HOVERABLE_CLASS_NAME}`;
+var hoverGroup = `.${HOVER_GROUP_CLASS_NAME}`;
+var reveal = `.${HOVER_GROUP_REVEAL_CLASS_NAME}.${HOVER_GROUP_REVEAL_CLASS_NAME}`;
+var makeHoverableCSS = () => `
+  ${hoverable} {
+    background-color: var(${BG_VARIABLE}, ${TRANSPARENT});
+  }
+
+  ${hoverable},
+  ${hoverable} * {
+    color: var(${COLOR_VARIABLE}, inherit);
+  }
+
+  ${hoverGroup} ${reveal} {
+    flex-shrink: 0;
+  }
+
+  @media (hover: hover) {
+    ${hoverable}:hover {
+      background-color: var(${HOVER_BG_VARIABLE}, var(${BG_VARIABLE}, ${TRANSPARENT}));
+    }
+
+    ${hoverable}:hover,
+    ${hoverable}:hover * {
+      color: var(${HOVER_COLOR_VARIABLE}, var(${COLOR_VARIABLE}, inherit));
+    }
+
+    /* An outer hoverable must not put a nested inline action into its hover
+       state. The nested action should only use its hover color when the
+       pointer is over the action itself. */
+    ${hoverable}:hover ${hoverable}:not(:hover),
+    ${hoverable}:hover ${hoverable}:not(:hover) * {
+      color: var(${COLOR_VARIABLE}, inherit);
+    }
+
+    ${hoverGroup} ${reveal} {
+      opacity: 0;
+      width: 0;
+      overflow: hidden;
+    }
+
+    ${hoverGroup}:hover ${reveal} {
+      opacity: 1;
+      width: auto;
+      overflow: visible;
+    }
+  }
+`;
+
+// src/state/z-index.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext2,
+  useLayoutEffect,
+  useMemo as useMemo5,
+  useRef as useRef2
+} from "react";
+
+// src/helpers/pointer-session.ts
+var getButtonMask = (button) => {
+  if (button === 0) {
+    return 1;
+  }
+  if (button === 1) {
+    return 4;
+  }
+  if (button === 2) {
+    return 2;
+  }
+  return 1 << button;
+};
+var startPointerSession = ({
+  event,
+  captureTarget,
+  onMove,
+  onEnd
+}) => {
+  const { pointerId } = event;
+  const buttonMask = getButtonMask(event.button);
+  let ended = false;
+  let activeCaptureTarget = null;
+  const capturePointer = (target) => {
+    if (activeCaptureTarget !== null) {
+      return;
+    }
+    activeCaptureTarget = target;
+    try {
+      target.setPointerCapture?.(pointerId);
+    } catch {}
+    target.addEventListener("lostpointercapture", handleLostPointerCapture);
+  };
+  const cleanup = () => {
+    window.removeEventListener("pointermove", handleMove);
+    window.removeEventListener("pointerup", handleUp);
+    window.removeEventListener("pointercancel", handleCancel);
+    window.removeEventListener("blur", handleBlur);
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+    activeCaptureTarget?.removeEventListener("lostpointercapture", handleLostPointerCapture);
+    if (activeCaptureTarget?.hasPointerCapture?.(pointerId)) {
+      try {
+        activeCaptureTarget.releasePointerCapture(pointerId);
+      } catch {}
+    }
+  };
+  const end = (reason, pointerEvent) => {
+    if (ended) {
+      return;
+    }
+    ended = true;
+    cleanup();
+    onEnd(reason, pointerEvent);
+  };
+  function handleMove(moveEvent) {
+    if (moveEvent.pointerId !== pointerId) {
+      return;
+    }
+    if ((moveEvent.buttons & buttonMask) === 0) {
+      end("buttons-released", moveEvent);
+      return;
+    }
+    onMove?.(moveEvent, capturePointer);
+  }
+  function handleUp(upEvent) {
+    if (upEvent.pointerId === pointerId) {
+      end("pointerup", upEvent);
+    }
+  }
+  function handleCancel(cancelEvent) {
+    if (cancelEvent.pointerId === pointerId) {
+      end("pointercancel", cancelEvent);
+    }
+  }
+  function handleLostPointerCapture(lostEvent) {
+    const pointerEvent = lostEvent;
+    if (pointerEvent.pointerId === pointerId) {
+      end("lostpointercapture", pointerEvent);
+    }
+  }
+  function handleBlur() {
+    end("blur", null);
+  }
+  function handleVisibilityChange() {
+    if (document.visibilityState === "hidden") {
+      end("visibilitychange", null);
+    }
+  }
+  if (captureTarget !== null) {
+    capturePointer(captureTarget);
+  }
+  window.addEventListener("pointermove", handleMove);
+  window.addEventListener("pointerup", handleUp);
+  window.addEventListener("pointercancel", handleCancel);
+  window.addEventListener("blur", handleBlur);
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  return () => end("manual", null);
+};
+var startCapturedPointerSession = ({
+  event,
+  captureTarget,
+  onMove,
+  onEnd
+}) => {
+  return startPointerSession({ event, captureTarget, onMove, onEnd });
+};
+var startDeferredCapturedPointerSession = ({
+  event,
+  captureTarget,
+  onMove,
+  onEnd
+}) => {
+  return startPointerSession({
+    event,
+    captureTarget: null,
+    onMove: (moveEvent, capturePointer) => {
+      onMove(moveEvent, () => capturePointer(captureTarget));
+    },
+    onEnd
+  });
+};
+var observePointerRelease = ({
+  event,
+  onEnd
+}) => {
+  return startPointerSession({
+    event,
+    captureTarget: null,
+    onEnd
+  });
+};
+
+// src/helpers/use-keybinding.ts
+import { useCallback as useCallback2, useContext, useEffect, useMemo as useMemo3, useState } from "react";
+
+// src/helpers/is-mac.ts
+var isMac = typeof window !== "undefined" && window.navigator.platform.startsWith("Mac");
+
+// src/components/keyboard-shortcuts.ts
+var shortcut = (action, actionId) => ({ action, actionId });
+var fixedShortcut = (action, fixedChords, fixedReason) => ({ action, actionId: null, fixedChords, fixedReason });
+var defaultKeyboardShortcuts = {
+  playPause: [{ key: "Space" }],
+  jumpToBeginning: [{ key: "a" }],
+  jumpToEnd: [{ key: "e" }],
+  reversePlayback: [{ key: "j" }],
+  pausePlayback: [{ key: "k" }],
+  playForward: [{ key: "l" }],
+  goToFrame: [{ key: "g" }],
+  pauseAndReturnToPlaybackStart: [{ key: "Enter" }],
+  toggleLeftSidebar: [{ key: "b", commandOrControl: true }],
+  toggleRightSidebar: [{ key: "j", commandOrControl: true }],
+  toggleBothSidebars: [{ key: "g", commandOrControl: true }],
+  enterFullscreen: [{ key: "f" }],
+  toggleSnapping: [{ key: "m", shift: true }],
+  previousComposition: [{ key: "PageUp" }],
+  nextComposition: [{ key: "PageDown" }],
+  showKeyboardShortcuts: [{ key: "?", shift: true }],
+  quickSwitcher: [{ key: "k", commandOrControl: true }],
+  render: [{ key: "r" }],
+  toggleCheckerboard: [{ key: "t" }],
+  setInPoint: [{ key: "i" }],
+  setOutPoint: [{ key: "o" }],
+  clearInOutPoints: [{ key: "x" }],
+  zoomIn: [{ key: "+", shift: true }, { key: "+" }],
+  zoomOut: [{ key: "-" }],
+  resetZoom: [{ key: "0" }],
+  undo: [{ key: "z", commandOrControl: true }],
+  redo: [
+    ...isMac ? [] : [{ key: "y", commandOrControl: true }],
+    { key: "z", commandOrControl: true, shift: true }
+  ],
+  selectAllSequenceRows: [{ key: "a", commandOrControl: true }],
+  selectTranslateProp: [{ key: "p" }],
+  selectOpacityProp: [{ key: "t" }],
+  selectRotateProp: [{ key: "r" }],
+  selectScaleProp: [{ key: "s" }],
+  duplicateSequences: [{ key: "d", commandOrControl: true }],
+  copyEffectsAndValues: [{ key: "c", commandOrControl: true }],
+  cutEffects: [{ key: "x", commandOrControl: true }],
+  deleteSelection: [{ key: "Backspace" }, { key: "Delete" }],
+  askAI: [{ key: "i", commandOrControl: true }]
+};
+var keyboardShortcutGroups = [
+  {
+    name: "Playback",
+    shortcuts: [
+      fixedShortcut("1 second back", [["Shift", "←"]], "Context-sensitive timeline control"),
+      fixedShortcut("Previous frame", [["←"]], "Context-sensitive timeline control"),
+      shortcut("Play / Pause", "playPause"),
+      fixedShortcut("Next frame", [["→"]], "Context-sensitive timeline control"),
+      fixedShortcut("1 second forward", [["Shift", "→"]], "Context-sensitive timeline control"),
+      shortcut("Jump to beginning", "jumpToBeginning"),
+      shortcut("Jump to end", "jumpToEnd"),
+      shortcut("Reverse playback", "reversePlayback"),
+      shortcut("Pause", "pausePlayback"),
+      shortcut("Play / Speed up", "playForward"),
+      shortcut("Go to frame", "goToFrame"),
+      shortcut("Pause & return to playback start", "pauseAndReturnToPlaybackStart")
+    ]
+  },
+  {
+    name: "Sidebar",
+    shortcuts: [
+      shortcut("Toggle left sidebar", "toggleLeftSidebar"),
+      shortcut("Toggle right sidebar", "toggleRightSidebar"),
+      shortcut("Toggle both sidebars", "toggleBothSidebars")
+    ]
+  },
+  {
+    name: "View",
+    shortcuts: [
+      shortcut("Enter fullscreen", "enterFullscreen"),
+      fixedShortcut("Exit fullscreen", [["Esc"]], "Handled by the browser"),
+      shortcut("Enable snapping", "toggleSnapping")
+    ]
+  },
+  {
+    name: "Navigation",
+    shortcuts: [
+      shortcut("Previous composition", "previousComposition"),
+      shortcut("Next composition", "nextComposition"),
+      shortcut("Render, unless a sequence or prop is selected", "render"),
+      shortcut("Checkerboard, unless a sequence or prop is selected", "toggleCheckerboard"),
+      shortcut("Show keyboard shortcuts", "showKeyboardShortcuts"),
+      shortcut("Quick Switcher", "quickSwitcher")
+    ]
+  },
+  {
+    name: "Playback range",
+    shortcuts: [
+      shortcut("Set In Point", "setInPoint"),
+      shortcut("Set Out Point", "setOutPoint"),
+      shortcut("Clear In/Out Points", "clearInOutPoints")
+    ]
+  },
+  {
+    name: "Zoom",
+    shortcuts: [
+      shortcut("Zoom in", "zoomIn"),
+      shortcut("Zoom out", "zoomOut"),
+      shortcut("Reset zoom", "resetZoom")
+    ]
+  },
+  {
+    name: "Props Editor",
+    shortcuts: [shortcut("Undo", "undo"), shortcut("Redo", "redo")]
+  },
+  {
+    name: "Interactivity",
+    shortcuts: [
+      fixedShortcut("Select range / axis lock drag", [["Shift"]], "Gesture modifier"),
+      fixedShortcut("Toggle selection", [[isMac ? "⌘" : "Ctrl"]], "Gesture modifier"),
+      shortcut("Select sequence rows", "selectAllSequenceRows"),
+      shortcut("Select translate prop", "selectTranslateProp"),
+      shortcut("Select opacity prop", "selectOpacityProp"),
+      shortcut("Select rotate prop", "selectRotateProp"),
+      shortcut("Select scale prop", "selectScaleProp"),
+      shortcut("Duplicate sequences", "duplicateSequences"),
+      shortcut("Copy effects / values", "copyEffectsAndValues"),
+      shortcut("Cut effects", "cutEffects"),
+      fixedShortcut("Paste effects / values", [[isMac ? "⌘" : "Ctrl", "V"]], "Handled by the browser clipboard event"),
+      shortcut("Delete / reset selection", "deleteSelection")
+    ]
+  }
+];
+var askAIKeyboardShortcutGroup = {
+  name: "AI",
+  shortcuts: [shortcut("Ask AI", "askAI")]
+};
+var getKeyboardShortcutsForAction = (action, configured = getStudioKeyboardShortcuts()) => {
+  if (configured !== null && Object.prototype.hasOwnProperty.call(configured, action)) {
+    const value = configured[action];
+    if (value === null) {
+      return [];
+    }
+    return Array.isArray(value) ? value : [
+      value
+    ];
+  }
+  return defaultKeyboardShortcuts[action];
+};
+var normalizeKey = (key) => key === "Space" ? " " : key;
+var keyboardEventMatchesShortcut = ({
+  event,
+  shortcut: value
+}) => {
+  const commandOrControl = isMac ? event.metaKey : event.ctrlKey;
+  return event.key.toLowerCase() === normalizeKey(value.key).toLowerCase() && commandOrControl === (value.commandOrControl ?? false) && (isMac ? !event.ctrlKey : !event.metaKey) && (!value.shift || event.shiftKey) && (!value.alt || event.altKey);
+};
+var keyboardShortcutsOverlap = (first, second) => first.key.toLowerCase() === second.key.toLowerCase() && (first.commandOrControl ?? false) === (second.commandOrControl ?? false);
+var keyboardEventMatchesAction = (event, action) => getKeyboardShortcutsForAction(action).some((value) => keyboardEventMatchesShortcut({ event, shortcut: value }));
+var displayKey = (keyboardKey) => {
+  if (keyboardKey === "ArrowLeft")
+    return "←";
+  if (keyboardKey === "ArrowRight")
+    return "→";
+  if (keyboardKey === "Delete")
+    return "Del";
+  if (keyboardKey === "Backspace")
+    return "⌫";
+  if (keyboardKey === "Escape")
+    return "Esc";
+  return keyboardKey.length === 1 ? keyboardKey.toUpperCase() : keyboardKey;
+};
+var formatKeyboardShortcut = (value) => [
+  ...value.commandOrControl ? [isMac ? "⌘" : "Ctrl"] : [],
+  ...value.alt ? [isMac ? "Option" : "Alt"] : [],
+  ...value.shift && !["+", "?"].includes(value.key) ? ["Shift"] : [],
+  displayKey(value.key)
+];
+var formatKeyboardShortcutForAria = (value) => [
+  ...value.commandOrControl ? [isMac ? "Meta" : "Control"] : [],
+  ...value.alt ? ["Alt"] : [],
+  ...value.shift ? ["Shift"] : [],
+  value.key
+].join("+");
+var getKeyboardShortcutLabel = (action) => getKeyboardShortcutsForAction(action).map((value) => formatKeyboardShortcut(value).join("+")).join(" / ");
+var getKeyboardShortcutAriaKeyShortcuts = (action) => getKeyboardShortcutsForAction(action).map(formatKeyboardShortcutForAria).join(" ");
+var shortcutFromKeyboardEvent = (event) => {
+  if (["Alt", "Control", "Meta", "Shift"].includes(event.key)) {
+    return null;
+  }
+  if (isMac ? event.ctrlKey : event.metaKey) {
+    return null;
+  }
+  return {
+    key: event.key === " " ? "Space" : event.key,
+    ...(isMac ? event.metaKey : event.ctrlKey) ? { commandOrControl: true } : {},
+    ...event.shiftKey ? { shift: true } : {},
+    ...event.altKey ? { alt: true } : {}
+  };
+};
+
+// src/state/keybindings.tsx
+import { createContext, useCallback, useMemo as useMemo2, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var KeybindingContext = createContext({
+  registerKeybinding: () => {
+    throw new Error("Has no keybinding context");
+  },
+  unregisterKeybinding: () => {
+    return;
+  },
+  unregisterPane: () => {
+    return;
+  }
+});
+var KeybindingContextProvider = ({ children }) => {
+  const registered = useRef([]);
+  const registerKeybinding = useCallback((binding) => {
+    registered.current = [...registered.current, binding];
+    window.addEventListener(binding.event, binding.callback);
+  }, []);
+  const unregisterKeybinding = useCallback((binding) => {
+    registered.current = registered.current.filter((r) => {
+      if (r.id === binding.id) {
+        window.removeEventListener(binding.event, binding.callback);
+        return false;
+      }
+      return true;
+    });
+  }, []);
+  const unregisterPane = useCallback((paneId) => {
+    const matchedKeybindings = registered.current.filter((r) => r.registeredFromPane === paneId);
+    for (const matched of matchedKeybindings) {
+      unregisterKeybinding(matched);
+    }
+  }, [unregisterKeybinding]);
+  const value = useMemo2(() => {
+    return {
+      registerKeybinding,
+      unregisterKeybinding,
+      unregisterPane
+    };
+  }, [registerKeybinding, unregisterKeybinding, unregisterPane]);
+  return /* @__PURE__ */ jsx2(KeybindingContext.Provider, {
+    value,
+    children
+  });
+};
+
+// src/helpers/use-keybinding.ts
+if (!getStudioKeyboardShortcutsEnabled()) {
+  console.warn("Keyboard shortcuts disabled either due to: a) --disable-keyboard-shortcuts being passed b) Config.setKeyboardShortcutsEnabled(false) being set or c) a Remotion version mismatch.");
+}
+var areKeyboardShortcutsDisabled = () => {
+  return !getStudioKeyboardShortcutsEnabled();
+};
+var useKeybinding = () => {
+  const [paneId] = useState(() => String(Math.random()));
+  const context = useContext(KeybindingContext);
+  const { isHighestContext } = useZIndex();
+  const registerKeybinding = useCallback2((options) => {
+    if (!isHighestContext && !options.keepRegisteredWhenNotHighestContext) {
+      return {
+        unregister: () => {
+          return;
+        }
+      };
+    }
+    const listener = (e) => {
+      if (!e.key) {
+        return;
+      }
+      const matches = options.action ? keyboardEventMatchesAction(e, options.action) : e.key.toLowerCase() === options.key.toLowerCase() && options.commandCtrlKey === (isMac ? e.metaKey : e.ctrlKey);
+      if (matches && getStudioKeyboardShortcutsEnabled()) {
+        if (!options.triggerIfInputFieldFocused) {
+          const { activeElement } = document;
+          if (activeElement instanceof HTMLInputElement) {
+            return;
+          }
+          if (activeElement instanceof HTMLTextAreaElement) {
+            return;
+          }
+        }
+        options.callback(e);
+        if (options.preventDefault) {
+          e.preventDefault();
+        }
+      }
+    };
+    const toRegister = {
+      registeredFromPane: paneId,
+      event: options.event,
+      key: options.action ?? options.key,
+      callback: listener,
+      id: String(Math.random())
+    };
+    context.registerKeybinding(toRegister);
+    return {
+      unregister: () => context.unregisterKeybinding(toRegister)
+    };
+  }, [context, isHighestContext, paneId]);
+  useEffect(() => {
+    return () => {
+      context.unregisterPane(paneId);
+    };
+  }, [context, paneId]);
+  return useMemo3(() => ({ registerKeybinding, isHighestContext }), [registerKeybinding, isHighestContext]);
+};
+
+// src/state/highest-z-index.tsx
+import { createContext as createContext2, useCallback as useCallback3, useMemo as useMemo4, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HighestZIndexContext = createContext2({
+  highestIndex: 0,
+  registerZIndex: () => {
+    return;
+  },
+  unregisterZIndex: () => {
+    return;
+  }
+});
+var HighestZIndexProvider = ({ children }) => {
+  const [zIndexes, setZIndexes] = useState2([]);
+  const registerZIndex = useCallback3((newIndex) => {
+    setZIndexes((prev) => [...prev, newIndex]);
+  }, []);
+  const unregisterZIndex = useCallback3((newIndex) => {
+    setZIndexes((prev) => {
+      const index = prev.indexOf(newIndex);
+      if (index === -1) {
+        throw new Error("did not find z-index " + newIndex);
+      }
+      return prev.filter((_n, i) => i !== index);
+    });
+  }, []);
+  const highestIndex = Math.max(...zIndexes);
+  const value = useMemo4(() => {
+    return {
+      highestIndex,
+      registerZIndex,
+      unregisterZIndex
+    };
+  }, [registerZIndex, unregisterZIndex, highestIndex]);
+  return /* @__PURE__ */ jsx3(HighestZIndexContext.Provider, {
+    value,
+    children
+  });
+};
+
+// src/state/input-dragger-click-lock.ts
+var clickLock = false;
+var getClickLock = () => clickLock;
+var setClickLock = (lock) => {
+  clickLock = lock;
+};
+
+// src/state/z-index.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var ZIndexContext = createContext3({
+  currentIndex: 0
+});
+var margin = {
+  margin: "auto"
+};
+var EscapeHook = ({ onEscape }) => {
+  const keybindings = useKeybinding();
+  useLayoutEffect(() => {
+    const escape = keybindings.registerKeybinding({
+      event: "keydown",
+      key: "Escape",
+      callback: onEscape,
+      commandCtrlKey: false,
+      preventDefault: true,
+      triggerIfInputFieldFocused: true,
+      keepRegisteredWhenNotHighestContext: false
+    });
+    return () => {
+      escape.unregister();
+    };
+  }, [keybindings, onEscape]);
+  return null;
+};
+var HigherZIndex = ({
+  children,
+  onEscape,
+  onOutsideClick,
+  disabled,
+  outsideClickButton = "any"
+}) => {
+  const context = useContext2(ZIndexContext);
+  const highestContext = useContext2(HighestZIndexContext);
+  const { registerZIndex, unregisterZIndex } = highestContext;
+  const containerRef = useRef2(null);
+  const highestIndexRef = useRef2(highestContext.highestIndex);
+  const onOutsideClickRef = useRef2(onOutsideClick);
+  const outsideClickButtonRef = useRef2(outsideClickButton);
+  const currentIndex = disabled ? context.currentIndex : context.currentIndex + 1;
+  useLayoutEffect(() => {
+    highestIndexRef.current = highestContext.highestIndex;
+    onOutsideClickRef.current = onOutsideClick;
+    outsideClickButtonRef.current = outsideClickButton;
+  }, [highestContext.highestIndex, onOutsideClick, outsideClickButton]);
+  useLayoutEffect(() => {
+    if (disabled) {
+      return;
+    }
+    registerZIndex(currentIndex);
+    return () => unregisterZIndex(currentIndex);
+  }, [currentIndex, disabled, registerZIndex, unregisterZIndex]);
+  useLayoutEffect(() => {
+    if (disabled) {
+      return;
+    }
+    let endPointerSession = null;
+    const listener = (downEvent) => {
+      if (outsideClickButtonRef.current === "primary" && downEvent.button !== 0) {
+        return;
+      }
+      const outsideClick = !containerRef.current?.contains(downEvent.target);
+      if (!outsideClick) {
+        return;
+      }
+      if (highestIndexRef.current !== currentIndex) {
+        return;
+      }
+      endPointerSession?.();
+      endPointerSession = observePointerRelease({
+        event: downEvent,
+        onEnd: (reason, upEvent) => {
+          endPointerSession = null;
+          if ((reason === "pointerup" || reason === "buttons-released") && upEvent && !getClickLock()) {
+            const target = document.elementFromPoint(upEvent.clientX, upEvent.clientY) ?? upEvent.target;
+            if (document.contains(target)) {
+              upEvent.stopPropagation();
+              onOutsideClickRef.current(target);
+            }
+          }
+        }
+      });
+    };
+    window.addEventListener("pointerdown", listener, true);
+    return () => {
+      endPointerSession?.();
+      endPointerSession = null;
+      return window.removeEventListener("pointerdown", listener, true);
+    };
+  }, [currentIndex, disabled]);
+  const value = useMemo5(() => {
+    return {
+      currentIndex
+    };
+  }, [currentIndex]);
+  return /* @__PURE__ */ jsxs(ZIndexContext.Provider, {
+    value,
+    children: [
+      disabled ? null : /* @__PURE__ */ jsx4(EscapeHook, {
+        onEscape
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        ref: containerRef,
+        style: margin,
+        children
+      })
+    ]
+  });
+};
+var useZIndex = () => {
+  const context = useContext2(ZIndexContext);
+  const highestContext = useContext2(HighestZIndexContext);
+  const isHighestContext = highestContext.highestIndex === context.currentIndex;
+  return useMemo5(() => ({
+    currentZIndex: context.currentIndex,
+    highestZIndex: highestContext.highestIndex,
+    isHighestContext,
+    tabIndex: isHighestContext ? 0 : -1
+  }), [context.currentIndex, highestContext.highestIndex, isHighestContext]);
+};
+
+// src/components/InlineAction.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var InlineAction = ({
+  renderAction,
+  onClick,
+  disabled,
+  title,
+  hoveredColor = WHITE,
+  unhoveredColor = LIGHT_TEXT,
+  variant,
+  style: customStyle,
+  className,
+  onPointerDown: onPointerDownProp,
+  ...buttonProps
+}) => {
+  const { tabIndex } = useZIndex();
+  const onPointerDown = useCallback4((event) => {
+    onPointerDownProp?.(event);
+    if (event.button !== 0) {
+      return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    event.preventDefault();
+  }, [onPointerDownProp]);
+  const style = useMemo6(() => {
+    return {
+      border: "none",
+      height: 24,
+      width: variant === "compact" ? 14 : 24,
+      padding: 0,
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: 3,
+      opacity: disabled ? 0.5 : 1,
+      pointerEvents: disabled ? "none" : "auto",
+      ...hoverableStyle({
+        idleBackground: TRANSPARENT,
+        hoverBackground: disabled ? TRANSPARENT : getBackgroundFromHoverState({ hovered: true, selected: false }),
+        idleColor: unhoveredColor,
+        hoverColor: disabled ? unhoveredColor : hoveredColor
+      }),
+      ...customStyle
+    };
+  }, [customStyle, disabled, hoveredColor, unhoveredColor, variant]);
+  return /* @__PURE__ */ jsx5("button", {
+    ...buttonProps,
+    type: "button",
+    className: className ? `${HOVERABLE_CLASS_NAME} ${className}` : HOVERABLE_CLASS_NAME,
+    disabled,
+    onClick,
+    onPointerDown,
+    style,
+    tabIndex,
+    title,
+    "aria-label": buttonProps["aria-label"] ?? title,
+    children: renderAction(CURRENT_COLOR)
+  });
+};
+
+// src/components/Menu/is-menu-item.tsx
+var MENU_INITIATOR_CLASSNAME = "__remotion-studio-menu-initiator";
+var MENU_ITEM_CLASSNAME = "__remotion-studio-menu-item";
+var HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
+var VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
+var isMenuItem = (el) => {
+  return Boolean(el.classList.contains(MENU_ITEM_CLASSNAME) || el.closest(`.${MENU_ITEM_CLASSNAME}`) || el.classList.contains(MENU_INITIATOR_CLASSNAME) || el.closest(`.${MENU_INITIATOR_CLASSNAME}`));
+};
+
+// src/components/NewComposition/ValidationMessage.tsx
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx6, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+var WarningTriangle = (props) => {
+  return /* @__PURE__ */ jsx6("svg", {
+    viewBox: "0 0 576 512",
+    ...props,
+    children: /* @__PURE__ */ jsx6("path", {
+      d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z"
+    })
+  });
+};
+var style = {
+  width: 12,
+  height: 12,
+  flexShrink: 0
+};
+var compactStyle = {
+  ...style,
+  width: 10,
+  height: 10
+};
+var container = {
+  width: "100%",
+  maxWidth: 500,
+  minWidth: 0
+};
+var row = {
+  minWidth: 0
+};
+var label = {
+  fontSize: 13,
+  color: WHITE,
+  fontFamily: "sans-serif",
+  minWidth: 0,
+  whiteSpace: "normal",
+  overflowWrap: "anywhere"
+};
+var compactLabel = {
+  ...label,
+  fontSize: 12
+};
+var ValidationMessage = ({ message, align, type, action, size = "default" }) => {
+  const iconStyle = size === "compact" ? compactStyle : style;
+  const labelStyle = size === "compact" ? compactLabel : label;
+  const finalStyle = useMemo7(() => {
+    return {
+      ...iconStyle,
+      fill: type === "warning" ? WARNING_COLOR : FAIL_COLOR
+    };
+  }, [iconStyle, type]);
+  return /* @__PURE__ */ jsx6("div", {
+    style: container,
+    children: /* @__PURE__ */ jsxs2(Row, {
+      align: "center",
+      justify: align,
+      style: row,
+      children: [
+        /* @__PURE__ */ jsx6(WarningTriangle, {
+          style: finalStyle
+        }),
+        /* @__PURE__ */ jsx6(Spacing, {
+          x: size === "compact" ? 0.75 : 1
+        }),
+        /* @__PURE__ */ jsx6("div", {
+          style: labelStyle,
+          children: message
+        }),
+        action ? /* @__PURE__ */ jsxs2(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx6(Spacing, {
+              x: size === "compact" ? 0.75 : 1
+            }),
+            action
+          ]
+        }) : null
+      ]
+    })
+  });
+};
+
+// src/components/ModalContainer.tsx
+import { useCallback as useCallback5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var padding = 20;
+var getMaxModalWidth = (width) => {
+  return `min(calc(100vw - ${padding * 2}px), calc(${width}px - ${padding * 2}px))`;
+};
+var getMaxModalHeight = (height) => {
+  return `min(calc(100vh - ${padding * 2}px), calc(${height}px - ${padding * 2}px))`;
+};
+var backgroundOverlay = {
+  backgroundColor: WHITE_ALPHA_20,
+  backdropFilter: `blur(1px)`,
+  position: "fixed",
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  padding
+};
+var panel = {
+  backgroundColor: BACKGROUND,
+  boxShadow: SHADOW_BLACK,
+  color: WHITE,
+  margin: "auto"
+};
+var ModalContainer = ({
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  onEscape,
+  onOutsideClick,
+  noZIndex,
+  panelStyle
+}) => {
+  const onPointerDown = useCallback5((e) => {
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx7("div", {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy ?? undefined,
+    "aria-modal": "true",
+    className: "css-reset",
+    role: "dialog",
+    style: backgroundOverlay,
+    onPointerDown,
+    children: /* @__PURE__ */ jsx7(HigherZIndex, {
+      disabled: noZIndex,
+      onOutsideClick,
+      onEscape,
+      children: /* @__PURE__ */ jsx7("div", {
+        style: { ...panel, ...panelStyle },
+        children
+      })
+    })
+  });
+};
+
+// src/components/RenderModal/render-modals.ts
+var outerModalStyle = {
+  width: getMaxModalWidth(800),
+  height: getMaxModalHeight(490),
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column"
+};
+var container2 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  padding: "12px 16px",
+  borderBottom: BORDER_BLACK
+};
+var optionsPanel = {
+  display: "flex",
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  overflowY: "auto"
+};
+var horizontalLayout = {
+  display: "flex",
+  flexDirection: "row",
+  flex: 1,
+  minHeight: 0,
+  overflow: "hidden"
+};
+var leftSidebar = {
+  flexShrink: 0,
+  padding: 6
+};
+var horizontalTab = {
+  width: 150,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  textAlign: "left",
+  fontSize: 14,
+  fontWeight: "normal",
+  paddingLeft: 8,
+  paddingTop: 6,
+  paddingBottom: 6,
+  borderRadius: 4
+};
+var iconContainer = {
+  width: 18,
+  height: 18,
+  marginRight: 8,
+  color: "inherit",
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+var icon = {
+  color: "inherit",
+  height: 18
+};
+var buttonStyle = {
+  backgroundColor: BLUE,
+  color: WHITE
+};
+var flexer = {
+  flex: 1
+};
+
+// src/components/Spinner.tsx
+import { useMemo as useMemo8 } from "react";
+import { jsx as jsx8, jsxs as jsxs3, Fragment as Fragment2 } from "react/jsx-runtime";
+var viewBox = 100;
+var lines = 8;
+var className = "__remotion_spinner_line";
+var remotionSpinnerAnimation = "__remotion_spinner_animation";
+var translated = "M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z";
+var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
+  const style2 = useMemo8(() => {
+    return {
+      width: size,
+      height: size
+    };
+  }, [size]);
+  return /* @__PURE__ */ jsxs3(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx8("style", {
+        type: "text/css",
+        children: `
+				@keyframes ${remotionSpinnerAnimation} {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.15;
+          }
+        }
+        
+        .${className} {
+            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
+        }        
+			`
+      }),
+      /* @__PURE__ */ jsx8("svg", {
+        style: style2,
+        viewBox: `0 0 ${viewBox} ${viewBox}`,
+        children: new Array(lines).fill(true).map((_, index) => {
+          return /* @__PURE__ */ jsx8("path", {
+            className,
+            style: {
+              rotate: `${index * Math.PI * 2 / lines}rad`,
+              transformOrigin: "center center",
+              animationDelay: `${index * (duration / lines) - duration}s`
+            },
+            d: translated,
+            fill: color
+          }, index);
+        })
+      })
+    ]
+  });
+};
+
+// src/icons/trash.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TrashIcon = ({ color, ...props }) => {
+  return /* @__PURE__ */ jsx9("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    ...props,
+    children: /* @__PURE__ */ jsx9("path", {
+      fill: color,
+      d: "M160.5 27.4C162.5 20.6 168.8 16 175.8 16h96.4c7.1 0 13.3 4.6 15.3 11.4l11 36.6h-149l11-36.6zM116.1 64H16C7.2 64 0 71.2 0 80s7.2 16 16 16h416c8.8 0 16-7.2 16-16s-7.2-16-16-16H331.9l-13.7-45.8C312.1-2.1 293.4-16 272.2-16h-96.4c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144l22.9 308.7c2.5 33.4 30.3 59.3 63.8 59.3h217.1c33.5 0 61.3-25.9 63.8-59.3L419.2 144h-32.1l-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6H115.4c-16.8 0-30.7-12.9-31.9-29.6L60.8 144H28.7z"
+    })
+  });
+};
+
+// src/icons/cloud-download.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CloudDownloadIcon = ({ color, ...props }) => {
+  return /* @__PURE__ */ jsx10("svg", {
+    ...props,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 576 512",
+    children: /* @__PURE__ */ jsx10("path", {
+      fill: color,
+      d: "M128 176c0-61.9 50.1-112 112-112 39.3 0 73.8 20.2 93.8 50.8 4.4 6.7 13.1 9.1 20.3 5.7 11.4-5.5 24.3-8.5 37.9-8.5 48.6 0 88 39.4 88 88 0 14.1-3.3 27.4-9.2 39.2-2 4.1-2.2 8.9-.5 13.1s5.2 7.6 9.5 9.1c37.4 13.1 64.2 48.8 64.2 90.6 0 53-43 96-96 96l-304 0c-61.9 0-112-50.1-112-112 0-53.7 37.8-98.6 88.2-109.5 4.3-.9 8.1-3.6 10.3-7.4s2.9-8.3 1.7-12.6c-2.7-9.7-4.2-19.9-4.2-30.5zM240 32c-79.5 0-144 64.5-144 144 0 8 .7 15.9 1.9 23.5-56.9 19.2-97.9 73-97.9 136.5 0 79.5 64.5 144 144 144l304 0c70.7 0 128-57.3 128-128 0-49.9-28.5-93-70.1-114.2 3.9-11.9 6.1-24.6 6.1-37.8 0-66.3-53.7-120-120-120-13.7 0-26.9 2.3-39.2 6.5-26.4-33.2-67.1-54.5-112.8-54.5zM371.3 307.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L304 329.4 304 208c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 121.4-44.7-44.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l72 72c6.2 6.2 16.4 6.2 22.6 0l72-72z"
+    })
+  });
+};
+
+// src/icons/check-circle-filled.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx11("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  style: { width: 14, height: 14 },
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx11("path", {
+    d: "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"
+  })
+});
+
+export { startCapturedPointerSession, startDeferredCapturedPointerSession, isMac, defaultKeyboardShortcuts, keyboardShortcutGroups, askAIKeyboardShortcutGroup, getKeyboardShortcutsForAction, keyboardShortcutsOverlap, formatKeyboardShortcut, getKeyboardShortcutLabel, getKeyboardShortcutAriaKeyShortcuts, shortcutFromKeyboardEvent, KeybindingContextProvider, areKeyboardShortcutsDisabled, useKeybinding, HighestZIndexProvider, getClickLock, setClickLock, HigherZIndex, useZIndex, getMaxModalWidth, getMaxModalHeight, ModalContainer, SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, HOVERABLE_CLASS_NAME, HOVER_GROUP_CLASS_NAME, HOVER_GROUP_REVEAL_CLASS_NAME, FOCUS_VISIBLE_ONLY_CLASS_NAME, NO_HOVER_BACKGROUND_STYLE, hoverableStyle, makeHoverableCSS, InlineAction, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, CheckCircleFilled };