@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/components/LayoutDemo.astro

@@ -0,0 +1,384 @@
+---
+// Illustrations for the Layout pages. The diagrams are drawn at real pixel sizes (a 1280 px
+// window, a 1920 px window and a 360 px phone) and scale to fit; colours are role tokens set in layout.css.
+import '../styles/layout.css';
+import { tokensByPrefix } from '../lib/tokens';
+import { langOf } from '../lib/i18n';
+
+interface Props {
+  kind: 'anatomy' | 'grid' | 'widths' | 'controls' | 'breakpoints' | 'navlabels' | 'pageheader';
+}
+const { kind } = Astro.props;
+const vi = langOf(Astro.url.pathname) === 'vi';
+const L = (en: string, viText: string) => (vi ? viText : en);
+
+// App frame sizes, in px. Each one is explained on the Layout pages.
+const header = 48;
+const sidebar = 280;
+// At a 1280 px window (lg): 12 columns, gutter 24, page margin 24. On a phone (xs): 4 columns, 16 and 16.
+const pad = { desktop: 24, phone: 16 };
+const gutter = { desktop: 24, phone: 16 };
+
+// Desktop content area at 1280 px, inside the page margins.
+const cx = sidebar + pad.desktop; // 304
+const cw = 1280 - sidebar - pad.desktop * 2; // 952
+const colW = (cw - gutter.desktop * 11) / 12;
+const col = (i: number) => cx + i * (colW + gutter.desktop);
+const span = (n: number) => n * colW + (n - 1) * gutter.desktop;
+const cards = [0, 1, 2, 3].map((i) => ({ x: col(i * 3), w: span(3) }));
+
+// Phone content area at 360 px: four columns.
+const pw = 360 - pad.phone * 2; // 328
+const pColW = (pw - gutter.phone * 3) / 4;
+const pcol = (i: number) => pad.phone + i * (pColW + gutter.phone);
+const pspan = (n: number) => n * pColW + (n - 1) * gutter.phone;
+
+const menu = [0, 1, 2, 3, 4, 5];
+
+// Page widths on a 1920 px window with the side navigation open: page margin 32 px (xl).
+// Wide and narrow pages are centred in the area beside the side navigation; the maximum includes the margins.
+const W = 1920;
+const H = 1080;
+const area = { x: sidebar, w: W - sidebar };
+const centre = area.x + area.w / 2;
+const wm = 32;
+// The page header spans the whole content area at every page width; only the content below it is capped.
+const ph = { x: area.x + wm, w: area.w - wm * 2 };
+const hb = 180;
+const widths = [
+  { name: 'Full', max: L('No maximum', 'Không giới hạn'), use: L('Tables, lists, logs, builders.', 'Bảng, danh sách, log, trình dựng.'), frame: area.w },
+  { name: 'Wide', max: '1280 px', use: L('Dashboards, detail pages, settings overviews.', 'Dashboard, trang chi tiết, trang tổng quan cài đặt.'), frame: 1280 },
+  { name: 'Narrow', max: '768 px', use: L('Forms, settings forms, wizard steps.', 'Form, form cài đặt, các bước wizard.'), frame: 768 },
+].map((w) => {
+  // The maximum is the content itself; the page margins sit outside it.
+  const full = w.name === 'Full';
+  const x = full ? area.x + wm : centre - w.frame / 2;
+  const width = full ? area.w - wm * 2 : w.frame;
+  return { ...w, fx: x, frame: width, x, w: width };
+});
+
+// Breakpoints: the width of each band follows its range; the last one is open-ended.
+const bps = tokensByPrefix('breakpoint').map((t) => ({ name: t.name.split('.')[1], min: parseInt(t.resolved, 10) }));
+const bands = bps.map((b, i) => ({ ...b, size: (bps[i + 1]?.min ?? b.min + 480) - b.min }));
+---
+
+{kind === 'anatomy' && (
+  <div class="ly-root">
+    <div class="ly-pair">
+      <figure>
+        <svg class="ly-svg" viewBox="0 0 1280 800" role="img" aria-label={L('App page at 1280 px: a 48 px header across the top, 280 px side navigation on the left, and the content beside it with 24 px page margins, a page title with its main action, a row of four cards and a large table panel.', 'Trang ứng dụng ở 1280 px: header 48 px chạy ngang phía trên, menu bên 280 px bên trái, và nội dung bên cạnh với lề trang 24 px, tiêu đề trang cùng thao tác chính, một hàng bốn card và một panel bảng lớn.')}>
+          <rect class="f-page" x="0" y="0" width="1280" height="800" />
+          <rect class="f-mark" x={sidebar} y={header} width={pad.desktop} height={800 - header} />
+          <rect class="f-mark" x={1280 - pad.desktop} y={header} width={pad.desktop} height={800 - header} />
+          <rect class="f-mark" x={sidebar} y={header} width={1280 - sidebar} height={pad.desktop} />
+          <rect class="f-mark" x={sidebar} y={800 - pad.desktop} width={1280 - sidebar} height={pad.desktop} />
+          <rect class="f-plain" x="0" y="0" width="1280" height={header} />
+          <rect class="f-line" x="0" y={header - 2} width="1280" height="2" />
+          <rect class="f-indicator" x="20" y="12" width="24" height="24" rx="6" />
+          <rect class="f-skel" x="52" y="16" width="88" height="16" rx="4" />
+          <rect class="f-field" x="480" y="8" width="400" height="32" rx="8" />
+          <circle class="f-skel" cx="1248" cy="24" r="16" />
+          <path class="s-dim" d="M924 2v44M918 2h12M918 46h12" />
+          <text class="t-dim" x="940" y="32" font-size="22">48</text>
+          <rect class="f-subtle" x="0" y={header} width={sidebar} height={800 - header} />
+          <rect class="f-line" x={sidebar - 2} y={header} width="2" height={800 - header} />
+          {menu.map((i) => (
+            <g>
+              <rect class={i === 0 ? 'f-selected' : 'f-subtle'} x="8" y={56 + i * 36} width={sidebar - 16} height="32" rx="6" />
+              {i === 0 && <rect class="f-indicator" x="8" y={62} width="4" height="20" rx="2" />}
+              <rect class="f-skel" x="20" y={64 + i * 36} width="16" height="16" rx="4" />
+              <rect class="f-skel" x="40" y={67 + i * 36} width={150 - i * 12} height="10" rx="5" />
+            </g>
+          ))}
+          <path class="s-dim" d={`M8 752h${sidebar - 16}M8 746v12M${sidebar - 8} 746v12`} />
+          <text class="t-dim" x={sidebar / 2} y="740" font-size="22" text-anchor="middle">{sidebar}</text>
+          <text class="t-dim" x={sidebar + pad.desktop / 2} y="470" font-size="20" text-anchor="middle">24</text>
+          <rect class="f-skel" x={cx} y="84" width="280" height="24" rx="6" />
+          <rect class="f-primary" x={cx + cw - 120} y="80" width="120" height="32" rx="8" />
+          {cards.map((c, i) => (
+            <g>
+              {i > 0 && <rect class="f-mark" x={c.x - gutter.desktop} y="136" width={gutter.desktop} height="112" />}
+              <rect class="f-surface" x={c.x} y="136" width={c.w} height="112" rx="12" />
+              <rect class="f-skel" x={c.x + 24} y="160" width="100" height="12" rx="6" />
+              <rect class="f-skel" x={c.x + 24} y="188" width="64" height="28" rx="6" />
+            </g>
+          ))}
+          <text class="t-dim" x={cards[1].x - gutter.desktop / 2} y="202" font-size="20" text-anchor="middle">24</text>
+          <rect class="f-surface" x={cx} y="272" width={cw} height={800 - pad.desktop - 272} rx="12" />
+          <rect class="f-skel" x={cx + 24} y="296" width="200" height="16" rx="8" />
+          {[0, 1, 2, 3, 4, 5, 6, 7].map((r) => (
+            <g>
+              <rect class="f-line" x={cx + 24} y={336 + r * 52} width={cw - 48} height="2" />
+              <rect class="f-skel-subtle" x={cx + 24} y={356 + r * 52} width="180" height="12" rx="6" />
+              <rect class="f-skel-subtle" x={cx + 320} y={356 + r * 52} width="120" height="12" rx="6" />
+              <rect class="f-skel-subtle" x={cx + 560} y={356 + r * 52} width="96" height="12" rx="6" />
+            </g>
+          ))}
+          <circle class="c-call" cx="320" cy="24" r="20" /><text class="t-call" x="320" y="24" font-size="22">1</text>
+          <circle class="c-call" cx={sidebar / 2} cy="400" r="20" /><text class="t-call" x={sidebar / 2} y="400" font-size="22">2</text>
+          <circle class="c-call" cx={sidebar + pad.desktop / 2} cy="420" r="20" /><text class="t-call" x={sidebar + pad.desktop / 2} y="420" font-size="22">3</text>
+          <circle class="c-call" cx={cx + 312} cy="96" r="20" /><text class="t-call" x={cx + 312} y="96" font-size="22">4</text>
+          <circle class="c-call" cx={cx + cw - 40} cy="304" r="20" /><text class="t-call" x={cx + cw - 40} y="304" font-size="22">5</text>
+        </svg>
+        <figcaption>{vi ? <Fragment><b>Cửa sổ rộng 1280 px.</b> Menu bên 280 px; nội dung 952 px giữa hai lề trang 24 px. Vùng tô màu là lề và gutter.</Fragment> : <Fragment><b>Window 1280 px wide.</b> Side navigation 280 px; content 952 px between 24 px page margins. Tinted areas are margins and gutters.</Fragment>}</figcaption>
+      </figure>
+      <figure class="ly-phone">
+        <svg class="ly-svg" viewBox="0 0 360 720" role="img" aria-label={L('Phone page at 360 px: a 48 px header with a menu button that opens the side navigation as a drawer, 16 px page margins, a page title, a 40 px main action across the width, and cards stacked in one or two columns.', 'Trang trên điện thoại ở 360 px: header 48 px với nút menu mở menu bên thành drawer, lề trang 16 px, tiêu đề trang, thao tác chính cao 40 px trải ngang, và các card xếp một hoặc hai cột.')}>
+          <rect class="f-page" x="0" y="0" width="360" height="720" />
+          <rect class="f-mark" x="0" y={header} width={pad.phone} height={720 - header} />
+          <rect class="f-mark" x={360 - pad.phone} y={header} width={pad.phone} height={720 - header} />
+          <rect class="f-mark" x="0" y={header} width="360" height={pad.phone} />
+          <rect class="f-mark" x="0" y={720 - pad.phone} width="360" height={pad.phone} />
+          <rect class="f-plain" x="0" y="0" width="360" height={header} />
+          <rect class="f-line" x="0" y={header - 2} width="360" height="2" />
+          <path class="s-icon" d="M18 16h20M18 24h20M18 32h20" />
+          <rect class="f-indicator" x="56" y="12" width="24" height="24" rx="6" />
+          <rect class="f-skel" x="88" y="16" width="72" height="16" rx="4" />
+          <circle class="f-skel" cx="328" cy="24" r="16" />
+          <rect class="f-skel" x={pad.phone} y="68" width="180" height="24" rx="6" />
+          <rect class="f-primary" x={pad.phone} y="108" width={pw} height="40" rx="8" />
+          <rect class="f-surface" x={pad.phone} y="164" width={pw} height="96" rx="12" />
+          <rect class="f-skel" x={pad.phone + 16} y="184" width="100" height="12" rx="6" />
+          <rect class="f-skel" x={pad.phone + 16} y="208" width="64" height="28" rx="6" />
+          <rect class="f-mark" x={pcol(2) - gutter.phone} y="276" width={gutter.phone} height="96" />
+          <rect class="f-surface" x={pcol(0)} y="276" width={pspan(2)} height="96" rx="12" />
+          <rect class="f-surface" x={pcol(2)} y="276" width={pspan(2)} height="96" rx="12" />
+          <rect class="f-skel" x={pcol(0) + 16} y="296" width="80" height="12" rx="6" />
+          <rect class="f-skel" x={pcol(2) + 16} y="296" width="80" height="12" rx="6" />
+          <rect class="f-surface" x={pad.phone} y="388" width={pw} height="316" rx="12" />
+          <rect class="f-skel" x={pad.phone + 16} y="404" width="120" height="14" rx="7" />
+          {[0, 1, 2, 3, 4].map((r) => (
+            <g>
+              <rect class="f-line" x={pad.phone + 16} y={436 + r * 52} width={pw - 32} height="2" />
+              <rect class="f-skel-subtle" x={pad.phone + 16} y={456 + r * 52} width="150" height="12" rx="6" />
+            </g>
+          ))}
+        </svg>
+        <figcaption>{vi ? <Fragment><b>Cửa sổ rộng 360 px.</b> Menu bên mở thành drawer từ nút menu.</Fragment> : <Fragment><b>Window 360 px wide.</b> The side navigation opens as a drawer from the menu button.</Fragment>}</figcaption>
+      </figure>
+    </div>
+    <ol class="ly-legend">
+      <li><span>{vi ? <Fragment><b>Header.</b> Cao 48 px, trải hết chiều ngang: logo, tìm kiếm, tài khoản.</Fragment> : <Fragment><b>Header.</b> 48 px high, across the full width: logo, search, account.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Menu bên.</b> 280 px khi mở, 64 px khi là rail. Thành drawer dưới 1024 px.</Fragment> : <Fragment><b>Side navigation.</b> 280 px open, 64 px as a rail. A drawer below 1024 px.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Lề trang.</b> 16, 24 hoặc 32 px, theo độ rộng cửa sổ.</Fragment> : <Fragment><b>Page margin.</b> 16, 24 or 32 px, by window width.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Page header.</b> Breadcrumb, tiêu đề và nút hành động của trang, cách nội dung 24 px.</Fragment> : <Fragment><b>Page header.</b> Breadcrumb, title and page actions, 24 px above the content.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Nội dung.</b> Trên lưới, Full, Wide hoặc Narrow. Các card cách nhau 24 px.</Fragment> : <Fragment><b>Content.</b> On the grid, full, wide or narrow. Cards 24 px apart.</Fragment>}</span></li>
+    </ol>
+  </div>
+)}
+
+{kind === 'grid' && (
+  <div class="ly-root">
+    <div class="ly-pair">
+      <figure>
+        <svg class="ly-svg" viewBox="0 0 1280 560" role="img" aria-label={L('Grid overlay at 1280 px: twelve columns with 24 px gutters inside 24 px page margins, next to the 280 px side navigation. Four cards span three columns each; below them a main panel spans eight columns and a side panel four.', 'Lưới ở 1280 px: mười hai cột với gutter 24 px trong lề trang 24 px, cạnh menu bên 280 px. Bốn card mỗi card chiếm ba cột; bên dưới là panel chính chiếm tám cột và panel bên chiếm bốn cột.')}>
+          <rect class="f-page" x="0" y="0" width="1280" height="560" />
+          <rect class="f-mark" x={sidebar} y={header} width={pad.desktop} height={560 - header} />
+          <rect class="f-mark" x={1280 - pad.desktop} y={header} width={pad.desktop} height={560 - header} />
+          {Array.from({ length: 12 }, (_, i) => <rect class="f-col" x={col(i)} y={header} width={colW} height={560 - header} />)}
+          <rect class="f-plain" x="0" y="0" width="1280" height={header} />
+          <rect class="f-line" x="0" y={header - 2} width="1280" height="2" />
+          <rect class="f-indicator" x="20" y="12" width="24" height="24" rx="6" />
+          <rect class="f-skel" x="52" y="16" width="88" height="16" rx="4" />
+          <rect class="f-subtle" x="0" y={header} width={sidebar} height={560 - header} />
+          <rect class="f-line" x={sidebar - 2} y={header} width="2" height={560 - header} />
+          {cards.map((c) => <rect class="f-block" x={c.x} y="96" width={c.w} height="112" rx="12" />)}
+          <rect class="f-block" x={col(0)} y="232" width={span(8)} height="296" rx="12" />
+          <rect class="f-block" x={col(8)} y="232" width={span(4)} height="296" rx="12" />
+          <text class="t-ink" x={col(0) + span(8) / 2} y="388" font-size="26" text-anchor="middle">span 8</text>
+          <text class="t-ink" x={col(8) + span(4) / 2} y="388" font-size="26" text-anchor="middle">span 4</text>
+          <text class="t-ink" x={cards[0].x + cards[0].w / 2} y="160" font-size="26" text-anchor="middle">span 3</text>
+          <text class="t-dim" x={col(1) - gutter.desktop / 2} y="84" font-size="20" text-anchor="middle">24</text>
+          <text class="t-dim" x={sidebar + pad.desktop / 2} y="84" font-size="20" text-anchor="middle">24</text>
+          <text class="t-dim" x={sidebar / 2} y="300" font-size="22" text-anchor="middle">{sidebar}</text>
+        </svg>
+        <figcaption>{vi ? <Fragment><b>Cửa sổ rộng 1280 px.</b> 12 cột, gutter 24 px, lề trang 24 px.</Fragment> : <Fragment><b>Window 1280 px wide.</b> 12 columns, 24 px gutters, 24 px page margins.</Fragment>}</figcaption>
+      </figure>
+      <figure class="ly-phone">
+        <svg class="ly-svg" viewBox="0 0 360 640" role="img" aria-label={L('Grid overlay at 360 px: four columns with 16 px gutters inside 16 px page margins. One card spans the full width, two span half, four small tiles span one column each, and a panel spans the full width.', 'Lưới ở 360 px: bốn cột với gutter 16 px trong lề trang 16 px. Một card trải hết chiều ngang, hai card mỗi card một nửa, bốn ô nhỏ mỗi ô một cột, và một panel trải hết chiều ngang.')}>
+          <rect class="f-page" x="0" y="0" width="360" height="640" />
+          <rect class="f-mark" x="0" y={header} width={pad.phone} height={640 - header} />
+          <rect class="f-mark" x={360 - pad.phone} y={header} width={pad.phone} height={640 - header} />
+          {Array.from({ length: 4 }, (_, i) => <rect class="f-col" x={pcol(i)} y={header} width={pColW} height={640 - header} />)}
+          <rect class="f-plain" x="0" y="0" width="360" height={header} />
+          <rect class="f-line" x="0" y={header - 2} width="360" height="2" />
+          <path class="s-icon" d="M18 16h20M18 24h20M18 32h20" />
+          <rect class="f-indicator" x="56" y="12" width="24" height="24" rx="6" />
+          <rect class="f-block" x={pcol(0)} y="64" width={pw} height="96" rx="12" />
+          <rect class="f-block" x={pcol(0)} y="176" width={pspan(2)} height="96" rx="12" />
+          <rect class="f-block" x={pcol(2)} y="176" width={pspan(2)} height="96" rx="12" />
+          {[0, 1, 2, 3].map((i) => <rect class="f-block" x={pcol(i)} y="288" width={pColW} height="72" rx="10" />)}
+          <rect class="f-block" x={pcol(0)} y="376" width={pw} height="248" rx="12" />
+          <text class="t-ink" x="180" y="120" font-size="22" text-anchor="middle">span 4</text>
+          <text class="t-ink" x={pcol(0) + pspan(2) / 2} y="232" font-size="22" text-anchor="middle">span 2</text>
+          <text class="t-ink" x={pcol(2) + pspan(2) / 2} y="232" font-size="22" text-anchor="middle">span 2</text>
+          <text class="t-ink" x={pcol(0) + pColW / 2} y="332" font-size="18" text-anchor="middle">1</text>
+          <text class="t-dim" x={pcol(1) - gutter.phone / 2} y="516" font-size="18" text-anchor="middle">16</text>
+        </svg>
+        <figcaption>{vi ? <Fragment><b>Cửa sổ rộng 360 px.</b> 4 cột, gutter và lề 16 px.</Fragment> : <Fragment><b>Window 360 px wide.</b> 4 columns, 16 px gutters and margins.</Fragment>}</figcaption>
+      </figure>
+    </div>
+  </div>
+)}
+
+{kind === 'widths' && (
+  <div class="ly-widths ly-root">
+    {widths.map((w) => (
+      <figure>
+        <svg class="ly-svg" viewBox={`0 0 ${W} ${H}`} role="img" aria-label={vi ? `Trang ${w.name} trên cửa sổ 1920 px, menu bên đang mở. Page header (breadcrumb, tiêu đề và nút hành động) trải hết vùng nội dung. Bên dưới, ${w.name === 'Full' ? 'nội dung lấp đầy vùng cạnh menu bên, trong lề trang 32 px' : `nội dung rộng tối đa ${w.max}, không tính lề trang, và được căn giữa trong vùng cạnh menu bên`}.` : `${w.name} page on a 1920 px window with the side navigation open. The page header (breadcrumb, title and page actions) spans the whole content area. Below it, ${w.name === 'Full' ? 'the content fills the area beside the side navigation, inside 32 px page margins' : `the content is at most ${w.max} wide, not counting the page margins, and is centred in the area beside the side navigation`}.`}>
+          <rect class="f-page" x="0" y="0" width={W} height={H} />
+          {w.name !== 'Full' && <rect class="f-mark" x={area.x} y={hb} width={w.fx - area.x} height={H - hb} />}
+          {w.name !== 'Full' && <rect class="f-mark" x={w.fx + w.frame} y={hb} width={area.x + area.w - w.fx - w.frame} height={H - hb} />}
+          <rect class="f-plain" x="0" y="0" width={W} height={header} />
+          <rect class="f-line" x="0" y={header - 2} width={W} height="2" />
+          <rect class="f-indicator" x="20" y="12" width="24" height="24" rx="6" />
+          <rect class="f-subtle" x="0" y={header} width={sidebar} height={H - header} />
+          <rect class="f-line" x={sidebar - 2} y={header} width="2" height={H - header} />
+          {menu.map((i) => <rect class="f-skel" x="32" y={80 + i * 64} width={200 - i * 16} height="24" rx="12" />)}
+          <rect class="f-skel-subtle" x={ph.x} y="80" width="96" height="16" rx="8" />
+          <rect class="f-skel-subtle" x={ph.x + 112} y="80" width="128" height="16" rx="8" />
+          <rect class="f-skel" x={ph.x} y="108" width="480" height="40" rx="10" />
+          {w.name !== 'Narrow' && <rect class="f-field" x={ph.x + ph.w - 384} y="104" width="168" height="48" rx="10" />}
+          {w.name !== 'Narrow' && <rect class="f-primary" x={ph.x + ph.w - 200} y="104" width="200" height="48" rx="10" />}
+          <rect class="f-line" x={ph.x} y={hb - 4} width={ph.w} height="4" />
+          {w.name === 'Full' && (
+            <g>
+              <rect class="f-surface" x={w.x} y="204" width={w.w} height={H - 204 - wm} rx="20" />
+              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((r) => (
+                <g>
+                  <rect class="f-line" x={w.x + 40} y={278 + r * 74} width={w.w - 80} height="4" />
+                  <rect class="f-skel-subtle" x={w.x + 40} y={302 + r * 74} width="320" height="20" rx="10" />
+                  <rect class="f-skel-subtle" x={w.x + 560} y={302 + r * 74} width="240" height="20" rx="10" />
+                  <rect class="f-skel-subtle" x={w.x + 1000} y={302 + r * 74} width="200" height="20" rx="10" />
+                </g>
+              ))}
+            </g>
+          )}
+          {w.name === 'Wide' && (
+            <g>
+              {[0, 1, 2, 3].map((i) => <rect class="f-surface" x={w.x + i * ((w.w - 72) / 4 + 24)} y="204" width={(w.w - 72) / 4} height="184" rx="20" />)}
+              <rect class="f-surface" x={w.x} y="412" width={(w.w - 24) * 2 / 3} height={H - 412 - wm} rx="20" />
+              <rect class="f-surface" x={w.x + (w.w - 24) * 2 / 3 + 24} y="412" width={(w.w - 24) / 3} height={H - 412 - wm} rx="20" />
+            </g>
+          )}
+          {w.name === 'Narrow' && (
+            <g>
+              {[0, 1, 2, 3, 4].map((i) => (
+                <g>
+                  <rect class="f-skel" x={w.x} y={212 + i * 146} width="200" height="20" rx="10" />
+                  <rect class="f-field" x={w.x} y={248 + i * 146} width={w.w} height="64" rx="12" />
+                </g>
+              ))}
+              <rect class="f-primary" x={w.x} y="956" width="200" height="64" rx="12" />
+            </g>
+          )}
+        </svg>
+        <figcaption><b>{w.name}, {w.max.toLowerCase()}.</b> <span>{w.use}</span></figcaption>
+      </figure>
+    ))}
+  </div>
+)}
+
+{kind === 'controls' && (
+  <div class="ly-controls ly-root">
+    <figure>
+      <div class="ly-controls-stage">
+        <span class="ly-ruler"><span class="ly-field is-small">Search orders</span></span>
+        <span class="sp-btn is-small">Filter</span>
+      </div>
+      <figcaption><b>{L('Small, 24 px', 'Nhỏ, 24 px')}</b><span>{L('Dense tables and their toolbars, filters, tags.', 'Bảng dày đặc và thanh công cụ của chúng, bộ lọc, tag.')}</span></figcaption>
+    </figure>
+    <figure>
+      <div class="ly-controls-stage">
+        <span class="ly-ruler"><span class="ly-field is-default">Store URL</span></span>
+        <span class="sp-btn is-primary">Save</span>
+      </div>
+      <figcaption><b>{L('Default, 32 px', 'Mặc định, 32 px')}</b><span>{L('Forms, buttons, the header, toolbars. Everything else.', 'Form, nút, header, thanh công cụ. Mọi chỗ còn lại.')}</span></figcaption>
+    </figure>
+    <figure>
+      <div class="ly-controls-stage">
+        <span class="ly-ruler"><span class="ly-field is-large">Email</span></span>
+        <span class="sp-btn is-primary is-large">Sign in</span>
+      </div>
+      <figcaption><b>{L('Large, 40 px', 'Lớn, 40 px')}</b><span>{L('Sign-in and onboarding. Optional for the main action on touch screens.', 'Đăng nhập và onboarding. Có thể dùng cho thao tác chính trên màn hình cảm ứng.')}</span></figcaption>
+    </figure>
+  </div>
+)}
+
+{kind === 'breakpoints' && (
+  <figure class="ly-figure ly-root">
+    <ol class="ly-bp" aria-label={L('Breakpoints from narrow to wide', 'Các breakpoint từ hẹp đến rộng')}>
+      {bands.map((b) => (
+        <li style={`flex: ${b.size} 1 0`}>
+          <b>{b.name}</b>
+          <span>{b.min === 0 ? '0' : `${b.min}`}{b.name === 'xl' ? '+' : `–${b.min + b.size - 1}`}</span>
+        </li>
+      ))}
+    </ol>
+    <figcaption>{vi ? <Fragment>Độ rộng cửa sổ tính bằng px, vẽ đúng tỉ lệ; <code>xl</code> không có mốc trên. Mọi màn hình cũng phải dùng được ở 320 px.</Fragment> : <Fragment>Window width in px, drawn to scale; <code>xl</code> has no upper end. Every screen must also work at 320 px.</Fragment>}</figcaption>
+  </figure>
+)}
+
+{kind === 'navlabels' && (
+  <figure class="ly-figure ly-root">
+    <svg class="ly-svg" viewBox="0 0 760 248" role="img" aria-label={L('Side navigation 280 px wide. Three short labels fit. A long label is cut with an ellipsis, and its full text shows in a tooltip next to it.', 'Menu bên rộng 280 px. Ba nhãn ngắn vừa đủ. Một nhãn dài bị cắt bằng dấu ba chấm, và nội dung đầy đủ hiện trong tooltip bên cạnh.')}>
+      <rect class="f-page" x="0" y="0" width="760" height="248" />
+      <rect class="f-subtle" x="0" y="0" width={sidebar} height="248" />
+      <rect class="f-line" x={sidebar - 2} y="0" width="2" height="248" />
+      {(vi ? ['Đơn hàng', 'Sản phẩm', 'Cài đặt đồng bộ'] : ['Orders', 'Products', 'Sync settings']).map((label, i) => (
+        <g>
+          <rect class="f-subtle" x="8" y={16 + i * 36} width={sidebar - 16} height="32" rx="6" />
+          <rect class="f-skel" x="20" y={24 + i * 36} width="16" height="16" rx="4" />
+          <text class="t-label" x="40" y={37 + i * 36} font-size="14">{label}</text>
+        </g>
+      ))}
+      <rect class="f-selected" x="8" y="124" width={sidebar - 16} height="32" rx="6" />
+      <rect class="f-skel" x="20" y="132" width="16" height="16" rx="4" />
+      <text class="t-label" x="40" y="145" font-size="14">{L('Online store → ERP field mappi…', 'Ánh xạ trường Cửa hàng onli…')}</text>
+      <rect class="f-inverse" x={sidebar + 12} y="120" width="300" height="40" rx="6" />
+      <text class="t-inverse" x={sidebar + 24} y="145" font-size="14">{L('Online store → ERP field mapping rules', 'Ánh xạ trường Cửa hàng online → ERP')}</text>
+      <path class="s-dim" d={`M8 208h${sidebar - 16}M8 202v12M${sidebar - 8} 202v12`} />
+      <text class="t-dim" x={sidebar / 2} y="234" font-size="14" text-anchor="middle">{sidebar} px</text>
+    </svg>
+    <figcaption>{vi ? <Fragment><b>Nhãn dài</b> bị cắt bằng dấu ba chấm và hiện đầy đủ trong tooltip. Menu bên giữ nguyên độ rộng.</Fragment> : <Fragment><b>A long label</b> is cut with an ellipsis and shows in full in a tooltip. The side navigation keeps its width.</Fragment>}</figcaption>
+  </figure>
+)}
+
+{kind === 'pageheader' && (
+  <figure class="ly-figure ly-root">
+    <svg class="ly-svg" viewBox="0 0 1000 340" role="img" aria-label={L('Page header at the top of the content, 24 px from the side navigation and the header: a breadcrumb, then 8 px below it the title with a status badge on the left and two page actions on the right, then 4 px below the title a one-line description, then a row of tabs, and 24 px below that the start of the content.', 'Page header ở đầu vùng nội dung, cách menu bên và header 24 px: breadcrumb, cách 8 px bên dưới là tiêu đề với badge trạng thái bên trái và hai nút hành động bên phải, cách tiêu đề 4 px là một dòng mô tả, rồi tới hàng tab, và cách 24 px bên dưới là phần đầu của nội dung.')}>
+      <rect class="f-page" x="0" y="0" width="1000" height="340" />
+      <rect class="f-subtle" x="0" y="0" width="24" height="340" />
+      <rect class="f-mark" x="24" y="0" width="24" height="340" />
+      <rect class="f-mark" x="24" y="0" width="952" height="24" />
+      <rect class="f-mark" x="976" y="0" width="24" height="340" />
+      <rect class="f-skel" x="48" y="28" width="72" height="12" rx="6" />
+      <rect class="f-skel" x="132" y="28" width="96" height="12" rx="6" />
+      <rect class="f-skel" x="48" y="52" width="220" height="28" rx="6" />
+      <rect class="f-selected" x="280" y="56" width="72" height="20" rx="10" />
+      <rect class="f-field" x="760" y="50" width="96" height="32" rx="8" />
+      <rect class="f-primary" x="868" y="50" width="108" height="32" rx="8" />
+      <rect class="f-skel-subtle" x="48" y="88" width="420" height="12" rx="6" />
+      {[0, 1, 2].map((i) => <rect class={i === 0 ? 'f-skel' : 'f-skel-subtle'} x={48 + i * 96} y="120" width="72" height="12" rx="6" />)}
+      <rect class="f-indicator" x="48" y="144" width="72" height="3" />
+      <rect class="f-line" x="48" y="146" width="928" height="2" />
+      <rect class="f-surface" x="48" y="172" width="928" height="168" rx="12" />
+      <path class="s-dim" d="M300 40v12M294 40h12M294 52h12" /><text class="t-dim" x="314" y="51" font-size="14">8</text>
+      <path class="s-dim" d="M500 80v8M494 80h12M494 88h12" /><text class="t-dim" x="514" y="89" font-size="14">4</text>
+      <path class="s-dim" d="M600 148v24M594 148h12M594 172h12" /><text class="t-dim" x="614" y="165" font-size="14">24</text>
+      <text class="t-dim" x="36" y="200" font-size="14" text-anchor="middle">24</text>
+      <circle class="c-call" cx="250" cy="34" r="12" /><text class="t-call" x="250" y="34" font-size="13">1</text>
+      <circle class="c-call" cx="374" cy="66" r="12" /><text class="t-call" x="374" y="66" font-size="13">2</text>
+      <circle class="c-call" cx="740" cy="66" r="12" /><text class="t-call" x="740" y="66" font-size="13">3</text>
+      <circle class="c-call" cx="490" cy="94" r="12" /><text class="t-call" x="490" y="94" font-size="13">4</text>
+      <circle class="c-call" cx="350" cy="126" r="12" /><text class="t-call" x="350" y="126" font-size="13">5</text>
+    </svg>
+    <ol class="ly-legend">
+      <li><span>{vi ? <Fragment><b>Breadcrumb.</b> Các trang cấp trên của trang này.</Fragment> : <Fragment><b>Breadcrumb.</b> The pages above this one.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Tiêu đề và trạng thái.</b> <code>heading.large</code>, kèm badge khi trang có trạng thái.</Fragment> : <Fragment><b>Title and status.</b> <code>heading.large</code>, with a badge when the page has a state.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Nút hành động của trang.</b> Nút chính đứng cuối, bên phải.</Fragment> : <Fragment><b>Page actions.</b> The main action last, on the right.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Mô tả.</b> Không bắt buộc, một dòng.</Fragment> : <Fragment><b>Description.</b> Optional, one line.</Fragment>}</span></li>
+      <li><span>{vi ? <Fragment><b>Tab hoặc bộ lọc.</b> Không bắt buộc. Các góc nhìn của cùng một trang.</Fragment> : <Fragment><b>Tabs or filters.</b> Optional. Views of the same page.</Fragment>}</span></li>
+    </ol>
+  </figure>
+)}

package/dist/docs/src/components/Logo.astro

@@ -0,0 +1,25 @@
+---
+import { logoImg, type LogoKind } from '../lib/brand';
+
+// One logo, drawn once per tone when `tone` is "auto"; CSS in chrome.css shows the tone that
+// fits the page theme.
+interface Props {
+  kind: LogoKind;
+  // "auto" follows the site theme; "light" and "dark" are for a fixed background.
+  tone?: 'auto' | 'light' | 'dark';
+  iconHeight: number;
+  alt?: string;
+  class?: string;
+}
+
+const { kind, tone = 'auto', iconHeight, alt = '', class: className } = Astro.props;
+const tones = tone === 'auto' ? (['light', 'dark'] as const) : ([tone] as const);
+---
+
+{tones.map((t) => (
+  <img
+    class:list={[className, tone === 'auto' && (t === 'light' ? 'logo-light' : 'logo-dark')]}
+    alt={alt}
+    {...logoImg(kind, t, iconHeight)}
+  />
+))}

package/dist/docs/src/components/PhaseTable.astro

@@ -0,0 +1,22 @@
+---
+import StatusBadge from './StatusBadge.astro';
+import type { ReleasePhase } from '../lib/release-phases';
+
+const phases: { id: ReleasePhase; meaning: string; production: string }[] = [
+  { id: 'early-access', meaning: 'Being explored. It may change a lot or be removed. Feedback wanted.', production: "Only with the design system team's agreement." },
+  { id: 'beta', meaning: 'Ready for controlled use. The API may still change, with notice in the changelog.', production: 'Yes, but follow the changelog.' },
+  { id: 'ga', meaning: 'Stable and supported. Breaking changes follow deprecation.', production: 'Yes.' },
+  { id: 'deprecated', meaning: 'Being replaced. A migration path is documented.', production: 'No new usage. Migrate existing usage.' },
+];
+---
+
+<div class="table-wrap">
+  <table>
+    <thead><tr><th>Phase</th><th>Meaning</th><th>Can I use it in production?</th></tr></thead>
+    <tbody>
+      {phases.map((phase) => (
+        <tr><td><StatusBadge status={phase.id} link={false} /></td><td>{phase.meaning}</td><td>{phase.production}</td></tr>
+      ))}
+    </tbody>
+  </table>
+</div>

package/dist/docs/src/components/RoleGuides.astro

@@ -0,0 +1,48 @@
+---
+// Three role cards on Get started, each with the four pages to read first.
+const roles = [
+  {
+    title: 'Design',
+    href: '/get-started/design/',
+    summary: 'Build screens from tokens and components.',
+    links: [
+      ['Start from tokens', '/foundations/tokens/'],
+      ['Use existing components', '/components/'],
+      ['Design for every state', '/foundations/styles/interaction-states/'],
+      ['Check accessibility early', '/foundations/guidelines/accessibility/'],
+    ],
+  },
+  {
+    title: 'Develop',
+    href: '/get-started/develop/',
+    summary: 'Ship the tokens, theme and lint rules.',
+    links: [
+      ['Use the token CSS', '/foundations/tokens/all-tokens/'],
+      ['Theme Ant Design Vue', '/tools/ant-design-vue-theme/'],
+      ['Add the lint rules', '/tools/stylelint/'],
+      ['Docs for AI agents', '/tools/ai-agents/'],
+    ],
+  },
+  {
+    title: 'Content',
+    href: '/get-started/content/',
+    summary: 'Write clear, consistent product copy.',
+    links: [
+      ['Content guidelines', '/foundations/guidelines/content/'],
+      ['Quick rules', '/get-started/content/#quick-rules'],
+      ['Button labels', '/components/button/usage/'],
+      ['Accessible wording', '/foundations/guidelines/accessibility/'],
+    ],
+  },
+];
+---
+
+<div class="role-cards">
+  {roles.map((role) => (
+    <section class="role-card" aria-labelledby={`role-${role.title.toLowerCase()}`}>
+      <h3 id={`role-${role.title.toLowerCase()}`}><a href={role.href}>{role.title} guide →</a></h3>
+      <p>{role.summary}</p>
+      <ul>{role.links.map(([label, href]) => <li><a href={href}>{label}</a></li>)}</ul>
+    </section>
+  ))}
+</div>