@remotion/studio 4.0.280 → 4.0.284

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.280 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.284 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[45.22ms] Generated.
+[139.47ms] Generated.

package/dist/api/get-zod-schema-from-primitive.d.ts

@@ -0,0 +1,2 @@
+import type { ZodType } from '../components/get-zod-if-possible';
+export declare const getZodSchemaFromPrimitive: (value: unknown, z: ZodType) => import("zod").ZodString | import("zod").ZodNumber;

package/dist/api/get-zod-schema-from-primitive.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZodSchemaFromPrimitive = void 0;
+const getZodSchemaFromPrimitive = (value, z) => {
+    if (typeof value === 'string') {
+        return z.string();
+    }
+    if (typeof value === 'number') {
+        return z.number();
+    }
+    throw new Error('Unknown primitive type');
+};
+exports.getZodSchemaFromPrimitive = getZodSchemaFromPrimitive;

package/dist/api/use-visual-control.d.ts

@@ -0,0 +1,7 @@
+import type { z } from 'zod';
+type VisualControl = <T>(key: string, value: T, schema?: z.ZodTypeAny) => T;
+type UseVisualControl = {
+    visualControl: VisualControl;
+};
+export declare const useVisualControl: () => UseVisualControl;
+export {};

package/dist/api/use-visual-control.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVisualControl = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_zod_if_possible_1 = require("../components/get-zod-if-possible");
+const VisualControls_1 = require("../visual-controls/VisualControls");
+const get_zod_schema_from_primitive_1 = require("./get-zod-schema-from-primitive");
+const useVisualControl = () => {
+    const { addHook, removeHook, setControl, updateHandles } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const changed = (0, react_1.useRef)(false);
+    const [stack] = (0, react_1.useState)(() => {
+        return new Error().stack;
+    });
+    const [hook] = (0, react_1.useState)(() => {
+        return (0, VisualControls_1.makeHook)(stack);
+    });
+    (0, react_1.useEffect)(() => {
+        if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+            return;
+        }
+        addHook(hook);
+    }, [addHook, hook]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeHook(hook);
+        };
+    }, [hook, removeHook]);
+    (0, react_1.useEffect)(() => {
+        if (changed.current) {
+            updateHandles();
+            changed.current = false;
+        }
+    }, [updateHandles]);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    return (0, react_1.useMemo)(() => ({
+        visualControl(key, value, schema) {
+            if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+                return value;
+            }
+            if (!z) {
+                return value;
+            }
+            const { same, currentValue } = setControl(hook, key, {
+                valueInCode: value,
+                unsavedValue: value,
+                schema: schema !== null && schema !== void 0 ? schema : (0, get_zod_schema_from_primitive_1.getZodSchemaFromPrimitive)(value, z),
+                stack: new Error().stack,
+            });
+            if (!same) {
+                changed.current = true;
+            }
+            return currentValue;
+        },
+    }), [handles, hook, setControl, z]);
+};
+exports.useVisualControl = useVisualControl;

package/dist/components/RenderModal/FrameRangeSetting.js

@@ -3,15 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FrameRangeSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const InputDragger_1 = require("../NewComposition/InputDragger");
 const layout_1 = require("./layout");
-const numberWrapper = {
-    minWidth: '39px',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    fontSize: '14px',
-};
+const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const INPUT_WIDTH = 40;
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
     const minStartFrame = 0;
     const maxEndFrame = durationInFrames - 1;
@@ -21,6 +16,12 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
         setEndFrame(newEndFrame);
     }, [setEndFrame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: startFrame }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), (0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: endFrame })] })] }));
+    const onStartFrameChanged = (0, react_1.useCallback)((newVal) => {
+        onStartFrameChangedDirectly(parseInt(newVal, 10));
+    }, [onStartFrameChangedDirectly]);
+    const onEndFrameChanged = (0, react_1.useCallback)((newVal) => {
+        onEndFrameChangedDirectly(parseInt(newVal, 10));
+    }, [onEndFrameChangedDirectly]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { min: minStartFrame, max: endFrame - 1, name: "Start frame", value: startFrame, step: 1, onTextChange: onStartFrameChanged, onValueChange: onStartFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', (0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { min: startFrame + 1, max: maxEndFrame, name: "End frame", value: endFrame, step: 1, onTextChange: onEndFrameChanged, onValueChange: onEndFrameChangedDirectly, status: "ok", rightAlign: true, style: { width: INPUT_WIDTH } }) })] })] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

package/dist/components/RenderModal/SchemaEditor/ZodMatrixEditor.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { UpdaterFunction } from './ZodSwitch';
+import type { JSONPath } from './zod-types';
+export declare const ZodMatrixEditor: React.FC<{
+    readonly schema: z.ZodTypeAny;
+    readonly jsonPath: JSONPath;
+    readonly value: unknown[];
+    readonly defaultValue: unknown[];
+    readonly setValue: UpdaterFunction<unknown[]>;
+    readonly onSave: UpdaterFunction<unknown[]>;
+    readonly showSaveButton: boolean;
+    readonly onRemove: null | (() => void);
+    readonly saving: boolean;
+    readonly saveDisabledByParent: boolean;
+    readonly mayPad: boolean;
+}>;

package/dist/components/RenderModal/SchemaEditor/ZodMatrixEditor.js

@@ -0,0 +1,91 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodMatrixEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const Fieldset_1 = require("./Fieldset");
+const SchemaLabel_1 = require("./SchemaLabel");
+const SchemaSeparationLine_1 = require("./SchemaSeparationLine");
+const SchemaVerticalGuide_1 = require("./SchemaVerticalGuide");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
+const ZodFieldValidation_1 = require("./ZodFieldValidation");
+const create_zod_values_1 = require("./create-zod-values");
+const deep_equal_1 = require("./deep-equal");
+const local_state_1 = require("./local-state");
+const rowStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+};
+const ZodMatrixEditor = ({ schema, jsonPath, setValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, saveDisabledByParent, mayPad, }) => {
+    const { localValue, onChange, RevisionContextProvider, reset } = (0, local_state_1.useLocalState)({
+        unsavedValue: value,
+        schema,
+        setValue,
+        savedValue: defaultValue,
+    });
+    const [expanded, setExpanded] = (0, react_1.useState)(true);
+    const def = schema._def;
+    const suffix = (0, react_1.useMemo)(() => {
+        return expanded ? ' [' : ' [...] ';
+    }, [expanded]);
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const isDefaultValue = (0, react_1.useMemo)(() => {
+        return (0, deep_equal_1.deepEqual)(localValue.value, defaultValue);
+    }, [defaultValue, localValue]);
+    const dimensions = Math.sqrt(localValue.value.length);
+    if (!Number.isInteger(dimensions)) {
+        throw new Error('Invalid matrix');
+    }
+    const chunkedItems = (0, react_1.useMemo)(() => {
+        return localValue.value.reduce((acc, item, index) => {
+            const chunkIndex = Math.floor(index / dimensions);
+            acc[chunkIndex] = acc[chunkIndex] || [];
+            acc[chunkIndex].push(item);
+            return acc;
+        }, []);
+    }, [localValue.value, dimensions]);
+    return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                }, children: (0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onReset: reset, isDefaultValue: isDefaultValue, jsonPath: jsonPath, onRemove: onRemove, suffix: suffix, onSave: () => {
+                        onSave(() => localValue.value, false, false);
+                    }, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, valid: localValue.zodValidation.success, handleClick: () => setExpanded(!expanded) }) }), expanded ? ((0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsxs)(SchemaVerticalGuide_1.SchemaVerticalGuide, { isRoot: false, children: [chunkedItems.map((row, rowIndex) => {
+                            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { children: (0, jsx_runtime_1.jsx)("div", { style: rowStyle, children: row.map((item, _index) => {
+                                        var _a;
+                                        const actualIndex = rowIndex * dimensions + _index;
+                                        return ((0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor, { onChange: onChange, value: item, def: def, index: actualIndex, jsonPath: jsonPath, defaultValue: (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[actualIndex]) !== null && _a !== void 0 ? _a : (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes), onSave: onSave, showSaveButton: showSaveButton, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: mayPad, mayRemove: false }) }, `${_index}${localValue.keyStabilityRevision}`));
+                                    }) }) }, `${rowIndex}${localValue.keyStabilityRevision}`));
+                        }), value.length === 0 ? ((0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaArrayItemSeparationLine, { schema: schema, index: 0, onChange: onChange, isLast: true, showAddButton: true })) : null] }) })) : null, (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] }));
+};
+exports.ZodMatrixEditor = ZodMatrixEditor;

package/dist/components/VisualControls/ClickableFileName.d.ts

@@ -0,0 +1,3 @@
+export declare const ClickableFileName: ({ stack }: {
+    readonly stack: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/ClickableFileName.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickableFileName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
+const get_original_stack_trace_1 = require("./get-original-stack-trace");
+const label = {
+    fontSize: 13,
+};
+const ClickableFileName = ({ stack }) => {
+    const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(stack);
+    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
+    const hoverEffect = titleHovered && originalFileName;
+    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
+        setTitleHovered(true);
+    }, []);
+    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
+        setTitleHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            cursor: originalFileName ? 'pointer' : undefined,
+            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+        };
+    }, [originalFileName, hoverEffect]);
+    const onClick = (0, react_1.useCallback)(async () => {
+        if (!originalFileName) {
+            return;
+        }
+        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName);
+    }, [originalFileName]);
+    return ((0, jsx_runtime_1.jsx)("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName
+            ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName)
+            : 'Loading...' }));
+};
+exports.ClickableFileName = ClickableFileName;

package/dist/components/VisualControls/VisualControlHandle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { VisualControlHook } from '../../visual-controls/VisualControls';
+import { type VisualControlValue } from '../../visual-controls/VisualControls';
+export declare const VisualControlHandle: React.FC<{
+    readonly value: VisualControlValue;
+    readonly keyName: string;
+    readonly hook: VisualControlHook;
+}>;

package/dist/components/VisualControls/VisualControlHandle.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
+const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
+const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const container = {
+    marginBottom: 10,
+};
+const VisualControlHandle = ({ value, keyName, hook }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
+    const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
+        handles: state.handles,
+        hook,
+        key: keyName,
+    });
+    const { localValue, RevisionContextProvider, onChange } = (0, local_state_1.useLocalState)({
+        schema: value.schema,
+        setValue: (updater) => updateValue(hook, keyName, updater(currentValue)),
+        unsavedValue: currentValue,
+        savedValue: value.valueInCode,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: true, saving: false, saveDisabledByParent: false, onSave: () => undefined, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) }) }));
+};
+exports.VisualControlHandle = VisualControlHandle;

package/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -0,0 +1 @@
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ClickableFileName_1 = require("./ClickableFileName");
+const VisualControlHandle_1 = require("./VisualControlHandle");
+const Control = ({ hook }) => {
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const handle = handles[hook.id];
+    if (!handle) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { stack: hook.stack }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 1 }), Object.entries(handle).map(([key, value]) => {
+                return ((0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value, hook: hook }, key));
+            })] }, hook.id));
+};
+const container = {
+    padding: 12,
+    overflowY: 'auto',
+};
+const VisualControlsContent = () => {
+    const { hooks: controls } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: controls.map((hook) => ((0, jsx_runtime_1.jsx)(Control, { hook: hook }, hook.id))) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

package/dist/components/VisualControls/VisualControlsTabs.d.ts

@@ -0,0 +1 @@
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/VisualControls/VisualControlsTabs.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const VisualControlsContent = () => {
+    const { controls } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: controls.map((control) => ((0, jsx_runtime_1.jsx)("div", { children: control.id }, control.id))) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

package/dist/components/VisualControls/get-original-stack-trace.d.ts

@@ -0,0 +1,2 @@
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export declare const useOriginalFileName: (stack: string) => OriginalPosition | null;

package/dist/components/VisualControls/get-original-stack-trace.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOriginalFileName = void 0;
+const react_1 = require("react");
+const get_stack_1 = require("../Timeline/TimelineStack/get-stack");
+const useOriginalFileName = (stack) => {
+    const [originalFileName, setOriginalFileName] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(stack, 'visual-control')
+            .then((frame) => {
+            setOriginalFileName(frame);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error('Could not get original location of Sequence', err);
+        });
+    }, [stack]);
+    return originalFileName;
+};
+exports.useOriginalFileName = useOriginalFileName;

package/dist/esm/internals.mjs

@@ -18426,7 +18426,8 @@ var container35 = {
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
-  marginRight: 6
+  marginRight: 6,
+  flexShrink: 0
 };
 var layerPointedDown = null;
 var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
@@ -24446,13 +24447,7 @@ var MultiRangeSlider = ({
 
 // src/components/RenderModal/FrameRangeSetting.tsx
 import { jsx as jsx234, jsxs as jsxs120 } from "react/jsx-runtime";
-var numberWrapper = {
-  minWidth: "39px",
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
-  fontSize: "14px"
-};
+var INPUT_WIDTH = 40;
 var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
   const minStartFrame = 0;
   const maxEndFrame = durationInFrames - 1;
@@ -24462,6 +24457,12 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
   const onEndFrameChangedDirectly = useCallback113((newEndFrame) => {
     setEndFrame(newEndFrame);
   }, [setEndFrame]);
+  const onStartFrameChanged = useCallback113((newVal) => {
+    onStartFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onStartFrameChangedDirectly]);
+  const onEndFrameChanged = useCallback113((newVal) => {
+    onEndFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onEndFrameChangedDirectly]);
   return /* @__PURE__ */ jsxs120("div", {
     style: optionRow,
     children: [
@@ -24473,8 +24474,19 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
         style: rightRow,
         children: [
           /* @__PURE__ */ jsx234("div", {
-            style: numberWrapper,
-            children: startFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx234(InputDragger, {
+              min: minStartFrame,
+              max: endFrame - 1,
+              name: "Start frame",
+              value: startFrame,
+              step: 1,
+              onTextChange: onStartFrameChanged,
+              onValueChange: onStartFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           }),
           /* @__PURE__ */ jsx234(MultiRangeSlider, {
             min: minStartFrame,
@@ -24485,9 +24497,21 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
             onLeftThumbDrag: onStartFrameChangedDirectly,
             onRightThumbDrag: onEndFrameChangedDirectly
           }),
+          " ",
           /* @__PURE__ */ jsx234("div", {
-            style: numberWrapper,
-            children: endFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx234(InputDragger, {
+              min: startFrame + 1,
+              max: maxEndFrame,
+              name: "End frame",
+              value: endFrame,
+              step: 1,
+              onTextChange: onEndFrameChanged,
+              onValueChange: onEndFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           })
         ]
       })

package/dist/esm/previewEntry.mjs

@@ -18708,7 +18708,8 @@ var container35 = {
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
-  marginRight: 6
+  marginRight: 6,
+  flexShrink: 0
 };
 var layerPointedDown = null;
 var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
@@ -24728,13 +24729,7 @@ var MultiRangeSlider = ({
 
 // src/components/RenderModal/FrameRangeSetting.tsx
 import { jsx as jsx235, jsxs as jsxs120 } from "react/jsx-runtime";
-var numberWrapper = {
-  minWidth: "39px",
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
-  fontSize: "14px"
-};
+var INPUT_WIDTH = 40;
 var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
   const minStartFrame = 0;
   const maxEndFrame = durationInFrames - 1;
@@ -24744,6 +24739,12 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
   const onEndFrameChangedDirectly = useCallback114((newEndFrame) => {
     setEndFrame(newEndFrame);
   }, [setEndFrame]);
+  const onStartFrameChanged = useCallback114((newVal) => {
+    onStartFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onStartFrameChangedDirectly]);
+  const onEndFrameChanged = useCallback114((newVal) => {
+    onEndFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onEndFrameChangedDirectly]);
   return /* @__PURE__ */ jsxs120("div", {
     style: optionRow,
     children: [
@@ -24755,8 +24756,19 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
         style: rightRow,
         children: [
           /* @__PURE__ */ jsx235("div", {
-            style: numberWrapper,
-            children: startFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx235(InputDragger, {
+              min: minStartFrame,
+              max: endFrame - 1,
+              name: "Start frame",
+              value: startFrame,
+              step: 1,
+              onTextChange: onStartFrameChanged,
+              onValueChange: onStartFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           }),
           /* @__PURE__ */ jsx235(MultiRangeSlider, {
             min: minStartFrame,
@@ -24767,9 +24779,21 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
             onLeftThumbDrag: onStartFrameChangedDirectly,
             onRightThumbDrag: onEndFrameChangedDirectly
           }),
+          " ",
           /* @__PURE__ */ jsx235("div", {
-            style: numberWrapper,
-            children: endFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx235(InputDragger, {
+              min: startFrame + 1,
+              max: maxEndFrame,
+              name: "End frame",
+              value: endFrame,
+              step: 1,
+              onTextChange: onEndFrameChanged,
+              onValueChange: onEndFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           })
         ]
       })