@remotion/studio 4.0.527 → 4.0.529

package/dist/esm/{index-5t2dwxsk.mjs → index-m01zjph7.mjs}

@@ -1,21 +1,28 @@
 import {
   HigherZIndex,
+  getPortal,
   useZIndex
-} from "./index-9xxg6218.mjs";
+} from "./index-qve7mdfp.mjs";
 import {
   BACKGROUND,
   BLUE,
   BORDER_BLACK,
   CURRENT_COLOR,
+  CURRENT_COLOR_LOWERCASE,
   FAIL_COLOR,
   LIGHT_TEXT,
   SHADOW_BLACK,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM,
+  SHADOW_BLACK_ALPHA_50_TOWARDS_TOP,
+  TIMELINE_BACKGROUND_COLOR,
   TRANSPARENT,
   WARNING_COLOR,
   WHITE,
+  WHITE_ALPHA_10,
   WHITE_ALPHA_20,
+  WHITE_ALPHA_90,
   getBackgroundFromHoverState
-} from "./index-k426ye99.mjs";
+} from "./index-3qb54r5j.mjs";
 
 // src/components/layout.tsx
 import { useMemo } from "react";
@@ -84,10 +91,10 @@ 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 BG_VARIABLE = "--remotion-studio-hoverable-bg";
+var HOVER_BG_VARIABLE = "--remotion-studio-hoverable-hover-bg";
+var COLOR_VARIABLE = "--remotion-studio-hoverable-color";
+var HOVER_COLOR_VARIABLE = "--remotion-studio-hoverable-hover-color";
 var NO_HOVER_BACKGROUND_STYLE = {
   [HOVER_BG_VARIABLE]: TRANSPARENT
 };
@@ -160,7 +167,6 @@ var InlineAction = ({
   renderAction,
   onClick,
   disabled,
-  title,
   hoveredColor = WHITE,
   unhoveredColor = LIGHT_TEXT,
   variant,
@@ -210,8 +216,6 @@ var InlineAction = ({
     onPointerDown,
     style,
     tabIndex,
-    title,
-    "aria-label": buttonProps["aria-label"] ?? title,
     children: renderAction(CURRENT_COLOR)
   });
 };
@@ -433,9 +437,240 @@ var flexer = {
   flex: 1
 };
 
+// src/icons/models.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ModelsIcon = ({
+  color,
+  ...props
+}) => /* @__PURE__ */ jsx5("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 512 512",
+  ...props,
+  children: /* @__PURE__ */ jsx5("path", {
+    d: "M176 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-16c-35.3 0-64 28.7-64 64v16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v64H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h48v16c0 35.3 28.7 64 64 64h16v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h64v48c0 8.8 7.2 16 16 16s16-7.2 16-16v-48h16c35.3 0 64-28.7 64-64v-16h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-64h48c8.8 0 16-7.2 16-16s-7.2-16-16-16h-48v-16c0-35.3-28.7-64-64-64h-16V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16c0-8.8-7.2-16-16-16s-16 7.2-16 16v48h-64V16ZM416 128v256c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V128c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32ZM192 160c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h128c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H192Zm128 32v128H192V192h128Z",
+    fill: color ?? CURRENT_COLOR_LOWERCASE
+  })
+});
+
+// src/components/Menu/styles.ts
+var MENU_VERTICAL_PADDING = 4;
+var SUBMENU_LEFT_INSET = -8;
+var MAX_MENU_WIDTH = 400;
+var MAX_MOBILE_MENU_WIDTH = 300;
+var menuContainer = {
+  backgroundColor: BACKGROUND,
+  position: "fixed",
+  color: WHITE,
+  userSelect: "none",
+  WebkitUserSelect: "none"
+};
+var SHADOW_TOWARDS_BOTTOM = SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+var SHADOW_TOWARDS_TOP = SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
+var menuContainerTowardsBottom = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_BOTTOM
+};
+var menuContainerTowardsTop = {
+  ...menuContainer,
+  boxShadow: SHADOW_TOWARDS_TOP
+};
+var fullScreenOverlay = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+var outerPortal = {
+  position: "fixed"
+};
+var inlineCodeSnippet = {
+  fontSize: 14,
+  color: BLUE,
+  fontFamily: "monospace"
+};
+
+// src/components/ActionTooltip.tsx
+import {
+  useCallback as useCallback3,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx6, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var defaultTriggerStyle = { display: "inline-flex" };
+var tooltipStyle = {
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  backgroundColor: TIMELINE_BACKGROUND_COLOR,
+  color: WHITE_ALPHA_90,
+  borderRadius: 6,
+  padding: "6px 8px",
+  fontSize: 12,
+  lineHeight: "16px",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  maxWidth: "calc(100vw - 16px)",
+  boxShadow: SHADOW_TOWARDS_TOP,
+  pointerEvents: "none"
+};
+var labelStyle = {
+  font: "inherit",
+  color: "inherit",
+  minWidth: 0
+};
+var shortcutStyle = {
+  ...labelStyle,
+  backgroundColor: WHITE_ALPHA_10,
+  borderRadius: 3,
+  padding: "0 4px",
+  minWidth: 16,
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+};
+var visibleTooltipCount = 0;
+var lastTooltipHiddenAt = null;
+var TOOLTIP_SKIP_DELAY_WINDOW = 300;
+var ActionTooltip = ({
+  label: label2,
+  shortcut,
+  delay,
+  dismissOnClick,
+  side = "top",
+  triggerStyle,
+  children
+}) => {
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timer = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(null);
+  const { currentZIndex } = useZIndex();
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    visibleTooltipCount++;
+    return () => {
+      visibleTooltipCount--;
+      lastTooltipHiddenAt = Date.now();
+    };
+  }, [visible]);
+  const hide = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(false);
+    setPosition(null);
+  }, []);
+  const show = useCallback3(() => {
+    if (timer.current !== null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setVisible(true);
+  }, []);
+  const onPointerEnter = useCallback3((event) => {
+    if (event.pointerType === "touch" || timer.current !== null || !event.currentTarget.contains(event.target)) {
+      return;
+    }
+    if (!delay || visibleTooltipCount > 0 || lastTooltipHiddenAt !== null && Date.now() - lastTooltipHiddenAt < TOOLTIP_SKIP_DELAY_WINDOW) {
+      show();
+      return;
+    }
+    timer.current = setTimeout(show, delay);
+  }, [delay, show]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("blur", hide);
+    window.addEventListener("resize", hide);
+    window.addEventListener("scroll", hide, true);
+    return () => {
+      if (timer.current !== null) {
+        clearTimeout(timer.current);
+      }
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("blur", hide);
+      window.removeEventListener("resize", hide);
+      window.removeEventListener("scroll", hide, true);
+    };
+  }, [hide]);
+  useLayoutEffect(() => {
+    if (!visible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current.getBoundingClientRect();
+    if (side === "right") {
+      const right = trigger.right + 4;
+      setPosition({
+        left: right + tooltip.width <= window.innerWidth - 8 ? right : Math.max(8, trigger.left - tooltip.width - 4),
+        top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8))
+      });
+      return;
+    }
+    const above = trigger.top - tooltip.height - 4;
+    setPosition({
+      left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
+      top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8))
+    });
+  }, [label2, shortcut, side, visible]);
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx6("span", {
+        ref: triggerRef,
+        style: { ...defaultTriggerStyle, ...triggerStyle },
+        onPointerEnter,
+        onPointerLeave: hide,
+        onPointerDownCapture: dismissOnClick ? hide : undefined,
+        onClickCapture: dismissOnClick ? hide : undefined,
+        onFocus: (event) => {
+          if (event.currentTarget.contains(event.target)) {
+            show();
+          }
+        },
+        onBlur: hide,
+        children
+      }),
+      visible ? createPortal(/* @__PURE__ */ jsxs2("div", {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: "css-reset",
+        style: {
+          ...tooltipStyle,
+          left: position?.left ?? 0,
+          top: position?.top ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", {
+            style: labelStyle,
+            children: label2
+          }),
+          shortcut ? /* @__PURE__ */ jsx6("kbd", {
+            style: shortcutStyle,
+            children: shortcut
+          }) : null
+        ]
+      }), getPortal(currentZIndex)) : null
+    ]
+  });
+};
+
 // src/components/Spinner.tsx
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx5, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
 var viewBox = 100;
 var lines = 8;
 var className = "__remotion_spinner_line";
@@ -448,9 +683,9 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
       height: size
     };
   }, [size]);
-  return /* @__PURE__ */ jsxs2(Fragment2, {
+  return /* @__PURE__ */ jsxs3(Fragment3, {
     children: [
-      /* @__PURE__ */ jsx5("style", {
+      /* @__PURE__ */ jsx7("style", {
         type: "text/css",
         children: `
 				@keyframes ${remotionSpinnerAnimation} {
@@ -467,11 +702,11 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
         }        
 			`
       }),
-      /* @__PURE__ */ jsx5("svg", {
+      /* @__PURE__ */ jsx7("svg", {
         style: style2,
         viewBox: `0 0 ${viewBox} ${viewBox}`,
         children: new Array(lines).fill(true).map((_, index) => {
-          return /* @__PURE__ */ jsx5("path", {
+          return /* @__PURE__ */ jsx7("path", {
             className,
             style: {
               rotate: `${index * Math.PI * 2 / lines}rad`,
@@ -488,13 +723,14 @@ var Spinner = ({ size, duration, color = LIGHT_TEXT }) => {
 };
 
 // src/icons/trash.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var TrashIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx6("svg", {
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TrashIcon = ({ color, style: style2, ...props }) => {
+  return /* @__PURE__ */ jsx8("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 448 512",
     ...props,
-    children: /* @__PURE__ */ jsx6("path", {
+    style: { overflow: "visible", ...style2 },
+    children: /* @__PURE__ */ jsx8("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"
     })
@@ -502,13 +738,13 @@ var TrashIcon = ({ color, ...props }) => {
 };
 
 // src/icons/cloud-download.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var CloudDownloadIcon = ({ color, ...props }) => {
-  return /* @__PURE__ */ jsx7("svg", {
+  return /* @__PURE__ */ jsx9("svg", {
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 576 512",
-    children: /* @__PURE__ */ jsx7("path", {
+    children: /* @__PURE__ */ jsx9("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"
     })
@@ -516,15 +752,15 @@ var CloudDownloadIcon = ({ color, ...props }) => {
 };
 
 // src/icons/check-circle-filled.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var CheckCircleFilled = (props) => /* @__PURE__ */ jsx8("svg", {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CheckCircleFilled = (props) => /* @__PURE__ */ jsx10("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   style: { width: 14, height: 14 },
   viewBox: "0 0 512 512",
   ...props,
-  children: /* @__PURE__ */ jsx8("path", {
+  children: /* @__PURE__ */ jsx10("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 { SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, 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, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer };
+export { SPACING_UNIT, COMPACT_CONTROL_ROW_HEIGHT, COMPACT_INLINE_ROW_HEIGHT, Spacing, Flex, Row, Column, getMaxModalWidth, getMaxModalHeight, ModalContainer, 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_VERTICAL_PADDING, SUBMENU_LEFT_INSET, MAX_MENU_WIDTH, MAX_MOBILE_MENU_WIDTH, SHADOW_TOWARDS_BOTTOM, SHADOW_TOWARDS_TOP, menuContainerTowardsBottom, menuContainerTowardsTop, fullScreenOverlay, outerPortal, inlineCodeSnippet, MENU_INITIATOR_CLASSNAME, MENU_ITEM_CLASSNAME, HORIZONTAL_SCROLLBAR_CLASSNAME, VERTICAL_SCROLLBAR_CLASSNAME, isMenuItem, ActionTooltip, Spinner, TrashIcon, WarningTriangle, ValidationMessage, CloudDownloadIcon, CheckCircleFilled, outerModalStyle, container2 as container, optionsPanel, horizontalLayout, leftSidebar, horizontalTab, iconContainer, icon, buttonStyle, flexer, ModelsIcon };