base animation

src/pages/editor/components/sidebar/ObjectSettings.tsx

@@ -11,6 +11,7 @@ import {
     TransformSettings,
     GridSettings,
     MaskSettings,
+    EntranceAnimationSettings,
 } from "./settings";
 import TextInstruction from "./instructions/TextInstruction";
 
@@ -117,6 +118,10 @@ const ObjectSettings = ({
                 <GridSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
             )}
 
+            <EntranceAnimationSettings
+                selectedObject={roundedSelectedObject}
+                onUpdate={handleRoundedUpdate}
+            />
 
             <TransformSettings selectedObject={roundedSelectedObject} onUpdate={handleRoundedUpdate} />
         </div>

src/pages/editor/components/sidebar/constants/entranceAnimationOptions.ts

@@ -0,0 +1,12 @@
+import type { ItemsSelectType } from "@/components/Select";
+
+export const ENTRANCE_ANIMATION_SELECT_ITEMS: ItemsSelectType[] = [
+  { value: "none", label: "بدون انیمیشن" },
+  { value: "fade", label: "محو شدن (Fade)" },
+  { value: "flyInLeft", label: "ورود از چپ" },
+  { value: "flyInRight", label: "ورود از راست" },
+  { value: "flyInTop", label: "ورود از بالا" },
+  { value: "flyInBottom", label: "ورود از پایین" },
+  { value: "zoomIn", label: "بزرگ‌نمایی (Zoom in)" },
+  { value: "zoomOut", label: "ریزنمایی (Zoom out)" },
+];

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

@@ -0,0 +1,50 @@
+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";
+
+type Props = {
+  selectedObject: EditorObject;
+  onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
+  const anim = selectedObject.entranceAnimation ?? "none";
+  const duration = selectedObject.entranceDurationMs ?? DEFAULT_ENTRANCE_DURATION_MS;
+
+  return (
+    <div className="pt-4 flex flex-col gap-4 border-t border-border">
+      <Select
+        label="انیمیشن هنگام نمایش"
+        items={ENTRANCE_ANIMATION_SELECT_ITEMS}
+        value={anim}
+        onChange={(e) => {
+          const v = e.target.value as EditorObject["entranceAnimation"];
+          onUpdate(selectedObject.id, {
+            entranceAnimation: v === "none" ? undefined : v,
+            ...(v === "none" || !v ? { entranceDurationMs: undefined } : {}),
+          });
+        }}
+      />
+      {anim !== "none" && (
+        <Input
+          label="مدت انیمیشن (میلی‌ثانیه)"
+          type="number"
+          min={100}
+          max={4000}
+          value={duration}
+          onChange={(e) => {
+            const n = parseInt(e.target.value, 10);
+            if (Number.isNaN(n)) return;
+            onUpdate(selectedObject.id, {
+              entranceDurationMs: Math.min(4000, Math.max(100, n)),
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EntranceAnimationSettings;

src/pages/editor/components/sidebar/settings/index.ts

@@ -8,4 +8,5 @@ export { default as AlignmentSettings } from "./AlignmentSettings";
 export { default as TransformSettings } from "./TransformSettings";
 export { default as GridSettings } from "./GridSettings";
 export { default as MaskSettings } from "./MaskSettings";
+export { default as EntranceAnimationSettings } from "./EntranceAnimationSettings";