# مسرح الانعكاس

> الشاشة نفسها بالإنجليزية والعربية جنبًا إلى جنب حول محور في المنتصف، مع ملاحظات عمّا تبقيه كل قاعدة وما تعكسه.

الصفحة: https://ritla.app/ar/ui/mirror-stage

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add mirror-stage
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/mirror-stage
```

الاعتماديات: `@phosphor-icons/react`

## الاستخدام

```tsx
import { MirrorNote, MirrorStage } from "@/components/ui/mirror-stage";

<MirrorStage
  label="The same transfer form in English and in Arabic, mirrored around a centre line."
  caption="Mirror axis"
  start={<TransferScreen lang="en" />}
  end={<TransferScreen lang="ar" />}
  notes={<MirrorNote icon={CheckIcon}>The check stays a check</MirrorNote>}
  motion={{ pauseLabel: "Pause motion", playLabel: "Play motion" }}
/>
```

## مرجع الخصائص

### `MirrorStage`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `start / end` | `ReactNode` | لا يوجد | الشاشتان، كل واحدة باتجاهها ولغتها (`dir` و`lang`) تضعهما الصفحة. شاشة لغة الصفحة في البداية. |
| `label` | `string` | لا يوجد | وصف المسرح كله بالكلمات، فهو يُقرأ صورة واحدة. |
| `caption` | `ReactNode` | لا يوجد | الكلمات فوق المحور. |
| `notes` | `ReactNode` | لا يوجد | عناصر `MirrorNote` من الأعلى إلى الأسفل. |
| `noteRows` | `string` | لا يوجد | صفوف عمود الملاحظات من md، لتقف كل ملاحظة بمحاذاة الصف الذي تشرحه. |
| `startAside / endAside` | `ReactNode` | لا يوجد | شاشات إضافية عند الزاويتين الخارجيتين من xl. |
| `motion` | `{ pauseLabel; playLabel }` | لا يوجد | كلمات زر الإيقاف. أضفه حين يتحرك شيء داخل المسرح أكثر من خمس ثوانٍ. |

### `MirrorNote`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `icon` | `IconComponent` | لا يوجد | أيقونة Phosphor أو من Ritla UI؛ الاتجاهية تنعكس وفق قائمة Ritla UI. |
| `children` | `ReactNode` | لا يوجد | نص الملاحظة. |

## إمكانية الوصول

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: إلى زر إيقاف الحركة؛ الشاشتان داخل المسرح لا تستقبلان التركيز.

ARIA:

- المسرح صورة واحدة (`role="img"`) باسمها من `label`، والشاشتان `inert` فلا يدخل أحد نموذجًا لا يُرسل.
- زر الإيقاف زر حقيقي خارج الصورة، تقول كلماته ما يفعله الضغط، ويبدأ موقوفًا لمن طلب تقليل الحركة.
- دخول الشاشتين من المحور لا يحدث مع تقليل الحركة.

## ملاحظات العربية والاتجاه

ينعكس:

- في صفحة عربية تقع شاشة البداية على اليمين، وتدخل الشاشتان من جهة المحور.
- أقل من md يُطوى المحور: البداية، ثم الملاحظات صفًّا، ثم النهاية.

لا ينعكس:

- كل شاشة تحتفظ باتجاهها الخاص، فالشاشة الإنجليزية من اليسار في أي صفحة.
- علامة الصح في الملاحظات لا تنعكس، والسهم ينعكس.

الأرقام: الأرقام داخل الشاشات تتبع إعداد الأرقام في كل مكوّن.

الخط العربي: الملاحظات `label-12` Medium، والخط يتبع لغة الصفحة.

النص ثنائي الاتجاه: رقم الهاتف داخل الشاشة العربية يبقى من اليسار إلى اليمين لأنه حقل الهاتف الحقيقي.