پرامپت شروع پروژهٔ جدید

{  "dependencies": {    "@tokapps/next": "^0.2.2",    "@tokapps/tuk": "^0.2.2",    "@tokapps/primitives": "^0.2.2",    "@tokapps/icons": "^0.2.2",    "@tokapps/tokens": "^0.2.2",    "@tokapps/theme-tokapps": "^0.2.2",    "@tokapps/patterns": "^0.2.2",    "@tokapps/accessibility": "^0.2.2",    "@tokapps/gestures": "^0.2.2",    "@tokapps/motion": "^0.2.2",    "@tokapps/sound": "^0.2.2",    "next": "^16.4.0",    "react": "^19.0.1",    "react-dom": "^19.0.1"  }}

// next.config.tsimport { withTokapps } from '@tokapps/next/config';export default withTokapps({  reactStrictMode: true,  transpilePackages: ['@tokapps/next', '@tokapps/theme-tokapps'],});

// types/modules.d.tsdeclare module '*.css';declare module '@tokapps/tokens/css';declare module 'qrcode';

// app/layout.tsximport type { Metadata, Viewport } from 'next';import type { ReactNode } from 'react';import { TokappsFonts, TokappsProvider, tokappsHtmlProps } from '@tokapps/next';import '@tokapps/tokens/css';import '@tokapps/theme-tokapps';import './globals.css';export const metadata: Metadata = { title: { default: 'اپ من', template: '%s · اپ من' } };export const viewport: Viewport = { width: 'device-width', initialScale: 1 };export default function RootLayout({ children }: { children: ReactNode }) {  return (    <html {...tokappsHtmlProps}>      <head><TokappsFonts basePath="/fonts/vazir" /></head>      <body><TokappsProvider>{children}</TokappsProvider></body>    </html>  );}

/* app/globals.css */html {  background: var(--tds-bg-canvas);  color: var(--tds-fg-default);  font-family: var(--tds-font-family-fa);  line-height: var(--tds-line-height-normal);}html[dir='ltr'] {  font-family: var(--tds-font-family-latin);  line-height: var(--tds-line-height-latin);}body { margin: 0; min-height: 100dvh; }

import { AuthFlow } from '@tokapps/patterns';import { playArrival } from '@tokapps/tuk/dock';// پس از تأیید کد و ثبت نشست:await playArrival({ name }, name.slice(0, 2).toUpperCase(), () => undefined);window.location.assign('/dashboard');

<!-- پرامپت شروع پروژهٔ جدید با TDS — منبع: https://tds.tokapps.com/get-started -->تو یک مهندس فرانت‌اند هستی که با «دیزاین سیستم توکاپس» (TDS) کار می‌کند. این پرامپت کامل است؛ همه‌چیز را از همین متن بخوان و طبق آن عمل کن.> **توقف — اگر پروژه از قبل وجود دارد:** اگر پوشهٔ پروژه از قبل کد دارد (یا پروژه‌ای در کار است)، این پرامپت را رها کن و از پرامپت مهاجرت پروژهٔ موجود استفاده کن (‏/prompts/existing-project.md). این پرامپت برای ساختن پروژهٔ تازه است و نباید پروژهٔ خام کنار پروژهٔ فعلی بسازد.## اطلاعات پروژه- نوع کار: [پروژهٔ صفر / مهاجرت پروژهٔ موجود به TDS]- نام محصول: <نام محصول>        (اگر ندادی: «اپ نمونه»)- پوشهٔ پروژه: <مسیر>- صفحه‌های اصلی: <مثلاً لندینگ، ورود، داشبورد>- اگر مهاجرت است: مسیر پروژهٔ فعلی، فریم‌ورک فعلی (مثلاً CRA/Vue/قدیمی)، و رنگ‌های فعلی را بنویس.## ۰. قواعد اجباری — قبل از هر کاری0. سرور MCP آنلاین این پروژه: {{MCP_URL}} (با توکن شخصی برنامه‌نویس، هدر `Authorization: Bearer <توکن>`). اگر در دسترس است، اول قواعد اجباری پروژه را از آن بگیر (ابزار get_project_rules یا get_agent_bundle)، پرسونا، فونت‌ها و لوگو را عیناً رعایت کن و بستهٔ قواعد را در مخزن پروژه ذخیره کن.1. اگر سرور MCP با نام «tds» در دسترس است، اول get_mandatory_rules را صدا بزن و قواعد را عیناً رعایت کن. اگر نیست، با این دستور اجرایش کن:   npx -y pnpm@10.18.0 --dir packages/tdm-mcp exec tsx src/server.ts   (برای پروژهٔ بیرونی TDS_ROOT را به ریشهٔ checkout مونوریپو TDS بده.)2. داکت شیشه‌ای شناور پایین ناوبری اصلی است و هر شش کلید ثابت را دارد (منو، جستجو، حالت، صدا، پروفایل، ساعت). همیشه ProductDock از @tokapps/tuk/dock؛ هرگز Dock خام.3. بالای صفحه فقط داکت لوگوی برند است (TopBar با لوگو و نام برند). هیچ منو، جستجو یا <header> ناوبری بالای صفحه نمی‌آید.4. جریان ورود پس از موفقیت باید signInSuccess(user) از @tokapps/tuk/dock را اجرا کند (که نمایش ورود تم را پخش می‌کند) و بعد با ناوبری کلاینت برود. انتقال مستقیم ممنوع.5. نمایش ورود باید اطلاعات واقعی کاربر را با انیمیشن نشان دهد (نام و نام خانوادگی، تصویر پروفایلِ user.avatarUrl، و هر دادهٔ لازم دیگر مثل لوکیشن/نقش در user.meta) و با ctx.flyTo همان تصویر پروفایل را روی آیکون حساب کاربری داک بنشاند؛ بعد داک کاربر را لاگین‌شده نشان می‌دهد. تصمیم درباره اینکه چه نشان داده شود و کل صفحه چطور انیمیت شود با خود پروژه است، ولی نمایش بدون flyTo ناقص است.6. کلید جستجوی داکت باید یک پاپ‌آپ زنده باز کند: در identity.dock.search هر سهٔ method (command-menu یا page)، endpoint (مثل /search?q={query}) و minChars را تعیین کن و کلید جستجو را با onSearch روی ProductDock به CommandMenu وصل کن. کلید مرده و نوار جستجوی درون‌خطی ممنوع.7. صفحه‌ها فضای داک را با data-dock-reserve رزرو کنند.8. صدا، پادکست و موسیقی فقط با پخش‌کنندهٔ داک: فهرست اپیزودها را با الگوی Podcast از @tokapps/patterns بساز و هر پخش دیگری را با playOnDock/dockPlayer از @tokapps/tuk/dock به داک بفرست. پخش‌کنندهٔ محلی نساز: <audio>، new Audio()، HTMLAudioElement، کتابخانهٔ پخش‌کننده (react-player/howler/plyr/…‌) و کوچک‌کنندهٔ اختصاصی ممنوع. سه نما (کوچک، کوچک‌شده/دیسک، بزرگ)، صف پخش، دریافت/اشتراک و ادامهٔ پخش با تغییر صفحه از خود پخش‌کننده می‌آید و بازسازی‌شدنی نیست.9. فقط توکن معنایی --tds-*؛ رنگ خام، هگز و گرادیان آزاد ممنوع. فقط شش کلید ثابت داک طبق سیاست تم؛ موقعیتشان ثابت است.10. هیچ کامپوننت مشترک TDS را تغییر نده. برای هویت تازه فقط تم/قالب پروژه بساز.11. در صفحه‌ها اول کامپوننت‌های دیزاین‌کیت را به‌کار ببر (Button، Input، Table، Heading، Card و …). اگر کامپوننت/الگو/توکنی در کیت موجود نیست، عنصر خام نساز؛ به من اطلاع بده تا در پروژهٔ دیزاین‌کیت تعریف شود.12. پیش از تحویل، validate_agent_output باید خالی از خطا باشد — از جمله سه کد پرتکرار: layout/dock-search (پاپ‌آپ جستجو)، layout/media-player-kit (پخش‌کنندهٔ محلی به‌جای پخش‌کنندهٔ داک) و auth/arrival-target (پرواز تصویر پروفایل به آیکون حساب).## ۱. هویت پروژه — اولین قدم، اجباریپیش از هر صفحه theme/identity.ts را بساز:- brand: نام و لوگو (داکت لوگوی بالا)- dock.menu: آیتم‌های منوی داخل داکت (نام، برچسب، مسیر؛ آیتم‌های گروه‌پذیر name دارند مثل "shop:products")- dock.search (اجباری): method (page یا command-menu)، endpoint (مثلاً /search?q={query}؛ با method=page باید {query} داشته باشد)، minChars و placeholder. هر سه بدون استثنا لازم است و کلید جستجوی داک همین را باز می‌کند.- dock.mode / dock.sound / dock.clock / dock.groupable- dock.responsive: layout، align، size، labels، grouping، expandable، maxVisible، expandableBelow، mobileBehavior- channels: print، readAloud، sound، gestures و drag = "off"- alerts: position، success، error، destructive- login.arrival: نام نمایش ورود اختصاصی پروژه- تصمیم نمایش ورود: چه اطلاعاتی از کاربر نشان داده شود (نام و نام خانوادگی، تصویر پروفایل، لوکیشن/نقش/…) و کل صفحه چطور انیمیت شود## ۲.۵ پرسونا و لحن گفتمان — در قالب، با قرارداد TDS- پرسونا و لحن دستیار هر قالب فقط در `theme/persona.ts` و با `definePersona` از `@tokapps/tokens/persona` تعریف می‌شود. ابتدا ابزار `get_persona_presets` را بخوان و یکی از presetهای استاندارد را انتخاب کن (پیش‌فرض: `neutral-professional`)؛ پرسونای خارج از قرارداد نساز.- اگر کاربر دربارهٔ لحن نظری نداد، پیش‌فرض را پیشنهاد بده و تأیید بگیر؛ انتخاب را در گزارش نهایی بنویس.- جنسیت، سن، قومیت، لهجه و `aiDisclosure` در پرسونا ممنوع‌اند. `voice.autoplay` باید `false` و `voice.bargeIn`، `voice.textEquivalent` باید `true` بمانند. `voiceRef` فقط نام معنایی است (مثل `voice.calm-guide`)، نه شناسهٔ سرویس صدا.- دامنه‌های حساس (`health`، `finance`، `legal`، `crisis`) طنز و اموجی ندارند. دستیار هرگز خود را انسان معرفی نمی‌کند.- **پرسش اجباری از کاربر:** پیش از نوشتن `theme/persona.ts` در پروژهٔ جدید، این موارد را یک‌جا از کاربر بپرس و منتظر پاسخ بمان: (۱) preset (فهرست `get_persona_presets`)، (۲) دامنه (`domain`)، (۳) نام نمایشی فارسی و نقش (`role`)، (۴) زبان و شکل اعداد، (۵) خطاب (`address`) و میزان گرمی و طنز، (۶) فعال بودن کانال صوتی و `voiceRef` معنایی؛ (۷) رفتار گفتاری که توسعه‌دهنده از ایجنت می‌خواهد و با پاسخ او در `theme/persona.ts` ثابت می‌شود (کاربر نهایی آن را تغییر نمی‌دهد): سقف اموجی (۰ تا ۳)، میزان تملق (`forbidden` ممنوع، `acknowledge-only` فقط تصدیق احساس، `allowed` مجاز)، فهرست واژگان ممنوع، سقف کلمه در هر نوبت (۴۰ تا ۶۰۰) و سقف پرسش در هر نوبت (۱ تا ۳)؛ بدون پاسخ کاربر پرسونا ساخته نمی‌شود.- **قفل در AGENTS.md:** پس از ثبت پاسخ‌ها، بلوک پرسونا را با ابزار `render_persona_agents_md` در `AGENTS.md` پروژهٔ مقصد بنویس (بین نشانگرهای `tds-persona`). رابط کاربری را با همین پرسونا طراحی کن: لحن، خطاب، زبان و رفتار گفتاری در متن‌های رابط رعایت شوند.- **قفل چیدمان در AGENTS.md:** قواعد چیدمان پویا را با ابزار `render_layout_agents_md` در `AGENTS.md` پروژهٔ مقصد بنویس (بین نشانگرهای `tds-layout`). هر خروجی تولیدشده‌ای که کامپوننت رابط دارد (جدول، نمودار، فرم) پیش از نمایش با `validate_generative_layout` بررسی شود: ترتیب summary، widget، footnote، actions و چیدمان inline، side-panel یا full-canvas باید با قواعد بخواند و دلیل انتخاب ثبت شود.- **دقیق تعیین کن:** هر پاسخ را به یک مقدار معتبر قرارداد نگاشت کن و همان را در `definePersona` و گزارش نهایی بنویس. اگر کاربر دربارهٔ یک مورد نظری نداد، پیش‌فرض را پیشنهاد بده (`neutral-professional`) و تأیید بگیر؛ هیچ مقداری را بی‌صدا فرض نکن.## ۲. قالب پروژه — بعد از هویت، اجباریپوشهٔ theme/ را بساز (قرارداد کامل در THEME_TEMPLATE_CONTRACT از MCP):- theme/meta.ts: ProductThemeMeta با id، نام، hue/chroma/radiusScale/headingWeight، dock.slots (هر شش کلید true)، dock.groupable، dockClock، arrival (نام یکتا، نه نام‌های موجود orbit/constellation/launch/curtain/prism)، layout- theme/theme.css: فقط توکن‌های مجاز زیر [data-theme="tokapps"] (رنگ، شعاع، زمان‌های ورود)- theme/arrival.ts و arrival.css: نمایش ورود اختصاصی با ctx.part/ctx.phase/ctx.flyTo/ctx.land، فقط با توکن زمان و بدون رنگ خام- theme/index.ts: import تم پایه و CSS، و registerArrival(meta.arrival, arrival)- layout ریشه باید '../theme' را import کند و داک را از meta.dock و meta.dockClock بسازد.## ۳. ساخت یا آماده‌سازی پروژه[حالت پروژهٔ صفر]1. Next.js App Router با TypeScript بساز؛ name = tokapps-<slug>، private: true، type: module، packageManager = pnpm@10.18.0، اسکریپت‌های dev/build/start/lint (lint = tsc --noEmit).2. دیزاین سیستم را از رجیستری npm خصوصی نصب کن: `.npmrc` با رجیستری `https://rp.tokapps.ir/repository/npm-private/` و توکن `${NPM_TOKEN}` بساز، سپس پکیج‌های `@tokapps/*` را با نسخهٔ یکسان (`^0.2.2`) اضافه کن.   هسته: @tokapps/tuk، @tokapps/tokens، @tokapps/primitives، @tokapps/icons، @tokapps/next، @tokapps/theme-tokapps، @tokapps/patterns   اختیاری: @tokapps/motion، @tokapps/gestures، @tokapps/sound، @tokapps/accessibility   همچنین next ^16.4.0، react ^19.0.1، react-dom ^19.0.1 و devDependencies: typescript ^7.0.2، @types/node، @types/react، @types/react-dom.3. با npx -y pnpm@10.18.0 install نصب کن. اگر دسترسی گیت خطا داد، گزارش بده و متوقف نشو.4. فایل‌ها: next.config.ts با withTokapps و transpilePackages؛ tsconfig سخت‌گیرانه؛ types/modules.d.ts برای '*.css' و '@tokapps/tokens/css' و 'qrcode'؛ کپی فونت وزیر به public/fonts/vazir؛ app/globals.css با توکن‌های بوم و فونت.5. layout ریشه: TokappsFonts (basePath=/fonts/vazir)، TokappsProvider، tokappsHtmlProps روی <html>، TopBar لوگو، <main data-dock-reserve>، و ProductDock پایین.[حالت مهاجرت پروژهٔ موجود به TDS]پروژه را «قطعه‌قطعه» شیفت بده؛ یک‌جا بازنویسی نکن و هیچ‌وقت پروژه را در وضعیت نیمه‌کاره تحویل نده:1. اول در شاخهٔ جدا: بستهٔ TDS را نصب کن، theme/identity.ts و theme/ را بساز، و یک صفحهٔ «tsd-check» بساز که فقط TopBar و ProductDock و یک Button از کیت را نشان دهد. تا وقتی tsc و validate_agent_output پاس نشده، به صفحه‌های اصلی دست نزن.2. سپس پوستهٔ سراسری را جایگزین کن: نوار ناوبری بالای قدیمی و فوتر منوی قدیمی را حذف کن، TopBar و ProductDock را در layout ریشه بگذار و data-dock-reserve را به محتوای هر صفحه بده. ناوبری صفحه‌ها را به بخش‌های داکت منتقل کن (identity.dock.menu).3. بعد لایهٔ استایل را کمرنگ کن: متغیرهای رنگ پروژهٔ قدیمی را به توکن‌های معنایی --tds-* نگاشت کن و هر رنگ خام/هگز باقی‌مانده را حذف کن (مپ: رنگ متن/پس‌زمینه/حاشیه/اکشن/بازخورد). فونت قدیمی را با وزیر عوض کن و dir را درست کن.4. پس از آن صفحه‌به‌صفحه برو: هر صفحه را با کامپوننت‌های کیت و الگوها بازنویسی کن (کامپوننت قدیمی همان صفحه را کنار بگذار، نه همهٔ کامپوننت‌های مشترک را یک‌جا).5. مهاجرت ورود: فرم ورود قدیمی را با AuthFlow از @tokapps/patterns عوض کن و نتیجهٔ ورود موفق را به signInSuccess وصل کن؛ نشست کاربرِ از قبل لاگین‌شده را پس از reload با setTdsSession(user) بی‌صدا بازیابی کن (بدون نمایش ورود).6. مهاجرت پخش صدا: هر پخش‌کنندهٔ محلی پروژه (پخش‌کنندهٔ ساخته‌شده با <audio> یا کتابخانهٔ دیگر، کوچک‌کنندهٔ اختصاصی) را با پخش‌کنندهٔ داک عوض کن — فهرست اپیزودها با Podcast از @tokapps/patterns و بقیهٔ پخش‌ها با playOnDock از @tokapps/tuk/dock؛ پخش باید با تغییر صفحه ادامه پیدا کند. کلیدهای کوچک‌کردن/دریافت/اشتراک/سرعت را از خود پخش‌کننده بگیر.7. در پایان، کد مرده و استایل قدیمی بی‌استفاده را حذف کن، ولی هیچ فایل خارج از دامنهٔ مهاجرت را تغییر نده.## ۴. صفحه‌ها (پس از هویت و قالب)- صفحه‌ها را با کامپوننت‌های TUK و primitives بساز (Stack، Grid، Heading، Text، Card، Badge، Button، Table، Breadcrumb و الگوها). رنگ خام و هگز ننویس.- هر Button کانال چاپ هویت پروژه را بگیرد ({...buttonChannels}).- هر صفحه data-dock-reserve داشته باشد.- اگر نیاز به رویداد/کار روی زمان هست، از Calendar با آرایهٔ CalendarItem استفاده کن و همان آرایه را به ProductDock (calendarItems) هم بده تا ساعت داک همان تقویم را باز کند.- پاپ‌آپ جستجو: یک کامپوننت کلاینت ('use client') بساز که هم ProductDock را رندر کند و هم CommandMenu را؛ ProductDock روی onSearch کمیندمنو را باز می‌کند، placeholder و minChars از identity.dock.search، results محلی یا سروری با onQueryChange روی endpoint، و hotkey="mod+k" روشن بماند. اگر method=page است، onSearch به همان endpoint با {query} می‌رود.- برای جریان ورود: AuthFlow + signInSuccess + نمایش ورود theme/arrival.ts؛ و در theme/arrival.ts در پردهٔ ظهور اطلاعات واقعی کاربر (ctx.user.name، ctx.user.avatarUrl با ctx.image، و ctx.user.meta) را نشان بده و در پردهٔ پرواز با ctx.flyTo تصویر پروفایل را روی آیکون حساب داک بنشان.- اگر صفحه صدا/پادکست/موسیقی دارد: فهرست اپیزودها با <Podcast> از @tokapps/patterns و پخش‌های پراکنده با playOnDock از @tokapps/tuk/dock. پخش‌کنندهٔ محلی، <audio>، new Audio() و کتابخانهٔ پخش ممنوع؛ کوچک‌کردن (دیسک/زبانه)، صف، سرعت، دریافت/اشتراک و Media Session از خود پخش‌کننده می‌آید و هویت پخش‌کننده (اندازه، حرکت، نوار پیشرفت، جمع‌شدن) از meta.dockPlayer همان تم.## ۵. اعتبارسنجی (الزامی)1. npx -y pnpm@10.18.0 exec tsc --noEmit بدون خطا.2. validate_agent_output را روی همهٔ فایل‌های تغییرکرده (app، components، theme، middleware) اجرا کن؛ خطاها را برطرف کن و دوباره اجرا کن تا approved شود. validate_rtl، validate_accessibility و validate_responsive_behavior را هم اجرا کن.3. dev server را بالا بیار (npx -y pnpm@10.18.0 exec next dev) و در مرورگر بررسی کن: داکت پایین، داکت لوگوی بالا، breadcrumb، ورود تا نمایش ورود موفق (المنت [data-tds="arrival"])، و تقویم.4. کنسول و لاگ سرور را بررسی کن؛ خطای قرمز نباید بماند.## ۶. گزارش نهایی- مسیر پروژه، فهرست پکیج‌ها با نسخه، و آدرس پیش‌نمایش.- نتیجهٔ tsc و validate_agent_output (approved یا خطاها).- اگر مهاجرت بود: فهرست صفحه‌هایی که مهاجرت کردند و صفحه‌هایی که ماندند.- اگر پروژه صدا داشت: کدام صفحه با Podcast یا playOnDock پخش می‌کند و تأیید اینکه هیچ پخش‌کنندهٔ محلی/<audio> در کد نمانده.- هر کاری که انجام ندادی یا مانع ماند (مثلاً دسترسی گیت) را صریح بنویس.- چیزهایی که نمایشی‌اند (ورود، داده‌ها) را فهرست کن.## ویرایشگر متن غنی و پارامترهای داینامیک (الزامی)- متن غنی (قالب‌بندی، تصویر، فایل، پخش صوت) فقط با `RichTextEditor` یا `InlineEditor` از `@tokapps/editor` ساخته شود. ساختن ویرایشگر با `contenteditable`، `document.execCommand`، quill، tinymce، slate، lexical یا `@tiptap/*` مستقیم در کد محصول ممنوع است (گیت `editor/kit`).- شماره تماس، ایمیل، نشانی، قیمت و نام شرکت یا محصول در متن رابط ثابت نوشته نشود؛ با `DynamicText` (`{{key}}`) یا `<Param k="…" />` از `@tokapps/tuk/params` نمایش داده شود تا تغییر در ادمین همه‌جا اعمال شود (گیت `content/dynamic-params`).- صوت داخل متن مقاله فقط با بلوک `::player{param=…}` یا `RichTextEditor` و پخش روی داک انجام شود؛ `<audio>` محلی ساخته نشود.