هندسهٔ صفحه

اصل

هندسهٔ صفحه در پرتو یک مجموعه توکن است، نه عددی که هر صفحه یا هر کامپوننت برای خودش بنویسد. ارتفاع نوار بالا، عرض منو، حاشیهٔ کنار صفحه، فاصلهٔ عنوان تا اولین بلوک، فاصلهٔ بخش‌ها و عرض ستون محتوا همه از توکن‌های --layout-* در globals.css می‌آیند، و اجزای چیدمان همین توکن‌ها را می‌خوانند: ProductFrame، PageContainer، PageHeader، PageHeaderRoot، PageSection، PageToolbar، FilterBar، NavRail، AppSecondary، SiteHeader و ردیف‌های PageBreadcrumbs و PageNav.

نتیجه این است که کد صفحه عدد چیدمان نمی‌نویسد. صفحه اجزای صفحه را به کار می‌برد و هندسه را از آن‌ها می‌گیرد. اگر روزی یکی از این اعداد عوض شود، در یک جا عوض می‌شود و همهٔ محصولات با هم تغییر می‌کنند.

مقادیر همان هندسهٔ Supabase Studio هستند: ارتفاع 48 برای ردیف‌های ثابت، نردبان عرض 768 / 1200 / 1600، حاشیهٔ 16 / 24 / 40 و ریتم 48 / 24. برای راست‌به‌چپ آینه شده‌اند: منو در سمت شروع خط (راست) قرار می‌گیرد.

--layout-tile-min-width و --layout-chart-min-width عرض کمینهٔ ستون‌اند، نه عرض خود کاشی: کاشی با min-w-… از ظرفی باریک‌تر از خودش بیرون می‌زند. شبکه آن‌ها را در فرمول ستون‌ها می‌خواند و هیچ ستونی پهن‌تر از ردیف نمی‌شود: grid-cols-[repeat(auto-fill,minmax(min(var(--layout-tile-min-width),100%),1fr))] (شبکهٔ کارت؛ ردیف شاخص و شبکهٔ نمودار با auto-fit). قالب‌های صفحه همین را خودشان دارند.

عددها پیکسل CSS هستند. --layout-page-inset تنها توکن واکنش‌گراست: مقدارش در نقطه‌های شکست sm (40rem) و xl (80rem) روی :root عوض می‌شود. در کد محصول حاشیه را PageContainer می‌دهد، و جایی که ظرف خودتان را می‌سازید px-layout-page-inset؛ کلاس page-inset جزء داخلی خود اجزای صفحه است.

نام هر کلاس از نام توکنش ساخته می‌شود: پیشوند ویژگی در Tailwind + نام توکن بدون -- (--layout-section-gap ← gap-layout-section-gap). هر توکن یک کلاس دارد و کلاس دیگری در کار نیست، پس نامی را حدس نزنید؛ نامی که در این جدول نیست هیچ قاعدهٔ CSS نمی‌سازد و خطایی هم نمی‌دهد. هر توکن را فقط با پیشوندی که ستون آخر نشان می‌دهد به کار ببرید: ارتفاع‌ها با h- (یا min-h-)، عرض‌ها با w-، فاصله‌ها با gap-، حاشیه با px-، بالای عنوان با pt-، و سه عرض محتوا فقط با max-w-. ترکیب دیگری مثل gap-layout-header-height هم کامپایل می‌شود ولی معنایی ندارد. در CSS خودتان همان توکن را با var(--layout-…) بخوانید.

ارتفاع نوارابزار از این توکن‌ها نمی‌آید: ردیف PageToolbar به بلندی کنترل‌هایش است (34، اندازهٔ sm در اندازه و چگالی)، نه 48.

نمونه بصری

هر نوار و هر فاصلهٔ این شکل با خود توکن اندازه گرفته شده است، و جدول زیرش مقدار هر توکن را از همین صفحه می‌خواند. پس این شکل نمی‌تواند از globals.css جدا شود.

قوانین اجباری

// ✅ درست — عرض، حاشیه و ریتم از قالب صفحه
<DetailPage title="گزارش هفتگی" back={{ href: '/reports', label: 'گزارش‌ها' }}>
  <DetailSection title="تحلیل">
    <Card>تحلیل گفت‌وگوهای کمپین</Card>
  </DetailSection>
</DetailPage>

// ❌ غلط — عرض، حاشیه و فاصله با عدد؛ هر صفحه جواب دیگری می‌دهد
<div className="mx-auto max-w-[1180px] space-y-5 p-6">
  <PageHeader title="گزارش‌ها" />
  <Card>تحلیل گفت‌وگوهای کمپین</Card>
</div>

// ✅ درست
<div className="flex h-layout-header-height items-center border-t border-default">…</div>

// ❌ غلط — 52 پیکسل، کنار ردیف‌های 48 پیکسلی
<div className="flex h-[52px] items-center border-t border-default">…</div>

موارد استفاده رایج

• ریتم عمودی یک صفحه، از بالا به پایین: نوار بالای قاب --layout-header-height (48) · بالای عنوان --layout-page-top (48) · سرِ صفحه تا اولین بلوک و بخش تا بخش --layout-section-gap (48) · بلوک تا بلوک --layout-block-gap (24) · نوارابزار تا جدول --layout-toolbar-gap (16) · بین کنترل‌های یک ردیف --layout-control-gap (8).
• صفحهٔ فهرست کوتاه‌تر است: نوارابزار فهرست بخشی از سرِ صفحه است، پس --layout-block-gap (24) زیر سرِ صفحه می‌نشیند نه 48؛ توضیح صفحه یک خط است؛ و نوارابزار و سرِ جدول هنگام پیمایش بالای ناحیهٔ محتوا می‌چسبند. اندازه‌گیری‌شده در 1440 (عنوان، یک خط توضیح، نوارابزار): از زیر نوار قاب تا ردیف سرِ جدول 205 ← 181 پیکسل.
• عرض از محتوا می‌آید: جدول با نام (default 1200، wide 1600)، فید تک‌ستونی در اندازهٔ خواندن (--layout-content-feed، 680 — ستون خبرخوان فیسبوک؛ X 600 متن‌محور است و اینستاگرام 470 رسانه‌محور؛ با حاشیه و ستون آواتار کارت، متن فارسی در 14 پیکسل حدود 600 پیکسل می‌شود، 12 تا 14 واژه در هر خط)، کنار آن ستون کناری دست‌کم --layout-aside-width که باقی صفحهٔ 1200 را می‌گیرد، و شبکهٔ کارت پهن (1600). نوارابزار و سرِ جدول از 48rem محتوا می‌چسبند؛ پوستهٔ برنامه‌ای با سرِ ثابت خودش (بیرون از ProductFrame) --page-sticky-offset را به ارتفاع آن می‌دهد.
• CSS خودتان: مقدار را با var(--layout-header-height) بخوانید، نه با عدد.
• رابطه با مقیاس فضابندی: مقیاس 4 پیکسلی برای فاصله‌های داخل کامپوننت‌ها و بلوک‌هاست؛ فاصله‌ها و اندازه‌های بین قاب، سرِ صفحه، بخش‌ها و بلوک‌ها فقط از این توکن‌ها می‌آید. ارتفاع کنترل‌ها موضوع جداگانه‌ای است: اندازه و چگالی.

چه نکنیم