@qumra/fanar 0.0.0 → 0.0.2

package/dist/tokens.json

@@ -1,10 +1,8 @@
 {
-  "$description": "توكنز فنار — مستخرَجة من tokens.css بتاع منارة بلا فقدان.",
   "$extensions": {
     "cloud.qumra.fanar": {
       "source": "src/tokens/__fixtures__/manara-tokens.css",
       "sourceSha256": "fd54c248d7def2af2e37e1d75635cf7476fd960db70bb7fd13a07929293918e1",
-      "head": "/* ============================================================================\n   توكنز قمرة — تنزل في أي app بـ@import \"@qumra/manara/tokens.css\"\n   منقولة من v2 — منقولة حرفياً من Qumra Web App v2.dc.html (سطر 16-17).\n   دي مش إعادة تفسير: نفس الأسماء ونفس القيم، عشان أي مقارنة مع الملف\n   الأصلي تطلع مطابقة مش \"قريبة\".\n   ========================================================================== */\n\n@custom-variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *));\n",
       "layout": {
         "theme": {
           "gap": [],
@@ -17,9 +15,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* الأسطح والنصوص — بتتقلب في الوضع الداكن (تحت) */"
-            },
+            {},
             {
               "ref": "color.surface",
               "css": "--color-surface"
@@ -44,9 +40,7 @@
               "ref": "color.ink2",
               "css": "--color-ink2"
             },
-            {
-              "comment": "  /* سلّم النص: 20.2 / 9.8 / 5.6 / 4.9 — أربع درجات كلها فوق 4.5:1.\n     muted2 كان #a5b0b0 = 2.23:1، يعني تسميات الرسوم والنص البديل\n     مكانوش بيتقروا. مفيش مساحة لدرجة خامسة تحت — العتبة بتقفل السلّم. */"
-            },
+            {},
             {
               "ref": "color.muted",
               "css": "--color-muted"
@@ -55,9 +49,7 @@
               "ref": "color.muted2",
               "css": "--color-muted2"
             },
-            {
-              "comment": "  /* حدّ عناصر التحكّم — لازم 3:1 (المعيار 1.4.11). كان #d9e0e0 = 1.34:1،\n     يعني الشيك بوكس الفاضي مكانش ليه أي وجود بصري. الكروت والفواصل\n     بتستخدم --color-line فمتأثرتش. */"
-            },
+            {},
             {
               "ref": "color.border",
               "css": "--color-border"
@@ -77,9 +69,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── تعبئة هيكل التحميل ────────────────────────────────────────────────\n     العصا اللي بتقف مكان النصّ لحدّ ما يوصل.\n\n     كانت `--color-hover`، وهو **لون حالة مرور** لا تعبئة — وعلى السطح\n     بيدّي 1.09:1 في الفاتح و1.14:1 في الداكن. فرق زي ده مايتشافش.\n     النتيجة كانت هيكل موجود في الـDOM وغايب عن العين.\n\n     والمدى ضيّق من الطرفين: تحت 1.2 مايتقريش، وفوق 1.6 بيتقري **محتوى**\n     لا انتظاراً — بلوك رمادي صريح بيبان كأنه صورة أو صندوق فاضي، فالعين\n     بتستنّى منه معنى بدل ما تعدّي عليه. القيم مقيسة على السطح:\n\n       فاتح  #d6dcdc على #ffffff = 1.39  ·  1.26 عند حضيض النبض\n       داكن  #2c3232 على #101718 = 1.39  ·  1.24 عند حضيض النبض\n\n     والرقمان متساويان عن قصد: الهيكل لازم يبان بنفس القوة في الوضعين،\n     وإلا الشاشة الواحدة بتتقري «بتحمّل» في وضع و«فاضية» في التاني.\n\n     ── وليه توكن مستقلّ لا `soft2` ────────────────────────────────────────\n     `soft2` مسحته تركوازي — هو سطح العلامة الناعم. الهيكل بيه بياخد لون\n     هوية، وهو المفروض **حياد**: مساحة محجوزة لا عنصر له معنى. ده رمادي\n     مائل للبرودة (R أقلّ من G وB بستّ درجات) فيتناغم مع اللوحة بلا ما\n     ينتمي لها. */"
-            },
+            {},
             {
               "ref": "color.skeleton",
               "css": "--color-skeleton"
@@ -87,9 +77,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ألوان ثابتة مكتوبة صراحةً في v2 (مش متغيّرة مع الثيم) */"
-            },
+            {},
             {
               "ref": "color.brand.DEFAULT",
               "css": "--color-brand"
@@ -110,16 +98,12 @@
               "ref": "color.brand.deep",
               "css": "--color-brand-deep"
             },
-            {
-              "comment": "  /* خلفية فاتحة بمسحة تركوازي — لوحات العرض وحالة المرور على الكروت\n     الكبيرة. كانت #F4FAF8 مكتوبة بالإيد في شاشات الحسابات. */"
-            },
+            {},
             {
               "ref": "color.tint",
               "css": "--color-tint"
             },
-            {
-              "comment": "  /* درجة أعمق شوية — أرضية كروت التسويق في صفحة الهبوط. `tint` أرضية\n     القسم كله و`tint2` الكرت اللي جوّه، فالكرت يبان عليها. كانت\n     #EFF6F3 مكتوبة بالإيد ١٢ مرة في `Qumra Landing.dc.html`.\n     زي `tint` مالهاش قيمة داكنة — الاتنين أرضيات تسويقية فاتحة بالتعريف. */"
-            },
+            {},
             {
               "ref": "color.tint2",
               "css": "--color-tint2"
@@ -131,9 +115,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── ألوان الحالة ──────────────────────────────────────────────────────\n     كل واحدة ليها: نص (ink/اللون نفسه) + خلفية (bg) + حدّ (line).\n     التلاتة بيتقلبوا مع الثيم — من غير كده الشارة بتفضل بيضا وبتلمع\n     جوّه شاشة سودة حتى لو التباين جوّاها عدّى. */"
-            },
+            {},
             {
               "ref": "color.amber.DEFAULT",
               "css": "--color-amber"
@@ -154,9 +136,7 @@
               "ref": "color.amber.900",
               "css": "--color-amber-900"
             },
-            {
-              "comment": "  /* المرور على تعبئة عنبرية — زرار «ابدأ النمو» والشارات في صفحة الهبوط.\n     كانت #DE9219 مكتوبة بالإيد. مع `amber-900` فوقها بتدّي 5.37:1.\n     ثابت مش بيتقلب — نفس منطق `amber` نفسه كتعبئة. */"
-            },
+            {},
             {
               "ref": "color.amber.hover",
               "css": "--color-amber-hover"
@@ -192,9 +172,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* تعبئة صريحة بنص أبيض فوقها — نفس دور --color-danger.\n     `green`/`violet` لوحدهم ألوان نص وبيتقلبوا، فمينفعش يشيلوا أبيض\n     في الوضع الداكن (كان بيدّي 1.90 و2.04). دول ثابتين وبيعدّوا:\n       green-solid  أبيض فوقه 5.35 · كعنصر 3.39–5.35\n       violet-solid أبيض فوقه 5.33 · كعنصر 3.41–5.33 */"
-            },
+            {},
             {
               "ref": "color.green.solid",
               "css": "--color-green-solid"
@@ -206,9 +184,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── الأحمر: دورين، توكنين ─────────────────────────────────────────────\n     `red` لون نص — لازم يعدّي 4.5:1 على السطح، فبيتقلب في الوضع الداكن (تحت).\n     `danger` لون تعبئة وحدّ — لازم يعدّي 3:1 كعنصر، والنص الأبيض فوقه 4.5:1.\n     قيمة واحدة بتعدّي في الوضعين فمش محتاجة تتقلب:\n       كعنصر 4.90 فاتح / 3.70 داكن · أبيض فوقه 4.90\n     كانت #D6493B مكتوبة بالإيد في ٩ مواضع، والأبيض فوقها 4.31 — تحت العتبة. */"
-            },
+            {},
             {
               "ref": "color.red.DEFAULT",
               "css": "--color-red"
@@ -225,16 +201,12 @@
               "ref": "color.danger",
               "css": "--color-danger"
             },
-            {
-              "comment": "  /* ── إضافة فنار — مش في منارة ───────────────────────────────────────────\n     `danger` كان الشاذ الوحيد: `brand` و`amber` كلٌّ منهم له `-hover`\n     مخصّص، و`danger` كان بيستعير `--color-red` في الـhover.\n\n     و`--color-red` **بيتقلب في الوضع الداكن** من `#8e2b20` (أحمر غامق)\n     لـ`#f3a79e` (وردي فاتح) — لأنه لون **نص** هناك لا تعبئة. فزرّ الحذف\n     في الداكن، أول ما الماوس يعدّي عليه، كان بيبقى أبيض على وردي فاتح\n     = **1.94**. نصّه عملياً مش مقروء.\n\n     القيمة مشتقّة لا مختارة: نسب القنوات بتاعة `brand → brand-hover`\n     مطبّقة على `danger`. النتيجة في نفس نطاق النظام (سطوع ٠.٦٤ مقابل\n     ٠.٦٧ و٠.٧٣)، والأبيض فوقها **6.73** بدل 4.9. */"
-            },
+            {},
             {
               "ref": "color.danger.hover",
               "css": "--color-danger-hover"
             },
-            {
-              "comment": "  /* أحمر فاتح ثابت — للأرضيات الداكنة دايماً (التوست على bg-night).\n     مش بيتقلب لأن أرضيته مش بتتقلب. نفس منطق --color-brand-100. */"
-            },
+            {},
             {
               "ref": "color.red.100",
               "css": "--color-red-100"
@@ -262,9 +234,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── سلّم الخط ─────────────────────────────────────────────────────────\n     ١٢ درجة، أعداد صحيحة بس. الـREADME كان بيوعد بالسلّم ده من غير ما\n     يبقى موجود، فالمكوّنات اخترعت ١٦ مقاس منهم ٨ كسرية — و12.5px\n     و13.5px لوحدهم كانوا ٣٥ استخدام. */"
-            },
+            {},
             {
               "ref": "text.micro",
               "css": "--text-micro"
@@ -285,16 +255,12 @@
               "ref": "text.lead",
               "css": "--text-lead"
             },
-            {
-              "comment": "  /* الحقل الكبير — تحت ١٦ بيخلّي iOS يعمل zoom تلقائي على الحقل */"
-            },
+            {},
             {
               "ref": "text.base.DEFAULT",
               "css": "--text-base"
             },
-            {
-              "comment": "  /* ── الدرجة الوحيدة اللي بتصطدم بـTailwind ─────────────────────────────\n     كل أسماء السلّم مخترَعة (micro · ui · body · lead · h4…) إلا `base`\n     — ده اسم مقاس مدمج، وTailwind بيعرّف معاه `--text-base--line-height`\n     بـ1.5. فتجاوز `--text-base` بياخد المقاس ويسيب ارتفاع السطر، وأداة\n     `text-base` بتطبع الاتنين.\n\n     والنتيجة إن الأداة بتغلب قاعدة ارتفاع السطر بتاعة الحقول (تحت في\n     `@layer base`) — الأدوات بتغلب الأساس مهما كانت الأولوية — فيرجع\n     الحقل الكبير لـ1.5 وتتقصّ ذيول «ي» و«ج» ١٫٨٥px. والباقي سليم لأن\n     أسماءه مالهاش نظير مدمج.\n\n     `initial` بتشيل الاقتران فتطبع الأداة المقاس بس زي بقية السلّم. */"
-            },
+            {},
             {
               "ref": "text.base.lineheight",
               "css": "--text-base--line-height"
@@ -323,9 +289,7 @@
               "ref": "text.hero",
               "css": "--text-hero"
             },
-            {
-              "comment": "  /* ── درجتين تسويقيتين ─────────────────────────────────────────────────\n     صفحة الهبوط سلّمها أكبر من سلّم اللوحة — اللوحة بتعرض بيانات كتير\n     في مساحة ضيقة، والهبوط بيعرض جملة واحدة على شاشة كاملة. المرجع\n     فيه ١٠ مقاسات بره السلّم؛ تمانية منهم بيتقرّبوا لدرجة موجودة\n     (38→display · 34→display · 29→h1 · 27→h2 · 25→h2 · 21→h3 · 19→h3\n     · 18→h4)، والاتنين دول مالهمش أقرب من ٤px فبيتضافوا.\n     مالهمش استخدام جوّه اللوحة — لو ظهروا فيها يبقى فيه غلط. */"
-            },
+            {},
             {
               "ref": "text.title",
               "css": "--text-title"
@@ -337,15 +301,9 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── نصف القطر ─────────────────────────────────────────────────────────\n     ٨ درجات بأدوار مسمّاة. السلّم ده **مشتقّ من الاستخدام الفعلي** مش\n     مفروض عليه: كان فيه ١٧ قيمة مختلفة في ٣١٧ موضع عبر المونوريبو،\n     والدرجات دي بتبلعهم بإزاحة ٢px كحد أقصى — يعني توحيد مش إعادة تصميم.\n\n     ملف الهوية القديم كان بيوعد بأربع قيم بس (9 · 13 · 18 · كامل)، وده\n     كان هيغيّر شكل ١٥١ استخدام في العنقود ٧–٩ لوحده. الأدوار أهم من\n     عدد الدرجات: الزرار الصغيّر مش كرت، والكرت مش قسم. */"
-            },
-            {
-              "comment": "  /* ── عرض الحاويات ──────────────────────────────────────────────────────\n     مقاسان لا أكثر، وبأسماء لا بأرقام مكتوبة في الصفحات.\n\n     `shell` سقف اللوحة كلّها؛ و`page` عمود القراءة: كل صفحة تُقرأ سطراً\n     بعد سطر — تفصيل، أو نموذج، أو إعدادات — تأخذه، وكل صفحة جدولها هو\n     محتواها تأخذ `shell` كاملاً.\n\n     كان في المشروع أربعة مقاسات (٨٨٠ · ٩٢٠ · ٩٨٠ · ٥٨٠) مكتوبة بالإيد\n     في ستّ عشرة شاشة. الفرق بين ٨٨٠ و٩٢٠ لا يُقرأ سبباً — يُقرأ سهواً،\n     والتنقّل بين صفحتين متجاورتين يُظهر الحافّة وهي تقفز أربعين بكسل.\n     والرقم المكتوب بالإيد يعود يتفرّق: التوكن يمنع عودته. */"
-            },
-            {
-              "comment": "  /* ── الفلسفة اتغيّرت: مفيش عصر ────────────────────────────────────\n     `page` كان ٨٨٠px كعمود قراءة، و`shell` ١٤٤٠. النتيجة إن تفاصيل\n     الطلب ومحرّر المنتج والإعدادات — ٢٤ شاشة — بيتحشروا في تلت الشاشة\n     على ٢٧ بوصة، والفراغ حواليهم بيتقري صفحة مش مخلّصة لا عمود مقصود.\n\n     الاتنين بقوا واحد: الصفحة بتاخد عرضها كامل لحد السقف. والسقف باقي\n     لأن غيابه مش «بلا حاوية» — هو حاوية بعرض الشاشة: صفّ «تسمية ← قيمة»\n     على ٣٤٤٠px بيبعد طرفيه تلات آلاف بكسل، والعين بتلفّ بدل ما تمسح.\n\n     لو رجعنا لعمود القراءة يوماً: `--container-page` يرجع ٨٨٠ وبس —\n     الـ٢٤ شاشة بتقراه من التوكن مش مكتوب فيها. */"
-            },
+            {},
+            {},
+            {},
             {
               "ref": "container.page",
               "css": "--container-page"
@@ -357,9 +315,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* عرض السطر لا عرض الحاوية — سقف على النصّ حتى لا يمتدّ السطر\n     فيضيع طرفه على العين. درجتان: `note` للسطر أو السطرين تحت\n     عنوان أو في حالة فارغة، و`lead` للفقرة القائمة بنفسها.\n     كانت ستّ قيم (٣٢٠ · ٣٣٠ · ٣٤٠ · ٣٨٠ · ٤٦٠ · ٥٢٠) لا يفرّق\n     بينها شيء يُقصد. */"
-            },
+            {},
             {
               "ref": "container.note",
               "css": "--container-note"
@@ -406,9 +362,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── الظل ──────────────────────────────────────────────────────────────\n     الأربعة الأولى بتستخدم `--shadow-color` فبتتقلب مع الثيم — دي ظلال\n     جوّه الصفحة، ولازم تقوى في الوضع الداكن عشان تفضل مقروءة.\n\n     التلاتة الأخيرة قيمها ثابتة عن قصد: دي طبقات فوق أرضية معتّمة\n     أصلاً (backdrop)، فالخلفية اللي وراها مش بتتغيّر مع الثيم. */"
-            },
+            {},
             {
               "ref": "shadow.raise",
               "css": "--shadow-raise"
@@ -436,9 +390,7 @@
               "ref": "shadow.toast",
               "css": "--shadow-toast"
             },
-            {
-              "comment": "  /* طالع من تحت — الإزاحة سالبة، والخط الداخلي بيدّي حافة علوية للشيت */"
-            },
+            {},
             {
               "ref": "shadow.sheet",
               "css": "--shadow-sheet"
@@ -446,9 +398,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── ألوان الكود — Visual Studio Code ──────────────────────────────────\n     التوثيق وسط تاني: الكود مش نص عادي، والتلوين فيه **بنية** مش زينة —\n     بيفرّق الوسم عن السمة عن القيمة، وده اللي بيخلّي المطوّر يمسح مقطع\n     من عشر أسطر بنظرة. وعشان كده ليه توكنز مستقلة مش استعارة من ألوان\n     الحالة: `--color-green` معناه «نجح»، ولو النص بين علامتين اقتباس\n     أخضر لنفس السبب يبقى المعنى اتخفّف.\n\n     ── ليه ألوان محرّر جاهز مش ألوان قمرة ──────────────────────────────\n     دي الحتة الوحيدة في النظام اللي **المرجع فيها بره قمرة**، والسبب إن\n     المستخدم هنا مطوّر بيقضّي يومه في محرّر. لوحة قمرة على مقطع كود\n     معناها إنه يقرا بنية بلون مش متعوّد عليه، وبعدين ينسخه فيلاقيه\n     بلون تاني في محرّره. التطابق مع المحرّر بيوفّر الترجمة دي.\n     القيم من `light_plus` و`dark_plus` حرفياً — أي «تقريب» بيضيّع\n     السبب كله.\n\n     ست أدوار مش خمسة: الكلمة المحجوزة (`const` · `import`) اتفصلت عن\n     الوسم لأنها كانت **مش ملوّنة أصلاً**، ودي أوضح فرق بين المقطع هنا\n     وبين نفسه في المحرّر.\n\n     ── وليه داكن حتى في الوضع الفاتح ───────────────────────────────────\n     دي القيم الوحيدة في الملف اللي **مابتتقلبش مع الثيم**، ومعاها سبب\n     زي `--color-tint` و`--color-red-100` بالظبط: أرضيتها مش أرضية\n     الصفحة.\n\n     بلوك الكود مش «فقرة بخط تاني» — هو **نافذة محرّر متحطّة في\n     الصفحة**، والمحرّر داكن عند أغلب اللي هيقروا. لو اتقلب مع الثيم\n     بيبقى قطعة من الصفحة، ولو فضل داكن بيتقري مقتطع من المكان اللي\n     الكود ده رايح ليه.\n\n     والمقطع نفسه بيتنسخ ويتلزق في المحرّر — فالتطابق بيوفّر ترجمة\n     بصرية مرتين: وانت بتقراه، ولما تشوفه هناك.\n\n     التباين على `code-bg` — السبعة كلهم فوق 4.5:\n       11.12 · 5.59 · 8.09 · 11.05 · 6.24 · 9.70 · 4.95 */"
-            },
+            {},
             {
               "ref": "color.code.bg",
               "css": "--color-code-bg"
@@ -481,9 +431,7 @@
               "ref": "color.code.note",
               "css": "--color-code-note"
             },
-            {
-              "comment": "  /* طاقم البلوك — شريط العنوان وزرار النسخ والفاصل الداخلي.\n     `muted2` و`line` بتوع الصفحة مش شغّالين هنا: أرضيتهم بتتقلب وأرضية\n     البلوك لأ، فـ`muted2` في الوضع الفاتح كان بيدّي 3.37 على الأسود.\n     دول مقاسين على `#1f1f1f` وبس. */"
-            },
+            {},
             {
               "ref": "color.code.dim",
               "css": "--color-code-dim"
@@ -495,9 +443,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* أرضية الكود المضمّن جوّه جملة — **بتتقلب** مع الثيم عكس اللي فوق.\n     الكلمة جوّه فقرة عربية مش نافذة محرّر: أرضية سودة حواليها بتقطع\n     السطر وبتسحب العين لها بدل ما تخلّيها تكمّل قراية. الفرق في\n     الدور مش في الوسط. */"
-            },
+            {},
             {
               "ref": "color.code.chip",
               "css": "--color-code-chip"
@@ -513,23 +459,17 @@
               "ref": "animate.qslide",
               "css": "--animate-qslide"
             },
-            {
-              "comment": "  /* ظهور من أسفل — للبطاقات التي تُقحم نفسها على المستخدم. أبطأ من\n     `qfade` عمداً: ما يظهر بلا طلب يجب أن يُرى وهو يظهر، لا أن يجد\n     المستخدم نفسه أمامه. */"
-            },
+            {},
             {
               "ref": "animate.tip.DEFAULT",
               "css": "--animate-tip"
             },
-            {
-              "comment": "  /* الشريط السفليّ يطلع من تحت الشاشة — حركة تقول «جئت من هنا» */"
-            },
+            {},
             {
               "ref": "animate.tip.up",
               "css": "--animate-tip-up"
             },
-            {
-              "comment": "  /* درج جانبي — نسختان لأن `transform` لا ينقلب مع اتجاه الصفحة:\n     اللوح على الحافّة الطرفية، وهي اليمين في LTR واليسار في RTL. */"
-            },
+            {},
             {
               "ref": "animate.drawer.DEFAULT",
               "css": "--animate-drawer"
@@ -538,9 +478,7 @@
               "ref": "animate.drawer.rtl",
               "css": "--animate-drawer-rtl"
             },
-            {
-              "comment": "  /* شريط الحفظ — ينزلق من فوق ويطلع من فوق. الحركة تقول إنه حلّ محلّ\n     ما كان هنا، لا إنه طبقة جديدة فوقه. أسرع من الدرج لأنه لا ينتظر\n     قراءة: المستخدم يعرف أنه عدّل، والشريط يؤكّد لا يُخبر. */"
-            },
+            {},
             {
               "ref": "animate.savebar",
               "css": "--animate-savebar"
@@ -548,9 +486,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ── نبض الهيكل ────────────────────────────────────────────────────────\n     `animate-pulse` بتاع Tailwind بينزّل الشفافية لـ**٥٠٪**، وده بياكل\n     نصّ الفرق بين التعبئة والسطح: هيكل بـ1.39 بيوصل 1.12 عند الحضيض —\n     يعني بيختفي ويرجع مع كل دورة.\n\n     السبب إن الشفافية معمولة للعناصر اللي تباينها عالي أصلاً (نصّ، صورة).\n     والهيكل بالتعريف **خافت**، فنسبة النزول لازم تبقى أقلّ.\n\n     ٧٠٪ بتسيب 1.26 عند الحضيض — الحركة لسه بتتشاف والعصا مابتغيبش.\n     و1.6s أبطأ من 2s بتاعة Tailwind لأن الحركة الأضيق محتاجة وقت أطول\n     عشان تتقري كنبض لا كوميض. */"
-            },
+            {},
             {
               "ref": "animate.skeleton",
               "css": "--animate-skeleton"
@@ -558,12 +494,12 @@
           ]
         },
         "root": {
-          "gap": [""],
+          "gap": [
+            ""
+          ],
           "open": ":root {",
           "items": [
-            {
-              "comment": "  /* ── إعلان الوضع للمتصفّح ────────────────────────────────────────────\n     المتصفّح بيرسم أجزاء **مش إحنا اللي بنلوّنها**: قائمة `<select>`\n     المنبثقة، وشريط التمرير، ومنتقي التاريخ، وأرضية الملء التلقائي،\n     وحلقة التركيز الافتراضية. دي بترسمها المنصّة لا الـCSS بتاعنا.\n\n     من غير `color-scheme` المتصفّح بيفترض **فاتح دايماً** — فقائمة\n     `<select>` في الوضع الداكن بتطلع بنصّ غامق على أرضية غامقة، والخيار\n     المحدَّد شريط أزرق فاضي بلا كلام. مافيش أي CSS على `<option>` بيصلّح\n     ده: العنصر بيترسم برّه الصفحة.\n\n     والسطر ده هو الإصلاح الوحيد — وبيشتغل على الخمس حاجات مرّة واحدة. */"
-            },
+            {},
             {
               "css_raw": "  color-scheme: light;"
             },
@@ -574,16 +510,12 @@
               "ref": "shadow.color",
               "css": "--shadow-color"
             },
-            {
-              "comment": "  /* اتجاه محاذاة الأرقام — بيتقلب مع اتجاه الصفحة */"
-            },
+            {},
             {
               "ref": "num.align.DEFAULT",
               "css": "--num-align"
             },
-            {
-              "comment": "  /* ── الرقم اللي ليه لاحقة ──────────────────────────────────────────────\n     `far` = ناحية **نهاية الصفحة**، وهي ناحية اللاحقة.\n     و`pad-right`/`pad-left` **فيزيائيين عن قصد**: الحقل نفسه\n     `direction: ltr` (من `[data-num]`)، فأي حشو منطقي (`pe-`) بيتحسب\n     على LTR ويروح الناحية الغلط — وده اللي كان بيخلّي الرقم يتراكب\n     على «ج.م». */"
-            },
+            {},
             {
               "ref": "num.align.far",
               "css": "--num-align-far"
@@ -596,9 +528,7 @@
               "ref": "num.pad.left",
               "css": "--num-pad-left"
             },
-            {
-              "comment": "  /* ونفس الحكاية مع الأيقونة السابقة: الأيقونة بتتحطّ بحساب اتجاه\n     **الصفحة** (`start-3.5` على الغلاف)، والحشو بحساب `ltr` بتاع الرقم\n     — فالاتنين بيقعوا في ناحية واحدة والرقم بيتراكب على الأيقونة. */"
-            },
+            {},
             {
               "ref": "num.icon.pad.right",
               "css": "--num-icon-pad-right"
@@ -610,7 +540,9 @@
           ]
         },
         "ltr": {
-          "gap": [""],
+          "gap": [
+            ""
+          ],
           "open": "html[dir=\"ltr\"] {",
           "items": [
             {
@@ -640,12 +572,12 @@
           ]
         },
         "dark": {
-          "gap": [""],
+          "gap": [
+            ""
+          ],
           "open": "html[data-theme=\"dark\"] {",
           "items": [
-            {
-              "comment": "  /* الشرح عند القيمة الفاتحة في `:root` */"
-            },
+            {},
             {
               "css_raw": "  color-scheme: dark;"
             },
@@ -700,9 +632,7 @@
               "ref": "color.brand.ink",
               "css": "--color-brand-ink"
             },
-            {
-              "comment": "  /* الهيكل — نفس التباين بالظبط (1.39) مقلوباً. الشرح عند القيمة الفاتحة. */"
-            },
+            {},
             {
               "ref": "color.skeleton",
               "css": "--color-skeleton"
@@ -714,9 +644,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* الأحمر النصّي لازم يتقلب — #8e2b20 على #101718 بيدّي 2.17:1،\n     يعني رسالة الخطأ مكانتش بتتقري أصلاً. البديل 9.36:1. */"
-            },
+            {},
             {
               "ref": "color.red.DEFAULT",
               "css": "--color-red"
@@ -732,9 +660,7 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* باقي ألوان الحالة — نفس المنطق. الأرقام دي نص على خلفيته. */"
-            },
+            {},
             {
               "ref": "color.amber.DEFAULT",
               "css": "--color-amber"
@@ -782,17 +708,14 @@
             {
               "blank": true
             },
-            {
-              "comment": "  /* ألوان الكود مش هنا — هي ثابتة في `@theme static` فوق ومابتتقلبش.\n     الوحيد اللي بيتقلب هو أرضية الكود المضمّن جوّه الجُمل. */"
-            },
+            {},
             {
               "ref": "color.code.chip",
               "css": "--color-code-chip"
             }
           ]
         }
-      },
-      "tail": "\n/* خطوط رأسية باهتة كل ٧٤px — بتدّي عمق للأرضية الداكنة من غير صورة.\n   موجودة في `Qumra Accounts.dc.html` و`Qumra Landing.dc.html` بنفس القيم،\n   فمكانها هنا مش جوّه تطبيق. تشتغل على الأرضيات الداكنة بس — الخطوط\n   بيضا بشفافية ٣.٥٪. */\n@utility rule-grid {\n  background-image: repeating-linear-gradient(\n    90deg,\n    rgb(255 255 255 / 0.035) 0 1px,\n    transparent 1px 74px\n  );\n}\n\n/* نبض الهيكل — الشرح عند `--animate-skeleton` */\n@keyframes skeleton-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n\n@keyframes qfade {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: none; }\n}\n\n@keyframes sheet-up {\n  from { transform: translateY(100%); }\n  to { transform: translateY(0); }\n}\n\n@keyframes drawer-ltr {\n  from { transform: translateX(100%); }\n  to { transform: none; }\n}\n\n@keyframes drawer-rtl {\n  from { transform: translateX(-100%); }\n  to { transform: none; }\n}\n\n@keyframes tip-up {\n  from { transform: translateY(100%); }\n  to { transform: none; }\n}\n\n@keyframes tip-in {\n  from { opacity: 0; transform: translateY(12px); }\n  to { opacity: 1; transform: none; }\n}\n\n@keyframes savebar-in {\n  from { opacity: 0; transform: translateY(-10px); }\n  to { opacity: 1; transform: none; }\n}\n\n@keyframes qslidein {\n  from { transform: translateX(-100%); }\n  to { transform: none; }\n}\n\n/* ظهور بسيط — للقوايم المنسدلة والتولتيب والطبقات */\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* التوست بيطلع من تحت شوية — بيربط الحركة بمكانه في الشاشة */\n@keyframes toast-in {\n  from { opacity: 0; transform: translateY(10px) scale(.97); }\n  to { opacity: 1; transform: none; }\n}\n\n/* شريط تحميل غير محدّد — بيروح ويرجع بدل ما يدّعي نسبة مايعرفهاش.\n   منطقيّ الاتجاه: `inset-inline-start` بيتقلب مع الصفحة لوحده. */\n@keyframes qload {\n  0%   { inset-inline-start: -35%; }\n  100% { inset-inline-start: 100%; }\n}\n\n@layer base {\n  html,\n  body {\n    height: 100%;\n  }\n\n  /* ── ذيول الحروف العربية داخل الحقول ──────────────────────────────────\n     الحقل يقصّ ما يخرج عن صندوقه، وصندوق نصّه ارتفاعه ارتفاع السطر. وفي\n     Alexandria ينزل ذيل «ي» و«ج» و«ص» تحت خطّ القاعدة أكثر ممّا يتركه\n     سطر بارتفاع 1.5 — فيُقصّ الذيل قصّاً مستوياً ويُقرأ الحرف ناقصاً.\n     اللاتينية لا تُظهر العيب لأن ذيولها أقصر، ولذلك يمرّ بلا انتباه.\n\n     1.9 يسع أطول ذيل في السلّم كلّه. ولا يزيد ارتفاع الحقل: المتصفّح\n     يوسّط سطر الحقل المفرد في صندوقه، والسطر الأطول يأخذ من الفراغ\n     الموجود أصلاً. والقاعدة على العنصر نفسه لا على الصنف، فتغطّي كل\n     حقل في المشروع — في المكتبة أو مكتوباً بالإيد.\n\n     ── والرقم مقيس لا مختار ────────────────────────────────────────────\n     القصّ يقع عند **صندوق السطر** لا صندوق الحقل — فالحقل قد يكون\n     ٥٦px والسطر ٢٤px فيُقصّ الذيل وحوله فراغ. والحدّ الأدنى:\n\n         الصعود − الهبوط المعلَن + ٢ × هبوط الحبر\n         14 − 4 + 2×7.92 = 25.85px  عند 14px  ≈ 1.85\n\n     لأن نصف الرصاص يوزَّع أعلى وأسفل. و1.9 فوقه بشعرة.\n\n     ── وأداة `leading-*` على حقل تكسر هذا كلّه ─────────────────────────\n     القاعدة في `@layer base`، والأدوات تغلب الأساس مهما كانت الأولويّة.\n     فكل `leading-[…]` أو `text-*` يحمل ارتفاع سطر مقترناً يعيد العيب\n     في مكانه. وقعت مرّتين: `--text-base` (انظر أعلى) و`leading-[1.7]`\n     في `AiComposer` — والاثنتان كانتا تقصّان ذيل «ي». */\n  input:not([type='checkbox']):not([type='radio']):not([type='range']),\n  textarea,\n  select {\n    line-height: 1.9;\n  }\n\n  body {\n    margin: 0;\n    background: var(--color-bg);\n    color: var(--color-ink);\n    font-family: var(--font-sans);\n    -webkit-font-smoothing: antialiased;\n    overflow: hidden;\n  }\n\n  a {\n    color: var(--color-brand);\n    text-decoration: none;\n  }\n  a:hover {\n    color: var(--color-brand-hover);\n  }\n\n  input {\n    font-family: inherit;\n  }\n\n  /* حلقة تركيز موحّدة — v2 مكانش فيها، وده الشيء الوحيد اللي بزوّده\n     على الأصل لأن التصميم من غيره مش قابل للتنقّل بالكيبورد. */\n  :focus-visible {\n    outline: 2px solid var(--color-brand);\n    outline-offset: 2px;\n    border-radius: 6px;\n  }\n\n  ::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: var(--color-border);\n    border-radius: 999px;\n  }\n\n  /* الأرقام جوّه نص عربي.\n     `isolate` بيمنع الرقم من إنه يتلخبط مع اللي حواليه، و`tabular-nums`\n     بيخلّي الخانات بعرض واحد فالأعمدة تفضل مصطفّة. والمحاذاة متثبّتة على\n     اتجاه الصفحة بمتغيّر، ولأنها في @layer base أي كلاس محاذاة\n     (text-end / text-center) لسه بيكسبها.\n\n     ── وليه مافيش `direction: ltr` هنا ──────────────────────────────────\n     كان موجود، وكان بيقلب كل مبلغ في المنصة: «34,330 ج.م» بتتقرا في\n     العربي من اليمين — الرقم يمين والرمز شماله. و`ltr` كان بيحطّ الرقم\n     شمال والرمز يمينه، فتُقرأ «ج.م ثم 34,330» زي «$34,330» الإنجليزية.\n\n     والرقم الخالص مابيفرقش معاه اتجاه العنصر — خانة واحدة بتتعرض LTR\n     في الحالتين. اللي بيحتاج `ltr` فعلاً هو النصّ المركّب اللي فيه أكتر\n     من مقطع: تليفون، ورمز تخزيني، ورقم طلب — ودول مكتوب عليهم\n     `dir=\"ltr\"` صراحةً في مكانهم أصلاً.\n\n     وبيفضل على الحقول، لأن اتجاه الحقل بيحكم حركة علامة الإدخال وهي\n     بتكتب أرقام — ومش مسألة عرض. */\n  [data-num] {\n    unicode-bidi: isolate;\n    font-variant-numeric: tabular-nums;\n    text-align: var(--num-align);\n  }\n\n  input[data-num],\n  textarea[data-num] {\n    direction: ltr;\n  }\n\n  /* ── سهم حقل الرقم ────────────────────────────────────────────────────\n     تحكّم المتصفّح الأصلي مقفول في كل حقل `type=\"number\"`.\n\n     مش تجميل — تلات أسباب:\n\n       ١. **بيصطدم باللاحقة.** الحقل بلاحقة («ج.م») بيحجز مساحة في\n          نهايته بـ`pe-14`، والسهم بيتحطّ في نفس المكان من غير ما يعرف\n          إن فيه حاجة هناك. الاتنين بيتراكبوا.\n\n       ٢. **موضعه بيتلخبط مع `[data-num]`.** الحقل جوّه صفحة عربية\n          والرقم `direction: ltr` — فالسهم بيتحطّ ناحية والقيمة ناحية،\n          والنتيجة سهم في نصّ الحقل زي ما في اللقطة.\n\n       ٣. **مقاسه من نظام التشغيل.** ١٥ بكسل تقريباً وبيتغيّر بين\n          المتصفّحات، ومستحيل يعدّي حدّ الهدف اللمسي (٢٤ بكسل).\n\n     اللي عايز يزوّد وينقّص بزرار بيحطّ زرارين ظاهرين — دي عناصر\n     التحكّم بتاعتنا وليها حجم ومسافة مقروءين، مش أسهم النظام. */\n  input[type='number'] {\n    appearance: textfield;\n    -moz-appearance: textfield;\n  }\n\n\n  input[type='number']::-webkit-outer-spin-button,\n  input[type='number']::-webkit-inner-spin-button {\n    appearance: none;\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      transition-duration: 0.01ms !important;\n    }\n  }\n}\n\n/* ── الرقم بلاحقة ────────────────────────────────────────────────────────\n   الرقم لوحده بيتحاذى ناحية بداية الصفحة (`--num-align`) — ده صح في عمود\n   جدول: كل الأرقام بتصطفّ تحت بعضها فالمقارنة بينها بنظرة.\n\n   لكن الحقل اللي ليه لاحقة («ج.م») مختلف: اللاحقة عنصر مطلق في **نهاية**\n   الحقل، والرقم في **بدايته** — فبينهم عرض الحقل كله. النتيجة إنك تقرا\n   «٠» وتقطع ٣٩٠ بكسل عشان تلاقي «ج.م».\n\n   هنا الرقم بيتحاذى ناحية اللاحقة فيلزق فيها، والوحدة بتبقى على شماله في\n   العربي — «١٢٥٠ ج.م» زي ما بتتكتب.\n\n   ── وليه بره `@layer base` ────────────────────────────────────────────\n   الطبقات بتكسب على التخصيص: أي كلاس utility من Tailwind بيغلب أي قاعدة\n   في `base` مهما كان تخصيصها. والحقل عليه `pe-14`، فالقاعدة دي لازم تبقى\n   بعد الطبقات عشان تكسبه. */\n[data-num][data-suffix] {\n  text-align: var(--num-align-far);\n  padding-right: var(--num-pad-right);\n  padding-left: var(--num-pad-left);\n}\n\n[data-num][data-icon] {\n  padding-right: var(--num-icon-pad-right);\n  padding-left: var(--num-icon-pad-left);\n}\n"
+      }
     }
   },
   "font": {
@@ -1081,8 +1004,7 @@
             "css": "--color-amber",
             "overrides": {
               "dark": {
-                "value": "#f8ac33",
-                "trail": "      /* 8.33 على amber-bg */"
+                "value": "#f8ac33"
               }
             }
           }
@@ -1110,8 +1032,7 @@
             "css": "--color-amber-ink",
             "overrides": {
               "dark": {
-                "value": "#f5c77a",
-                "trail": "  /* 10.15 */"
+                "value": "#f5c77a"
               }
             }
           }
@@ -1150,8 +1071,7 @@
             "css": "--color-green",
             "overrides": {
               "dark": {
-                "value": "#6ecf9a",
-                "trail": "      /* 8.03 على green-bg2 */"
+                "value": "#6ecf9a"
               }
             }
           }
@@ -1218,8 +1138,7 @@
             "css": "--color-violet",
             "overrides": {
               "dark": {
-                "value": "#b9aeea",
-                "trail": "     /* 8.24 على violet-bg */"
+                "value": "#b9aeea"
               }
             }
           }
@@ -1390,8 +1309,7 @@
         "$value": "#1f1f1f",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-bg",
-            "trail": "      /* أرضية المحرّر نفسها */"
+            "css": "--color-code-bg"
           }
         }
       },
@@ -1400,8 +1318,7 @@
         "$value": "#d4d4d4",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-plain",
-            "trail": "   /* النص العادي — لون المحرّر مش لون الصفحة */"
+            "css": "--color-code-plain"
           }
         }
       },
@@ -1410,8 +1327,7 @@
         "$value": "#569cd6",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-key",
-            "trail": "     /* `const` · `import` · `return` · `true` */"
+            "css": "--color-code-key"
           }
         }
       },
@@ -1420,8 +1336,7 @@
         "$value": "#4ec9b0",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-tag",
-            "trail": "     /* اسم الوسم والمكوّن — `<Button` */"
+            "css": "--color-code-tag"
           }
         }
       },
@@ -1430,8 +1345,7 @@
         "$value": "#9cdcfe",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-attr",
-            "trail": "    /* اسم السمة، اسم الخاصية في JSON */"
+            "css": "--color-code-attr"
           }
         }
       },
@@ -1440,8 +1354,7 @@
         "$value": "#ce9178",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-str",
-            "trail": "     /* النص بين علامتين */"
+            "css": "--color-code-str"
           }
         }
       },
@@ -1450,8 +1363,7 @@
         "$value": "#b5cea8",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-num",
-            "trail": "     /* الرقم */"
+            "css": "--color-code-num"
           }
         }
       },
@@ -1460,8 +1372,7 @@
         "$value": "#6a9955",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-note",
-            "trail": "    /* التعليق */"
+            "css": "--color-code-note"
           }
         }
       },
@@ -1470,8 +1381,7 @@
         "$value": "#858585",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-dim",
-            "trail": "     /* 4.47 على code-bg */"
+            "css": "--color-code-dim"
           }
         }
       },
@@ -1480,8 +1390,7 @@
         "$value": "#303031",
         "$extensions": {
           "cloud.qumra.fanar": {
-            "css": "--color-code-line",
-            "trail": "    /* الفاصل الداخلي — حدّ لوحة المحرّر */"
+            "css": "--color-code-line"
           }
         }
       },