פרומפט ליצירת מדריך אינטראקטיבי עם Spotlight

צור לי מדריך אינטראקטיבי (Tutorial) עבור [שם הדף/הכלי] עם התכונות הבאות:

### דרישות עיצוב:
1. **אפקט Spotlight** -
 בכל שלב, המסך מוחשך והאזור הרלוונטי מודגש עם:
   - מסכה (mask) SVG שמחשיכה את כל המסך מלבד האזור המודגש
   - גלו (glow) כחול מסביב לאזור המודגש
   - שקיפות של כ-75% על הרקע

2. **אנימציות Morph** - מעברים חלקים בין שלבים:
   - Framer Motion עם `layoutId` לאלמנטים משותפים
   - Spring animation עם damping: 25, stiffness: 300
   - AnimatePresence 
עם mode="wait"

3. **מיקום דינמי של הכרטיס**:
   - חישוב אוטומטי של מיקום לפי האלמנט המודגש
   - תמיכה ב-4 כיוונים: left, right, top, bottom, center
   - התאמה לגודל המסך (responsive)

4. **Data Attributes לזיהוי אזורים**:
   - הוסף `data-tutorial="שם-האזור"` לכל אלמנט שצריך להדגיש
   - השתמש ב-querySelector למציאת האלמנטים

### מבנה כל שלב:
```javascript
{
  id: '
unique-id',
  title: 'כותרת השלב',
  content: 'תיאור מפורט',
  icon: LucideIcon,
  iconColor: 'text-color-600',
  bgColor: 'from-color-50 to-color-100',
  highlightSelector: '[data-tutorial="element-name"]', // או null למרכז
/הבא/דלג
	•	שמירה ב-localStorage שהמדריך הושלם
	•	כפתור עזר  position: 'left' | 'right' | 'top' | 'bottom' | 'center',
  tip: 'טיפ אופציונלי',
  details: [] // מידע נוסף אופציונלי
}
תכונות נוספות:
	•	Progress bar עם אנימציה
	•	אינדיקטורים של שלבים (dots) בתחתית
	•	כפתורי ניווט: הקוד
םה לפתיחה מחדש
	•	Hook מוכן לשימוש: useFlowEditorTutorial()
השלבים שאני רוצה:
	1	[תאר את השלב הראשון ואיזה אזור להדגיש]
	2	[תאר את השלב השני ואיזה אזור להדגיש]
	3	[המשך...]
שפה: [עברית RTL / אנגלית LTR]
---

**דוגמה לשימוש:**

צור לי מדריך אינטראקטיבי עבור עורך המסמכים עם התכונות הנ"ל.
הפרומפטהשלבים:
	1	ברוכים הבאים - מרכז המסך, הסבר כללי
	2	סרגל הכלים - הדגש את [data-tutorial="toolbar"], מיקום bottom
	3	אזור העריכה - הדגש את [data-tutorial="editor"], מיקום right
	4	שמירה ופרסום - הדגש את [data-tutorial="save-buttons"], מיקום bottom
	5	סיום - מרכז המסך, ברכות
שפה: עברית RTL
 הזה יפיק לך קומפוננטת Tutorial מלאה עם כל האפקטים והאנימציות! 🎯