› العودة إلى الموقع
مختبر السمات

المكوّنات

مكتبة المكوّنات

كل شيء في هذا الموقع مبنيّ من هذه القطع. تتجمّع الذرّات في جزيئات، والجزيئات في كائنات، والكائنات تملأ قوالب الصفحات. بدّل السمة في الأعلى وشاهد كل شيء يتغيّر.

الأسس

tokens.*.css

رموز التصميم

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

  1. أساسي --color-primary تضعه السمة
  2. دلالي --primary ما معناه
  3. مكوّن --btn-primary-bg أين يُستخدم
  1. أساسي --color-base-000 تضعه السمة
  2. دلالي --surface-sunken ما معناه
  3. مكوّن --tag-bg أين يُستخدم
  4. Tag
global.css

طبقات التتالي

تتراكب الأنماط في ثلاث طبقات، فيستطيع المكوّن دائمًا إعادة تنسيق الذرّات داخله بصنف بسيط.

  1. @layer baseإعادة الضبط + الأدوات
  2. @layer uiالذرّات + الجزيئات
  3. (unlayered)المكوّنات + الصفحات، بلا طبقة، فتفوز دائمًا

الذرّات

أصغر القطع. كل واحدة تؤدي مهمة واحدة ولا تقرأ إلا الرموز.

ui/Button.astro

Button

روابط وإجراءات. يأتي سطحه من رموز عناصر التحكم، فإعداد واحد في السمة يجعل كل الأزرار مسطّحة أو مشطوفة أو مستديرة.

الخصائص

الخاصيةالنوعالافتراضي
variant?default (outlined), primary (filled), portal (glowing accent, for the loft), danger (destructive) 'default' | 'primary' | 'portal' | 'danger' 'default'
size?md for page CTAs, sm for dense tool UIs, icon for a single glyph 'md' | 'sm' | 'icon' 'md'
block?fill the container's width boolean –
icon?a pixelarticons name, drawn before the label string –

إضافةً إلى كل سمات <button> / <a> الأصلية.

الرموز التي يقرأها

مكوّن
--fs-* --sp-* --ctl-border --ctl-radius --btn-bg --btn-fg --ctl-shadow --ctl-lift-hover --ctl-shadow-hover --btn-hover-border --btn-hover-fg --ctl-press --ctl-shadow-active --btn-primary-bg --btn-primary-fg --btn-primary-hover-bg
دلالي
--font-pixel --error --accent --foreground --secondary

الاستخدام

<Button variant="primary" icon="mail" href="#contact">email me</Button>
<Button size="sm" block data-save>save</Button>
ui/Tag.astro

Tag

تسميات صغيرة في تجويف غائر: التقنيات على بطاقة، أو عدد.

React 19 WebRTC Rust 25 8

الخصائص

الخاصيةالنوعالافتراضي
variant? 'label' | 'count' 'label'
hot? boolean –

إضافةً إلى كل سمات <span> الأصلية.

الرموز التي يقرأها

مكوّن
--sink-border --sink-radius --tag-fg --tag-bg --sink-shadow --fs-* --sp-*
دلالي
--font-pixel --warning --on-warning

الاستخدام

<Tag>WebRTC</Tag>
<Tag variant="count" hot>8</Tag>
ui/Badge.astro

Badge

حالة بلون مصمت، وفوقها نص مقروء مخصّص لذلك اللون.

نُشر فشل قيد المراجعة مباشر

الخصائص

الخاصيةالنوعالافتراضي
tone 'success' | 'error' | 'warning' | 'info' –

إضافةً إلى كل سمات <span> الأصلية.

الرموز التي يقرأها

مكوّن
--fs-* --sp-* --sink-radius
دلالي
--font-pixel --success --on-success --error --on-error --warning --on-warning --info --on-info

الاستخدام

<Badge tone="success">shipped</Badge>
ui/Chip.astro

Chip

كلمة في تجويف غائر، أكبر وأبسط من التسمية. القابلة للإزالة لها ×.

TypeScript WebRTC AT Protocol atproto webrtc

الخصائص

الخاصيةالنوعالافتراضي
removable? boolean –

إضافةً إلى كل سمات <span> الأصلية.

الرموز التي يقرأها

مكوّن
--fs-* --sp-* --sink-border --sink-radius --sink-shadow --tag-bg
دلالي
--foreground-dim --surface-sunken --font-pixel --foreground --foreground-faint

الاستخدام

<Chip>TypeScript</Chip>
<Chip removable>atproto</Chip>
ui/Field.astro

Field

حقل نصي برمز داخل حافته. الخطأ يجعل الحافة حمراء.

الخصائص

الخاصيةالنوعالافتراضي
icon string –
type? 'text' | 'search' | 'password' | 'email' | 'url' 'text'
placeholder? string –
name? string –
inputDir? 'ltr' | 'rtl' | 'auto' –
error? boolean –

إضافةً إلى كل سمات <label> الأصلية.

الرموز التي يقرأها

مكوّن
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
دلالي
--foreground-faint --foreground --surface-sunken --primary --error

الاستخدام

<Field icon="@" placeholder="handle.bsky.social" />
<Field icon="⚿" type="password" error />
ui/Switch.astro

Switch

مفتاح تشغيل وإيقاف مبني على مربع اختيار حقيقي، فتعمل لوحة المفاتيح والنماذج دون عناء.

الخصائص

الخاصيةالنوعالافتراضي
label? string –

إضافةً إلى كل سمات <input> الأصلية.

الرموز التي يقرأها

مكوّن
--sp-* --fs-* --ctl-radius
دلالي
--foreground-dim --surface-sunken --border-strong --foreground-faint --primary --on-accent --foreground

الاستخدام

<Switch label="Scanlines" data-fx="--fx-scanline" />
ui/Segmented.astro

Segmented

بضعة خيارات لا يُفعَّل منها إلا واحد. المختار يبرز من التجويف.

الخصائص

الخاصيةالنوعالافتراضي
options Option[] –
label string –

إضافةً إلى كل سمات <div> الأصلية.

مبنيّ من

Badge

الرموز التي يقرأها

مكوّن
--sink-border --ctl-radius --fs-* --sp-*
دلالي
--surface-sunken --foreground-faint --surface --foreground --shadow-color

الاستخدام

<Segmented label="Billing" options={[
  { label: 'Monthly' },
  { label: 'Yearly', pressed: true, badge: { text: '-20%', tone: 'warning' } },
]} />
ui/Eyebrow.astro

Eyebrow

التسمية الصغيرة // فوق عنوان القسم.

أعمال مختارة

الخصائص

لا خصائص خاصة به.

الرموز التي يقرأها

مكوّن
--fs-* --sp-*
دلالي
--font-pixel --primary --foreground-faint

الاستخدام

<Eyebrow>selected work</Eyebrow>

الجزيئات

ذرّات مجمّعة في شكل: شريط نافذة، سطح بارز.

ui/TitleBar.astro

TitleBar

الشريط أعلى النافذة: نقاط، وعنوان، ومكان في الطرف الآخر. تحوّله سمة AIM إلى التدرّج الأزرق الكلاسيكي.

protoimsg.app 2025
now_playing.mod
// atproto · live ● متصل

الخصائص

الخاصيةالنوعالافتراضي
size?md on cards, sm on dense tool windows and dialogs 'md' | 'sm' 'md'
dots? boolean –

إضافةً إلى كل سمات <div> الأصلية.

الرموز التي يقرأها

مكوّن
--sp-* --titlebar-bg --fs-* --titlebar-fg --ctl-radius --titlebar-accent
دلالي
--border --font-pixel --foreground-faint
من الأب
--ac

الاستخدام

<TitleBar dots>
  protoimsg.app
  <span slot="end">2025</span>
</TitleBar>
ui/Panel.astro

Panel

السطح البارز الذي تستقر عليه كل البطاقات والنوافذ. raised لما تتفاعل معه، وflat للمحتوى المساند، وlift للروابط.

raised
flat
lift · مرّر المؤشر
window.txt

Panel + TitleBar

الخصائص

الخاصيةالنوعالافتراضي
as? 'div' | 'article' | 'section' | 'aside' 'div'
elevation? 'raised' | 'flat' 'raised'
lift? boolean –

إضافةً إلى كل سمات <div> الأصلية.

الرموز التي يقرأها

مكوّن
--card-bg --raise-border --raise-radius --raise-pad --raise-shadow --raise-shadow-static --lift-hover --raise-shadow-hover --card-border-hover

الاستخدام

<Panel as="article" lift>
  <TitleBar dots>window.txt</TitleBar>
  …
</Panel>

الكائنات

أجزاء كاملة من الموقع يمكن تمييزها، مبنية من جزيئات وذرّات.

ProjectCard.astro

ProjectCard

Panel مع TitleBar ووصف وTags وروابط. البطاقة كلها تنقلك إلى رابطها الأول.

protoimsg.app 2025

protoIM

مؤسس ومهندس رئيسي · 2025 – حتى الآن

proto Instant Messenger — تطبيق دردشة فيديو مفتوح المصدر ومتعدد المنصات على AT Protocol: مكالمات مجانية بلا جدار تسجيل، كبديل عن انغلاق FaceTime. مستودع TypeScript أحادي من 8 حزم (~65 ألف سطر) يقدّم منصة آنية واحدة على الويب (React 19) وسطح المكتب (Tauri v2 / Rust) والجوال (Expo). إشارات WebRTC مكتوبة يدويًا مع بيانات اعتماد TURN مؤقتة على خادم coturn ذاتي الاستضافة، وLiveKit SFU للمكالمات الجماعية، وLexicons مخصّصة app.protoimsg.chat.*، ومُفهرس Jetstream، و5 خدمات على Fly.io — منها PDS ذاتي الاستضافة وترجمة مباشرة عبر NLLB-200 لنحو 17 لغة.

React 19 WebRTC Tauri v2 Rust Expo LiveKit PDS Fly.io
→ زيارة الموقع → GitHub

الخصائص

الخاصيةالنوعالافتراضي
project Project –

مبنيّ من

Tag Panel TitleBar

الرموز التي يقرأها

مكوّن
--sp-* --fs-*
دلالي
--primary --font-body --font-display --font-pixel --foreground-faint --foreground-dim --foreground

الاستخدام

{featured(m).map((project) => <ProjectCard project={project} />)}
MiniCard.astro

MiniCard

Panel مسطّح للمشاريع الأصغر.

nosky

منشئ ومهندس رئيسي · 2026

عميل اجتماعي لـATProto (Expo/RN) يتجاوز الـAppView المركزي — يتصل مباشرة بخوادم PDS للحسابات المتابَعة مع دمج وفرز من جهة العميل، على حزمة Microcosm (Slingshot وConstellation وSpacedust).

الخصائص

الخاصيةالنوعالافتراضي
project MiniProject –

مبنيّ من

Panel

الرموز التي يقرأها

مكوّن
--sp-* --fs-*
دلالي
--font-display --info --font-pixel --foreground-faint --foreground-dim --warning

الاستخدام

<MiniCard project={project} />
ArcadeCabinet.astro

ArcadeCabinet

Panel في هيئة آلة ألعاب أركيد، بشاشة قابلة للعب أو مقفلة.

FAST HOPPER
0
الأفضل 0

HOPPER

مصمم ومهندس · متاحة الآن

لعبة تسلّق منصات عمودية — اقفز صعودًا على سلّم لا ينتهي من المنصات وطارد أعلى نتيجة. تعمل على محاكاة حتمية بحيث يمكن التحقق من كل جولة. لوحات صدارة عالمية حسب الصعوبة (fast / faster)، وتُكتب أفضل نتائجك مباشرة في مستودع ATProto الخاص بك كسجلات actor.rpg.stats.

TypeScript Canvas Deterministic Sim ATProto Records Leaderboards
▶ العب الآن

الخصائص

الخاصيةالنوعالافتراضي
game Game –

مبنيّ من

Tag Panel

الرموز التي يقرأها

مكوّن
--cabinet-from --cabinet-to --sink-shadow --screen-star --screen-bg --fs-* --screen-shadow --platform-from --platform-to --platform-edge --platform-hi --player-glow --sp-* --locked-from --locked-to
دلالي
--primary --border --scanline-color-screen --font-pixel --foreground --foreground-dim --font-display --foreground-faint

الاستخدام

<ArcadeCabinet game={game} />
AtStatusCard.astro

AtStatusCard

حالتي الحيّة على Bluesky، تُقرأ من مستودعي على AT Protocol عند تحميل الصفحة.

الخصائص

لا خصائص خاصة به.

مبنيّ من

Panel TitleBar

الرموز التي يقرأها

مكوّن
--fs-* --titlebar-accent --sp-* --sink-radius
دلالي
--success --primary --surface-sunken --shadow-color-soft --font-display --foreground --info --border --font-pixel --foreground-faint

الاستخدام

<AtStatusCard />
FeedbackForm.astro

FeedbackForm

Button يفتح درجًا: TitleBar فوق نموذج، وعلى الهواتف ورقة يمكن سحبها لإغلاقها.

اترك رسالة

الخصائص

لا خصائص خاصة به.

مبنيّ من

Button TitleBar

الرموز التي يقرأها

مكوّن
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
دلالي
--foreground --surface-sunken --foreground-faint --primary --foreground-dim --success --error

الاستخدام

<FeedbackForm />

القوالب

الأطر التي تصبّ فيها الصفحات محتواها.

Section.astro

Section

كل قسم في الصفحة الرئيسية: Eyebrow وعنوان ثم ما بداخله.

أعمال مختارة

المشاريع.

هذا الصندوق هو Section.

الخصائص

الخاصيةالنوعالافتراضي
id? string –
eyebrow? string –
title? string –

مبنيّ من

Eyebrow

الرموز التي يقرأها

لا شيء خاص به. ذرّاته تجلب رموزها.

الاستخدام

<Section id="work" eyebrow="selected work" title="Things I've built">
  …
</Section>