منصوبے کے بارے میں

# Libraries.dev **AI ایجنٹس کے لیے اعلیٰ معیار کی UI لائبریریاں۔** ان ایفیکٹس کے لیے سات React لائبریریاں جو انٹرفیس کو زندہ محسوس کرواتی ہیں: کارڈ کے بارڈر پر سفر کرتی روشنی کی کرن، ماڈل کے کام کرتے وقت سوچتے اوربز، زندہ چہروں والے بوٹ اوٹارز، مائع کی طرح ملتی شکلیں، آپ کی آواز کے ساتھ بلند ہوتی چمک، روشنی پکڑتی برشڈ میٹل، اور ایک امیج لوڈر جو پکسل موزیک کو حقیقی تصویر میں تحلیل کر دیتا ہے۔ ہر ایک npm سے انسٹال ہوتی ہے اور آپ کی ایپ میں ایک واحد کمپوننٹ کے طور پر آ جاتی ہے جو آپ کے موجودہ عنصر کو لپیٹ لیتی ہے۔ آپ کی مارک اپ اپنی سیمنٹکس برقرار رکھتی ہے، ایفیکٹ اس کے گرد یا پیچھے رینڈر ہوتا ہے، اور پوری چیز ہاتھ سے لکھے WebGL کے بجائے پراپس سے ٹیون ہوتی ہے۔ | لائبریری | یہ کیا کرتی ہے | npm | صفحہ | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | ایک نرم چمک جو کارڈ، بٹن یا ان پٹ کے بارڈر پر سفر کرتی ہے | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | اوربز جو آپ کے انتظار میں سوچتے ہیں — AI انٹرفیس کے لیے نو لوڈنگ حالتیں | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | زندہ چہروں والے اینیمیٹڈ بوٹ اوٹارز — AI ایجنٹس کے لیے اٹھارہ چمکدار شکلیں، چار حالتیں | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | ٹکڑے جو گو کی طرح ملتے ہیں اور جیلی کی طرح بدلتے ہیں جبکہ متن واضح رہتا ہے | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | ایک چمک جو چیٹ ان پٹ یا فون اسکرین کے نیچے سے آپ کی آواز کے ساتھ بلند ہوتی ہے | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | بٹنز، آئیکنز، متن اور بیجز کے لیے لیکوئڈ میٹل، ریفلیکشنز اور کرسر لائٹ کے ساتھ | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | ایک لوڈر جو تصویر بن جاتا ہے — ایک WebGL پکسل موزیک جو تصویر میں سمٹ آتا ہے | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | ہر ایک کو [libraries.dev](https://libraries.dev) پر آزمائیں: کھیلنے کے لیے لائیو پیش نظارہ، انسٹال کمانڈ، استعمال کا کوڈ، اور ایک پلے گراؤنڈ جو بالکل وہی کنفیگریشن کاپی کرتا ہے۔ ## استعمال کیسے کریں ہر لائبریری ایک پرامپٹ کے طور پر آتی ہے۔ اسے کاپی کریں، اپنے کوڈنگ ایجنٹ میں پیسٹ کریں، اور اسے اپنا بنائیں — تین مراحل، کوئی سیٹ اپ نہیں۔ 1. **پرامپٹ کاپی کریں۔** ہر لائبریری کے صفحے پر ایک *Copy prompt* بٹن ہے۔ ایک پیسٹ آپ کے ایجنٹ کو پوری لائبریری دے دیتا ہے: اس کی پیرامیٹر ذخیرہ الفاظ اور آپ کی موجودہ سیٹنگز۔ 2. **اسے اپنے ایجنٹ میں پیسٹ کریں۔** اسے Claude Code، Cursor یا Codex میں ڈالیں۔ ایجنٹ پیکیج انسٹال کرتا ہے اور اسے آپ کی تھیم کے مطابق جوڑ دیتا ہے۔ 3. **اسے اپنا بنائیں۔** ہر نوب کے لیے Pro کے ساتھ [Studio](https://libraries.dev/studio.html) کھولیں، اسے لائیو ٹیون کریں اور نتیجہ پراپس کے طور پر کاپی کریں۔ یا سادہ طریقہ: ```bash npm install border-beam # or thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` ہر پیکیج کا README اس کے پراپس کی دستاویز کرتا ہے۔ ## عمومی سوالات **مجھے کیا چاہیے؟** React 18 یا نیا۔ ہر لائبریری ایک خودمختار پیکیج ہے جس میں صفر رن ٹائم ڈیپنڈنسیز ہیں، سوائے Image کے، جسے `three` بھی بطور پیئر ڈیپنڈنسی چاہیے۔ **کیا یہ کوڈنگ ایجنٹس کے ساتھ کام کرتی ہیں؟** جی ہاں — یہی مقصد ہے۔ ہر لائبریری Cursor، Claude Code اور Codex سے صاف انسٹال اور کنفیگر ہوتی ہے، اور ہر پلے گراؤنڈ کا کاپی-پرامپٹ بٹن آپ کے ایجنٹ کو لائبریری کا مکمل پیرامیٹر ذخیرہ الفاظ آپ کی موجودہ سیٹنگز کے ساتھ دے دیتا ہے۔ **لائٹ اور ڈارک موڈ؟** دونوں، آپ کے لیے خودکار طور پر پتہ لگایا جاتا ہے۔ ڈیفالٹ `theme="auto"` کسی آباؤ اجداد پر `data-theme` ایٹریبیوٹ یا `dark` کلاس حل کرتا ہے، پھر `prefers-color-scheme` پر واپس آتا ہے، اور جب بھی کوئی تبدیل ہو لائیو اپ ڈیٹ ہوتا ہے۔ ایک کو پن کرنے کے لیے `theme="dark"` یا `theme="light"` پاس کریں۔ **Pro اور Studio کیا ہیں؟** ہر لائبریری پر ایک پلان۔ Pro [Studio](https://libraries.dev/studio.html) کو غیر مقفل کرتا ہے — عوامی پلے گراؤنڈز سے آگے گہری، فی لائبریری تخصیص، بالکل وہی کنفیگریشن ایکسپورٹ کرنے کے ساتھ — نیز Pro پریسیٹس اور ہر مستقبل کی لائبریری اور اپ ڈیٹ۔ [قیمتوں کا تعین](https://libraries.dev/pro.html) دیکھیں۔ **تجارتی منصوبے؟** لائبریریاں MIT ہیں — انہیں کہیں بھی استعمال کریں، بشمول تجارتی کام۔ Pro مواد (Studio ایکسپورٹس، Pro پریسیٹس اور ریسیپیز) آپ کو یا آپ کی ٹیم کو آپ کے خریدیے گئے پلان کے تحت لائسنس یافتہ ہے، لامحدود منصوبوں کے لیے۔ ## اس ریپو میں کام کرنا npm ورک اسپیسز: `packages/` میں شائع شدہ لائبریریاں ہیں (ہر npm پیکیج کے لیے ایک فولڈر، ہر ایک کا اپنا README اور LICENSE)، `sites/` میں ڈیمو سائٹس — `sites/home` libraries.dev ہے۔ ```bash npm install npm run build:site-home # every library + libraries.dev, as CI does npm run dev -w @sites/home # libraries.dev with every page and the Studio npm run typecheck # every workspace ``` ہوم سائٹ بلٹ پیکیجز امپورٹ کرتی ہے، لہذا کسی لائبریری کے صفحے یا بینچ سے پہلے اسے بلڈ کریں (`npm run build:beam`، `build:orbs`، `build:gooey`، `build:voice`، `build:metal`، `build:image`)۔ خودمختار ڈیموز (`@sites/beam`، `@sites/gooey`، `@sites/orbs`) اپنی لائبریری کو اس کے سورس سے ایلیس کرتے ہیں اور بغیر دوبارہ بلڈ کے ہاٹ ری لوڈ ہوتے ہیں۔ ## ریلیز کرنا پبلشنگ فی پیکیج ہے (`publish.yml`، `npm publish -w <package>`): ورک فلو کو دستی طور پر پیکیج نام کے ساتھ چلائیں، یا ایک GitHub ریلیز پبلش کریں جس کا ٹیگ `<package>@<version>` ہو (`voice-glow@0.2.0`)۔ رجسٹری کے پاس پہلے سے موجود ورژن چھوڑ دیا جاتا ہے۔ ## ڈیپلائز دونوں سائٹس الگ الگ ہوسٹ ہیں، کیونکہ GitHub Pages فی ریپو ایک کسٹم ڈومین پیش کرتا ہے: - **beam.jakubantalik.com** — GitHub Pages بذریعہ `.github/workflows/deploy.yml`؛ ڈومین بائنڈنگ `sites/beam/public/CNAME` میں ہے۔ - **gooey.jakubantalik.com** — Cloudflare Pages، اس ریپو سے `npm run build:site-gooey` کے ساتھ بلڈ، آؤٹ پٹ `sites/gooey/dist`۔ - **orbs.jakubantalik.com** — Cloudflare Pages، `npm run build:site-orbs` کے ساتھ بلڈ، آؤٹ پٹ `sites/orbs/dist`۔ - **libraries.dev** — Cloudflare Pages، `main` پر ہر پش پر `.github/workflows/deploy-home.yml` کے ذریعے ڈیپلائے ہوتا ہے (`npm run build:site-home`، آؤٹ پٹ `sites/home/dist`)۔ مرکزی سائٹ: لینڈنگ، فی لائبریری ایک صفحہ اور Studio بینچ، Pro قیمتوں کا تعین، اکاؤنٹ اور قانونی صفحات۔ اس کا بیک اینڈ `api.libraries.dev` ہے، جو نجی `libraries-pro` ریپو میں ایک Worker ہے — `sites/home/README.md` دیکھیں۔ `.node-version` Cloudflare بلڈز کے لیے Node 20 پن کرتا ہے، جو GitHub ورک فلو کے استعمال کردہ ورژن سے میل کھاتا ہے؛ Cloudflare کا ڈیفالٹ پرانا ہے۔ Cloudflare کا **Retry deployment** برانچ ٹپ لانے کے بجائے وہی کمٹ دوبارہ چلاتا ہے، لہذا ایک پرانے کمٹ پر ناکام ہونے والا بلڈ ناکام ہوتا رہتا ہے۔ نیا کمٹ پش کریں تاکہ تازہ ملے۔ صرف beam سائٹ پر `public/CNAME` ہے؛ وہ فائل GitHub Pages کا طریقہ کار ہے۔ Cloudflare ہوسٹڈ سائٹس اپنا ڈومین Pages پروجیکٹ میں بائنڈ کرتی ہیں، اور DNS ریکارڈ خود رجسٹرار (inetadmin) کے پاس ہے، Cloudflare پر نہیں — `jakubantalik.com` Cloudflare کے نیم سرورز پر نہیں ہے۔ `thinking-orbs` `git subtree` کے ذریعے آیا، لہذا اس کی مکمل تاریخ اس ریپو میں ہے — لیکن وہ کمٹس `src/…` کو چھوتے تھے، `packages/thinking-orbs/src/…` کو نہیں۔ اس لیے `git log -- packages/thinking-orbs` مرج پر رک جاتا ہے۔ اصل تاریخ پڑھنے کے لیے، اس کمٹ سے لاگ کریں جس کا مرج نام دیتا ہے: ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs` میں [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) کے تحت نیٹو پورٹس بھی ہیں — ایک React Native پیکیج اور ایک SwiftUI پیکیج، جو `spec/` میں گولڈن ویکٹرز کے ذریعے ویب رینڈرر کے ساتھ قدم بہ قدم رکھے جاتے ہیں۔ دونوں ابھی تک شائع نہیں ہوئے۔