@remotion/studio 4.0.485 → 4.0.487

package/dist/components/GlobalKeybindings.js

@@ -9,6 +9,7 @@ const show_browser_rendering_1 = require("../helpers/show-browser-rendering");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
+const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
@@ -25,6 +26,7 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
+    const { setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
@@ -106,17 +108,6 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
                 event.preventDefault();
             }
         };
-        const nKey = keybindings.registerKeybinding({
-            event: 'keypress',
-            key: 'n',
-            callback: () => {
-                (0, NotificationCenter_1.showNotification)(`To make a new composition, right-click an existing one and select "Duplicate"`, 5000);
-            },
-            commandCtrlKey: false,
-            preventDefault: true,
-            triggerIfInputFieldFocused: false,
-            keepRegisteredWhenNotHighestContext: false,
-        });
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'k',
@@ -199,8 +190,22 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const shiftMKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'm',
+            callback: (event) => {
+                if (!event.shiftKey) {
+                    return;
+                }
+                setEditorSnapping((current) => !current);
+                event.preventDefault();
+            },
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         return () => {
-            nKey.unregister();
             for (const sequencePropKey of sequencePropKeys) {
                 sequencePropKey.unregister();
             }
@@ -210,12 +215,14 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
             pageDown.unregister();
             pageUp.unregister();
+            shiftMKey.unregister();
         };
     }, [
         keybindings,
         openRenderModal,
         selectSequenceProp,
         setCheckerboard,
+        setEditorSnapping,
         setSelectedModal,
         navigateToNextComposition,
         navigateToPreviousComposition,

package/dist/components/InlineAction.js

@@ -18,7 +18,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
         return {
             border: 'none',
             background: disabled
-                ? 'transparent'
+                ? colors_1.TRANSPARENT
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
@@ -30,6 +30,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineEditableTitle.d.ts

@@ -2,6 +2,7 @@ import type * as React from 'react';
 export declare const InlineEditableTitle: React.FC<{
     readonly value: string;
     readonly canRename: boolean;
+    readonly getInitialSelection?: (value: string) => [number, number];
     readonly onCommit: (newValue: string) => void;
     readonly title?: string;
 }>;

package/dist/components/InlineEditableTitle.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const titleWrapper = {
     boxSizing: 'border-box',
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 12,
     height: 18,
     lineHeight: '18px',
@@ -37,10 +37,10 @@ const titleGridItem = {
 };
 const titleInput = {
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     boxShadow: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'inherit',
     fontSize: 12,
     height: 18,
@@ -53,7 +53,7 @@ const titleInput = {
     WebkitAppearance: 'none',
     width: '100%',
 };
-const InlineEditableTitle = ({ value, canRename, onCommit, title }) => {
+const InlineEditableTitle = ({ value, canRename, getInitialSelection, onCommit, title }) => {
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const [draftValue, setDraftValue] = (0, react_1.useState)(value);
@@ -70,8 +70,13 @@ const InlineEditableTitle = ({ value, canRename, onCommit, title }) => {
             return;
         }
         input.focus();
+        if (getInitialSelection) {
+            const [start, end] = getInitialSelection(value);
+            input.setSelectionRange(start, end);
+            return;
+        }
         input.select();
-    }, []);
+    }, [getInitialSelection, value]);
     const commit = (0, react_1.useCallback)((newValue) => {
         if (cancelledRef.current) {
             return;
@@ -109,8 +114,8 @@ const InlineEditableTitle = ({ value, canRename, onCommit, title }) => {
     const backgroundColor = isEditing
         ? colors_1.INPUT_BACKGROUND
         : isHovered && canRename
-            ? colors_1.CLEAR_HOVER
-            : 'transparent';
+            ? colors_1.WHITE_ALPHA_06
+            : colors_1.TRANSPARENT;
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             ...titleInner,

package/dist/components/InspectorInfoHeader.js

@@ -7,7 +7,7 @@ const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT = 84;
 const container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'block',
     minHeight: exports.INSPECTOR_INFO_HEADER_MIN_HEIGHT,
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
@@ -25,7 +25,7 @@ const content = {
 };
 const title = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 12,
     lineHeight: '18px',
     overflow: 'hidden',

package/dist/components/InspectorPanel/DefaultInspector.d.ts

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from '../RenderModal/SchemaEditor/ZodSwitch';
 export declare const DefaultInspector: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel/DefaultInspector.js

@@ -18,7 +18,7 @@ const SegmentedControl_1 = require("../SegmentedControl");
 const VisualControlsContent_1 = require("../VisualControls/VisualControlsContent");
 const common_1 = require("./common");
 const styles_1 = require("./styles");
-const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const DefaultInspector = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a, _b;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const hasSelectedAsset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset';
@@ -70,7 +70,7 @@ const DefaultInspector = ({ composition, currentDefaultProps, setDefaultProps })
         showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
     });
     if (hasSelectedAsset) {
-        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, {}) }) }));
+        return (jsx_runtime_1.jsx("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: styles_1.compositionSection, children: jsx_runtime_1.jsx(CurrentAsset_1.CurrentAsset, { readOnlyStudio: readOnlyStudio }) }) }));
     }
     if (composition === null) {
         return jsx_runtime_1.jsx("div", { style: styles_1.container });

package/dist/components/InspectorPanel/KeyframeEasingNavigator.js

@@ -64,7 +64,7 @@ const chevronIcon = {
     height: 12,
     width: 8,
 };
-const disabledChevronColor = 'rgba(255, 255, 255, 0.25)';
+const disabledChevronColor = colors_1.WHITE_ALPHA_25;
 const NavigationChevron = ({ color, direction }) => {
     const path = direction === 'left' ? 'M6 1L2 6L6 11' : 'M2 1L6 6L2 11';
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 8 12", style: chevronIcon, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) }));

package/dist/components/InspectorPanel/common.js

@@ -37,7 +37,7 @@ exports.InspectorDetailRow = InspectorDetailRow;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     color: colors_1.LIGHT_TEXT,
     cursor: 'default',
@@ -69,7 +69,7 @@ const inlineLabelIcon = {
 };
 const InspectorInlineAction = ({ children, disabled, onClick, renderIcon }) => {
     const [hovered, setHovered] = react_1.default.useState(false);
-    const color = hovered && !disabled ? 'white' : colors_1.LIGHT_TEXT;
+    const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
         color,

package/dist/components/InspectorPanel/styles.js

@@ -5,7 +5,7 @@ const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -55,7 +55,7 @@ exports.sequenceHeaderTitle = {
     alignSelf: 'stretch',
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     fontFamily: 'sans-serif',
     fontSize: 12,
@@ -170,7 +170,7 @@ exports.detailLabel = {
     fontSize: 13,
 };
 exports.detailValue = {
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 13,
     fontVariantNumeric: 'tabular-nums',
     minWidth: 0,

package/dist/components/InspectorPanel.d.ts

@@ -4,5 +4,6 @@ import type { UpdaterFunction } from './RenderModal/SchemaEditor/ZodSwitch';
 export declare const InspectorPanel: React.FC<{
     readonly composition: _InternalTypes['AnyComposition'] | null;
     readonly currentDefaultProps: Record<string, unknown>;
+    readonly readOnlyStudio: boolean;
     readonly setDefaultProps: UpdaterFunction<Record<string, unknown>>;
 }>;

package/dist/components/InspectorPanel.js

@@ -9,11 +9,11 @@ const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
 const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const sameSequenceInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequenceInspectorSelection)(selectedItems), [selectedItems]);
     if (selectedItems.length === 0) {
-        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
+        return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }));
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {

package/dist/components/InspectorSequenceSection.js

@@ -47,7 +47,7 @@ const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const container = {
-    color: 'white',
+    color: colors_1.WHITE,
     display: 'flex',
     flexDirection: 'column',
     fontFamily: 'Arial, Helvetica, sans-serif',

package/dist/components/InspectorSourceLocation.d.ts

@@ -4,4 +4,5 @@ export declare const InspectorSourceLocation: React.FC<{
     readonly location: OriginalPosition | null;
     readonly canOpen: boolean;
     readonly onOpen: () => void;
+    readonly renderIcon?: (color: string) => React.ReactNode;
 }>;

package/dist/components/InspectorSourceLocation.js

@@ -12,7 +12,9 @@ const sourceLocationStyle = {
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
     boxSizing: 'border-box',
-    display: 'block',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
     fontFamily: 'sans-serif',
     fontSize: 12,
     height: 18,
@@ -27,7 +29,18 @@ const sourceLocationStyle = {
     whiteSpace: 'nowrap',
     width: 'fit-content',
 };
-const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
+const sourceLocationLabelStyle = {
+    color: 'inherit',
+    display: 'block',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const InspectorSourceLocation = ({ location, canOpen, onOpen, renderIcon }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const validLocation = (0, react_1.useMemo)(() => {
         if (!(location === null || location === void 0 ? void 0 : location.source) || location.line === null) {
@@ -57,6 +70,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
             cursor: canOpen ? 'pointer' : 'default',
         };
     }, [canOpen, hovered]);
+    const color = hovered ? colors_1.LIGHT_COLOR : colors_1.LIGHT_TEXT;
     const onClick = (0, react_1.useCallback)(() => {
         if (!canOpen) {
             return;
@@ -66,6 +80,7 @@ const InspectorSourceLocation = ({ location, canOpen, onOpen }) => {
     if (!label) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: label }));
+    return (jsx_runtime_1.jsxs("button", { type: "button", style: style, title: fileLocation !== null && fileLocation !== void 0 ? fileLocation : undefined, onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [renderIcon ? renderIcon(color) : null, jsx_runtime_1.jsx("span", { style: sourceLocationLabelStyle, children: label })
+        ] }));
 };
 exports.InspectorSourceLocation = InspectorSourceLocation;

package/dist/components/InstallablePackage.js

@@ -13,7 +13,7 @@ const InstallablePackageComp = ({ isInstalled, pkg, link, description }) => {
         }, children: [
             jsx_runtime_1.jsx("a", { href: link, style: {
                     fontSize: FONT_SIZE,
-                    color: colors_1.TEXT_COLOR,
+                    color: colors_1.WHITE_HEX,
                     textDecoration: 'none',
                 }, target: "_blank", children: pkg }), ' ', isInstalled ? (jsx_runtime_1.jsx("span", { style: { opacity: 0.3, fontSize: 'inherit' }, children: "(installed)" })) : null, jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: FONT_SIZE }, children: description })
         ] }));

package/dist/components/KeyboardShortcutsExplainer.js

@@ -15,16 +15,16 @@ const left = {
 const key = {
     background: colors_1.INPUT_BACKGROUND,
     padding: '3px 6px',
-    color: 'white',
+    color: colors_1.WHITE,
     borderRadius: 3,
-    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    border: '1px solid ' + colors_1.BLACK_ALPHA_60,
     borderBottomWidth: 3,
     fontSize: 14,
     fontFamily: 'monospace',
 };
 const right = {
     fontSize: 14,
-    color: '#eee',
+    color: colors_1.KEYBOARD_SHORTCUT_KEY_COLOR,
 };
 const container = {
     paddingLeft: 20,
@@ -34,7 +34,7 @@ const container = {
 };
 const title = {
     fontWeight: 'bold',
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 14,
     marginBottom: 10,
 };
@@ -42,7 +42,7 @@ const keyboardShortcutsDisabled = {
     padding: 12,
     width: '100%',
     fontSize: 14,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    backgroundColor: colors_1.WHITE_ALPHA_10,
 };
 const ul = {
     marginTop: 0,
@@ -102,6 +102,10 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "F" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Enter fullscreen" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Esc" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Exit fullscreen" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: jsx_runtime_1.jsx(keys_1.ShiftIcon, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "M" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Enable snapping" })
                                 ] })
                         ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 8 }), jsx_runtime_1.jsxs(layout_1.Column, { children: [
                             jsx_runtime_1.jsx("div", { style: title, children: "Navigation" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [

package/dist/components/LoopToggle.js

@@ -14,6 +14,6 @@ const LoopToggle = ({ loop, setLoop }) => {
             return !c;
         });
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/Menu/MenuDivider.js

@@ -7,7 +7,7 @@ const menuDivider = {
     marginTop: 4,
     marginBottom: 4,
     height: 1,
-    backgroundColor: colors_1.INPUT_BORDER_COLOR_HOVERED,
+    backgroundColor: colors_1.WHITE_ALPHA_05,
 };
 const MenuDivider = () => {
     return jsx_runtime_1.jsx("div", { style: menuDivider });

package/dist/components/Menu/MenuItem.js

@@ -16,7 +16,7 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',

package/dist/components/Menu/MenuSubItem.js

@@ -56,7 +56,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            backgroundColor: selected && !disabled ? colors_1.CLEAR_HOVER : 'transparent',
+            backgroundColor: selected && !disabled ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
             opacity: disabled ? 0.5 : 1,
             cursor: disabled ? 'not-allowed' : 'default',
         };

package/dist/components/Menu/styles.js

@@ -9,12 +9,12 @@ exports.MAX_MOBILE_MENU_WIDTH = 300;
 const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
-exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
+exports.SHADOW_TOWARDS_BOTTOM = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_BOTTOM;
+exports.SHADOW_TOWARDS_TOP = colors_1.SHADOW_BLACK_ALPHA_50_TOWARDS_TOP;
 exports.menuContainerTowardsBottom = {
     ...menuContainer,
     boxShadow: exports.SHADOW_TOWARDS_BOTTOM,

package/dist/components/MenuToolbar.js

@@ -17,8 +17,8 @@ const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
-    color: 'white',
-    borderBottom: '1px solid black',
+    color: colors_1.WHITE,
+    borderBottom: colors_1.BORDER_BLACK,
     boxSizing: 'border-box',
     fontSize: 13,
     height: exports.MENU_TOOLBAR_HEIGHT,

package/dist/components/ModalButton.js

@@ -7,7 +7,7 @@ const colors_1 = require("../helpers/colors");
 const Button_1 = require("./Button");
 const buttonStyle = {
     backgroundColor: colors_1.BLUE,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const ModalButton = (props) => {
     const style = (0, react_1.useMemo)(() => {

package/dist/components/ModalContainer.js

@@ -15,7 +15,7 @@ const getMaxModalHeight = (height) => {
 };
 exports.getMaxModalHeight = getMaxModalHeight;
 const backgroundOverlay = {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.WHITE_ALPHA_20,
     backdropFilter: `blur(1px)`,
     position: 'fixed',
     height: '100%',
@@ -25,8 +25,8 @@ const backgroundOverlay = {
 };
 const panel = {
     backgroundColor: colors_1.BACKGROUND,
-    boxShadow: '0 0 4px black',
-    color: 'white',
+    boxShadow: colors_1.SHADOW_BLACK,
+    color: colors_1.WHITE,
     margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {

package/dist/components/ModalFooter.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooterContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
 const content = {
     padding: 12,
     paddingRight: 12,
@@ -10,6 +11,6 @@ const content = {
     minWidth: 500,
 };
 const ModalFooterContainer = ({ children }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, borderTop: '1px solid black' }, children: children }));
+    return jsx_runtime_1.jsx("div", { style: { ...content, borderTop: colors_1.BORDER_BLACK }, children: children });
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const modals_1 = require("../state/modals");
 const layout_1 = require("./layout");
 const CancelButton_1 = require("./NewComposition/CancelButton");
@@ -12,11 +13,11 @@ const container = {
     alignItems: 'center',
     padding: '12px 16px',
     width: '100%',
-    borderBottom: '1px solid black',
+    borderBottom: colors_1.BORDER_BLACK,
 };
 const titleStyle = {
     fontSize: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const icon = {
     height: 20,

package/dist/components/Modals.js

@@ -16,6 +16,7 @@ const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const NewComposition_1 = require("./NewComposition/NewComposition");
+const NewFolder_1 = require("./NewComposition/NewFolder");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
@@ -31,7 +32,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/CancelButton.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CancelButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
 const style = {
     appearance: 'none',
     border: 'none',
-    backgroundColor: 'transparent',
-    color: 'white',
+    backgroundColor: colors_1.TRANSPARENT,
+    color: colors_1.WHITE,
     cursor: 'pointer',
     display: 'inline-flex',
     justifyContent: 'center',
@@ -15,6 +16,6 @@ const style = {
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
 };
 exports.CancelButton = CancelButton;

package/dist/components/NewComposition/ComboBox.js

@@ -167,15 +167,15 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
             userSelect: 'none',
             WebkitUserSelect: 'none',
-            color: 'white',
+            color: colors_1.WHITE,
             display: 'inline-flex',
             flexDirection: 'row',
             alignItems: 'center',
             borderColor: opened
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+                    ? colors_1.WHITE_ALPHA_05
+                    : colors_1.BLACK_ALPHA_60,
         };
     }, [customStyle, hovered, opened, small]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [