@remotion/studio 4.0.485 → 4.0.487

package/dist/components/NewComposition/InputDragger.js

@@ -84,8 +84,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     const style = (0, react_1.useMemo)(() => {
         return {
             ...RemInput_1.inputBaseStyle,
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
+            backgroundColor: colors_1.TRANSPARENT,
+            borderColor: colors_1.TRANSPARENT,
             padding: '4px 6px',
             ...{ outline: 'none' },
         };
@@ -113,6 +113,14 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
         setInputFallback(true);
     }, []);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key !== 'Enter') {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setInputFallback(true);
+    }, []);
     const onEscape = (0, react_1.useCallback)(() => {
         setInputFallback(false);
     }, []);
@@ -225,6 +233,6 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/MenuContent.js

@@ -15,7 +15,7 @@ const BORDER_SIZE = 1;
 const container = {
     paddingTop: styles_1.MENU_VERTICAL_PADDING,
     paddingBottom: styles_1.MENU_VERTICAL_PADDING,
-    border: `${BORDER_SIZE}px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
+    border: `${BORDER_SIZE}px solid ${colors_1.BLACK_ALPHA_60}`,
     marginLeft: 0 - BORDER_SIZE,
     overflowY: 'auto',
     overflowX: 'hidden',

package/dist/components/NewComposition/NewComposition.js

@@ -23,6 +23,9 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
+const folderPathStyle = {
+    fontSize: 14,
+};
 const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
@@ -89,7 +92,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: folderPath })
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/NewComposition/NewFolder.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const NewFolder: React.FC<{
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;

package/dist/components/NewComposition/NewFolder.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewFolder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_folder_id_1 = require("../../helpers/get-folder-id");
+const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const actions_1 = require("../RenderQueue/actions");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const getUniqueFolderName = ({ folders, parentName, }) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewFolder' : `NewFolder${counter}`;
+        const err = (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName: name, parentName });
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+const NewFolder = ({ parentName, stack }) => {
+    const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newName, setName] = (0, react_1.useState)(() => getUniqueFolderName({ folders, parentName }));
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const folderNameErrMessage = (0, validate_new_folder_name_1.validateNewFolderName)({
+        folders,
+        newName,
+        parentName,
+    });
+    const valid = folderNameErrMessage === null;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-folder',
+            folderName: newName,
+            parentName,
+        };
+    }, [newName, parentName]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    const folderId = (0, get_folder_id_1.getFolderId)({ folderName: newName, parentName });
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New folder" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [parentName ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Parent" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: parentName })
+                                ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                        jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
+                                                    ] })) : null] }) })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Creating folder...', errorNotification: 'Could not create folder', successNotification: `Created folder ${folderId}`, genericSubmitLabel: 'Add to root file', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, fallbackToRootFile: true, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
+                ] })
+        ] }));
+};
+exports.NewFolder = NewFolder;

package/dist/components/NewComposition/RemInput.js

@@ -15,7 +15,7 @@ const RightAlignInput = ({ children }) => {
 exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
     padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
@@ -32,8 +32,8 @@ const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'w
         : isFocused
             ? colors_1.SELECTED_BACKGROUND
             : isHovered
-                ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+                ? colors_1.WHITE_ALPHA_05
+                : colors_1.BLACK_ALPHA_60;
 exports.getInputBorderColor = getInputBorderColor;
 const RemInputForwardRef = ({ status, rightAlign, small = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);

package/dist/components/NewComposition/RemTextarea.js

@@ -9,7 +9,7 @@ const is_menu_item_1 = require("../Menu/is-menu-item");
 const RemInput_1 = require("../NewComposition/RemInput");
 const inputBaseStyle = {
     padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
-    color: 'white',
+    color: colors_1.WHITE,
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,

package/dist/components/NewComposition/RenameStaticFile.js

@@ -3,20 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenameStaticFileModal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
-const rename_static_file_1 = require("../../api/rename-static-file");
-const url_state_1 = require("../../helpers/url-state");
 const modals_1 = require("../../state/modals");
 const Button_1 = require("../Button");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const layout_2 = require("../RenderModal/layout");
 const use_static_files_1 = require("../use-static-files");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const use_rename_static_file_1 = require("./use-rename-static-file");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -25,54 +22,32 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const getParent = (relativePath) => {
-    const slashIndex = relativePath.lastIndexOf('/');
-    return slashIndex === -1 ? '' : relativePath.slice(0, slashIndex);
-};
-const getBaseName = (relativePath) => {
-    const slashIndex = relativePath.lastIndexOf('/');
-    return slashIndex === -1 ? relativePath : relativePath.slice(slashIndex + 1);
-};
 const RenameStaticFileModal = ({ relativePath }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const [newName, setNewName] = (0, react_1.useState)(() => getBaseName(relativePath));
+    const [newName, setNewName] = (0, react_1.useState)(() => (0, use_rename_static_file_1.getStaticFileBaseName)(relativePath));
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
+    const renameFile = (0, use_rename_static_file_1.useRenameStaticFile)({ relativePath, staticFiles });
     (0, react_1.useEffect)(() => {
         const input = inputRef.current;
         if (!input)
             return;
-        const dotIndex = newName.lastIndexOf('.');
-        const stemEnd = dotIndex === -1 ? newName.length : dotIndex;
-        input.setSelectionRange(0, stemEnd);
+        const [start, end] = (0, use_rename_static_file_1.getStaticFileRenameSelection)(newName);
+        input.setSelectionRange(start, end);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const parent = (0, react_1.useMemo)(() => getParent(relativePath), [relativePath]);
     const newRelativePath = (0, react_1.useMemo)(() => {
-        return [parent, newName].filter(Boolean).join('/');
-    }, [newName, parent]);
+        return (0, use_rename_static_file_1.getRenamedStaticFilePath)({ newName, relativePath });
+    }, [newName, relativePath]);
     const changed = newRelativePath !== relativePath;
     const validationMessage = (0, react_1.useMemo)(() => {
-        const trimmedName = newName.trim();
-        if (trimmedName.length === 0) {
-            return 'Name cannot be empty';
-        }
-        if (trimmedName !== newName) {
-            return 'Name cannot start or end with whitespace';
-        }
-        if (newName.includes('/') || newName.includes('\\')) {
-            return 'Name cannot include slashes';
-        }
-        const existingFile = staticFiles.find((file) => {
-            return file.name === newRelativePath && file.name !== relativePath;
+        return (0, use_rename_static_file_1.validateStaticFileRename)({
+            newName,
+            newRelativePath,
+            relativePath,
+            staticFiles,
         });
-        if (existingFile) {
-            return 'An asset with this name already exists';
-        }
-        return null;
     }, [newName, newRelativePath, relativePath, staticFiles]);
     const valid = changed && validationMessage === null;
     const onNameChange = (0, react_1.useCallback)((e) => {
@@ -83,32 +58,18 @@ const RenameStaticFileModal = ({ relativePath }) => {
             return;
         }
         setSubmitting(true);
-        const notification = (0, NotificationCenter_1.showNotification)(`Renaming ${relativePath}...`, null);
-        (0, rename_static_file_1.renameStaticFile)({
-            oldRelativePath: relativePath,
-            newRelativePath,
-        })
-            .then(() => {
-            setSelectedModal(null);
-            if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
-                canvasContent.asset === relativePath) {
-                setCanvasContent({ type: 'asset', asset: newRelativePath });
-                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+        renameFile(newName)
+            .then((renamed) => {
+            if (!renamed) {
+                setSubmitting(false);
+                return;
             }
-            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            setSelectedModal(null);
         })
-            .catch((err) => {
+            .catch(() => {
             setSubmitting(false);
-            notification.replaceContent(`Could not rename ${relativePath}: ${err.message}`, 3000);
         });
-    }, [
-        canvasContent,
-        newRelativePath,
-        relativePath,
-        setCanvasContent,
-        setSelectedModal,
-        valid,
-    ]);
+    }, [newName, renameFile, setSelectedModal, valid]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
         onRename();

package/dist/components/NewComposition/ValidationMessage.js

@@ -29,7 +29,7 @@ const row = {
 };
 const label = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     minWidth: 0,
     whiteSpace: 'normal',

package/dist/components/NewComposition/use-rename-static-file.d.ts

@@ -0,0 +1,18 @@
+import { type StaticFile } from 'remotion';
+export declare const getStaticFileParent: (relativePath: string) => string;
+export declare const getStaticFileBaseName: (relativePath: string) => string;
+export declare const getStaticFileRenameSelection: (fileName: string) => [number, number];
+export declare const getRenamedStaticFilePath: ({ newName, relativePath, }: {
+    readonly newName: string;
+    readonly relativePath: string;
+}) => string;
+export declare const validateStaticFileRename: ({ newName, newRelativePath, relativePath, staticFiles, }: {
+    readonly newName: string;
+    readonly newRelativePath: string;
+    readonly relativePath: string;
+    readonly staticFiles: StaticFile[];
+}) => "An asset with this name already exists" | "Name cannot be empty" | "Name cannot include slashes" | "Name cannot start or end with whitespace" | null;
+export declare const useRenameStaticFile: ({ relativePath, staticFiles, }: {
+    readonly relativePath: string;
+    readonly staticFiles: StaticFile[];
+}) => (newName: string) => Promise<boolean>;

package/dist/components/NewComposition/use-rename-static-file.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenameStaticFile = exports.validateStaticFileRename = exports.getRenamedStaticFilePath = exports.getStaticFileRenameSelection = exports.getStaticFileBaseName = exports.getStaticFileParent = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const rename_static_file_1 = require("../../api/rename-static-file");
+const url_state_1 = require("../../helpers/url-state");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const getStaticFileParent = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? '' : relativePath.slice(0, slashIndex);
+};
+exports.getStaticFileParent = getStaticFileParent;
+const getStaticFileBaseName = (relativePath) => {
+    const slashIndex = relativePath.lastIndexOf('/');
+    return slashIndex === -1 ? relativePath : relativePath.slice(slashIndex + 1);
+};
+exports.getStaticFileBaseName = getStaticFileBaseName;
+const getStaticFileRenameSelection = (fileName) => {
+    const dotIndex = fileName.lastIndexOf('.');
+    return [0, dotIndex > 0 ? dotIndex : fileName.length];
+};
+exports.getStaticFileRenameSelection = getStaticFileRenameSelection;
+const getRenamedStaticFilePath = ({ newName, relativePath, }) => {
+    const parent = (0, exports.getStaticFileParent)(relativePath);
+    return [parent, newName].filter(Boolean).join('/');
+};
+exports.getRenamedStaticFilePath = getRenamedStaticFilePath;
+const validateStaticFileRename = ({ newName, newRelativePath, relativePath, staticFiles, }) => {
+    const trimmedName = newName.trim();
+    if (trimmedName.length === 0) {
+        return 'Name cannot be empty';
+    }
+    if (trimmedName !== newName) {
+        return 'Name cannot start or end with whitespace';
+    }
+    if (newName.includes('/') || newName.includes('\\')) {
+        return 'Name cannot include slashes';
+    }
+    const existingFile = staticFiles.find((file) => {
+        return file.name === newRelativePath && file.name !== relativePath;
+    });
+    if (existingFile) {
+        return 'An asset with this name already exists';
+    }
+    return null;
+};
+exports.validateStaticFileRename = validateStaticFileRename;
+const useRenameStaticFile = ({ relativePath, staticFiles, }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    return (0, react_1.useCallback)(async (newName) => {
+        const newRelativePath = (0, exports.getRenamedStaticFilePath)({
+            newName,
+            relativePath,
+        });
+        if (newRelativePath === relativePath) {
+            return true;
+        }
+        const validationMessage = (0, exports.validateStaticFileRename)({
+            newName,
+            newRelativePath,
+            relativePath,
+            staticFiles,
+        });
+        if (validationMessage) {
+            (0, NotificationCenter_1.showNotification)(validationMessage, 2000);
+            return false;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)(`Renaming ${relativePath}...`, null);
+        try {
+            await (0, rename_static_file_1.renameStaticFile)({
+                oldRelativePath: relativePath,
+                newRelativePath,
+            });
+            if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' &&
+                canvasContent.asset === relativePath) {
+                setCanvasContent({ type: 'asset', asset: newRelativePath });
+                (0, url_state_1.pushUrl)(`/assets/${newRelativePath}`);
+            }
+            notification.replaceContent(`Renamed to ${newRelativePath}`, 2000);
+            return true;
+        }
+        catch (err) {
+            notification.replaceContent(`Could not rename ${relativePath}: ${err.message}`, 3000);
+            return false;
+        }
+    }, [canvasContent, relativePath, setCanvasContent, staticFiles]);
+};
+exports.useRenameStaticFile = useRenameStaticFile;

package/dist/components/NoRegisterRoot.js

@@ -4,9 +4,10 @@ exports.NoRegisterRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const label = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'Arial, Helvetica, sans-serif',
 };
 const container = {
@@ -17,7 +18,7 @@ const container = {
     lineHeight: 1.5,
 };
 const link = {
-    color: 'white',
+    color: colors_1.WHITE,
     textDecoration: 'none',
     borderBottom: '1px solid',
 };

package/dist/components/Notifications/ColorDot.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorDot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const container = {
     height: 16,
     width: 16,
-    backgroundColor: 'red',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.RED,
+    border: colors_1.BORDER_WHITE_ALPHA_20,
     borderRadius: 8,
 };
 const ColorDot = ({ color }) => {

package/dist/components/Notifications/Notification.js

@@ -5,15 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const notification = {
-    backgroundColor: '#111111',
-    color: colors_1.TEXT_COLOR,
+    backgroundColor: colors_1.NOTIFICATION_BACKGROUND,
+    color: colors_1.WHITE_HEX,
     fontFamily: 'Arial, Helvetica, sans-serif',
     display: 'inline-flex',
     padding: '6px 14px',
     borderRadius: 6,
     fontSize: 13,
-    border: '0.25px solid rgba(255, 255, 255, 0.1)',
-    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    border: colors_1.NOTIFICATION_BORDER,
+    boxShadow: colors_1.NOTIFICATION_SHADOW,
     marginTop: 3,
     marginBottom: 3,
     alignItems: 'center',

package/dist/components/Notifications/NotificationCenter.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const Notification_1 = require("./Notification");
 const container = {
     position: 'absolute',
@@ -13,7 +14,7 @@ const container = {
     flexDirection: 'column',
     paddingTop: 40,
     pointerEvents: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
 };
 const notificationCenter = (0, react_1.createRef)();
 const showNotification = (content, durationInMs) => {

package/dist/components/Notifications/ServerDisconnected.js

@@ -4,6 +4,7 @@ exports.ServerDisconnected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const container = {
     position: 'fixed',
     justifyContent: 'flex-end',
@@ -14,18 +15,18 @@ const container = {
     flexDirection: 'column',
     padding: 30,
     pointerEvents: 'none',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
 };
 const message = {
-    backgroundColor: '#e74c3c',
-    color: 'white',
+    backgroundColor: colors_1.SERVER_DISCONNECTED_BACKGROUND,
+    color: colors_1.WHITE,
     paddingLeft: 20,
     paddingRight: 20,
     paddingTop: 12,
     paddingBottom: 12,
     borderRadius: 4,
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    boxShadow: colors_1.SERVER_DISCONNECTED_SHADOW,
     lineHeight: 1.5,
 };
 const inlineCode = {

package/dist/components/OptionsPanel.js

@@ -181,6 +181,6 @@ const OptionsPanel = ({ readOnlyStudio }) => {
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
-                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
+                        jsx_runtime_1.jsxs(Tabs_1.Tab, { selected: panel === 'inspector', onClick: onInspectorSelected, style: { justifyContent: 'space-between' }, children: ["Inspector", hasLocalModifications ? (jsx_runtime_1.jsx(SchemaResetButton_1.SchemaResetButton, { onClick: resetToOriginal })) : null] }), renderingAvailable ? (jsx_runtime_1.jsx(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })) : null] }) }), panel === 'inspector' ? (jsx_runtime_1.jsx(InspectorPanel_1.InspectorPanel, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps })) : !renderingAvailable ? null : (jsx_runtime_1.jsx(RenderQueue_1.RenderQueue, {}))] }));
 };
 exports.OptionsPanel = OptionsPanel;

package/dist/components/OutlineToggle.js

@@ -11,7 +11,7 @@ const OutlineToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
-    const color = editorShowOutlines ? colors_1.BLUE : 'white';
+    const color = editorShowOutlines ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';

package/dist/components/PlayPause.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -18,16 +19,16 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const backStyle = {
     height: 18,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const forwardBackStyle = {
     height: 16,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const iconButton = {
     height: 14,
     width: 14,
-    color: 'white',
+    color: colors_1.WHITE,
 };
 const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();

package/dist/components/Preview.js

@@ -122,7 +122,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
     return (jsx_runtime_1.jsxs("div", { style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {

package/dist/components/PreviewToolbar.js

@@ -23,13 +23,14 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
+const SnappingToggle_1 = require("./SnappingToggle");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 50;
 const container = {
     display: 'flex',
     justifyContent: 'center',
-    borderTop: '1px solid rgba(0, 0, 0, 0.5)',
+    borderTop: colors_1.BORDER_BLACK_ALPHA_50,
     alignItems: 'center',
     flexDirection: 'row',
     background: colors_1.BACKGROUND,
@@ -165,7 +166,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })
+                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })