delay in animation

src/pages/editor/components/sidebar/settings/EntranceAnimationSettings.tsx

@@ -2,7 +2,11 @@ import Select from "@/components/Select";
 import Input from "@/components/Input";
 import type { EditorObject } from "../../../store/editorStore";
 import { ENTRANCE_ANIMATION_SELECT_ITEMS } from "../constants/entranceAnimationOptions";
-import { DEFAULT_ENTRANCE_DURATION_MS } from "@/shared/entranceAnimation";
+import {
+  DEFAULT_ENTRANCE_DURATION_MS,
+  DEFAULT_ENTRANCE_DELAY_MS,
+  MAX_ENTRANCE_DELAY_MS,
+} from "@/shared/entranceAnimation";
 
 type Props = {
   selectedObject: EditorObject;
@@ -12,6 +16,7 @@ type Props = {
 const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
   const anim = selectedObject.entranceAnimation ?? "none";
   const duration = selectedObject.entranceDurationMs ?? DEFAULT_ENTRANCE_DURATION_MS;
+  const delayMs = selectedObject.entranceDelayMs ?? DEFAULT_ENTRANCE_DELAY_MS;
 
   return (
     <div className="pt-4 flex flex-col gap-4 border-t border-border">
@@ -23,12 +28,14 @@ const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
           const v = e.target.value as EditorObject["entranceAnimation"];
           onUpdate(selectedObject.id, {
             entranceAnimation: v === "none" ? undefined : v,
-            ...(v === "none" || !v ? { entranceDurationMs: undefined } : {}),
+            ...(v === "none" || !v
+              ? { entranceDurationMs: undefined, entranceDelayMs: undefined }
+              : {}),
           });
         }}
       />
       {anim !== "none" && (
-        <Input
+        <><Input
           label="مدت انیمیشن (میلی‌ثانیه)"
           type="number"
           min={100}
@@ -40,8 +47,20 @@ const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
             onUpdate(selectedObject.id, {
               entranceDurationMs: Math.min(4000, Math.max(100, n)),
             });
-          }}
-        />
+          }} /><Input
+            label="تأخیر قبل از شروع (میلی‌ثانیه)"
+            type="number"
+            min={0}
+            max={MAX_ENTRANCE_DELAY_MS}
+            value={delayMs}
+            onChange={(e) => {
+              const n = parseInt(e.target.value, 10);
+              if (Number.isNaN(n)) return;
+              const clamped = Math.min(MAX_ENTRANCE_DELAY_MS, Math.max(0, n));
+              onUpdate(selectedObject.id, {
+                entranceDelayMs: clamped === 0 ? undefined : clamped,
+              });
+            }} /></>
       )}
     </div>
   );