# مشخصات درس‌نامه: کامپوننت‌ها، وضعیت‌ها و انیمیشن (Components, Interactive States & Animations)
- **شناسه در سیلابس:** `L5.7`
- **فصل:** فصل ۵: طراحی تجربه و هویت محصول (Ch 5)
- **نوع محتوا:** 📘 درس‌نامه متنی
- **زمان تقریبی مطالعه:** ۱۵ دقیقه
- **پیش‌نیازهای مستقیم:** `L5.6` (طراحی واکنش‌گرا)

---

## ۱. اهداف یادگیری (Learning Objectives - Bloom's Taxonomy)
دانشجو پس از مطالعهٔ این درس‌نامه باید بتواند:
- [ ] **درک کند (Understand):** چرا یک کامپوننت وب (دکمه، کارت، اینپوت، مودال) یک شکل گرافیکی مرده نیست، بلکه یک ماشین وضعیت (State Machine) چندحالته است.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** پنج وضعیت ضروری رابط کاربری شامل: **حالت پیش‌فرض (Default)، شناور (Hover)، فشرده‌شده (Active)، فوکوس کیبورد (Focus)، و حالت در حال بارگذاری/غیرفعال (Loading/Disabled)** را بررسی و مدیریت کند.
- [ ] **به‌کار ببندد (Apply):** انیمیشن‌های میکرو و گذارهای نرم و سریع (Micro-Animations: بین ۱۵۰ تا ۲۵۰ میلی‌ثانیه) را برای زنده کردن کارت‌ها و دکمه‌های پروژه محوری پیاده کند.
- [ ] **به‌کار ببندد (Apply):** آیکون‌های مدرن، سبک و هماهنگ را از مراجع ترند جهانی به ویژه **Lucide Icons (https://lucide.dev/)** و **Tabler Icons** در اجزای پورتفولیو و پنل ادمین ادغام نماید.
- [ ] **تحلیل/ارزیابی کند (Evaluate):** خطای استفاده از انیمیشن‌های نمایشی و طولانی را تشخیص داده و مرز میان انیمیشن کاربردی با اغراق‌های آزاردهنده را رعایت کند.

---

## ۲. محدوده و مرزهای محتوا (Scope & Boundaries)

### آنچه باید پوشش داده شود (In-Scope):
1. **آناتومی یک کامپوننت تعاملی زنده:**
   * کامپوننتی که در برابر لمس یا اشاره موس کاربر واکنشی نشان ندهد، حس یک صفحه پرینت‌شده کاغذی و بی‌کیفیت را القا می‌کند.
2. **پنج وضعیت حیاتی رابط کاربری (The 5 Essential States):**
   * **۱. پیش‌فرض (Idle / Default):** ظاهر نرمال و باوقار کامپوننت در حالت استراحت.
   * **۲. اشاره‌گر موس (Hover):** تغییر ملایم روشنایی، هاله نورانی دور کارت یا بالا آمدن نامحسوس (`translate-y-[-2px]`).
   * **۳. فشرده‌شدن (Active / Pressed):** کوچک شدن جزئی مقیاس (`scale-[0.98]`) که حس فیزیکی کلیک شدن کلید را تداعی می‌کند.
   * **۴. فوکوس دسترسی‌پذیری (Focus / Focus-Visible):** حلقه درخشان دور اینپوت یا دکمه هنگام جابجایی با کلید Tab برای کاربران کیبورد.
   * **۵. در حال بارگذاری و قفل (Loading & Disabled):** چرخش اسپینر انیمیشنی، کم‌رنگ شدن دکمه (`opacity-50`) و غیرفعال شدن کلیک مجدد جهت پیشگیری از ارسال تکراری فرم‌ها.
3. **فلسفه انیمیشن‌های میکرو (Micro-Animations):**
   * راز محصولات میلیاردی اپل و استارتاپ‌های پیشتاز: استفاده از کلاس طلایی `transition-all duration-200 ease-in-out`.
   * تفاوت انیمیشن‌های چابک و سریع (زیر ۲۵۰ میلی‌ثانیه) با انیمیشن‌های نمایشی سنگین که وقت کاربر را تلف می‌کنند.
4. **جعبه‌ابزار آیکون‌های مدرن: پیشتازی Lucide Icons:**
   * معرفی **Lucide Icons (lucide.dev)** به عنوان زبان رسمی آیکون در پروژه‌های Next.js و کامپوننت‌های shadcn/ui (آیکون‌های تمیز، هماهنگ، خطی و بسیار سبک).
   * معرفی **Tabler Icons** به عنوان گزینه آلترناتیو قدرتمند.
   * انتخاب آیکون‌های پروژه پورتفولیو: `ExternalLink` (لینک دموی زنده)، `Github` (کدها)، `Edit` (ویرایش پروژه)، `Trash2` (حذف)، و `Settings` (پنل سئو).
5. **پیاده‌سازی تعاملات در پروژه پورتفولیوی پویا:**
   * کارت‌های پروژه‌ها: تغییر رنگ بوردر به سفید ملایم هنگام هاور همراه با انیمیشن نرم.
   * دکمه ذخیره در پنل ادمین: تبدیل به حالت اسپینر لودینگ هنگام ثبت در دیتابیس.
   * مودال جزئیات: باز شدن با محو شدن پس‌زمینه شیشه‌ای (`backdrop-blur-md`).
6. **کال‌اوت‌های Quera:**
   * `<details class="violet">`: چرا Lucide Icons به انتخاب شماره یک ایجنت‌های وایب کدینگ در سال‌های اخیر تبدیل شده است؟
   * `<details class="red">`: تله انیمیشن‌های سیرکی؛ انیمیشن برای دادن بازخورد است نه خودنمایی! هر انیمیشنی که بیش از ۳۰۰ میلی‌ثانیه طول بکشد، کاربر را کلافه می‌کند.

### آنچه نباید وارد آن شویم (Out-of-Scope):
- کتابخانه‌های انیمیشن سنگین سه‌بعدی نظیر Three.js یا کدهای پیچیده وب‌جی‌ال (در فصول پیشرفته بررسی می‌شود).
- رندرینگ فریم‌ورک‌های انیمیشن ری‌اکتی مثل Framer Motion به صورت عمیق (در فصل ۶ به قدر کفایت لمس خواهد شد).

---

## ۳. مفاهیم کلیدی و کلمات تخصصی (Key Concepts & Terms)

| اصطلاح انگلیسی | معادل فارسی مصوب | توضیح یک‌خطی ساده |
| :--- | :--- | :--- |
| Component States | وضعیت‌های کامپوننت | حالت‌های بصری گوناگون یک عنصر در پاسخ به رویدادهای کاربر (هاور، فوکوس، لودینگ) |
| Micro-Animation | انیمیشن خرد / ظریف | پویانمایی‌های بسیار سریع و زیرکانه (زیر ۳۰۰ میلی‌ثانیه) برای ایجاد حس پویایی و زنده بودن |
| Transition Duration | مدت زمان گذار | زمان سپری‌شده برای تغییر وضعیت یک استایل بصری به وضعیت دیگر (معمولاً ۱۵۰ تا ۲۰۰ میلی‌ثانیه) |
| Lucide Icons | آیکون‌های لوسید | مجموعه آیکون‌های خطی و مدرن متن‌باز استاندارد در اکوسیستم مدرن فرانت‌اند |
| Tactile Feedback | بازخورد لمسی بصری | حسی که کاربر از فشرده‌شدن و پاسخ دکمه روی صفحه دریافت می‌کند |

---

## ۴. جایگاه‌های تصاویر و نمودارها (Visual & Diagram Placeholders)
> **راهنمای ایجنت نویسنده:** تمام تصاویر باید در پوشهٔ `images/` قرار گرفته و در قالب جدول تک‌خانه‌ای وسط‌چین با کپشن تفصیلی درج شوند:

1. **تصویر کاور درس:** `images/cover.png`
   * **موضوع:** کاور مدرن با تم تیره که دکمه‌های شیشه‌ای شناور را با تغییر وضعیت نوری و ذرات حرکتی میکرو به صورت زنده نشان می‌دهد.
2. **نوار پنج وضعیت استاندارد یک دکمه:** `images/five-ui-states-strip.png`
   * **موضوع:** اسکرین‌شات مقایسه‌ای ۵ حالت متوالی: ۱. پیش‌فرض $\rightarrow$ ۲. شناور (Hover) $\rightarrow$ ۳. فشرده (Active) $\rightarrow$ ۴. فوکوس $\rightarrow$ ۵. لودینگ با اسپینر.
3. **نمودار سرعت و منحنی انیمیشن‌های بهینه:** `images/animation-timing-curves.png`
   * **موضوع:** اینفوگرافیک مقایسه‌ای: منحنی گذار چابک ۲۰۰ میلی‌ثانیه‌ای (Snappy) در برابر انیمیشن کش‌دار و کند ۱ ثانیه‌ای.
4. **ویترین آیکون‌های منتخب Lucide:** `images/lucide-icons-showcase.png`
   * **موضوع:** کادر منظم آیکون‌های پرکاربرد پورتفولیو (Github, ExternalLink, Sparkles, Folder, Settings, Lock) با کدهای استاندارد.
5. **کارت پروژه تعاملی در عمل:** `images/interactive-card-hover-demo.png`
   * **موضوع:** نمایش تصویری کارت پورتفولیو پیش از اشاره موس و پس از هاور (با افکت نور ملایم، بالا آمدن ۲ پیکسلی و آیکون لینک).

---

## ۵. بخش‌بندی و ساختار محتوایی پیشنهادی درس‌نامه (`README.md`)

1. **تیتر اصلی:** `# کامپوننت‌ها، وضعیت‌ها و انیمیشن: دمیدن جان و زندگی به اجزای صفحه`
2. **مقدمه:** چرا تفاوت یک وب‌سایت مرده با یک محصول فوق‌العاده زنده، در ریزه‌کاری‌های تعاملی پنهان است؟
3. **جدول کاور درس**
4. **ماشین وضعیت: پنج حالت حیاتی هر کامپوننت:**
   * حالت Idle، Hover، Active، Focus و Loading.
5. **باکس نکته Quera (`<details class="violet">`):** نقش حیاتی حالت Focus در دسترسی‌پذیری کار با کیبورد.
6. **میکروانیمیشن‌ها: فرمول طلایی حرکت نرم (۲۰۰ میلی‌ثانیه):**
   * چرا انیمیشن‌های طولانی دشمن تجربه کاربری هستند؟
   * قدرت کلاس‌های `transition-all duration-200`.
7. **آیکون‌های ترند و مدرن وب: چرا همه از Lucide Icons استفاده می‌کنند؟:**
   * بررسی مزایای Lucide و Tabler در برابر فونت‌آیکون‌های قدیمی.
   * جدول آیکون‌های کاربردی پروژه پورتفولیو.
8. **تعاملات زنده در پروژه پورتفولیوی پویا:**
   * رفتار کارت‌ها، فرم‌های ادمین و مودال با افکت Backdrop Blur.
9. **باکس هشدار Quera (`<details class="red">`):** انیمیشن در خدمت بازخورد است، نه نمایش سیرک!
10. **جمع‌بندی درس‌نامه:** مجهز شدن اجزای بصری و ورود به ایستگاه حیاتی یکپارچه‌سازی در سیستم طراحی (Design System).

---

## ۶. معیارهای پذیرش (Acceptance Criteria for Reviewer)
- [ ] پنج وضعیت استاندارد کامپوننت‌ها به روشنی و با مصادیق ملموس تفکیک شده باشند.
- [ ] استانداردهای زمانی میکروانیمیشن‌ها (زیر ۳۰۰ میلی‌ثانیه) همراه با نقد انیمیشن‌های سنگین ذکر شوند.
- [ ] مجموعه آیکون‌های Lucide Icons و نحوه استفاده از آن‌ها در پروژه معرفی گردد.
- [ ] تعاملات و وضعیت‌های اختصاصی پورتفولیوی پویا (دکمه ذخیره، کارت‌ها و مودال) مستند شوند.