أنماط الواجهة وrender-ui

المصدر: tests/schemas/08-patterns.orb

واجهة Orb تُقاد بالكامل بتأثيرات render-ui داخل انتقالات آلة الحالة (State Machine). لا يوجد JSX، لا ملفات قوالب، لا شجرة مكوّنات منفصلة. آلة الحالة هي منطق الواجهة.

Orbital Unit = Entity + Traits + Pages

كيف يعمل render-ui

["render-ui", "slot", { "type": "pattern", ...props }]

الوسيط	الوصف
`"slot"`	أين يُعرض المكوّن على الصفحة
`{ "type": "..." }`	أي مكوّن نمط يُستخدم
`...props`	إعدادات خاصة بالنمط

لمسح فتحة:

[
  "عرض_واجهة",
  "slot",
  null
]

الفتحات (Slots)

الفتحات تقسم الصفحة إلى مناطق مسماة. كل فتحة مملوكة لسمة واحدة في كل مرة.

الفتحة	الاستخدام النموذجي
`main`	منطقة المحتوى الأساسي
`modal`	حوارات النوافذ المنبثقة (نماذج، تأكيدات)
`drawer`	لوحة جانبية (عرض التفاصيل)
`sidebar`	تنقل جانبي دائم
`overlay`	طبقات ملء الشاشة
`hud-top` / `hud-bottom`	ترويسات/تذييلات دائمة
`toast`	إشعارات مؤقتة

فئات الأنماط

أنماط العرض

entity-table - جدول بيانات مع أعمدة وترتيب وإجراءات على الصفوف.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "entity-table",
    "كيان": "Product",
    "columns": [
      "name",
      "price",
      "stock",
      "category"
    ],
    "itemActions": [
      {
        "حدث": "VIEW",
        "تسمية": "View"
      },
      {
        "حدث": "EDIT",
        "تسمية": "Edit"
      },
      {
        "حدث": "DELETE",
        "تسمية": "Delete"
      }
    ]
  }
]

entity-detail - عرض تفاصيل للقراءة فقط لسجل واحد.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "entity-detail",
    "كيان": "Product",
    "حقول": [
      "name",
      "description",
      "price",
      "stock",
      "category"
    ]
  }
]

stats - بطاقات إحصائيات لوحة المعلومات (أعداد، إجماليات، ملخصات).

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "stats",
    "عناصر": [
      {
        "تسمية": "Total Products",
        "value": "@كيان.count"
      },
      {
        "تسمية": "Out of Stock",
        "value": "@كيان.outOfStock"
      }
    ]
  }
]

أنماط النماذج

form - نموذج مُولَّد تلقائياً لكيان. يعرض جميع الحقول أو مجموعة فرعية محددة.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "form",
    "كيان": "Product",
    "حقول": [
      {
        "اسم": "name",
        "تسمية": "Product Name",
        "مطلوب": true
      },
      {
        "اسم": "description",
        "تسمية": "Description",
        "نوع": "textarea"
      },
      {
        "اسم": "price",
        "تسمية": "Price",
        "نوع": "number",
        "مطلوب": true
      },
      {
        "اسم": "stock",
        "تسمية": "Stock",
        "نوع": "number"
      },
      {
        "اسم": "category",
        "تسمية": "Category"
      }
    ]
  }
]

form-section - نموذج داخل نافذة منبثقة أو درج، مع إرسال/إلغاء مربوط بأحداث.

[
  "عرض_واجهة",
  "modal",
  {
    "نوع": "form-section",
    "كيان": "Task",
    "حقول": [
      "title",
      "priority",
      "dueDate"
    ],
    "submitEvent": "SAVE",
    "cancelEvent": "CANCEL"
  }
]

مهم: استخدم submitEvent وcancelEvent (وليس onSubmit/onCancel - هذه مُهملة).

أنماط التنقل والترويسة

page-header - عنوان الصفحة مع أزرار إجراءات اختيارية.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "page-header",
    "عنوان": "Products",
    "subtitle": "Manage your product catalog",
    "actions": [
      {
        "حدث": "CREATE",
        "تسمية": "New Product",
        "متغير": "primary"
      }
    ]
  }
]

breadcrumb - مسار التنقل.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "breadcrumb",
    "عناصر": [
      {
        "تسمية": "Products",
        "مسار": "/products"
      },
      {
        "تسمية": "@كيان.name"
      }
    ]
  }
]

أنماط الحالة

empty-state - يُعرض عندما لا تحتوي القائمة على عناصر.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "empty-state",
    "عنوان": "No products yet",
    "وصف": "Add your first product to get started",
    "actions": [
      {
        "حدث": "CREATE",
        "تسمية": "Add Product"
      }
    ]
  }
]

loading-state - مؤشر تحميل أثناء جلب البيانات.

[
  "عرض_واجهة",
  "main",
  {
    "نوع": "loading-state",
    "عنوان": "Loading products..."
  }
]

الواجهة المدفوعة بالحالة: مثال كامل

قوة render-ui أنها تتغير بناءً على الحالة. حالات مختلفة تعرض مكوّنات مختلفة في نفس الفتحة.

ما تعرضه آلة الحالة لكل حالة:

الحالة	فتحة `main` تعرض
`listing`	`entity-table` مع إجراءات على الصفوف
`viewing`	`entity-detail` مع الحقول
`editing`	`form` في وضع التعديل
`creating`	`form` مع جميع الحقول

مرجع خصائص الإجراءات

الإجراءات تُحدد داخل خصائص النمط، وليس كأنماط منفصلة.

النمط	كيفية ربط الإجراءات
`entity-table`	`itemActions: [{ "event": "EDIT", "label": "Edit" }]`
`entity-detail`	`actions: [{ "event": "EDIT", "label": "Edit" }]`
`form-section`	`submitEvent: "SAVE"`, `cancelEvent: "CANCEL"`
`page-header`	`actions: [{ "event": "CREATE", "label": "New" }]`
`empty-state`	`actions: [{ "event": "CREATE", "label": "Add" }]`

الربط في خصائص الأنماط

خصائص الأنماط تقبل الربط لقراءة البيانات المباشرة:

الربط	يُحل إلى
`@entity.field`	قيمة حقل الكيان الحالي
`@payload.field`	حقل حمولة الحدث
`@state`	اسم الحالة الحالية
`@now`	الطابع الزمني الحالي

مثال:

{
  "نوع": "stats",
  "عنوان": "Cart Total: $@entity.total"
}

الخطوات التالية

الحراس وقواعد العمل - إضافة شروط للتحكم في تشغيل الانتقالات
التواصل عبر الوحدات المدارية - ربط الوحدات المدارية ببعضها
بناء تطبيق كامل - تجميع وحدات مدارية متعددة

كيف يعمل render-ui​

الفتحات (Slots)​

فئات الأنماط​

أنماط العرض​

أنماط النماذج​

أنماط التنقل والترويسة​

أنماط الحالة​

الواجهة المدفوعة بالحالة: مثال كامل​

مرجع خصائص الإجراءات​

الربط في خصائص الأنماط​

الخطوات التالية​