# مستكشف التفاصيل

> قائمة قواعد بجانب منصة تعرض عيّنة واحدة بطريقتين: قبل القاعدة وبعدها، مع الحكم والإصلاح في الكود.

الصفحة: https://ritla.app/ar/ui/detail-explorer

## التثبيت

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

```bash
npx ritla add detail-explorer
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/detail-explorer
```

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

## الاستخدام

```tsx
import { DetailExplorer } from "@/components/ui/detail-explorer";

<DetailExplorer
  chip='dir="rtl" lang="ar"'
  items={[
    {
      value: "phone",
      title: "Phone numbers",
      verdict: { before: "The digit groups swap places", after: "One number, in order" },
      fix: "unicode-bidi: isolate",
      render: (state) => (
        <p dir="rtl" lang="ar">
          اتصل بنا على {state === "before" ? "+966 55 123 4567" : <bdi dir="ltr">+966 55 123 4567</bdi>}
        </p>
      ),
    },
  ]}
/>
```

## أمثلة

### جولة تلقائية

مع `autoPlay` يمرّ المستكشف على عناصره وحده ما دام ظاهرًا: يعرض «قبل» ثم «بعد» ثم ينتقل. يتوقف نهائيًا عند اختيار تبويب أو حالة، وزره يوقفه ويشغّله، ولا يعمل حين يطلب القارئ تقليل الحركة.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/detail-explorer-tour

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

### `DetailExplorer`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `items` | `DetailExplorerItem[]` | لا يوجد | القواعد: `value` و`title` و`description` و`caption` و`verdict` و`fix` و`render(state)`. |
| `chip` | `string` | لا يوجد | كود في بداية المنصة: الإعداد الذي تشترك فيه كل العيّنات. |
| `value / defaultValue / onValueChange` | `string` | لا يوجد | العنصر المختار، مُتحكَّمًا به أو لا. |
| `copy` | `{ list, states, before, after, pause, play }` | لا يوجد | أسماء القائمة والمفتاح وتسميتا الحالتين وتسميتا زر الجولة؛ الافتراضي بلغة الصفحة. |
| `autoPlay` | `boolean` | `false` | جولة تلقائية بين العناصر، بزر إيقاف. |
| `interval` | `number` | `4600` | مدة العنصر الواحد في الجولة بالمللي ثانية. |

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

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

- `Tab`: إلى التبويب المختار، ثم مفتاح «قبل» و«بعد»، ثم زر الجولة.
- `ArrowDown` + `ArrowUp`: بين التبويبات حين تكون عمودًا (من `md`).
- `ArrowLeft` + `ArrowRight`: بين التبويبات حين تكون صفًا على الهاتف، باتجاه القراءة: السهم الأيسر هو التالي في العربية.

ARIA:

- القائمة تبويبات مسمّاة («التفاصيل»)، والمنصة لوحتها.
- «قبل» و«بعد» مجموعة أزرار اختيار مسمّاة («طريقة العرض»).
- الحكم منطقة حيّة (`aria-live="polite"`)، فيُقرأ حين تتغير الحالة.
- زر الجولة يقول ما سيفعله: «إيقاف الجولة» أو «تشغيل الجولة».

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

ينعكس:

- القائمة على اليمين والمنصة على اليسار، والسهم في التبويب المختار يشير إلى اليسار.
- شريط الجولة يمتلئ من اليمين.

لا ينعكس:

- الكود في الشريحة والإصلاح يبقى من اليسار إلى اليمين.
- العيّنات نفسها: كلٌّ يحمل `dir` و`lang` الخاصين به.

الأرقام: لا أرقام يكتبها المستكشف بنفسه؛ أرقام العيّنات كما تكتبها.

الخط العربي: عنوان التبويب `body-16` بوزن Medium والوصف `body-14`، والحكم `body-14` بوزن Medium، والكود `body-12` بخط أحادي المسافة.

النص ثنائي الاتجاه: كل «قبل» في المثال هو ما يرسمه المتصفح فعلًا دون القاعدة: الأرقام بعد الحروف العربية تصير أرقامًا عربية في خوارزمية الاتجاه، فتنعكس مجموعات رقم الهاتف غير المعزول.