@remotion/studio 4.0.522 → 4.0.524

package/dist/components/ModelManager.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const check_circle_filled_1 = require("../icons/check-circle-filled");
+const cloud_download_1 = require("../icons/cloud-download");
+const trash_1 = require("../icons/trash");
+const InlineAction_1 = require("./InlineAction");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const render_modals_1 = require("./RenderModal/render-modals");
+const Spinner_1 = require("./Spinner");
+const modelPanel = {
+    ...render_modals_1.optionsPanel,
+    flexDirection: 'column',
+};
+const hiddenPanel = { display: 'none' };
+const container = {
+    boxSizing: 'border-box',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    minWidth: 0,
+    padding: '16px 16px 0',
+    width: '100%',
+};
+const flushContainer = {
+    ...container,
+    padding: '16px 0 0',
+};
+const descriptionStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: 0,
+    whiteSpace: 'pre-line',
+};
+const list = { marginTop: 14 };
+const modelRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 10,
+    minHeight: 38,
+    padding: '0 10px',
+};
+const lastModelRow = {
+    ...modelRow,
+    borderBottom: 'none',
+};
+const statusIcon = {
+    flexShrink: 0,
+    height: 14,
+    width: 14,
+};
+const modelName = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.4,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const status = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+};
+const actionIcon = { height: 14, width: 14 };
+const actionSlot = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+};
+const ModelManager = ({ ariaLabel, availableModels, description, indent, isModelCached, loadModel, prepare, removeModel, visible, }) => {
+    const mounted = (0, react_1.useRef)(true);
+    const initialized = (0, react_1.useRef)(false);
+    const [cachedModels, setCachedModels] = (0, react_1.useState)(null);
+    const [actionState, setActionState] = (0, react_1.useState)({
+        type: 'idle',
+    });
+    const [cacheCheckError, setCacheCheckError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!visible || initialized.current) {
+            return;
+        }
+        initialized.current = true;
+        Promise.resolve()
+            .then(() => prepare === null || prepare === void 0 ? void 0 : prepare())
+            .then(() => Promise.all(availableModels.map(async ({ name }) => (await isModelCached(name)) ? name : null)))
+            .then((models) => {
+            if (mounted.current) {
+                const cached = new Set();
+                for (const model of models) {
+                    if (model !== null) {
+                        cached.add(model);
+                    }
+                }
+                setCachedModels(cached);
+            }
+        })
+            .catch((error) => {
+            if (mounted.current) {
+                setCachedModels(new Set());
+                setCacheCheckError(error instanceof Error ? error.message : String(error));
+            }
+        });
+    }, [availableModels, isModelCached, prepare, visible]);
+    const downloadModel = (0, react_1.useCallback)((model) => {
+        setActionState({ type: 'downloading', model, progress: 0 });
+        loadModel(model, (progress) => {
+            if (mounted.current) {
+                setActionState({ type: 'downloading', model, progress });
+            }
+        })
+            .then(() => {
+            if (mounted.current) {
+                setCachedModels((current) => new Set([...(current !== null && current !== void 0 ? current : []), model]));
+                setActionState({ type: 'idle' });
+            }
+        })
+            .catch((error) => {
+            if (mounted.current) {
+                setActionState({
+                    type: 'error',
+                    model,
+                    message: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+    }, [loadModel]);
+    const remove = (0, react_1.useCallback)((model) => {
+        setActionState({ type: 'removing', model });
+        removeModel(model)
+            .then(() => {
+            if (mounted.current) {
+                setCachedModels((current) => {
+                    const next = new Set(current !== null && current !== void 0 ? current : []);
+                    next.delete(model);
+                    return next;
+                });
+                setActionState({ type: 'idle' });
+            }
+        })
+            .catch((error) => {
+            if (mounted.current) {
+                setActionState({
+                    type: 'error',
+                    model,
+                    message: error instanceof Error ? error.message : String(error),
+                });
+            }
+        });
+    }, [removeModel]);
+    const renderDownloadIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(cloud_download_1.CloudDownloadIcon, { color: color, style: actionIcon });
+    }, []);
+    const renderRemoveIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(trash_1.TrashIcon, { color: color, style: actionIcon });
+    }, []);
+    const actionInProgress = actionState.type === 'downloading' || actionState.type === 'removing';
+    return (jsx_runtime_1.jsx("div", { style: visible ? modelPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs("div", { style: indent ? container : flushContainer, children: [description === null ? null : (jsx_runtime_1.jsx("p", { style: descriptionStyle, children: description })), cacheCheckError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: cacheCheckError, type: "error" })) : null, jsx_runtime_1.jsx("div", { style: description === null ? undefined : list, role: "list", "aria-label": ariaLabel, children: availableModels.map((model, index) => {
+                        var _a;
+                        const cached = (_a = cachedModels === null || cachedModels === void 0 ? void 0 : cachedModels.has(model.name)) !== null && _a !== void 0 ? _a : false;
+                        const processingThisModel = actionState.type !== 'idle' &&
+                            actionState.type !== 'error' &&
+                            actionState.model === model.name;
+                        const progress = actionState.type === 'downloading' &&
+                            actionState.model === model.name
+                            ? actionState.progress
+                            : null;
+                        const modelStatus = processingThisModel
+                            ? actionState.type === 'removing'
+                                ? 'Removing…'
+                                : `Downloading${progress === null ? '…' : ` ${Math.round(progress * 100)}%`}`
+                            : actionState.type === 'error' && actionState.model === model.name
+                                ? actionState.message
+                                : (0, studio_shared_1.formatBytes)(model.webGpuDownloadSize);
+                        return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === availableModels.length - 1 ? lastModelRow : modelRow, children: [
+                                jsx_runtime_1.jsx("span", { style: modelName, children: model.name }), jsx_runtime_1.jsx("span", { style: status, title: modelStatus, children: modelStatus }), cached ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : null, processingThisModel ? (jsx_runtime_1.jsx("span", { style: actionSlot, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 14 }) })) : cached ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: actionInProgress, onClick: () => remove(model.name), renderAction: renderRemoveIcon, title: `Remove ${model.name}`, variant: null })) : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: cachedModels === null || actionInProgress, onClick: () => downloadModel(model.name), renderAction: renderDownloadIcon, title: `Download ${model.name}`, variant: null }))] }, model.name));
+                    }) })
+            ] }) }));
+};
+exports.ModelManager = ModelManager;

package/dist/components/ModelsSettings.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ModelsSettings: React.FC;

package/dist/components/ModelsSettings.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelsSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const colors_1 = require("../helpers/colors");
+const optional_package_dependencies_1 = require("../helpers/optional-package-dependencies");
+const Button_1 = require("./Button");
+const styles_1 = require("./InspectorPanel/styles");
+const OptionalPackageModal_1 = require("./OptionalPackageModal");
+const whisper_webgpu_capability_1 = require("./Transcription/whisper-webgpu-capability");
+const video_matting_capability_1 = require("./VideoMatting/video-matting-capability");
+const LazyWhisperModels = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./Transcription/LazyModels'))));
+const LazyVideoMattingModels = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./VideoMatting/LazyModels'))));
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    fontFamily: 'sans-serif',
+    minWidth: 0,
+    padding: 16,
+    width: '100%',
+};
+const overview = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: '0 0 16px',
+};
+const section = {
+    paddingBottom: 16,
+};
+const lastSection = {
+    paddingTop: 16,
+};
+const title = {
+    ...styles_1.sectionHeader,
+    margin: 0,
+    padding: '4px 0 0',
+};
+const packageNameStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
+    fontSize: 12,
+    lineHeight: 1.4,
+    margin: 0,
+};
+const headingRow = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+};
+const missingText = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const missingDescription = {
+    ...missingText,
+    marginTop: 14,
+};
+const installButton = {
+    backgroundColor: colors_1.BLUE,
+    color: colors_1.WHITE,
+    flexShrink: 0,
+};
+const errorStyle = {
+    color: colors_1.WARNING_COLOR,
+    fontSize: 12,
+    lineHeight: 1.4,
+    margin: '8px 0 0',
+};
+const OptionalModelPackage = ({ children, label, packageName, style }) => {
+    const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(packageName);
+    const [installState, setInstallState] = (0, react_1.useState)({
+        type: 'idle',
+    });
+    const install = (0, react_1.useCallback)(() => {
+        setInstallState({ type: 'installing' });
+        (0, OptionalPackageModal_1.installOptionalPackage)(packageName).catch((error) => {
+            setInstallState({
+                type: 'error',
+                message: error instanceof Error ? error.message : String(error),
+            });
+        });
+    }, [packageName]);
+    return (jsx_runtime_1.jsxs("section", { style: style, children: [
+            jsx_runtime_1.jsxs("div", { style: headingRow, children: [
+                    jsx_runtime_1.jsxs("div", { children: [
+                            jsx_runtime_1.jsx("h3", { style: title, children: label }), jsx_runtime_1.jsx("p", { style: packageNameStyle, children: packageName })
+                        ] }), installed ? null : (jsx_runtime_1.jsx(Button_1.Button, { disabled: installState.type === 'installing', onClick: install, size: "compact", style: installButton, children: installState.type === 'installing' ? 'Installing…' : 'Install' }))] }), installed ? (jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx("p", { style: missingText, children: "Loading models\u2026" }), children: children })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("p", { style: missingDescription, children: ["Install the package and ", optional_package_dependencies_1.TRANSFORMERS_PACKAGE, " to download and manage its models."] }), installState.type === 'error' ? (jsx_runtime_1.jsx("p", { style: errorStyle, children: installState.message })) : null] }))] }));
+};
+const ModelsSettings = () => {
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [
+            jsx_runtime_1.jsx("p", { style: overview, children: "Models are downloaded automatically when needed. You can also manage the browser cache here." }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Transcription", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, style: section, children: jsx_runtime_1.jsx(LazyWhisperModels, { description: null, indent: false, visible: true }) }), jsx_runtime_1.jsx(OptionalModelPackage, { label: "Video matting", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, style: lastSection, children: jsx_runtime_1.jsx(LazyVideoMattingModels, { description: null, indent: false, visible: true }) })
+        ] }));
+};
+exports.ModelsSettings = ModelsSettings;

package/dist/components/MuteToggle.d.ts

@@ -1,3 +1,4 @@
+export declare const toggleMute: (setMuted: import("react").Dispatch<import("react").SetStateAction<boolean>>) => void;
 export declare const MuteToggle: React.FC<{
     muted: boolean;
     setMuted: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/MuteToggle.js

@@ -1,20 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MuteToggle = void 0;
+exports.MuteToggle = exports.toggleMute = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
+const ActionTooltip_1 = require("./ActionTooltip");
 const ControlButton_1 = require("./ControlButton");
+const toggleMute = (setMuted) => {
+    setMuted((muted) => {
+        (0, mute_1.persistMuteOption)(!muted);
+        return !muted;
+    });
+};
+exports.toggleMute = toggleMute;
 const MuteToggle = ({ muted, setMuted }) => {
+    const shortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutLabel)('toggleMute');
+    const ariaShortcut = (0, use_keyboard_shortcut_label_1.useKeyboardShortcutAriaKeyShortcuts)('toggleMute');
+    const shortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const onClick = (0, react_1.useCallback)(() => {
-        setMuted((m) => {
-            (0, mute_1.persistMuteOption)(!m);
-            return !m;
-        });
+        (0, exports.toggleMute)(setMuted);
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: accessibilityLabel, shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, onClick: onClick, children: (color) => muted ? (jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE })) : (jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color })) }) }));
 };
 exports.MuteToggle = MuteToggle;

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

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const DismissableModal: React.FC<{
     readonly children: React.ReactNode;
     readonly panelStyle?: React.CSSProperties;
+    readonly ariaLabel?: string;
 }>;

package/dist/components/NewComposition/DismissableModal.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
-const DismissableModal = ({ children, panelStyle }) => {
+const DismissableModal = ({ children, panelStyle, ariaLabel }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
+    return (jsx_runtime_1.jsx(ModalContainer_1.ModalContainer, { ariaLabel: ariaLabel, onOutsideClick: onQuit, onEscape: onQuit, panelStyle: panelStyle, children: children }));
 };
 exports.DismissableModal = DismissableModal;

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

@@ -55,8 +55,8 @@ export declare const deriveInputDraggerValueDiff: ({ dragSensitivity, step, xDis
     readonly xDistance: number;
 }) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    readonly onValueChange: (newVal: number) => void;
-    readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
+    readonly onValueChange: (newVal: number, source: "drag" | "input") => void;
+    readonly onValueChangeEnd?: ((newVal: number, source: "drag" | "input") => void) | undefined;
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -385,7 +385,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 min: _min,
                 value: parsed,
             })) {
-            onValueChange(parsed);
+            onValueChange(parsed, 'input');
         }
     }, [_max, _min, onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
@@ -405,7 +405,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
         if (validation.valid) {
             fallbackRef.current.setCustomValidity('');
-            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value);
+            onValueChangeEnd === null || onValueChangeEnd === void 0 ? void 0 : onValueChangeEnd(validation.value, 'input');
             setInputFallback(false);
         }
         else {
@@ -441,7 +441,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         });
         e.currentTarget.value = String(nextValue);
         e.currentTarget.setCustomValidity('');
-        onValueChange(nextValue);
+        onValueChange(nextValue, 'input');
     }, [_max, _min, deriveStep, onValueChange, value]);
     const roundToStep = (val, stepSize) => {
         const factor = 1 / stepSize;
@@ -484,7 +484,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     ? newValue
                     : roundToDecimalPlaces(newValue, dragDecimalPlaces);
             lastDragValue = nextValue;
-            onValueChange(nextValue);
+            onValueChange(nextValue, 'drag');
         };
         (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
@@ -496,7 +496,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 const commit = reason === 'pointerup' || reason === 'buttons-released';
                 if (commit && lastDragValue !== null && onValueChangeEnd) {
-                    onValueChangeEnd(lastDragValue);
+                    onValueChangeEnd(lastDragValue, 'drag');
                 }
                 setTimeout(() => {
                     (0, input_dragger_click_lock_1.setClickLock)(false);
@@ -529,7 +529,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                     }
                     : inputStyle, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], title: props.title, className: '__remotion_input_dragger', style: buttonStyle
             ? {
                 ...(small
                     ? compactInputDraggerContainerStyle

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

@@ -16,6 +16,7 @@ export type NewCompositionFormValues = {
     };
 };
 export declare const NewCompositionFields: React.FC<{
+    readonly compositionId: string;
     readonly heightValidationMessage: string | null;
     readonly inputRef: RefObject<HTMLInputElement | null>;
     readonly nameValidationMessage: string | null;

package/dist/components/NewComposition/NewComposition.js

@@ -26,6 +26,7 @@ const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -68,7 +69,7 @@ const FolderDropdownLabel = ({ folderPath, indentation }) => {
 };
 const rootFolderId = 'new-composition-root-folder';
 const folderSelectIdPrefix = 'new-composition-folder-';
-const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
+const NewCompositionFields = ({ compositionId, heightValidationMessage, inputRef, nameValidationMessage, setValues, values, widthValidationMessage, }) => {
     const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { compositionSortOrder } = (0, react_1.useContext)(folders_1.FolderContext);
     const selectedFolderId = values.folder.folderName
@@ -207,7 +208,7 @@ const NewCompositionFields = ({ heightValidationMessage, inputRef, nameValidatio
                     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(ComboBox_1.Combobox, { values: folderValues, selectedId: selectedFolderId, style: folderSelectStyle, title: "Folder" }) })
                 ] }), 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, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), nameValidationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: values.id, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: values.id, slug: compositionId }), nameValidationMessage ? (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: nameValidationMessage, type: "error" })
                                     ] })) : null] }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -252,7 +253,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
             return;
         input.select();
     }, []);
-    const { codemod, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
+    const { codemod, compositionId, createComposition, heightValidationMessage, nameValidationMessage, valid, widthValidationMessage, } = (0, use_create_composition_1.useCreateComposition)({
         compositions,
         durationInFrames: values.durationInFrames,
         folderName: values.folder.folderName,
@@ -294,7 +295,7 @@ const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack })
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: canvasCapture === null ? 'New composition' : 'Import Canvas Capture' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
-                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
+                    jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(exports.NewCompositionFields, { compositionId: compositionId, heightValidationMessage: heightValidationMessage, inputRef: inputRef, nameValidationMessage: nameValidationMessage, setValues: setValues, values: values, widthValidationMessage: widthValidationMessage }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: values.folder.stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), applyCodemodForPreview: null, fallbackToRootFile: true }) })

package/dist/components/NewComposition/NewFolder.js

@@ -4,6 +4,7 @@ exports.NewFolder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const slugify_name_1 = require("../../helpers/slugify-name");
 const validate_new_folder_name_1 = require("../../helpers/validate-new-folder-name");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -14,6 +15,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -46,19 +48,18 @@ const NewFolder = ({ parentName, stack }) => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const folderNameErrMessage = (0, validate_new_folder_name_1.validateNewFolderName)({
-        folders,
-        newName,
-        parentName,
-    });
+    const folderName = (0, slugify_name_1.slugifyName)(newName);
+    const folderNameErrMessage = folderName
+        ? (0, validate_new_folder_name_1.validateNewFolderName)({ folders, newName: folderName, parentName })
+        : 'Enter a name containing letters or numbers.';
     const valid = folderNameErrMessage === null;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'new-folder',
-            folderName: newName,
+            folderName,
             parentName,
         };
-    }, [newName, parentName]);
+    }, [folderName, parentName]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
@@ -68,7 +69,7 @@ const NewFolder = ({ parentName, stack }) => {
                                     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(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "create", currentName: null, input: newName, slug: folderName }), 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] }) })
                                 ] })

package/dist/components/NewComposition/RenameComposition.js

@@ -14,6 +14,7 @@ const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const RemInput_1 = require("./RemInput");
+const SlugPreview_1 = require("./SlugPreview");
 const ValidationMessage_1 = require("./ValidationMessage");
 const content = {
     padding: 12,
@@ -44,7 +45,7 @@ const RenameCompositionLoaded = () => {
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
-    const { codemod, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
+    const { codemod, compositionId, renameComposition, valid, validationMessage: compNameErrMessage, } = (0, use_rename_composition_1.useRenameComposition)({
         compositions,
         currentId: resolved.result.id,
         newId,
@@ -56,7 +57,7 @@ const RenameCompositionLoaded = () => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: 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, { ref: inputRef, 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: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), jsx_runtime_1.jsx(SlugPreview_1.SlugPreview, { action: "rename", currentName: resolved.result.id, input: newId, slug: compositionId }), compNameErrMessage ? (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: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => renameComposition({