# إطار النافذة

> إطار يشبه نافذة المتصفح حول شاشة أو قالب، فيُقرأ تطبيقًا لا جزءًا من الصفحة: ثلاث نقاط والعنوان ووسم اختياري فوق المحتوى.

الصفحة: https://ritla.app/ar/ui/window-frame

## التثبيت

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

```bash
npx ritla add window-frame
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/window-frame
```

## الاستخدام

```tsx
import { WindowFrame } from "@/components/ui/window-frame";

<WindowFrame url="ritla.app/blocks/dashboard-shell" label="Sample data">
  <DashboardShell … />
</WindowFrame>
```

## أمثلة

### شاشة عربية داخل الإطار

شريط الإطار واجهة متصفح، فيبقى بتخطيط واحد في كل لغة: النقاط على اليسار والعنوان من اليسار إلى اليمين. المحتوى تحته يأخذ اتجاه الصفحة أو اتجاهه الخاص، فتُقرأ الشاشة العربية من اليمين.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/window-frame-arabic-inside

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

### `WindowFrame`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `children` | `ReactNode` | لا يوجد | ما تعرضه النافذة: شاشة أو قالب أو لقطة. |
| `url` | `string` | لا يوجد | العنوان في الشريط، ويُقرأ دائمًا من اليسار إلى اليمين. |
| `label` | `ReactNode` | لا يوجد | وسم قصير في نهاية الشريط، مثل «بيانات تجريبية». |
| `shadow` | `"page" \| "band" \| "none"` | `"page"` | ظل حادّ تحت النافذة نحو نهاية السطر: على الصفحة، أو أغمق قليلًا على شريط سماوي، أو بلا ظل. |
| `…` | `ComponentProps<"div">` | لا يوجد | خصائص `div`، مثل `aria-label`. |

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

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

- `Tab`: الإطار لا يتلقى التركيز؛ يصل Tab إلى ما بداخله فقط.

ARIA:

- النقاط الثلاث زخرفية ومخفية عن قارئ الشاشة.
- العنوان والوسم نص عادي يُقرأ كما هو؛ أضف `aria-label` إن احتاجت النافذة اسمًا.

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

ينعكس:

- المحتوى داخل الإطار يتبع اتجاه الصفحة أو اتجاهه الخاص.
- الظل الحادّ يقع نحو نهاية السطر، فيسقط أسفل اليسار بالعربية.

لا ينعكس:

- شريط الإطار: النقاط على اليسار والعنوان من اليسار إلى اليمين في كل لغة، كواجهة المتصفح.
- الوسم في نهاية الشريط، ونصه يأخذ اتجاهه من كلماته (`dir="auto"`).

الأرقام: لا أرقام يكتبها الإطار بنفسه؛ المحتوى يتبع إعداد الأرقام.

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

النص ثنائي الاتجاه: الشريط `dir="ltr"` والوسم `dir="auto"`، فوسم عربي مثل «بيانات تجريبية» يبقى سليمًا داخل الشريط.