# نسق

> نظام تصميم · الإصدار 1.0 · React · Vue · Blade · Alpine

لغة منتج واحدة لكل تقنية: ٣٩٠ مكوّنًا وقوالب صفحات كاملة فوق طبقة رموز تصميم، بالإنجليزية والعربية ودعم حقيقي لاتجاه اليمين لليسار. الشكل نفسه متاح لـ React وVue وLaravel Blade وHTML مع Alpine، ووكيل الذكاء الاصطناعي لديك يقرأ كل دليل عبر MCP.

```bash
npm i @fadymondy/nasaq
```

## At a glance

- **٣٩٠** — مكوّنًا، لكل منها دليل
- **٥** — تقنيات: React وshadcn وVue وBlade وAlpine
- **١٧** — سمة هوية
- **EN · AR** — مع دعم حقيقي لـ RTL

## المزايا

### طبقة رموز تصميم، لا ملف سمة

الألوان والخطوط والمسافات والكثافة والتعبير كلها متغيّرات CSS بالبادئة --nq-*، للوضعين الفاتح والداكن. غيّر رمزًا واحدًا فتتبعه كل المكوّنات في كل تقنية.

### كل مكوّن في كل تقنية

المكوّنات الـ٣٩٠ كلها متاحة بـ React (على Base UI) وVue 3 وLaravel Blade مع Livewire وFilament وHTML عادي مع Alpine. الشكل وأصناف Tailwind متطابقة، فتبدو الصفحة نفسها أيًّا كان اختيارك.

### صفحات كاملة، لا أزرار فقط

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

### العربية واليمين لليسار فعلًا

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

### ١٧ سمة هوية

نسق وFady Mondy ومهام وذكرى ومحرّك وSeatFor وHealth Debug وCircleXO وعلاماتها التجارية وحوسبة وOrchestra وToGO. اختر واحدة عبر الخاصية brand، أو data-brand في HTML.

### مصمَّم ليقرأه وكلاء الذكاء

يأتي كل مكوّن مع دليل README فيه الخصائص والأمثلة وملاحظات الوصول والاتجاه. وخادم MCP يمرّر هذه الأدلة، مع الكود الخاص بتقنيتك، إلى Claude Code وCursor وأي عميل MCP.

## تصميم واحد لكل تقنية

### React (@fadymondy/nasaq/web)

React 19 على Base UI، مع الرموز والسمات وشعارات الهوية. أو انسخ الكود عبر shadcn.

### Vue 3 (@fadymondy/nasaq/vue)

مكوّنات Nq* مع v-model، تُسجَّل عبر إضافة أو تُستورد واحدًا واحدًا.

### Laravel Blade (fadymondy/nasaq-php)

مكوّنات <x-nq::*> مع دعم wire:model في Livewire وإضافة لـ FilamentPHP.

### HTML + Alpine (@fadymondy/nasaq/alpine)

HTML عادي مع سلوكيات Alpine، من وسم سكربت عبر CDN أو من أداة البناء.

### React Native (@fadymondy/nasaq/native)

حزمة الجوال بالرموز نفسها ومعالجة اتجاه RTL.

### Electron (@fadymondy/nasaq/electron)

إطار النوافذ ومساعدات العملية الرئيسية لتطبيقات سطح المكتب.

## البداية

اختر تقنيتك. كلٌّ منها يستغرق أقل من دقيقة، والتوثيق يعرض كل مكوّن بها جميعًا.

1. React مع shadcn: وجّه الأداة إلى مستودع نسق

أضف النطاق @nasaq إلى components.json ثم أضف المكوّنات. الكود ملكك تعدّله كما تشاء.

```bash
"registries": {
  "@nasaq": "https://docs.nasaqui.com/r/{name}.json"
}

npx shadcn@latest add @nasaq/button @nasaq/data-table
```

2. React أو Vue: ثبّت الحزمة

ثم استورد الأنماط في ملف Tailwind. لا تستخدم Tailwind؟ استورد @fadymondy/nasaq/nasaq.css بدلًا منها.

```bash
npm i @fadymondy/nasaq

@import "tailwindcss";
@import "@fadymondy/nasaq/tokens.css";
@import "@fadymondy/nasaq/theme.css";
@import "@fadymondy/nasaq/web/styles.css";
```

3. Laravel: ثبّت حزمة Composer

مزوّد الخدمة يُكتشف تلقائيًا. أضف @nasaqStyles و@nasaqScripts إلى القالب.

```bash
composer require fadymondy/nasaq-php
```

4. HTML عادي: وسما سكربت

```bash
<script defer src="https://cdn.jsdelivr.net/npm/@fadymondy/nasaq/dist/cdn/nasaq-alpine.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
```

## أسئلة

### أي تقنية أستخدم؟

ما يستخدمه تطبيقك أصلًا. لـ React مستودع shadcn (كود تعدّله) أو حزمة npm (اعتماد بإصدار محدّد). ويستخدم Vue وHTML + Alpine حزمة npm نفسها، ويستخدم Laravel الحزمة fadymondy/nasaq-php. كلها مبنية من تصميم واحد فلا تختلف.

### ما مدى نضجه؟

هذا الإصدار 1.0. من بين ٣٩٠ مكوّنًا، ٤٩ موسومة مستقرة و٣٤١ تجريبية: واجهاتها تتبع semver، لكن المكوّنات التجريبية قد تكتسب خصائص جديدة.

### هل يعمل دون العربية؟

نعم. الإنجليزية هي الافتراضية، ولا يُطبَّق اتجاه RTL إلا حين تكون اللغة عربية.

### ما الرخصة؟

MIT، ومفتوح المصدر على github.com/fadymondy/nasaq وgithub.com/fadymondy/nasaq-php.

## امنح وكيل الذكاء الأدلة

### Hosted (HTTP)

لا شيء لتثبيته. أضفه إلى Claude Code بأمر واحد.

```
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp
```

### Local (stdio)

يعمل على جهازك من حزمة npm، ولا يحتاج رموز وصول ولا اتصالًا بالشبكة.

```
claude mcp add nasaq -- npx -y @fadymondy/nasaq-mcp
```

Source: https://github.com/fadymondy/nasaq