عن المشروع

# thinking-orbs مؤشرات تحميل بنقاط متحركة لواجهات الذكاء الاصطناعي والوكلاء. تسع حالات متحركة مضبوطة يدويًا، كل حالة متوفرة بحجمين مضبوطين حسب الغرض، مرسومة على لوحة رسم ثنائية الأبعاد بسيطة — بدون WebGL، بدون فلاتر، تعمل بشكل متطابق في Chrome وSafari وFirefox. [عرض مباشر](https://orbs.jakubantalik.com) · [المستودع](https://github.com/Jakubantalik/thinking-orbs) · [الإبلاغ عن مشكلة](https://github.com/Jakubantalik/thinking-orbs/issues) ## التثبيت ```bash npm install thinking-orbs ``` ## بدء سريع ```tsx import { ThinkingOrb } from 'thinking-orbs'; function Status() { return <ThinkingOrb state="searching" size={64} />; } ``` ## الحالات تسعة أفعال يمكن أن يقوم بها الوكيل، كل منها بحركة مميزة: ```tsx <ThinkingOrb state="working" /> {/* جسيمات على مدارات مائلة */} <ThinkingOrb state="searching" /> {/* خط مسح يمسح كرة منقطة */} <ThinkingOrb state="solving" /> {/* نطاقات تختلط ثم تعود مرتبة */} <ThinkingOrb state="listening" /> {/* موجة تتدحرج عبر الحلقات */} <ThinkingOrb state="connecting" /> {/* كوكبة تصل نفسها */} <ThinkingOrb state="weaving" /> {/* ثلاثة خيوط تتضفر حول الكرة */} <ThinkingOrb state="composing" /> {/* وشاح متعدد النطاقات متموج */} <ThinkingOrb state="breathing" /> {/* حلقة تتحول ببطء */} <ThinkingOrb state="shaping" /> {/* مخطط منقط: دائرة ← مثلث ← مربع */} ``` ## الأحجام إعدادان مضبوطان — تصميمان منفصلان، وليس عامل قياس. `64` لمقياس صورة الدردشة، `20` لمقياس النص المضمّن. كل منهما يحمل عدد نقاط وحجم وسرعة خاصين به: ```tsx <ThinkingOrb state="working" size={64} /> <ThinkingOrb state="working" size={20} /> ``` ## السمة أحادية اللون تمامًا — حبر فاتح للخلفيات الداكنة، حبر داكن للخلفيات الفاتحة — مع اختيار الوضع تلقائيًا من المشروع المضيف: ```tsx <ThinkingOrb theme="auto" /> {/* الافتراضي — يكتشف من المشروع */} <ThinkingOrb theme="dark" /> {/* تثبيت: نقاط فاتحة للخلفيات الداكنة */} <ThinkingOrb theme="light" /> {/* تثبيت: نقاط داكنة للخلفيات الفاتحة */} ``` يتم حل `auto` في ثلاث طبقات ويتحدث مباشرة عند تغيير أي منها: 1. سمة `data-theme="dark|light"` أو فئة `dark`/`light` من سلف (اصطلاح Tailwind / shadcn)، مراقبة عبر `MutationObserver`؛ 2. وإلا `prefers-color-scheme`، مشترك لتغييرات سمة النظام المباشرة؛ 3. آمن لـ SSR — تُرسم اللوحة فقط على العميل، بعد حل السمة. ## خصائص أخرى ```tsx <ThinkingOrb state="solving" size={20} speed={1.5} // مضاعف على السرعة المدمجة في الإعداد paused={false} // تجميد على الإطار الحالي aria-label="تحليل المستودع…" // يتجاوز الافتراضي حسب الحالة /> ``` جميع خصائص `<canvas>` الأخرى (`className`, `style`, `data-*`, …) تمر مباشرة. ## إمكانية الوصول والأداء - `role="img"` مع `aria-label` مناسب لكل حالة افتراضيًا. - `prefers-reduced-motion: reduce` يعرض إطارًا ثابتًا تمثيليًا — بدون حركة — ويظل يتبع السمة المباشرة. - كل مثيل يتوقف تلقائيًا عند التمرير خارج الشاشة (`IntersectionObserver`) أو عند إخفاء التبويب، ويستأنف في نفس المرحلة — جميع المثيلات تشترك في ساعة واحدة. - أقواس لوحة رسم ثنائية الأبعاد فقط: بدون `ctx.filter`، بدون فلاتر SVG، بدون WebGL — نفس البكسلات في كل مكان، خفيفة على الأجهزة منخفضة المواصفات. نسبة بكسل الجهاز محدودة بـ 2. ## الترخيص MIT © Jakub Antalik