Solid Glass shadcn/ui تھیم کے ساتھ صنعتی AI انٹرفیسز بنائیں

Solid Glass کیا کرتا ہے

Solid Glass shadcn/ui کے لیے ایک بصری تھیم ہے، جو صنعتی AI پینلز، آپریٹر کنسولز اور ڈیش بورڈز کے لیے تیار کیا گیا ہے۔ یہ انٹرفیسز کو موٹے، دھوئیں جیسے پینلز دیتا ہے جو دور سے ٹھوس نظر آتے ہیں اور اپنی شیشے جیسی خصوصیت زیادہ تر کناروں پر ظاہر کرتے ہیں۔

Liquid-glass اثرات کے برعکس، Solid Glass پس منظر کو متن کے ساتھ مقابلہ نہیں کرنے دیتا۔ اس کی سطح ایک غیر جانب دار سرمئی رنگ استعمال کرتی ہے جو نہ مڑتی ہے، نہ بہتی ہے اور نہ ہی پس منظر میں موجود مواد سے رنگ لیتی ہے۔ اس کی تکمیل اوپر موجود ہلکی لکیر، باریک بارڈر اور سطح کے نیچے موجود سائے سے ہوتی ہے۔

اس پروجیکٹ میں shadcn/ui کے اجزا کا سیٹ اور ایسے انٹرفیسز کے لیے اجزا کا مجموعہ شامل ہے جہاں ایک AI ایجنٹ کام کر رہا ہو۔ سرکاری Solid Glass سائٹ دستیاب اجزا میں اس میٹیریل کو دکھاتی ہے اور اس میں ایک Create صفحہ بھی شامل ہے جہاں اس کی بصری متغیرات کو ایڈجسٹ کیا جا سکتا ہے۔

اہم خصوصیات اور اجزا

• ایک واحد اسٹائل شیٹ shadcn/ui کے اجزا پر ان کے موجودہ data-slot attributes اور classes استعمال کرتے ہوئے تھیم لاگو کرتی ہے۔
• یہ تھیم shadcn/ui کے variable names متعین کرتی ہے، جن میں شیشے کی تین موٹائیاں، رنگ، حرکت اور اس کی واحد بصری حالت شامل ہیں۔
• ڈارک موڈ بنیادی میٹیریل ڈیزائن ہے، جبکہ لائٹ تھیم بھی دستیاب ہے۔
• Create صفحہ آپ کو موٹائی، tint، چارٹ کا رنگ، قسم، radius، rim اور blur ایڈجسٹ کرنے، پھر نتیجے میں بننے والی CSS کاپی کرنے دیتا ہے۔
• رجسٹری shadcn CLI کے ذریعے انسٹال کیے جا سکنے والے Solid Glass اجزا فراہم کرتی ہے۔

Solid Glass کے اپنے اجزا میں status-glyph، panel، tag اور dot-loader شامل ہیں۔ ایجنٹ پر مرکوز اجزا میں turn-status، composer، tool-steps، diff-view، ask-card، context-ring، task-notice اور reasoning شامل ہیں۔

تھیم انسٹال کریں

1. shadcn/ui پروجیکٹ سے آغاز کریں

React 19، Tailwind CSS 4 اور Base UI اجزا پر مبنی shadcn/ui پروجیکٹ استعمال کریں۔ اگر آپ ابتدا سے شروع کر رہے ہیں تو اسے اس کمانڈ سے بنائیں:

npx shadcn@latest init

2. Solid Glass اسٹائل شیٹ شامل کریں

آپ اسٹائل شیٹ میزبان رجسٹری سے یا براہِ راست repository سے انسٹال کر سکتے ہیں:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/solid-glass.json
npx shadcn@latest add deeplethe/solid-glass/solid-glass

3. اسے موجودہ اسٹائلز کے بعد import کریں

Solid Glass کو Tailwind اور shadcn/ui کی اسٹائل شیٹ کے بعد import کریں۔ یہ تھیم وہی color variable names متعین کرتی ہے جو shadcn init بناتا ہے، اس لیے import شامل کرنے سے پہلے تیار کردہ :root اور .dark color-variable blocks ہٹا دیں۔

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "./solid-glass.css";

اس import کے بعد آپ کے موجودہ shadcn/ui اجزا میں کسی تبدیلی کے بغیر یہ میٹیریل استعمال کیا جا سکتا ہے۔ مکمل تنصیب کی رہنمائی کے لیے Solid Glass کا تنصیبی صفحہ دیکھیں۔

Solid Glass کے اجزا انسٹال کریں

Solid Glass کے اپنے اجزا بھی یہی shadcn رجسٹری ورک فلو استعمال کرتے ہیں۔ مثال کے طور پر، status indicator اس کمانڈ سے انسٹال کریں:

npx shadcn@latest add https://deeplethe.github.io/solid-glass/r/status-glyph.json

کسی دوسرے جز کے لیے اس کے رجسٹری URL کے ساتھ یہی کمانڈ دہرائیں۔ دستیاب رجسٹری entries میں status displays، panels، labels، loading indicators، agent turn information، composition areas، tool steps، diffs، questions، context usage، task notices اور reasoning views شامل ہیں۔

پروجیکٹ مقامی طور پر چلائیں

Solid Glass showcase پر کام کرنے یا اس کا source دیکھنے کے لیے repository clone کریں، dependencies انسٹال کریں اور development server شروع کریں:

npm install
npm run dev

Development سائٹ http://localhost:5191 پر چلتی ہے۔ Production اور verification کمانڈز یہ ہیں:

npm run build
npm run typecheck

Build پروڈکشن output کو dist/ میں لکھتا ہے۔

Development tools دیکھیں

Repository میں development-only routes شامل ہیں جو آپ کو تھیم اور مثالوں کا معائنہ کرنے میں مدد دیتے ہیں:

• /dev/banner پروجیکٹ میں استعمال ہونے والا development banner دکھاتا ہے۔
• /dev/examples ہر مثال mount کرتا ہے اور ناکام ہونے والی مثالوں کی اطلاع دیتا ہے۔
• /dev/examples?q=button,card دکھائی جانے والی مثالوں کو filter کرتا ہے۔
• /dev/examples?theme=light مثالوں کا پیش منظر لائٹ تھیم میں دکھاتا ہے۔
• /dev/examples?hover=<selector> کسی مطابقت رکھنے والے element کو اس طرح دکھاتا ہے جیسے pointer اس پر موجود ہو۔
• /dev/examples?click=<selector> کسی مطابقت رکھنے والے element کو دباتا ہے تاکہ آپ دیکھ سکیں کہ وہ کیا کھولتا ہے۔

Repository کے default GitHub Pages location کے علاوہ سائٹ deploy کرتے وقت SOLID_GLASS_ORIGIN کو اس address پر set کریں جہاں سائٹ serve کی جاتی ہے اور SOLID_GLASS_BASE کو اس کے path پر set کریں۔ Solid Glass کے اجزا ایک دوسرے کا حوالہ دیتے وقت origin استعمال کرتے ہیں۔

پروجیکٹ کی ساخت کو سمجھیں

سب سے اہم فائلیں اور ڈائریکٹریاں یہ ہیں:

• src/solid-glass.css میں مکمل میٹیریل تھیم موجود ہے۔
• registry.json بیان کرتی ہے کہ shadcn CLI کیا انسٹال کرتا ہے۔ رجسٹری بلڈ سائٹ کے لیے public/r/ بھی بناتی ہے۔
• src/components/ui/ میں دکھائے جانے والے shadcn/ui اور Solid Glass اجزا موجود ہیں۔
• src/create/ اور src/pages/create.tsx میٹیریل کی تخصیص کے صفحے کو نافذ کرتے ہیں۔
• src/examples/ میں ہر مثال کے لیے ایک چھوٹی فائل موجود ہے۔
• content/ میں اجزا اور پروجیکٹ کی دستاویزات محفوظ ہیں۔
• scripts/build-docs.mjs دستاویزات کو src/docs/generated.json میں تبدیل کرتی ہے۔

Solid Glass جزو بنائیں

اپنا جزو شامل کرنے کے لیے پروجیکٹ میں استعمال ہونے والی یہی تنظیم اپنائیں:

1. src/components/ui/<name>.tsx بنائیں۔ اسے shadcn/ui جزو کی طرح لکھیں، فنکشن کمپوننٹس استعمال کریں، ہر حصے میں data-slot شامل کریں، اور @/lib/utils سے cn() استعمال کریں۔
2. src/examples/<name>-demo.tsx شامل کریں، اور ہر اضافی مثال کے لیے ایک فائل بنائیں۔
3. content/solid/<name>.mdx بنائیں۔ اس میں عنوان اور وضاحت کے ساتھ فرنٹ میٹر، جزو کا پیش منظر، انسٹالیشن کی ہدایات، استعمال کی ہدایات، اور ہر مثال کے لیے ایک سرخی شامل کریں۔

میٹیریل کو اس کے چار ڈیزائن اصولوں کے مطابق یکساں رکھیں: فنش کنارے پر ہونا چاہیے، سطحیں ہلکی اور کھلی محسوس ہونے کے بجائے بھاری محسوس ہوں، گہرائی کا اظہار موٹائی کے ذریعے ہو، اور انٹرفیس میں ایک ہی حالت استعمال ہو۔

Create صفحے کے ذریعے اعلیٰ درجے کی تخصیص

میٹیریل کو انٹرایکٹو انداز میں بہتر بنانے کے لیے Create صفحہ کھولیں۔ موٹائی، ٹنٹ، چارٹ کے رنگ، قسم، ریڈیئس، رم، اور بلر کو تبدیل کریں جبکہ پیش منظر اپ ڈیٹ ہوتا رہے گا۔ جب نتیجہ آپ کے انٹرفیس کے لیے موزوں ہو جائے تو مختصر CSS آؤٹ پٹ کاپی کریں اور اپنے پروجیکٹ کی اسٹائل شیٹ میں متعلقہ متغیرات کے مطابق اسے ڈھالیں۔

دستیاب اختیارات src/create/options.ts میں متعین ہیں، جبکہ پیش منظر کے کارڈز shadcn/ui اجزا استعمال کرتے ہیں۔ اس طرح یہ صفحہ ڈیزائن ٹول کے ساتھ ساتھ یہ سمجھنے کے لیے حوالہ بھی فراہم کرتا ہے کہ تھیم کے متغیرات میٹیریل پر کیسے اثر انداز ہوتے ہیں۔

نتیجہ

Solid Glass کسی موجودہ shadcn/ui ایپلیکیشن کو واضح اور ٹھوس شیشے جیسا انداز دینے کا ایک آسان طریقہ ہے۔ اپنی عام تھیم فائلوں کے بعد اس کی اسٹائل شیٹ انسٹال کریں، ضرورت کے وقت رجسٹری سے ایجنٹ پر مرکوز اجزا شامل کریں، اور نتیجے کو بہتر بنانے کے لیے مقامی مثالوں یا Create صفحے کا استعمال کریں۔ یہ پروجیکٹ MIT لائسنس کے تحت جاری کیا گیا ہے؛ shadcn/ui سے ماخوذ اجزا اور دستاویزات اپنے مصنفین کے MIT لائسنس کے تحت رہتے ہیں، جیسا کہ NOTICE.md میں درج ہے۔