fix(admin): resolve Tiptap editor bugs, dynamic RTL/LTR layout, sticky TOC, and equalize Bidi typography

Added animated auto-opening link modal, custom image node with isolated caption deletion, fixed single-select category data binding, improved featured image layout, and updated README.

.env.example

@@ -0,0 +1,23 @@
+# کپی کنید:  cp .env.example .env  — و همه مقادیر change-me را عوض کنید.
+# docker compose به‌طور خودکار این فایل را می‌خواند؛ بدون آن استک بالا نمی‌آید.
+
+# --- رمزهای اصلی (اجباری) ---
+# تولید کلید تصادفی:  python -c "import secrets; print(secrets.token_urlsafe(48))"
+SECRET_KEY=change-me-to-a-long-random-string
+POSTGRES_PASSWORD=change-me-db-password
+MINIO_ROOT_USER=aramesh
+MINIO_ROOT_PASSWORD=change-me-minio-password
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=change-me-admin-password
+
+# --- اختیاری ---
+# پورت ورود Traefik در توسعه (پیش‌فرض 5173)
+TRAEFIK_HTTP_PORT=5173
+# نشانی عمومی سایت برای sitemap و آدرس مطلق OG — در تولید مثل https://aramesh.example
+SITE_URL=
+# آدرس‌های مجاز CORS (لیست JSON) — پیش‌فرض فقط لوکال‌هاست
+# CORS_ORIGINS=["http://localhost:5173"]
+
+# --- فقط برای docker-compose.prod.yml (حالت تولید با TLS) ---
+# DOMAIN=aramesh.example
+# ACME_EMAIL=admin@aramesh.example

.gitignore

@@ -9,6 +9,9 @@ env/
 # Environment
 .env
 
+# پشتیبان‌گیری محلی
+backups/
+
 # Node / Vite
 node_modules/
 dist/

README.md

@@ -28,26 +28,52 @@ Traefik (پورت ۵۱۷۳ — تنها نقطه ورود)
 │   ├── Dockerfile        # بیلد Node + سرو استاتیک با Caddy
 │   └── Caddyfile         # فقط سرو فایل‌های استاتیک (مسیریابی روی Traefik است)
 ├── backend/              # بک‌اند FastAPI
-│   ├── app/              # کد منبع (آپلود تصویر: app/api/admin.py)
+│   ├── app/              # کد منبع (آپلود تصویر: app/api/admin.py — سئوی سرور: app/seo_pages.py)
+│   ├── tests/            # تست‌های API (pytest)
 │   ├── requirements.txt
 │   ├── Dockerfile
 │   └── .env.example
-└── docker-compose.yml    # اجرای کامل با یک دستور
+├── scripts/backup.sh     # پشتیبان‌گیری دیتابیس و تصاویر
+├── docker-compose.yml    # اجرای کامل با یک دستور
+└── docker-compose.prod.yml  # لایه تولید: TLS با Let's Encrypt
 ```
 
 ## اجرا با Docker (ساده‌ترین راه)
 
+پیش‌نیاز: Docker Desktop. بیلد فرانت‌اند روی هاست انجام می‌شود (کانتینر فقط فایل‌های
+`dist/` را سرو می‌کند)، پس اولین بار باید یک‌بار `npm run build` بزنید:
+
 ```bash
-docker compose up --build
+cp .env.example .env                      # مقادیر change-me را عوض کنید — بدون .env استک بالا نمی‌آید
+cd frontend && npm install && npm run build && cd ..
+docker compose up -d --build
 ```
 
-- سایت: http://localhost:5173 (از طریق Traefik)
+سایت: http://localhost:5173 — ورود مدیریت: `/admin/login` (کاربر/رمز از `ADMIN_*` در `.env`)
+
 - مستندات API: http://localhost:8001/docs (با `docker-compose.override.yml` محلی)
-- کنسول MinIO: http://localhost:9001 — کاربر/رمز از متغیرهای `MINIO_ROOT_*` در compose
+- کنسول MinIO: http://localhost:9001 — کاربر/رمز از متغیرهای `MINIO_ROOT_*` در `.env`
 - دیتابیس PostgreSQL و آبجکت‌استور MinIO هر دو در کانتینر جدا با volume دائمی
 - بک‌اند هنگام شروع، خودش جداول را می‌سازد و **فقط جدول‌های خالی** را seed می‌کند —
   ارتقای نسخه داده‌های فعلی را از بین نمی‌برد
-- در اولین اجرا، سرویس `minio-setup` باکت `aramesh-media` را می‌سازد و خواندن عمومی را فعال می‌کند
+- در اولین اجرا، سرویس `minio-setup` باکت `aramesh-media` را می‌سازد، خواندن عمومی را
+  فعال می‌کند و تصاویر داخل `seed-media/` را در باکت می‌ریزد — پس یک کلون تازه هم
+  همان تصاویر سایت را دارد
+
+> نکته برای تازه‌واردها: هیچ فایل رمزدار در گیت نیست. فقط `.env.example` را کپی کنید؛
+> فایل‌های `.env`/`env` در `.gitignore` هستند و هرگز commit نشوند.
+
+## انتشار واقعی (TLS)
+
+برای بالا آوردن با HTTPS روی دامنه واقعی، لایه `docker-compose.prod.yml` را هم سوار کنید:
+
+```bash
+# در .env: DOMAIN=example.com و ACME_EMAIL=you@example.com
+docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
+```
+
+- Traefik گواهی Let's Encrypt می‌گیرد و تمدید می‌کند؛ همه درخواست‌های HTTP به HTTPS هدایت می‌شوند
+- در این حالت `SITE_URL=https://example.com` را هم در `.env` بگذارید تا sitemap و آدرس‌های OG مطلق شوند
 
 ## اجرای محلی (توسعه)
 
@@ -83,13 +109,17 @@ npm run dev
 - **فرم تماس** `POST /api/contact` و **خبرنامه** `POST /api/newsletter`
 - **پنل مدیریت** با JWT: ورود `POST /api/auth/login` (پیش‌فرض: `admin` / `aramesh123`)
   و سپس CRUD کامل همه محتواها در `/api/admin/...`
+- **تغییر رمز** `POST /api/auth/change-password` — از نوار مدیریت پایین سایت (دکمه «رمز») هم در دسترس است
+- **محدودسازی ورود**: بعد از ۵ ورود ناموفق در ۱۵ دقیقه از یک IP، درخواست با 429 رد می‌شود
 - **آپلود تصویر** `POST /api/admin/upload` (فقط توکن ادمین، حداکثر ۱۰MB) — فایل در MinIO
   ذخیره و URL نسبی `/media/...` برمی‌گردد
 - **ویرایش جزئی** `PATCH /api/admin/{resource}/{id}` — فقط فیلدهای ارسال‌شده عوض می‌شوند
 - **ترتیب‌بندی** `POST /api/admin/{resource}/reorder` — با `{"ids": [...]}`
-- همه محتوا در یک درخواست: `GET /api/site`
+- همه محتوا در یک درخواست: `GET /api/site` (مقاله‌های پیش‌نویس در آن نمی‌آیند)
+- **تست‌ها**: `cd backend && pip install -r requirements-dev.txt && pytest tests`
 
-> در محیط واقعی حتماً `SECRET_KEY`، `ADMIN_PASSWORD` و `MINIO_ROOT_PASSWORD` را تغییر دهید.
+> در محیط واقعی حتماً `SECRET_KEY`، `ADMIN_PASSWORD` و `MINIO_ROOT_PASSWORD` را تغییر دهید
+> (از `.env`) و بعد از اولین ورود، رمز را از نوار مدیریت عوض کنید.
 
 ## ویرایش زنده سایت (دوقلوی دیجیتال)
 
@@ -119,6 +149,11 @@ npm run dev
 - راست‌به‌چپ کامل با فونت و تم سایت
 - ذخیره خودکار: هر مکث کوتاه در تایپ، تغییرها را ذخیره می‌کند؛ بستن کشو هم ذخیره می‌کند
 
+**پیش‌نویس و انتشار**: مقاله تازه همیشه **پیش‌نویس** شروع می‌شود — در سایت عمومی دیده
+نمی‌شود و تا انتشار، تغییرهای خودکار آن چیزی را خراب نمی‌کند. با دکمه «انتشار در سایت»
+عمومی می‌شود؛ دوباره می‌توان آن را به پیش‌نویس برگرداند. پیش‌نویس‌ها فقط برای ادمین
+(در صفحه وبلاگ، با برچسب «پیش‌نویس») دیده می‌شوند و در `GET /api/site` هرگز نمی‌آیند.
+
 **فرمت ذخیره**: بدنه مقاله یک سند ساختاریافته TipTap (JSON) در PostgreSQL است — نه HTML خام.
 صفحه مقاله آن را با رندر استاتیک TipTap به HTML تبدیل می‌کند، پس فقط تگ‌های شناخته‌شده
 (پاراگراف، تیتر، لیست، نقل‌قول، تصویر، لینک) تولید می‌شوند. مقالات قدیمی (لیست پاراگراف)
@@ -128,14 +163,40 @@ npm run dev
 
 - **بررسی سئو در صفحه نوشتن**: فهرست سبز/نارنجی/قرمز به سبک یوست ولی سازگار با فارسی —
   طول عنوان، کلمه کلیدی هدف (در عنوان/پاراگراف اول/تیترها)، طول چکیده، تعداد واژه،
-  تیتربندی H2، متن جایگزین تصاویر، پیوندها و نشانی (slug)
+  تیتربندی H2، متن جایگزین تصاویر، پیوندها و نشانی (slug) — کلمه کلیدی هدف در دیتابیس
+  ذخیره می‌شود (فیلد `seo_keyphrase` مقاله)
 - **سئوی هر صفحه**: در حالت ویرایش، دکمه سئو روی هیرو هر صفحه (و کنار هیرو صفحه اصلی) —
-  عنوان تب و توضیح متای هر صفحه از دیتابیس خوانده و اعمال می‌شود
+  عنوان تب و توضیح متای هر صفحه از دیتابیس خوانده و اعمال می‌شود؛ اگر ردیف سئوی صفحه‌ای
+  هنوز ساخته نشده باشد، دکمه + همان‌جا آن را می‌سازد
 - صفحه مقاله و پروژه به‌طور خودکار عنوان و توضیح متا را از محتوای خودشان می‌گیرند
+- **تگ‌های OG و توییتر و canonical** برای همه صفحات از `src/seo.ts` ست می‌شود و
+  مقاله‌ها اسکیمای JSON-LD نوع Article می‌گیرند
+- **robots.txt و sitemap.xml** از بک‌اند سرو می‌شوند و مقاله/پروژه‌های منتشرشده را
+  شامل می‌شوند (پیش‌نویس‌ها نمی‌آیند) — برای آدرس مطلق، `SITE_URL` را در `.env` بگذارید
+- **متا برای خزنده‌های بدون جاوااسکریپت** (تلگرام، واتس‌اپ و...): بک‌اند صفحات
+  `/blog`، `/blog/{slug}`، `/projects` و `/projects/{slug}` را با همان `index.html`
+  فرانت‌اند سرو می‌کند و پیش از ارسال، title / description / OG / JSON-LD را از
+  دیتابیس داخل آن تزریق می‌کند (`app/seo_pages.py`) — بازدیدکننده‌های عادی همان SPA
+  همیشگی را می‌بینند
+
+## پشتیبان‌گیری
+
+همه محتوای سایت در PostgreSQL و تصاویر در MinIO است — هر دو را با یک دستور پشتیبان بگیرید:
+
+```bash
+bash scripts/backup.sh        # در backups/ — نگهداری پیش‌فرض ۱۴ روز
+```
+
+- خروجی: `backups/db-<زمان>.sql.gz` (فشرده) و `backups/images-<زمان>/` (آینه باکت)
+- زمان‌بندی با cron یا Task Scheduler: نمونه دستور داخل خود اسکریپت هست
+- بازیابی دیتابیس: `gunzip -c backups/db-<زمان>.sql.gz | docker compose exec -T db psql -U aramesh arameshplaza`
 
 ## نکات امنیتی
 
-- فایل `.env` هرگز commit نمی‌شود (در `.gitignore` است)
-- رمز عبور ادمین با bcrypt هش می‌شود
+- مقادیر محرمانه در `.env` ریشه هستند (در `.gitignore`) و در `docker-compose.yml`
+  با سینتکس `${VAR:?}` اجباری شده‌اند — بدون `.env` استک بالا نمی‌آید
+- رمز عبور ادمین با bcrypt هش می‌شود و از نوار مدیریت پایین سایت (دکمه «رمز») قابل تعویض است
+- ورود با محدودیت تلاش محافظت می‌شود: ۵ ورود ناموفق در ۱۵ دقیقه از هر IP → خطای 429
 - توکن‌های JWT امضا دارند و مدت اعتبارشان قابل تنظیم است
 - تصاویر باکت MinIO عمومی (فقط خواندن) هستند؛ آپلود فقط با توکن ادمین ممکن است
+- مقاله‌های پیش‌نویس در هیچ انتهای عمومی نمی‌آیند و در HTML تزریق‌شده سئو هم افشا نمی‌شوند

backend/README.md

@@ -86,6 +86,13 @@ Authorization: Bearer <access_token>
 
 > نام کاربری و رمز عبور پیش‌فرض از تنظیمات `.env` خوانده می‌شود — حتماً در محیط تولید تغییرشان دهید.
 
+تغییر رمز (با توکن):
+
+```
+POST /api/auth/change-password
+{ "current_password": "...", "new_password": "..." }
+```
+
 ## فهرست انتهاپوینت‌ها
 
 ### عمومی (بدون نیاز به توکن)
@@ -97,8 +104,8 @@ Authorization: Bearer <access_token>
 | GET | `/api/services` | خدمات |
 | GET | `/api/projects` | همه پروژه‌ها |
 | GET | `/api/projects/{slug}` | جزئیات یک پروژه |
-| GET | `/api/articles` | همه مقالات |
-| GET | `/api/articles/{slug}` | جزئیات یک مقاله |
+| GET | `/api/articles` | مقاله‌های منتشرشده (پیش‌نویس نمی‌آید) |
+| GET | `/api/articles/{slug}` | جزئیات یک مقاله منتشرشده |
 | GET | `/api/testimonials` | نظرات مشتریان |
 | GET | `/api/faqs` | سوالات متداول |
 | GET | `/api/team` | اعضای تیم |
@@ -109,7 +116,11 @@ Authorization: Bearer <access_token>
 | GET | `/api/site` | **همه محتوا در یک درخواست** |
 | POST | `/api/contact` | ثبت پیام تماس |
 | POST | `/api/newsletter` | عضویت در خبرنامه |
-| POST | `/api/auth/login` | ورود ادمین و دریافت توکن |
+| POST | `/api/auth/login` | ورود ادمین و دریافت توکن — بعد از ۵ تلاش ناموفق در ۱۵ دقیقه، 429 |
+| GET | `/robots.txt` | قوانین خزنده‌ها |
+| GET | `/sitemap.xml` | نقشه سایت — مقاله/پروژه‌های منتشرشده |
+| GET | `/blog/{slug}` | HTML صفحه مقاله با متای سئوی تزریق‌شده |
+| GET | `/projects/{slug}` | HTML صفحه پروژه با متای سئوی تزریق‌شده |
 
 ### مدیریت (نیاز به توکن Bearer)
 

backend/app/api/admin.py

@@ -4,15 +4,17 @@ import uuid
 from datetime import datetime, timezone
 
 import boto3
-from fastapi import APIRouter, Depends, File, HTTPException, UploadFile, status
+from fastapi import APIRouter, Depends, File, HTTPException, Request, UploadFile, status
 from sqlalchemy import func
 from sqlalchemy.exc import IntegrityError
 from sqlalchemy.orm import Session
 
 from .. import models, schemas
-from ..auth import create_access_token, get_current_admin, verify_password
+from ..auth import create_access_token, get_current_admin, hash_password, verify_password
 from ..config import settings
 from ..database import get_db
+from ..rate_limit import clear as clear_rate_limit
+from ..rate_limit import ensure_allowed, record_failure
 from ..schemas import (
     ArticleIn,
     ArticleOut,
@@ -23,6 +25,7 @@ from ..schemas import (
     BrandIn,
     BrandOut,
     BrandPatch,
+    ChangePasswordIn,
     ContactSectionIn,
     ContactSectionOut,
     ContactSectionPatch,
@@ -105,16 +108,33 @@ router = APIRouter(dependencies=[Depends(get_current_admin)])
 
 
 @auth_router.post("/auth/login", response_model=TokenOut)
-def login(payload: LoginIn, db: Session = Depends(get_db)):
+def login(payload: LoginIn, request: Request, db: Session = Depends(get_db)):
+    ensure_allowed(request)
     user = db.query(models.AdminUser).filter(models.AdminUser.username == payload.username).first()
     if user is None or not verify_password(payload.password, user.password_hash):
+        record_failure(request)
         raise HTTPException(
             status_code=status.HTTP_401_UNAUTHORIZED,
             detail="نام کاربری یا رمز عبور اشتباه است",
         )
+    clear_rate_limit(request)
     return TokenOut(access_token=create_access_token(user.username))
 
 
+@auth_router.post("/auth/change-password")
+def change_password(
+    payload: ChangePasswordIn,
+    admin: models.AdminUser = Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """تغییر رمز ادمین واردشده — رمز فعلی باید درست باشد."""
+    if not verify_password(payload.current_password, admin.password_hash):
+        raise HTTPException(status_code=400, detail="رمز عبور فعلی اشتباه است")
+    admin.password_hash = hash_password(payload.new_password)
+    db.commit()
+    return {"ok": True}
+
+
 def register_crud(path: str, model, out_schema, create_schema, patch_schema=None) -> None:
     """ثبت مسیرهای استاندارد CRUD (لیست، ساخت، دریافت، ویرایش کامل، ویرایش جزئی،
     حذف و ترتیب‌بندی) روی روتر مدیریت."""

backend/app/api/public.py

@@ -55,12 +55,21 @@ def get_project(slug: str, db: Session = Depends(get_db)):
 
 @router.get("/articles", response_model=list[ArticleOut])
 def get_articles(db: Session = Depends(get_db)):
-    return db.query(models.Article).order_by(models.Article.position, models.Article.id).all()
+    return (
+        db.query(models.Article)
+        .filter(models.Article.status == "published")
+        .order_by(models.Article.position, models.Article.id)
+        .all()
+    )
 
 
 @router.get("/articles/{slug}", response_model=ArticleOut)
 def get_article(slug: str, db: Session = Depends(get_db)):
-    article = db.query(models.Article).filter(models.Article.slug == slug).first()
+    article = (
+        db.query(models.Article)
+        .filter(models.Article.slug == slug, models.Article.status == "published")
+        .first()
+    )
     if article is None:
         raise HTTPException(status_code=404, detail="مقاله یافت نشد")
     return article
@@ -116,7 +125,11 @@ def get_site(db: Session = Depends(get_db)):
         "page_heroes": db.query(models.PageHeroContent).order_by(models.PageHeroContent.id).all(),
         "services": db.query(models.Service).order_by(models.Service.position, models.Service.id).all(),
         "projects": db.query(models.Project).order_by(models.Project.position, models.Project.id).all(),
-        "articles": db.query(models.Article).order_by(models.Article.position, models.Article.id).all(),
+        # فقط مقاله‌های منتشرشده — پیش‌نویس‌ها از انتهای مدیریتی خوانده می‌شوند
+        "articles": db.query(models.Article)
+        .filter(models.Article.status == "published")
+        .order_by(models.Article.position, models.Article.id)
+        .all(),
         "testimonials": db.query(models.Testimonial).order_by(models.Testimonial.position, models.Testimonial.id).all(),
         "faqs": db.query(models.Faq).order_by(models.Faq.position, models.Faq.id).all(),
         "team": db.query(models.TeamMember).order_by(models.TeamMember.position, models.TeamMember.id).all(),

backend/app/config.py

@@ -23,9 +23,14 @@ class Settings(BaseSettings):
     s3_access_key: str = "aramesh"
     s3_secret_key: str = "aramesh-minio-secret"
     s3_bucket: str = "aramesh-media"
-    # پیشوند عمومی مسیر تصاویر — nginx آن را به باکت پروکسی می‌کند
+    # پیشوند عمومی مسیر تصاویر — Traefik آن را به باکت پروکسی می‌کند
     media_public_base: str = "/media"
     media_max_upload_mb: int = 10
 
+    # نشانی کامل سایت (مثل https://aramesh.example) — برای sitemap و آدرس مطلق OG
+    site_url: str = ""
+    # مسیر بیلد فرانت‌اند (شامل index.html) — برای سرو HTML با متای سئو در صفحات جزئیات
+    frontend_dist: str = "../frontend/dist"
+
 
 settings = Settings()

backend/app/main.py

@@ -6,6 +6,7 @@ from .api import admin, forms, public
 from .config import settings
 from .database import Base, engine
 from .migrations import run_all as run_migrations
+from .seo_pages import router as seo_router
 
 Base.metadata.create_all(bind=engine)
 run_migrations()
@@ -33,6 +34,8 @@ app.include_router(public.router, prefix="/api", tags=["عمومی"])
 app.include_router(forms.router, prefix="/api", tags=["فرم‌ها"])
 app.include_router(admin.auth_router, prefix="/api", tags=["احراز هویت"])
 app.include_router(admin.router, prefix="/api/admin", tags=["پنل مدیریت"])
+# robots.txt، sitemap.xml و HTML صفحات وبلاگ/پروژه با متای سئو — در ریشه دامنه
+app.include_router(seo_router, tags=["سئو"])
 
 
 @app.get("/")

backend/app/migrations.py

@@ -25,6 +25,13 @@ def run_ddl_migrations() -> None:
             conn.execute(
                 text(f"ALTER TABLE {table} ADD COLUMN IF NOT EXISTS position INTEGER NOT NULL DEFAULT 0")
             )
+        # مقالات موجود منتشر شده‌اند؛ فقط مقاله‌های تازه می‌توانند پیش‌نویس باشند
+        conn.execute(
+            text("ALTER TABLE articles ADD COLUMN IF NOT EXISTS status VARCHAR(16) NOT NULL DEFAULT 'published'")
+        )
+        conn.execute(
+            text("ALTER TABLE articles ADD COLUMN IF NOT EXISTS seo_keyphrase VARCHAR(128) NOT NULL DEFAULT ''")
+        )
 
 
 def paragraphs_to_doc(paragraphs: list) -> dict:

backend/app/models.py

@@ -78,6 +78,10 @@ class Article(Base):
     read: Mapped[str] = mapped_column(String(32), default="")
     excerpt: Mapped[str] = mapped_column(Text, default="")
     body: Mapped[list] = mapped_column(JSON, default=list)
+    # draft | published — پیش‌نویس فقط برای ادمین دیده می‌شود
+    status: Mapped[str] = mapped_column(String(16), default="published")
+    # کلمه کلیدی هدف چک‌لیست سئو — راهنمای نوشتن، در سایت نمایش داده نمی‌شود
+    seo_keyphrase: Mapped[str] = mapped_column(String(128), default="")
 
 
 class Testimonial(Base):

backend/app/rate_limit.py

@@ -0,0 +1,49 @@
+"""محدودسازی تلاش ورود — جلوگیری از حمله brute-force روی /api/auth/login.
+
+پیش‌فرض: حداکثر ۵ ورود ناموفق در هر ۱۵ دقیقه برای هر IP؛ ورود موفق شمارنده را پاک می‌کند.
+شمارنده در حافظه همین پروسه است — با ری‌استارت بک‌اند پاک می‌شود و همین کافی است.
+"""
+
+import time
+
+from fastapi import HTTPException, Request, status
+
+MAX_FAILED_ATTEMPTS = 5
+WINDOW_SECONDS = 15 * 60
+
+_failed: dict[str, list[float]] = {}
+
+
+def client_ip(request: Request) -> str:
+    forwarded = request.headers.get("x-forwarded-for")
+    if forwarded:
+        return forwarded.split(",")[0].strip()
+    return request.client.host if request.client else "unknown"
+
+
+def _prune(key: str, now: float) -> list[float]:
+    recent = [t for t in _failed.get(key, []) if now - t < WINDOW_SECONDS]
+    _failed[key] = recent
+    return recent
+
+
+def ensure_allowed(request: Request) -> None:
+    """اگر این IP سهمیه تلاش ناموفقش پر شده باشد، درخواست با 429 رد می‌شود."""
+    key = client_ip(request)
+    recent = _prune(key, time.monotonic())
+    if len(recent) >= MAX_FAILED_ATTEMPTS:
+        retry_after = max(1, int(WINDOW_SECONDS - (time.monotonic() - recent[0])))
+        raise HTTPException(
+            status_code=status.HTTP_429_TOO_MANY_REQUESTS,
+            detail="تلاش‌های ناموفق زیاد است — بعداً دوباره امتحان کنید",
+            headers={"Retry-After": str(retry_after)},
+        )
+
+
+def record_failure(request: Request) -> None:
+    _failed.setdefault(client_ip(request), []).append(time.monotonic())
+
+
+def clear(request: Request) -> None:
+    """با ورود موفق، تاریخچه تلاش‌های ناموفق IP پاک می‌شود."""
+    _failed.pop(client_ip(request), None)

backend/app/schemas.py

@@ -59,6 +59,8 @@ class ArticleOut(ORMModel):
     read: str
     excerpt: str
     body: dict
+    status: str
+    seo_keyphrase: str
 
 
 class TestimonialOut(ORMModel):
@@ -292,6 +294,11 @@ class TokenOut(BaseModel):
     token_type: str = "bearer"
 
 
+class ChangePasswordIn(BaseModel):
+    current_password: str
+    new_password: str = Field(min_length=8, max_length=128)
+
+
 class BrandIn(BaseModel):
     name: str = ""
     logo: str = ""
@@ -346,6 +353,8 @@ class ArticleIn(BaseModel):
     read: str = ""
     excerpt: str = ""
     body: dict = Field(default_factory=lambda: dict(EMPTY_DOC))
+    status: Literal["draft", "published"] = "draft"
+    seo_keyphrase: str = Field(default="", max_length=128)
     _validate_body = field_validator("body")(validate_doc_body)
 
 
@@ -548,6 +557,8 @@ class ArticlePatch(BaseModel):
     read: Optional[str] = None
     excerpt: Optional[str] = None
     body: Optional[dict] = None
+    status: Optional[Literal["draft", "published"]] = None
+    seo_keyphrase: Optional[str] = None
     _validate_body = field_validator("body")(validate_doc_body)
 TestimonialPatch = _make_patch("TestimonialPatch", TestimonialIn)
 FaqPatch = _make_patch("FaqPatch", FaqIn)

backend/app/seo_pages.py

@@ -0,0 +1,239 @@
+"""سئوی سمت سرور — robots.txt، sitemap.xml و سرو HTML صفحات وبلاگ/پروژه با متای تزریق‌شده.
+
+فرانت‌اند یک SPA است؛ خزنده‌های اجتماعی (تلگرام، واتس‌اپ و...) جاوااسکریپت اجرا نمی‌کنند.
+این ماژول همان index.html بیلد فرانت‌اند را می‌خواند و پیش از ارسال، تگ‌های
+title / description / OG / canonical / JSON-LD را از دیتابیس داخل آن تزریق می‌کند —
+بازدیدکننده‌های عادی همان SPA همیشگی را می‌بینند و خزنده‌ها متای درست را می‌خوانند.
+"""
+
+import html
+import json
+import re
+from pathlib import Path
+
+from fastapi import APIRouter, Depends, Response
+from fastapi.responses import HTMLResponse
+from sqlalchemy.orm import Session
+
+from . import models
+from .config import settings
+from .database import get_db
+
+router = APIRouter()
+
+STATIC_PATHS = ["/", "/about", "/services", "/projects", "/investment", "/blog", "/faq", "/contact"]
+
+
+def _absolute(path: str) -> str:
+    if not path:
+        return ""
+    if path.startswith(("http://", "https://")):
+        return path
+    site = settings.site_url.rstrip("/")
+    return f"{site}{path}" if site else path
+
+
+def _read_index() -> str | None:
+    try:
+        return (Path(settings.frontend_dist) / "index.html").read_text(encoding="utf-8")
+    except OSError:
+        return None
+
+
+def _doc_text(doc: object, limit: int = 300) -> str:
+    """متن ساده سند TipTap — برای noscript و پیش‌نمایش."""
+    words: list[str] = []
+
+    def walk(node: object) -> None:
+        if not isinstance(node, dict):
+            return
+        if node.get("type") == "text" and isinstance(node.get("text"), str):
+            words.append(node["text"])
+        for child in node.get("content") or []:
+            walk(child)
+
+    if isinstance(doc, dict):
+        for block in doc.get("content") or []:
+            walk(block)
+    text = " ".join(words).strip()
+    return text[:limit] + ("…" if len(text) > limit else "")
+
+
+def _shell(
+    *,
+    title: str,
+    description: str,
+    path: str,
+    og_image: str = "",
+    og_type: str = "website",
+    jsonld: dict | None = None,
+    noscript: str = "",
+) -> HTMLResponse:
+    """index.html فرانت‌اند با متای تزریق‌شده؛ اگر بیلد در دسترس نبود، صفحه حداقلی."""
+    title = title.strip() or "گروه ساختمانی آرامش"
+    description = description.strip()
+    canonical = _absolute(path)
+    image = _absolute(og_image)
+    esc = html.escape
+
+    # تگ title جای تگ موجود index.html را می‌گیرد و در بلوک تکرار نمی‌شود
+    tags = [
+        f'<meta name="description" content="{esc(description)}" />',
+        f'<meta property="og:title" content="{esc(title)}" />',
+        f'<meta property="og:description" content="{esc(description)}" />',
+        f'<meta property="og:type" content="{esc(og_type)}" />',
+        f'<meta property="og:url" content="{esc(canonical)}" />',
+        f'<meta name="twitter:card" content="summary_large_image" />',
+    ]
+    if image:
+        tags.append(f'<meta property="og:image" content="{esc(image)}" />')
+    if jsonld:
+        payload = json.dumps(jsonld, ensure_ascii=False).replace("</", "<\\/")
+        tags.append(f'<script type="application/ld+json">{payload}</script>')
+    block = "\n    ".join(tags)
+
+    raw = _read_index()
+    if raw is None:
+        # بیلد فرانت‌اند سوار نشده — صفحه حداقلی با خودِ متا تا خزنده‌ها دست خالی نمانند
+        body = f"<h1>{esc(title)}</h1><p>{esc(description)}</p>"
+        return HTMLResponse(
+            f'<!doctype html><html lang="fa" dir="rtl"><head><meta charset="utf-8">'
+            f"<title>{esc(title)}</title>{block}</head><body>{body}</body></html>"
+        )
+
+    raw = re.sub(r"<title>.*?</title>", f"<title>{esc(title)}</title>", raw, count=1, flags=re.S)
+    raw = raw.replace("</head>", f"    {block}\n  </head>", 1)
+    if noscript:
+        raw = raw.replace("</body>", f"<noscript>{noscript}</noscript>\n  </body>", 1)
+    return HTMLResponse(raw)
+
+
+def _brand_name(db: Session) -> str:
+    brand = db.query(models.Brand).first()
+    return brand.name if brand else "گروه ساختمانی آرامش"
+
+
+def _page_meta(db: Session, page_key: str) -> models.SeoMeta | None:
+    return db.query(models.SeoMeta).filter(models.SeoMeta.page_key == page_key).first()
+
+
+# ---------- robots.txt و sitemap.xml ----------
+
+
+@router.get("/robots.txt", response_class=Response)
+def robots(db: Session = Depends(get_db)):
+    lines = ["User-agent: *", "Disallow: /admin", "Disallow: /api", ""]
+    if settings.site_url:
+        lines.append(f"Sitemap: {_absolute('/sitemap.xml')}")
+    return Response(content="\n".join(lines), media_type="text/plain; charset=utf-8")
+
+
+@router.get("/sitemap.xml", response_class=Response)
+def sitemap(db: Session = Depends(get_db)):
+    urls = list(STATIC_PATHS)
+    urls += [
+        f"/blog/{a.slug}"
+        for a in db.query(models.Article)
+        .filter(models.Article.status == "published")
+        .order_by(models.Article.position, models.Article.id)
+        .all()
+    ]
+    urls += [
+        f"/projects/{p.slug}"
+        for p in db.query(models.Project).order_by(models.Project.position, models.Project.id).all()
+    ]
+    items = "\n".join(
+        f"    <url><loc>{html.escape(_absolute(u))}</loc></url>" for u in urls
+    )
+    xml = (
+        '<?xml version="1.0" encoding="UTF-8"?>\n'
+        '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
+        f"{items}\n</urlset>\n"
+    )
+    return Response(content=xml, media_type="application/xml; charset=utf-8")
+
+
+# ---------- صفحات وبلاگ ----------
+
+
+@router.get("/blog", response_class=HTMLResponse)
+def blog_list(db: Session = Depends(get_db)):
+    meta = _page_meta(db, "blog")
+    return _shell(
+        title=meta.title if meta and meta.title else "وبلاگ | " + _brand_name(db),
+        description=meta.description if meta else "",
+        path="/blog",
+        og_image=meta.image if meta else "",
+    )
+
+
+@router.get("/blog/{slug}", response_class=HTMLResponse)
+def blog_detail(slug: str, db: Session = Depends(get_db)):
+    article = (
+        db.query(models.Article)
+        .filter(models.Article.slug == slug, models.Article.status == "published")
+        .first()
+    )
+    if article is None:
+        # مقاله ناموجود یا پیش‌نویس — پوسته ساده بدون متا؛ SPA پیام «یافت نشد» را نشان می‌دهد
+        return _shell(title=_brand_name(db), description="", path=f"/blog/{slug}")
+
+    brand = _brand_name(db)
+    first_text = _doc_text(article.body) if not isinstance(article.body, list) else " ".join(article.body[:2])
+    jsonld = {
+        "@context": "https://schema.org",
+        "@type": "Article",
+        "headline": article.title,
+        "description": article.excerpt,
+        "image": _absolute(article.image),
+        "inLanguage": "fa",
+        "author": {"@type": "Organization", "name": brand},
+        "publisher": {"@type": "Organization", "name": brand},
+        "mainEntityOfPage": _absolute(f"/blog/{article.slug}"),
+    }
+    noscript = f"<h1>{html.escape(article.title)}</h1><p>{html.escape(first_text)}</p>"
+    return _shell(
+        title=f"{article.title} | {brand}",
+        description=article.excerpt,
+        path=f"/blog/{article.slug}",
+        og_image=article.image,
+        og_type="article",
+        jsonld=jsonld,
+        noscript=noscript,
+    )
+
+
+# ---------- صفحات پروژه ----------
+
+
+@router.get("/projects", response_class=HTMLResponse)
+def projects_list(db: Session = Depends(get_db)):
+    meta = _page_meta(db, "projects")
+    return _shell(
+        title=meta.title if meta and meta.title else "پروژه‌ها | " + _brand_name(db),
+        description=meta.description if meta else "",
+        path="/projects",
+    )
+
+
+@router.get("/projects/{slug}", response_class=HTMLResponse)
+def project_detail(slug: str, db: Session = Depends(get_db)):
+    project = db.query(models.Project).filter(models.Project.slug == slug).first()
+    if project is None:
+        return _shell(title=_brand_name(db), description="", path=f"/projects/{slug}")
+
+    brand = _brand_name(db)
+    return _shell(
+        title=f"{project.title} | {brand}",
+        description=project.summary,
+        path=f"/projects/{project.slug}",
+        og_image=project.image,
+        jsonld={
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            "name": project.title,
+            "description": project.summary,
+            "image": _absolute(project.image),
+            "inLanguage": "fa",
+        },
+    )

backend/requirements-dev.txt

@@ -0,0 +1,4 @@
+# وابستگی‌های توسعه و تست — pip install -r requirements-dev.txt
+-r requirements.txt
+pytest==8.3.4
+httpx==0.27.2

backend/requirements.txt

@@ -1,11 +1,13 @@
-fastapi>=0.115.8
-uvicorn[standard]>=0.34.0
-sqlalchemy>=2.0.36
-psycopg[binary]>=3.2.3
-pydantic>=2.10.4
-pydantic-settings>=2.6.1
-PyJWT>=2.10.1
-bcrypt>=4.2.1
-email-validator>=2.2.0
-boto3>=1.35.0
-python-multipart>=0.0.18
+# نسخه‌ها دقیق پین شده‌اند تا ارتقای خودکار یک وابستگی، استقرار را نشکند.
+# ارتقا: نسخه را دستی بالا ببرید و روی محیط آماده‌سازی تست کنید.
+fastapi==0.115.8
+uvicorn[standard]==0.34.0
+sqlalchemy==2.0.36
+psycopg[binary]==3.2.3
+pydantic==2.10.4
+pydantic-settings==2.6.1
+PyJWT==2.10.1
+bcrypt==4.2.1
+email-validator==2.2.0
+boto3==1.35.0
+python-multipart==0.0.18

backend/tests/conftest.py

@@ -0,0 +1,93 @@
+"""پیکربندی تست‌ها — دیتابیس SQLite فایل‌محور و داده‌های حداقلی.
+
+متغیرهای محیطی پیش از ایمپورت app تنظیم می‌شوند تا settings همان‌ها را بخواند.
+"""
+
+import os
+import pathlib
+
+os.environ["DATABASE_URL"] = "sqlite:///./test.db?check_same_thread=false"
+os.environ["SECRET_KEY"] = "test-secret-key"
+os.environ["ADMIN_USERNAME"] = "admin"
+os.environ["ADMIN_PASSWORD"] = "test-admin-pass-1"
+os.environ["SITE_URL"] = "https://test.example"
+
+import pytest
+from fastapi.testclient import TestClient
+
+from app import models
+from app.auth import hash_password
+from app.config import settings
+from app.database import Base, SessionLocal, engine
+from app.main import app
+
+TEST_DB = pathlib.Path("test.db")
+
+DOC = {"type": "doc", "content": [{"type": "paragraph"}]}
+
+
+@pytest.fixture(scope="session", autouse=True)
+def seed_db(tmp_path_factory):
+    # اتصالات ساخت جدول در ایمپورت ماژول باید بسته شوند تا فایل قدیمی حذف شود
+    engine.dispose()
+    if TEST_DB.exists():
+        TEST_DB.unlink()
+    Base.metadata.create_all(bind=engine)
+    # dist ساختگی فرانت‌اند برای تست تزریق متا در صفحات جزئیات
+    dist = tmp_path_factory.mktemp("dist")
+    (dist / "index.html").write_text(
+        "<!doctype html><html><head><title>Shell</title></head>"
+        "<body><div id=\"root\"></div></body></html>",
+        encoding="utf-8",
+    )
+    settings.frontend_dist = str(dist)
+    settings.site_url = "https://test.example"
+
+    db = SessionLocal()
+    try:
+        db.add(models.AdminUser(username="admin", password_hash=hash_password("test-admin-pass-1")))
+        db.add(models.Brand(name="گروه ساختمانی آرامش"))
+        db.add(
+            models.Article(
+                slug="published-post", title="مقاله منتشرشده", status="published",
+                excerpt="چکیده مقاله", body=DOC, position=1,
+            )
+        )
+        db.add(
+            models.Article(
+                slug="draft-post", title="پیش‌نویس", status="draft",
+                excerpt="چکیده پیش‌نویس", body=DOC, position=2,
+            )
+        )
+        db.commit()
+    finally:
+        db.close()
+    yield
+    db.close()
+    engine.dispose()
+    if TEST_DB.exists():
+        TEST_DB.unlink()
+
+
+@pytest.fixture(autouse=True)
+def reset_rate_limiter():
+    from app import rate_limit
+
+    rate_limit._failed.clear()
+    yield
+    rate_limit._failed.clear()
+
+
+@pytest.fixture()
+def client():
+    return TestClient(app)
+
+
+@pytest.fixture()
+def auth_client(client):
+    res = client.post("/api/auth/login", json={"username": "admin", "password": "test-admin-pass-1"})
+    assert res.status_code == 200, res.text
+    token = res.json()["access_token"]
+    client.headers.update({"Authorization": f"Bearer {token}"})
+    yield client
+    client.headers.pop("Authorization", None)

backend/tests/test_api.py

@@ -0,0 +1,182 @@
+"""تست‌های API — مسیرهای عمومی، احراز هویت، CRUD مدیریت، پیش‌نویس مقاله و سئو."""
+
+import re
+
+DOC = {"type": "doc", "content": [{"type": "paragraph"}]}
+
+
+# ---------- عمومی ----------
+
+
+def test_health(client):
+    res = client.get("/api/health")
+    assert res.status_code == 200
+    assert res.json()["status"] == "ok"
+
+
+def test_site_hides_draft_articles(client):
+    res = client.get("/api/site")
+    assert res.status_code == 200
+    slugs = [a["slug"] for a in res.json()["articles"]]
+    assert "published-post" in slugs
+    assert "draft-post" not in slugs
+
+
+def test_public_articles_hide_drafts(client):
+    res = client.get("/api/articles")
+    assert all(a["status"] == "published" for a in res.json())
+    assert client.get("/api/articles/draft-post").status_code == 404
+
+
+def test_admin_endpoints_reject_anonymous(client):
+    assert client.get("/api/admin/articles").status_code == 401
+
+
+# ---------- احراز هویت ----------
+
+
+def test_login_success_and_failure(client):
+    assert (
+        client.post("/api/auth/login", json={"username": "admin", "password": "wrong"}).status_code
+        == 401
+    )
+    res = client.post("/api/auth/login", json={"username": "admin", "password": "test-admin-pass-1"})
+    assert res.status_code == 200
+    assert res.json()["access_token"]
+
+
+def test_change_password(auth_client, client):
+    res = auth_client.post(
+        "/api/auth/change-password",
+        json={"current_password": "wrong", "new_password": "brand-new-pass-9"},
+    )
+    assert res.status_code == 400
+
+    res = auth_client.post(
+        "/api/auth/change-password",
+        json={"current_password": "test-admin-pass-1", "new_password": "brand-new-pass-9"},
+    )
+    assert res.status_code == 200
+
+    # رمز قدیمی رد و رمز جدید قبول می‌شود
+    assert (
+        client.post("/api/auth/login", json={"username": "admin", "password": "test-admin-pass-1"}).status_code
+        == 401
+    )
+    assert (
+        client.post("/api/auth/login", json={"username": "admin", "password": "brand-new-pass-9"}).status_code
+        == 200
+    )
+
+    # بازگرداندن رمز برای تست‌های بعدی
+    res = client.post("/api/auth/login", json={"username": "admin", "password": "brand-new-pass-9"})
+    auth = {"Authorization": f"Bearer {res.json()['access_token']}"}
+    res = client.post(
+        "/api/auth/change-password",
+        json={"current_password": "brand-new-pass-9", "new_password": "test-admin-pass-1"},
+        headers=auth,
+    )
+    assert res.status_code == 200
+
+
+def test_login_rate_limited(client):
+    for _ in range(5):
+        res = client.post("/api/auth/login", json={"username": "admin", "password": "wrong"})
+        assert res.status_code == 401
+    res = client.post("/api/auth/login", json={"username": "admin", "password": "wrong"})
+    assert res.status_code == 429
+    assert "Retry-After" in res.headers
+
+
+# ---------- CRUD مدیریت ----------
+
+
+def test_article_crud_and_draft_flow(auth_client, client):
+    created = auth_client.post(
+        "/api/admin/articles",
+        json={"slug": "flow-post", "title": "مقاله جریان", "body": DOC},
+    )
+    assert created.status_code == 201, created.text
+    article = created.json()
+    # مقاله تازه پیش‌نویس است و در سایت عمومی دیده نمی‌شود
+    assert article["status"] == "draft"
+    assert "flow-post" not in [a["slug"] for a in client.get("/api/articles").json()]
+
+    res = auth_client.patch(f"/api/admin/articles/{article['id']}", json={"seo_keyphrase": "ساختمان"})
+    assert res.json()["seo_keyphrase"] == "ساختمان"
+
+    res = auth_client.patch(f"/api/admin/articles/{article['id']}", json={"status": "published"})
+    assert res.status_code == 200
+    assert "flow-post" in [a["slug"] for a in client.get("/api/articles").json()]
+
+    assert auth_client.delete(f"/api/admin/articles/{article['id']}").status_code == 204
+    assert "flow-post" not in [a["slug"] for a in client.get("/api/articles").json()]
+
+
+def test_service_roundtrip_and_reorder(auth_client):
+    ids = []
+    for name in ("خدمت الف", "خدمت ب"):
+        res = auth_client.post("/api/admin/services", json={"title": name})
+        assert res.status_code == 201
+        ids.append(res.json()["id"])
+
+    res = auth_client.post("/api/admin/services/reorder", json={"ids": ids[::-1]})
+    assert res.status_code == 200
+    ordered = [s["id"] for s in res.json() if s["id"] in ids]
+    assert ordered == ids[::-1]
+
+    res = auth_client.patch(f"/api/admin/services/{ids[0]}", json={"desc": "توضیح تازه"})
+    assert res.json()["desc"] == "توضیح تازه"
+
+    for i in ids:
+        assert auth_client.delete(f"/api/admin/services/{i}").status_code == 204
+
+
+def test_seo_meta_create_and_patch(auth_client):
+    res = auth_client.post(
+        "/api/admin/seo-meta", json={"page_key": "test-page", "title": "عنوان", "description": "توضیح"}
+    )
+    assert res.status_code == 201
+    meta_id = res.json()["id"]
+    res = auth_client.patch(f"/api/admin/seo-meta/{meta_id}", json={"title": "عنوان تازه"})
+    assert res.json()["title"] == "عنوان تازه"
+    assert auth_client.delete(f"/api/admin/seo-meta/{meta_id}").status_code == 204
+
+
+# ---------- سئو ----------
+
+
+def test_robots_txt(client):
+    res = client.get("/robots.txt")
+    assert res.status_code == 200
+    assert "Disallow: /admin" in res.text
+    assert "Sitemap: https://test.example/sitemap.xml" in res.text
+
+
+def test_sitemap_includes_published_only(client):
+    res = client.get("/sitemap.xml")
+    assert res.status_code == 200
+    assert "/blog/published-post" in res.text
+    assert "/blog/draft-post" not in res.text
+    assert res.text.startswith("<?xml")
+
+
+def test_head_injection_for_article(client):
+    res = client.get("/blog/published-post")
+    assert res.status_code == 200
+    assert "مقاله منتشرشده" in res.text
+    assert 'property="og:title"' in res.text
+    assert "application/ld+json" in res.text
+    assert "https://test.example/blog/published-post" in res.text
+
+
+def test_head_not_injected_for_draft(client):
+    res = client.get("/blog/draft-post")
+    assert res.status_code == 200
+    assert "پیش‌نویس" not in res.text  # عنوان پیش‌نویس افشا نمی‌شود
+    assert "application/ld+json" not in res.text
+
+
+def test_head_replaces_title_once(client):
+    res = client.get("/blog/published-post")
+    assert len(re.findall(r"<title>", res.text)) == 1

docker-compose.prod.yml

@@ -0,0 +1,57 @@
+# لایه تولید — TLS با Let's Encrypt و انتشار روی پورت‌های استاندارد ۸۰/۴۴۳.
+# پیش‌نیاز: متغیرهای DOMAIN و ACME_EMAIL در .env؛ به‌علاوه رکورد DNS دامنه به این سرور.
+#
+#   docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
+#
+# همه درخواست‌های HTTP به HTTPS هدایت می‌شوند و مسیریابی‌ها فقط روی دامنه DOMAIN پاسخ می‌دهند.
+
+services:
+  traefik:
+    command: !override
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --entrypoints.web.address=:80
+      - --entrypoints.web.http.redirections.entrypoint.to=websecure
+      - --entrypoints.web.http.redirections.entrypoint.scheme=https
+      - --entrypoints.websecure.address=:443
+      - --certificatesresolvers.le.acme.email=${ACME_EMAIL:?ACME_EMAIL را در .env تنظیم کنید}
+      - --certificatesresolvers.le.acme.storage=/letsencrypt/acme.json
+      - --certificatesresolvers.le.acme.httpchallenge=true
+      - --certificatesresolvers.le.acme.httpchallenge.entrypoint=web
+    ports: !override
+      - "80:80"
+      - "443:443"
+    volumes: !override
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - letsencrypt_data:/letsencrypt
+
+  backend:
+    environment:
+      # سایت هم‌مبدأ است — CORS لازم نیست
+      CORS_ORIGINS: '[]'
+      SITE_URL: https://${DOMAIN:?DOMAIN را در .env تنظیم کنید}
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.api.rule=Host(`${DOMAIN}`) && PathPrefix(`/api`)
+      - traefik.http.routers.api.entrypoints=websecure
+      - traefik.http.routers.api.tls.certresolver=le
+      - traefik.http.routers.seo.rule=Host(`${DOMAIN}`) && (PathPrefix(`/blog/`) || Path(`/blog`) || PathPrefix(`/projects/`) || Path(`/projects`) || PathPrefix(`/robots.txt`) || PathPrefix(`/sitemap.xml`))
+      - traefik.http.routers.seo.entrypoints=websecure
+      - traefik.http.routers.seo.tls.certresolver=le
+
+  minio:
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.media.rule=Host(`${DOMAIN}`) && PathPrefix(`/media`)
+      - traefik.http.routers.media.entrypoints=websecure
+      - traefik.http.routers.media.tls.certresolver=le
+
+  frontend:
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.web.rule=Host(`${DOMAIN}`) && PathPrefix(`/`)
+      - traefik.http.routers.web.entrypoints=websecure
+      - traefik.http.routers.web.tls.certresolver=le
+
+volumes:
+  letsencrypt_data:

docker-compose.yml

@@ -1,3 +1,7 @@
+# مقادیر محرمانه از فایل .env ریشه خوانده می‌شوند — از .env.example کپی کنید:
+#   cp .env.example .env
+# برای انتشار با TLS، روی این فایل docker-compose.prod.yml را هم سوار کنید (README).
+
 services:
   # نقطه ورود واحد — مسیریابی / (سایت استاتیک)، /api (بک‌اند) و /media (MinIO)
   traefik:
@@ -8,7 +12,7 @@ services:
       - --providers.docker.exposedbydefault=false
       - --entrypoints.web.address=:80
     ports:
-      - "5173:80"
+      - "${TRAEFIK_HTTP_PORT:-5173}:80"
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock:ro
 
@@ -17,7 +21,7 @@ services:
     restart: unless-stopped
     environment:
       POSTGRES_USER: aramesh
-      POSTGRES_PASSWORD: aramesh
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:?POSTGRES_PASSWORD را در .env تنظیم کنید}
       POSTGRES_DB: arameshplaza
     volumes:
       - db_data:/var/lib/postgresql/data
@@ -32,8 +36,8 @@ services:
     restart: unless-stopped
     command: server /data --console-address ":9001"
     environment:
-      MINIO_ROOT_USER: aramesh
-      MINIO_ROOT_PASSWORD: aramesh-minio-secret
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER:-aramesh}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD:?MINIO_ROOT_PASSWORD را در .env تنظیم کنید}
     volumes:
       - minio_data:/data
     healthcheck:
@@ -42,7 +46,8 @@ services:
       timeout: 5s
       retries: 12
     ports:
-      - "9001:9001" # کنسول MinIO
+      - "9001:9001" # کنسول MinIO — در محیط واقعی با فایروال ببندید
+      - "19000:9000" # دسترسی مستقیم/لوکال به MinIO (اختیاری — تصاویر از مسیر /media سرو می‌شوند)
     labels:
       - traefik.enable=true
       - traefik.http.routers.media.rule=PathPrefix(`/media`)
@@ -53,50 +58,74 @@ services:
       - traefik.http.middlewares.media-rewrite.replacepathregex.replacement=/aramesh-media/$$1
       - traefik.http.services.media.loadbalancer.server.port=9000
 
-  # یک‌بار اجرا می‌شود: ساخت باکت و بازگذاشتن خواندن عمومی برای سرو تصاویر
+  # یک‌بار اجرا می‌شود: ساخت باکت، بازگذاشتن خواندن عمومی و پیش‌بارگذاری تصویرهای seed.
+  # تصویرهای داخل seed-media/ (که با پیشوند /media در دیتابیس ثبت‌اند) روی یک حجم تازه
+  # وارد باکت می‌شوند تا هر نسخه تازه‌کلون/بیلد، همان عکس‌ها را داشته باشد؛
+  # روی حجم موجود، mc cp فایل‌های تکراری را رد می‌کند و داده‌تازه را نمی‌خورد.
   minio-setup:
     image: minio/mc:latest
     depends_on:
       minio:
         condition: service_healthy
     environment:
-      MINIO_ROOT_USER: aramesh
-      MINIO_ROOT_PASSWORD: aramesh-minio-secret
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER:-aramesh}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD:?MINIO_ROOT_PASSWORD را در .env تنظیم کنید}
       MINIO_BUCKET: aramesh-media
+    volumes:
+      - ./seed-media:/seed-media:ro
     restart: "no"
     entrypoint: >
       /bin/sh -c "
       mc alias set local http://minio:9000 $$MINIO_ROOT_USER $$MINIO_ROOT_PASSWORD &&
       mc mb --ignore-existing local/$$MINIO_BUCKET &&
       mc anonymous set download local/$$MINIO_BUCKET &&
-      echo 'minio-setup: bucket ready'
+      echo 'minio-setup: bucket ready' &&
+      cd /seed-media && mc mirror --overwrite . local/$$MINIO_BUCKET/ &&
+      echo 'minio-setup: seed media mirrored'
       "
 
   backend:
     build: ./backend
     restart: unless-stopped
     environment:
-      DATABASE_URL: postgresql+psycopg://aramesh:aramesh@db:5432/arameshplaza
-      SECRET_KEY: change-me-to-a-long-random-string
-      CORS_ORIGINS: '["http://localhost:5173","http://127.0.0.1:5173"]'
-      ADMIN_USERNAME: admin
-      ADMIN_PASSWORD: aramesh123
+      DATABASE_URL: postgresql+psycopg://aramesh:${POSTGRES_PASSWORD}@db:5432/arameshplaza
+      SECRET_KEY: ${SECRET_KEY:?SECRET_KEY را در .env تنظیم کنید}
+      CORS_ORIGINS: ${CORS_ORIGINS:-["http://localhost:5173","http://127.0.0.1:5173"]}
+      ADMIN_USERNAME: ${ADMIN_USERNAME:-admin}
+      ADMIN_PASSWORD: ${ADMIN_PASSWORD:?ADMIN_PASSWORD را در .env تنظیم کنید}
       S3_ENDPOINT: http://minio:9000
-      S3_ACCESS_KEY: aramesh
-      S3_SECRET_KEY: aramesh-minio-secret
+      S3_ACCESS_KEY: ${MINIO_ROOT_USER:-aramesh}
+      S3_SECRET_KEY: ${MINIO_ROOT_PASSWORD:?MINIO_ROOT_PASSWORD را در .env تنظیم کنید}
       S3_BUCKET: aramesh-media
       MEDIA_PUBLIC_BASE: /media
+      # نشانی عمومی سایت — برای sitemap و آدرس مطلق OG (مثل https://aramesh.example)
+      SITE_URL: ${SITE_URL:-}
+      # بیلد فرانت‌اند برای تزریق متای سئو در صفحات /blog و /projects
+      FRONTEND_DIST: /srv/frontend
+    volumes:
+      - ./frontend/dist:/srv/frontend:ro
     depends_on:
       db:
         condition: service_healthy
       minio:
         condition: service_healthy
+    healthcheck:
+      test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/api/health')"]
+      interval: 15s
+      timeout: 5s
+      retries: 5
+      start_period: 20s
     labels:
       - traefik.enable=true
       - traefik.http.routers.api.rule=PathPrefix(`/api`)
       - traefik.http.routers.api.entrypoints=web
       - traefik.http.routers.api.priority=100
       - traefik.http.services.api.loadbalancer.server.port=8000
+      # robots.txt و sitemap.xml و صفحات وبلاگ/پروژه با متای سئو — اولویت بالاتر از SPA
+      - traefik.http.routers.seo.rule=PathPrefix(`/blog/`) || Path(`/blog`) || PathPrefix(`/projects/`) || Path(`/projects`) || PathPrefix(`/robots.txt`) || PathPrefix(`/sitemap.xml`)
+      - traefik.http.routers.seo.entrypoints=web
+      - traefik.http.routers.seo.priority=50
+      - traefik.http.routers.seo.service=api
 
   # فقط سرو فایل‌های استاتیک SPA — بیلد روی هاست (npm run build) انجام شده است
   frontend:
@@ -105,6 +134,11 @@ services:
     depends_on:
       - backend
       - minio
+    healthcheck:
+      test: ["CMD", "wget", "-q", "--spider", "http://localhost/"]
+      interval: 15s
+      timeout: 5s
+      retries: 5
     labels:
       - traefik.enable=true
       - traefik.http.routers.web.rule=PathPrefix(`/`)
@@ -112,6 +146,17 @@ services:
       - traefik.http.routers.web.priority=1
       - traefik.http.services.web.loadbalancer.server.port=80
 
+  # ابزار پشتیبان‌گیری — فقط با پروفایل tools اجرا می‌شود (scripts/backup.sh این کار را می‌کند)
+  mc:
+    image: minio/mc:latest
+    profiles: ["tools"]
+    depends_on:
+      minio:
+        condition: service_healthy
+    environment:
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER:-aramesh}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD:?MINIO_ROOT_PASSWORD را در .env تنظیم کنید}
+
 volumes:
   db_data:
   minio_data:

frontend/.tmp-render-test.ts

@@ -0,0 +1,47 @@
+// تست موقت رندر استاتیک و ابزارها — پس از اجرا حذف میشود
+import { renderToHTMLString } from '@tiptap/static-renderer'
+import { ARTICLE_EXTENSIONS } from './src/components/admin/ArticleEditor'
+import { formatReadingTime, readingTimeMinutes } from './src/utils/readingTime'
+import { buildLinkRel, normalizeHref, parseLinkRel } from './src/utils/link'
+import { docHeadings, docImages, docToText } from './src/utils/tiptapDoc'
+
+const doc = {
+  type: 'doc',
+  content: [
+    { type: 'paragraph', content: [{ type: 'text', text: 'متن نمونه مقاله برای تست رندر' }] },
+    {
+      type: 'image',
+      attrs: { src: '/media/a.jpg', alt: 'تصویر تست', title: 'Photo 1', caption: 'کپشن تصویر تست' },
+    },
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          text: 'لینک خارجی',
+          marks: [{ type: 'link', attrs: { href: 'https://example.com', target: '_blank', rel: 'noopener noreferrer nofollow' } }],
+        },
+      ],
+    },
+    { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'تیتر دوم' }] },
+  ],
+}
+
+const html = renderToHTMLString({ extensions: ARTICLE_EXTENSIONS, content: doc as never })
+
+console.log('--- rendered html ---')
+console.log(html)
+console.log('--- checks ---')
+console.log('has figure:', html.includes('<figure'))
+console.log('has figcaption:', html.includes('<figcaption') && html.includes('کپشن تصویر تست'))
+console.log('has img src:', html.includes('src="/media/a.jpg"'))
+console.log('has alt:', html.includes('alt="تصویر تست"'))
+console.log('has title:', html.includes('title="Photo 1"'))
+console.log('link rel/target:', html.includes('rel="noopener noreferrer nofollow"'), html.includes('target="_blank"'))
+console.log('--- text utils ---')
+console.log('text:', docToText(doc))
+console.log('h2:', docHeadings(doc, 2), '| images:', docImages(doc).length)
+console.log('reading time:', formatReadingTime(doc), '| minutes:', readingTimeMinutes(doc))
+console.log('--- link helpers ---')
+console.log('normalize:', normalizeHref('example.com'), '|', normalizeHref('/contact'), '|', normalizeHref('javascript:alert(1)'))
+console.log('rel:', buildLinkRel({ newTab: true, nofollow: true }), '|', buildLinkRel({ newTab: false, nofollow: false }), '|', parseLinkRel('noopener noreferrer').newTab)

frontend/.tmp-vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: { entry: '.tmp-render-test.ts', formats: ['cjs'], fileName: () => 'tmp-render-test.cjs' },
+    outDir: '.tmp-render-out',
+    minify: false,
+    emptyOutDir: true,
+  },
+})

frontend/README.md

@@ -1,8 +1,62 @@
-# Magic Patterns - Vite Template
 
-This code was generated by [Magic Patterns](https://magicpatterns.com) for this design: [Source Design](https://www.magicpatterns.com/c/ka4i8ikygtakmdobhws6nu)
+# Aramesh Construction Group — Frontend
 
-## Getting Started
+A modern React + Vite + TypeScript frontend application with a luxurious dark theme (Background: `#27221c`, Accent: `#d5874c`). All text content and assets are fetched dynamically from the backend API (`GET /api/site`).
 
-1. Run `npm install`
-2. Run `npm run dev`
+## Typography & Smart Bidi Text
+The **Pinar** font is installed and served locally. The application no longer relies on any external servers or CDNs for font rendering, and the UI is fully localized for Persian (Farsi) users.
+
+**Smart Bidi Typography:** To maintain perfect visual weight and baseline alignment when mixing English words within Persian text, we utilize a dynamic CSS calculation for Latin characters: `calc(1em - 2px)`. This ensures that English text automatically scales down slightly to match the natural density and baseline of the Persian font, preventing any visual imbalance in mixed-language sentences.
+
+## Recent UI/UX Improvements
+*   **Tiptap Editor Fixes**: 
+    *   Resolved the initialization bug where the editor body remained empty during edit mode.
+    *   Fixed Tiptap block boundaries so formatting a new line (e.g., changing it to H2) no longer alters the formatting of the previous line.
+*   **Dynamic TOC & Layout**: 
+    *   The Table of Contents (TOC) is now strictly `position: sticky` and extracts all H2/H3 tags flawlessly.
+    *   The entire article layout (including Author, Read Time, and TOC) dynamically flips RTL/LTR based on the article's primary language.
+
+## CMS, SEO & Editor Features
+
+The project includes a robust, custom-built Digital Twin (Admin Panel) with advanced content management capabilities, emphasizing a premium UI/UX:
+
+*   **Advanced SEO & Featured Media:** Dynamic `meta_description` fields (150-160 characters). The Featured Image component features a compact layout with smart data-binding: the `Alt` text auto-fills based on the title (e.g., `[Title] - تصویر شاخص`) as a smart fallback to ensure SEO compliance, while still allowing **full manual overrides** for precise custom keyword targeting.
+*   **Precise Category Management:** A flawlessly integrated, single-select category dropdown using `react-select` (Creatable) and `react-hook-form`. It allows creating new categories on the fly while retaining them in the global list, seamlessly matching the strict single-category backend schema.
+*   **Article Metadata & Reading Time:** A beautifully designed metadata component displaying the author's avatar, name, publication date, and an auto-calculated dynamic reading time (displayed dynamically with Persian numerals, e.g., "۵ دقیقه مطالعه") directly below the H1 title.
+*   **Dynamic Table of Contents (TOC):** Auto-generates a clickable TOC from `h2` and `h3` tags within the article, using a custom Persian-supported `slugify` logic for anchor links.
+*   **Custom Tiptap WYSIWYG Editor:** 
+    *   **Fixed Toolbar & Typography:** Dedicated LTR/RTL toggles (`data-dir="ltr|rtl"`) mapped to a fixed toolbar that ensures layout stability.
+    *   **Advanced Image & Caption Nodes:** Built via `ReactNodeViewRenderer`, rendering HTML wrapped in `<figure><figcaption>`. Features strictly isolated UI deletion controls.
+    *   **Animated Link Modal:** A premium, auto-opening modal with smooth fade/scale transition effects. Includes seamless checkbox toggles for "Open in new tab" (`target="_blank" rel="noopener noreferrer"`) and SEO link attributes (`nofollow/dofollow`).
+*   **Full Jalali (Shamsi) Calendar Integration:** 
+    *   Admin panel utilizes `react-multi-date-picker` for a visual Persian date selection experience.
+    *   Frontend and text displays rely on native `Intl.DateTimeFormat` to render dates and numerals perfectly in Persian.
+
+## Development Setup
+
+```bash
+npm install
+npm run dev
+
+```
+
+In development mode, Vite proxies `/api` and `/media` requests to Traefik (port 5173). Therefore, the Docker stack must be running.
+The backend API URL is read from the `VITE_API_URL` environment variable in `src/config.ts`; an empty default implies same-origin requests.
+
+## Build & Production
+
+The build process runs on the host machine. The Docker container only serves the generated static files in the `dist/` directory using Caddy:
+
+```bash
+npm run build
+
+```
+
+> **Note:** The backend reads the `dist/` directory (mounted at `/srv/frontend` in Docker Compose) to inject SEO metadata into the `/blog` and `/projects` pages. After making any frontend changes, running `npm run build` and restarting the backend is sufficient.
+
+## Key Modules & Architecture
+
+* `src/api.tsx` — Handles site data loading and draft article merging for the admin view.
+* `src/admin/` — Live editing layer (Digital Twin): includes the admin toolbar, entity drawers, and the article editor.
+* `src/seo.ts` — Manages page-level SEO tags (Title, Description, Open Graph, Canonical, JSON-LD).
+* `src/data/site.ts` — Shared TypeScript data models and interfaces.

frontend/index.html

@@ -5,6 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>گروه ساختمانی آرامش</title>
+    <meta name="description" content="گروه ساختمانی آرامش — طراحی، اجرا و مدیریت پروژه‌های ساختمانی؛ خدمات مهندسی، پیمانکاری و سرمایه‌گذاری ساخت‌وساز." />
+    <meta property="og:site_name" content="گروه ساختمانی آرامش" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="fa_IR" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <script type="application/ld+json">
+      {"@context":"https://schema.org","@type":"Organization","name":"گروه ساختمانی آرامش","inLanguage":"fa"}
+    </script>
   </head>
   <body>
     <div id="root"></div>

frontend/package-lock.json

@@ -19,7 +19,11 @@
         "lucide-react": "0.522.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.88.0",
+        "react-multi-date-picker": "^4.5.2",
         "react-router-dom": "^6.26.2",
+        "react-select": "^5.10.2",
+        "slugify": "^1.6.9",
         "sweetalert2": "^11.26.25"
       },
       "devDependencies": {
@@ -933,7 +937,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
       "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "@floating-ui/utils": "^0.2.12"
       }
@@ -943,7 +946,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
       "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "@floating-ui/core": "^1.8.0",
         "@floating-ui/utils": "^0.2.12"
@@ -953,8 +955,7 @@
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
@@ -2020,6 +2021,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.8.0.tgz",
@@ -2763,6 +2773,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.407",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.407.tgz",
@@ -3733,6 +3753,12 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3860,7 +3886,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -4238,6 +4263,17 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/prosemirror-changeset": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.4.2.tgz",
@@ -4420,6 +4456,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-date-object": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmmirror.com/react-date-object/-/react-date-object-2.1.9.tgz",
+      "integrity": "sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg==",
+      "license": "MIT"
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -4433,12 +4475,52 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-element-popper": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/react-element-popper/-/react-element-popper-2.1.7.tgz",
+      "integrity": "sha512-tuM2OxKlW32h+6uFSK6EENHPeZ2OGgOipHfOAl+VLWEv9/j3QkSGbD+ADX3A9uJlmq24i37n28RjJmAbGTfpEg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.88.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.88.0.tgz",
+      "integrity": "sha512-QRaLOWhX93YCnMiRfnOFRSwWXZNt8qhm2JTZwypoDvKpSffTJHmpzMXt8U6PV5UThvL3IiiLDUWe2nHMtz6Mmw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-multi-date-picker": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmmirror.com/react-multi-date-picker/-/react-multi-date-picker-4.5.2.tgz",
+      "integrity": "sha512-FgWjZB3Z6IA6XpcWiLPk85PwcRUhOiYhKK42o5k672gD/n2I6rzPfQ8bUrldOIiF/Z7FfOCdH7a6FeubzqteLg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-date-object": "^2.1.8",
+        "react-element-popper": "^2.1.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -4481,6 +4563,43 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
+      "integrity": "sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4693,6 +4812,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/slugify": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+      "integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -5055,6 +5183,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
+      "integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",

frontend/package.json

@@ -21,7 +21,11 @@
     "lucide-react": "0.522.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.88.0",
+    "react-multi-date-picker": "^4.5.2",
     "react-router-dom": "^6.26.2",
+    "react-select": "^5.10.2",
+    "slugify": "^1.6.9",
     "sweetalert2": "^11.26.25"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -16,7 +16,7 @@ import { ArticleDetail } from './pages/ArticleDetail';
 import { FaqPage } from './pages/FaqPage';
 import { ContactPage } from './pages/ContactPage';
 import { SiteProvider, useSiteData } from './api';
-import { seoKeyForPath, setMetaDescription } from './seo';
+import { applySeo, seoKeyForPath } from './seo';
 import { AdminProvider, useAdmin } from './admin/AdminContext';
 import { AdminBar } from './admin/AdminBar';
 import { AdminLoginPage } from './admin/AdminLoginPage';
@@ -76,8 +76,11 @@ function AppChrome() {
     const meta = data.seo_meta?.find((s) => s.page_key === key);
     const brand = data.brand.name;
     const navLabel = data.nav.find((n) => n.href === `/${key}`)?.label;
-    document.title = meta?.title || (key === 'home' ? brand : navLabel ? `${navLabel} | ${brand}` : brand);
-    setMetaDescription(meta?.description ?? '');
+    applySeo({
+      title: meta?.title || (key === 'home' ? brand : navLabel ? `${navLabel} | ${brand}` : brand),
+      description: meta?.description ?? '',
+      path: pathname,
+    });
   }, [pathname, data, isAdminPage]);
 
   return (
@@ -94,8 +97,10 @@ function AppChrome() {
 function AppShell() {
   const { data, error, reload } = useSiteData();
 
+  // overflow-x-clip جای overflow-x-hidden: اسکرول‌افزار نمی‌سازد، پس position: sticky
+  // (فهرست مطالب مقاله) به صفحه می‌چسبد و با محتوا پایین نمی‌رود؛ برش افقی هم حفظ می‌شود.
   return (
-    <div dir="rtl" lang="fa" className="min-h-screen w-full overflow-x-hidden bg-ink font-pinar text-ivory">
+    <div dir="rtl" lang="fa" className="min-h-screen w-full overflow-x-clip bg-ink font-pinar text-ivory">
       <Preloader />
       {error ? (
         <div className="flex min-h-screen flex-col items-center justify-center px-6 text-center">

frontend/src/admin/AdminBar.tsx

@@ -1,4 +1,8 @@
+import { useState } from 'react'
+import Swal from 'sweetalert2'
+import { KeyRoundIcon, XIcon } from 'lucide-react'
 import { useAdmin } from './AdminContext'
+import { adminApi } from './adminClient'
 
 const STATUS_TEXT: Record<string, string> = {
   idle: 'همگام‌سازی شد',
@@ -12,53 +16,175 @@ const STATUS_COLOR: Record<string, string> = {
   error: 'bg-red-400',
 }
 
-/** نوار شناور ادمین — فقط برای کاربر واردشده رندر می‌شود */
-export function AdminBar() {
-  const { isEditMode, toggleEditMode, saveStatus, logout } = useAdmin()
+const SWAL_BASE = {
+  background: '#1e1a16',
+  color: '#F5F3EF',
+  iconColor: '#d5874c',
+  buttonsStyling: false,
+  customClass: {
+    popup: 'font-pinar border border-ivory/10 rounded-none',
+    title: 'font-pinar font-bold text-lg text-ivory',
+    htmlContainer: 'font-pinar font-light text-sm text-ivory/70',
+    confirmButton: 'bg-copper text-char font-bold px-8 py-2.5',
+  },
+}
+
+function ChangePasswordModal({ onClose }: { onClose: () => void }) {
+  const [current, setCurrent] = useState('')
+  const [next, setNext] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const submit = async () => {
+    if (next.length < 8) {
+      void Swal.fire({ ...SWAL_BASE, icon: 'warning', title: 'رمز جدید کوتاه است', text: 'رمز جدید باید دست‌کم ۸ نویسه باشد.', confirmButtonText: 'باشه' })
+      return
+    }
+    if (next !== confirm) {
+      void Swal.fire({ ...SWAL_BASE, icon: 'warning', title: 'تکرار رمز مطابق نیست', text: 'رمز جدید و تکرار آن یکسان نیستند.', confirmButtonText: 'باشه' })
+      return
+    }
+    setBusy(true)
+    try {
+      await adminApi.changePassword(current, next)
+      void Swal.fire({ ...SWAL_BASE, icon: 'success', title: 'رمز عبور عوض شد', text: 'از این به بعد با رمز جدید وارد شوید.', iconColor: '#34d399', confirmButtonText: 'باشه' })
+      onClose()
+    } catch (error) {
+      void Swal.fire({
+        ...SWAL_BASE,
+        icon: 'error',
+        title: 'تغییر رمز ناموفق بود',
+        text: error instanceof Error ? error.message : 'دوباره تلاش کنید',
+        confirmButtonText: 'باشه',
+      })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const field =
+    'w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none'
 
   return (
-    <div
-      dir="rtl"
-      className="fixed bottom-4 right-1/2 z-[90] flex translate-x-1/2 items-center gap-5 border border-ivory/15 bg-ink/95 py-2.5 pl-6 pr-5 shadow-2xl backdrop-blur-md"
-    >
-      <span className="flex items-center gap-2 text-xs font-bold text-copper">
-        <span className="flex h-2 w-2 rounded-full bg-copper" />
-        حالت مدیریت
-      </span>
-
-      <button
-        type="button"
-        role="switch"
-        aria-checked={isEditMode}
-        onClick={toggleEditMode}
-        className="group flex items-center gap-3 text-sm font-light text-ivory/80"
-      >
-        <span
-          className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors duration-200 ${
-            isEditMode ? 'border-copper bg-copper/30' : 'border-ivory/25 bg-char'
-          }`}
-        >
-          <span
-            className={`absolute h-4 w-4 rounded-full transition-all duration-200 ${
-              isEditMode ? 'right-1 bg-copper' : 'right-6 bg-ivory/50'
-            }`}
+    <div className="fixed inset-0 z-[95] flex items-center justify-center bg-black/60 p-6 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label="تغییر رمز عبور">
+      <div dir="rtl" className="w-full max-w-sm border border-ivory/15 bg-ink p-8 shadow-2xl">
+        <div className="flex items-center justify-between">
+          <h2 className="flex items-center gap-2 text-sm font-bold text-copper">
+            <KeyRoundIcon className="h-4 w-4" />
+            تغییر رمز عبور
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="بستن"
+            className="text-ivory/50 transition-colors hover:text-ivory"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="mt-6 grid gap-4">
+          <input
+            type="password"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            placeholder="رمز عبور فعلی"
+            aria-label="رمز عبور فعلی"
+            autoComplete="current-password"
+            className={field}
           />
-        </span>
-        {isEditMode ? 'حالت ویرایش فعال' : 'حالت ویرایش خاموش'}
-      </button>
-
-      <span className="flex items-center gap-2 border-r border-ivory/10 pr-5 text-xs font-light text-ivory/60">
-        <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLOR[saveStatus]}`} aria-hidden="true" />
-        {STATUS_TEXT[saveStatus]}
-      </span>
-
-      <button
-        type="button"
-        onClick={logout}
-        className="border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
-      >
-        خروج
-      </button>
+          <input
+            type="password"
+            value={next}
+            onChange={(e) => setNext(e.target.value)}
+            placeholder="رمز جدید (دست‌کم ۸ نویسه)"
+            aria-label="رمز جدید"
+            autoComplete="new-password"
+            className={field}
+          />
+          <input
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="تکرار رمز جدید"
+            aria-label="تکرار رمز جدید"
+            autoComplete="new-password"
+            className={field}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => void submit()}
+          disabled={busy || !current || !next}
+          className="mt-6 w-full bg-copper py-2.5 text-sm font-bold text-char transition-opacity disabled:opacity-50"
+        >
+          {busy ? 'در حال ذخیره…' : 'ذخیره رمز جدید'}
+        </button>
+      </div>
     </div>
   )
 }
+
+/** نوار شناور ادمین — فقط برای کاربر واردشده رندر می‌شود */
+export function AdminBar() {
+  const { isEditMode, toggleEditMode, saveStatus, logout } = useAdmin()
+  const [pwOpen, setPwOpen] = useState(false)
+
+  return (
+    <>
+      <div
+        dir="rtl"
+        className="fixed bottom-4 right-1/2 z-[90] flex translate-x-1/2 items-center gap-5 border border-ivory/15 bg-ink/95 py-2.5 pl-6 pr-5 shadow-2xl backdrop-blur-md"
+      >
+        <span className="flex items-center gap-2 text-xs font-bold text-copper">
+          <span className="flex h-2 w-2 rounded-full bg-copper" />
+          حالت مدیریت
+        </span>
+
+        <button
+          type="button"
+          role="switch"
+          aria-checked={isEditMode}
+          onClick={toggleEditMode}
+          className="group flex items-center gap-3 text-sm font-light text-ivory/80"
+        >
+          <span
+            className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors duration-200 ${
+              isEditMode ? 'border-copper bg-copper/30' : 'border-ivory/25 bg-char'
+            }`}
+          >
+            <span
+              className={`absolute h-4 w-4 rounded-full transition-all duration-200 ${
+                isEditMode ? 'right-1 bg-copper' : 'right-6 bg-ivory/50'
+              }`}
+            />
+          </span>
+          {isEditMode ? 'حالت ویرایش فعال' : 'حالت ویرایش خاموش'}
+        </button>
+
+        <span className="flex items-center gap-2 border-r border-ivory/10 pr-5 text-xs font-light text-ivory/60">
+          <span className={`h-1.5 w-1.5 rounded-full ${STATUS_COLOR[saveStatus]}`} aria-hidden="true" />
+          {STATUS_TEXT[saveStatus]}
+        </span>
+
+        <button
+          type="button"
+          onClick={() => setPwOpen(true)}
+          className="flex items-center gap-1.5 border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
+        >
+          <KeyRoundIcon className="h-3.5 w-3.5" />
+          رمز
+        </button>
+
+        <button
+          type="button"
+          onClick={logout}
+          className="border border-ivory/20 px-3 py-1.5 text-xs font-light text-ivory/70 transition-colors duration-200 hover:border-copper hover:text-copper"
+        >
+          خروج
+        </button>
+      </div>
+
+      {pwOpen && <ChangePasswordModal onClose={() => setPwOpen(false)} />}
+    </>
+  )
+}

frontend/src/admin/AdminContext.tsx

@@ -67,14 +67,18 @@ export function AdminProvider({ children }: { children: ReactNode }) {
   const login = useCallback(async (username: string, password: string) => {
     await adminApi.login(username, password)
     setIsAuthenticated(true)
-  }, [])
+    // داده سایت دوباره بارگذاری می‌شود تا پیش‌نویس مقاله‌ها هم ادغام شوند
+    reload()
+  }, [reload])
 
   const logout = useCallback(() => {
     setToken(null)
     setIsAuthenticated(false)
     setIsEditMode(false)
     sessionStorage.removeItem('aramesh_edit_mode')
-  }, [])
+    // داده سایت دوباره بارگذاری می‌شود تا پیش‌نویس‌ها از درخت داده حذف شوند
+    reload()
+  }, [reload])
 
   const runSave = useCallback(
     async (action: () => Promise<void>): Promise<boolean> => {

frontend/src/admin/ArticleWritePage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { Controller, useController, useForm } from 'react-hook-form'
 import { Link, Navigate, useNavigate, useParams } from 'react-router-dom'
 import { ArrowRightIcon, CheckIcon, EyeIcon, Trash2Icon } from 'lucide-react'
 import Swal from 'sweetalert2'
@@ -8,20 +9,49 @@ import { adminApi } from './adminClient'
 import { ArticleEditor } from '../components/admin/ArticleEditor'
 import { SeoChecklist } from '../components/admin/SeoChecklist'
 import { ImageField } from '../components/admin/ImageField'
-import type { ArticleBodyDoc } from '../data/site'
+import { JalaliDatePicker } from '../components/admin/JalaliDatePicker'
+import { CategorySelect, LuxeTagsSelect } from '../components/admin/LuxeSelect'
+import type { CategoryOption } from '../components/admin/LuxeSelect'
+import { ARTICLE_CATEGORIES } from './entities'
+import { FEATURED_IMAGE_ALT_SUFFIX } from '../data/constants'
+import { formatReadingTime } from '../utils/readingTime'
+import { toArticleBodyDoc } from '../utils/tiptapDoc'
+import type { Article, ArticleBodyDoc } from '../data/site'
 
 const EMPTY_DOC = { type: 'doc', content: [{ type: 'paragraph' }] } as unknown as ArticleBodyDoc
 
-type Draft = {
-  id: number
-  slug: string
+/** پیش‌نویس صفحه نوشتن — همان شکل Article با بدنه ساختاریافته */
+type Draft = Omit<Article, 'body'> & { body: ArticleBodyDoc }
+
+/**
+ * فیلدهای متادیتای مقاله که با React Hook Form مدیریت می‌شوند:
+ * عنوان (مبنای Alt پویا)، دسته‌بندی و متادیتای تصویر شاخص.
+ * `category` در فرم یک شیء تک‌مقداری {value,label} یا null است
+ * که هنگام ذخیره به رشته (ستون category در بک‌اند) نگاشت می‌شود.
+ */
+type ArticleMetaForm = {
   title: string
-  date: string
-  category: string
-  image: string
-  read: string
-  excerpt: string
-  body: ArticleBodyDoc
+  category: CategoryOption | null
+  image_alt: string
+  image_title: string
+}
+
+/** مقدار رشته‌ای ذخیره‌شده → گزینه react-select (یا null وقتی خالی است) */
+function toCategoryOption(value: string): CategoryOption | null {
+  const category = (value ?? '').trim()
+  return category ? { label: category, value: category } : null
+}
+
+/** گزینه react-select → مقدار رشته‌ای ذخیره‌سازی در بک‌اند */
+function categoryValue(option: CategoryOption | null): string {
+  return option?.value.trim() ?? ''
+}
+
+/** داده‌های قدیمی ممکن است هشتگ را رشته کاماشده داشته باشند */
+function normalizeTags(value: unknown): string[] {
+  if (Array.isArray(value)) return value.map((t) => String(t).trim()).filter(Boolean)
+  if (typeof value === 'string') return value.split(',').map((t) => t.trim()).filter(Boolean)
+  return []
 }
 
 const STATUS_TEXT: Record<string, string> = {
@@ -41,34 +71,53 @@ export function ArticleWritePage() {
   const { data, updateSite } = useSiteData()
 
   const existing = id ? data?.articles.find((a) => a.id === Number(id)) : undefined
+  const [fetched, setFetched] = useState<Draft | null>(null)
 
-  const [draft, setDraft] = useState<Draft>(() =>
-    existing
-      ? {
-          ...existing,
-          body: (Array.isArray(existing.body) ? EMPTY_DOC : existing.body) as ArticleBodyDoc,
-        }
-      : {
-          id: 0,
-          slug: `article-${Date.now()}`,
-          title: '',
-          date: new Date().toLocaleDateString('fa-IR'),
-          category: 'یادداشت',
-          image: '',
-          read: '۵ دقیقه',
-          excerpt: '',
-          body: EMPTY_DOC,
-        },
-  )
-  const [createdId, setCreatedId] = useState<number | null>(existing?.id ?? null)
+  // مقاله تازه همیشه پیش‌نویس شروع می‌شود؛ با دکمه «انتشار در سایت» عمومی می‌شود
+  const [draft, setDraft] = useState<Draft>({
+    id: 0,
+    slug: `article-${Date.now()}`,
+    title: '',
+    date: new Date().toISOString().split('T')[0],
+    category: ARTICLE_CATEGORIES[0],
+    tags: [],
+    image: '',
+    image_alt: '',
+    image_title: '',
+    author: '',
+    meta_description: '',
+    read: '۵ دقیقه',
+    excerpt: '',
+    body: EMPTY_DOC,
+    status: 'draft',
+    seo_keyphrase: '',
+  })
+
+  /**
+   * فرم متادیتا با React Hook Form — منبع نمایش فیلدها.
+   * هر تغییر، هم فرم و هم draft (مبنای ذخیره‌سازی خودکار) را به‌روز می‌کند.
+   */
+  const { control, watch, reset } = useForm<ArticleMetaForm>({
+    defaultValues: {
+      title: '',
+      category: toCategoryOption(ARTICLE_CATEGORIES[0]),
+      image_alt: '',
+      image_title: '',
+    },
+    mode: 'onChange',
+  })
+  /** عنوان زنده مقاله — مبنای متن جایگزین (Alt) تصویر شاخص */
+  const watchedTitle = watch('title')
+  const { field: imageAltField } = useController({ name: 'image_alt', control })
+  const { field: imageTitleField } = useController({ name: 'image_title', control })
+
+  const [createdId, setCreatedId] = useState<number | null>(null)
+  /**
+   * شناسه محتوای بارگذاری‌شده — با رسیدن مقاله از سرور عوض می‌شود تا
+   * بدنه ویرایشگر TipTap با متن واقعی مقاله مقداردهی شود.
+   */
+  const [loadedContentKey, setLoadedContentKey] = useState<string | number>('new')
   const [deleting, setDeleting] = useState(false)
-  // کلمه کلیدی هدف فقط راهنمای سئو است — در localStorage می‌ماند، نه در دیتابیس
-  const [keyphrase, setKeyphrase] = useState(() => localStorage.getItem(`seo-keyphrase-${id ?? 'new'}`) ?? '')
-
-  useEffect(() => {
-    localStorage.setItem(`seo-keyphrase-${id ?? 'new'}`, keyphrase)
-  }, [keyphrase, id])
-
   const draftRef = useRef(draft)
   draftRef.current = draft
   const createdRef = useRef(createdId)
@@ -76,7 +125,46 @@ export function ArticleWritePage() {
   const pendingRef = useRef<Record<string, unknown> | null>(null)
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  if (!isAuthenticated) return <Navigate to="/admin/login" replace />
+  // اگر مقاله در داده سایت نبود (مثلاً پیش از ادغام پیش‌نویس‌ها) مستقیم از انتهای مدیریتی خوانده می‌شود
+  useEffect(() => {
+    if (!id || existing) return
+    let cancelled = false
+    adminApi
+      .get<Draft>('articles', Number(id))
+      .then((a) => {
+        if (!cancelled) setFetched(a)
+      })
+      .catch(() => {
+        /* مقاله وجود ندارد — فرم «مقاله جدید» می‌ماند */
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [id, existing])
+
+  const article = existing ?? fetched
+
+  // وقتی مقاله موجود شناخته شد، فرم و شناسه ساخته‌شده یک‌بار مقداردهی می‌شود
+  useEffect(() => {
+    if (!article || createdRef.current) return
+    setDraft({
+      ...article,
+      tags: normalizeTags(article.tags),
+      // بدنه ذخیره‌شده (سند جدید یا پاراگراف‌های قدیمی) به سند قابل ویرایش تبدیل می‌شود
+      body: toArticleBodyDoc(article.body),
+    })
+    setCreatedId(article.id)
+    // بدنه ویرایشگر با محتوای بارگذاری‌شده همگام می‌شود
+    setLoadedContentKey(article.id)
+    // فرم متادیتا هم با مقادیر مقاله بارگذاری‌شده همگام می‌شود
+    reset({
+      title: article.title ?? '',
+      category: toCategoryOption(article.category ?? ''),
+      image_alt: article.image_alt ?? '',
+      image_title: article.image_title ?? '',
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [article?.id])
 
   const doSave = async (changes: Record<string, unknown>) => {
     if (createdRef.current) {
@@ -86,7 +174,7 @@ export function ArticleWritePage() {
         if (a) Object.assign(a, changes)
       })
     } else {
-      // اولین ذخیره = انتشار: مقاله با همه فیلدهای فعلی ساخته می‌شود
+      // اولین ذخیره = ساخت پیش‌نویس: مقاله ساخته می‌شود اما تا «انتشار» در سایت عمومی دیده نمی‌شود
       const payload = { ...draftRef.current, ...changes }
       if (!payload.title) payload.title = 'بدون عنوان'
       const created = await adminApi.create<Draft & { id: number }>('articles', payload)
@@ -133,6 +221,9 @@ export function ArticleWritePage() {
 
   const forceSave = () => void runSave(flush)
 
+  // محافظ مسیر — پس از همه هوک‌ها تا ترتیب فراخوانی هوک‌ها همیشه یکسان بماند
+  if (!isAuthenticated) return <Navigate to="/admin/login" replace />
+
   const remove = async () => {
     if (!createdId) return
     const result = await Swal.fire({
@@ -167,6 +258,13 @@ export function ArticleWritePage() {
       queueSave({ [name]: e.target.value }),
   })
 
+  const metaLength = (draft.meta_description ?? '').trim().length
+
+  // متن جایگزین تصویر شاخص — با watch('title') به‌صورت زنده ساخته می‌شود
+  const imageAltFallback = [watchedTitle.trim(), FEATURED_IMAGE_ALT_SUFFIX]
+    .filter(Boolean)
+    .join(' - ')
+
   return (
     <div dir="rtl" className="min-h-screen bg-ink font-pinar text-ivory">
       {/* نوار بالا */}
@@ -193,8 +291,28 @@ export function ArticleWritePage() {
             >
               ذخیره
             </button>
+            <span
+              className={`border px-3 py-2 text-xs font-light ${
+                draft.status === 'draft'
+                  ? 'border-amber-400/50 text-amber-300'
+                  : 'border-emerald-400/50 text-emerald-300'
+              }`}
+            >
+              {draft.status === 'draft' ? 'پیش‌نویس' : 'منتشر شده'}
+            </span>
             {createdId && (
               <>
+                <button
+                  type="button"
+                  onClick={() => queueSave({ status: draft.status === 'draft' ? 'published' : 'draft' })}
+                  className={`px-4 py-2 text-xs font-bold transition-colors duration-200 ${
+                    draft.status === 'draft'
+                      ? 'bg-copper text-char hover:scale-105'
+                      : 'border border-ivory/20 text-ivory/70 hover:border-copper hover:text-copper'
+                  }`}
+                >
+                  {draft.status === 'draft' ? 'انتشار در سایت' : 'تبدیل به پیش‌نویس'}
+                </button>
                 <Link
                   to={`/blog/${draft.slug}`}
                   data-admin-link
@@ -220,94 +338,192 @@ export function ArticleWritePage() {
 
       <main className="mx-auto max-w-4xl px-6 pb-32 pt-10">
         <p className="text-xs font-light text-copper">
-          {createdId ? 'ویرایش مقاله منتشرشده — تغییرها همان لحظه در سایت اعمال می‌شود' : 'نوشتن مقاله جدید — با اولین ذخیره منتشر می‌شود'}
+          {!createdId
+            ? 'نوشتن مقاله جدید — به‌صورت پیش‌نویس ذخیره می‌شود؛ با دکمه «انتشار در سایت» عمومی می‌شود'
+            : draft.status === 'draft'
+              ? 'پیش‌نویس — تا انتشار در سایت عمومی دیده نمی‌شود؛ تغییرها ذخیره می‌شوند'
+              : 'مقاله منتشرشده — تغییرها همان لحظه در سایت اعمال می‌شود'}
         </p>
 
-        {/* عنوان */}
-        <input
-          type="text"
-          {...textField('title')}
-          placeholder="عنوان مقاله…"
-          aria-label="عنوان مقاله"
-          className="mt-4 w-full bg-transparent text-4xl font-bold leading-[1.6] text-ivory placeholder:text-ivory/25 focus:outline-none"
+        {/* عنوان — با Controller به فرم وصل است تا watch('title') زنده بماند */}
+        <Controller
+          name="title"
+          control={control}
+          render={({ field }) => (
+            <input
+              type="text"
+              {...field}
+              onChange={(event) => {
+                field.onChange(event.target.value)
+                queueSave({ title: event.target.value })
+              }}
+              placeholder="عنوان مقاله…"
+              aria-label="عنوان مقاله"
+              className="mt-4 w-full bg-transparent text-4xl font-bold leading-[1.6] text-ivory placeholder:text-ivory/25 focus:outline-none"
+            />
+          )}
         />
         <div className="mt-4 h-px w-28 bg-copper" />
 
-        {/* تصویر شاخص */}
+        {/* تصویر شاخص + متن جایگزین و عنوان (هر دو به فرم وصل‌اند) */}
         <div className="mt-8">
           <ImageField
             label="تصویر شاخص مقاله"
             value={draft.image}
+            alt={imageAltField.value}
+            altFallback={imageAltFallback}
+            title={imageTitleField.value}
             onSave={async (url) => {
               queueSave({ image: url })
               return true
             }}
+            onSaveAlt={async (alt) => {
+              imageAltField.onChange(alt)
+              queueSave({ image_alt: alt })
+              return true
+            }}
+            onSaveTitle={async (imageTitle) => {
+              imageTitleField.onChange(imageTitle)
+              queueSave({ image_title: imageTitle })
+              return true
+            }}
           />
         </div>
 
         {/* متن */}
         <div className="mt-8">
           <ArticleEditor
+            contentKey={loadedContentKey}
             doc={draft.body as unknown as Record<string, unknown>}
-            onChange={(json) => queueSave({ body: json })}
+            onChange={(json) => {
+              // زمان مطالعه بهصورت پویا از متن سند محاسبه میشود (۲۰۰ واژه در دقیقه)
+              queueSave({ body: json, read: formatReadingTime(json) })
+            }}
           />
         </div>
 
+        {/* توضیحات متای سئو */}
+        <section className="mt-8 border border-ivory/15 bg-char p-6">
+          <div className="flex items-center justify-between gap-3">
+            <h2 className="text-sm font-bold text-copper">توضیحات سئو (Meta Description)</h2>
+            <span
+              className={`text-[11px] font-light ${
+                metaLength >= 150 && metaLength <= 160 ? 'text-emerald-400' : 'text-ivory/40'
+              }`}
+            >
+              {metaLength.toLocaleString('fa-IR')} از ۱۶۰ نویسه
+            </span>
+          </div>
+          <p className="mt-1 text-xs font-light text-ivory/50">
+            این همان متنی است که در صفحه نتایج گوگل زیر لینک مقاله به کاربران نمایش داده می‌شود (۱۵۰ تا ۱۶۰ نویسه).
+          </p>
+          <textarea
+            id="meta-description"
+            rows={3}
+            value={draft.meta_description ?? ''}
+            onChange={(e) => queueSave({ meta_description: e.target.value })}
+            placeholder="توضیح جذابی برای گوگل بنویسید که شامل کلمه کلیدی باشد…"
+            className="mt-3 w-full resize-y border border-ivory/15 bg-ink px-4 py-3 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+          />
+        </section>
+
         {/* چکیده و متادیتا */}
         <SeoChecklist
           input={{
             title: draft.title,
             slug: draft.slug,
-            excerpt: draft.excerpt,
+            excerpt: draft.meta_description || draft.excerpt,
             body: draft.body,
-            keyphrase,
+            keyphrase: draft.seo_keyphrase,
           }}
         />
 
         <section className="mt-12 border-t border-ivory/10 pt-8" aria-label="جزئیات مقاله">
-          <h2 className="text-sm font-bold text-copper">جزئیات انتشار</h2>
+          <h2 className="text-sm font-bold text-copper">جزئیات انتشار، دسته‌بندی و هشتگ‌ها</h2>
           <div className="mt-5 grid gap-5">
             <div>
               <label htmlFor="seo-keyphrase" className="text-xs font-light text-ivory/50">کلمه کلیدی هدف (فقط برای راهنمای سئو — در سایت نمایش داده نمی‌شود)</label>
               <input
                 id="seo-keyphrase"
                 type="text"
-                value={keyphrase}
-                onChange={(e) => setKeyphrase(e.target.value)}
+                value={draft.seo_keyphrase}
+                onChange={(e) => queueSave({ seo_keyphrase: e.target.value })}
                 className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
               />
             </div>
-            <div>
-              <label className="text-xs font-light text-ivory/50">چکیده (روی کارت مقاله نمایش داده می‌شود)</label>
-              <textarea
-                rows={2}
-                {...textField('excerpt')}
-                className="mt-2 w-full resize-y border border-ivory/15 bg-char px-4 py-3 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
-              />
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
+              <div>
+                <label className="text-xs font-light text-ivory/50">چکیده (روی کارت مقاله نمایش داده می‌شود)</label>
+                <textarea
+                  rows={2}
+                  {...textField('excerpt')}
+                  placeholder="خلاصه کوتاه مقاله برای کارت‌های وبلاگ…"
+                  className="mt-2 w-full resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+                />
+              </div>
+              <div>
+                <label htmlFor="article-author" className="text-xs font-light text-ivory/50">نویسنده</label>
+                <input
+                  id="article-author"
+                  type="text"
+                  {...textField('author')}
+                  placeholder="نام و نام خانوادگی نویسنده"
+                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none"
+                />
+              </div>
             </div>
-            <div className="grid grid-cols-2 gap-5 lg:grid-cols-4">
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
               <div>
-                <label className="text-xs font-light text-ivory/50">دسته</label>
-                <input
-                  type="text"
-                  {...textField('category')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
-                />
+                <label className="text-xs font-light text-ivory/50">دسته‌بندی مقاله (Category)</label>
+                <div className="mt-2">
+                  {/* تک‌انتخابی: ورودی/خروجی Controller یک {value,label} یا null است */}
+                  <Controller
+                    name="category"
+                    control={control}
+                    render={({ field }) => (
+                      <CategorySelect
+                        value={field.value}
+                        options={ARTICLE_CATEGORIES}
+                        onChange={(option) => {
+                          field.onChange(option)
+                          queueSave({ category: categoryValue(option) })
+                        }}
+                      />
+                    )}
+                  />
+                </div>
               </div>
               <div>
-                <label className="text-xs font-light text-ivory/50">تاریخ</label>
-                <input
-                  type="text"
-                  {...textField('date')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
-                />
+                <label className="text-xs font-light text-ivory/50">هشتگ‌ها / برچسب‌ها</label>
+                <div className="mt-2">
+                  <LuxeTagsSelect
+                    value={normalizeTags(draft.tags)}
+                    onChange={(tags) => queueSave({ tags })}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
+              <div>
+                <label htmlFor="article-date" className="text-xs font-light text-ivory/50">تاریخ انتشار (شمسی)</label>
+                <div className="mt-2">
+                  <JalaliDatePicker
+                    id="article-date"
+                    value={draft.date ?? ''}
+                    onChange={(isoDate) => queueSave({ date: isoDate })}
+                  />
+                </div>
               </div>
               <div>
-                <label className="text-xs font-light text-ivory/50">زمان مطالعه</label>
+                <label className="text-xs font-light text-ivory/50">زمان مطالعه (محاسبه خودکار)</label>
                 <input
                   type="text"
+                  disabled
                   {...textField('read')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+                  className="mt-2 w-full cursor-not-allowed border border-ivory/15 bg-char/50 px-3 py-2 text-sm font-light text-ivory/50"
                 />
               </div>
               <div>

frontend/src/admin/Editable.tsx

@@ -223,38 +223,68 @@ export function AddItemButton({
   )
 }
 
-/** دکمه شناور بازکردن کشوی یک رکورد یگانه (برند، هیرو، فرم تماس و...) — فقط در حالت ویرایش */
+/** دکمه شناور بازکردن کشوی یک رکورد یگانه (برند، هیرو، فرم تماس و...) — فقط در حالت ویرایش.
+ * اگر رکورد هنوز در دیتابیس ساخته نشده باشد و createDefaults داده شود، دکمه + آن را می‌سازد. */
 export function SingletonPill({
   resource,
   label,
   className = '',
   select,
+  createDefaults,
 }: {
   resource: string
   label: string
   className?: string
   /** انتخاب رکورد از درخت داده — برای مجموعه‌هایی که یک رکورد خاص اینجاست (مثل سئو) */
   select?: (data: NonNullable<ReturnType<typeof useSiteData>['data']>) => ItemWithId | undefined
+  /** مقادیر ساخت رکورد جدید وقتی هنوز وجود ندارد */
+  createDefaults?: Record<string, unknown> | (() => Record<string, unknown>)
 }) {
-  const { isAuthenticated, isEditMode } = useAdmin()
+  const { isAuthenticated, isEditMode, runSave } = useAdmin()
   const config = ENTITIES[resource]
-  const { data } = useSiteData()
+  const { data, updateSite } = useSiteData()
   const [drawerOpen, setDrawerOpen] = useState(false)
+  const [created, setCreated] = useState<ItemWithId | null>(null)
 
   if (!config || !isAuthenticated || !isEditMode) return null
-  const item = select
-    ? select(data!)
-    : (data?.[config.dataKey as keyof NonNullable<typeof data>] as ItemWithId | undefined)
-  if (!item) return null
+  const item =
+    created ??
+    (select
+      ? select(data!)
+      : (data?.[config.dataKey as keyof NonNullable<typeof data>] as ItemWithId | undefined))
+  if (!item && !createDefaults) return null
+
+  const create = () => {
+    const defaults =
+      typeof createDefaults === 'function' ? createDefaults() : (createDefaults ?? {})
+    void runSave(async () => {
+      const rec = await adminApi.create<ItemWithId>(config.resource, defaults)
+      // درج خوش‌بینانه در درخت داده — دفعه بعد از داده انتخاب می‌شود
+      updateSite((d) => {
+        const list = d[config.dataKey as keyof NonNullable<typeof d>] as unknown as ItemWithId[]
+        if (Array.isArray(list)) list.push(rec)
+      })
+      setCreated(rec)
+      setDrawerOpen(true)
+    })
+  }
 
   return (
     <>
       <span className={className}>
-        <PillButton onClick={() => setDrawerOpen(true)} label={label}>
-          <PencilIcon className="h-3.5 w-3.5" />
-        </PillButton>
+        {item ? (
+          <PillButton onClick={() => setDrawerOpen(true)} label={label}>
+            <PencilIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        ) : (
+          <PillButton onClick={create} label={`ساخت — ${label}`}>
+            <PlusIcon className="h-3.5 w-3.5" />
+          </PillButton>
+        )}
       </span>
-      {drawerOpen && <EntityDrawer config={config} item={item} onClose={() => setDrawerOpen(false)} />}
+      {drawerOpen && item && (
+        <EntityDrawer config={config} item={item} onClose={() => setDrawerOpen(false)} />
+      )}
     </>
   )
 }

frontend/src/admin/EntityDrawer.tsx

@@ -5,8 +5,11 @@ import Swal from 'sweetalert2'
 import { useSiteData } from '../api'
 import { useAdmin, useFieldSaver } from './AdminContext'
 import { adminApi } from './adminClient'
+import { toArticleBodyDoc } from '../utils/tiptapDoc'
 import type { EntityConfig, FieldConfig } from './entities'
 import { ImageField } from '../components/admin/ImageField'
+import { JalaliDatePicker } from '../components/admin/JalaliDatePicker'
+import { LuxeCreatableSelect, LuxeSelect, LuxeTagsSelect } from '../components/admin/LuxeSelect'
 import { ArticleEditor } from '../components/admin/ArticleEditor'
 
 type EntityDrawerProps = {
@@ -111,21 +114,45 @@ export function EntityDrawer({ config, item, onClose, deletable = false }: Entit
 
         <div className="flex-1 overflow-y-auto px-6 py-6">
           <div className="grid gap-6">
-            {config.fields.map((field) => (
-              <FieldControl
-                key={field.name}
-                field={field}
-                value={item[field.name]}
-                onSave={(value) => saveField(field.name, value)}
-                registerFlush={
-                  field.type === 'wysiwyg'
-                    ? (fn) => {
-                        flushRef.current = fn
-                      }
-                    : undefined
-                }
-              />
-            ))}
+            {config.fields.map((field) => {
+              const isImage = field.type === 'image'
+              // فیلد Alt تصویر: برای گالری همان ستون alt و برای بقیه <نام فیلد>_alt
+              const altKey = isImage
+                ? field.name === 'src' && 'alt' in item
+                  ? 'alt'
+                  : `${field.name}_alt`
+                : ''
+              const imageTitleKey = isImage ? `${field.name}_title` : ''
+              // پیشنهاد Alt از عنوان رکورد ساخته می‌شود (هرگز از URL)
+              const imageAltFallback = [
+                String(item[config.titleKey] ?? '').trim(),
+                field.altFallbackSuffix,
+              ]
+                .filter(Boolean)
+                .join(' - ')
+              return (
+                <FieldControl
+                  key={field.name}
+                  field={field}
+                  value={item[field.name]}
+                  altValue={altKey ? String(item[altKey] ?? '') : undefined}
+                  altFallback={imageAltFallback}
+                  imageTitleValue={imageTitleKey ? String(item[imageTitleKey] ?? '') : undefined}
+                  onSave={(value) => saveField(field.name, value)}
+                  onSaveAlt={altKey ? (alt) => saveField(altKey, alt) : undefined}
+                  onSaveImageTitle={
+                    imageTitleKey ? (title) => saveField(imageTitleKey, title) : undefined
+                  }
+                  registerFlush={
+                    field.type === 'wysiwyg'
+                      ? (fn) => {
+                          flushRef.current = fn
+                        }
+                      : undefined
+                  }
+                />
+              )
+            })}
           </div>
         </div>
 
@@ -150,16 +177,33 @@ export function EntityDrawer({ config, item, onClose, deletable = false }: Entit
 function FieldControl({
   field,
   value,
+  altValue,
+  altFallback,
+  imageTitleValue,
   onSave,
+  onSaveAlt,
+  onSaveImageTitle,
   registerFlush,
 }: {
   field: FieldConfig
   value: unknown
+  /** مقدار Alt تصویر — فقط برای فیلدهای image */
+  altValue?: string
+  altFallback?: string
+  /** مقدار Title تصویر — فقط برای فیلدهای image */
+  imageTitleValue?: string
   onSave: (value: unknown) => Promise<boolean>
+  onSaveAlt?: (alt: string) => Promise<boolean>
+  onSaveImageTitle?: (title: string) => Promise<boolean>
   registerFlush?: (fn: () => void) => void
 }) {
   const [text, setText] = useState<string>(String(value ?? ''))
 
+  // همگام‌سازی مقدار محلی با داده‌ای که از بیرون می‌آید (بارگذاری/به‌روزرسانی خوش‌بینانه)
+  useEffect(() => {
+    setText(String(value ?? ''))
+  }, [value])
+
   const commitText = async () => {
     const next = field.type === 'number' ? Number(text) || 0 : text
     if (String(value ?? '') === String(next)) return
@@ -167,7 +211,61 @@ function FieldControl({
   }
 
   if (field.type === 'image') {
-    return <ImageField label={field.label} value={String(value ?? '')} onSave={(url) => onSave(url)} />
+    return (
+      <ImageField
+        label={field.label}
+        value={String(value ?? '')}
+        alt={altValue}
+        altFallback={altFallback}
+        title={imageTitleValue}
+        onSave={(url) => onSave(url)}
+        onSaveAlt={onSaveAlt}
+        onSaveTitle={onSaveImageTitle}
+      />
+    )
+  }
+
+  if (field.type === 'select') {
+    // مقدار نمایشی از وضعیت محلی می‌آید تا افزودن/حذف گزینه فوراً دیده شود
+    const selectProps = {
+      value: text,
+      options: field.options ?? [],
+      onChange: (next: string) => {
+        setText(next)
+        void onSave(next)
+      },
+    }
+    return (
+      <div>
+        <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+        {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+        <div className="mt-2">
+          {field.creatable ? (
+            <LuxeCreatableSelect {...selectProps} />
+          ) : (
+            <LuxeSelect {...selectProps} />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  if (field.type === 'date') {
+    return (
+      <div>
+        <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+        {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+        <div className="mt-2">
+          <JalaliDatePicker
+            value={String(value ?? '')}
+            onChange={(isoDate) => {
+              setText(isoDate)
+              void onSave(isoDate)
+            }}
+          />
+        </div>
+      </div>
+    )
   }
 
   if (field.type === 'wysiwyg') {
@@ -175,7 +273,11 @@ function FieldControl({
   }
 
   if (field.type === 'list') {
-    return <ListField field={field} value={value} onSave={onSave} />
+    return field.ui === 'tags' ? (
+      <TagsField field={field} value={value} onSave={onSave} />
+    ) : (
+      <ListField field={field} value={value} onSave={onSave} />
+    )
   }
 
   if (field.type === 'textarea') {
@@ -210,6 +312,34 @@ function FieldControl({
   )
 }
 
+/** فیلد هشتگ‌ها — react-select قابل ساخت (Creatable) با ذخیره فوری */
+function TagsField({
+  field,
+  value,
+  onSave,
+}: {
+  field: FieldConfig
+  value: unknown
+  onSave: (value: unknown) => Promise<boolean>
+}) {
+  const [tags, setTags] = useState<string[]>(Array.isArray(value) ? (value as string[]) : [])
+
+  const update = (next: string[]) => {
+    setTags(next)
+    void onSave(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      <div className="mt-2">
+        <LuxeTagsSelect value={tags} onChange={update} />
+      </div>
+    </div>
+  )
+}
+
 /** ویرایش آرایه خطی (پاراگراف‌ها، گالری، نکات) — هر تغییر ذخیره می‌شود */
 function ListField({
   field,
@@ -284,10 +414,9 @@ function WysiwygField({
   onSave: (value: unknown) => Promise<boolean>
   registerFlush?: (fn: () => void) => void
 }) {
-  const [doc, setDoc] = useState<Record<string, unknown>>(() =>
-    value && typeof value === 'object' && !Array.isArray(value)
-      ? (value as Record<string, unknown>)
-      : { type: 'doc', content: [{ type: 'paragraph' }] },
+  const [doc, setDoc] = useState<Record<string, unknown>>(
+    // بدنه ذخیره‌شده (سند جدید، رشته JSON یا پاراگراف‌های قدیمی) به سند قابل ویرایش تبدیل می‌شود
+    () => toArticleBodyDoc(value),
   )
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pending = useRef<Record<string, unknown> | null>(null)

frontend/src/admin/adminClient.ts

@@ -69,6 +69,11 @@ export const adminApi = {
   patch: <T = unknown>(resource: string, id: number, partial: Record<string, unknown>) =>
     authFetch<T>(`/api/admin/${resource}/${id}`, { method: 'PATCH', body: JSON.stringify(partial) }),
 
+  list: <T = unknown>(resource: string) => authFetch<T>(`/api/admin/${resource}`),
+
+  get: <T = unknown>(resource: string, id: number) =>
+    authFetch<T>(`/api/admin/${resource}/${id}`),
+
   create: <T = unknown>(resource: string, data: Record<string, unknown>) =>
     authFetch<T>(`/api/admin/${resource}`, { method: 'POST', body: JSON.stringify(data) }),
 
@@ -83,4 +88,10 @@ export const adminApi = {
     fd.append('file', file)
     return authFetch('/api/admin/upload', { method: 'POST', body: fd })
   },
+
+  changePassword: (currentPassword: string, newPassword: string) =>
+    authFetch<{ ok: boolean }>('/api/auth/change-password', {
+      method: 'POST',
+      body: JSON.stringify({ current_password: currentPassword, new_password: newPassword }),
+    }),
 }

frontend/src/admin/entities.ts

@@ -1,37 +1,56 @@
 import type { SiteData } from '../api'
+import { FEATURED_IMAGE_ALT_SUFFIX } from '../data/constants'
 
-export type FieldType = 'text' | 'textarea' | 'number' | 'image' | 'list' | 'wysiwyg'
+export type FieldType = 'text' | 'textarea' | 'number' | 'image' | 'list' | 'wysiwyg' | 'select' | 'date'
 
 export type FieldConfig = {
   name: string
   label: string
   type: FieldType
   hint?: string
+  /** فقط برای type === 'select' — گزینه‌های ثابت react-select */
+  options?: string[]
+  /** فقط برای type === 'select' — امکان ساخت گزینه جدید توسط کاربر */
+  creatable?: boolean
+  /** ویجت سفارشی نوع list — 'tags' یعنی react-select قابل ساخت (Creatable) */
+  ui?: 'lines' | 'tags'
+  /** پسوند پیشنهاد Alt تصویر — مثل «تصویر شاخص» در کنار عنوان رکورد */
+  altFallbackSuffix?: string
 }
 
 export type EntityConfig = {
-  /** مسیر منبع در پنل مدیریت، مثل services یا why-us */
   resource: string
-  /** کلید همان منبع در پاسخ GET /api/site */
   dataKey: string
   title: string
-  /** مجموعه یا رکورد یگانه */
   kind: 'collection' | 'singleton'
-  /** فیلدی که عنوان آیتم را نشان می‌دهد */
   titleKey: string
   fields: FieldConfig[]
-  /** مقادیر پیش‌فرض برای «افزودن» */
   defaults: Record<string, unknown>
 }
 
-const F = (name: string, label: string, type: FieldType = 'text', hint?: string): FieldConfig => ({
+const F = (
+  name: string,
+  label: string,
+  type: FieldType = 'text',
+  hint?: string,
+  extra?: Partial<FieldConfig>,
+): FieldConfig => ({
   name,
   label,
   type,
   hint,
+  ...extra,
 })
 
-/** پیکربندی همه منابع قابل ویرایش — هم مجموعه‌ها و هم رکوردهای یگانه */
+/** دسته‌بندی‌های استاندارد مقاله — با react-select در کشو و صفحه نوشتن نمایش داده می‌شوند */
+export const ARTICLE_CATEGORIES = [
+  'معماری و ساخت',
+  'سرمایه‌گذاری ملکی',
+  'طراحی داخلی',
+  'اخبار و اطلاعیه‌ها',
+  'یادداشت مدیریت',
+]
+
 export const ENTITIES: Record<string, EntityConfig> = {
   services: {
     resource: 'services', dataKey: 'services', title: 'خدمات', kind: 'collection',
@@ -57,14 +76,32 @@ export const ENTITIES: Record<string, EntityConfig> = {
     fields: [
       F('title', 'عنوان'),
       F('body', 'متن مقاله', 'wysiwyg'),
-      F('excerpt', 'چکیده', 'textarea'),
-      F('image', 'تصویر شاخص', 'image'),
-      F('category', 'دسته'),
-      F('date', 'تاریخ'),
-      F('read', 'زمان مطالعه'),
+      F('excerpt', 'چکیده (روی کارت مقاله)'),
+      F('meta_description', 'توضیحات سئو (Meta Description)', 'textarea', '۱۵۰ تا ۱۶۰ کاراکتر — زیر عنوان در نتایج گوگل نمایش داده می‌شود'),
+      F('image', 'تصویر شاخص', 'image', undefined, { altFallbackSuffix: FEATURED_IMAGE_ALT_SUFFIX }),
+      F('category', 'دسته‌بندی (Category)', 'select', 'می‌توانید دسته جدید هم بسازید', { options: ARTICLE_CATEGORIES, creatable: true }),
+      F('tags', 'هشتگ‌ها / برچسب‌ها', 'list', 'با Enter هر هشتگ جدید را اضافه کنید', { ui: 'tags' }),
+      F('author', 'نویسنده'),
+      F('date', 'تاریخ انتشار (شمسی)', 'date'),
+      F('read', 'زمان مطالعه (دقیقه)'),
       F('slug', 'نشانی (slug)'),
     ],
-    defaults: { title: 'مقاله جدید', slug: `article-${Date.now()}`, date: '', category: '', image: '', read: '', excerpt: '', body: { type: 'doc', content: [{ type: 'paragraph' }] } },
+    defaults: { 
+      title: 'مقاله جدید', 
+      slug: `article-${Date.now()}`, 
+      date: new Date().toISOString().split('T')[0], 
+      category: ARTICLE_CATEGORIES[0], 
+      tags: ['مدیریت پروژه', 'ساخت‌وساز'], 
+      image: '', 
+      image_alt: '',
+      image_title: '',
+      author: '',
+      meta_description: '',
+      read: '۵ دقیقه', 
+      excerpt: '', 
+      seo_keyphrase: '',
+      body: { type: 'doc', content: [{ type: 'paragraph' }] } 
+    },
   },
   testimonials: {
     resource: 'testimonials', dataKey: 'testimonials', title: 'نظرات مشتریان', kind: 'collection',
@@ -132,7 +169,6 @@ export const ENTITIES: Record<string, EntityConfig> = {
     fields: [F('label', 'عنوان'), F('href', 'مسیر (مثل /about)')],
     defaults: { label: 'آیتم جدید', href: '/' },
   },
-
   seo_meta: {
     resource: 'seo-meta', dataKey: 'seo_meta', title: 'سئوی صفحه', kind: 'collection',
     titleKey: 'page_key',
@@ -143,8 +179,6 @@ export const ENTITIES: Record<string, EntityConfig> = {
     ],
     defaults: { page_key: '', title: '', description: '' },
   },
-
-  // ---------- رکوردهای یگانه ----------
   brand: {
     resource: 'brand', dataKey: 'brand', title: 'برند و تماس', kind: 'singleton',
     titleKey: 'name',
@@ -197,7 +231,6 @@ export const ENTITIES: Record<string, EntityConfig> = {
   },
 }
 
-/** دسترسی به آرایه/شیء منبع از درخت داده سایت */
 export function getEntityData(data: SiteData, config: EntityConfig): Record<string, unknown> & { id: number }[] | (Record<string, unknown> & { id: number }) {
   return data[config.dataKey as keyof SiteData] as never
-}
+}

frontend/src/api.tsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useState } from 'rea
 import type { ReactNode } from 'react'
 import type { Article, Project, Service } from './data/site'
 import { API_URL } from './config'
+import { getToken } from './admin/adminClient'
 
 // انواع داده‌هایی که بک‌اند در GET /api/site برمی‌گرداند
 export type BrandInfo = {
@@ -183,7 +184,25 @@ export function SiteProvider({ children }: { children: ReactNode }) {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
         return res.json() as Promise<SiteData>
       })
-      .then((json) => {
+      .then(async (json) => {
+        if (cancelled) return
+        // برای ادمین واردشده، پیش‌نویس مقاله‌ها از انتهای مدیریتی خوانده و ادغام می‌شوند —
+        // بک‌اند در GET /api/site فقط مقاله‌های منتشرشده را برمی‌گرداند
+        if (getToken()) {
+          try {
+            const res = await fetch(`${API_URL}/api/admin/articles`, {
+              headers: { Authorization: `Bearer ${getToken()}` },
+            })
+            if (res.ok) {
+              const all = (await res.json()) as Article[]
+              const published = new Set(json.articles.map((a) => a.id))
+              const drafts = all.filter((a) => a.status === 'draft' && !published.has(a.id))
+              json.articles = [...json.articles, ...drafts]
+            }
+          } catch {
+            /* بدون پیش‌نویس‌ها ادامه بده */
+          }
+        }
         if (!cancelled) {
           if (json.brand && json.hero && json.footer && json.nav) setData(json)
           else setError(true)

frontend/src/components/ArticleCard.tsx

@@ -2,44 +2,50 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { ArrowLeftIcon, ClockIcon } from 'lucide-react'
 import type { Article } from '../data/site'
+import { formatJalali } from '../utils/date'
+import { toPersianDigits } from '../utils/digits'
 
 export function ArticleCard({ article }: { article: Article }) {
   return (
     <Link
       to={`/blog/${article.slug}`}
-      className="group flex h-full flex-col border border-ivory/10 bg-char transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-white/10 bg-char/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.18)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
       aria-label={`خواندن مقاله ${article.title}`}
     >
-      <div className="overflow-hidden">
+      <div className="relative overflow-hidden">
         <img
           src={article.image}
           alt={`تصویر مقاله ${article.title}`}
-          className="h-52 w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105 transform-gpu"
+          className="h-52 w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
         />
+        {/* برچسب دسته‌بندی کپسولی شیشه‌ای روی تصویر */}
+        <div className="absolute right-4 top-4 rounded-full border border-white/20 bg-ink/75 px-3.5 py-1 text-xs font-light text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)]">
+          {article.category}
+        </div>
       </div>
       
-      <div className="flex flex-1 flex-col p-8">
-        <p className="text-xs font-light text-copper">{article.category}</p>
-        
-        <h3 className="mt-4 text-lg font-bold leading-9 text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
+      <div className="flex flex-1 flex-col p-7">
+        <h3 className="text-lg font-bold leading-8 text-ivory transition-colors duration-300 group-hover:text-copper">
           {article.title}
         </h3>
         
-        <p className="mt-4 mb-8 text-sm font-light leading-[2.2rem] text-ivory/55">
+        <p className="mt-3 mb-8 text-sm font-light leading-7 text-ivory/60 line-clamp-3">
           {article.excerpt}
         </p>
         
-        <div className="mt-auto flex items-center justify-between border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
-          <span className="flex items-center gap-4">
-            <span>{article.date}</span>
+        <div className="mt-auto flex items-center justify-between border-t border-white/10 pt-5 text-xs font-light text-ivory/50">
+          <span className="flex items-center gap-3">
+            <span>{formatJalali(article.date)}</span>
             <span className="flex items-center gap-1.5">
-              <ClockIcon className="h-3.5 w-3.5" />
-              {article.read}
+              <ClockIcon className="h-3.5 w-3.5 text-copper/80" />
+              {toPersianDigits(article.read)}
             </span>
           </span>
-          <span className="flex items-center gap-2 text-copper">
+
+          {/* دکمه کپسولی ادامه مطلب با افکت شیشه‌ای */}
+          <span className="inline-flex items-center gap-2 rounded-full border border-copper/40 bg-copper/5 px-3.5 py-1.5 text-xs font-medium text-copper backdrop-blur-md shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_15px_rgba(197,143,92,0.5)]">
             ادامه مطلب
-            <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-300 ease-out group-hover:-translate-x-1.5" />
+            <ArrowLeftIcon className="h-3.5 w-3.5 transition-transform duration-300 group-hover:-translate-x-1" />
           </span>
         </div>
       </div>

frontend/src/components/ArticleMeta.tsx

@@ -0,0 +1,54 @@
+import { CalendarIcon, ClockIcon } from 'lucide-react'
+import type { Article } from '../data/site'
+import { JALALI_TIME_FORMATTER, formatJalali } from '../utils/date'
+import { toPersianDigits } from '../utils/digits'
+
+type ArticleMetaProps = {
+  article: Article
+  className?: string
+}
+
+/**
+ * سربرگ نویسنده/تاریخ مقاله — زیر تیتر اصلی نمایش داده می‌شود:
+ * آواتار حرف اول نویسنده، نام نویسنده، تاریخ جلالی و زمان مطالعه.
+ */
+export function ArticleMeta({ article, className = '' }: ArticleMetaProps) {
+  const rawDate = (article.date ?? '').trim()
+  const author = (article.author ?? '').trim() || 'گروه ساختمانی آرامش'
+  const initial = author.charAt(0)
+
+  // تاریخ ذخیره‌شده (میلادی) به شمسی تبدیل می‌شود؛ در نبود تاریخ، امروز با ساعت نمایش داده می‌شود
+  const todayLabel = `${formatJalali(new Date())} — ساعت ${JALALI_TIME_FORMATTER.format(new Date())}`
+  const dateLabel = formatJalali(rawDate, todayLabel)
+
+  return (
+    <div className={`flex flex-wrap items-center gap-x-6 gap-y-4 ${className}`}>
+      {/* آواتار و نام نویسنده */}
+      <span className="flex items-center gap-3">
+        <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-lg font-bold text-copper shadow-[0_0_20px_rgba(213,135,76,0.25),inset_0_1px_1px_rgba(255,255,255,0.2)]">
+          {initial}
+        </span>
+        <span className="flex flex-col">
+          <span className="text-sm font-bold text-ivory">{author}</span>
+          <span className="text-[11px] font-light text-ivory/45">نویسنده</span>
+        </span>
+      </span>
+
+      <span className="hidden h-9 w-px bg-ivory/10 sm:block" aria-hidden="true" />
+
+      {/* تاریخ جلالی */}
+      <span className="flex items-center gap-2 text-xs font-light text-ivory/60">
+        <CalendarIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
+        {dateLabel}
+      </span>
+
+      {/* زمان مطالعه — با ارقام فارسی */}
+      {article.read && (
+        <span className="flex items-center gap-2 text-xs font-light text-ivory/60">
+          <ClockIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
+          {toPersianDigits(article.read)}
+        </span>
+      )}
+    </div>
+  )
+}

frontend/src/components/Button.tsx

@@ -9,26 +9,33 @@ type BaseProps = {
   className?: string
 }
 
-const STYLES: Record<Variant, { base: string; fill: string; text: string }> = {
+// استایل‌های فوق‌لوکس شیشه‌ای (Glassmorphic) با رنگ‌های اختصاصی پروژه
+const STYLES: Record<Variant, { base: string; fill: string; text: string; glow: string }> = {
   copper: {
-    base: 'bg-copper text-char',
-    fill: 'bg-char',
-    text: 'group-hover:text-ivory',
+    // دکمه اصلی: شیشه دودی تیره با خط نوری مسی، هاله بازتاب و حاشیه کریستالی
+    base: 'bg-char/75 backdrop-blur-xl text-ivory border border-copper/50 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_8px_20px_rgba(0,0,0,0.4)]',
+    fill: 'bg-gradient-to-r from-copper via-[#d89f6e] to-copper',
+    text: 'group-hover:text-char font-semibold',
+    glow: 'hover:border-copper hover:shadow-[0_0_30px_rgba(197,143,92,0.5)]',
   },
   outline: {
-    base: 'border border-ivory/30 text-ivory',
-    fill: 'bg-copper',
-    text: 'group-hover:text-char',
+    // دکمه ثانویه: شیشه دودی کاملاً مات (Frosted Smoked Glass) با بازتاب لبه‌ها
+    base: 'bg-white/[0.04] backdrop-blur-xl border border-white/20 text-ivory shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_8px_20px_rgba(0,0,0,0.3)]',
+    fill: 'bg-white/10',
+    text: 'group-hover:text-copper',
+    glow: 'hover:border-copper/70 hover:bg-white/[0.08] hover:shadow-[0_0_25px_rgba(197,143,92,0.25)]',
   },
   dark: {
-    base: 'bg-char text-ivory',
+    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
     fill: 'bg-copper',
     text: 'group-hover:text-char',
+    glow: 'hover:border-copper/50 hover:shadow-[0_0_20px_rgba(197,143,92,0.3)]',
   },
   'dark-ivory': {
-    base: 'bg-char text-ivory',
+    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
     fill: 'bg-ivory',
     text: 'group-hover:text-char',
+    glow: 'hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]',
   },
 }
 
@@ -36,12 +43,18 @@ function Inner({ children, variant = 'copper' }: { children: React.ReactNode; va
   const style = STYLES[variant]
   return (
     <>
+      {/* خط انعکاس نوری شیشه در بالای دکمه */}
+      <span className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/20 to-transparent" />
+
+      {/* انیمیشن پر شدن موجی و نرم */}
       <span
         aria-hidden="true"
-        className={`absolute inset-0 translate-y-full transition-transform duration-[600ms] ease-lux group-hover:translate-y-0 ${style.fill}`}
+        className={`absolute inset-0 translate-y-full rounded-full transition-transform duration-500 ease-out group-hover:translate-y-0 ${style.fill}`}
       />
+
+      {/* متن و آیکون دکمه */}
       <span
-        className={`relative z-10 flex items-center justify-center gap-3 transition-colors duration-[600ms] ease-lux ${style.text}`}
+        className={`relative z-10 flex items-center justify-center gap-3 transition-colors duration-400 ease-out ${style.text}`}
       >
         {children}
       </span>
@@ -49,8 +62,9 @@ function Inner({ children, variant = 'copper' }: { children: React.ReactNode; va
   )
 }
 
+// بدنه اصلی دکمه: کپسول کامل (rounded-full)، کلیک نرم (active:scale-95) و انتقال شیشه‌ای
 const SHELL =
-  'group relative inline-flex items-center justify-center overflow-hidden px-8 py-4 text-sm font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-copper focus-visible:ring-offset-2 focus-visible:ring-offset-ink'
+  'group relative inline-flex items-center justify-center overflow-hidden rounded-full px-8 py-3.5 text-sm font-medium tracking-wide focus:outline-none focus-visible:ring-2 focus-visible:ring-copper focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:scale-[0.98] transition-all duration-400 ease-out cursor-pointer select-none'
 
 export function ButtonLink({
   to,
@@ -58,8 +72,9 @@ export function ButtonLink({
   variant = 'copper',
   className = '',
 }: BaseProps & { to: string }) {
+  const style = STYLES[variant]
   return (
-    <Link to={to} className={`${SHELL} ${STYLES[variant].base} ${className}`}>
+    <Link to={to} className={`${SHELL} ${style.base} ${style.glow} ${className}`}>
       <Inner variant={variant}>{children}</Inner>
     </Link>
   )
@@ -72,8 +87,9 @@ export function ButtonAnchor({
   className = '',
   ...rest
 }: BaseProps & { href: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const style = STYLES[variant]
   return (
-    <a href={href} className={`${SHELL} ${STYLES[variant].base} ${className}`} {...rest}>
+    <a href={href} className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
       <Inner variant={variant}>{children}</Inner>
     </a>
   )
@@ -85,8 +101,9 @@ export function Button({
   className = '',
   ...rest
 }: BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const style = STYLES[variant]
   return (
-    <button className={`${SHELL} ${STYLES[variant].base} ${className}`} {...rest}>
+    <button className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
       <Inner variant={variant}>{children}</Inner>
     </button>
   )

frontend/src/components/ContactSection.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { CheckCircle2Icon, MailIcon, MapPinIcon, PhoneIcon } from 'lucide-react'
+import { CheckCircle2Icon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react'
 import Swal from 'sweetalert2'
 import { Reveal } from './Reveal'
 import { Button } from './Button'
@@ -37,11 +37,11 @@ export function ContactSection() {
       confirmButtonText: 'متوجه شدم',
       buttonsStyling: false,
       customClass: {
-        container: 'backdrop-blur-[8px] bg-ink/60',
-        popup: 'font-pinar border border-ivory/10 rounded-none shadow-lift',
+        container: 'backdrop-blur-md bg-ink/70',
+        popup: 'font-pinar border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl bg-char/95',
         title: 'font-pinar font-bold text-lg text-ivory pt-2',
         htmlContainer: 'font-pinar font-light text-sm leading-8 text-ivory/70',
-        confirmButton: 'mt-6 bg-copper text-char font-bold px-10 py-3 transition-transform duration-300 ease-lux hover:scale-105',
+        confirmButton: 'mt-6 rounded-full bg-copper text-char font-bold px-10 py-3 transition-all duration-300 ease-lux hover:scale-105 hover:shadow-[0_0_20px_rgba(197,143,92,0.5)]',
       },
       showClass: {
         popup: 'swal2-show',
@@ -50,7 +50,7 @@ export function ContactSection() {
       hideClass: {
         popup: 'swal2-hide',
         backdrop: 'swal2-backdrop-hide',
-      }
+      },
     })
   }
 
@@ -104,19 +104,21 @@ export function ContactSection() {
         aria-hidden="true"
         className="absolute inset-0 h-full w-full object-cover"
       />
+      <div className="absolute inset-0 bg-ink/75 backdrop-blur-[2px]" />
 
       <div className="relative mx-auto max-w-site px-6 lg:px-10">
-        <div className="mx-auto grid max-w-6xl items-stretch gap-6 lg:grid-cols-12">
+        <div className="mx-auto grid max-w-6xl items-stretch gap-8 lg:grid-cols-12">
 
-          <div className="border border-ivory/20 bg-char/45 p-8 backdrop-blur-[8px] md:p-10 lg:col-span-5">
+          {/* باکس اطلاعات تماس */}
+          <div className="rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-5">
             <Reveal>
-              <p className="text-sm font-light text-copper">
+              <p className="text-sm font-light tracking-wide text-copper">
                 <InlineEdit value={content.label} onSave={(v) => saveContent('label', v)} />
               </p>
-              <h2 id="contact-title" className="mt-5 text-section font-bold text-ivory">
+              <h2 id="contact-title" className="mt-4 text-section font-bold text-ivory">
                 <InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
               </h2>
-              <p className="mt-6 text-base font-light leading-9 text-ivory/75">
+              <p className="mt-5 text-base font-light leading-9 text-ivory/75">
                 <InlineEdit multiline value={content.lead} onSave={(v) => saveContent('lead', v)} />
               </p>
             </Reveal>
@@ -124,7 +126,9 @@ export function ContactSection() {
             <Reveal delay={0.1}>
               <ul className="mt-10 space-y-6">
                 <li className="flex items-start gap-4">
-                  <MapPinIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
+                    <MapPinIcon className="h-5 w-5" />
+                  </div>
                   <div>
                     <p className="text-sm font-bold text-ivory">
                       <InlineEdit value={content.address_label} onSave={(v) => saveContent('address_label', v)} />
@@ -134,8 +138,11 @@ export function ContactSection() {
                     </p>
                   </div>
                 </li>
+
                 <li className="flex items-start gap-4">
-                  <PhoneIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
+                    <PhoneIcon className="h-5 w-5" />
+                  </div>
                   <div>
                     <p className="text-sm font-bold text-ivory">
                       <InlineEdit value={content.phone_label} onSave={(v) => saveContent('phone_label', v)} />
@@ -149,8 +156,11 @@ export function ContactSection() {
                     </a>
                   </div>
                 </li>
+
                 <li className="flex items-start gap-4">
-                  <MailIcon className="mt-1 h-5 w-5 shrink-0 text-copper" />
+                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
+                    <MailIcon className="h-5 w-5" />
+                  </div>
                   <div>
                     <p className="text-sm font-bold text-ivory">
                       <InlineEdit value={content.email_label} onSave={(v) => saveContent('email_label', v)} />
@@ -168,11 +178,14 @@ export function ContactSection() {
             </Reveal>
           </div>
 
-          <div className="relative border border-ivory/20 bg-char/45 p-8 backdrop-blur-[9px] md:p-10 lg:col-span-7">
+          {/* باکس فرم ارسال درخواست */}
+          <div className="relative rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-7">
             <SingletonPill resource="contact_section" label="ویرایش برچسب‌ها و متن‌های فرم" className="absolute left-4 top-4" />
             {sent ? (
               <div className="flex h-full flex-col items-center justify-center py-14 text-center">
-                <CheckCircle2Icon className="h-12 w-12 text-copper" />
+                <div className="flex h-16 w-16 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-copper shadow-[0_0_30px_rgba(197,143,92,0.4)]">
+                  <CheckCircle2Icon className="h-8 w-8" />
+                </div>
                 <h3 className="mt-6 text-xl font-bold text-ivory">
                   <InlineEdit value={content.success_title} onSave={(v) => saveContent('success_title', v)} />
                 </h3>
@@ -194,7 +207,7 @@ export function ContactSection() {
             ) : (
               <form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
                 <div>
-                  <label htmlFor="contact-name" className="block text-sm font-bold text-ivory/90">
+                  <label htmlFor="contact-name" className="block text-sm font-medium text-ivory/90">
                     <InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
                   </label>
                   <input
@@ -203,12 +216,12 @@ export function ContactSection() {
                     value={form.name}
                     onChange={(e) => setForm({ ...form, name: e.target.value })}
                     placeholder={content.name_placeholder}
-                    className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
+                    className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                   />
                 </div>
 
                 <div>
-                  <label htmlFor="contact-phone" className="block text-sm font-bold text-ivory/90">
+                  <label htmlFor="contact-phone" className="block text-sm font-medium text-ivory/90">
                     <InlineEdit value={content.phone_field_label} onSave={(v) => saveContent('phone_field_label', v)} /> <span className="text-copper">*</span>
                   </label>
                   <input
@@ -219,28 +232,38 @@ export function ContactSection() {
                     value={form.phone}
                     onChange={(e) => setForm({ ...form, phone: e.target.value })}
                     placeholder={content.phone_placeholder}
-                    className="mt-3 w-full border border-ivory/20 bg-ink/45 px-5 py-4 text-right text-sm font-light text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
+                    className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-right text-sm font-light text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                   />
                 </div>
 
                 <div className="md:col-span-2">
-                  <label htmlFor="contact-note" className="block text-sm font-bold text-ivory/90">
+                  <label htmlFor="contact-note" className="block text-sm font-medium text-ivory/90">
                     <InlineEdit value={content.note_label} onSave={(v) => saveContent('note_label', v)} /> <span className="font-light text-ivory/50">{content.note_optional_label}</span>
                   </label>
                   <textarea
                     id="contact-note"
-                    rows={6}
+                    rows={5}
                     value={form.note}
                     onChange={(e) => setForm({ ...form, note: e.target.value })}
                     placeholder={content.note_placeholder}
-                    className="mt-3 w-full resize-none border border-ivory/20 bg-ink/45 px-5 py-4 text-sm font-light leading-8 text-ivory placeholder:text-ivory/40 transition-colors duration-200 ease-lux focus:border-copper focus:outline-none"
+                    className="mt-3 w-full resize-none rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light leading-8 text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                   />
                 </div>
 
-                <div className="md:col-span-2">
-                  <Button type="submit" variant="copper" className="w-full md:w-auto md:px-12" disabled={sending}>
-                    {sending ? content.sending_label : (
-                      <InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
+                <div className="md:col-span-2 flex justify-start">
+                  <Button
+                    type="submit"
+                    variant="copper"
+                    className="w-full md:w-auto md:px-12 flex items-center justify-center gap-3"
+                    disabled={sending}
+                  >
+                    {sending ? (
+                      content.sending_label
+                    ) : (
+                      <>
+                        <InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
+                        <SendIcon className="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-1" />
+                      </>
                     )}
                   </Button>
                 </div>
@@ -251,4 +274,4 @@ export function ContactSection() {
       </div>
     </section>
   )
-}
+}

frontend/src/components/FloatingContact.tsx

@@ -4,14 +4,21 @@ import { useSite } from '../api';
 
 export function FloatingContact() {
   const { brand } = useSite();
+
   return (
     <a
       href={brand.phone_href}
       aria-label="تماس تلفنی با گروه ساختمانی آرامش"
-      className="group fixed bottom-8 left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-copper text-char shadow-[0_10px_30px_rgba(0,0,0,0.45)] transition-transform duration-200 ease-lux hover:scale-105">
-      
-      <span className="absolute inset-0 rounded-full border border-copper/50 opacity-0 transition-transform duration-300 ease-lux group-hover:scale-125 group-hover:opacity-100" />
-      <PhoneIcon className="h-5 w-5" />
-    </a>);
+      className="group fixed bottom-8 left-8 z-40 flex h-14 w-14 items-center justify-center rounded-full border border-copper/50 bg-char/80 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.1),0_12px_35px_rgba(0,0,0,0.5),0_0_20px_rgba(197,143,92,0.25)] transition-all duration-500 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_35px_rgba(197,143,92,0.7)] active:scale-95"
+    >
+      {/* پالس هاله نوری در پس‌زمینه مانند رادار */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 rounded-full border border-copper/60 animate-ping opacity-30"
+      />
 
+      {/* آیکون تلفن با انیمیشن چرخش ظریف در زمان هاور */}
+      <PhoneIcon className="relative z-10 h-6 w-6 transition-transform duration-300 ease-lux group-hover:rotate-12" />
+    </a>
+  );
 }

frontend/src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
+import { ArrowUpIcon, InstagramIcon, LinkedinIcon, MailIcon, MapPinIcon, PhoneIcon, SendIcon } from 'lucide-react';
 import { useSite } from '../api';
 import { useFieldSaver } from '../admin/AdminContext';
 import { InlineEdit } from './admin/InlineEdit';
@@ -27,8 +27,12 @@ export function Footer() {
       if (item) Object.assign(item, changes);
     });
 
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
-    <footer className="border-t border-ivory/10 bg-char">
+    <footer className="relative border-t border-white/10 bg-char/95 backdrop-blur-2xl">
       <div className="mx-auto max-w-site px-6 py-16 lg:px-10">
         <div className="grid gap-12 lg:grid-cols-12">
           <div className="lg:col-span-4">
@@ -36,10 +40,11 @@ export function Footer() {
               <img src={brand.logo} alt={brand.name} className="h-20 w-auto object-contain" />
               <SingletonPill resource="brand" label="ویرایش برند، لوگو و تماس" className="absolute -left-10 top-1/2 -translate-y-1/2" />
             </div>
-            <p className="mt-6 max-w-sm text-sm font-light leading-8 text-ivory/55">
+            <p className="mt-6 max-w-sm text-sm font-light leading-8 text-ivory/60">
               <InlineEdit multiline value={footer.about_text} onSave={(v) => saveFooter('about_text', v)} />
             </p>
-            <div className="mt-6 flex gap-3">
+            {/* آیکون‌های شبکه‌های اجتماعی: گوی‌های شیشه‌ای شناور */}
+            <div className="mt-8 flex items-center gap-3">
               {footer.socials.map(({ label, href, icon }) => {
                 const Icon = SOCIAL_ICONS[icon] ?? InstagramIcon;
                 return (
@@ -47,9 +52,9 @@ export function Footer() {
                     key={label}
                     href={href}
                     aria-label={label}
-                    className="flex h-10 w-10 items-center justify-center border border-ivory/15 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-
-                    <Icon className="h-4 w-4" />
+                    className="group flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] text-ivory/70 backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_4px_12px_rgba(0,0,0,0.3)] transition-all duration-300 ease-lux hover:-translate-y-1 hover:border-copper/70 hover:bg-copper/10 hover:text-copper hover:shadow-[0_0_20px_rgba(197,143,92,0.4)] active:scale-95"
+                  >
+                    <Icon className="h-4 w-4 transition-transform duration-300 group-hover:scale-110" />
                   </a>
                 );
               })}
@@ -61,21 +66,21 @@ export function Footer() {
               <InlineEdit value={footer.pages_heading} onSave={(v) => saveFooter('pages_heading', v)} />
             </h3>
             <ul className="mt-5 space-y-3">
-              {nav.map((item) =>
-              <EditableItem key={item.id} resource="nav" item={item}>
-                <li>
+              {nav.map((item) => (
+                <EditableItem key={item.id} resource="nav" item={item}>
+                  <li>
                     <Link
-                  to={item.href}
-                  className="text-sm font-light text-ivory/60 transition-colors duration-200 ease-lux hover:text-copper">
-
-                    <InlineEdit
-                      value={item.label}
-                      onSave={(v) => saveNav(item.id, { label: v })}
-                    />
-                  </Link>
-                </li>
-              </EditableItem>
-              )}
+                      to={item.href}
+                      className="inline-block text-sm font-light text-ivory/60 transition-colors duration-200 ease-lux hover:text-copper"
+                    >
+                      <InlineEdit
+                        value={item.label}
+                        onSave={(v) => saveNav(item.id, { label: v })}
+                      />
+                    </Link>
+                  </li>
+                </EditableItem>
+              ))}
             </ul>
             <div className="mt-4">
               <AddItemButton resource="nav" />
@@ -87,11 +92,11 @@ export function Footer() {
               <InlineEdit value={footer.services_heading} onSave={(v) => saveFooter('services_heading', v)} />
             </h3>
             <ul className="mt-5 space-y-3">
-              {services.map((service) =>
-              <li key={service.id} className="text-sm font-light text-ivory/60">
+              {services.map((service) => (
+                <li key={service.id} className="text-sm font-light text-ivory/60">
                   {service.title}
                 </li>
-              )}
+              ))}
             </ul>
           </div>
 
@@ -120,15 +125,28 @@ export function Footer() {
           </div>
         </div>
 
-        <div className="mt-14 flex flex-col items-center justify-between gap-4 border-t border-ivory/10 pt-6 text-xs font-light text-ivory/40 md:flex-row">
+        {/* خط پایانی به همراه دکمه کپسولی بازگشت به بالا */}
+        <div className="mt-14 flex flex-col items-center justify-between gap-6 border-t border-white/10 pt-6 text-xs font-light text-ivory/40 md:flex-row">
           <p>
             <InlineEdit value={footer.copyright} onSave={(v) => saveFooter('copyright', v)} />
           </p>
+
+          <button
+            type="button"
+            onClick={scrollToTop}
+            className="group flex items-center gap-2 rounded-full border border-white/15 bg-white/[0.04] px-4 py-2 text-xs font-medium text-ivory/70 backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux hover:border-copper hover:bg-copper/10 hover:text-copper hover:shadow-[0_0_20px_rgba(197,143,92,0.3)] active:scale-95 cursor-pointer"
+          >
+            <span>بازگشت به بالا</span>
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-white/10 text-copper transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:bg-copper group-hover:text-char">
+              <ArrowUpIcon className="h-3 w-3" />
+            </span>
+          </button>
+
           <p>
             <InlineEdit value={footer.tagline} onSave={(v) => saveFooter('tagline', v)} />
           </p>
         </div>
       </div>
-    </footer>);
-
-}
+    </footer>
+  );
+}

frontend/src/components/Header.tsx

@@ -31,27 +31,27 @@ export function Header() {
 
   return (
     <header
-      className={`fixed inset-x-0 top-0 z-50 transition-[background-color,border-color,backdrop-filter] duration-300 ease-lux ${
+      className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ease-lux ${
         scrolled
-          ? "border-b border-ivory/10 bg-ink/90 backdrop-blur-md"
+          ? "border-b border-white/10 bg-ink/80 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.5)]"
           : "border-b border-transparent bg-transparent"
       }`}
     >
       <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
         <div className="relative flex items-center">
-        <Link
-          to="/"
-          className="flex items-center gap-3"
-          aria-label={brand.name}
-        >
-          <img
-            src={brand.logo}
-            alt={brand.name}
-            className={`w-auto object-contain transition-[height] duration-300 ease-lux ${
-              scrolled ? "h-14" : "h-20"
-            }`}
-          />
-        </Link>
+          <Link
+            to="/"
+            className="flex items-center gap-3"
+            aria-label={brand.name}
+          >
+            <img
+              src={brand.logo}
+              alt={brand.name}
+              className={`w-auto object-contain transition-[height] duration-300 ease-lux ${
+                scrolled ? "h-14" : "h-20"
+              }`}
+            />
+          </Link>
           <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute -left-10 top-1/2 -translate-y-1/2" />
         </div>
 
@@ -59,55 +59,54 @@ export function Header() {
           <ul className="flex items-center gap-7">
             {nav.map((item) => (
               <EditableItem key={item.id} resource="nav" item={item}>
-              <li>
-                <NavLink
-                  to={item.href}
-                  className={({ isActive }) =>
-                    `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
-                      isActive ? "text-copper" : "text-ivory/80"
-                    }`
-                  }
-                >
-                  {({ isActive }) => (
-                    <>
-                      <InlineEdit
-                        value={item.label}
-                        onSave={(v) => saveNav(item.id, { label: v })}
-                      />
-                      <span
-                        className={`absolute -bottom-0.5 left-0 right-0 h-px w-full origin-center bg-copper transition-transform duration-300 ease-lux ${
-                          isActive
-                            ? "scale-x-100"
-                            : "scale-x-0 group-hover:scale-x-100"
-                        }`}
-                      />
-                    </>
-                  )}
-                </NavLink>
-              </li>
+                <li>
+                  <NavLink
+                    to={item.href}
+                    className={({ isActive }) =>
+                      `group relative py-2 text-[0.95rem] font-light transition-colors duration-200 ease-lux hover:text-copper [text-shadow:_0_2px_4px_rgba(0,0,0,0.6)] ${
+                        isActive ? "text-copper font-normal" : "text-ivory/80"
+                      }`
+                    }
+                  >
+                    {({ isActive }) => (
+                      <>
+                        <InlineEdit
+                          value={item.label}
+                          onSave={(v) => saveNav(item.id, { label: v })}
+                        />
+                        <span
+                          className={`absolute -bottom-0.5 left-0 right-0 h-0.5 w-full origin-center rounded-full bg-copper transition-transform duration-300 ease-lux ${
+                            isActive
+                              ? "scale-x-100 shadow-[0_0_8px_rgba(197,143,92,0.8)]"
+                              : "scale-x-0 group-hover:scale-x-100"
+                          }`}
+                        />
+                      </>
+                    )}
+                  </NavLink>
+                </li>
               </EditableItem>
             ))}
           </ul>
         </nav>
 
         <div className="flex items-center gap-3">
+          {/* دکمه تماس کپسولی شیشه‌ای لوکس */}
           <a
             href={brand.phone_href}
-            className="group relative hidden items-center gap-2 overflow-hidden border border-copper/50 px-5 py-2.5 text-sm font-medium text-copper [text-shadow:_0_1px_2px_rgba(0,0,0,0.5)] lg:flex"
+            className="group relative hidden items-center gap-3 rounded-full border border-copper/40 bg-white/[0.04] px-5 py-2 text-sm font-medium text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_20px_rgba(0,0,0,0.3)] transition-all duration-300 ease-lux hover:border-copper hover:bg-copper/10 hover:shadow-[0_0_25px_rgba(197,143,92,0.35)] active:scale-95 lg:flex"
           >
-            <span
-              aria-hidden="true"
-              className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0"
-            />
-            <span className="relative z-10 flex items-center gap-2 transition-colors duration-300 ease-lux group-hover:text-char">
-              <PhoneIcon className="h-4 w-4" />
-              <span dir="ltr">{brand.phone}</span>
+            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-copper/20 text-copper transition-all duration-300 group-hover:bg-copper group-hover:text-char">
+              <PhoneIcon className="h-3.5 w-3.5 transition-transform duration-300 group-hover:rotate-12" />
             </span>
+            <span dir="ltr" className="tracking-wide">{brand.phone}</span>
           </a>
+
+          {/* دکمه منوی موبایل دایره‌ای شیشه‌ای */}
           <button
             type="button"
             onClick={() => setOpen((v) => !v)}
-            className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory transition-colors duration-200 ease-lux hover:border-copper hover:text-copper xl:hidden"
+            className="flex h-11 w-11 items-center justify-center rounded-full border border-white/15 bg-white/5 text-ivory backdrop-blur-lg shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] transition-all duration-300 ease-lux hover:border-copper/60 hover:bg-white/10 hover:text-copper active:scale-95 xl:hidden"
             aria-label={open ? "بستن منو" : "باز کردن منو"}
             aria-expanded={open}
           >
@@ -123,26 +122,26 @@ export function Header() {
       {open && (
         <nav
           aria-label="ناوبری موبایل"
-          className="border-t border-ivory/10 bg-ink/98 px-6 py-4 xl:hidden"
+          className="border-t border-white/10 bg-ink/95 backdrop-blur-2xl px-6 py-4 xl:hidden shadow-2xl"
         >
           <ul className="grid gap-1">
             {nav.map((item) => (
               <EditableItem key={item.id} resource="nav" item={item}>
-              <li>
-                <NavLink
-                  to={item.href}
-                  className={({ isActive }) =>
-                    `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
-                      isActive ? "text-copper" : "text-ivory/80"
-                    }`
-                  }
-                >
-                  <InlineEdit
-                    value={item.label}
-                    onSave={(v) => saveNav(item.id, { label: v })}
-                  />
-                </NavLink>
-              </li>
+                <li>
+                  <NavLink
+                    to={item.href}
+                    className={({ isActive }) =>
+                      `block border-b border-ivory/5 py-3 text-base font-light transition-colors duration-200 ease-lux ${
+                        isActive ? "text-copper" : "text-ivory/80"
+                      }`
+                    }
+                  >
+                    <InlineEdit
+                      value={item.label}
+                      onSave={(v) => saveNav(item.id, { label: v })}
+                    />
+                  </NavLink>
+                </li>
               </EditableItem>
             ))}
           </ul>
@@ -150,4 +149,4 @@ export function Header() {
       )}
     </header>
   );
-}
+}

frontend/src/components/PageHero.tsx

@@ -78,6 +78,8 @@ export function PageHero({ pageKey }: PageHeroProps) {
             resource="seo-meta"
             label="عنوان و توضیح سئوی این صفحه"
             select={(d) => d.seo_meta.find((s) => s.page_key === pageKey)}
+            // اگر ردیف سئوی این صفحه هنوز ساخته نشده باشد، همین‌جا ساخته می‌شود
+            createDefaults={() => ({ page_key: pageKey, title: '', description: '' })}
           />
           <ImageField label="تصویر پس‌زمینه" value={hero.image} onSave={(url) => saveField('image', url)} />
         </div>

frontend/src/components/ProjectCard.tsx

@@ -1,49 +1,55 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { ArrowLeftIcon } from 'lucide-react'
 import { useStatusLabel } from '../api'
 
 export function ProjectCard({ project }: any) {
   const isOngoing = project.status === 'progress'
-
   const statusText = useStatusLabel(project.status)
-  
+
   const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
   const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'
 
   return (
-    <article className="group flex h-full flex-col overflow-hidden border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
+    <article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-white/10 bg-char/85 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.2)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
       <Link to={`/projects/${project.slug || '#'}`} className="flex h-full flex-col focus:outline-none">
         
+        {/* کادر تصویر به همراه نشانگر وضعیت کپسولی و گوی دکمه شیشه‌ای */}
         <div className="relative aspect-[4/3] w-full overflow-hidden">
           <img
             src={project.image}
             alt={project.title}
             className="h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
           />
-          <div className={`absolute right-4 top-4 flex items-center gap-2 bg-ink/85 px-4 py-2 text-xs font-light backdrop-blur-md ${textColor}`}>
-            <span className={`h-1.5 w-1.5 rounded-full ${dotColor}`} />
+
+          {/* نشانگر وضعیت کپسولی شیشه‌ای */}
+          <div className={`absolute right-4 top-4 flex items-center gap-2 rounded-full border border-white/15 bg-ink/75 px-4 py-1.5 text-xs font-light backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)] ${textColor}`}>
+            <span className={`h-2 w-2 rounded-full ${dotColor} ${isOngoing ? 'shadow-[0_0_10px_rgba(197,143,92,0.9)]' : ''}`} />
             {statusText}
           </div>
+
+          {/* گوی دکمه شیشه‌ای شناور برای ورود به پروژه */}
+          <div className="absolute bottom-4 left-4 flex h-11 w-11 items-center justify-center rounded-full border border-white/25 bg-ink/65 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_6px_20px_rgba(0,0,0,0.4)] transition-all duration-400 ease-lux group-hover:scale-110 group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_25px_rgba(197,143,92,0.6)]">
+            <ArrowLeftIcon className="h-5 w-5 transition-transform duration-300 group-hover:-translate-x-0.5" />
+          </div>
         </div>
 
-        <div className="flex flex-1 flex-col p-8">
-          
+        <div className="flex flex-1 flex-col p-7">
           <div className="text-center">
-            <h3 className="font-pinar text-xl font-bold text-ivory">
+            <h3 className="font-pinar text-xl font-bold text-ivory transition-colors duration-300 group-hover:text-copper">
               {project.title}
             </h3>
-            <p className="mt-7 text-sm font-light text-ivory/60">
+            <p className="mt-4 text-sm font-light text-ivory/60">
               {project.location}
             </p>
           </div>
 
-          <div className="my-7 h-px w-full bg-ivory/10" />
+          <div className="my-6 h-px w-full bg-white/10" />
 
           <div className="mt-auto flex items-center justify-between text-sm font-light text-ivory/60">
             <span>سال: {project.year}</span>
             <span>{project.area} متر مربع</span>
           </div>
-
         </div>
       </Link>
     </article>

frontend/src/components/TableOfContents.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react'
+import type { MouseEvent } from 'react'
+import { ListIcon } from 'lucide-react'
+import { slugifyFa, uniqueSlug } from '../utils/slug'
+
+export type TocItem = { id: string; text: string; level: 2 | 3 }
+
+/**
+ * متن یک تیتر از HTML — همه گره‌های تودرتو پیمایش می‌شوند و <br> به فاصله تبدیل
+ * می‌شود تا تیترهای چندخطی یا شامل مارک (مثل متن انگلیسی) کامل خوانده شوند.
+ */
+function headingText(element: Element): string {
+  const parts: string[] = []
+
+  element.childNodes.forEach((node) => {
+    if (node.nodeType === Node.TEXT_NODE) parts.push(node.textContent ?? '')
+    else if (node.nodeType === Node.ELEMENT_NODE) {
+      const child = node as Element
+      parts.push(child.tagName === 'BR' ? ' ' : headingText(child))
+    }
+  })
+
+  return parts.join('')
+}
+
+/**
+ * استخراج فهرست مطالب از HTML ویرایشگر — همه تیترهای H2 و H3 در هر عمقی از سند
+ * (حتی داخل نقل‌قول) شناسه لنگر می‌گیرند؛ متن فارسی در شناسه حفظ می‌شود و تیترهای
+ * تکراری پسوند عددی می‌گیرند. HTML برگشتی همان است که باید رندر شود.
+ */
+export function extractToc(
+  html: string,
+  transform?: (root: HTMLElement) => void,
+): { items: TocItem[]; html: string } {
+  if (!html || typeof window === 'undefined') return { items: [], html }
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  const used = new Map<string, number>()
+  const items: TocItem[] = []
+
+  doc.body.querySelectorAll('h2, h3').forEach((element, index) => {
+    const text = headingText(element).replace(/\s+/g, ' ').trim()
+    if (!text) return
+    // تیتر بدون حرف و رقم (فقط نشانه) شناسه ترتیبی می‌گیرد تا لنگرش بی‌نام نماند
+    const id = uniqueSlug(slugifyFa(text) || `heading-${index + 1}`, used)
+    element.setAttribute('id', id)
+    items.push({ id, text, level: element.tagName === 'H3' ? 3 : 2 })
+  })
+
+  // تبدیل اختیاری (بسته‌بندی متن لاتین/فارسی برای اندازه دوزبانه) روی همان DOM اجرا می‌شود
+  transform?.(doc.body)
+
+  return { items, html: doc.body.innerHTML }
+}
+
+type TableOfContentsProps = {
+  items: TocItem[]
+  title?: string
+  className?: string
+}
+
+/**
+ * فهرست مطالب کلیک‌پذیر با هایلایت خودکار تیتر فعال (IntersectionObserver).
+ * همه اندازه‌ها و ترازبندی‌ها منطقی‌اند (start/end) تا در چیدمان راست‌به‌چپ و
+ * چپ‌به‌راست — بر اساس جهت مقاله — درست بنشیند.
+ */
+export function TableOfContents({ items, title = 'فهرست مطالب', className = '' }: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState<string>(items[0]?.id ?? '')
+
+  useEffect(() => {
+    setActiveId(items[0]?.id ?? '')
+  }, [items])
+
+  useEffect(() => {
+    if (!items.length || typeof IntersectionObserver === 'undefined') return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((entry) => entry.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
+        const first = visible[0]?.target.id
+        if (first) setActiveId(first)
+      },
+      { rootMargin: '-15% 0px -70% 0px', threshold: [0, 1] },
+    )
+    items.forEach((item) => {
+      const el = document.getElementById(item.id)
+      if (el) observer.observe(el)
+    })
+    return () => observer.disconnect()
+  }, [items])
+
+  if (items.length === 0) return null
+
+  const go = (event: MouseEvent<HTMLButtonElement>, id: string) => {
+    event.preventDefault()
+    const el = document.getElementById(id)
+    if (!el) return
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    window.history.replaceState(null, '', `#${id}`)
+  }
+
+  return (
+    <nav
+      aria-label="فهرست مطالب"
+      className={`rounded-2xl border border-white/10 bg-char/60 p-6 backdrop-blur-xl shadow-[0_20px_50px_rgba(0,0,0,0.35),inset_0_1px_1px_rgba(255,255,255,0.08)] ${className}`}
+    >
+      <p className="flex items-center gap-2 text-sm font-bold text-copper">
+        <ListIcon className="h-4 w-4" aria-hidden="true" />
+        {title}
+      </p>
+      <div className="mt-5 h-px w-12 bg-copper/50" aria-hidden="true" />
+      {/* ارتفاع فهرست به ارتفاع در دسترس صفحه (زیر نوار چسبان) محدود می‌شود تا بریده نشود */}
+      <ul className="mt-4 max-h-[60vh] space-y-0.5 overflow-y-auto border-s border-ivory/10 ps-3 lg:max-h-[calc(100vh_-_15rem)]">
+        {items.map((item) => {
+          const isActive = item.id === activeId
+          return (
+            <li key={item.id}>
+              <button
+                type="button"
+                onClick={(event) => go(event, item.id)}
+                aria-current={isActive ? 'location' : undefined}
+                className={`block w-full text-start text-sm font-light leading-8 transition-colors duration-200 ease-lux ${
+                  item.level === 3 ? 'ps-4 text-[13px]' : ''
+                } ${
+                  isActive
+                    ? 'font-normal text-copper'
+                    : 'text-ivory/60 hover:text-copper'
+                }`}
+              >
+                {item.text}
+              </button>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

frontend/src/components/admin/ArticleEditor.tsx

@@ -1,47 +1,107 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
+import { Mark, mergeAttributes } from '@tiptap/core'
 import {
+  AlignLeftIcon,
+  AlignRightIcon,
   BoldIcon,
-  ItalicIcon,
+  Heading1Icon,
   Heading2Icon,
   Heading3Icon,
   ImagePlusIcon,
+  ItalicIcon,
   Link2Icon,
   ListIcon,
   ListOrderedIcon,
+  Loader2Icon,
+  PilcrowIcon,
   QuoteIcon,
   Redo2Icon,
   StrikethroughIcon,
   UnderlineIcon,
   Undo2Icon,
-  Loader2Icon,
 } from 'lucide-react'
-import Swal from 'sweetalert2'
 import { useAdmin } from '../../admin/AdminContext'
 import { adminApi } from '../../admin/adminClient'
+import { DEFAULT_IMAGE_ALT } from '../../data/constants'
+import { buildLinkRel, isAllowedHref, isUrlLike, normalizeHref, parseLinkRel } from '../../utils/link'
+import { ArticleImage } from './ArticleImage'
+import { BidiTypography, bidiPluginKey } from './BidiTypography'
+import { EnglishText } from './EnglishText'
+import { LinkModal } from './LinkModal'
+import { applyBlockFormat, handleHeadingEnter } from './blockFormat'
+import type { LinkModalValue } from './LinkModal'
+
+/**
+ * مارک‌های قدیمی (سایز ۱۲ و متن انگلیسی) — کنترل آن‌ها از نوار ابزار برداشته شده و
+ * فقط برای اینکه محتوای قبلی از دست نرود در شِما نگه داشته شده‌اند.
+ */
+const LegacySmallSizeMark = Mark.create({
+  name: 'smallSize',
+  parseHTML() {
+    return [{ tag: 'span[data-small]' }]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes, { 'data-small': 'true' }), 0]
+  },
+})
 
 /** اکستنشن‌های مشترک ویرایشگر و رندر مقاله — هر دو باید یکسان باشند */
 export const ARTICLE_EXTENSIONS = [
   StarterKit.configure({
     link: false,
-    heading: { levels: [2, 3] },
+    heading: { levels: [1, 2, 3] },
   }),
-  Image.configure({ allowBase64: false }),
+  ArticleImage.configure({ allowBase64: false }),
   Link.configure({
     openOnClick: false,
     HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
-    isAllowedUri: (uri: string) => /^(https?:\/\/|\/|#|mailto:|tel:)/i.test(uri),
+    isAllowedUri: (uri: string) => isAllowedHref(uri),
   }),
+  LegacySmallSizeMark,
+  EnglishText,
+  BidiTypography,
 ]
 
 type ArticleEditorProps = {
   doc: Record<string, unknown>
   onChange: (json: Record<string, unknown>) => void
+  /**
+   * شناسه محتوا — با هر تغییر آن، بدنه ویرایشگر از `doc` جاری دوباره بارگذاری می‌شود
+   * (مثلاً وقتی مقاله از سرور می‌رسد). بدون این prop محتوا فقط یک‌بار مقداردهی می‌شود.
+   */
+  contentKey?: string | number
 }
 
+/** نمونه ویرایشگر TipTap — همان چیزی که useEditor برمی‌گرداند */
+type EditorInstance = NonNullable<ReturnType<typeof useEditor>>
+
+type TextDirection = 'rtl' | 'ltr'
+
+/** نحوه اعمال لینک: روی انتخاب فعلی، درج متن تازه یا تبدیل محدوده تایپ‌شده */
+type LinkApplyMode = 'selection' | 'insert' | 'range'
+
+type LinkModalState = {
+  open: boolean
+  editing: boolean
+  mode: LinkApplyMode
+  range: { from: number; to: number } | null
+  initial: LinkModalValue
+}
+
+const CLOSED_LINK_MODAL: LinkModalState = {
+  open: false,
+  editing: false,
+  mode: 'selection',
+  range: null,
+  initial: { href: '', newTab: true, nofollow: false },
+}
+
+/** چند نویسه پیش از نشانگر برای تشخیص نشانیِ تایپ‌شده بررسی می‌شود */
+const URL_LOOKBACK = 300
+
 function ToolButton({
   onClick,
   active = false,
@@ -58,6 +118,7 @@ function ToolButton({
       type="button"
       title={label}
       aria-label={label}
+      aria-pressed={active}
       onMouseDown={(e) => e.preventDefault()}
       onClick={onClick}
       className={`flex h-8 w-8 items-center justify-center border transition-colors duration-150 ${
@@ -74,13 +135,15 @@ function ToolButton({
 const Divider = () => <span className="mx-1 h-5 w-px bg-ivory/10" aria-hidden="true" />
 
 /**
- * ویرایشگر WYSIWYG مقاله (TipTap) — راست‌به‌چپ، با آپلود مستقیم تصویر به MinIO
- * (انتخاب فایل، چسباندن یا کشیدن تصویر داخل متن).
+ * ویرایشگر WYSIWYG مقاله (TipTap) — نود تصویر کپشن‌دار، مودال لینک سئو-محور،
+ * کلید راست‌چین/چپ‌چین (فقط روی متن اثر دارد، نه نوار ابزار) و آپلود تصویر به MinIO.
  */
-export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
+export function ArticleEditor({ doc, onChange, contentKey }: ArticleEditorProps) {
   const { runSave } = useAdmin()
   const fileRef = useRef<HTMLInputElement>(null)
   const [uploading, setUploading] = useState(false)
+  const [direction, setDirection] = useState<TextDirection>('rtl')
+  const [linkModal, setLinkModal] = useState<LinkModalState>(CLOSED_LINK_MODAL)
 
   const editor = useEditor({
     extensions: ARTICLE_EXTENSIONS,
@@ -89,16 +152,30 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
     editorProps: {
       attributes: {
         dir: 'rtl',
+        lang: 'fa',
         class: 'article-body min-h-[300px] px-4 py-4 focus:outline-none',
         'data-wysiwyg': 'true',
       },
-      handlePaste: (_event_ignored, event) => {
+      handlePaste: (_view, event, _slice) => {
         const file = event.clipboardData?.files?.[0]
         if (file && file.type.startsWith('image/')) {
           event.preventDefault()
           void uploadAndInsert(file)
           return true
         }
+        // چسباندن یک نشانی → مودال لینک بلافاصله باز می‌شود
+        const text = event.clipboardData?.getData('text/plain')?.trim() ?? ''
+        if (isUrlLike(text)) {
+          event.preventDefault()
+          setLinkModal({
+            open: true,
+            editing: false,
+            mode: 'insert',
+            range: null,
+            initial: { href: normalizeHref(text) ?? text, newTab: true, nofollow: false },
+          })
+          return true
+        }
         return false
       },
       handleDrop: (_view, event, _slice, moved) => {
@@ -111,157 +188,245 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
         }
         return false
       },
+      // پایان تایپ یک نشانی (فاصله بعد از آن) → مودال لینک باز می‌شود
+      handleTextInput: (view, from, to, text) => {
+        if (text !== ' ' || from !== to) return false
+        const start = Math.max(0, from - URL_LOOKBACK)
+        const before = view.state.doc.textBetween(start, from, ' ', ' ').trimEnd()
+        const lastToken = before.slice(before.lastIndexOf(' ') + 1)
+        if (!isUrlLike(lastToken)) return false
+        setLinkModal({
+          open: true,
+          editing: false,
+          mode: 'range',
+          range: { from: from - lastToken.length, to: from },
+          initial: { href: normalizeHref(lastToken) ?? lastToken, newTab: true, nofollow: false },
+        })
+        return false
+      },
+      // Enter داخل تیتر، بلوک تازه را پاراگراف می‌کند تا قالب تیتر سرایت نکند
+      handleKeyDown: (view, event) => handleHeadingEnter(view, event),
     },
     onUpdate: ({ editor: instance }) => onChange(instance.getJSON()),
   })
 
+  // جهت متن فقط روی ناحیه ویرایش اعمال می‌شود؛ نوار ابزار همیشه راست‌چین می‌ماند
+  useEffect(() => {
+    if (!editor) return
+    editor.view.dom.setAttribute('dir', direction)
+    editor.view.dom.setAttribute('lang', direction === 'rtl' ? 'fa' : 'en')
+    // تزئین‌های دوزبانه (اندازه ۲ پیکسل کوچک‌تر متن لاتین) با جهت تازه بازمحاسبه می‌شوند
+    editor.view.dispatch(editor.state.tr.setMeta(bidiPluginKey, direction))
+  }, [editor, direction])
+
+  /**
+   * ترکیب (نمونه ویرایشگر، شناسه محتوا) که آخرین بار بارگذاری شده است.
+   * تغییرهای معمول سند (تایپ کاربر) نباید بدنه را از نو بارگذاری کنند.
+   */
+  const loadedContentRef = useRef<{ editor: EditorInstance; key: string | number } | null>(null)
+
+  // بارگذاری بدنه با تغییر شناسه محتوا (رسیدن مقاله از سرور) یا ساخته‌شدن نمونه ویرایشگر
+  useEffect(() => {
+    if (!editor || contentKey === undefined) return
+    const loaded = loadedContentRef.current
+    if (loaded && loaded.editor === editor && loaded.key === contentKey) return
+    const incoming = doc && Object.keys(doc).length ? doc : null
+    if (!incoming) return
+    loadedContentRef.current = { editor, key: contentKey }
+    // emitUpdate=false تا بارگذاری، ذخیره خودکارِ بی‌مورد را فعال نکند
+    editor.commands.setContent(incoming, { emitUpdate: false })
+  }, [editor, contentKey, doc])
+
   async function uploadAndInsert(file: File) {
     if (!editor) return
     setUploading(true)
     await runSave(async () => {
       const { url } = await adminApi.upload(file)
-      editor.chain().focus().setImage({ src: url, alt: file.name.replace(/\.[^.]+$/, '') }).run()
+      // نام پیش‌فرض از نام فایل ساخته می‌شود و در نبود آن، مقدار پیش‌فرض ثابت می‌ماند
+      const defaultAlt = file.name.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ').trim()
+      editor
+        .chain()
+        .focus()
+        .setImage({ src: url, alt: defaultAlt || DEFAULT_IMAGE_ALT })
+        .run()
     })
     setUploading(false)
   }
 
-  const setLink = () => {
+  /** باز کردن مودال برای لینک انتخاب فعلی (یا ویرایش لینک زیر نشانگر) */
+  const openLinkModalForSelection = () => {
     if (!editor) return
-    if (editor.isActive('link')) {
-      editor.chain().focus().unsetLink().run()
-      return
+    const attrs = editor.getAttributes('link') as {
+      href?: string | null
+      target?: string | null
+      rel?: string | null
     }
-    void Swal.fire({
-      title: 'نشانی لینک',
-      input: 'text',
-      inputValue: 'https://',
-      background: '#1e1a16',
-      color: '#F5F3EF',
-      showCancelButton: true,
-      confirmButtonText: 'ثبت',
-      cancelButtonText: 'انصراف',
-      buttonsStyling: false,
-      customClass: {
-        popup: 'font-pinar border border-ivory/10',
-        title: 'font-pinar font-bold text-ivory',
-        input: 'font-pinar',
-        confirmButton: 'bg-copper text-char font-bold px-8 py-2.5 mx-2',
-        cancelButton: 'border border-ivory/30 text-ivory font-light px-8 py-2.5 mx-2',
+    const editing = Boolean(attrs.href)
+    setLinkModal({
+      open: true,
+      editing,
+      mode: 'selection',
+      range: null,
+      initial: {
+        href: attrs.href ?? '',
+        newTab: editing ? attrs.target === '_blank' : true,
+        nofollow: editing ? parseLinkRel(attrs.rel).nofollow : false,
       },
-    }).then((result) => {
-      if (!result.isConfirmed || !result.value) return
-      editor.chain().focus().extendMarkRange('link').setLink({ href: result.value }).run()
     })
   }
 
+  const applyLink = ({ href, newTab, nofollow }: LinkModalValue) => {
+    if (!editor) return
+    const linkAttrs = { href, target: newTab ? '_blank' : null, rel: buildLinkRel({ newTab, nofollow }) }
+    const chain = editor.chain().focus()
+
+    if (linkModal.mode === 'insert') {
+      // نشانی چسبانده‌شده: متن لینک تازه درج می‌شود
+      chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: linkAttrs }] }).run()
+    } else if (linkModal.mode === 'range' && linkModal.range) {
+      // نشانی تایپ‌شده: همان محدوده به لینک تبدیل می‌شود
+      chain.setTextSelection(linkModal.range).extendMarkRange('link').setLink(linkAttrs).run()
+    } else {
+      chain.extendMarkRange('link').setLink(linkAttrs).run()
+    }
+
+    setLinkModal((state) => ({ ...state, open: false }))
+  }
+
+  const removeLink = () => {
+    editor?.chain().focus().extendMarkRange('link').unsetLink().run()
+    setLinkModal((state) => ({ ...state, open: false }))
+  }
+
   if (!editor) return null
 
   return (
-    <div className="border border-ivory/15 bg-char">
-      <div className="flex flex-wrap items-center gap-0.5 border-b border-ivory/10 px-2 py-1.5">
-        <ToolButton
-          label="بولد"
-          active={editor.isActive('bold')}
-          onClick={() => editor.chain().focus().toggleBold().run()}
+    <>
+      <div className="border border-ivory/15 bg-char" data-dir={direction}>
+        {/* نوار ابزار: همیشه راست‌چین و در بالای ویرایشگر ثابت می‌ماند */}
+        <div
+          dir="rtl"
+          className="sticky top-14 z-20 flex flex-wrap items-center gap-1 border-b border-ivory/10 bg-char px-2 py-1.5"
         >
-          <BoldIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="ایتالیک"
-          active={editor.isActive('italic')}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-        >
-          <ItalicIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="زیرخط"
-          active={editor.isActive('underline')}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-        >
-          <UnderlineIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="خط‌خورده"
-          active={editor.isActive('strike')}
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-        >
-          <StrikethroughIcon className="h-4 w-4" />
-        </ToolButton>
+          <ToolButton
+            label="پاراگراف"
+            active={editor.isActive('paragraph')}
+            onClick={() => applyBlockFormat(editor.view, 'paragraph')}
+          >
+            <PilcrowIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton
+            label="تیتر ۱"
+            active={editor.isActive('heading', { level: 1 })}
+            onClick={() => applyBlockFormat(editor.view, 1)}
+          >
+            <Heading1Icon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton
+            label="تیتر ۲"
+            active={editor.isActive('heading', { level: 2 })}
+            onClick={() => applyBlockFormat(editor.view, 2)}
+          >
+            <Heading2Icon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton
+            label="تیتر ۳"
+            active={editor.isActive('heading', { level: 3 })}
+            onClick={() => applyBlockFormat(editor.view, 3)}
+          >
+            <Heading3Icon className="h-4 w-4" />
+          </ToolButton>
 
-        <Divider />
+          <Divider />
 
-        <ToolButton
-          label="تیتر میانی"
-          active={editor.isActive('heading', { level: 2 })}
-          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        >
-          <Heading2Icon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="تیتر کوچک"
-          active={editor.isActive('heading', { level: 3 })}
-          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-        >
-          <Heading3Icon className="h-4 w-4" />
-        </ToolButton>
+          {/* جهت متن — فقط محتوای ویرایشگر را عوض می‌کند */}
+          <ToolButton
+            label="راست‌چین (فارسی)"
+            active={direction === 'rtl'}
+            onClick={() => setDirection('rtl')}
+          >
+            <AlignRightIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton
+            label="چپ‌چین (انگلیسی)"
+            active={direction === 'ltr'}
+            onClick={() => setDirection('ltr')}
+          >
+            <AlignLeftIcon className="h-4 w-4" />
+          </ToolButton>
 
-        <Divider />
+          <Divider />
 
-        <ToolButton
-          label="لیست نقطه‌ای"
-          active={editor.isActive('bulletList')}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-        >
-          <ListIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="لیست شماره‌ای"
-          active={editor.isActive('orderedList')}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        >
-          <ListOrderedIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="نقل‌قول"
-          active={editor.isActive('blockquote')}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        >
-          <QuoteIcon className="h-4 w-4" />
-        </ToolButton>
+          <ToolButton label="بولد" active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}>
+            <BoldIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="ایتالیک" active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}>
+            <ItalicIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="زیرخط" active={editor.isActive('underline')} onClick={() => editor.chain().focus().toggleUnderline().run()}>
+            <UnderlineIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="خط‌خورده" active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}>
+            <StrikethroughIcon className="h-4 w-4" />
+          </ToolButton>
 
-        <Divider />
+          <Divider />
 
-        <ToolButton label="لینک" active={editor.isActive('link')} onClick={setLink}>
-          <Link2Icon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton label="درج تصویر" onClick={() => fileRef.current?.click()}>
-          {uploading ? <Loader2Icon className="h-4 w-4 animate-spin" /> : <ImagePlusIcon className="h-4 w-4" />}
-        </ToolButton>
+          <ToolButton label="لیست نقطه‌ای" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>
+            <ListIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="لیست شماره‌ای" active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()}>
+            <ListOrderedIcon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="نقل‌قول" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}>
+            <QuoteIcon className="h-4 w-4" />
+          </ToolButton>
 
-        <Divider />
+          <Divider />
 
-        <ToolButton label="واگرد" onClick={() => editor.chain().focus().undo().run()}>
-          <Undo2Icon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton label="ازنو" onClick={() => editor.chain().focus().redo().run()}>
-          <Redo2Icon className="h-4 w-4" />
-        </ToolButton>
+          <ToolButton label="افزودن لینک" active={editor.isActive('link')} onClick={openLinkModalForSelection}>
+            <Link2Icon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="درج تصویر" onClick={() => fileRef.current?.click()}>
+            {uploading ? <Loader2Icon className="h-4 w-4 animate-spin" /> : <ImagePlusIcon className="h-4 w-4" />}
+          </ToolButton>
+
+          <Divider />
+
+          <ToolButton label="واگرد" onClick={() => editor.chain().focus().undo().run()}>
+            <Undo2Icon className="h-4 w-4" />
+          </ToolButton>
+          <ToolButton label="ازنو" onClick={() => editor.chain().focus().redo().run()}>
+            <Redo2Icon className="h-4 w-4" />
+          </ToolButton>
+        </div>
+
+        <EditorContent editor={editor} />
+
+        <input
+          ref={fileRef}
+          type="file"
+          data-editor-file-input
+          accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+          className="hidden"
+          onChange={(e) => {
+            const file = e.target.files?.[0]
+            if (file) void uploadAndInsert(file)
+            e.target.value = ''
+          }}
+        />
       </div>
 
-      <EditorContent editor={editor} />
-
-      <input
-        ref={fileRef}
-        type="file"
-        data-editor-file-input
-        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
-        className="hidden"
-        onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) void uploadAndInsert(file)
-          e.target.value = ''
-        }}
-      />
-    </div>
+      {/* مودال لینک — انیمیشن ورود/خروج را خودش با کلاس‌های Tailwind مدیریت می‌کند */}
+      {linkModal.open && (
+        <LinkModal
+          initial={linkModal.initial}
+          editing={linkModal.editing}
+          onApply={applyLink}
+          onRemove={removeLink}
+          onClose={() => setLinkModal((state) => ({ ...state, open: false }))}
+        />
+      )}
+    </>
   )
 }

frontend/src/components/admin/ArticleImage.ts

@@ -0,0 +1,67 @@
+import Image from '@tiptap/extension-image'
+import { mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import { ImageNodeView } from './ImageNodeView'
+
+/**
+ * تصویر مقاله با کپشن.
+ * خروجی HTML در سایت: <figure><img><figcaption>کپشن</figcaption></figure>
+ * و در ویرایشگر با NodeView سفارشی (ورودی کپشن + دکمه حذف) نمایش داده می‌شود.
+ */
+export const ArticleImage = Image.extend({
+  addAttributes() {
+    return {
+      // ویژگی‌های استاندارد تصویر (src/alt/title/width/height) از افزونه پایه
+      ...this.parent?.(),
+      caption: {
+        default: '',
+        parseHTML: (element) =>
+          element.closest('figure')?.querySelector('figcaption')?.textContent?.trim() ?? '',
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure',
+        priority: 60,
+        getAttrs: (element) => {
+          if (!(element instanceof HTMLElement)) return false
+          const img = element.querySelector('img')
+          if (!img) return false
+          return {
+            src: img.getAttribute('src'),
+            alt: img.getAttribute('alt'),
+            title: img.getAttribute('title'),
+            caption: element.querySelector('figcaption')?.textContent?.trim() ?? '',
+          }
+        },
+      },
+      // تصاویر بدون figure (محتوای قدیمی یا چسبانده‌شده)
+      { tag: 'img[src]:not([src^="data:"])' },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { caption, ...imageAttributes } = HTMLAttributes
+    const image: [string, Record<string, unknown>] = [
+      'img',
+      mergeAttributes(this.options.HTMLAttributes, imageAttributes),
+    ]
+
+    // کپشن خالی → عنصر figcaption اصلاً رندر نمی‌شود (فقط تصویر می‌ماند)
+    return caption
+      ? [
+          'figure',
+          { class: 'article-figure' },
+          image,
+          ['figcaption', { class: 'article-figure__caption' }, caption],
+        ]
+      : ['figure', { class: 'article-figure' }, image]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView)
+  },
+})

frontend/src/components/admin/BidiTypography.ts

@@ -0,0 +1,64 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { EditorState } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import { LATIN_CLASS, RTL_CLASS, findScriptRuns } from '../../utils/bidiText'
+
+/** نام مارک‌های قدیمی که خودشان اندازه/جهت متن را تعیین می‌کنند */
+const LEGACY_MARKS = new Set(['englishText', 'smallSize'])
+
+type BidiState = { dir: 'rtl' | 'ltr' }
+
+/** کلید پلاگین — جهت متن با متای همین کلید به‌روز می‌شود */
+export const bidiPluginKey = new PluginKey<BidiState>('bidiTypography')
+
+/**
+ * تزئین دوزبانه متن ویرایشگر — اجرای لاتین (و در متن انگلیسی، اجرای فارسی) با یک
+ * span جهت‌دار نشانه‌گذاری می‌شود تا ویرایشگر هم دقیقاً همان اندازه «۲ پیکسل کوچک‌تر»
+ * خروجی سایت را نشان دهد. تزئین‌ها سند را تغییر نمی‌دهند و ذخیره نمی‌شوند.
+ */
+export const BidiTypography = Extension.create({
+  name: 'bidiTypography',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<BidiState>({
+        key: bidiPluginKey,
+        state: {
+          init: () => ({ dir: 'rtl' }),
+          apply: (tr, value) => {
+            const dir = tr.getMeta(bidiPluginKey) as BidiState['dir'] | undefined
+            return dir && dir !== value.dir ? { dir } : value
+          },
+        },
+        props: {
+          decorations: (state) =>
+            buildDecorations(state, bidiPluginKey.getState(state)?.dir ?? 'rtl'),
+        },
+      }),
+    ]
+  },
+})
+
+function buildDecorations(state: EditorState, dir: 'rtl' | 'ltr'): DecorationSet {
+  const className = dir === 'rtl' ? LATIN_CLASS : RTL_CLASS
+  const runDir = dir === 'rtl' ? 'ltr' : 'rtl'
+  const decorations: Decoration[] = []
+  const { doc, schema } = state
+
+  doc.descendants((node, pos, parent) => {
+    if (node.type.name === 'codeBlock' || parent?.type.name === 'codeBlock') return false
+    if (!node.isText || !node.text) return
+    if (node.marks.some((mark) => mark.type === schema.marks.code || LEGACY_MARKS.has(mark.type.name))) {
+      return
+    }
+
+    for (const run of findScriptRuns(node.text, dir)) {
+      decorations.push(
+        Decoration.inline(pos + run.from, pos + run.to, { class: className, dir: runDir }),
+      )
+    }
+  })
+
+  return DecorationSet.create(doc, decorations)
+}

frontend/src/components/admin/EnglishText.ts

@@ -0,0 +1,26 @@
+import { Mark, mergeAttributes } from '@tiptap/core'
+
+/** نام مارک متن انگلیسی — ویرایشگر و رندر استاتیک مقاله از همین نام استفاده می‌کنند */
+export const ENGLISH_TEXT_MARK = 'englishText'
+
+/**
+ * مارک «متن انگلیسی» — متن انتخاب‌شده را داخل
+ * <span dir="ltr" class="english-text"> می‌پیچد تا ۱۲ پیکسل و چپ‌به‌راست
+ * نمایش داده شود، بدون اینکه جهت متن فارسی اطرافش به‌هم بخورد.
+ */
+export const EnglishText = Mark.create({
+  name: ENGLISH_TEXT_MARK,
+  inclusive: false,
+
+  parseHTML() {
+    return [{ tag: 'span.english-text' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'span',
+      mergeAttributes(HTMLAttributes, { dir: 'ltr', class: 'english-text' }),
+      0,
+    ]
+  },
+})

frontend/src/components/admin/ImageField.tsx

@@ -1,23 +1,71 @@
-import { useRef, useState } from 'react'
-import { ImagePlusIcon, Loader2Icon } from 'lucide-react'
+import { useId, useRef, useState } from 'react'
+import { ImageIcon, ImagePlusIcon, Loader2Icon } from 'lucide-react'
+import { DEFAULT_IMAGE_TITLE } from '../../data/constants'
 import { adminApi } from '../../admin/adminClient'
 import { useAdmin } from '../../admin/AdminContext'
+import { useSmartTextField } from './useSmartTextField'
 
 type ImageFieldProps = {
   label: string
   value: string
   onSave: (url: string) => Promise<boolean>
+  /** متن جایگزین (Alt) */
+  alt?: string
+  onSaveAlt?: (alt: string) => Promise<boolean>
+  /** عنوان تصویر (Title) */
+  title?: string
+  onSaveTitle?: (title: string) => Promise<boolean>
+  /**
+   * پیشنهاد Alt وقتی کاربر چیزی ننوشته — مثل «{عنوان مقاله} - تصویر شاخص».
+   * هرگز از URL یا نام فایل ساخته نمی‌شود.
+   */
+  altFallback?: string
+  /** پیشنهاد عنوان تصویر — پیش‌فرض «Photo 1» */
+  titleFallback?: string
 }
 
+const META_FIELD_CLASS =
+  'mt-1.5 w-full border border-ivory/15 bg-char px-3 py-2 text-xs font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none'
+
 /**
- * انتخاب و آپلود تصویر به MinIO — در کشوهای ویرایش استفاده می‌شود.
- * پس از آپلود موفق، URL نسبی /media/... ذخیره می‌شود.
+ * انتخاب و آپلود تصویر به MinIO با پیش‌نمایش بزرگ.
+ * ترتیب فیلدها: ۱) عنوان تصویر (پیش‌فرض «Photo 1») ۲) متن جایگزین (پیش‌فرض «{عنوان} - تصویر شاخص»).
+ * هر دو «دستی یا پیش‌فرض» هستند و Alt هرگز از URL ساخته نمی‌شود.
+ * پیش‌فرض خودکار با فوکوس پاک می‌شود تا کاربر بلافاصله تایپ کند و با بلورِ خالی برمی‌گردد.
  */
-export function ImageField({ label, value, onSave }: ImageFieldProps) {
+export function ImageField({
+  label,
+  value,
+  onSave,
+  alt,
+  onSaveAlt,
+  title,
+  onSaveTitle,
+  altFallback = '',
+  titleFallback = '',
+}: ImageFieldProps) {
   const { runSave, isAuthenticated, isEditMode } = useAdmin()
   const inputRef = useRef<HTMLInputElement>(null)
+  const titleId = useId()
+  const altId = useId()
   const [uploading, setUploading] = useState(false)
 
+  const showTitle = title !== undefined || !!onSaveTitle
+  const showAlt = alt !== undefined || !!onSaveAlt
+
+  const titleField = useSmartTextField({
+    value: title ?? '',
+    fallback: titleFallback,
+    hardFallback: DEFAULT_IMAGE_TITLE,
+    onCommit: onSaveTitle,
+  })
+  const altField = useSmartTextField({
+    value: alt ?? '',
+    fallback: altFallback,
+    hardFallback: label,
+    onCommit: onSaveAlt,
+  })
+
   if (!isAuthenticated || !isEditMode) return null
 
   const pick = async (file: File | undefined) => {
@@ -28,6 +76,9 @@ export function ImageField({ label, value, onSave }: ImageFieldProps) {
         const { url } = await adminApi.upload(file)
         const ok = await onSave(url)
         if (!ok) throw new Error('ذخیره نشد')
+        // پیش‌فرض‌های Alt/Title همان لحظه ثبت می‌شوند تا تصویر بدون متادیتا نماند
+        if (showTitle) await titleField.commit()
+        if (showAlt) await altField.commit()
       })
     } finally {
       setUploading(false)
@@ -37,43 +88,92 @@ export function ImageField({ label, value, onSave }: ImageFieldProps) {
   return (
     <div>
       <p className="text-xs font-bold text-ivory/80">{label}</p>
-      <div className="mt-2 flex items-center gap-3">
+
+      {/* پیش‌نمایش بزرگ تصویر */}
+      <div className="mt-2 overflow-hidden border border-ivory/15 bg-char">
         {value ? (
           <img
             src={value}
-            alt={label}
-            className="h-16 w-24 border border-ivory/15 object-cover"
+            alt={altField.display || label}
+            title={titleField.display || undefined}
+            className="h-[27rem] w-full object-cover"
           />
         ) : (
-          <div className="flex h-16 w-24 items-center justify-center border border-dashed border-ivory/20 text-ivory/30">
-            —
+          <div className="flex h-[27rem] w-full flex-col items-center justify-center gap-2 border border-dashed border-ivory/20 text-ivory/30">
+            <ImageIcon className="h-7 w-7" aria-hidden="true" />
+            <span className="text-[11px] font-light">تصویری انتخاب نشده است</span>
           </div>
         )}
-        <div className="min-w-0 flex-1">
-          <button
-            type="button"
-            onClick={() => inputRef.current?.click()}
-            disabled={uploading}
-            className="flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
-          >
-            {uploading ? (
-              <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <ImagePlusIcon className="h-3.5 w-3.5" />
-            )}
-            {uploading ? 'در حال آپلود…' : 'انتخاب تصویر'}
-          </button>
-          {value && <p className="mt-1.5 truncate text-[10px] font-light text-ivory/35" dir="ltr">{value}</p>}
-        </div>
       </div>
+
+      <div className="mt-3">
+        <button
+          type="button"
+          onClick={() => inputRef.current?.click()}
+          disabled={uploading}
+          className="flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
+        >
+          {uploading ? (
+            <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <ImagePlusIcon className="h-3.5 w-3.5" />
+          )}
+          {uploading ? 'در حال آپلود…' : value ? 'تغییر تصویر' : 'انتخاب تصویر'}
+        </button>
+      </div>
+
+      {(showTitle || showAlt) && (
+        <div className="mt-4 grid max-w-md gap-4 border-t border-ivory/10 pt-4 sm:grid-cols-2">
+          {showTitle && (
+            <div>
+              <label htmlFor={titleId} className="text-[11px] font-light text-ivory/50">
+                عنوان تصویر (Title)
+              </label>
+              <input
+                id={titleId}
+                type="text"
+                dir="auto"
+                value={titleField.display}
+                onChange={(event) => titleField.onChange(event.target.value)}
+                onFocus={titleField.onFocus}
+                onBlur={titleField.onBlur}
+                placeholder={titleFallback.trim() || DEFAULT_IMAGE_TITLE}
+                className={META_FIELD_CLASS}
+              />
+            </div>
+          )}
+
+          {showAlt && (
+            <div>
+              <label htmlFor={altId} className="text-[11px] font-light text-ivory/50">
+                متن جایگزین (Alt)
+              </label>
+              <input
+                id={altId}
+                type="text"
+                dir="auto"
+                value={altField.display}
+                onChange={(event) => altField.onChange(event.target.value)}
+                onFocus={altField.onFocus}
+                onBlur={altField.onBlur}
+                placeholder={
+                  altFallback.trim() || 'توضیح کوتاه تصویر برای سئو و صفحه‌خوان‌ها'
+                }
+                className={META_FIELD_CLASS}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
       <input
         ref={inputRef}
         type="file"
         accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
         className="hidden"
-        onChange={(e) => {
-          void pick(e.target.files?.[0])
-          e.target.value = ''
+        onChange={(event) => {
+          void pick(event.target.files?.[0])
+          event.target.value = ''
         }}
       />
     </div>

frontend/src/components/admin/ImageNodeView.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from 'react'
+import { NodeViewWrapper } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { PlusIcon, XIcon } from 'lucide-react'
+
+type ImageAttrs = {
+  src: string
+  alt: string | null
+  title: string | null
+  caption: string | null
+}
+
+const DELETE_BUTTON_CLASS =
+  'flex h-7 w-7 shrink-0 items-center justify-center border border-red-400/50 bg-ink/85 text-red-300 backdrop-blur-sm transition-colors duration-150 hover:bg-red-500/20'
+
+const INLINE_FIELD_CLASS =
+  'w-full border border-ivory/15 bg-ink px-3 py-1.5 text-xs font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none'
+
+const ADD_CAPTION_CLASS =
+  'mt-1.5 inline-flex items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1 text-[11px] font-light text-ivory/50 transition-colors duration-150 hover:border-copper hover:text-copper'
+
+/**
+ * نمایش تصویر مقاله در ویرایشگر — دقیقاً با همان ساختار خروجی سایت:
+ * <figure><img><figcaption>کپشن</figcaption></figure>
+ *
+ * ویرایش کاملاً درون‌خطی است (بدون پاپ‌اور/مودال):
+ * - هر تصویر یک «جعبه توضیح/کپشن» همراه خود دارد و متن آن در figcaption ذخیره می‌شود.
+ * - دکمه X کپشن را کامل حذف می‌کند: صفت کپشن به مقدار پیش‌فرض برمی‌گردد و عنصر
+ *   figcaption با ورودی‌اش از DOM ویرایشگر (و از خروجی ذخیره‌شده) حذف می‌شود؛
+ *   فقط تصویر می‌ماند و «افزودن کپشن» دوباره جعبه را باز می‌کند.
+ * - ویرایش Alt در ویرایشگر وجود ندارد؛ Alt هنگام درج از نام فایل ثبت می‌شود.
+ * - دکمه X روی تصویر کل تصویر را حذف می‌کند.
+ */
+export function ImageNodeView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const { src, alt, title, caption } = node.attrs as ImageAttrs
+  const hasCaption = Boolean((caption ?? '').trim())
+  const [captionOpen, setCaptionOpen] = useState(true)
+  const captionInputRef = useRef<HTMLInputElement>(null)
+  const focusOnOpen = useRef(false)
+  const showCaption = captionOpen || hasCaption
+
+  // فقط وقتی کاربر «افزودن کپشن» را می‌زند ورودی فوکوس می‌گیرد (نه هنگام بارگذاری مقاله)
+  useEffect(() => {
+    if (!focusOnOpen.current) return
+    focusOnOpen.current = false
+    captionInputRef.current?.focus()
+  }, [captionOpen])
+
+  /** حذف کامل کپشن: عنصر figcaption و ورودی‌اش از DOM ویرایشگر بیرون می‌رود */
+  const removeCaption = () => {
+    updateAttributes({ caption: '' })
+    setCaptionOpen(false)
+  }
+
+  const addCaption = () => {
+    focusOnOpen.current = true
+    setCaptionOpen(true)
+  }
+
+  return (
+    <NodeViewWrapper
+      className={`article-figure-node ${selected ? 'is-selected' : ''}`}
+      data-drag-handle
+    >
+      <figure className="article-figure relative">
+        <img src={src} alt={alt ?? ''} title={title ?? ''} draggable={false} />
+
+        {/* حذف کل تصویر */}
+        <button
+          type="button"
+          contentEditable={false}
+          onClick={() => deleteNode()}
+          aria-label="حذف تصویر"
+          title="حذف تصویر"
+          className={`absolute left-2 top-2 z-10 ${DELETE_BUTTON_CLASS}`}
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+
+        {showCaption ? (
+          <figcaption className="article-figure__caption" contentEditable={false}>
+            <input
+              ref={captionInputRef}
+              type="text"
+              value={caption ?? ''}
+              onChange={(event) => updateAttributes({ caption: event.target.value })}
+              placeholder="توضیح تصویر (کپشن)…"
+              aria-label="کپشن تصویر"
+              className={INLINE_FIELD_CLASS}
+            />
+            {/* حذف کامل کپشن — تصویر دست‌نخورده می‌ماند */}
+            <button
+              type="button"
+              onClick={removeCaption}
+              aria-label="حذف کپشن"
+              title="حذف کپشن (تصویر حذف نمی‌شود)"
+              className={DELETE_BUTTON_CLASS}
+            >
+              <XIcon className="h-3.5 w-3.5" />
+            </button>
+          </figcaption>
+        ) : (
+          <button
+            type="button"
+            contentEditable={false}
+            onClick={addCaption}
+            className={ADD_CAPTION_CLASS}
+          >
+            <PlusIcon className="h-3 w-3" aria-hidden="true" />
+            افزودن کپشن
+          </button>
+        )}
+      </figure>
+    </NodeViewWrapper>
+  )
+}

frontend/src/components/admin/JalaliDatePicker.tsx

@@ -0,0 +1,52 @@
+import DatePicker from 'react-multi-date-picker'
+import type { DateObject } from 'react-multi-date-picker'
+import persian from 'react-date-object/calendars/persian'
+import persian_fa from 'react-date-object/locales/persian_fa'
+import { toISODate, toJalaliDateObject } from '../../utils/date'
+
+type JalaliDatePickerProps = {
+  /** مقدار ذخیره‌شده — ISO میلادی (YYYY-MM-DD) */
+  value: string
+  /** تغییر مقدار — همیشه ISO میلادی برمی‌گرداند تا ذخیره‌سازی یکدست بماند */
+  onChange: (isoDate: string) => void
+  id?: string
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+/**
+ * انتخابگر تاریخ شمسی (react-multi-date-picker) با تقویم و locale فارسی.
+ * نمایش جلالی است اما مقدار ذخیره‌شده ISO میلادی می‌ماند.
+ */
+export function JalaliDatePicker({
+  value,
+  onChange,
+  id,
+  placeholder = 'انتخاب تاریخ',
+  disabled = false,
+  className = '',
+}: JalaliDatePickerProps) {
+  return (
+    <DatePicker
+      id={id}
+      value={toJalaliDateObject(value)}
+      onChange={(selected) => {
+        const picked = Array.isArray(selected) ? selected[0] : selected
+        if (!picked) return
+        onChange(toISODate(picked as DateObject))
+      }}
+      calendar={persian}
+      locale={persian_fa}
+      format="YYYY/MM/DD"
+      calendarPosition="bottom-right"
+      className={`aramesh-datepicker ${className}`}
+      containerClassName="w-full"
+      inputClass="w-full cursor-pointer border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      placeholder={placeholder}
+      disabled={disabled}
+      mobileLabels={{ OK: 'تأیید', CANCEL: 'انصراف' }}
+      portal
+    />
+  )
+}

frontend/src/components/admin/LinkModal.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link2Icon, Trash2Icon, XIcon } from 'lucide-react'
+import { buildLinkRel, normalizeHref } from '../../utils/link'
+
+export type LinkModalValue = {
+  href: string
+  newTab: boolean
+  nofollow: boolean
+}
+
+type LinkModalProps = {
+  /** مقادیر اولیه — از لینک فعال زیر نشانگر یا خالی برای لینک تازه */
+  initial: LinkModalValue
+  /** ویرایش لینک موجود (دکمه «حذف لینک» نمایش داده می‌شود) */
+  editing: boolean
+  onApply: (value: LinkModalValue) => void
+  onRemove: () => void
+  onClose: () => void
+}
+
+const FIELD_CLASS =
+  'mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none'
+
+/** مدت انیمیشن ورود/خروج — با duration-300 کلاس‌ها هماهنگ است */
+const TRANSITION_MS = 300
+
+/**
+ * مودال ثبت و ویرایش لینک — انیمیشن نرم fade و scale با کلاس‌های Tailwind.
+ * ورود با یک فریم تاخیر (تا کلاس‌های بسته اعمال شوند) و خروج پیش از بستن مودال اجرا می‌شود.
+ * جایگزین پنجره پیش‌فرض مرورگر برای لینک شده است.
+ */
+export function LinkModal({ initial, editing, onApply, onRemove, onClose }: LinkModalProps) {
+  const [href, setHref] = useState(initial.href)
+  const [newTab, setNewTab] = useState(initial.newTab)
+  const [nofollow, setNofollow] = useState(initial.nofollow)
+  const [error, setError] = useState('')
+  const [visible, setVisible] = useState(false)
+  const [closing, setClosing] = useState(false)
+
+  // انیمیشن ورود: ابتدا حالت بسته رندر می‌شود، سپس به حالت باز می‌رود
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => setVisible(true))
+    return () => window.cancelAnimationFrame(frame)
+  }, [])
+
+  /** بستن نرم: اول انیمیشن خروج کامل می‌شود، بعد عملیات و unmount */
+  const closeWith = (action?: () => void) => {
+    if (closing) return
+    setClosing(true)
+    setVisible(false)
+    window.setTimeout(() => {
+      action?.()
+      onClose()
+    }, TRANSITION_MS)
+  }
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    const normalized = normalizeHref(href)
+    if (!normalized) {
+      setError('نشانی معتبر نیست — نمونه: https://example.com یا /contact')
+      return
+    }
+    closeWith(() => onApply({ href: normalized, newTab, nofollow }))
+  }
+
+  const relPreview = buildLinkRel({ newTab, nofollow })
+
+  return (
+    <div
+      className="fixed inset-0 z-[97] flex items-center justify-center p-6"
+      role="dialog"
+      aria-modal="true"
+      aria-label="ثبت لینک"
+    >
+      {/* پس‌زمینه تار — fade نرم */}
+      <div
+        className={`absolute inset-0 bg-char/70 backdrop-blur-sm transition-opacity duration-300 ease-out ${
+          visible ? 'opacity-100' : 'opacity-0'
+        }`}
+        onClick={() => closeWith()}
+        aria-hidden="true"
+      />
+
+      {/* کارت مودال — fade + scale نرم */}
+      <form
+        onSubmit={submit}
+        dir="rtl"
+        className={`relative w-full max-w-md border border-ivory/10 bg-ink p-7 shadow-2xl transition-all duration-300 ease-out ${
+          visible ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-2 scale-95 opacity-0'
+        }`}
+      >
+        <div className="flex items-center justify-between">
+          <h2 className="flex items-center gap-2 text-sm font-bold text-copper">
+            <Link2Icon className="h-4 w-4" aria-hidden="true" />
+            {editing ? 'ویرایش لینک' : 'افزودن لینک'}
+          </h2>
+          <button
+            type="button"
+            onClick={() => closeWith()}
+            aria-label="بستن"
+            className="text-ivory/50 transition-colors hover:text-ivory"
+          >
+            <XIcon className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* نشانی */}
+        <label htmlFor="link-href" className="mt-6 block text-xs font-light text-ivory/60">
+          نشانی پیوند (URL)
+        </label>
+        <input
+          id="link-href"
+          type="text"
+          dir="ltr"
+          autoFocus
+          value={href}
+          onChange={(event) => {
+            setHref(event.target.value)
+            if (error) setError('')
+          }}
+          placeholder="https://example.com"
+          className={FIELD_CLASS}
+        />
+        {error && (
+          <p className="mt-2 border-r-2 border-red-400/70 pr-3 text-[11px] font-light leading-6 text-red-300">
+            {error}
+          </p>
+        )}
+
+        {/* باز شدن در تب جدید */}
+        <label className="mt-5 flex cursor-pointer items-center gap-3 text-sm font-light text-ivory/80">
+          <input
+            type="checkbox"
+            checked={newTab}
+            onChange={(event) => setNewTab(event.target.checked)}
+            className="h-4 w-4 accent-copper"
+          />
+          باز شدن در تب جدید
+          <span className="text-[10px] font-light text-ivory/35" dir="ltr">target=&quot;_blank&quot;</span>
+        </label>
+
+        {/* نوع لینک از نظر سئو */}
+        <fieldset className="mt-5">
+          <legend className="text-xs font-light text-ivory/60">انتقال اعتبار سئو (rel)</legend>
+          <div className="mt-3 grid gap-2.5">
+            {[
+              { key: 'dofollow', label: 'Dofollow', hint: 'اعتبار سئو به مقصد منتقل می‌شود', value: false },
+              { key: 'nofollow', label: 'Nofollow', hint: 'گوگل این لینک را دنبال نکند', value: true },
+            ].map((option) => (
+              <label
+                key={option.key}
+                className={`flex cursor-pointer items-start gap-3 border px-4 py-3 transition-colors duration-150 ${
+                  nofollow === option.value
+                    ? 'border-copper/60 bg-copper/10'
+                    : 'border-ivory/12 hover:border-ivory/25'
+                }`}
+              >
+                <input
+                  type="radio"
+                  name="link-rel"
+                  checked={nofollow === option.value}
+                  onChange={() => setNofollow(option.value)}
+                  className="mt-0.5 h-4 w-4 accent-copper"
+                />
+                <span className="flex flex-col">
+                  <span className="text-sm font-light text-ivory">{option.label}</span>
+                  <span className="text-[11px] font-light text-ivory/45">{option.hint}</span>
+                </span>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+
+        {relPreview && (
+          <p className="mt-4 text-[10px] font-light text-ivory/35" dir="ltr">
+            rel=&quot;{relPreview}&quot;
+          </p>
+        )}
+
+        {/* دکمه‌ها */}
+        <div className="mt-7 flex items-center justify-between gap-3">
+          {editing ? (
+            <button
+              type="button"
+              onClick={() => closeWith(onRemove)}
+              className="flex items-center gap-1.5 border border-red-400/40 px-4 py-2.5 text-xs font-light text-red-300 transition-colors hover:bg-red-500/10"
+            >
+              <Trash2Icon className="h-3.5 w-3.5" aria-hidden="true" />
+              حذف لینک
+            </button>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => closeWith()}
+              className="border border-ivory/20 px-5 py-2.5 text-xs font-light text-ivory/70 transition-colors hover:border-ivory/40 hover:text-ivory"
+            >
+              انصراف
+            </button>
+            <button
+              type="submit"
+              className="bg-copper px-6 py-2.5 text-xs font-bold text-char transition-transform duration-200 hover:scale-105"
+            >
+              {editing ? 'ذخیره لینک' : 'افزودن لینک'}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}

frontend/src/components/admin/LuxeSelect.tsx

@@ -0,0 +1,293 @@
+import { useMemo, useState } from 'react'
+import Select from 'react-select'
+import CreatableSelect from 'react-select/creatable'
+import type { ClassNamesConfig, GroupBase, MultiValueRemoveProps } from 'react-select'
+import { XIcon } from 'lucide-react'
+
+export type LuxeOption = { label: string; value: string }
+
+type LuxeClassNames<IsMulti extends boolean> = ClassNamesConfig<
+  LuxeOption,
+  IsMulti,
+  GroupBase<LuxeOption>
+>
+
+const CONTROL_CLASS_NAMES = (isFocused: boolean): string =>
+  `!min-h-[42px] !rounded-none !border !bg-char !transition-colors ${
+    isFocused
+      ? '!border-copper !shadow-[0_0_0_1px_rgba(213,135,76,0.35)]'
+      : '!border-ivory/15 !shadow-none hover:!border-copper/50'
+  }`
+
+const OPTION_CLASS_NAMES = (isSelected: boolean, isFocused: boolean): string =>
+  `!cursor-pointer !rounded-none !text-[13px] ${
+    isSelected
+      ? '!bg-copper/25 !font-bold !text-copper'
+      : isFocused
+        ? '!bg-copper/15 !text-ivory'
+        : '!bg-transparent !text-ivory/85'
+  }`
+
+/**
+ * کلاس‌های Tailwind برای همه اسلات‌های react-select — تم تیره پروژه.
+ * react-select برای هر اسلات تابع می‌خواهد، پس همه با تابع برگردانده می‌شوند.
+ */
+function makeClassNames<IsMulti extends boolean>(
+  extras?: Partial<LuxeClassNames<IsMulti>>,
+): LuxeClassNames<IsMulti> {
+  return {
+    control: (state) => CONTROL_CLASS_NAMES(state.isFocused),
+    option: (state) => OPTION_CLASS_NAMES(state.isSelected, state.isFocused),
+    valueContainer: () => '!gap-1 !px-3 !py-0.5',
+    placeholder: () => '!text-[13px] !text-ivory/35',
+    singleValue: () => '!text-[13px] !text-ivory',
+    input: () => '!text-[13px] !text-ivory',
+    indicatorsContainer: () => '!text-ivory/40',
+    dropdownIndicator: () => '!text-ivory/40 hover:!text-copper',
+    clearIndicator: () => '!text-ivory/40 hover:!text-copper',
+    indicatorSeparator: () => '!bg-ivory/15',
+    menu: () => '!mt-1 !rounded-none !border !border-ivory/10 !bg-char !shadow-lift',
+    menuList: () => '!p-1',
+    noOptionsMessage: () => '!text-xs !text-ivory/45',
+    loadingMessage: () => '!text-xs !text-ivory/45',
+    multiValue: () => '!m-0.5 !rounded-full !border !border-copper/40 !bg-copper/15 !py-0.5 !pe-0 !ps-2',
+    multiValueLabel: () => '!text-xs !text-copper',
+    ...extras,
+  }
+}
+
+/** دکمه ضربدر حذف برچسب انتخاب‌شده — همیشه واضح و قابل کلیک */
+function TagRemoveButton({ innerProps }: MultiValueRemoveProps<LuxeOption, true>) {
+  return (
+    <div
+      {...innerProps}
+      role="button"
+      aria-label="حذف برچسب"
+      title="حذف برچسب"
+      className="mx-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full text-copper transition-colors duration-150 hover:bg-copper hover:text-char"
+    >
+      <XIcon className="h-3 w-3" />
+    </div>
+  )
+}
+
+const portalTarget = (): HTMLElement | undefined =>
+  typeof document === 'undefined' ? undefined : document.body
+
+const uniqueOptions = (values: string[]): LuxeOption[] =>
+  [...new Set(values.filter(Boolean))].map((item) => ({ label: item, value: item }))
+
+type LuxeSelectProps = {
+  value: string
+  options: string[]
+  onChange: (value: string) => void
+  placeholder?: string
+  isClearable?: boolean
+  isDisabled?: boolean
+  inputId?: string
+}
+
+/** react-select تکی با تم تیره — گزینه فعلی حتی اگر در لیست نباشد حفظ می‌شود */
+export function LuxeSelect({
+  value,
+  options,
+  onChange,
+  placeholder = 'انتخاب کنید…',
+  isClearable = true,
+  isDisabled = false,
+  inputId,
+}: LuxeSelectProps) {
+  const selectOptions = useMemo(
+    () => uniqueOptions([...options, ...(value ? [value] : [])]),
+    [options, value],
+  )
+
+  return (
+    <Select<LuxeOption, false>
+      inputId={inputId}
+      classNamePrefix="luxe"
+      options={selectOptions}
+      value={selectOptions.find((option) => option.value === value) ?? null}
+      onChange={(option) => onChange(option?.value ?? '')}
+      placeholder={placeholder}
+      isClearable={isClearable}
+      isDisabled={isDisabled}
+      noOptionsMessage={() => 'موردی یافت نشد'}
+      classNames={makeClassNames<false>()}
+      styles={{ menuPortal: (base) => ({ ...base, zIndex: 200 }) }}
+      menuPosition="fixed"
+      menuPortalTarget={portalTarget()}
+    />
+  )
+}
+
+type LuxeCreatableSelectProps = {
+  value: string
+  options: string[]
+  onChange: (value: string) => void
+  placeholder?: string
+  inputId?: string
+  /** متن گزینه «ساخت مقدار جدید» در فهرست بازشو */
+  createLabel?: (input: string) => string
+}
+
+/** react-select تکی و قابل ساخت — کاربر با کلیک روی گزینه ساخت، مقدار تازه می‌سازد */
+export function LuxeCreatableSelect({
+  value,
+  options,
+  onChange,
+  placeholder = 'انتخاب یا نوشتن مورد جدید…',
+  inputId,
+  createLabel = (input) => `افزودن «${input}»`,
+}: LuxeCreatableSelectProps) {
+  const selectOptions = useMemo(
+    () => uniqueOptions([...options, ...(value ? [value] : [])]),
+    [options, value],
+  )
+
+  return (
+    <CreatableSelect<LuxeOption, false>
+      inputId={inputId}
+      classNamePrefix="luxe"
+      options={selectOptions}
+      value={selectOptions.find((option) => option.value === value) ?? null}
+      onChange={(option) => onChange(option?.value?.trim() ?? '')}
+      placeholder={placeholder}
+      formatCreateLabel={(input) => createLabel(input)}
+      noOptionsMessage={() => 'موردی یافت نشد'}
+      classNames={makeClassNames<false>()}
+      styles={{ menuPortal: (base) => ({ ...base, zIndex: 200 }) }}
+      menuPosition="fixed"
+      menuPortalTarget={portalTarget()}
+      isClearable
+    />
+  )
+}
+
+export type CategoryOption = { label: string; value: string }
+
+/** کلید نگهداری دسته‌های ساخته‌شده در مرورگر */
+const CREATED_CATEGORIES_KEY = 'aramesh_article_categories'
+
+/** دسته‌هایی که ادمین ساخته است — برای مقاله‌های بعدی هم در فهرست می‌مانند */
+function readCreatedCategories(): string[] {
+  try {
+    const raw = window.localStorage.getItem(CREATED_CATEGORIES_KEY)
+    const parsed: unknown = raw ? JSON.parse(raw) : []
+    return Array.isArray(parsed)
+      ? parsed.filter((item): item is string => typeof item === 'string')
+      : []
+  } catch {
+    return []
+  }
+}
+
+function storeCreatedCategory(category: string): void {
+  try {
+    const current = readCreatedCategories()
+    if (current.includes(category)) return
+    window.localStorage.setItem(CREATED_CATEGORIES_KEY, JSON.stringify([...current, category]))
+  } catch {
+    /* حافظه مرورگر در دسترس نیست — بی‌صدا رد شو */
+  }
+}
+
+type CategorySelectProps = {
+  /** مقدار انتخاب‌شده — یک شیء {value,label} یا null */
+  value: CategoryOption | null
+  /** تغییر انتخاب — null یعنی فقط انتخاب پاک شده است (دکمه X) */
+  onChange: (option: CategoryOption | null) => void
+  /** دسته‌های پایه */
+  options: string[]
+  /** متن گزینه «ساخت دسته جدید» در فهرست بازشو */
+  createLabel?: (input: string) => string
+}
+
+/**
+ * انتخابگر تک‌مقداری دسته‌بندی (react-select Creatable).
+ * - isMulti=false و isClearable: دکمه X فقط انتخاب جاری را پاک می‌کند و گزینه‌ها دست‌نخورده می‌مانند.
+ * - ساخت دسته جدید: به انتهای فهرست گزینه‌ها اضافه و برای مقاله جاری انتخاب می‌شود و
+ *   در همین مرورگر برای مقاله‌های بعدی نگه داشته می‌شود.
+ */
+export function CategorySelect({
+  value,
+  onChange,
+  options,
+  createLabel = (input) => `ایجاد دسته جدید: ${input}`,
+}: CategorySelectProps) {
+  const [createdOptions, setCreatedOptions] = useState<string[]>(() => readCreatedCategories())
+
+  // گزینه‌های پایه + دسته‌های ساخته‌شده (همیشه در انتهای فهرست)
+  const selectOptions = useMemo(
+    () => uniqueOptions([...options, ...createdOptions.filter((item) => !options.includes(item))]),
+    [options, createdOptions],
+  )
+
+  /** ساخت دسته جدید: افزودن به انتهای فهرست + انتخاب خودکار برای مقاله جاری */
+  const handleCreate = (input: string) => {
+    const category = input.trim()
+    if (!category) return
+    setCreatedOptions((previous) =>
+      previous.includes(category) ? previous : [...previous, category],
+    )
+    storeCreatedCategory(category)
+    onChange({ label: category, value: category })
+  }
+
+  return (
+    <CreatableSelect<CategoryOption, false>
+      classNamePrefix="luxe"
+      isMulti={false}
+      isClearable
+      options={selectOptions}
+      value={value}
+      onChange={(option) => onChange(option ? { label: option.label, value: option.value } : null)}
+      onCreateOption={handleCreate}
+      formatCreateLabel={(input) => createLabel(input)}
+      placeholder="انتخاب یا نوشتن دسته جدید…"
+      noOptionsMessage={() => 'موردی یافت نشد'}
+      classNames={makeClassNames<false>()}
+      styles={{ menuPortal: (base) => ({ ...base, zIndex: 200 }) }}
+      menuPosition="fixed"
+      menuPortalTarget={portalTarget()}
+    />
+  )
+}
+
+type LuxeTagsSelectProps = {
+  value: string[]
+  onChange: (value: string[]) => void
+  placeholder?: string
+}/** هشتگ‌ها با react-select قابل ساخت — هر برچسب دکمه ضربدر حذف مستقل دارد */
+export function LuxeTagsSelect({
+  value,
+  onChange,
+  placeholder = 'هشتگ بنویسید و Enter بزنید…',
+}: LuxeTagsSelectProps) {
+  const options = useMemo(() => uniqueOptions(value), [value])
+
+  /** پاک‌سازی و حذف تکراری‌ها هنگام افزودن یا حذف برچسب */
+  const applyTags = (next: readonly LuxeOption[]) => {
+    const tags = next.map((option) => option.value.trim()).filter(Boolean)
+    onChange([...new Set(tags)])
+  }
+
+  return (
+    <CreatableSelect<LuxeOption, true>
+      classNamePrefix="luxe"
+      isMulti
+      options={options}
+      value={options}
+      onChange={applyTags}
+      placeholder={placeholder}
+      formatCreateLabel={(input) => `افزودن هشتگ «${input}»`}
+      noOptionsMessage={() => 'هشتگی یافت نشد'}
+      closeMenuOnSelect={false}
+      components={{ MultiValueRemove: TagRemoveButton }}
+      classNames={makeClassNames<true>({ multiValueRemove: () => '!bg-transparent' })}
+      styles={{ menuPortal: (base) => ({ ...base, zIndex: 200 }) }}
+      menuPosition="fixed"
+      menuPortalTarget={portalTarget()}
+    />
+  )
+}

frontend/src/components/admin/SeoChecklist.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { AlertCircleIcon, CheckCircle2Icon, XCircleIcon } from 'lucide-react'
 import type { ArticleBodyDoc } from '../../data/site'
+import { docHeadings, docImages, docLinks, docToText, firstParagraph } from '../../utils/tiptapDoc'
 
 export type SeoInput = {
   title: string
@@ -13,78 +14,6 @@ export type SeoInput = {
 type Status = 'good' | 'ok' | 'bad'
 type Check = { label: string; status: Status; hint: string }
 
-// ---------- استخراج متن/ساختار از سند TipTap ----------
-
-function docToText(body: SeoInput['body']): string {
-  if (Array.isArray(body)) return body.join(' ')
-  const out: string[] = []
-  const walk = (node: unknown) => {
-    if (!node || typeof node !== 'object') return
-    const n = node as { type?: string; text?: string; content?: unknown[] }
-    if (n.type === 'text' && n.text) out.push(n.text)
-    for (const c of n.content ?? []) walk(c)
-  }
-  walk(body)
-  return out.join(' ')
-}
-
-function docHeadings(body: SeoInput['body']): string[] {
-  if (Array.isArray(body)) return []
-  const out: string[] = []
-  const walk = (node: unknown) => {
-    if (!node || typeof node !== 'object') return
-    const n = node as { type?: string; text?: string; attrs?: { level?: number }; content?: unknown[] }
-    if (n.type === 'heading' && n.attrs?.level === 2) {
-      const texts: string[] = []
-      const collect = (inner: unknown) => {
-        if (!inner || typeof inner !== 'object') return
-        const t = inner as { type?: string; text?: string; content?: unknown[] }
-        if (t.type === 'text' && t.text) texts.push(t.text)
-        for (const c of t.content ?? []) collect(c)
-      }
-      collect(n)
-      out.push(texts.join(''))
-    }
-    for (const c of n.content ?? []) walk(c)
-  }
-  walk(body)
-  return out
-}
-
-function docImages(body: SeoInput['body']): { src: string; alt: string }[] {
-  if (Array.isArray(body)) return []
-  const out: { src: string; alt: string }[] = []
-  const walk = (node: unknown) => {
-    if (!node || typeof node !== 'object') return
-    const n = node as { type?: string; attrs?: { src?: string; alt?: string }; content?: unknown[] }
-    if (n.type === 'image') out.push({ src: n.attrs?.src ?? '', alt: n.attrs?.alt ?? '' })
-    for (const c of n.content ?? []) walk(c)
-  }
-  walk(body)
-  return out
-}
-
-function docLinks(body: SeoInput['body']): string[] {
-  if (Array.isArray(body)) return []
-  const out: string[] = []
-  const walk = (node: unknown) => {
-    if (!node || typeof node !== 'object') return
-    const n = node as { type?: string; marks?: { type?: string; attrs?: { href?: string } }[]; content?: unknown[] }
-    for (const m of n.marks ?? []) if (m.type === 'link' && m.attrs?.href) out.push(m.attrs.href)
-    for (const c of n.content ?? []) walk(c)
-  }
-  walk(body)
-  return out
-}
-
-function firstParagraph(body: SeoInput['body']): string {
-  if (Array.isArray(body)) return body[0] ?? ''
-  const p = (body as { content?: { type?: string; content?: unknown[] }[] }).content?.find(
-    (c) => c.type === 'paragraph',
-  )
-  return docToText({ type: 'doc', content: p ? [p] : [] } as never)
-}
-
 // ---------- محاسبه بررسی‌ها ----------
 
 export function useSeoChecks(input: SeoInput): Check[] {
@@ -117,7 +46,7 @@ export function useSeoChecks(input: SeoInput): Check[] {
           ? { label: 'کلمه کلیدی در پاراگراف اول', status: 'good', hint: 'کلمه کلیدی در ابتدای متن هست.' }
           : { label: 'کلمه کلیدی در پاراگراف اول', status: 'ok', hint: 'بهتر است کلمه کلیدی در پاراگراف اول بیاید.' },
       )
-      const h2s = docHeadings(input.body)
+      const h2s = docHeadings(input.body, 2)
       if (h2s.length === 0) checks.push({ label: 'کلمه کلیدی در تیترها', status: 'ok', hint: 'هنوز تیتر H2 در متن نیست.' })
       else
         checks.push(
@@ -140,7 +69,7 @@ export function useSeoChecks(input: SeoInput): Check[] {
     else checks.push({ label: `طول متن (${words.length} واژه)`, status: 'bad', hint: 'متن خیلی کوتاه است — حداقل ۸۰ و ترجیحاً ۱۵۰ واژه بنویسید.' })
 
     // تیتر H2
-    const h2s = docHeadings(input.body)
+    const h2s = docHeadings(input.body, 2)
     if (h2s.length > 0) checks.push({ label: `تیتربندی (${h2s.length} تیتر H2)`, status: 'good', hint: 'متن تیتربندی شده است.' })
     else checks.push({ label: 'تیتربندی', status: 'bad', hint: 'برای خوانایی، متن را با تیتر H2 بخش‌بندی کنید.' })
 

frontend/src/components/admin/blockFormat.ts

@@ -0,0 +1,121 @@
+import { setBlockType, splitBlock } from '@tiptap/pm/commands'
+import type { EditorView } from '@tiptap/pm/view'
+import type { ResolvedPos } from '@tiptap/pm/model'
+
+/** قالب بلوک جاری — پاراگراف یا یکی از سطوح تیتر */
+export type BlockFormat = 'paragraph' | 1 | 2 | 3
+
+type LineBounds = {
+  /** ابتدای بلوک جاری */
+  start: number
+  /** پایان بلوک جاری */
+  end: number
+  /** ابتدای خط جاری (پس از نزدیک‌ترین شکست نرم قبل از نشانگر) */
+  lineStart: number
+  /** پایان خط جاری (نزدیک‌ترین شکست نرم پس از نشانگر) */
+  lineEnd: number
+  /** موقعیت شکست نرم قبل از خط جاری — null یعنی خط، ابتدای بلوک است */
+  before: number | null
+  /** موقعیت شکست نرم بعد از خط جاری — null یعنی خط، انتهای بلوک است */
+  after: number | null
+}
+
+/** مرزهای خط جاری داخل بلوک جاری — خطوطی که با شکست نرم (<br>) از هم جدا شده‌اند */
+function lineBounds($from: ResolvedPos): LineBounds {
+  const start = $from.start()
+  const end = $from.end()
+  let lineStart = start
+  let lineEnd = end
+  let before: number | null = null
+  let after: number | null = null
+
+  $from.parent.forEach((node, offset) => {
+    if (node.type.name !== 'hardBreak') return
+    const pos = start + offset
+    if (pos < $from.pos) {
+      lineStart = pos + 1
+      before = pos
+    } else if (after === null) {
+      lineEnd = pos
+      after = pos
+    }
+  })
+
+  return { start, end, lineStart, lineEnd, before, after }
+}
+
+/**
+ * جدا کردن خط جاری از خطوط چسبیده با شکست نرم (Shift+Enter یا متن چسبانده‌شده از Word).
+ * بدون این جداسازی، عوض کردن قالب یک خط، قالب همه خطوط همان بلوک را با هم عوض می‌کند.
+ * اگر گزینش از خط عبور کند (قالب‌بندی چندخطیِ عمدی) دست‌نخورده می‌ماند.
+ */
+function isolateCurrentLine(view: EditorView): boolean {
+  const { state } = view
+  const { selection } = state
+  const bounds = lineBounds(selection.$from)
+
+  if (bounds.before === null && bounds.after === null) return false
+
+  const selectionInsideLine =
+    selection.empty ||
+    (selection.from >= bounds.lineStart && selection.to <= bounds.lineEnd)
+  if (!selectionInsideLine) return false
+
+  const { tr } = state
+  if (bounds.after !== null) {
+    tr.delete(bounds.after, bounds.after + 1)
+    tr.split(bounds.after)
+  }
+  if (bounds.before !== null) {
+    tr.delete(bounds.before, bounds.before + 1)
+    tr.split(bounds.before)
+  }
+  if (!tr.docChanged) return false
+
+  view.dispatch(tr)
+  return true
+}
+
+/**
+ * قالب‌بندی بلوک جاری (تیتر ۱/۲/۳ یا پاراگراف) — فقط همان خطی که نشانگر در آن است
+ * و به خطوط بالا و پایین کاری ندارد. کلیک دوباره روی همان سطح تیتر، آن را به
+ * پاراگراف برمی‌گرداند (رفتار toggle).
+ */
+export function applyBlockFormat(view: EditorView, format: BlockFormat): boolean {
+  view.focus()
+  isolateCurrentLine(view)
+
+  const { state } = view
+  const paragraph = state.schema.nodes.paragraph
+  const heading = state.schema.nodes.heading
+  if (!paragraph || !heading) return false
+
+  if (format === 'paragraph') return setBlockType(paragraph)(state, view.dispatch, view)
+
+  const current = state.selection.$from.parent
+  const sameHeading = current.type === heading && current.attrs.level === format
+  return sameHeading
+    ? setBlockType(paragraph)(state, view.dispatch, view)
+    : setBlockType(heading, { level: format })(state, view.dispatch, view)
+}
+
+/**
+ * Enter داخل تیتر: بلوک تازه پاراگراف می‌شود (نه تیتر تازه) تا قالب تیتر به خط
+ * بعدی سرایت نکند و مرز بلوک‌ها تمیز بماند.
+ * این هندلر پیش از keymap پیش‌فرض اجرا می‌شود و فقط همین حالت را می‌گیرد.
+ */
+export function handleHeadingEnter(view: EditorView, event: KeyboardEvent): boolean {
+  if (event.key !== 'Enter' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+    return false
+  }
+
+  const { state } = view
+  const { selection } = state
+  const paragraph = state.schema.nodes.paragraph
+  if (!paragraph || !selection.empty || selection.$from.parent.type.name !== 'heading') return false
+
+  // خط تازه با splitBlock ساخته و بعد به پاراگراف تبدیل می‌شود
+  if (!splitBlock(state, view.dispatch, view)) return false
+  setBlockType(paragraph)(view.state, view.dispatch, view)
+  return true
+}

frontend/src/components/admin/useSmartTextField.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+type SmartTextFieldOptions = {
+  /** مقدار ذخیره‌شده در بیرون (منبع حقیقت) */
+  value: string
+  /** پیشنهاد خودکار — وقتی کاربر چیزی ننوشته، همین متن نمایش داده و ذخیره می‌شود */
+  fallback?: string
+  /** آخرین گزینه وقتی پیشنهادی هم وجود ندارد (مثل «Photo 1») */
+  hardFallback?: string
+  /** ذخیره مقدار نهایی — فقط وقتی نسبت به مقدار ذخیره‌شده تغییر کرده باشد */
+  onCommit?: (next: string) => void | Promise<unknown>
+}
+
+/**
+ * فیلد متنی با «پیش‌فرض هوشمند» برای Alt/Title تصویر:
+ * - متن کاربر تا لحظه ذخیره فقط در حالت محلی می‌ماند؛ در حین تایپ نه trim می‌شود و نه از
+ *   بیرون بازنویسی می‌شود، پس فاصله انتهای متن و جای نشانگر حفظ می‌شود.
+ * - با فوکوس، پیش‌فرض خودکار پاک می‌شود تا کاربر بلافاصله تایپ کند.
+ * - با بلور، اگر فیلد خالی بماند پیش‌فرض خودکار برمی‌گردد و مقدار نهایی ذخیره می‌شود.
+ */
+export function useSmartTextField({
+  value,
+  fallback = '',
+  hardFallback = '',
+  onCommit,
+}: SmartTextFieldOptions) {
+  const [text, setText] = useState(value)
+  const [focused, setFocused] = useState(false)
+
+  // تازه‌ترین مقادیر در ref نگه داشته می‌شوند تا هندلرها به closure قدیمی وابسته نباشند
+  const textRef = useRef(text)
+  textRef.current = text
+  const focusedRef = useRef(focused)
+  focusedRef.current = focused
+  const fallbackRef = useRef(fallback)
+  fallbackRef.current = fallback
+  const hardFallbackRef = useRef(hardFallback)
+  hardFallbackRef.current = hardFallback
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  // همگام‌سازی با مقدار ذخیره‌شده از بیرون (بارگذاری مقاله، به‌روزرسانی خوش‌بینانه)
+  // اما هرگز در حین ویرایش کاربر — وگرنه نشانگر می‌پرد و فاصله‌ها می‌خورند
+  useEffect(() => {
+    if (focusedRef.current) return
+    setText(value)
+  }, [value])
+
+  /** مقدار نهایی فیلد: متن کاربر → پیشنهاد خودکار → پیش‌فرض ثابت */
+  const resolve = useCallback((): string => {
+    const current = textRef.current.trim()
+    if (current) return current
+    return fallbackRef.current.trim() || hardFallbackRef.current.trim()
+  }, [])
+
+  const commit = useCallback(async (): Promise<void> => {
+    const next = resolve()
+    setText(next)
+    if (onCommit && next !== valueRef.current.trim()) await onCommit(next)
+  }, [onCommit, resolve])
+
+  const onFocus = useCallback(() => {
+    setFocused(true)
+    // پیش‌فرض خودکار متن واقعی نیست؛ با فوکوس پاک می‌شود تا کاربر بلافاصله تایپ کند
+    const current = textRef.current.trim()
+    const auto = fallbackRef.current.trim() || hardFallbackRef.current.trim()
+    if (!current || current === auto) setText('')
+  }, [])
+
+  const onBlur = useCallback(() => {
+    setFocused(false)
+    void commit()
+  }, [commit])
+
+  const onChange = useCallback((next: string) => {
+    setText(next)
+  }, [])
+
+  /** متن نمایشی — در نبود متن کاربر، پیشنهاد خودکار نشان داده می‌شود */
+  const display = focused ? text : text !== '' ? text : fallback
+
+  return { display, focused, onFocus, onBlur, onChange, commit, resolve }
+}

frontend/src/components/home/Articles.tsx

@@ -13,6 +13,9 @@ export function Articles() {
   const heading = useSectionHeading('articles');
   const save = useFieldSaver();
 
+  // پیش‌نویس‌ها فقط در صفحه وبلاگ (برای ادمین) دیده می‌شوند، نه در خانه
+  const published = articles.filter((a) => a.status !== 'draft');
+
   const saveHeading = (field: 'label' | 'title' | 'lead' | 'cta_label', value: string) =>
     save('section-headings', heading.id, { [field]: value }, (d) => {
       const h = d.section_headings.find((s) => s.id === heading.id);
@@ -36,7 +39,7 @@ export function Articles() {
         </Reveal>
 
         <div className="mt-14 grid gap-6 lg:grid-cols-3">
-          {articles.slice(0, 3).map((article, i) =>
+          {published.slice(0, 3).map((article, i) =>
           <Reveal key={article.id} delay={0.06 * i} className="h-full">
               <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
                 <ArticleCard article={article} />

frontend/src/components/home/FeaturedProjects.tsx

@@ -36,34 +36,38 @@ export function FeaturedProjects() {
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
-        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-          {FILTERS.map((filter) => (
-            <button
-              key={filter.key}
-              type="button"
-              role="tab"
-              aria-selected={status === filter.key}
-              onClick={() => setStatus(filter.key)}
-              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-out ${
-                status === filter.key
-                  ? 'border-copper bg-copper font-bold text-char'
-                  : 'border-ivory/15 font-light text-ivory/65'
-              }`}
-            >
-              {status !== filter.key && (
-                <span
-                  aria-hidden="true"
-                  className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-out group-hover:translate-y-0"
-                />
-              )}
-              <span className="relative z-10 transition-colors duration-300 ease-out group-hover:text-char">
-                <InlineEdit
-                  value={filter.label}
-                  onSave={(v) => saveStatusLabel(filter.key, v)}
-                />
-              </span>
-            </button>
-          ))}
+        {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (بدون کادر) */}
+        <div className="mt-10 flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+          {FILTERS.map((filter, index) => {
+            const isSelected = status === filter.key
+            return (
+              <React.Fragment key={filter.key}>
+                {/* خط جداکننده بین دکمه‌ها */}
+                {index > 0 && (
+                  <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
+                )}
+                
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={isSelected}
+                  onClick={() => setStatus(filter.key)}
+                  className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
+                    isSelected
+                      ? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
+                      : 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
+                  }`}
+                >
+                  <span className="relative z-10 transition-colors duration-300 ease-out">
+                    <InlineEdit
+                      value={filter.label}
+                      onSave={(v) => saveStatusLabel(filter.key, v)}
+                    />
+                  </span>
+                </button>
+              </React.Fragment>
+            )
+          })}
         </div>
 
         <div className="mt-10 min-h-[420px]">
@@ -93,10 +97,15 @@ export function FeaturedProjects() {
           </AnimatePresence>
         </div>
 
+        {/* دکمه مشاهده همه پروژه‌ها */}
         {heading.cta_label && heading.cta_href && (
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">
-              <ButtonLink to={heading.cta_href} variant="outline" className="font-light">
+              <ButtonLink
+                to={heading.cta_href}
+                variant="outline"
+                className="group flex items-center gap-3 rounded-full border border-white/20 bg-white/[0.04] px-8 py-3.5 text-sm backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_8px_20px_rgba(0,0,0,0.3)] transition-all duration-300 hover:border-copper hover:bg-copper/10 hover:shadow-[0_0_30px_rgba(197,143,92,0.35)]"
+              >
                 <InlineEdit
                   value={heading.cta_label}
                   onSave={(v) =>
@@ -106,7 +115,9 @@ export function FeaturedProjects() {
                     })
                   }
                 />
-                <ArrowLeftIcon className="h-4 w-4" />
+                <span className="flex h-7 w-7 items-center justify-center rounded-full bg-white/10 text-copper transition-all duration-300 group-hover:-translate-x-1 group-hover:bg-copper group-hover:text-char">
+                  <ArrowLeftIcon className="h-3.5 w-3.5" />
+                </span>
               </ButtonLink>
             </div>
           </Reveal>
@@ -114,4 +125,4 @@ export function FeaturedProjects() {
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Hero.tsx

@@ -20,23 +20,9 @@ export function Hero() {
       ;(d.hero as unknown as Record<string, unknown>)[field] = value
     })
 
-  // واژه highlight در میانه تیتر با رنگ مسی رندر می‌شود
-  const renderTitle = () => {
-    if (hero.title_highlight && hero.title.includes(hero.title_highlight)) {
-      const [before, ...rest] = hero.title.split(hero.title_highlight)
-      return (
-        <>
-          {before}
-          <span className="text-copper">{hero.title_highlight}</span>
-          {rest.join(hero.title_highlight)}
-        </>
-      )
-    }
-    return hero.title
-  }
-
   return (
     <section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label="معرفی گروه ساختمانی آرامش">
+      {/* تصویر پس‌زمینه */}
       <motion.img
         src={brand.hero}
         alt="نمای شبانه برج مسکونی ساخته‌شده توسط گروه ساختمانی آرامش"
@@ -53,61 +39,82 @@ export function Hero() {
         aria-hidden="true"
       />
 
+      {/* محتوای اصلی هیرو */}
       <motion.div
         style={{ y: contentY }}
         className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10"
       >
         <div className="w-full max-w-[700px] lg:max-w-[58%]">
+          {/* کیکر بالای تیتر */}
           <motion.p
             initial={{ opacity: 0, y: 18 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 2.1, ease: [0.23, 1, 0.32, 1] }}
-            className="text-sm font-light text-copper"
+            className="text-sm font-light text-copper tracking-wide"
           >
             <InlineEdit value={hero.kicker} onSave={(v) => saveHero('kicker', v)} />
           </motion.p>
 
+          {/* تیتر اصلی */}
           <motion.h1
             initial={{ opacity: 0, y: 28 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.85, delay: 2.2, ease: [0.23, 1, 0.32, 1] }}
-            className="mt-6 text-hero font-bold text-ivory"
+            className="mt-6 text-hero font-bold text-ivory leading-[1.3]"
           >
             <InlineEdit value={hero.title} onSave={(v) => saveHero('title', v)} aria-label="تیتر اصلی صفحه" />
           </motion.h1>
 
+          {/* زیرتیتر */}
           <motion.p
             initial={{ opacity: 0, y: 22 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.85, delay: 2.32, ease: [0.23, 1, 0.32, 1] }}
-            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/70"
+            className="mt-7 max-w-xl text-base font-light leading-9 text-ivory/75"
           >
             <InlineEdit multiline value={hero.subtitle} onSave={(v) => saveHero('subtitle', v)} />
           </motion.p>
 
+          {/* داک دکمه‌ها: استایل کپسولی، شیشه‌ای و دایره‌ای */}
           <motion.div
             initial={{ opacity: 0, y: 22 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.85, delay: 2.44, ease: [0.23, 1, 0.32, 1] }}
             className="mt-10 flex flex-wrap items-center gap-4"
           >
-            <ButtonLink to={hero.cta_primary_href} variant="copper">
-              <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
-              <ArrowLeftIcon className="h-4 w-4" />
+            {/* دکمه اصلی: کپسولی شیشه‌ای دودی با دایره کهربایی اختصاصی برای آیکون */}
+            <ButtonLink
+              to={hero.cta_primary_href}
+              variant="copper"
+              className="!p-1.5 !pr-7 !rounded-full shadow-lg shadow-black/40 hover:shadow-copper/25 transition-all duration-300"
+            >
+              <span className="text-sm font-medium tracking-wide text-ivory">
+                <InlineEdit value={hero.cta_primary_label} onSave={(v) => saveHero('cta_primary_label', v)} />
+              </span>
+              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-copper text-char shadow-md transition-all duration-300 group-hover:scale-110 group-hover:-translate-x-1">
+                <ArrowLeftIcon className="h-4 w-4 stroke-[2.5]" />
+              </span>
             </ButtonLink>
-            <ButtonLink to={hero.cta_secondary_href} variant="outline" className="font-light">
+
+            {/* دکمه ثانویه: شیشه دودی مات (Smoked Glass) با کادر ظریف */}
+            <ButtonLink
+              to={hero.cta_secondary_href}
+              variant="outline"
+              className="!rounded-full !px-8 !py-3.5 bg-char/40 backdrop-blur-md border border-ivory/20 text-ivory hover:border-copper/70 hover:text-copper transition-all duration-300 shadow-sm"
+            >
               <InlineEdit value={hero.cta_secondary_label} onSave={(v) => saveHero('cta_secondary_label', v)} />
             </ButtonLink>
           </motion.div>
         </div>
 
+        {/* کادر آمار شناور (گوشه پایین چپ): شیشه‌ای با لبه‌های گرد مدرن */}
         <motion.div
           initial={{ opacity: 0, x: -24 }}
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.9, delay: 2.6, ease: [0.23, 1, 0.32, 1] }}
-          className="absolute bottom-28 left-6 hidden w-60 border border-ivory/15 bg-char/60 p-6 backdrop-blur-md lg:block lg:left-10"
+          className="absolute bottom-28 left-6 hidden w-64 rounded-2xl border border-ivory/15 bg-char/70 p-6 backdrop-blur-xl shadow-2xl shadow-black/40 lg:block lg:left-10"
         >
-          <p className="text-3xl font-bold text-copper">
+          <p className="text-3xl font-bold text-copper font-mono">
             <InlineEdit value={hero.badge_value} onSave={(v) => saveHero('badge_value', v)} />
           </p>
           <p className="mt-2 text-sm font-light leading-7 text-ivory/70">
@@ -116,17 +123,21 @@ export function Hero() {
         </motion.div>
       </motion.div>
 
+      {/* دکمه اسکرول پایین: تبدیل‌شده به یک گوی شیشه‌ای دایره‌ای */}
       <a
         href="#story"
         aria-label="رفتن به بخش بعدی"
-        className="absolute bottom-8 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/50 transition-colors duration-200 ease-lux hover:text-copper"
+        className="group absolute bottom-7 right-1/2 z-10 flex translate-x-1/2 flex-col items-center gap-2 text-ivory/60 transition-colors duration-300 hover:text-copper"
       >
-        <span className="text-xs font-light">
+        <span className="text-[11px] font-light tracking-widest opacity-80 group-hover:opacity-100">
           <InlineEdit value={hero.scroll_label} onSave={(v) => saveHero('scroll_label', v)} />
         </span>
-        <ChevronDownIcon className="h-4 w-4 animate-bounce" />
+        <div className="flex h-10 w-10 items-center justify-center rounded-full border border-ivory/20 bg-char/40 backdrop-blur-md transition-all duration-300 group-hover:border-copper group-hover:bg-char/70 group-hover:shadow-lg group-hover:shadow-copper/20">
+          <ChevronDownIcon className="h-4 w-4 animate-bounce text-ivory group-hover:text-copper" />
+        </div>
       </a>
 
+      {/* کنترل‌های ادمین */}
       <div className="absolute left-6 top-24 z-20 flex flex-col gap-2 lg:left-10">
         <SingletonPill resource="hero" label="تنظیمات هیرو (واژه مسی، دکمه‌ها)" />
         <SingletonPill
@@ -137,4 +148,4 @@ export function Hero() {
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Newsletter.tsx

@@ -32,11 +32,11 @@ export function Newsletter() {
       confirmButtonText: 'متوجه شدم',
       buttonsStyling: false,
       customClass: {
-        container: 'backdrop-blur-[8px] bg-ink/60',
-        popup: 'font-pinar border border-ivory/10 rounded-none shadow-lift',
+        container: 'backdrop-blur-md bg-ink/70',
+        popup: 'font-pinar border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl bg-char/95',
         title: 'font-pinar font-bold text-lg text-ivory pt-2',
         htmlContainer: 'font-pinar font-light text-sm leading-8 text-ivory/70',
-        confirmButton: 'mt-6 bg-copper text-char font-bold px-10 py-3 transition-transform duration-300 ease-lux hover:scale-105',
+        confirmButton: 'mt-6 rounded-full bg-copper text-char font-bold px-10 py-3 transition-all duration-300 ease-lux hover:scale-105 hover:shadow-[0_0_20px_rgba(197,143,92,0.5)]',
       },
       showClass: {
         popup: 'swal2-show',
@@ -96,20 +96,25 @@ export function Newsletter() {
   }
 
   return (
-    <section className="relative bg-copper py-16" aria-labelledby="newsletter-title">
+    <section className="relative overflow-hidden bg-gradient-to-r from-copper via-[#d8965e] to-copper py-20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)]" aria-labelledby="newsletter-title">
       <SingletonPill resource="newsletter" label="ویرایش متن‌های خبرنامه" className="absolute left-4 top-4" />
-      <div className="mx-auto grid max-w-site items-center gap-8 px-6 lg:grid-cols-2 lg:px-10">
+      
+      {/* هاله نور پس‌زمینه برای عمق بصری */}
+      <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/20 blur-3xl" />
+      <div className="pointer-events-none absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-black/15 blur-3xl" />
+
+      <div className="relative mx-auto grid max-w-site items-center gap-10 px-6 lg:grid-cols-2 lg:px-10">
         <Reveal>
           <h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
             <InlineEdit value={newsletter.title} onSave={(v) => saveContent('title', v)} />
           </h2>
-          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/75">
+          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/80">
             <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
           </p>
         </Reveal>
 
         <Reveal delay={0.08}>
-          <form onSubmit={submit} className="flex flex-col gap-3 sm:flex-row" noValidate>
+          <form onSubmit={submit} className="flex flex-col gap-3.5 sm:flex-row" noValidate>
             <div className="flex-1">
               <label htmlFor="newsletter-email" className="sr-only">
                 {newsletter.placeholder}
@@ -124,26 +129,33 @@ export function Newsletter() {
                   if (status !== 'idle') setStatus('idle')
                 }}
                 placeholder={newsletter.placeholder}
-                className="w-full border border-transparent bg-char px-5 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 transition-all duration-300 ease-lux focus:border-ivory focus:outline-none"
+                className="w-full rounded-full border border-black/15 bg-char/90 px-6 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 shadow-[inset_0_2px_4px_rgba(0,0,0,0.35)] backdrop-blur-xl transition-all duration-300 ease-lux focus:border-ivory focus:bg-char focus:shadow-[0_0_20px_rgba(255,255,255,0.25)] focus:outline-none"
                 aria-invalid={status === 'error'}
               />
               {status === 'done' && (
-                <p className="mt-2 flex items-center gap-1.5 text-xs font-light text-char" role="status">
-                  <CheckIcon className="h-3.5 w-3.5" />
+                <p className="mt-2.5 flex items-center gap-1.5 px-3 text-xs font-medium text-char" role="status">
+                  <CheckIcon className="h-4 w-4" />
                   {newsletter.success_text}
                 </p>
               )}
             </div>
 
-            <Button type="submit" variant="dark-ivory" disabled={sending}>
-              <SendIcon className="h-4 w-4" />
-              {sending ? newsletter.sending_label : (
-                <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
-              )}
+            <Button
+              type="submit"
+              variant="dark"
+              disabled={sending}
+              className="group flex items-center justify-center gap-2 rounded-full px-8 py-4 shadow-[0_8px_20px_rgba(0,0,0,0.3)] transition-all duration-300 hover:shadow-[0_12px_25px_rgba(0,0,0,0.45)] active:scale-95"
+            >
+              <SendIcon className="h-4 w-4 transition-transform duration-300 group-hover:-translate-x-1" />
+              <span>
+                {sending ? newsletter.sending_label : (
+                  <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
+                )}
+              </span>
             </Button>
           </form>
         </Reveal>
       </div>
     </section>
   )
-}
+}

frontend/src/components/home/Testimonials.tsx

@@ -40,41 +40,45 @@ export function Testimonials() {
             </motion.blockquote>
           </AnimatePresence>
 
-          <div className="mt-10 flex items-center justify-center gap-4">
+          <div className="mt-12 flex items-center justify-center gap-5">
             <button
               type="button"
               onClick={() => go(1)}
               aria-label="نظر قبلی"
-              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-
-              <ChevronRightIcon className="h-5 w-5" />
+              className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
+            >
+              <ChevronRightIcon className="h-5 w-5 transition-transform duration-300 ease-lux group-hover:translate-x-0.5" />
             </button>
-            <div className="flex gap-2" role="tablist" aria-label="انتخاب نظر">
-              {testimonials.map((t, i) =>
-              <button
-                key={t.id}
-                type="button"
-                role="tab"
-                aria-selected={i === index}
-                aria-label={`نظر ${t.name}`}
-                onClick={() => setIndex(i)}
-                className={`h-1.5 transition-[width,background-color] duration-200 ease-lux ${
-                i === index ? 'w-8 bg-copper' : 'w-3 bg-ivory/25'}`
-                } />
 
-              )}
+            <div className="flex items-center gap-2" role="tablist" aria-label="انتخاب نظر">
+              {testimonials.map((t, i) => (
+                <button
+                  key={t.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={i === index}
+                  aria-label={`نظر ${t.name}`}
+                  onClick={() => setIndex(i)}
+                  className={`h-2 rounded-full transition-all duration-300 ease-lux ${
+                    i === index
+                      ? 'w-8 bg-copper shadow-[0_0_12px_rgba(197,143,92,0.6)]'
+                      : 'w-2.5 bg-ivory/20 hover:bg-ivory/40'
+                  }`}
+                />
+              ))}
             </div>
+
             <button
               type="button"
               onClick={() => go(-1)}
               aria-label="نظر بعدی"
-              className="flex h-11 w-11 items-center justify-center border border-ivory/20 text-ivory/70 transition-colors duration-200 ease-lux hover:border-copper hover:text-copper">
-
-              <ChevronLeftIcon className="h-5 w-5" />
+              className="group flex h-12 w-12 items-center justify-center rounded-full border border-copper/35 bg-char/80 text-ivory/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.35)] transition-all duration-300 ease-lux hover:scale-110 hover:border-copper hover:bg-copper hover:text-char hover:shadow-[0_0_25px_rgba(197,143,92,0.45)] active:scale-95"
+            >
+              <ChevronLeftIcon className="h-5 w-5 transition-transform duration-300 ease-lux group-hover:-translate-x-0.5" />
             </button>
           </div>
         </div>
       </div>
-    </section>);
-
-}
+    </section>
+  );
+}

frontend/src/components/home/Timeline.tsx

@@ -17,10 +17,10 @@ function Item({ item, index }: { item: Milestone; index: number }) {
     <li ref={ref} className="relative md:grid md:grid-cols-2 md:gap-16">
       <span
         aria-hidden="true"
-        className={`absolute right-[-5px] top-6 z-10 h-2.5 w-2.5 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
+        className={`absolute right-[-5px] top-8 z-10 h-3 w-3 rounded-full transition-all duration-500 ease-lux md:right-1/2 md:translate-x-1/2 ${
           active
-            ? 'bg-copper shadow-[0_0_0_5px_rgba(213,135,76,0.22)]'
-            : 'bg-ivory/25'
+            ? 'bg-copper shadow-[0_0_15px_rgba(197,143,92,0.6),0_0_0_6px_rgba(213,135,76,0.15)]'
+            : 'bg-ivory/20'
         }`}
       />
 
@@ -33,10 +33,13 @@ function Item({ item, index }: { item: Milestone; index: number }) {
         transition={{ duration: 0.55, ease }}
       >
         <EditableItem resource="timeline" item={item}>
-          <div className="border border-ivory/10 bg-ink p-6 md:p-7">
-            <span className="text-sm font-light text-copper">{item.year}</span>
-            <h3 className="mt-3 text-lg font-bold text-ivory">{item.title}</h3>
-            <p className="mt-3 text-sm font-light leading-8 text-ivory/60">{item.desc}</p>
+          <div className="group relative overflow-hidden rounded-2xl border border-ivory/10 bg-ink/40 p-6 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-1.5 hover:border-copper/50 hover:bg-ink/60 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] md:p-8">
+            {/* لایه نوری ظریف که در هاور روشن می‌شود */}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+            
+            <span className="relative z-10 text-sm font-medium tracking-widest text-copper">{item.year}</span>
+            <h3 className="relative z-10 mt-3 text-xl font-bold text-ivory transition-colors duration-300 group-hover:text-white">{item.title}</h3>
+            <p className="relative z-10 mt-3 text-sm font-light leading-relaxed text-ivory/60 transition-colors duration-300 group-hover:text-ivory/80">{item.desc}</p>
           </div>
         </EditableItem>
       </motion.div>
@@ -66,14 +69,14 @@ export function Timeline() {
           />
         </div>
 
-        <div ref={ref} className="relative mx-auto max-w-4xl">
+        <div ref={ref} className="relative mx-auto mt-20 max-w-4xl">
           <span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px bg-ivory/12 md:right-1/2"
+            className="absolute inset-y-0 right-0 w-px bg-ivory/10 md:right-1/2"
           />
           <motion.span
             aria-hidden="true"
-            className="absolute inset-y-0 right-0 w-px origin-top bg-copper md:right-1/2"
+            className="absolute inset-y-0 right-0 w-px origin-top bg-gradient-to-b from-copper/80 via-copper to-copper/20 shadow-[0_0_10px_rgba(197,143,92,0.5)] md:right-1/2"
             style={{ scaleY }}
           />
 

frontend/src/data/constants.ts

@@ -0,0 +1,18 @@
+/**
+ * ثابت‌های مشترک رابط کاربری — تنها منبع مقادیر پیش‌فرض (بدون متن پراکنده در کامپوننت‌ها).
+ */
+
+/** عنوان پیش‌فرض تصویر، وقتی کاربر عنوانی وارد نکرده باشد */
+export const DEFAULT_IMAGE_TITLE = 'Photo 1'
+
+/** متن جایگزین پیش‌فرض تصویرهای داخل متن (وقتی نام فایل چیزی به دست نمی‌دهد) */
+export const DEFAULT_IMAGE_ALT = 'تصویر مقاله'
+
+/** پسوند پیشنهاد Alt برای تصویر شاخص — در کنار عنوان رکورد قرار می‌گیرد */
+export const FEATURED_IMAGE_ALT_SUFFIX = 'تصویر شاخص'
+
+/** سرعت مطالعه مبنای محاسبه زمان مطالعه — واژه در دقیقه */
+export const WORDS_PER_MINUTE = 200
+
+/** برچسب زمان مطالعه در خروجی */
+export const READING_TIME_LABEL = 'دقیقه مطالعه'

frontend/src/data/site.ts

@@ -29,9 +29,25 @@ export type Project = {
 /** سند TipTap (ProseMirror) — بدنه ساختاریافته مقاله */
 export type ArticleBodyDoc = { type: 'doc'; content: unknown[] };
 
+export type ArticleStatus = 'draft' | 'published';
+
 export type Article = {
   id: number;
   slug: string; title: string; date: string; category: string; image: string; read: string; excerpt: string;
   /** سند TipTap — ردیف‌های قدیمی ممکن است هنوز لیست پاراگراف باشند */
   body: ArticleBodyDoc | string[];
+  /** پیش‌نویس فقط برای ادمین (از انتهای مدیریتی) می‌آید؛ بازدیدکننده نمی‌بیند */
+  status: ArticleStatus;
+  /** کلمه کلیدی هدف چک‌لیست سئو — راهنمای نوشتن، در سایت نمایش داده نمی‌شود */
+  seo_keyphrase: string;
+  /** توضیحات متای سئو — در اولویت بر چکیده برای تگ description */
+  meta_description?: string;
+  /** متن جایگزین تصویر شاخص (Alt) */
+  image_alt?: string;
+  /** عنوان تصویر شاخص (Title) */
+  image_title?: string;
+  /** نویسنده مقاله — در سربرگ مقاله زیر عنوان نمایش داده می‌شود */
+  author?: string;
+  /** هشتگ‌ها/برچسب‌های مقاله */
+  tags?: string[];
 };

frontend/src/index.css

@@ -1,5 +1,4 @@
 /* @import url() FONT IMPORTS MUST ALWAYS BE AT THE VERY TOP OF THIS FILE, ABOVE THE TAILWIND IMPORTS — DO NOT DELETE THIS COMMENT */
-@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');
 
 /* CRITICAL: THE FOLLOWING TAILWIND IMPORTS MUST NEVER BE DELETED OR REORDERED — DO NOT DELETE THIS COMMENT */
 @import 'tailwindcss/base';
@@ -10,15 +9,54 @@
 
 @font-face {
   font-family: 'Pinar';
-  src: url('https://cdn.fontcdn.ir/Font/Persian/Pinar/Pinar.woff2') format('woff2'),
-    url('https://cdn.fontcdn.ir/Font/Persian/Pinar/Pinar.woff') format('woff');
+  src: url('/fonts/pinar/Pinar-Light.woff2') format('woff2'),
+    url('/fonts/pinar/Pinar-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Pinar';
+  src: url('/fonts/pinar/Pinar-Regular.woff2') format('woff2'),
+    url('/fonts/pinar/Pinar-Regular.ttf') format('truetype');
   font-weight: 400;
   font-display: swap;
 }
 @font-face {
   font-family: 'Pinar';
-  src: url('https://cdn.fontcdn.ir/Font/Persian/Pinar/Pinar-Bold.woff2') format('woff2'),
-    url('https://cdn.fontcdn.ir/Font/Persian/Pinar/Pinar-Bold.woff') format('woff');
+  src: url('/fonts/pinar/Pinar-Bold.woff2') format('woff2'),
+    url('/fonts/pinar/Pinar-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Pinar';
+  src: url('/fonts/pinar/Pinar-ExtraBold.woff2') format('woff2'),
+    url('/fonts/pinar/Pinar-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Pinar';
+  src: url('/fonts/pinar/Pinar-Black.woff2') format('woff2'),
+    url('/fonts/pinar/Pinar-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Vazirmatn';
+  src: url('/fonts/Vazirmatn-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Vazirmatn';
+  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Vazirmatn';
+  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
   font-weight: 700;
   font-display: swap;
 }
@@ -45,6 +83,7 @@ body {
 .article-body {
   line-height: 2.4;
   word-wrap: break-word;
+  font-size: 14px; /* متن اصلی ۱۴ تنظیم شد */
 }
 .article-body p {
   margin-top: 1.75rem;
@@ -53,6 +92,11 @@ body {
 .article-body > :first-child {
   margin-top: 0;
 }
+/* ---------- تایپوگرافی مقاله ----------
+   راست‌چین (فارسی): پایه ۱۴ / تیتر۱ ۱۸ / تیتر۲ ۱۶ / تیتر۳ ۱۴
+   چپ‌چین (انگلیسی): پایه ۱۲ / تیتر۱ ۱۶ / تیتر۲ ۱۴ / تیتر۳ ۱۲
+   جهت با data-dir روی پوسته ویرایشگر یا مقاله تعیین می‌شود. */
+.article-body h1,
 .article-body h2,
 .article-body h3 {
   color: #f5f3ef;
@@ -60,15 +104,75 @@ body {
   margin-top: 3rem;
   margin-bottom: 0.25rem;
   line-height: 1.9;
+  /* فاصله از هدر چسبان هنگام پرش لنگرهای فهرست مطالب */
+  scroll-margin-top: 7rem;
+}
+.article-body h1 {
+  font-size: 18px;
 }
 .article-body h2 {
-  font-size: 1.6rem;
-  padding-right: 0.85rem;
-  border-right: 3px solid #d5874c;
+  font-size: 16px;
 }
 .article-body h3 {
-  font-size: 1.25rem;
-  color: #e8c9a8;
+  font-size: 14px;
+}
+[data-dir='rtl'] .article-body {
+  direction: rtl;
+  text-align: right;
+}
+[data-dir='ltr'] .article-body {
+  direction: ltr;
+  text-align: left;
+  font-size: 12px;
+}
+[data-dir='ltr'] .article-body h1 {
+  font-size: 16px;
+}
+[data-dir='ltr'] .article-body h2 {
+  font-size: 14px;
+}
+[data-dir='ltr'] .article-body h3 {
+  font-size: 12px;
+}
+
+/* ---------- تایپوگرافی دوزبانه (فارسی و لاتین در یک خط) ----------
+   متن لاتین همیشه ۲ پیکسل کوچک‌تر از متن فارسیِ همان بلوک است:
+   تیتر۱ ۱۸→۱۶، تیتر۲ ۱۶→۱۴، تیتر۳ و پاراگراف ۱۴→۱۲.
+   calc(1em - 2px) نسبت به اندازه همان بلوک حساب می‌شود، پس قاعده در همه سطح‌ها درست
+   می‌ماند و خط پایه هم جابه‌جا نمی‌شود (line-height نسبی است).
+   در مقاله انگلیسی (data-dir=ltr) پایه همان اندازه کوچک‌تر است و واژه‌های فارسی
+   ۲ پیکسل بزرگ‌تر می‌شوند تا تفاضل همیشه ۲ پیکسل بماند. */
+.article-body .latin,
+.article-body .persian,
+.article-body .english-text {
+  unicode-bidi: isolate;
+}
+
+.article-body .latin,
+.article-body .english-text {
+  font-size: calc(1em - 2px);
+}
+
+.article-body .persian {
+  font-size: 1em;
+}
+
+[data-dir='ltr'] .article-body .latin,
+[data-dir='ltr'] .article-body .english-text {
+  font-size: 1em;
+}
+
+[data-dir='ltr'] .article-body .persian {
+  font-size: calc(1em + 2px);
+}
+.article-body span[data-small="true"] {
+  font-size: 12px; /* مارک اختصاصی برای سایز ۱۲ - انگلیسی */
+}
+/* مارک «متن انگلیسی» ویرایشگر — چپ‌به‌راست و ۱۲ پیکسل بدون به‌هم‌زدن جهت متن فارسی */
+.english-text {
+  direction: ltr;
+  unicode-bidi: isolate;
+  /* اندازه از قواعد دوزبانه بالا می‌آید: ۲ پیکسل کوچک‌تر از متن فارسی همان بلوک */
 }
 .article-body ul,
 .article-body ol {
@@ -112,6 +216,35 @@ body {
   border: 1px solid rgba(245, 243, 239, 0.1);
   object-fit: cover;
 }
+/* ---------- تصویر کپشن‌دار: <figure><img><figcaption> ---------- */
+.article-body figure {
+  margin-top: 2rem;
+}
+.article-body figure img {
+  margin-top: 0;
+}
+.article-body figcaption {
+  margin-top: 0.7rem;
+  color: rgba(245, 243, 239, 0.5);
+  font-size: 0.85em;
+  line-height: 1.9;
+  text-align: center;
+}
+/* ویرایشگر: کپشن ورودی و دکمه حذف زیر تصویر */
+[data-wysiwyg] .article-figure-node {
+  margin: 1.25rem 0;
+}
+[data-wysiwyg] .article-figure__caption {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.6rem;
+  text-align: right;
+}
+[data-wysiwyg] .article-figure-node.is-selected .article-figure {
+  outline: 1px dashed rgba(213, 135, 76, 0.8);
+  outline-offset: 3px;
+}
 .article-body strong {
   color: #f5f3ef;
   font-weight: 700;
@@ -139,3 +272,78 @@ body {
   background: transparent;
   padding: 0;
 }
+
+/* ---------- تقویم شمسی (react-multi-date-picker) — تم تیره با لهجه مسی ---------- */
+.aramesh-datepicker.rmdp-wrapper {
+  width: max-content;
+  border: 1px solid rgba(245, 243, 239, 0.12);
+  border-radius: 0;
+  background-color: #1e1a16;
+  color: #f5f3ef;
+  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
+}
+.aramesh-datepicker .rmdp-calendar {
+  padding: 8px;
+}
+.aramesh-datepicker .rmdp-header-values {
+  color: #d5874c;
+  font-size: 13px;
+  font-weight: 700;
+}
+.aramesh-datepicker .rmdp-arrow {
+  border-color: #d5874c;
+}
+.aramesh-datepicker .rmdp-arrow-container {
+  box-shadow: none;
+}
+.aramesh-datepicker .rmdp-arrow-container:hover {
+  background-color: rgba(213, 135, 76, 0.2);
+  box-shadow: none;
+}
+.aramesh-datepicker .rmdp-week-day {
+  color: rgba(245, 243, 239, 0.45);
+  font-size: 11px;
+  font-weight: 400;
+}
+.aramesh-datepicker .rmdp-day {
+  color: rgba(245, 243, 239, 0.85);
+}
+.aramesh-datepicker .rmdp-day span {
+  border-radius: 0;
+}
+.aramesh-datepicker .rmdp-day:hover:not(.rmdp-disabled):not(.rmdp-selected) span {
+  background-color: rgba(213, 135, 76, 0.16);
+  color: #d5874c;
+}
+.aramesh-datepicker .rmdp-day.rmdp-selected span:not(.highlight) {
+  background-color: #d5874c;
+  color: #1e1a16;
+  font-weight: 700;
+  box-shadow: none;
+}
+.aramesh-datepicker .rmdp-day.rmdp-today span {
+  background-color: rgba(213, 135, 76, 0.25);
+  color: #f5f3ef;
+}
+.aramesh-datepicker .rmdp-day.rmdp-deactive {
+  color: rgba(245, 243, 239, 0.22);
+}
+.aramesh-datepicker .rmdp-day.rmdp-disabled {
+  color: rgba(245, 243, 239, 0.12);
+}
+.aramesh-datepicker .rmdp-month-picker,
+.aramesh-datepicker .rmdp-year-picker {
+  background-color: #1e1a16;
+  border-radius: 0;
+}
+.aramesh-datepicker .rmdp-panel {
+  background-color: #1e1a16;
+}
+.aramesh-datepicker .rmdp-panel-body li {
+  background-color: rgba(213, 135, 76, 0.15);
+  color: #f5f3ef;
+  box-shadow: none;
+}
+.aramesh-datepicker .rmdp-action-button {
+  color: #d5874c;
+}

frontend/src/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "magic-patterns-project",
-  "private": true,
-  "dependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-router-dom": "6.30.2",
-    "lucide-react": "0.577.0",
-    "framer-motion": "11.18.2",
-    "@radix-ui/react-icons": "1.3.2",
-    "date-fns": "4.1.0",
-    "tailwind-merge": "2.6.1"
-  }
-}

frontend/src/pages/ArticleDetail.tsx

@@ -1,32 +1,40 @@
 import React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { ArrowLeftIcon, ChevronLeftIcon, ClockIcon } from 'lucide-react';
+import { ArrowLeftIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import { renderToHTMLString } from '@tiptap/static-renderer';
 import { Reveal } from '../components/Reveal';
 import { ButtonLink } from '../components/Button';
 import { ArticleCard } from '../components/ArticleCard';
+import { ArticleMeta } from '../components/ArticleMeta';
+import { TableOfContents, extractToc, type TocItem } from '../components/TableOfContents';
 import { Newsletter } from '../components/home/Newsletter';
 import { useSite } from '../api';
-import { setMetaDescription } from '../seo';
+import { applySeo } from '../seo';
 import { useEffect } from 'react';
 import { ARTICLE_EXTENSIONS } from '../components/admin/ArticleEditor';
+import { docToText } from '../utils/tiptapDoc';
+import { detectDirection } from '../utils/direction';
+import { wrapScriptRuns } from '../utils/bidiText';
 import type { Article } from '../data/site';
 
-/** بدنه مقاله را به HTML تبدیل می‌کند — سند TipTap جدید یا پاراگراف‌های قدیمی */
-function renderBody(article: Article): { html: string | null; legacy: string[] } {
+/** بدنه مقاله را به HTML و فهرست مطالب تبدیل می‌کند — سند TipTap جدید یا پاراگراف‌های قدیمی */
+function renderBody(
+  article: Article,
+  dir: 'rtl' | 'ltr',
+): { html: string | null; toc: TocItem[]; legacy: string[] } {
   const body = article.body as unknown;
-  if (Array.isArray(body)) return { html: null, legacy: body };
+  if (Array.isArray(body)) return { html: null, toc: [], legacy: body };
   if (body && typeof body === 'object' && (body as { type?: string }).type === 'doc') {
     try {
-      return {
-        html: renderToHTMLString({ extensions: ARTICLE_EXTENSIONS, content: body as never }),
-        legacy: [],
-      };
+      const html = renderToHTMLString({ extensions: ARTICLE_EXTENSIONS, content: body as never });
+      // تیترها شناسه لنگر می‌گیرند و متن لاتین/فارسی برای قاعده «۲ پیکسل کوچک‌تر» بسته‌بندی می‌شود
+      const { items, html: htmlWithIds } = extractToc(html, (root) => wrapScriptRuns(root, dir));
+      return { html: htmlWithIds, toc: items, legacy: [] };
     } catch {
-      return { html: null, legacy: [] };
+      return { html: null, toc: [], legacy: [] };
     }
   }
-  return { html: null, legacy: [] };
+  return { html: null, toc: [], legacy: [] };
 }
 
 export function ArticleDetail() {
@@ -34,11 +42,28 @@ export function ArticleDetail() {
   const { articles, brand } = useSite();
   const article = articles.find((a) => a.slug === slug);
 
-  // عنوان تب و توضیح متا از خود مقاله
+  // عنوان تب، توضیح متا، OG و JSON-LD از خود مقاله
   useEffect(() => {
     if (!article) return;
-    document.title = `${article.title} | ${brand}`;
-    setMetaDescription(article.excerpt);
+    applySeo({
+      title: `${article.title} | ${brand.name}`,
+      // توضیحات سئوی اختصاصی در اولویت است؛ در نبود آن، چکیده
+      description: article.meta_description || article.excerpt,
+      path: `/blog/${article.slug}`,
+      image: article.image,
+      type: 'article',
+      jsonLd: {
+        '@context': 'https://schema.org',
+        '@type': 'Article',
+        headline: article.title,
+        description: article.meta_description || article.excerpt,
+        image: article.image ? new URL(article.image, window.location.origin).href : undefined,
+        inLanguage: 'fa',
+        author: { '@type': 'Organization', name: article.author?.trim() || brand },
+        publisher: { '@type': 'Organization', name: brand },
+        mainEntityOfPage: new URL(`/blog/${article.slug}`, window.location.origin).href,
+      },
+    });
   }, [article?.id]);
 
   if (!article) {
@@ -54,13 +79,29 @@ export function ArticleDetail() {
 
   }
 
-  const { html, legacy } = renderBody(article);
-  const related = articles.filter((a) => a.slug !== article.slug).slice(0, 3);
+  const dir = detectDirection(article.title, article.excerpt, docToText(article.body));
+  const { html, toc, legacy } = renderBody(article, dir);
+  const related = articles.filter((a) => a.slug !== article.slug && a.status !== 'draft').slice(0, 3);
+
+  /**
+   * جهت غالب متن مقاله — بدنه (با data-dir، طبق قاعده CSS مقاله) و سمت فهرست مطالب
+   * از همین پیروی می‌کنند: فارسی راست‌به‌چپ (فهرست سمت راست)، انگلیسی چپ‌به‌راست (فهرست سمت چپ).
+   */
+  const hasToc = toc.length > 0;
+  // در چیدمان راست‌به‌چپ ستون شماره ۱ سمت راست است؛ پس ستون‌ها صریح شماره می‌خورند
+  const gridColumns = hasToc ? 'lg:grid-cols-[17rem_minmax(0,1fr)]' : '';
+  const bodyColumns = 'lg:col-start-2';
+  const tocColumns = 'lg:col-start-1';
 
   return (
     <>
-      <section className="relative flex h-[56vh] min-h-[400px] items-end overflow-hidden">
-        <img src={article.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
+      <section dir={dir} className="relative flex h-[56vh] min-h-[400px] items-end overflow-hidden">
+        <img
+          src={article.image}
+          alt={article.image_alt || article.title}
+          title={article.image_title || undefined}
+          className="absolute inset-0 h-full w-full object-cover"
+        />
         <div className="absolute inset-0 bg-ink/75" aria-hidden="true" />
         <div
           className="absolute inset-0"
@@ -72,44 +113,58 @@ export function ArticleDetail() {
             <Link to="/" className="transition-colors hover:text-copper">
               صفحه اصلی
             </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            {dir === 'ltr' ? <ChevronRightIcon className="h-3.5 w-3.5" /> : <ChevronLeftIcon className="h-3.5 w-3.5" />}
             <Link to="/blog" className="transition-colors hover:text-copper">
               وبلاگ
             </Link>
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
+            {dir === 'ltr' ? <ChevronRightIcon className="h-3.5 w-3.5" /> : <ChevronLeftIcon className="h-3.5 w-3.5" />}
             <span className="text-copper">{article.category}</span>
           </nav>
           <h1 className="mt-5 max-w-[700px] text-hero font-bold text-ivory">{article.title}</h1>
-          <div className="mt-6 flex items-center gap-5 text-xs font-light text-ivory/60">
-            <span>{article.date}</span>
-            <span className="flex items-center gap-1.5">
-              <ClockIcon className="h-3.5 w-3.5" />
-              {article.read}
-            </span>
-          </div>
+
+          {/* نویسنده، تاریخ جلالی و زمان مطالعه */}
+          <ArticleMeta article={article} className="mt-7" />
         </div>
       </section>
 
       <article className="bg-ink py-20 lg:py-28">
-        <div className="mx-auto max-w-3xl px-6">
-          <Reveal>
-            <p className="border-r-2 border-copper pr-6 text-lg font-light leading-10 text-ivory/80">
-              {article.excerpt}
-            </p>
-          </Reveal>
-          {html ? (
-            <Reveal delay={0.05}>
-              <div
-                className="article-body mt-4 text-base font-light text-ivory/70"
-                dangerouslySetInnerHTML={{ __html: html }} />
-            </Reveal>
-          ) : (
-            legacy.map((paragraph, i) =>
-            <Reveal key={i} delay={0.03 * i}>
-                <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
+        <div className="mx-auto max-w-site px-6 lg:px-10">
+          <div
+            dir={dir}
+            data-dir={dir}
+            className={`mx-auto grid max-w-5xl gap-12 lg:gap-14 ${gridColumns}`}
+          >
+            <div className={`min-w-0 lg:row-start-1 ${hasToc ? bodyColumns : ''}`}>
+              <Reveal>
+                <p className="border-s-2 border-copper ps-6 text-lg font-light leading-10 text-ivory/80">
+                  {article.excerpt}
+                </p>
               </Reveal>
-            )
-          )}
+              {html ? (
+                <Reveal delay={0.05}>
+                  <div
+                    className="article-body mt-4 text-base font-light text-ivory/70"
+                    dangerouslySetInnerHTML={{ __html: html }} />
+                </Reveal>
+              ) : (
+                legacy.map((paragraph, i) =>
+                <Reveal key={i} delay={0.03 * i}>
+                    <p className="mt-8 text-base font-light leading-10 text-ivory/70">{paragraph}</p>
+                  </Reveal>
+                )
+              )}
+            </div>
+
+            {/* فهرست مطالب — در دسکتاپ کنار متن می‌چسبد و همراه مقاله پایین می‌آید */}
+            {hasToc && (
+              <aside
+                dir={dir}
+                className={`order-first lg:order-none lg:row-start-1 ${tocColumns}`}
+              >
+                <TableOfContents items={toc} className="lg:sticky lg:top-28" />
+              </aside>
+            )}
+          </div>
         </div>
       </article>
 

frontend/src/pages/Blog.tsx

@@ -7,11 +7,57 @@ import { ArticleCard } from '../components/ArticleCard'
 import { Newsletter } from '../components/home/Newsletter'
 import { useSite } from '../api'
 import { EditableItem } from '../admin/Editable'
+import { useAdmin } from '../admin/AdminContext'
+import { formatJalali } from '../utils/date'
+import { toPersianDigits } from '../utils/digits'
 import { PlusIcon } from 'lucide-react'
 
+function DraftBadge({ className = '' }: { className?: string }) {
+  return (
+    <span
+      className={`border border-amber-400/60 bg-ink/90 px-2 py-1 text-xs font-bold text-amber-300 ${className}`}
+    >
+      پیش‌نویس
+    </span>
+  )
+}
+
 export function Blog() {
   const { articles } = useSite()
-    const [featured, ...rest] = articles
+  const { isEditMode } = useAdmin()
+
+  // دکمه «نوشتن مقاله جدید» فقط در حالت ویرایش ادمین دیده می‌شود
+  const writeButton = isEditMode ? (
+    <Link
+      to="/admin/write"
+      data-admin-link
+      className="inline-flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
+    >
+      <PlusIcon className="h-4 w-4" />
+      نوشتن مقاله جدید
+    </Link>
+  ) : null
+
+  // حالت خالی — وبلاگ بدون مقاله نباید کرش کند
+  if (articles.length === 0) {
+    return (
+      <>
+        <PageHero pageKey="blog" />
+        <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
+          <div className="mx-auto max-w-site px-6 text-center lg:px-10">
+            <h2 className="text-3xl font-bold text-ivory">هنوز مقاله‌ای منتشر نشده است</h2>
+            <p className="mt-4 text-sm font-light text-ivory/60">
+              به‌زودی نخستین نوشته‌های ما اینجا منتشر می‌شود.
+            </p>
+            <div className="mt-8 flex justify-center">{writeButton}</div>
+          </div>
+        </section>
+        <Newsletter />
+      </>
+    )
+  }
+
+  const [featured, ...rest] = articles
 
   return (
     <>
@@ -19,16 +65,7 @@ export function Blog() {
 
       <section className="bg-ink py-24 lg:py-32" aria-label="مقالات">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <div className="mb-10 flex justify-start">
-            <Link
-              to="/admin/write"
-              data-admin-link
-              className="flex items-center gap-2 bg-copper px-6 py-3 text-sm font-bold text-char transition-transform duration-200 hover:scale-105"
-            >
-              <PlusIcon className="h-4 w-4" />
-              نوشتن مقاله جدید
-            </Link>
-          </div>
+          <div className="mb-10 flex justify-start">{writeButton}</div>
           <Reveal>
             <EditableItem resource="articles" item={featured} editHref={`/admin/write/${featured.id}`}>
             <Link
@@ -44,17 +81,22 @@ export function Blog() {
                 />
               </div>
               <div className="flex flex-col justify-center p-8 lg:p-12">
-                <p className="text-xs font-light text-copper">مقاله ویژه — {featured.category}</p>
+                <p className="text-xs font-light text-copper">
+                  مقاله ویژه — {featured.category}
+                  {featured.status === 'draft' && (
+                    <DraftBadge className="mr-3 inline-block align-middle" />
+                  )}
+                </p>
                 <h2 className="mt-6 text-2xl font-bold leading-[2.2] md:leading-[2.2] text-ivory transition-colors duration-200 ease-lux group-hover:text-copper md:text-3xl">
                   {featured.title}
                 </h2>
                 <p className="mt-6 text-sm font-light leading-10 text-ivory/65">{featured.excerpt}</p>
                 <div className="mt-10 flex items-center justify-between border-t border-ivory/10 pt-8 text-xs font-light text-ivory/50">
                   <span className="flex items-center gap-4">
-                    <span>{featured.date}</span>
+                    <span>{formatJalali(featured.date)}</span>
                     <span className="flex items-center gap-1.5">
                       <ClockIcon className="h-3.5 w-3.5" />
-                      {featured.read}
+                      {toPersianDigits(featured.read)}
                     </span>
                   </span>
                   <span className="flex items-center gap-2 text-copper">
@@ -71,7 +113,12 @@ export function Blog() {
             {rest.map((article, i) => (
               <Reveal key={article.id} delay={0.05 * i} className="h-full">
                 <EditableItem resource="articles" item={article} className="h-full" editHref={`/admin/write/${article.id}`}>
-                  <ArticleCard article={article} />
+                  <div className="relative h-full">
+                    {article.status === 'draft' && (
+                      <DraftBadge className="absolute left-3 top-3 z-10" />
+                    )}
+                    <ArticleCard article={article} />
+                  </div>
                 </EditableItem>
               </Reveal>
             ))}
@@ -82,4 +129,4 @@ export function Blog() {
       <Newsletter />
     </>
   )
-}
+}

frontend/src/pages/Investment.tsx

@@ -9,7 +9,7 @@ import { AddItemButton, EditableItem } from '../admin/Editable'
 
 export function Investment() {
   const { investment_models } = useSite()
-    const heading = useSectionHeading('investment_models')
+  const heading = useSectionHeading('investment_models')
 
   return (
     <>
@@ -22,26 +22,29 @@ export function Investment() {
             {investment_models.map((model, i) => (
               <Reveal key={model.id} delay={0.06 * i} className="h-full">
                 <EditableItem resource="investment_models" item={model} className="h-full">
-                <article className="group flex h-full flex-col border border-ivory/10 bg-char p-10 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
-                  <p className="text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
+                  <article className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-ivory/10 bg-char/40 p-10 backdrop-blur-md transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:bg-char/70 hover:shadow-[0_12px_40px_-10px_rgba(197,143,92,0.35)] transform-gpu">
+                    {/* لایه نوری ظریف که در زمان هاور روشن می‌شود */}
+                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+                    
+                    <p className="relative z-10 text-sm font-bold text-copper/80">۰{(i + 1).toLocaleString('fa-IR')}</p>
 
-                  <h3 className="mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
-                    {model.title}
-                  </h3>
+                    <h3 className="relative z-10 mt-6 text-2xl font-bold text-ivory transition-colors duration-300 ease-out group-hover:text-copper">
+                      {model.title}
+                    </h3>
 
-                  <p className="mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
+                    <p className="relative z-10 mt-5 text-sm font-light leading-9 text-ivory/65">{model.desc}</p>
 
-                  <div className="mt-auto pt-10">
-                    <ul className="space-y-4 border-t border-ivory/10 pt-8">
-                      {model.points.map((point) => (
-                        <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/65">
-                         <span className="mt-3.5 h-1 w-1 shrink-0 rounded-full bg-copper transition-transform duration-300 ease-out group-hover:scale-[1.5]" aria-hidden="true" />
-                          {point}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </article>
+                    <div className="relative z-10 mt-auto pt-10">
+                      <ul className="space-y-4 border-t border-ivory/10 pt-8 transition-colors duration-500 group-hover:border-copper/20">
+                        {model.points.map((point) => (
+                          <li key={point} className="flex items-start gap-3 text-sm font-light leading-8 text-ivory/70 transition-colors duration-300 group-hover:text-ivory">
+                            <span className="mt-3.5 h-1.5 w-1.5 shrink-0 rounded-full bg-copper/60 transition-all duration-300 ease-lux group-hover:scale-125 group-hover:bg-copper group-hover:shadow-[0_0_10px_rgba(197,143,92,0.8)]" aria-hidden="true" />
+                            {point}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </article>
                 </EditableItem>
               </Reveal>
             ))}
@@ -54,4 +57,4 @@ export function Investment() {
       <ContactSection />
     </>
   )
-}
+}

frontend/src/pages/ProjectDetail.tsx

@@ -8,7 +8,7 @@ import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
 import { useEffect } from 'react';
 import { useSite, useStatusLabel } from '../api';
-import { setMetaDescription } from '../seo';
+import { applySeo } from '../seo';
 
 export function ProjectDetail() {
   const { slug } = useParams<{ slug: string }>()
@@ -17,11 +17,15 @@ export function ProjectDetail() {
   const statusLabel = useStatusLabel(project?.status ?? '')
   const [lightbox, setLightbox] = useState<number | null>(null)
 
-  // عنوان تب و توضیح متا از خود پروژه
+  // عنوان تب، توضیح متا و OG از خود پروژه
   useEffect(() => {
     if (!project) return;
-    document.title = `${project.title} | ${brand}`;
-    setMetaDescription(project.summary);
+    applySeo({
+      title: `${project.title} | ${brand.name}`,
+      description: project.summary,
+      path: `/projects/${project.slug}`,
+      image: project.image,
+    });
   }, [project?.id]);
 
   if (!project) {

frontend/src/pages/Projects.tsx

@@ -26,8 +26,9 @@ export function Projects() {
   const doneLabel = useStatusLabel('done');
   const progressLabel = useStatusLabel('progress');
   const FILTERS: {key: ProjectStatus;label: string;}[] = [
-  { key: 'done', label: doneLabel },
-  { key: 'progress', label: progressLabel }];
+    { key: 'done', label: doneLabel },
+    { key: 'progress', label: progressLabel }
+  ];
   const [status, setStatus] = useState<ProjectStatus>('done');
   const list = projects.filter((p) => p.status === status);
 
@@ -35,47 +36,51 @@ export function Projects() {
     <>
       <PageHero pageKey="projects" />
       
-
       <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <div className="flex flex-wrap gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-            {FILTERS.map((filter) =>
-            <button
-              key={filter.key}
-              type="button"
-              role="tab"
-              aria-selected={status === filter.key}
-              onClick={() => setStatus(filter.key)}
-              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
-              status === filter.key ?
-              'border-copper bg-copper font-bold text-char' :
-              'border-ivory/15 font-light text-ivory/65'}`
-              }>
-              
-                {status !== filter.key &&
-              <span
-                aria-hidden="true"
-                className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0" />
-
-              }
-                <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  <InlineEdit
-                    value={filter.label}
-                    onSave={(v) => saveStatusLabel(filter.key, v)}
-                  />
-                </span>
-              </button>
-            )}
+          
+          {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (وسط‌چین و بدون کادر) */}
+          <div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+            {FILTERS.map((filter, index) => {
+              const isSelected = status === filter.key;
+              return (
+                <React.Fragment key={filter.key}>
+                  {/* خط جداکننده بین دکمه‌ها */}
+                  {index > 0 && (
+                    <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
+                  )}
+                  
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={isSelected}
+                    onClick={() => setStatus(filter.key)}
+                    className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
+                      isSelected
+                        ? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
+                        : 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
+                    }`}
+                  >
+                    <span className="relative z-10 transition-colors duration-300 ease-out">
+                      <InlineEdit
+                        value={filter.label}
+                        onSave={(v) => saveStatusLabel(filter.key, v)}
+                      />
+                    </span>
+                  </button>
+                </React.Fragment>
+              );
+            })}
           </div>
 
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
-            {list.map((project, i) =>
-            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+            {list.map((project, i) => (
+              <Reveal key={project.id} delay={0.05 * i} className="h-full">
                 <EditableItem resource="projects" item={project} className="h-full">
                   <ProjectCard project={project} imageClass="h-80" />
                 </EditableItem>
               </Reveal>
-            )}
+            ))}
             <AddItemButton resource="projects" />
           </div>
         </div>
@@ -83,6 +88,6 @@ export function Projects() {
 
       <Gallery />
       <ContactSection />
-    </>);
-
+    </>
+  );
 }

frontend/src/seo.ts

@@ -1,11 +1,11 @@
-// تنظیم عنوان صفحه و توضیح متا — محتوای سئو از دیتابیس می‌آید
+// تگ‌های سئوی سمت مرورگر — عنوان، توضیح متا، OG، توییتر، canonical و JSON-LD.
+// محتوا از دیتابیس می‌آید؛ برای خزنده‌های بدون جاوااسکریپت، بک‌اند همان تگ‌ها را
+// سمت سرور داخل index.html تزریق می‌کند (app/seo_pages.py).
 
 export function setMetaDescription(content: string): void {
+  // بدون توضیح از دیتابیس، پیش‌فرض استاتیک index.html دست‌نخورده می‌ماند
+  if (!content.trim()) return
   let el = document.querySelector<HTMLMetaElement>('meta[name="description"]')
-  if (!content.trim()) {
-    el?.remove()
-    return
-  }
   if (!el) {
     el = document.createElement('meta')
     el.setAttribute('name', 'description')
@@ -22,3 +22,73 @@ export function seoKeyForPath(pathname: string): string | null {
   // مسیرهای جزئی مثل /blog/{slug} شامل نمی‌شوند تا اثر خود صفحه جزئیات برسانند
   return known.includes(seg) && pathname === `/${seg}` ? seg : null
 }
+
+function upsertMeta(attr: 'name' | 'property', key: string, content: string): void {
+  let el = document.querySelector<HTMLMetaElement>(`meta[${attr}="${key}"]`)
+  if (!el) {
+    el = document.createElement('meta')
+    el.setAttribute(attr, key)
+    document.head.appendChild(el)
+  }
+  el.setAttribute('content', content)
+}
+
+function upsertCanonical(path: string): void {
+  let el = document.querySelector<HTMLLinkElement>('link[rel="canonical"]')
+  if (!el) {
+    el = document.createElement('link')
+    el.setAttribute('rel', 'canonical')
+    document.head.appendChild(el)
+  }
+  el.setAttribute('href', new URL(path, window.location.origin).href)
+}
+
+function setJsonLd(data: Record<string, unknown> | null): void {
+  const id = 'seo-jsonld'
+  let el = document.getElementById(id)
+  if (!data) {
+    el?.remove()
+    return
+  }
+  if (!el) {
+    el = document.createElement('script')
+    el.setAttribute('type', 'application/ld+json')
+    el.id = id
+    document.head.appendChild(el)
+  }
+  el.textContent = JSON.stringify(data)
+}
+
+export type SeoInput = {
+  title: string
+  description?: string
+  /** مسیر canonical — پیش‌فرض مسیر جاری مرورگر */
+  path?: string
+  /** تصویر OG — مسیر نسبی مثل /media/... به آدرس مطلق تبدیل می‌شود */
+  image?: string
+  type?: 'website' | 'article'
+  jsonLd?: Record<string, unknown> | null
+}
+
+/** تنظیم همه تگ‌های سئوی صفحه در یک فراخوانی */
+export function applySeo(input: SeoInput): void {
+  const title = input.title.trim()
+  const description = (input.description ?? '').trim()
+  const path = input.path ?? window.location.pathname
+  const image = (input.image ?? '').trim()
+
+  document.title = title
+  setMetaDescription(description)
+  upsertCanonical(path)
+  upsertMeta('property', 'og:title', title)
+  upsertMeta('property', 'og:description', description)
+  upsertMeta('property', 'og:type', input.type ?? 'website')
+  upsertMeta('property', 'og:url', new URL(path, window.location.origin).href)
+  upsertMeta('name', 'twitter:card', 'summary_large_image')
+  if (image) {
+    upsertMeta('property', 'og:image', new URL(image, window.location.origin).href)
+  } else {
+    document.querySelector<HTMLMetaElement>('meta[property="og:image"]')?.remove()
+  }
+  setJsonLd(input.jsonLd ?? null)
+}