الثيم الافتراضي

المكوّنات

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

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

تجريبي

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

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

npx ritla add mirror-stage

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/mirror-stage

الاعتماديات التي يضيفها: @phosphor-icons/react

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

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، والخط يتبع لغة الصفحة.
النص ثنائي الاتجاه: رقم الهاتف داخل الشاشة العربية يبقى من اليسار إلى اليمين لأنه حقل الهاتف الحقيقي.