@remotion/studio 4.0.528 → 4.0.529

package/dist/esm/{index-x6r9bn12.mjs → index-m2a95v3p.mjs}

@@ -1,7 +1,7 @@
 import {
   installRequiredPackages,
   showNotification
-} from "./index-dh3zk2hv.mjs";
+} from "./index-vtr5qzam.mjs";
 import {
   RenderQueueContext,
   isClientRenderJob,
@@ -60,7 +60,7 @@ import {
   useZodTypesIfPossible,
   watchPublicFolder,
   zodSafeParse
-} from "./index-s6qya2gg.mjs";
+} from "./index-19d05w9e.mjs";
 import {
   BROWSER_STUDIO_OPERATIONS_READY_EVENT,
   callApi,
@@ -73,7 +73,7 @@ import {
 } from "./index-dfy1t576.mjs";
 import {
   studioCssVariables
-} from "./index-t7tbt980.mjs";
+} from "./index-24wge6y5.mjs";
 import {
   ActionTooltip,
   COMPACT_CONTROL_ROW_HEIGHT,
@@ -106,7 +106,7 @@ import {
   menuContainerTowardsBottom,
   menuContainerTowardsTop,
   outerPortal
-} from "./index-890dd9b3.mjs";
+} from "./index-m01zjph7.mjs";
 import {
   HigherZIndex,
   areKeyboardShortcutsDisabled,
@@ -181,7 +181,7 @@ import {
   WHITE_ALPHA_80,
   WHITE_HEX,
   getBackgroundFromHoverState
-} from "./index-wqc43mw0.mjs";
+} from "./index-3qb54r5j.mjs";
 import {
   __require,
   __toESM
@@ -690,7 +690,7 @@ var button = {
 var ButtonRefForwardFunction = ({
   children,
   onClick,
-  title,
+  "aria-label": ariaLabel,
   disabled,
   size = "default",
   style: style2,
@@ -735,7 +735,7 @@ var ButtonRefForwardFunction = ({
     onClick,
     onPointerDown,
     autoFocus,
-    title,
+    "aria-label": ariaLabel,
     children: /* @__PURE__ */ jsx6("div", {
       className: "css-reset",
       style: buttonContainer,
@@ -1258,6 +1258,7 @@ var MenuSubItem = ({
   }, [selected]);
   return /* @__PURE__ */ jsx15("div", {
     ref,
+    "aria-label": typeof label === "string" ? label : undefined,
     onPointerEnter,
     onPointerLeave,
     style: style2,
@@ -1280,7 +1281,6 @@ var MenuSubItem = ({
         }) : null,
         /* @__PURE__ */ jsx15("div", {
           style: labelStyle,
-          ...{ title: typeof label === "string" ? label : undefined },
           children: label
         }),
         " ",
@@ -1717,7 +1717,7 @@ var Combobox = ({
   values,
   selectedId,
   style: customStyle,
-  title,
+  "aria-label": ariaLabel,
   size: controlSize = "default",
   unhoveredIconColor = LIGHT_TEXT
 }) => {
@@ -1846,14 +1846,15 @@ var Combobox = ({
     children: [
       /* @__PURE__ */ jsxs3("button", {
         ref,
-        title,
+        "aria-label": ariaLabel,
         tabIndex,
         type: "button",
         style: style2,
         className: MENU_INITIATOR_CLASSNAME,
         children: [
           selected ? /* @__PURE__ */ jsx17("div", {
-            title: typeof selected.label === "string" ? selected.label : undefined,
+            role: "group",
+            "aria-label": typeof selected.label === "string" ? selected.label : undefined,
             style: selectedLabelStyle,
             children: selected?.label
           }) : null,
@@ -1978,7 +1979,7 @@ var container5 = {
   fontSize: 14,
   verticalAlign: "text-bottom"
 };
-var InfoBubble = ({ title, children, horizontalAlignment = "left" }) => {
+var InfoBubble = ({ "aria-label": ariaLabel, children, horizontalAlignment = "left" }) => {
   const [hovered, setIsHovered] = useState8(false);
   const [opened, setOpened] = useState8(false);
   const ref = useRef7(null);
@@ -2069,7 +2070,7 @@ var InfoBubble = ({ title, children, horizontalAlignment = "left" }) => {
         ref,
         tabIndex,
         style: style2,
-        title,
+        "aria-label": ariaLabel,
         type: "button",
         children: /* @__PURE__ */ jsx19("svg", {
           style: icon2,
@@ -2968,13 +2969,14 @@ var AssetAudioVolume = ({ src, waveformSampleRate }) => {
     });
   }, [src, waveformSampleRate]);
   return /* @__PURE__ */ jsx23("span", {
+    role: "group",
     style: {
       fontFamily: "sans-serif",
       fontSize: 13,
       lineHeight: "20px",
       color: LIGHT_TEXT
     },
-    title: "RMS level across all channels over the full audio track, including silence.",
+    "aria-label": "RMS level across all channels over the full audio track, including silence.",
     children: value
   });
 };
@@ -3078,7 +3080,7 @@ var InlineEditableTitle = ({
   onClick,
   onCommit,
   size = "default",
-  title
+  "aria-label": ariaLabel
 }) => {
   const [isEditing, setIsEditing] = useState12(false);
   const [isHovered, setIsHovered] = useState12(false);
@@ -3159,7 +3161,8 @@ var InlineEditableTitle = ({
   const inputStyle = isInspectorSize ? inspectorTitleInput : titleInput;
   return /* @__PURE__ */ jsx24("div", {
     style: isInspectorSize ? inspectorTitleWrapper : titleWrapper,
-    title: title ?? value,
+    "aria-label": ariaLabel ?? value,
+    role: "group",
     children: /* @__PURE__ */ jsxs7("span", {
       style: innerStyle,
       onMouseEnter: () => setIsHovered(true),
@@ -3176,6 +3179,7 @@ var InlineEditableTitle = ({
         }),
         isEditing ? /* @__PURE__ */ jsx24("input", {
           ref: focusInput,
+          "aria-label": ariaLabel ?? value,
           style: { ...gridItemStyle, ...inputStyle },
           value: draftValue,
           onChange,
@@ -3531,7 +3535,7 @@ var BackArrow = ({ color }) => {
     })
   });
 };
-var InspectorBackAction = ({ children, disabled, onClick, title }) => {
+var InspectorBackAction = ({ children, disabled, onClick, "aria-label": ariaLabel }) => {
   return /* @__PURE__ */ jsx27("div", {
     style: inspectorQuickActionsSection,
     children: /* @__PURE__ */ jsx27(InspectorQuickAction, {
@@ -3540,7 +3544,7 @@ var InspectorBackAction = ({ children, disabled, onClick, title }) => {
       renderIcon: (color) => /* @__PURE__ */ jsx27(BackArrow, {
         color
       }),
-      title,
+      "aria-label": ariaLabel,
       children
     })
   });
@@ -3605,13 +3609,29 @@ var inlineLabelText = {
   WebkitUserSelect: "none",
   whiteSpace: "nowrap"
 };
-var inlineLabelIcon = {
+var INSPECTOR_ACTION_ICON_SIZE = 18;
+var inspectorActionIconStyle = {
+  display: "block",
+  height: INSPECTOR_ACTION_ICON_SIZE,
+  width: INSPECTOR_ACTION_ICON_SIZE
+};
+var inspectorActionIconContainerStyle = {
   alignItems: "center",
   display: "flex",
   flexShrink: 0,
-  height: 18,
+  height: INSPECTOR_ACTION_ICON_SIZE,
   justifyContent: "center",
-  width: 18
+  width: INSPECTOR_ACTION_ICON_SIZE
+};
+var largeInspectorActionIconStyle = {
+  height: 22,
+  width: 22
+};
+var largeInspectorActionIconContainerStyle = {
+  height: 22,
+  marginLeft: -2,
+  marginRight: -2,
+  width: 22
 };
 var InspectorQuickAction = ({
   children,
@@ -3621,7 +3641,7 @@ var InspectorQuickAction = ({
   renderIcon,
   size = "default",
   style: style2,
-  title
+  "aria-label": ariaLabel
 }) => {
   const showsHover = !disabled && onClick !== null;
   const buttonStyle = React16.useMemo(() => ({
@@ -3638,7 +3658,7 @@ var InspectorQuickAction = ({
   const mainContent = /* @__PURE__ */ jsxs9(Fragment4, {
     children: [
       renderIcon ? /* @__PURE__ */ jsx27("span", {
-        style: { ...inlineLabelIcon, ...iconContainerStyle },
+        style: { ...inspectorActionIconContainerStyle, ...iconContainerStyle },
         children: renderIcon(CURRENT_COLOR)
       }) : null,
       /* @__PURE__ */ jsx27("span", {
@@ -3652,13 +3672,14 @@ var InspectorQuickAction = ({
     type: "button",
     disabled,
     style: buttonStyle,
-    title,
+    "aria-label": ariaLabel,
     onClick,
     children: mainContent
   }) : /* @__PURE__ */ jsx27("div", {
     className: HOVERABLE_CLASS_NAME,
     style: buttonStyle,
-    title,
+    "aria-label": ariaLabel,
+    role: "group",
     children: mainContent
   });
   return mainAction;
@@ -4350,7 +4371,7 @@ var AssetInfo = ({ assetName, contentSized = false, onAssetClick, readOnlyStudio
           onClick: onAssetClick,
           onCommit: onRename,
           size: contentSized ? "default" : "inspector",
-          title: assetName
+          "aria-label": assetName
         })
       }),
       fileDetails.length > 0 ? /* @__PURE__ */ jsx34(CollapsibleInspectorSection, {
@@ -4751,8 +4772,7 @@ var compactHelpIconPath = {
 };
 var CompactHelpLink = ({
   href,
-  ariaLabel,
-  title
+  ariaLabel
 }) => {
   const [hovered, setHovered] = useState15(false);
   return /* @__PURE__ */ jsx41("a", {
@@ -4761,7 +4781,6 @@ var CompactHelpLink = ({
     rel: "noopener noreferrer",
     style: hovered ? compactHelpLinkHovered : compactHelpLink,
     "aria-label": ariaLabel,
-    title,
     onMouseEnter: () => setHovered(true),
     onMouseLeave: () => setHovered(false),
     children: /* @__PURE__ */ jsx41("svg", {
@@ -4789,8 +4808,7 @@ var CompactExplanation = ({
       children,
       learnMoreHref ? /* @__PURE__ */ jsx41(CompactHelpLink, {
         href: learnMoreHref,
-        ariaLabel: learnMoreAriaLabel ?? learnMoreTitle,
-        title: learnMoreTitle
+        ariaLabel: learnMoreAriaLabel ?? learnMoreTitle
       }) : null
     ]
   });
@@ -6079,7 +6097,7 @@ var SchemaLabel = ({ jsonPath, onRemove, valid, suffix, handleClick, description
         children: labelContent
       }) : labelContent,
       displayedDescription ? /* @__PURE__ */ jsx49(InfoBubble, {
-        title: "Field description",
+        "aria-label": "Field description",
         horizontalAlignment: "right",
         children: /* @__PURE__ */ jsx49("div", {
           style: descriptionStyle,
@@ -6349,7 +6367,7 @@ var ZodFieldValidation = ({ zodValidation, path }) => {
         x: 0.5
       }),
       /* @__PURE__ */ jsx54(InfoBubble, {
-        title: "Zod validation failure",
+        "aria-label": "Zod validation failure",
         children: /* @__PURE__ */ jsxs22("div", {
           style: stackTrace,
           children: [
@@ -7199,7 +7217,6 @@ var ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             style: eyedropperButtonStyle,
             onClick: onPickWithEyeDropper,
             tabIndex,
-            title: "Pick color from screen",
             "aria-label": "Pick color from screen",
             children: /* @__PURE__ */ jsx61(EyedropperIcon, {
               style: { width: 14, height: 14 },
@@ -7207,8 +7224,9 @@ var ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             })
           }) : null,
           /* @__PURE__ */ jsx61("div", {
+            role: "group",
             style: previewSwatchStyle,
-            title: formatted,
+            "aria-label": formatted,
             children: /* @__PURE__ */ jsx61("div", {
               style: previewFill
             })
@@ -7325,7 +7343,7 @@ var ColorPicker = ({
   width = 45,
   height = 25,
   borderRadius = 3,
-  title,
+  "aria-label": ariaLabel,
   name,
   className,
   style: customStyle
@@ -7468,7 +7486,7 @@ var ColorPicker = ({
             className: [MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className].filter(Boolean).join(" "),
             disabled,
             name,
-            title: title ?? value,
+            "aria-label": ariaLabel ?? value,
             tabIndex,
             style: swatchStyle,
             onPointerDown: onTriggerPointerDown,
@@ -7484,7 +7502,6 @@ var ColorPicker = ({
             onPointerDown: onEyeDropperPointerDown,
             onClick: onPickWithEyeDropper,
             tabIndex,
-            title: "Pick color from screen",
             "aria-label": "Pick color from screen",
             children: /* @__PURE__ */ jsx62(EyedropperIcon, {
               style: eyedropperIconStyle,
@@ -7764,7 +7781,7 @@ var ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) =>
         children: /* @__PURE__ */ jsx67(Combobox, {
           values: comboBoxValues,
           selectedId: value,
-          title: value,
+          "aria-label": value,
           size: "small"
         })
       }),
@@ -8631,7 +8648,6 @@ var InputDraggerForwardRefFn = ({
     ref: ref2,
     type: "button",
     "aria-label": props["aria-label"],
-    title: props.title,
     className: "__remotion_input_dragger",
     style: buttonStyle2 ? {
       ...small ? compactInputDraggerContainerStyle : inputDraggerContainerStyle,
@@ -8828,7 +8844,7 @@ var ZodStaticFileEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad
         children: /* @__PURE__ */ jsx76(Combobox, {
           values: comboBoxValues,
           selectedId: value,
-          title: value,
+          "aria-label": value,
           size: "small"
         })
       }),
@@ -9490,7 +9506,7 @@ var ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath,
             valid: zodValidation.success
           }),
           /* @__PURE__ */ jsx84(Combobox, {
-            title: "Select type",
+            "aria-label": "Select type",
             values: comboBoxValues,
             selectedId: value[discriminator],
             size: "small"
@@ -12156,7 +12172,6 @@ var SegmentedButtonAction = ({ index, segment, segmentCount }) => {
     onPointerDown,
     style: style4,
     tabIndex,
-    title: segment.title ?? undefined,
     type: "button",
     children: segment.renderContent(CURRENT_COLOR)
   });
@@ -12269,7 +12284,6 @@ var SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
     onPointerDown,
     style: style4,
     tabIndex,
-    title: segment.title ?? undefined,
     type: "button",
     children: segment.renderContent(CURRENT_COLOR)
   });
@@ -12311,10 +12325,9 @@ var SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
     ]
   });
 };
-var SegmentedButton = ({ segments, style: style4, title }) => {
+var SegmentedButton = ({ segments, style: style4 }) => {
   return /* @__PURE__ */ jsx104("div", {
     style: { ...containerStyle3, ...style4 },
-    title: title ?? undefined,
     children: segments.map((segment, index) => {
       if (segment.type === "action") {
         return /* @__PURE__ */ jsx104(SegmentedButtonAction, {
@@ -12520,7 +12533,6 @@ var InspectorOpenInEditor = ({
         }),
         segmentId: "default-editor",
         style: mainSegmentStyle,
-        title: showTooltips ? "" : `Open in ${defaultAppName}`,
         tooltipLabel: showTooltips ? `Open in ${defaultAppName}` : null,
         type: "action"
       }
@@ -12539,7 +12551,6 @@ var InspectorOpenInEditor = ({
         segmentId: "another-app",
         selectedId: null,
         style: dropdownSegmentStyle,
-        title: showTooltips ? "" : "Open in another app",
         tooltipLabel: showTooltips ? "Open in another app" : null,
         type: "menu",
         values: menuItems
@@ -12564,8 +12575,7 @@ var InspectorOpenInEditor = ({
   }
   return /* @__PURE__ */ jsx105(SegmentedButton, {
     segments,
-    style: null,
-    title: null
+    style: null
   });
 };
 
@@ -12656,7 +12666,7 @@ var InspectorLocationCopy = ({ children, location, name, openInEditorLocation })
             variant: null,
             onClick: onCopy,
             renderAction: renderCopyAction,
-            title: "Copy context for agents"
+            "aria-label": "Copy context for agents"
           }) : null
         ]
       }) : null
@@ -12755,14 +12765,14 @@ var InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon, size = "
       onClick,
       renderIcon: (iconColor) => renderIcon?.(iconColor),
       style: quickActionStyle,
-      title: fileLocation ?? undefined,
+      "aria-label": fileLocation ?? undefined,
       children: label3
     });
   }
   return /* @__PURE__ */ jsxs52("button", {
     type: "button",
     style: style4,
-    title: fileLocation ?? undefined,
+    "aria-label": fileLocation ?? undefined,
     onClick,
     onPointerEnter: () => setHovered(true),
     onPointerLeave: () => setHovered(false),
@@ -13221,7 +13231,7 @@ var dimensionPresets = [
   { height: 1080, label: "Square", width: 1080 }
 ];
 var frameRatePresets = [23.976, 24, 25, 29.97, 30, 50, 60];
-var PresetDropdown = ({ disabled, title, values, visible }) => {
+var PresetDropdown = ({ disabled, "aria-label": ariaLabel, values, visible }) => {
   const renderAction = useCallback58((color) => {
     return /* @__PURE__ */ jsx110("span", {
       style: presetButtonIcon,
@@ -13238,7 +13248,7 @@ var PresetDropdown = ({ disabled, title, values, visible }) => {
     children: /* @__PURE__ */ jsx110(InlineDropdown, {
       disabled,
       renderAction,
-      title,
+      "aria-label": ariaLabel,
       values,
       variant: "compact"
     })
@@ -13446,7 +13456,7 @@ var CompositionMetadata = ({ compositionId, disabled, stack }) => {
             }),
             disabled || widthIsComputed || heightIsComputed ? null : /* @__PURE__ */ jsx110(PresetDropdown, {
               disabled: pendingValues.width !== undefined || pendingValues.height !== undefined,
-              title: "Choose dimension preset",
+              "aria-label": "Choose dimension preset",
               values: dimensionPresetValues,
               visible: hovered
             })
@@ -13486,7 +13496,7 @@ var CompositionMetadata = ({ compositionId, disabled, stack }) => {
                 }),
                 disabled || fpsIsComputed ? null : /* @__PURE__ */ jsx110(PresetDropdown, {
                   disabled: pendingValues.fps !== undefined,
-                  title: "Choose frame rate preset",
+                  "aria-label": "Choose frame rate preset",
                   values: frameRatePresetValues,
                   visible: hovered
                 })
@@ -13541,16 +13551,6 @@ var BrowseElementsIcon = ({ color, ...props }) => {
 // src/components/InspectorPanel/ElementLibraryButton.tsx
 import { jsx as jsx112, jsxs as jsxs56, Fragment as Fragment15 } from "react/jsx-runtime";
 var noElementLibraries = [];
-var browseElementsIconStyle = {
-  height: 22,
-  width: 22
-};
-var browseElementsIconContainerStyle = {
-  height: 22,
-  marginLeft: -2,
-  marginRight: -2,
-  width: 22
-};
 var elementLibraryDropdownStyle = {
   borderRadius: 4,
   height: 28,
@@ -13607,10 +13607,10 @@ var ElementLibraryButton = () => {
       renderContent: (color) => /* @__PURE__ */ jsxs56(Fragment15, {
         children: [
           /* @__PURE__ */ jsx112("span", {
-            style: browseElementsIconContainerStyle,
+            style: largeInspectorActionIconContainerStyle,
             children: /* @__PURE__ */ jsx112(BrowseElementsIcon, {
               color,
-              style: browseElementsIconStyle
+              style: largeInspectorActionIconStyle
             })
           }),
           /* @__PURE__ */ jsx112("span", {
@@ -13628,7 +13628,6 @@ var ElementLibraryButton = () => {
       segmentId: "element-library",
       selectedId: null,
       style: elementLibraryDropdownSegmentStyle,
-      title: "Choose an Element Library to browse inside Studio.",
       tooltipLabel: null,
       type: "menu",
       values: [
@@ -13667,19 +13666,18 @@ var ElementLibraryButton = () => {
   if (elementLibraries.length > 0) {
     return /* @__PURE__ */ jsx112(SegmentedButton, {
       segments: elementLibraryDropdownSegments,
-      style: elementLibraryDropdownStyle,
-      title: null
+      style: elementLibraryDropdownStyle
     });
   }
   return /* @__PURE__ */ jsx112(InspectorQuickAction, {
     disabled: false,
-    iconContainerStyle: browseElementsIconContainerStyle,
+    iconContainerStyle: largeInspectorActionIconContainerStyle,
     onClick: openElementsLibrary,
     renderIcon: (color) => /* @__PURE__ */ jsx112(BrowseElementsIcon, {
       color,
-      style: browseElementsIconStyle
+      style: largeInspectorActionIconStyle
     }),
-    title: "Browse the Remotion Elements library inside Studio.",
+    "aria-label": "Browse the Remotion Elements library inside Studio.",
     children: "Browse Elements"
   });
 };
@@ -14864,10 +14862,6 @@ var useCompositionActions = () => {
 
 // src/components/InspectorPanel/CompositionInspector.tsx
 import { jsx as jsx113, jsxs as jsxs57, Fragment as Fragment16 } from "react/jsx-runtime";
-var actionIconStyle = {
-  height: 18,
-  width: 18
-};
 var downloadLicenseAgreement = {
   color: LIGHT_TEXT,
   fontFamily: "sans-serif",
@@ -14952,7 +14946,7 @@ var CompositionActions = () => {
           onClick: insertSolid,
           renderIcon: (color) => /* @__PURE__ */ jsx113(SolidIcon, {
             color,
-            style: actionIconStyle
+            style: inspectorActionIconStyle
           }),
           children: "Add Solid"
         }) : null,
@@ -14961,7 +14955,7 @@ var CompositionActions = () => {
           onClick: insertAsset,
           renderIcon: (color) => /* @__PURE__ */ jsx113(PicIcon, {
             color,
-            style: actionIconStyle
+            style: inspectorActionIconStyle
           }),
           children: "Add asset..."
         }) : null,
@@ -14970,16 +14964,17 @@ var CompositionActions = () => {
           onClick: insertComposition2,
           renderIcon: (color) => /* @__PURE__ */ jsx113(FilmIcon, {
             color,
-            style: actionIconStyle
+            style: inspectorActionIconStyle
           }),
           children: "Add composition..."
         }) : null,
         canShowGenerateWithAgent ? /* @__PURE__ */ jsx113(InspectorQuickAction, {
           disabled: false,
+          iconContainerStyle: largeInspectorActionIconContainerStyle,
           onClick: generateWithAgent,
           renderIcon: (color) => /* @__PURE__ */ jsx113(SparklesIcon, {
             color,
-            style: actionIconStyle
+            style: largeInspectorActionIconStyle
           }),
           children: "Generate with agent..."
         }) : null,
@@ -14989,7 +14984,7 @@ var CompositionActions = () => {
           onClick: onDownloadProject,
           renderIcon: (color) => /* @__PURE__ */ jsx113(CloudDownloadIcon, {
             color,
-            style: actionIconStyle
+            style: inspectorActionIconStyle
           }),
           children: "Download project"
         }) : null
@@ -21276,16 +21271,19 @@ import {
 } from "react";
 import { Internals as Internals32 } from "remotion";
 
-// src/icons/scissors.tsx
+// src/icons/split.tsx
 import { jsx as jsx122 } from "react/jsx-runtime";
-var ScissorsIcon = ({ color, ...props }) => {
+var SplitIcon = ({ color, ...props }) => {
   return /* @__PURE__ */ jsx122("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 512 512",
+    viewBox: "0 0 640 640",
     ...props,
     children: /* @__PURE__ */ jsx122("path", {
-      fill: color,
-      d: "M48 112a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zm176 0C224 50.1 173.9 0 112 0S0 50.1 0 112 50.1 224 112 224c24 0 46.3-7.6 64.5-20.4l57.3 52.4-57.3 52.4C158.3 295.6 136 288 112 288 50.1 288 0 338.1 0 400s50.1 112 112 112 112-50.1 112-112c0-20.5-5.5-39.6-15.1-56.2L504.2 73.7c9.8-8.9 10.5-24.1 1.5-33.9s-24.1-10.5-33.9-1.5l-202.4 185.2-60.5-55.3c9.6-16.5 15.1-35.7 15.1-56.2zM471.8 473.7c9.8 8.9 25 8.3 33.9-1.5s8.3-25-1.5-33.9L338.6 286.8 302.7 319 471.8 473.7zM48 400a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"
+      d: "M152 112h72c26.5 0 48 21.5 48 48v320c0 26.5-21.5 48-48 48h-72M488 112h-72c-26.5 0-48 21.5-48 48v320c0 26.5 21.5 48 48 48h72",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 32,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 };
@@ -21470,8 +21468,9 @@ var TimelineFieldLabel = ({ rowDepth, selected, label: label3, stacked = false }
   return /* @__PURE__ */ jsx124("div", {
     style: labelRowStyle,
     children: /* @__PURE__ */ jsx124("span", {
+      role: "group",
       style: fieldNameStyle,
-      title: label3,
+      "aria-label": label3,
       children: label3
     })
   });
@@ -23452,7 +23451,7 @@ var TimelineAssetField = ({
     variant: null,
     onClick: openAssetSelection,
     disabled: window.remotion_isReadOnlyStudio,
-    title: "Change source",
+    "aria-label": "Change source",
     renderAction: (color) => /* @__PURE__ */ jsx131(PenIcon, {
       color,
       style: penIcon
@@ -23480,7 +23479,7 @@ var TimelineAssetField = ({
       }
     }
     const opensSource = linkInfo.kind === "local" && inlineSourceAction !== null && inlineSourceAction.onClick !== null;
-    const title = inlineSourceAction?.title ?? linkInfo.title;
+    const sourceDescription = inlineSourceAction?.["aria-label"] ?? linkInfo.title;
     const onPreviewClick = opensSource ? inlineSourceAction.onClick : openAssetSelection;
     const previewLabel = `${opensSource ? "Open" : "Replace"} ${name}`;
     const previewDisabled = opensSource ? inlineSourceAction.disabled : window.remotion_isReadOnlyStudio;
@@ -23495,11 +23494,11 @@ var TimelineAssetField = ({
     };
     const previewAction = /* @__PURE__ */ jsxs63("button", {
       "aria-label": previewLabel,
+      "aria-description": sourceDescription,
       className: `${HOVERABLE_CLASS_NAME} ${FOCUS_VISIBLE_ONLY_CLASS_NAME}`,
       disabled: previewDisabled,
       onClick: onPreviewClick,
       style: previewButtonStyle,
-      title,
       type: "button",
       children: [
         /* @__PURE__ */ jsx131("span", {
@@ -23632,7 +23631,7 @@ var TimelineColorField = ({
         /* @__PURE__ */ jsx133("button", {
           type: "button",
           style: setButtonStyle,
-          title: `Set ${field.description ?? field.key} to gray`,
+          "aria-label": `Set ${field.description ?? field.key} to gray`,
           onClick: () => onChangeComplete(DEFAULT_SET_COLOR),
           children: "Set"
         })
@@ -23650,7 +23649,7 @@ var TimelineColorField = ({
       height: SWATCH_HEIGHT,
       disabled: false,
       name: field.key,
-      title: currentValue
+      "aria-label": currentValue
     })
   });
 };
@@ -23697,7 +23696,7 @@ var TimelineEnumField = ({
   }, [variantKeys, onSelect]);
   return /* @__PURE__ */ jsx134(Combobox, {
     size: "small",
-    title: field.key,
+    "aria-label": field.key,
     selectedId: current,
     values: items
   });
@@ -25714,7 +25713,7 @@ var TimelineFontFamilyField = ({
     children: [
       /* @__PURE__ */ jsxs65("button", {
         ref: buttonRef,
-        title: field.key,
+        "aria-label": field.key,
         tabIndex,
         type: "button",
         style: style4,
@@ -25733,7 +25732,8 @@ var TimelineFontFamilyField = ({
         onMouseLeave: () => setHovered(false),
         children: [
           /* @__PURE__ */ jsx135("div", {
-            title: selected.label,
+            role: "group",
+            "aria-label": selected.label,
             style: { ...triggerLabel, ...selectedPreviewStyle },
             children: selected.label
           }),
@@ -25968,7 +25968,7 @@ var TimelineFontWeightField = ({
   if (FONT_WEIGHT_KEYWORDS.includes(sourceValue)) {
     return /* @__PURE__ */ jsx137(Combobox, {
       size: "small",
-      title: field.key,
+      "aria-label": field.key,
       selectedId: String(currentValue),
       values: keywordItems
     });
@@ -26296,7 +26296,6 @@ var LinkToggle = ({ linked, onToggle }) => {
     type: "button",
     style: toggleStyle,
     onPointerDown,
-    title: linked ? "Unlink scale axes" : "Link scale axes",
     "aria-label": linked ? "Unlink scale axes" : "Link scale axes",
     children: linked ? /* @__PURE__ */ jsx140("svg", {
       xmlns: "http://www.w3.org/2000/svg",
@@ -26649,6 +26648,9 @@ var TimelineScaleField = ({
 };
 
 // ../paths/dist/esm/index.mjs
+import {
+  interpolate as interpolate3
+} from "remotion/no-react";
 var length = {
   a: 7,
   A: 7,
@@ -26922,7 +26924,352 @@ var parsePath = (path) => {
     throw new Error(`Invalid path element ${segmentString}`);
   }, []).flat(1);
 };
+var convertQToCInstruction = (instruction, startPoint) => {
+  const cp1x = startPoint.x + 2 / 3 * (instruction.cpx - startPoint.x);
+  const cp1y = startPoint.y + 2 / 3 * (instruction.cpy - startPoint.y);
+  const cp2x = instruction.x + 2 / 3 * (instruction.cpx - instruction.x);
+  const cp2y = instruction.y + 2 / 3 * (instruction.cpy - instruction.y);
+  return {
+    type: "C",
+    cp1x,
+    cp1y,
+    cp2x,
+    cp2y,
+    x: instruction.x,
+    y: instruction.y
+  };
+};
+var iterateOverSegments = ({
+  segments,
+  iterate
+}) => {
+  let x = 0;
+  let y = 0;
+  let initialX = 0;
+  let initialY = 0;
+  let cpX = null;
+  let cpY = null;
+  const newSegments = segments.map((s, i) => {
+    const newSeg = iterate({
+      segment: s,
+      x,
+      y,
+      prevSegment: segments[i - 1] ?? null,
+      initialX,
+      initialY,
+      cpX,
+      cpY
+    });
+    switch (s.type) {
+      case "M":
+        initialX = s.x;
+        initialY = s.y;
+        x = s.x;
+        y = s.y;
+        cpX = null;
+        cpY = null;
+        break;
+      case "Q":
+        x = s.x;
+        y = s.y;
+        cpX = s.cpx;
+        cpY = s.cpy;
+        break;
+      case "A":
+        x = s.x;
+        y = s.y;
+        cpX = null;
+        cpY = null;
+        break;
+      case "C":
+        x = s.x;
+        y = s.y;
+        cpX = s.cp2x;
+        cpY = s.cp2y;
+        break;
+      case "S":
+        x = s.x;
+        y = s.y;
+        cpX = s.cpx;
+        cpY = s.cpy;
+        break;
+      case "T":
+        if (cpX !== null && cpY !== null) {
+          cpX = x - (cpX - x);
+          cpY = y - (cpY - y);
+        }
+        x = s.x;
+        y = s.y;
+        break;
+      case "L":
+        x = s.x;
+        y = s.y;
+        cpX = null;
+        cpY = null;
+        break;
+      case "V":
+        y = s.y;
+        cpX = null;
+        cpY = null;
+        break;
+      case "H":
+        x = s.x;
+        cpX = null;
+        cpY = null;
+        break;
+      case "Z":
+        x = initialX;
+        y = initialY;
+        cpX = null;
+        cpY = null;
+        break;
+      default:
+        throw new Error(`Unexpected instruction ${s.type}`);
+    }
+    return newSeg;
+  });
+  return newSegments.flat(1);
+};
 var TAU = Math.PI * 2;
+function approximate_unit_arc(theta1, delta_theta) {
+  const alpha = 4 / 3 * Math.tan(delta_theta / 4);
+  const x1 = Math.cos(theta1);
+  const y1 = Math.sin(theta1);
+  const x2 = Math.cos(theta1 + delta_theta);
+  const y2 = Math.sin(theta1 + delta_theta);
+  return [
+    x1,
+    y1,
+    x1 - y1 * alpha,
+    y1 + x1 * alpha,
+    x2 + y2 * alpha,
+    y2 - x2 * alpha,
+    x2,
+    y2
+  ];
+}
+function unit_vector_angle(ux, uy, vx, vy) {
+  const sign = ux * vy - uy * vx < 0 ? -1 : 1;
+  let dot = ux * vx + uy * vy;
+  if (dot > 1) {
+    dot = 1;
+  }
+  if (dot < -1) {
+    dot = -1;
+  }
+  return sign * Math.acos(dot);
+}
+function get_arc_center({
+  x1,
+  y1,
+  x2,
+  y2,
+  largeArcFlag,
+  sweepFlag,
+  rx,
+  ry,
+  sin_phi,
+  cos_phi
+}) {
+  const x1p = cos_phi * (x1 - x2) / 2 + sin_phi * (y1 - y2) / 2;
+  const y1p = -sin_phi * (x1 - x2) / 2 + cos_phi * (y1 - y2) / 2;
+  const rx_sq = rx * rx;
+  const ry_sq = ry * ry;
+  const x1p_sq = x1p * x1p;
+  const y1p_sq = y1p * y1p;
+  let radicant = rx_sq * ry_sq - rx_sq * y1p_sq - ry_sq * x1p_sq;
+  if (radicant < 0) {
+    radicant = 0;
+  }
+  radicant /= rx_sq * y1p_sq + ry_sq * x1p_sq;
+  radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
+  const cxp = radicant * rx / ry * y1p;
+  const cyp = radicant * -ry / rx * x1p;
+  const cx = cos_phi * cxp - sin_phi * cyp + (x1 + x2) / 2;
+  const cy = sin_phi * cxp + cos_phi * cyp + (y1 + y2) / 2;
+  const v1x = (x1p - cxp) / rx;
+  const v1y = (y1p - cyp) / ry;
+  const v2x = (-x1p - cxp) / rx;
+  const v2y = (-y1p - cyp) / ry;
+  const theta1 = unit_vector_angle(1, 0, v1x, v1y);
+  let delta_theta = unit_vector_angle(v1x, v1y, v2x, v2y);
+  if (sweepFlag === false && delta_theta > 0) {
+    delta_theta -= TAU;
+  }
+  if (sweepFlag === true && delta_theta < 0) {
+    delta_theta += TAU;
+  }
+  return [cx, cy, theta1, delta_theta];
+}
+function arcToCircle({
+  x1,
+  y1,
+  x2,
+  y2,
+  largeArcFlag,
+  sweepFlag,
+  rx,
+  ry,
+  phi
+}) {
+  const sin_phi = Math.sin(phi * TAU / 360);
+  const cos_phi = Math.cos(phi * TAU / 360);
+  const x1p = cos_phi * (x1 - x2) / 2 + sin_phi * (y1 - y2) / 2;
+  const y1p = -sin_phi * (x1 - x2) / 2 + cos_phi * (y1 - y2) / 2;
+  if (x1p === 0 && y1p === 0) {
+    return [];
+  }
+  if (rx === 0 || ry === 0) {
+    return [];
+  }
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const cc = get_arc_center({
+    x1,
+    y1,
+    x2,
+    y2,
+    largeArcFlag,
+    sweepFlag,
+    rx,
+    ry,
+    sin_phi,
+    cos_phi
+  });
+  const result = [];
+  let theta1 = cc[2];
+  let delta_theta = cc[3];
+  const segments = Math.max(Math.ceil(Math.abs(delta_theta) / (TAU / 4)), 1);
+  delta_theta /= segments;
+  for (let i = 0;i < segments; i++) {
+    result.push(approximate_unit_arc(theta1, delta_theta));
+    theta1 += delta_theta;
+  }
+  return result.map((curve) => {
+    for (let i = 0;i < curve.length; i += 2) {
+      let x = curve[i + 0];
+      let y = curve[i + 1];
+      x *= rx;
+      y *= ry;
+      const xp = cos_phi * x - sin_phi * y;
+      const yp = sin_phi * x + cos_phi * y;
+      curve[i + 0] = xp + cc[0];
+      curve[i + 1] = yp + cc[1];
+    }
+    return curve;
+  });
+}
+var removeATSHVQInstructions = (segments) => {
+  return iterateOverSegments({
+    segments,
+    iterate: ({ segment, prevSegment, x, y, cpX, cpY }) => {
+      if (segment.type === "H") {
+        return [{ type: "L", x: segment.x, y }];
+      }
+      if (segment.type === "V") {
+        return [{ type: "L", x, y: segment.y }];
+      }
+      if (segment.type === "A") {
+        const nextX = segment.x;
+        const nextY = segment.y;
+        const new_segments = arcToCircle({
+          x1: x,
+          y1: y,
+          x2: nextX,
+          y2: nextY,
+          largeArcFlag: segment.largeArcFlag,
+          sweepFlag: segment.sweepFlag,
+          rx: segment.rx,
+          ry: segment.ry,
+          phi: segment.xAxisRotation
+        });
+        if (new_segments.length === 0) {
+          return [
+            {
+              type: "L",
+              x: segment.x,
+              y: segment.y
+            }
+          ];
+        }
+        const result = new_segments.map((_s) => {
+          return {
+            type: "C",
+            cp1x: _s[2],
+            cp1y: _s[3],
+            cp2x: _s[4],
+            cp2y: _s[5],
+            x: _s[6],
+            y: _s[7]
+          };
+        });
+        return result;
+      }
+      if (segment.type === "T") {
+        let prevControlX = 0;
+        let prevControlY = 0;
+        if (prevSegment && (prevSegment.type === "Q" || prevSegment.type === "T")) {
+          prevControlX = cpX;
+          prevControlY = cpY;
+        } else {
+          prevControlX = x;
+          prevControlY = y;
+        }
+        const vectorX = prevControlX - x;
+        const vectorY = prevControlY - y;
+        const newControlX = x - vectorX;
+        const newControlY = y - vectorY;
+        return [
+          convertQToCInstruction({
+            type: "Q",
+            cpx: newControlX,
+            cpy: newControlY,
+            x: segment.x,
+            y: segment.y
+          }, { x, y })
+        ];
+      }
+      if (segment.type === "S") {
+        let prevControlX = 0;
+        let prevControlY = 0;
+        if (prevSegment && prevSegment.type === "C") {
+          prevControlX = prevSegment.cp2x;
+          prevControlY = prevSegment.cp2y;
+        } else if (prevSegment && prevSegment.type === "S") {
+          prevControlX = prevSegment.cpx;
+          prevControlY = prevSegment.cpy;
+        } else {
+          prevControlX = x;
+          prevControlY = y;
+        }
+        const vectorX = prevControlX - x;
+        const vectorY = prevControlY - y;
+        const newControlX = x - vectorX;
+        const newControlY = y - vectorY;
+        return [
+          {
+            type: "C",
+            cp1x: newControlX,
+            cp1y: newControlY,
+            cp2x: segment.cpx,
+            cp2y: segment.cpy,
+            x: segment.x,
+            y: segment.y
+          }
+        ];
+      }
+      if (segment.type === "Q") {
+        return [convertQToCInstruction(segment, { x, y })];
+      }
+      return [segment];
+    }
+  });
+};
 var serializeInstruction = (instruction) => {
   if (instruction.type === "A") {
     return `A ${instruction.rx} ${instruction.ry} ${instruction.xAxisRotation} ${Number(instruction.largeArcFlag)} ${Number(instruction.sweepFlag)} ${instruction.x} ${instruction.y}`;
@@ -27125,6 +27472,337 @@ var normalizePath = (path) => {
   const normalized = normalizeInstructions(instructions);
   return serializeInstructions(normalized);
 };
+var reduceInstructions = (instruction) => {
+  const simplified = normalizeInstructions(instruction);
+  return removeATSHVQInstructions(simplified);
+};
+var getEndPosition = (instructions) => {
+  let x = 0;
+  let y = 0;
+  let moveX = 0;
+  let moveY = 0;
+  for (let i = 0;i < instructions.length; i++) {
+    const instruction = instructions[i];
+    if (instruction.type === "M") {
+      moveX = instruction.x;
+      moveY = instruction.y;
+    } else if (instruction.type === "m") {
+      moveX += instruction.dx;
+      moveY += instruction.dy;
+    }
+    if (instruction.type === "A" || instruction.type === "C" || instruction.type === "L" || instruction.type === "M" || instruction.type === "Q" || instruction.type === "S" || instruction.type === "T") {
+      x = instruction.x;
+      y = instruction.y;
+      continue;
+    }
+    if (instruction.type === "a" || instruction.type === "c" || instruction.type === "l" || instruction.type === "m" || instruction.type === "q" || instruction.type === "s" || instruction.type === "t") {
+      x += instruction.dx;
+      y += instruction.dy;
+      continue;
+    }
+    if (instruction.type === "H") {
+      x = instruction.x;
+      continue;
+    }
+    if (instruction.type === "V") {
+      y = instruction.y;
+      continue;
+    }
+    if (instruction.type === "Z") {
+      x = moveX;
+      y = moveY;
+      continue;
+    }
+    if (instruction.type === "h") {
+      x += instruction.dx;
+      continue;
+    }
+    if (instruction.type === "v") {
+      y += instruction.dy;
+      continue;
+    }
+    throw new Error("Unknown instruction type: " + instruction.type);
+  }
+  return {
+    x,
+    y
+  };
+};
+var convertToLCommand = (command) => {
+  if (command.type === "M" || command.type === "L" || command.type === "Z") {
+    throw new Error("unexpected");
+  }
+  return {
+    type: "L",
+    x: command.x,
+    y: command.y
+  };
+};
+var convertToCCommand = (command, currentPoint) => {
+  if (command.type === "M" || command.type === "C" || command.type === "Z") {
+    throw new Error("unexpected");
+  }
+  if (command.type === "L") {
+    return {
+      type: "C",
+      cp1x: currentPoint.x,
+      cp1y: currentPoint.y,
+      cp2x: command.x,
+      cp2y: command.y,
+      x: command.x,
+      y: command.y
+    };
+  }
+  throw new Error("all types should be handled");
+};
+function convertToSameInstructionType(aCommand, bCommand, currentPoint) {
+  if (aCommand.type === "M" || bCommand.type === "M") {
+    return { ...aCommand };
+  }
+  if (aCommand.type === bCommand.type) {
+    return { ...aCommand };
+  }
+  if (bCommand.type === "C") {
+    return convertToCCommand(aCommand, currentPoint);
+  }
+  if (bCommand.type === "L") {
+    return convertToLCommand(aCommand);
+  }
+  if (bCommand.type === "Z") {
+    return {
+      type: "Z"
+    };
+  }
+  throw new TypeError("unhandled");
+}
+function pointsToInstruction(points) {
+  const x = points[points.length - 1][0];
+  const y = points[points.length - 1][1];
+  if (points.length === 4) {
+    const x1 = points[1][0];
+    const y1 = points[1][1];
+    const x2 = points[2][0];
+    const y2 = points[2][1];
+    return {
+      type: "C",
+      cp1x: x1,
+      cp1y: y1,
+      cp2x: x2,
+      cp2y: y2,
+      x,
+      y
+    };
+  }
+  if (points.length === 3) {
+    const x1 = points[1][0];
+    const y1 = points[1][1];
+    return convertQToCInstruction({
+      type: "Q",
+      cpx: x1,
+      cpy: y1,
+      x,
+      y
+    }, {
+      x: points[0][0],
+      y: points[0][1]
+    });
+  }
+  return {
+    type: "L",
+    x,
+    y
+  };
+}
+function decasteljau(points, t) {
+  const left = [];
+  const right = [];
+  function decasteljauRecurse(_points, _t) {
+    if (_points.length === 1) {
+      left.push(_points[0]);
+      right.push(_points[0]);
+    } else {
+      const newPoints = Array(_points.length - 1);
+      for (let i = 0;i < newPoints.length; i++) {
+        if (i === 0) {
+          left.push(_points[0]);
+        }
+        if (i === newPoints.length - 1) {
+          right.push(_points[i + 1]);
+        }
+        newPoints[i] = [
+          (1 - _t) * _points[i][0] + _t * _points[i + 1][0],
+          (1 - _t) * _points[i][1] + _t * _points[i + 1][1]
+        ];
+      }
+      decasteljauRecurse(newPoints, _t);
+    }
+  }
+  if (points.length) {
+    decasteljauRecurse(points, t);
+  }
+  return { left, right: right.reverse() };
+}
+function splitCurveAsPoints(points, segmentCount = 2) {
+  const segments = [];
+  let remainingCurve = points;
+  const tIncrement = 1 / segmentCount;
+  for (let i = 0;i < segmentCount - 1; i++) {
+    const tRelative = tIncrement / (1 - tIncrement * i);
+    const split = decasteljau(remainingCurve, tRelative);
+    segments.push(split.left);
+    remainingCurve = split.right;
+  }
+  segments.push(remainingCurve);
+  return segments;
+}
+var splitCurveInstructions = (instructionStartX, instructionStartY, instructionEnd, segmentCount) => {
+  const points = [[instructionStartX, instructionStartY]];
+  if (instructionEnd.type === "Q") {
+    points.push([instructionEnd.cpx, instructionEnd.cpy]);
+  }
+  if (instructionEnd.type === "C") {
+    points.push([instructionEnd.cp1x, instructionEnd.cp1y]);
+    points.push([instructionEnd.cp2x, instructionEnd.cp2y]);
+  }
+  points.push([instructionEnd.x, instructionEnd.y]);
+  return splitCurveAsPoints(points, segmentCount).map((p) => {
+    return pointsToInstruction(p);
+  });
+};
+function splitSegmentInstructions(commandStart, commandEnd, segmentCount) {
+  let segments = [];
+  if (commandEnd.type === "L" || commandEnd.type === "C") {
+    if (commandStart.type !== "Z") {
+      segments = segments.concat(splitCurveInstructions(commandStart.x, commandStart.y, commandEnd, segmentCount));
+    }
+  } else {
+    const copyCommand = commandStart.type === "M" ? {
+      type: "L",
+      x: commandStart.x,
+      y: commandStart.y
+    } : commandStart;
+    segments = segments.concat(new Array(segmentCount - 1).fill(true).map(() => copyCommand));
+    segments.push(commandEnd);
+  }
+  return segments;
+}
+function extendInstruction(commandsToExtend, referenceCommands) {
+  const numSegmentsToExtend = commandsToExtend.length - 1;
+  const numReferenceSegments = referenceCommands.length - 1;
+  const segmentRatio = numSegmentsToExtend / numReferenceSegments;
+  const countPointsPerSegment = new Array(numReferenceSegments).fill(undefined).reduce((accum, _d, i) => {
+    const insertIndex = Math.floor(segmentRatio * i);
+    accum[insertIndex] = (accum[insertIndex] || 0) + 1;
+    return accum;
+  }, []);
+  const extended = countPointsPerSegment.reduce((_extended, segmentCount, i) => {
+    if (i === commandsToExtend.length - 1) {
+      const lastCommandCopies = new Array(segmentCount).fill({
+        ...commandsToExtend[commandsToExtend.length - 1]
+      });
+      if (lastCommandCopies[0].type === "M") {
+        lastCommandCopies.forEach((d) => {
+          d.type = "L";
+        });
+      }
+      return _extended.concat(lastCommandCopies);
+    }
+    return _extended.concat(splitSegmentInstructions(commandsToExtend[i], commandsToExtend[i + 1], segmentCount));
+  }, []);
+  extended.unshift(commandsToExtend[0]);
+  return extended;
+}
+var normalizeInterpolatedPath = (path) => {
+  return path.replace(/-?\d*\.?\d+(?:e[+-]?\d+)?/gi, (value) => {
+    const number = Number(value);
+    return Number.isInteger(number) ? value : String(Number(number.toPrecision(15)));
+  });
+};
+var interpolatePaths = (input2, inputRange, outputRange, options) => {
+  if (!Array.isArray(outputRange)) {
+    throw new TypeError("outputRange must be an array of SVG path strings");
+  }
+  for (const path of outputRange) {
+    if (typeof path !== "string") {
+      throw new TypeError("outputRange must contain only SVG path strings");
+    }
+  }
+  for (const side of ["extrapolateLeft", "extrapolateRight"]) {
+    const extrapolation = options?.[side];
+    if (extrapolation !== undefined && extrapolation !== "extend" && extrapolation !== "clamp" && extrapolation !== "wrap") {
+      throw new TypeError(`${side} must be "extend", "clamp", or "wrap" for interpolatePaths()`);
+    }
+  }
+  const weights = interpolate3(input2, inputRange, outputRange.map((_, pathIndex) => outputRange.map((__, index) => index === pathIndex ? 1 : 0)), options);
+  const exactPathIndex = weights.findIndex((weight, index) => weight === 1 && weights.every((otherWeight, otherIndex) => otherIndex === index ? true : otherWeight === 0));
+  if (exactPathIndex !== -1) {
+    return outputRange[exactPathIndex];
+  }
+  const contributingPaths = outputRange.map((path, index) => ({ path, weight: weights[index] })).filter(({ weight }) => weight !== 0);
+  const paths = contributingPaths.map(({ path }) => {
+    const commands = reduceInstructions(parsePath(path));
+    if (commands.length === 0) {
+      throw new TypeError(`SVG Path "${path}" is not valid`);
+    }
+    return commands;
+  });
+  const closed = paths.every((commands) => commands[commands.length - 1].type === "Z");
+  const openPaths = paths.map((commands) => commands[commands.length - 1].type === "Z" ? commands.slice(0, -1) : commands);
+  const reference = openPaths.reduce((longest, commands) => commands.length > longest.length ? commands : longest);
+  const extendedPaths = openPaths.map((commands) => commands.length < reference.length ? extendInstruction(commands, reference) : commands);
+  const result = reference.map((_, instructionIndex) => {
+    const commands = extendedPaths.map((path) => path[instructionIndex]);
+    if (commands.some((command) => command.type === "Z")) {
+      if (commands.every((command) => command.type === "Z")) {
+        return { type: "Z" };
+      }
+      throw new TypeError("Cannot interpolate SVG paths with different subpath structures");
+    }
+    const target = commands.find((command) => command.type === "C") ?? commands[0];
+    const normalized = commands.map((command, pathIndex) => {
+      if (command.type === "M" !== (target.type === "M")) {
+        throw new TypeError("Cannot interpolate SVG paths with different subpath structures");
+      }
+      return convertToSameInstructionType(command, target, getEndPosition(extendedPaths[pathIndex].slice(0, instructionIndex)));
+    });
+    const coordinates = normalized.map((command) => {
+      if (command.type === "Z") {
+        return [];
+      }
+      return command.type === "C" ? [
+        command.x,
+        command.y,
+        command.cp1x,
+        command.cp1y,
+        command.cp2x,
+        command.cp2y
+      ] : [command.x, command.y];
+    });
+    const values = coordinates[0].map((base, coordinateIndex) => {
+      const interpolated = coordinates.reduce((value, path, pathIndex) => value + (path[coordinateIndex] - base) * contributingPaths[pathIndex].weight, base);
+      if (Number.isFinite(interpolated)) {
+        return interpolated;
+      }
+      return coordinates.reduce((sum, path, pathIndex) => sum + path[coordinateIndex] * contributingPaths[pathIndex].weight, 0);
+    });
+    if (target.type === "C") {
+      return {
+        type: "C",
+        x: values[0],
+        y: values[1],
+        cp1x: values[2],
+        cp1y: values[3],
+        cp2x: values[4],
+        cp2y: values[5]
+      };
+    }
+    return { type: target.type, x: values[0], y: values[1] };
+  });
+  if (closed) {
+    result.push({ type: "Z" });
+  }
+  return normalizeInterpolatedPath(serializeInstructions(result));
+};
 
 // src/components/Timeline/TimelineTextContentField.tsx
 import { useCallback as useCallback82, useRef as useRef28, useState as useState52 } from "react";
@@ -28374,7 +29052,7 @@ var TimelineArrayField = ({ field, effectiveValue, onSave, onDragValueChange, on
               disabled: !canRemove,
               onClick: () => onRemove(index),
               style: canRemove ? button2 : disabledButton,
-              title: `Remove item ${index}`,
+              "aria-label": `Remove item ${index}`,
               type: "button",
               children: "-"
             })
@@ -28387,7 +29065,7 @@ var TimelineArrayField = ({ field, effectiveValue, onSave, onDragValueChange, on
           type: "button",
           style: button2,
           onClick: onAdd,
-          title: "Add item",
+          "aria-label": "Add item",
           children: "+"
         })
       }) : null
@@ -28463,10 +29141,11 @@ var UnsupportedStatus = ({ label: label3, onFix, formattedValue }) => {
     event.stopPropagation();
   };
   return /* @__PURE__ */ jsxs71("span", {
+    role: "group",
     style: unsupportedStatusWrapper,
     onPointerEnter: () => setHovered(true),
     onPointerLeave: () => setHovered(false),
-    title: formattedValue && typeof label3 === "string" ? label3 : undefined,
+    "aria-label": formattedValue && typeof label3 === "string" ? label3 : undefined,
     children: [
       /* @__PURE__ */ jsx147("span", {
         style: formattedValue ? computedValue : unsupportedLabel,
@@ -28477,7 +29156,7 @@ var UnsupportedStatus = ({ label: label3, onFix, formattedValue }) => {
         type: "button",
         className: `${FOCUS_VISIBLE_ONLY_CLASS_NAME} ${HOVERABLE_CLASS_NAME}`,
         style: fixLink,
-        title: "Fix computed Studio value",
+        "aria-label": "Fix computed Studio value",
         onClick: (event) => {
           stopMousePropagation(event);
           onFix();
@@ -28595,9 +29274,9 @@ var NumericAxis = ({ field, values, axis, onPreview, onSave, onClear }) => {
     },
     children: /* @__PURE__ */ jsx148(InputDragger, {
       type: "number",
+      "aria-description": "Type to set all values; drag to adjust each value",
       value: dragValue ?? coordinates[0],
       "aria-label": axis === null ? field.description ?? field.key : `Offset ${["X", "Y", "Z"][axis]}`,
-      title: "Type to set all values; drag to adjust each value",
       status: "ok",
       small: true,
       rightAlign: false,
@@ -28723,7 +29402,7 @@ var MultiSequenceField = ({ field, targets, readOnlyStudio }) => {
         fontSize: 12,
         padding: 0
       },
-      title: "Set a value for all selected sequences",
+      "aria-label": "Set a value for all selected sequences",
       onClick: () => setEditingMixed(true),
       children: "Mixed"
     });
@@ -28783,11 +29462,6 @@ var selectionCountStyle = {
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 };
-var actionIconStyle2 = {
-  display: "block",
-  height: 16,
-  width: 16
-};
 var MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
   const { sequences } = useContext45(Internals32.SequenceManager);
   const timelinePosition = Internals32.Timeline.useTimelinePosition();
@@ -28914,10 +29588,11 @@ var MultiSequenceInspector = ({ selections, readOnlyStudio }) => {
         children: /* @__PURE__ */ jsx150(InspectorQuickActionsSection, {
           children: /* @__PURE__ */ jsx150(InspectorQuickAction, {
             disabled: !canSplit,
+            iconContainerStyle: largeInspectorActionIconContainerStyle,
             onClick: onSplit,
-            title: canSplit ? undefined : "Studio is read-only",
-            renderIcon: (color) => /* @__PURE__ */ jsx150(ScissorsIcon, {
-              style: actionIconStyle2,
+            "aria-label": canSplit ? undefined : "Studio is read-only",
+            renderIcon: (color) => /* @__PURE__ */ jsx150(SplitIcon, {
+              style: largeInspectorActionIconStyle,
               color
             }),
             children: "Split selected"
@@ -29420,8 +30095,9 @@ var EasingGraphScaffold = ({ labels }) => {
         width: topLabelWidth,
         height: EASING_GRAPH_LABEL_HEIGHT,
         children: /* @__PURE__ */ jsx151("div", {
+          role: "group",
           style: getEasingGraphLabelStyle("left"),
-          title: labels.end,
+          "aria-label": labels.end,
           children: labels.end
         })
       }),
@@ -29431,8 +30107,9 @@ var EasingGraphScaffold = ({ labels }) => {
         width: bottomLabelWidth,
         height: EASING_GRAPH_LABEL_HEIGHT,
         children: /* @__PURE__ */ jsx151("div", {
+          role: "group",
           style: getEasingGraphLabelStyle("right"),
-          title: labels.start,
+          "aria-label": labels.start,
           children: labels.start
         })
       })
@@ -29460,7 +30137,6 @@ var EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
   return /* @__PURE__ */ jsx151("button", {
     type: "button",
     style: style4,
-    title: preset.label,
     "aria-label": `Apply ${preset.label} easing`,
     disabled,
     onClick: handleClick,
@@ -31276,7 +31952,6 @@ var TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInfo,
         ...{ [TIMELINE_MARQUEE_ITEM_ATTR]: true },
         type: "button",
         style: interactiveStyle,
-        title: `Easing from frame ${fromFrame} to ${toFrame}`,
         "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`,
         onPointerDown: selectable ? onPointerDown : undefined,
         children: /* @__PURE__ */ jsx154(TimelineKeyframeEasingLineVisual, {
@@ -31472,7 +32147,6 @@ var TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item: item2, onS
     type: "button",
     style: buttonStyle2,
     onClick,
-    title: item2.type === "keyframe" ? `Keyframe at frame ${item2.selection.frame}` : `Easing from frame ${item2.selection.fromFrame} to ${item2.selection.toFrame}`,
     "aria-label": item2.type === "keyframe" ? `Select keyframe at frame ${item2.selection.frame}` : `Select easing from frame ${item2.selection.fromFrame} to ${item2.selection.toFrame}`,
     children: item2.type === "keyframe" ? /* @__PURE__ */ jsx155(TimelineKeyframeDiamondIcon, {
       color: LIGHT_TEXT,
@@ -31491,7 +32165,7 @@ var TimelineNavigatorItem = ({ extendLineLeft, extendLineRight, item: item2, onS
 };
 var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, nodePathInfo }) => {
   const { isSelected, selectItems } = useTimelineSelection();
-  const setFrame = Internals36.Timeline.useTimelineSeekFrame();
+  const seekFrame = Internals36.Timeline.useTimelineSeekFrame();
   const videoConfig = useVideoConfig4();
   const items = useMemo91(() => getKeyframeEasingNavigatorItems({
     includeEasings,
@@ -31508,7 +32182,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
   }, [selectItems]);
   const seekToItem = useCallback95((item2, direction) => {
     const frame = getNavigatorItemPlayheadFrame(item2);
-    setFrame((current) => {
+    seekFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame };
       Internals36.persistCurrentFrame(next);
       return next;
@@ -31518,7 +32192,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
       durationInFrames: videoConfig.durationInFrames,
       frame
     });
-  }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
+  }, [seekFrame, videoConfig.durationInFrames, videoConfig.id]);
   const selectPrevious = useCallback95(() => {
     if (previousItem === null) {
       return;
@@ -31543,7 +32217,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
         variant: null,
         disabled: previousItem === null,
         onClick: selectPrevious,
-        title: "Previous animation item",
+        "aria-label": "Previous animation item",
         renderAction: (color) => /* @__PURE__ */ jsx155(NavigationChevron, {
           color: previousItem === null ? disabledChevronColor : color,
           direction: "left"
@@ -31579,7 +32253,7 @@ var KeyframeEasingNavigator = ({ currentSelection, includeEasings, keyframes, no
         variant: null,
         disabled: nextItem === null,
         onClick: selectNext,
-        title: "Next animation item",
+        "aria-label": "Next animation item",
         renderAction: (color) => /* @__PURE__ */ jsx155(NavigationChevron, {
           color: nextItem === null ? disabledChevronColor : color,
           direction: "right"
@@ -31613,8 +32287,8 @@ var extrapolateOptions = [
   "wrap"
 ];
 var labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
-var getExtrapolateValues = (onSelect, disabled) => {
-  return extrapolateOptions.map((value) => ({
+var getExtrapolateValues = (onSelect, disabled, allowIdentity) => {
+  return extrapolateOptions.filter((value) => allowIdentity || value !== "identity").map((value) => ({
     type: "item",
     id: value,
     keyHint: null,
@@ -31653,7 +32327,8 @@ var KeyframeSettings = ({ update }) => {
   const { previewServerState } = useContext50(StudioServerConnectionCtx);
   const { propStatus } = update;
   const [posterize, setPosterize] = useState60(propStatus.posterize ?? 0);
-  const canEditInterpolationSettings = propStatus.interpolationFunction === "interpolate";
+  const canEditExtrapolation = propStatus.interpolationFunction === "interpolate" || propStatus.interpolationFunction === "interpolatePaths";
+  const canEditOutput = propStatus.interpolationFunction === "interpolate";
   const disabled = previewServerState.type !== "connected";
   useEffect39(() => {
     setPosterize(propStatus.posterize ?? 0);
@@ -31697,12 +32372,13 @@ var KeyframeSettings = ({ update }) => {
   }) => {
     save({
       type: "settings",
-      clamping: canEditInterpolationSettings ? { left, right } : undefined,
-      output: canEditInterpolationSettings ? output : undefined,
+      clamping: canEditExtrapolation ? { left, right } : undefined,
+      output: canEditOutput ? output : undefined,
       posterize: nextPosterize <= 0 ? undefined : nextPosterize
     });
   }, [
-    canEditInterpolationSettings,
+    canEditExtrapolation,
+    canEditOutput,
     propStatus.clamping.left,
     propStatus.clamping.right,
     propStatus.output,
@@ -31712,8 +32388,8 @@ var KeyframeSettings = ({ update }) => {
   const onSelectLeft = useCallback96((left) => saveSettings({ left }), [saveSettings]);
   const onSelectRight = useCallback96((right) => saveSettings({ right }), [saveSettings]);
   const onSelectOutput = useCallback96((output) => saveSettings({ output }), [saveSettings]);
-  const leftValues = useMemo92(() => getExtrapolateValues(onSelectLeft, disabled), [disabled, onSelectLeft]);
-  const rightValues = useMemo92(() => getExtrapolateValues(onSelectRight, disabled), [disabled, onSelectRight]);
+  const leftValues = useMemo92(() => getExtrapolateValues(onSelectLeft, disabled, canEditOutput), [canEditOutput, disabled, onSelectLeft]);
+  const rightValues = useMemo92(() => getExtrapolateValues(onSelectRight, disabled, canEditOutput), [canEditOutput, disabled, onSelectRight]);
   const outputValues = useMemo92(() => getOutputValues(onSelectOutput, disabled), [disabled, onSelectOutput]);
   const onPosterizeChange = useCallback96((value) => {
     setPosterize(Math.max(0, Math.round(value)));
@@ -31733,14 +32409,14 @@ var KeyframeSettings = ({ update }) => {
     children: /* @__PURE__ */ jsxs78("div", {
       style: keyframeSettingsContainer,
       children: [
-        canEditInterpolationSettings ? /* @__PURE__ */ jsxs78(Fragment28, {
+        canEditExtrapolation ? /* @__PURE__ */ jsxs78(Fragment28, {
           children: [
             /* @__PURE__ */ jsx156(InspectorDetailRow, {
               label: "Extrapolate left",
               children: /* @__PURE__ */ jsx156(Combobox, {
                 values: leftValues,
                 selectedId: propStatus.clamping.left,
-                title: "Extrapolate left",
+                "aria-label": "Extrapolate left",
                 style: comboStyle,
                 size: "small"
               })
@@ -31750,23 +32426,23 @@ var KeyframeSettings = ({ update }) => {
               children: /* @__PURE__ */ jsx156(Combobox, {
                 values: rightValues,
                 selectedId: propStatus.clamping.right,
-                title: "Extrapolate right",
-                style: comboStyle,
-                size: "small"
-              })
-            }),
-            /* @__PURE__ */ jsx156(InspectorDetailRow, {
-              label: "Output",
-              children: /* @__PURE__ */ jsx156(Combobox, {
-                values: outputValues,
-                selectedId: propStatus.output ?? "linear",
-                title: "Output",
+                "aria-label": "Extrapolate right",
                 style: comboStyle,
                 size: "small"
               })
             })
           ]
         }) : null,
+        canEditOutput ? /* @__PURE__ */ jsx156(InspectorDetailRow, {
+          label: "Output",
+          children: /* @__PURE__ */ jsx156(Combobox, {
+            values: outputValues,
+            selectedId: propStatus.output ?? "linear",
+            "aria-label": "Output",
+            style: comboStyle,
+            size: "small"
+          })
+        }) : null,
         /* @__PURE__ */ jsx156(InspectorDetailRow, {
           label: "Posterize",
           children: /* @__PURE__ */ jsx156(InputDragger, {
@@ -32793,14 +33469,14 @@ var useSelectAsset = () => {
 var useSelectComposition = () => {
   const { setCompositionFoldersExpanded } = useContext55(FolderContext);
   const { setCanvasContent } = useContext55(Internals40.CompositionSetters);
-  const setFrame = Internals40.Timeline.useTimelineSeekFrame();
+  const seekFrame = Internals40.Timeline.useTimelineSeekFrame();
   return useCallback101((c, push, frame = null) => {
     if (push) {
       pushUrl(`/${c.id}`);
     }
     explorerSidebarTabs.current?.selectCompositionPanel();
     if (frame !== null) {
-      setFrame((current) => ({ ...current, [c.id]: frame }));
+      seekFrame((current) => ({ ...current, [c.id]: frame }));
     }
     setCanvasContent({ type: "composition", compositionId: c.id });
     const { folderName, parentFolderName } = c;
@@ -32817,7 +33493,7 @@ var useSelectComposition = () => {
         return newState;
       });
     }
-  }, [setCanvasContent, setCompositionFoldersExpanded, setFrame]);
+  }, [setCanvasContent, setCompositionFoldersExpanded, seekFrame]);
 };
 var InitialCompositionLoader = () => {
   const { compositions, canvasContent } = useContext55(Internals40.CompositionManager);
@@ -33117,7 +33793,7 @@ var SequenceInspectorHeader = ({ sourceLocation, track }) => {
         documentationLink ? /* @__PURE__ */ jsxs79(InspectorQuickAction, {
           disabled: false,
           style: defaultCursor,
-          title: "Open component docs",
+          "aria-label": "Open component docs",
           onClick: openDocumentationLink,
           children: [
             componentName,
@@ -33396,7 +34072,7 @@ var EasingInspector = ({ selection }) => {
       /* @__PURE__ */ jsx162(InspectorBackAction, {
         disabled: parentSelection === null,
         onClick: onSelectParent,
-        title: "Back to property",
+        "aria-label": "Back to property",
         children: fieldLabel
       }),
       easingUpdate === null || track === null ? null : /* @__PURE__ */ jsx162(KeyframeEasingNavigator, {
@@ -33973,7 +34649,7 @@ var TimelineKeyframeControls = ({
 }) => {
   const videoConfig = useVideoConfig6();
   const timelinePosition = Internals44.Timeline.useTimelinePosition();
-  const setFrame = Internals44.Timeline.useTimelineSeekFrame();
+  const seekFrame = Internals44.Timeline.useTimelineSeekFrame();
   const { setPropStatuses } = useContext63(Internals44.VisualModeSettersContext);
   const { propStatuses } = useContext63(Internals44.VisualModePropStatusesContext);
   const { getDragOverrides, getEffectDragOverrides } = useContext63(Internals44.VisualModeDragOverridesContext);
@@ -34078,7 +34754,7 @@ var TimelineKeyframeControls = ({
     tracks
   ]);
   const seekToDisplayFrame = useCallback106((frame, direction) => {
-    setFrame((current) => {
+    seekFrame((current) => {
       const next = { ...current, [videoConfig.id]: frame };
       Internals44.persistCurrentFrame(next);
       return next;
@@ -34088,7 +34764,7 @@ var TimelineKeyframeControls = ({
       durationInFrames: videoConfig.durationInFrames,
       frame
     });
-  }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
+  }, [seekFrame, videoConfig.durationInFrames, videoConfig.id]);
   const onPrevious = useCallback106((e) => {
     e.stopPropagation();
     if (previousDisplayFrame !== null) {
@@ -34192,7 +34868,6 @@ var TimelineKeyframeControls = ({
         disabled: previousDisabled,
         onPointerDown: previousDisabled ? undefined : onPrevious,
         "aria-label": "Go to previous keyframe",
-        title: "Previous keyframe",
         children: /* @__PURE__ */ jsx165("svg", {
           width: "14",
           height: "14",
@@ -34210,7 +34885,6 @@ var TimelineKeyframeControls = ({
         disabled: !canToggleKeyframe || !clientId,
         onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined,
         "aria-label": hasKeyframeAtCurrentFrame ? "Remove keyframe" : "Add keyframe",
-        title: hasKeyframeAtCurrentFrame ? "Remove keyframe" : "Add keyframe",
         children: /* @__PURE__ */ jsx165(TimelineKeyframeDiamondIcon, {
           color: diamondColor,
           size: 12
@@ -34222,7 +34896,6 @@ var TimelineKeyframeControls = ({
         disabled: nextDisabled,
         onPointerDown: nextDisabled ? undefined : onNext,
         "aria-label": "Go to next keyframe",
-        title: "Next keyframe",
         children: /* @__PURE__ */ jsx165("svg", {
           width: "14",
           height: "14",
@@ -35330,9 +36003,10 @@ var TimelineSequencePropItem = ({
     nodePathInfo,
     mode: keyframeControlsMode
   }) : null;
+  const hidePathValue = keyframeControlsMode === "timeline" && field.typeName === "svg-path";
   const style4 = useMemo105(() => {
-    return isTimelineFieldStacked({ field, transform3DMode }) ? fieldRowBase2 : { ...fieldRowBase2, height: field.rowHeight };
-  }, [field, transform3DMode]);
+    return !hidePathValue && isTimelineFieldStacked({ field, transform3DMode }) ? fieldRowBase2 : { ...fieldRowBase2, height: field.rowHeight };
+  }, [field, hidePathValue, transform3DMode]);
   const canResetToDefault = useMemo105(() => {
     if (!propStatus || propStatus.status === "computed") {
       return false;
@@ -35505,7 +36179,11 @@ var TimelineSequencePropItem = ({
     showSelectedBackground: true,
     containsSelection,
     outerHeight: null,
-    children: /* @__PURE__ */ jsx168(TimelineFieldRowContent, {
+    children: hidePathValue ? /* @__PURE__ */ jsx168(TimelineFieldLabel, {
+      rowDepth,
+      selected: selection.selected || containsSelection,
+      label: field.description ?? field.key
+    }) : /* @__PURE__ */ jsx168(TimelineFieldRowContent, {
       field,
       rowDepth,
       selected: selection.selected || containsSelection,
@@ -35874,7 +36552,7 @@ var KeyframeInspector = ({ selection }) => {
       /* @__PURE__ */ jsx169(InspectorBackAction, {
         disabled: parentSelection === null,
         onClick: onSelectParent,
-        title: "Back to property",
+        "aria-label": "Back to property",
         children: details.fieldLabel
       }),
       /* @__PURE__ */ jsx169(KeyframeEasingNavigator, {
@@ -36002,8 +36680,12 @@ var SnowflakeIcon = ({ color, ...props }) => {
     viewBox: "0 0 640 640",
     ...props,
     children: /* @__PURE__ */ jsx172("path", {
-      fill: color,
-      d: "M344.1 56C344.1 42.7 333.4 32 320.1 32C306.8 32 296.1 42.7 296.1 56L296.1 134.1L273.1 111.1C263.7 101.7 248.5 101.7 239.2 111.1C229.9 120.5 229.8 135.7 239.2 145L296.2 202L296.2 278.5L230 240.3L209.1 162.5C205.7 149.7 192.5 142.1 179.7 145.5C166.9 148.9 159.2 162 162.7 174.8L171.1 206.3L103.5 167.3C92 160.6 77.3 164.5 70.7 176C64.1 187.5 68 202.2 79.5 208.8L147.1 247.8L115.6 256.2C102.8 259.6 95.2 272.8 98.6 285.6C102 298.4 115.2 306 128 302.6L205.8 281.7L272 319.9L205.8 358.1L128 337.2C115.2 333.8 102 341.4 98.6 354.2C95.2 367 102.8 380.2 115.6 383.6L147.1 392L79.5 431C68 437.8 64.1 452.5 70.7 464C77.3 475.5 92 479.4 103.5 472.8L171.1 433.8L162.7 465.3C159.3 478.1 166.9 491.3 179.7 494.7C192.5 498.1 205.7 490.5 209.1 477.7L230 399.9L296.2 361.7L296.2 438.2L239.2 495.2C229.8 504.6 229.8 519.8 239.2 529.1C248.6 538.4 263.8 538.5 273.1 529.1L296.1 506.1L296.1 584.2C296.1 597.5 306.8 608.2 320.1 608.2C333.4 608.2 344.1 597.5 344.1 584.2L344.1 506.1L367.1 529.1C376.5 538.5 391.7 538.5 401 529.1C410.3 519.7 410.4 504.5 401 495.2L344 438.2L344 361.7L410.2 399.9L431.1 477.7C434.5 490.5 447.7 498.1 460.5 494.7C473.3 491.3 480.9 478.1 477.5 465.3L469.1 433.8L536.7 472.8C548.2 479.4 562.9 475.5 569.5 464C576.1 452.5 572.2 437.8 560.7 431.2L493.1 392.2L524.6 383.8C537.4 380.4 545 367.2 541.6 354.4C538.2 341.6 525 334 512.2 337.4L434.4 358.3L368.2 320.1L434.4 281.9L512.2 302.8C525 306.2 538.2 298.6 541.6 285.8C545 273 537.4 259.8 524.6 256.4L493.1 248L560.7 209C572.2 202.4 576.1 187.7 569.5 176.2C562.9 164.7 548.2 160.8 536.7 167.4L469.1 206.4L477.5 174.9C480.9 162.1 473.3 148.9 460.5 145.5C447.7 142.1 434.5 149.7 431.1 162.5L410.2 240.3L344 278.5L344 202L401 145C410.4 135.6 410.4 120.4 401 111.1C391.6 101.8 376.4 101.7 367.1 111.1L344.1 134.1L344.1 56z"
+      d: "M320 80V560M112 200L528 440M112 440L528 200M272 112L320 160L368 112M272 528L320 480L368 528M181 184L181 240L128 264M459 184L459 240L512 264M181 456L181 400L128 376M459 456L459 400L512 376",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 28,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 };
@@ -36407,7 +37089,7 @@ var CaptionTextEditor = ({ captions, onChange, onSave, onCancel, readOnly }) =>
                   focusable: "false",
                   style: { height: 16, width: 16 }
                 }),
-                title: pageBreakTitle,
+                "aria-label": pageBreakTitle,
                 variant: null
               })
             ]
@@ -36580,6 +37262,7 @@ var CaptionInspector = ({
                   }),
                   /* @__PURE__ */ jsx185(InlineAction, {
                     "aria-label": "Import captions",
+                    "aria-description": importTooltip,
                     className: FOCUS_VISIBLE_ONLY_CLASS_NAME,
                     disabled: isImporting,
                     onClick: openCaptionSelection,
@@ -36589,14 +37272,14 @@ var CaptionInspector = ({
                       focusable: "false",
                       style: { height: 14, width: 14 }
                     }),
-                    title: importTooltip,
                     variant: null
                   })
                 ]
               }),
               readOnly ? /* @__PURE__ */ jsx185("div", {
+                role: "group",
                 style: readOnlyStatus,
-                title: readOnlyTitle ?? undefined,
+                "aria-label": readOnlyTitle ?? undefined,
                 children: "Read only"
               }) : null
             ]
@@ -37346,7 +38029,8 @@ var TimelineEffectItem = ({
       style: labelContainerStyle,
       children: [
         /* @__PURE__ */ jsx187("span", {
-          title: label3,
+          role: "group",
+          "aria-label": label3,
           style: labelStyle4,
           children: label3
         }),
@@ -37561,6 +38245,9 @@ var useTimelineSequenceHasExpandableContent = ({
   const { getDragOverrides, getEffectDragOverrides } = useContext69(Internals53.VisualModeDragOverridesContext);
   const selectedRowKeys = useMemo110(() => getSelectedTimelineExpandedRowKeys(selectedItems), [selectedItems]);
   const selectHasExpandableContent = useCallback116((runtimeValues) => {
+    if (nodePathInfo === null) {
+      return false;
+    }
     const tree = buildTimelineTree({
       sequence,
       nodePathInfo,
@@ -37867,7 +38554,7 @@ var InspectorSequenceSection = ({
           fileType: getPreviewFileType(linkInfo.assetPath),
           style: assetSelectorIcon
         }),
-        title: linkInfo.assetPath
+        "aria-label": linkInfo.assetPath
       };
     }
     if (linkInfo?.kind === "remote") {
@@ -37888,7 +38575,7 @@ var InspectorSequenceSection = ({
         }),
         disabled: false,
         onClick: () => openTimelineAssetLink(linkInfo, selectAsset),
-        title: linkInfo.href
+        "aria-label": linkInfo.href
       };
     }
     return null;
@@ -38170,7 +38857,7 @@ var InspectorSequenceSection = ({
     variant: null,
     disabled: borderRadiusConversion === null || previewServerState.type !== "connected",
     onClick: onConvertBorderRadius,
-    title: borderRadiusConversion === null ? borderRadiusUsesShorthand ? "A static border radius is required to use individual corners" : "All four corners must have the same static value" : borderRadiusUsesShorthand ? "Use individual corner radii" : "Use one border radius value",
+    "aria-label": borderRadiusConversion === null ? borderRadiusUsesShorthand ? "A static border radius is required to use individual corners" : "All four corners must have the same static value" : borderRadiusUsesShorthand ? "Use individual corner radii" : "Use one border radius value",
     renderAction: (color) => borderRadiusUsesShorthand ? /* @__PURE__ */ jsx189(FullscreenIcon, {
       color,
       style: borderRadiusToggleIcon
@@ -38183,7 +38870,7 @@ var InspectorSequenceSection = ({
     variant: null,
     disabled: automaticallyEnabled3DTransform,
     onClick: onToggle3DTransform,
-    title: automaticallyEnabled3DTransform ? "3D controls are required by the current transform values" : show3DTransformControls ? "Hide 3D transform controls" : "Show 3D transform controls",
+    "aria-label": automaticallyEnabled3DTransform ? "3D controls are required by the current transform values" : show3DTransformControls ? "Hide 3D transform controls" : "Show 3D transform controls",
     hoveredColor: show3DTransformControls ? BLUE : undefined,
     unhoveredColor: show3DTransformControls ? BLUE : LIGHT_TEXT,
     renderAction: (color) => /* @__PURE__ */ jsx189(CubeIcon, {
@@ -38196,7 +38883,7 @@ var InspectorSequenceSection = ({
       variant: null,
       disabled: !canAddEffect,
       onClick: onAddEffect,
-      title: canAddEffect ? "Add effect" : undefined,
+      "aria-label": canAddEffect ? "Add effect" : undefined,
       renderAction: (color) => /* @__PURE__ */ jsx189(Plus, {
         color,
         style: plusIcon
@@ -40176,10 +40863,10 @@ var verticalSpacer = {
   height: 16,
   margin: "0 8px"
 };
-var AlignmentButton = ({ onClick, title, Icon, disabled }) => {
+var AlignmentButton = ({ onClick, "aria-label": ariaLabel, Icon, disabled }) => {
   return /* @__PURE__ */ jsx196(InlineAction, {
     variant: null,
-    title,
+    "aria-label": ariaLabel,
     onClick,
     renderAction: (color) => /* @__PURE__ */ jsx196(Icon, {
       style: iconStyle,
@@ -40362,19 +41049,19 @@ var AlignmentControls = ({ track }) => {
     style: container19,
     children: [
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align left",
+        "aria-label": "Align left",
         onClick: () => handleAlign("left"),
         Icon: AlignLeftIcon,
         disabled: alignmentDisabled
       }),
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align center horizontally",
+        "aria-label": "Align center horizontally",
         onClick: () => handleAlign("center-h"),
         Icon: AlignCenterHorizontalIcon,
         disabled: alignmentDisabled
       }),
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align right",
+        "aria-label": "Align right",
         onClick: () => handleAlign("right"),
         Icon: AlignRightIcon,
         disabled: alignmentDisabled
@@ -40383,19 +41070,19 @@ var AlignmentControls = ({ track }) => {
         style: verticalSpacer
       }),
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align top",
+        "aria-label": "Align top",
         onClick: () => handleAlign("top"),
         Icon: AlignTopIcon,
         disabled: alignmentDisabled
       }),
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align center vertically",
+        "aria-label": "Align center vertically",
         onClick: () => handleAlign("center-v"),
         Icon: AlignCenterVerticalIcon,
         disabled: alignmentDisabled
       }),
       /* @__PURE__ */ jsx196(AlignmentButton, {
-        title: "Align bottom",
+        "aria-label": "Align bottom",
         onClick: () => handleAlign("bottom"),
         Icon: AlignBottomIcon,
         disabled: alignmentDisabled
@@ -40416,8 +41103,12 @@ var WrapIcon = ({ color, ...props }) => {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 640 640",
     children: /* @__PURE__ */ jsx197("path", {
-      fill: color,
-      d: "M480 128C497.7 128 512 142.3 512 160L512 224C512 241.7 497.7 256 480 256L160 256C142.3 256 128 241.7 128 224L128 160C128 142.3 142.3 128 160 128L480 128zM208 288L480 288C515.3 288 544 259.3 544 224L544 160C544 124.7 515.3 96 480 96L160 96C124.7 96 96 124.7 96 160L96 224C96 259.3 124.7 288 160 288L176 288L176 384C176 428.2 211.8 464 256 464L288 464L288 480C288 515.3 316.7 544 352 544L480 544C515.3 544 544 515.3 544 480L544 416C544 380.7 515.3 352 480 352L352 352C316.7 352 288 380.7 288 416L288 432L256 432C229.5 432 208 410.5 208 384L208 288zM320 432L320 416C320 398.3 334.3 384 352 384L480 384C497.7 384 512 398.3 512 416L512 480C512 497.7 497.7 512 480 512L352 512C334.3 512 320 497.7 320 480L320 432z"
+      d: "M160 112h320c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H160c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48ZM192 272v112c0 35.3 28.7 64 64 64h48M352 368h128c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H352c-26.5 0-48-21.5-48-48v-64c0-26.5 21.5-48 48-48Z",
+      fill: "none",
+      stroke: color,
+      strokeWidth: 28,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     })
   });
 };
@@ -40447,14 +41138,6 @@ var segmentStyle2 = {
   padding: `0 ${INSPECTOR_PANEL_HORIZONTAL_PADDING - 4}px`,
   width: "100%"
 };
-var iconStyle2 = { height: 22, width: 22 };
-var iconContainerStyle = {
-  flexShrink: 0,
-  height: 22,
-  marginLeft: -2,
-  marginRight: -2,
-  width: 22
-};
 var labelStyle4 = {
   flex: 1,
   fontFamily: "sans-serif",
@@ -40540,7 +41223,7 @@ var SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =>
   })), [busy, eligibility, onWrap]);
   const segments = useMemo113(() => [
     {
-      ariaLabel: "Wrap",
+      ariaLabel: nodePathInfo.numberOfSequencesWithThisNodePath > 1 ? `Wrap all ${nodePathInfo.numberOfSequencesWithThisNodePath} instances of this JSX element` : "Wrap this JSX element",
       buttonId: null,
       disabled: busy,
       idleColor: LIGHT_TEXT,
@@ -40549,10 +41232,10 @@ var SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =>
       renderContent: (color) => /* @__PURE__ */ jsxs91(Fragment32, {
         children: [
           /* @__PURE__ */ jsx198("span", {
-            style: iconContainerStyle,
+            style: largeInspectorActionIconContainerStyle,
             children: /* @__PURE__ */ jsx198(WrapIcon, {
               color,
-              style: iconStyle2
+              style: largeInspectorActionIconStyle
             })
           }),
           /* @__PURE__ */ jsx198("span", {
@@ -40570,7 +41253,6 @@ var SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =>
       segmentId: "wrap",
       selectedId: null,
       style: segmentStyle2,
-      title: nodePathInfo.numberOfSequencesWithThisNodePath > 1 ? `Wrap all ${nodePathInfo.numberOfSequencesWithThisNodePath} instances of this JSX element` : "Wrap this JSX element",
       tooltipLabel: null,
       type: "menu",
       values
@@ -40581,23 +41263,12 @@ var SequenceWrapAction = ({ nodePathInfo, sequence, sourceActionsDisabled }) =>
   }
   return /* @__PURE__ */ jsx198(SegmentedButton, {
     segments,
-    style: buttonStyle2,
-    title: null
+    style: buttonStyle2
   });
 };
 
 // src/components/InspectorPanel/SequenceSelectionInspector.tsx
 import { jsx as jsx199, jsxs as jsxs92, Fragment as Fragment33 } from "react/jsx-runtime";
-var actionIconStyle3 = {
-  display: "block",
-  height: 16,
-  width: 16
-};
-var largeActionIconStyle = {
-  ...actionIconStyle3,
-  height: 20,
-  width: 20
-};
 var SplitSequenceQuickAction = ({ selection, track }) => {
   const timelinePosition = Internals58.Timeline.useTimelinePosition();
   const { propStatuses } = useContext72(Internals58.VisualModePropStatusesContext);
@@ -40623,10 +41294,11 @@ var SplitSequenceQuickAction = ({ selection, track }) => {
   const disabledReason = !isStudioInteractivityEnabled() ? "Studio is read-only" : sequencePropStatuses === undefined ? "Waiting for sequence prop status" : eligibility.canSplit ? undefined : eligibility.reason;
   return /* @__PURE__ */ jsx199(InspectorQuickAction, {
     disabled: !canSplit,
+    iconContainerStyle: largeInspectorActionIconContainerStyle,
     onClick: onSplit,
-    title: disabledReason,
-    renderIcon: (color) => /* @__PURE__ */ jsx199(ScissorsIcon, {
-      style: actionIconStyle3,
+    "aria-label": disabledReason,
+    renderIcon: (color) => /* @__PURE__ */ jsx199(SplitIcon, {
+      style: largeInspectorActionIconStyle,
       color
     }),
     children: "Split clip"
@@ -40734,49 +41406,60 @@ var SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
     children: [
       freezeFrameMenuItem?.type === "item" ? /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: Boolean(freezeFrameMenuItem.disabled),
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: () => freezeFrameMenuItem.onClick(freezeFrameMenuItem.id, null),
         renderIcon: (color) => /* @__PURE__ */ jsx199(SnowflakeIcon, {
-          style: largeActionIconStyle,
+          style: largeInspectorActionIconStyle,
           color
         }),
         children: freezeFrameMenuItem.label
       }) : null,
       track.sequence.type === "video" ? /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: videoMattingDisabledReason !== undefined,
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: onRemoveBackground,
-        title: videoMattingDisabledReason,
+        "aria-label": videoMattingDisabledReason,
         renderIcon: (color) => /* @__PURE__ */ jsx199(BackgroundRemovalIcon, {
-          style: actionIconStyle3,
-          color
+          style: largeInspectorActionIconStyle,
+          color,
+          viewBox: "-32 -32 704 704"
         }),
         children: "Remove background"
       }) : null,
       track.sequence.type === "video" ? /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: splitVideoFromAudioDisabledReason !== undefined,
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: onSplitVideoFromAudio,
-        title: splitVideoFromAudioDisabledReason,
+        "aria-label": splitVideoFromAudioDisabledReason,
         renderIcon: (color) => /* @__PURE__ */ jsx199(AudioIcon, {
-          style: actionIconStyle3,
-          color
+          style: largeInspectorActionIconStyle,
+          color,
+          viewBox: "-96 -64 704 640",
+          preserveAspectRatio: "none"
         }),
         children: "Split video from audio"
       }) : null,
       mediaSequence !== null && mediaMetadata?.hasAudioTrack !== false ? /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: transcriptionDisabledReason !== undefined,
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: onGenerateCaptions,
-        title: transcriptionDisabledReason,
+        "aria-label": transcriptionDisabledReason,
         renderIcon: (color) => /* @__PURE__ */ jsx199(TranscriptionIcon, {
-          style: actionIconStyle3,
-          color
+          style: largeInspectorActionIconStyle,
+          color,
+          viewBox: "-96 -16 704 544",
+          preserveAspectRatio: "none"
         }),
         children: "Generate captions"
       }) : null,
       /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: sourceActionsDisabled,
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: onDuplicate,
         renderIcon: (color) => /* @__PURE__ */ jsx199(DuplicateIcon, {
-          style: largeActionIconStyle,
-          color
+          style: largeInspectorActionIconStyle,
+          color,
+          viewBox: "-32 -32 704 704"
         }),
         children: "Duplicate"
       }),
@@ -40787,10 +41470,12 @@ var SequenceSourceQuickActions = ({ selection, track, validatedSource }) => {
       }),
       /* @__PURE__ */ jsx199(InspectorQuickAction, {
         disabled: sourceActionsDisabled,
+        iconContainerStyle: largeInspectorActionIconContainerStyle,
         onClick: onDelete,
         renderIcon: (color) => /* @__PURE__ */ jsx199(TrashIcon, {
-          style: actionIconStyle3,
-          color
+          style: largeInspectorActionIconStyle,
+          color,
+          viewBox: "-120 -96 688 688"
         }),
         children: "Delete"
       })
@@ -41103,7 +41788,7 @@ var QueueJobError = ({ error, modalTitle }) => {
     onClick,
     type: "button",
     style: errorStyle,
-    title: error.message,
+    "aria-label": error.message,
     children: error.message
   });
 };
@@ -41435,13 +42120,13 @@ var RenderQueueRepeatItem = ({ job }) => {
 
 // src/components/RenderQueue/SuccessIcon.tsx
 import { jsx as jsx208 } from "react/jsx-runtime";
-var iconStyle3 = {
+var iconStyle2 = {
   height: RENDER_STATUS_INDICATOR_SIZE,
   width: RENDER_STATUS_INDICATOR_SIZE
 };
 var SuccessIcon = () => {
   return /* @__PURE__ */ jsx208("svg", {
-    style: iconStyle3,
+    style: iconStyle2,
     viewBox: "0 0 512 512",
     children: /* @__PURE__ */ jsx208("path", {
       fill: LIGHT_TEXT,
@@ -41625,8 +42310,9 @@ var CaptionQueueItem = ({ job, selected }) => {
               error: job.error,
               modalTitle: "Transcription failed"
             }) : /* @__PURE__ */ jsx209("span", {
+              role: "group",
               style: subtitle2,
-              title: message,
+              "aria-label": message,
               children: message
             })
           })
@@ -41951,7 +42637,7 @@ var RenderQueueError = ({ job }) => {
     type: "button",
     style: outputLocation,
     tabIndex,
-    title: job.error.message,
+    "aria-label": job.error.message,
     children: job.error.message
   });
 };
@@ -41959,7 +42645,7 @@ var RenderQueueError = ({ job }) => {
 // src/components/RenderQueue/RenderQueueItemStatus.tsx
 import React130, { useCallback as useCallback129, useContext as useContext79 } from "react";
 import { jsx as jsx213 } from "react/jsx-runtime";
-var iconStyle4 = {
+var iconStyle3 = {
   height: RENDER_STATUS_INDICATOR_SIZE,
   width: RENDER_STATUS_INDICATOR_SIZE
 };
@@ -41993,7 +42679,7 @@ var RenderQueueItemStatus = ({ job }) => {
       style: invisibleStyle,
       onClick,
       children: /* @__PURE__ */ jsx213("svg", {
-        style: iconStyle4,
+        style: iconStyle3,
         viewBox: "0 0 512 512",
         children: /* @__PURE__ */ jsx213("path", {
           fill: FAIL_COLOR,
@@ -42004,7 +42690,7 @@ var RenderQueueItemStatus = ({ job }) => {
   }
   if (job.status === "idle") {
     return /* @__PURE__ */ jsx213("svg", {
-      style: iconStyle4,
+      style: iconStyle3,
       viewBox: "0 0 512 512",
       children: /* @__PURE__ */ jsx213("path", {
         fill: LIGHT_TEXT,
@@ -42020,7 +42706,7 @@ var RenderQueueItemStatus = ({ job }) => {
       onPointerLeave,
       onClick,
       children: /* @__PURE__ */ jsx213("svg", {
-        style: iconStyle4,
+        style: iconStyle3,
         viewBox: "0 0 512 512",
         children: /* @__PURE__ */ jsx213("path", {
           fill: hovered ? WHITE : LIGHT_TEXT,
@@ -42057,7 +42743,7 @@ var RenderQueueItemStatus = ({ job }) => {
   }
   if (job.status === "cancelled") {
     return /* @__PURE__ */ jsx213("svg", {
-      style: iconStyle4,
+      style: iconStyle3,
       viewBox: "0 0 512 512",
       children: /* @__PURE__ */ jsx213("path", {
         fill: FAIL_COLOR,
@@ -42125,8 +42811,9 @@ var RenderQueueOutputName = ({ job }) => {
     return job.outName;
   };
   return /* @__PURE__ */ jsx215("span", {
+    role: "group",
     style: style4,
-    title: getTitle(),
+    "aria-label": getTitle(),
     children: job.outName
   });
 };
@@ -42184,7 +42871,7 @@ var RenderQueueProgressMessage = ({ job }) => {
     type: "button",
     style: outputLocation2,
     tabIndex,
-    title: message,
+    "aria-label": message,
     children: message
   });
 };
@@ -46147,8 +46834,9 @@ var VideoMattingQueueItem = ({ job, selected }) => {
             children: job.displayName
           }),
           /* @__PURE__ */ jsx221("div", {
+            role: "group",
             style: subtitles,
-            title: tooltip,
+            "aria-label": tooltip,
             children: job.status === "cancelled" ? /* @__PURE__ */ jsx221(RenderQueueCancelledMessage, {}) : job.status === "failed" ? /* @__PURE__ */ jsx221(QueueJobError, {
               error: job.error,
               modalTitle: "Background removal failed"
@@ -46739,4 +47427,4 @@ var RenderModalHr = () => {
   });
 };
 
-export { subscribeToPreviewServerEvents, getNavigationWindow, pushUrl, clearUrl, reloadUrl, getRoute, StudioServerConnectionCtx, PreviewServerConnection, useStudioConfigRevision, noop, compositionListRenderedRef, CompositionListContext, CompositionListProvider, ScaleLockContext, ScaleLockProvider, getCurrentZoom, setCurrentZoom, getCurrentFrame, setCurrentFrame, getCurrentDuration, setCurrentDuration, getCurrentFps, setCurrentFps, sliderAreaRef, scrollableRef, timelineVerticalScroll, TIMELINE_PADDING, TIMELINE_BORDER, TIMELINE_ITEM_BORDER_BOTTOM, buildTimelineTree, flattenVisibleTreeNodes, getTreeRowHeight, TIMELINE_LAYER_FILMSTRIP_HEIGHT, TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, TIMELINE_LAYER_HEIGHT_AUDIO, TIMELINE_LIST_ITEM_ROW_HEIGHT, getTimelineLayerHeight, getXPositionOfItemInTimelineImperatively, TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, getTimelineMinZoom, clampTimelineZoom, getTimelineZoom, getTimelineWidth, timelineZoomToNormalized, timelineZoomToSliderValue, normalizedToTimelineZoom, sliderValueToTimelineZoom, TIMELINE_ZOOM_SLIDER_PROPS, TimelineWidthContext, TimelineWidthProvider, redrawTimelineSliderFast, TimelineSlider, getTimelineContentWidth, EDGE_SCROLL_VERTICAL_INCREMENT, startTimelineEdgeAutoScroll, getFrameWhileScrollingLeft, isCursorInViewport, ensureFrameIsInViewport, scrollToTimelineXOffset, getScrollPositionForCursorOnLeftEdge, getScrollPositionForCursorOnRightEdge, getFrameIncrementFromWidth, getFrameWhileScrollingRight, getFrameFromX, getFrameFromTimelineDrop, viewportClientXToScrollContentX, TimelineViewportContext, TimelineViewportProvider, deriveCanvasContentFromUrl, ZoomPersistor, TimelineZoomCtx, TimelineZoomContext, SelectedModalContext, SetSelectedModalContext, StudioProtocolInternals, Transform3DModeStateContext, Transform3DModeStateProvider, calculateTimeline, getPreviewFileType, copyText, timelineSequenceNodePathToKey, timelineNodePathInfoToKey, persistEditorShowGuidesOption, loadEditorShowGuidesOption, persistGuidesList, loadGuidesList, EditorShowGuidesContext, ModalHeader, toggleBooleanMapKey, openFolderKey, persistExpandedFolders, ExpandedFoldersContext, buildAssetFolderStructure, splitParentIntoNameAndParent, getKeysToExpand, createFolderTree, sortFolderTreeAlphabetically, FolderContext, FolderContextProvider, CollapsedFolderIcon, ExpandedFolderIcon, ExpandedFolderIconSolid, getRelativeFileLocation, formatFileLocation, formatContextForAgents, getGitSourceName, getDefaultOpenInTarget, openGitSource, getGitMenuItem, getOriginalPosition, getSourceMap, resolveFileSource, parseError, getOriginalLocationFromStack, openInEditor, openInCodingAgent, openOriginalPositionInEditor, findOriginalPositionInFileAtProperty, useCachedCompositionComponentInfo, preloadCompositionComponentInfo, getFileManagerName, ClipboardIcon, getConfigureDefaultAppsMenuItems, getOpenInMenuItems, getCompositionMenuItems, getCompositionContextMenuItems, EllipsisIcon, useMobileLayout, MenuDivider, CaretDown, MenuContent, InlineDropdown, isCompositionStill, StillIcon, FilmIcon, CompositionOrStillIcon, ContextMenu, ContextMenuForTarget, hasResolvedStack, useResolvedStack, canShowUpdates, useUpdateStatus, SettingsProvider, useSettings, getPreferredEditorId, useEditorOpening, useDefaultCodingAgentInfo, useConfigureDefaultApps, useOpenInMenuApps, explorerSidebarTabs, useSelectAsset, StaticFilesProvider, useStaticFiles, useSelectComposition, InitialCompositionLoader, Checkmark, ExpandedTracksGetterContext, ExpandedTracksSetterContext, ExpandedTracksProvider, optionsSidebarTabs, getKeyframeSourceFrame, resolveKeyframeSourceFrame, getKeyframeDisplayOffset, getNodeKeyframes, getNodeHasKeyframes, getTimelineEasingSegments, parseKeyframeFieldFromNodePath, filterTimelineExpandedTree, getSelectedTimelineExpandedRowKeys, isTimelineExpandedNodeSelected, getClipboardFigmaHtml, getClipboardImageFiles, getClipboardSvgMarkup, ShortcutHint, Button, ModalButton, ModalFooterContainer, useConfirmationDialog, ConfirmationDialog, addEffect, callAddKeyframes, callAddEffectKeyframe, findTrackForNodePathInfo, saveEffectProp, subscribeToSequenceProps, unsubscribeFromSequenceProps, saveSequenceProps2 as saveSequenceProps, OverrideIdToNodePathMappingsRefContext, SequencePropsSubscriptionProvider, duplicateSequencesFromSource, getTimelineSequenceSplitEligibility, splitTimelineSequenceFromSource, splitSelectedTimelineItems, useDeleteTimelineItems, TIMELINE_SELECTED_BACKGROUND, TIMELINE_EXPANDED_SELECTED_BACKGROUND, TIMELINE_SELECTED_LABEL_BACKGROUND, getTimelineSelectedLabelStyle, getTimelineColor, getTimelineSelectedTrackHighlightStyle, TIMELINE_BACKGROUND, TIMELINE_TICKS_BACKGROUND, isTimelineSelectionModifierEvent, shouldSelectTimelineRowOnPointerDown, getTimelineSelectionFromNodePathInfo, getTimelineSequenceSelectionKey, TimelineSelectAllKeybindings, TimelineSelectableItemsProvider, TimelineSelectionProvider, useTimelineSelection, TIMELINE_MARQUEE_ITEM_ATTR, TIMELINE_SCRUBBER_ATTR, useCurrentTimelineSelectionStateAsRef, useTimelineMarqueeSelection, useTimelineMarqueeSelectableItem, useTimelineRowSelection, useTimelineKeyframeSelection, useTimelineGuideSelection, useTimelineRowContainsSelection, useTimelineRowHighlightBackground, SegmentedButton, SidebarContext, SidebarContextProvider, InspectorOpenInEditor, GearIcon, useBreakpoint, addAssetCacheBust, getCachedMediaMetadata, useMediaMetadata, remotion_outputsBase, getAssetPreviewMetadata, getAssetMetadata, prepareElementInstall, getFromForDrop, getAssetElementFromPath, hasSvgFile, getElementPositionForDrop, getCompositionPositionForDrop, pickFilesToImport, importAssets, importFigmaClipboard, insertSvgMarkup, importRemoteAsset, insertRemoteAudio, insertExistingAssets, insertComponent, insertComposition, insertElement, forceSpecificCursor, stopForcingSpecificCursor, ForceSpecificCursor, AudioIcon, AudioFileIcon, RightAlignInput, RemotionInput, RemTextarea, useRuntimeValue, useRuntimeValueSelector, useRuntimeValueSnapshots, cropFieldKeys, canEditSelectedOutlineCrop, translateFieldKey, scaleFieldKey, rotateFieldKey, transformOriginFieldKey, getUvHandlePosition, getUvCoordinateForPoint, tuplesEqual2 as tuplesEqual, getUvHandleConnectionLines, getUvHandleConnectionEllipses, getUvEllipseInteractiveControls, constrainUv, roundUvCoordinate, roundNumericUvEllipseValue, getSelectedUvHandles, parseTransformOrigin, parsedTransformOriginToUv, serializeTransformOrigin, getOutlineSelectionInteraction, getSelectedSequenceKeys, getSequenceKeysContainingSelection, measureOutlineTargets, midpoint, dot, vectorLength, vectorBetween, getAngleDegrees, getSelectedOutlineRotationDeltaDegrees, getRotationCursor, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationPivot, getSelectedEffectFieldsBySequenceKey, getSelectedCropInfo, getSelectedTransformOriginInfo, getSelectedRotationInfo, getSequencesWithSelectableOutlines, parseCssRotation, parseTranslate, serializeTranslate, InputDragger, TimelineLayerEye, TimelineLayerEyeSpacer, getSelectedOutlineActiveSchema, getSelectedOutlineDragStates, getSelectedOutlineDragValues, applySelectedOutlineDragAxisLock, isSelectedOutlineDragPastThreshold, getSelectedOutlineDragChanges, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineCropDragValues, getSelectedOutlineCropDragChanges, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutline3DRotationDragValues, getSelectedOutlineRotationDragValues, selectedOutlineRotationSnapStepDegrees, snapSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationDragChanges, clearSelectedOutlineDragOverrides, getSelectedOutlineKeyboardNudgeDirection, clearSelectedOutlineScaleDragOverrides, clearSelectedOutlineRotationDragOverrides, compensateTranslateForTransformOrigin, getSelectedOutlineTransformOriginDragChanges, uvsEqual, getSelectedOutlineTransformOriginLockedAxis, applySelectedOutlineTransformOriginAxisLock, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, commitPendingInspectorFields, getConnectedCompositions, createDragAwareDoubleClickTracker, getCopyContextForAgentsMenuItem, getTimelineAssetLinkInfo, openTimelineAssetLink, parsePath, serializeInstructions, normalizePath, propStatusHas3DTransformValue, getCachedImageMetadata, getAssetActionAvailability, useAssetContextMenuItems, FileIcon, PicIcon, AssetFileIcon, Tabs, Tab, ObserveDefaultProps, TranscriptionIcon, sectionHeader2 as sectionHeader, InspectorQuickAction, getStaticFileBaseName, getStaticFileRenameSelection, getRenamedStaticFilePath, validateStaticFileRename, useRenameStaticFile, downloadBlob, SegmentedControl, Combobox, InfoBubble, InlineRemoveButton, optionRow, label2 as label, rightRow, input, Checkbox, DataEditor, LicenseExplanation, FastRefreshContext, resolvedStackToSymbolicated, slugifyName, validateCompositionName, validateCompositionDimension, validateCompositionDuration, useRenameComposition, useCopyFeedback, CopyIcon, BrowseElementsIcon, TimelineExpandArrowButton, TimelineExpandArrowSpacer, TimelineRowSelectedBackgroundContext, TimelineRowChrome, renderFrame, TimelineKeyframeDiamondIcon, TimelineKeyframeDragStateProvider, useTimelineKeyframeDragState, useTimelineKeyframeDrag, TimelineKeyframeEasingLine, useResolveStackAndReactToChange, useOpenSequenceInApps, useRenameSequence, TimelineKeyframeTracksProvider, getKeyframedSequenceDragTargets, SnowflakeIcon, FullscreenIcon, UploadIcon, TimelineExpandedRow, useTimelineSequenceHasExpandableContent, useTimelineExpandedTree, getDefaultOutputBaseName, validatePublicOutputName, getSequenceFreezeFrameMenuItem, CircularProgress, makeRetryPayload, makeClientRetryPayload, SuccessIcon, isRestoredClientJob, RenderQueueOpenInFinderItem, getClientRenderProgressMessage, saveOutputFile, registerClientRender, persistSelectedOptionsSidebarPanel, OptionsPanel, DismissableModal, VerticalTab, RenderModalHr };
+export { parsePath, serializeInstructions, normalizePath, interpolatePaths, subscribeToPreviewServerEvents, getNavigationWindow, pushUrl, clearUrl, reloadUrl, getRoute, StudioServerConnectionCtx, PreviewServerConnection, useStudioConfigRevision, noop, compositionListRenderedRef, CompositionListContext, CompositionListProvider, ScaleLockContext, ScaleLockProvider, getCurrentZoom, setCurrentZoom, getCurrentFrame, setCurrentFrame, getCurrentDuration, setCurrentDuration, getCurrentFps, setCurrentFps, sliderAreaRef, scrollableRef, timelineVerticalScroll, TIMELINE_PADDING, TIMELINE_BORDER, TIMELINE_ITEM_BORDER_BOTTOM, buildTimelineTree, flattenVisibleTreeNodes, getTreeRowHeight, TIMELINE_LAYER_FILMSTRIP_HEIGHT, TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, TIMELINE_LAYER_HEIGHT_AUDIO, TIMELINE_LIST_ITEM_ROW_HEIGHT, getTimelineLayerHeight, getXPositionOfItemInTimelineImperatively, TIMELINE_FRAME_WIDTH_AT_MAX_ZOOM, getTimelineMinZoom, clampTimelineZoom, getTimelineZoom, getTimelineWidth, timelineZoomToNormalized, timelineZoomToSliderValue, normalizedToTimelineZoom, sliderValueToTimelineZoom, TIMELINE_ZOOM_SLIDER_PROPS, TimelineWidthContext, TimelineWidthProvider, redrawTimelineSliderFast, TimelineSlider, getTimelineContentWidth, EDGE_SCROLL_VERTICAL_INCREMENT, startTimelineEdgeAutoScroll, getFrameWhileScrollingLeft, isCursorInViewport, ensureFrameIsInViewport, scrollToTimelineXOffset, getScrollPositionForCursorOnLeftEdge, getScrollPositionForCursorOnRightEdge, getFrameIncrementFromWidth, getFrameWhileScrollingRight, getFrameFromX, getFrameFromTimelineDrop, viewportClientXToScrollContentX, TimelineViewportContext, TimelineViewportProvider, deriveCanvasContentFromUrl, ZoomPersistor, TimelineZoomCtx, TimelineZoomContext, SelectedModalContext, SetSelectedModalContext, StudioProtocolInternals, Transform3DModeStateContext, Transform3DModeStateProvider, calculateTimeline, getPreviewFileType, copyText, timelineSequenceNodePathToKey, timelineNodePathInfoToKey, persistEditorShowGuidesOption, loadEditorShowGuidesOption, persistGuidesList, loadGuidesList, EditorShowGuidesContext, ModalHeader, toggleBooleanMapKey, openFolderKey, persistExpandedFolders, ExpandedFoldersContext, buildAssetFolderStructure, splitParentIntoNameAndParent, getKeysToExpand, createFolderTree, sortFolderTreeAlphabetically, FolderContext, FolderContextProvider, CollapsedFolderIcon, ExpandedFolderIcon, ExpandedFolderIconSolid, getRelativeFileLocation, formatFileLocation, formatContextForAgents, getGitSourceName, getDefaultOpenInTarget, openGitSource, getGitMenuItem, getOriginalPosition, getSourceMap, resolveFileSource, parseError, getOriginalLocationFromStack, openInEditor, openInCodingAgent, openOriginalPositionInEditor, findOriginalPositionInFileAtProperty, useCachedCompositionComponentInfo, preloadCompositionComponentInfo, getFileManagerName, ClipboardIcon, getConfigureDefaultAppsMenuItems, getOpenInMenuItems, getCompositionMenuItems, getCompositionContextMenuItems, EllipsisIcon, useMobileLayout, MenuDivider, CaretDown, MenuContent, InlineDropdown, isCompositionStill, StillIcon, FilmIcon, CompositionOrStillIcon, ContextMenu, ContextMenuForTarget, hasResolvedStack, useResolvedStack, canShowUpdates, useUpdateStatus, SettingsProvider, useSettings, getPreferredEditorId, useEditorOpening, useDefaultCodingAgentInfo, useConfigureDefaultApps, useOpenInMenuApps, explorerSidebarTabs, useSelectAsset, StaticFilesProvider, useStaticFiles, useSelectComposition, InitialCompositionLoader, Checkmark, ExpandedTracksGetterContext, ExpandedTracksSetterContext, ExpandedTracksProvider, optionsSidebarTabs, getKeyframeSourceFrame, resolveKeyframeSourceFrame, getKeyframeDisplayOffset, getNodeKeyframes, getNodeHasKeyframes, getTimelineEasingSegments, parseKeyframeFieldFromNodePath, filterTimelineExpandedTree, getSelectedTimelineExpandedRowKeys, isTimelineExpandedNodeSelected, getClipboardFigmaHtml, getClipboardImageFiles, getClipboardSvgMarkup, ShortcutHint, Button, ModalButton, ModalFooterContainer, useConfirmationDialog, ConfirmationDialog, addEffect, callAddSequenceKeyframe, callAddKeyframes, callAddEffectKeyframe, findTrackForNodePathInfo, saveEffectProp, subscribeToSequenceProps, unsubscribeFromSequenceProps, saveSequenceProps2 as saveSequenceProps, OverrideIdToNodePathMappingsRefContext, SequencePropsSubscriptionProvider, duplicateSequencesFromSource, getTimelineSequenceSplitEligibility, splitTimelineSequenceFromSource, splitSelectedTimelineItems, useDeleteTimelineItems, TIMELINE_SELECTED_BACKGROUND, TIMELINE_EXPANDED_SELECTED_BACKGROUND, TIMELINE_SELECTED_LABEL_BACKGROUND, getTimelineSelectedLabelStyle, getTimelineColor, getTimelineSelectedTrackHighlightStyle, TIMELINE_BACKGROUND, TIMELINE_TICKS_BACKGROUND, isTimelineSelectionModifierEvent, shouldSelectTimelineRowOnPointerDown, getTimelineSelectionFromNodePathInfo, getTimelineSequenceSelectionKey, TimelineSelectAllKeybindings, TimelineSelectableItemsProvider, TimelineSelectionProvider, useTimelineSelection, TIMELINE_MARQUEE_ITEM_ATTR, TIMELINE_SCRUBBER_ATTR, useCurrentTimelineSelectionStateAsRef, useTimelineMarqueeSelection, useTimelineMarqueeSelectableItem, useTimelineRowSelection, useTimelineKeyframeSelection, useTimelineGuideSelection, useTimelineRowContainsSelection, useTimelineRowHighlightBackground, SegmentedButton, SidebarContext, SidebarContextProvider, InspectorOpenInEditor, GearIcon, useBreakpoint, addAssetCacheBust, getCachedMediaMetadata, useMediaMetadata, remotion_outputsBase, getAssetPreviewMetadata, getAssetMetadata, prepareElementInstall, getFromForDrop, getAssetElementFromPath, hasSvgFile, getElementPositionForDrop, getCompositionPositionForDrop, pickFilesToImport, importAssets, importFigmaClipboard, insertSvgMarkup, importRemoteAsset, insertRemoteAudio, insertExistingAssets, insertComponent, insertComposition, insertElement, forceSpecificCursor, stopForcingSpecificCursor, ForceSpecificCursor, AudioIcon, AudioFileIcon, RightAlignInput, RemotionInput, RemTextarea, useRuntimeValue, useRuntimeValueSelector, useRuntimeValueSnapshots, cropFieldKeys, canEditSelectedOutlineCrop, translateFieldKey, scaleFieldKey, rotateFieldKey, transformOriginFieldKey, getUvHandlePosition, getUvCoordinateForPoint, tuplesEqual2 as tuplesEqual, getUvHandleConnectionLines, getUvHandleConnectionEllipses, getUvEllipseInteractiveControls, constrainUv, roundUvCoordinate, roundNumericUvEllipseValue, getSelectedUvHandles, parseTransformOrigin, parsedTransformOriginToUv, serializeTransformOrigin, getOutlineSelectionInteraction, getSelectedSequenceKeys, getSequenceKeysContainingSelection, measureOutlineTargets, midpoint, dot, vectorLength, vectorBetween, getAngleDegrees, getSelectedOutlineRotationDeltaDegrees, getRotationCursor, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationPivot, getSelectedEffectFieldsBySequenceKey, getSelectedCropInfo, getSelectedTransformOriginInfo, getSelectedRotationInfo, getSequencesWithSelectableOutlines, parseCssRotation, parseTranslate, serializeTranslate, InputDragger, TimelineLayerEye, TimelineLayerEyeSpacer, getSelectedOutlineActiveSchema, getSelectedOutlineDragStates, getSelectedOutlineDragValues, applySelectedOutlineDragAxisLock, isSelectedOutlineDragPastThreshold, getSelectedOutlineDragChanges, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineCropDragValues, getSelectedOutlineCropDragChanges, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutline3DRotationDragValues, getSelectedOutlineRotationDragValues, selectedOutlineRotationSnapStepDegrees, snapSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationDragChanges, clearSelectedOutlineDragOverrides, getSelectedOutlineKeyboardNudgeDirection, clearSelectedOutlineScaleDragOverrides, clearSelectedOutlineRotationDragOverrides, compensateTranslateForTransformOrigin, getSelectedOutlineTransformOriginDragChanges, uvsEqual, getSelectedOutlineTransformOriginLockedAxis, applySelectedOutlineTransformOriginAxisLock, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, commitPendingInspectorFields, getConnectedCompositions, createDragAwareDoubleClickTracker, getCopyContextForAgentsMenuItem, getTimelineAssetLinkInfo, openTimelineAssetLink, propStatusHas3DTransformValue, getCachedImageMetadata, getAssetActionAvailability, useAssetContextMenuItems, FileIcon, PicIcon, AssetFileIcon, Tabs, Tab, ObserveDefaultProps, TranscriptionIcon, sectionHeader2 as sectionHeader, InspectorQuickAction, getStaticFileBaseName, getStaticFileRenameSelection, getRenamedStaticFilePath, validateStaticFileRename, useRenameStaticFile, downloadBlob, SegmentedControl, Combobox, InfoBubble, InlineRemoveButton, optionRow, label2 as label, rightRow, input, Checkbox, DataEditor, LicenseExplanation, FastRefreshContext, resolvedStackToSymbolicated, slugifyName, validateCompositionName, validateCompositionDimension, validateCompositionDuration, useRenameComposition, useCopyFeedback, CopyIcon, BrowseElementsIcon, TimelineExpandArrowButton, TimelineExpandArrowSpacer, TimelineRowSelectedBackgroundContext, TimelineRowChrome, renderFrame, TimelineKeyframeDiamondIcon, TimelineKeyframeDragStateProvider, useTimelineKeyframeDragState, useTimelineKeyframeDrag, TimelineKeyframeEasingLine, useResolveStackAndReactToChange, useOpenSequenceInApps, useRenameSequence, TimelineKeyframeTracksProvider, getKeyframedSequenceDragTargets, SnowflakeIcon, FullscreenIcon, UploadIcon, TimelineExpandedRow, useTimelineSequenceHasExpandableContent, useTimelineExpandedTree, getDefaultOutputBaseName, validatePublicOutputName, getSequenceFreezeFrameMenuItem, CircularProgress, makeRetryPayload, makeClientRetryPayload, SuccessIcon, isRestoredClientJob, RenderQueueOpenInFinderItem, getClientRenderProgressMessage, saveOutputFile, registerClientRender, persistSelectedOptionsSidebarPanel, OptionsPanel, DismissableModal, VerticalTab, RenderModalHr };