@beehexa/design-rules 0.0.0-stage → 2611.3.3

package/dist/docs/src/content-vi/foundations/styles/typography/usage.mdx

@@ -0,0 +1,144 @@
+---
+title: Cách dùng
+description: Text style nào dùng cho phần nào trên màn hình, và các quy tắc về thứ bậc, độ dễ đọc và chữ dài.
+order: 1
+---
+import TypeDemo from '../../../../components/TypeDemo.astro';
+
+## Text style nào dùng ở đâu
+
+Giao diện sản phẩm dùng các text style này; trang component ghi rõ text style của từng phần. Khi một phần không có trong danh sách, dùng text style của phần gần nhất có cùng vai trò.
+
+| Phần | Text style |
+|---|---|
+| **Cấu trúc trang** | |
+| Tiêu đề trang | `heading.large` |
+| Tiêu đề phần | `heading.medium` |
+| Breadcrumb | `body.small` |
+| Tiêu đề lớn ở màn hình trống và onboarding | `heading.xlarge` |
+| **Khung chứa** | |
+| Tiêu đề card, panel và drawer | `heading.small` |
+| Tiêu đề mục trong lưới hoặc danh sách nhiều card | `heading.xsmall` |
+| Mô tả của card | `body.default` |
+| Tiêu đề dialog | `heading.medium` |
+| Nội dung dialog | `body.default` |
+| Tiêu đề nhóm trong form, danh sách hoặc menu | `heading.xsmall` |
+| **Form** | |
+| Nhãn của trường nhập | `label.default` |
+| Chữ trong ô nhập và placeholder | `body.default` |
+| Helper text và thông báo lỗi | `body.small` |
+| Chữ của checkbox và radio | `body.default` |
+| **Hành động và điều hướng** | |
+| Nút, nút dạng link | `label.default` |
+| Nút nhỏ | `label.small` |
+| Tab, mục menu, mục điều hướng bên | `label.default` |
+| Mục điều hướng trên cùng | `label.default` |
+| **Dữ liệu** | |
+| Header của bảng | `label.small` |
+| Ô của bảng | `body.default` |
+| Số trong bảng | `body.default` với số đều cột |
+| ID, SKU, key trong bảng | `code.default` |
+| Badge, tag, trạng thái | `label.small` |
+| Số trong card, như một KPI | `heading.large` với số đều cột |
+| Nhãn dưới con số | `body.small` |
+| **Phản hồi** | |
+| Tiêu đề banner và toast | `heading.xsmall` |
+| Nội dung banner và toast | `body.default` |
+| Tooltip | `body.small` |
+| Mốc thời gian, metadata | `body.small` |
+| **Đọc** | |
+| Bài hướng dẫn, tài liệu, nội dung email | `body.large` |
+| Code trong dòng | Font của `code.default` ở cỡ chữ xung quanh |
+
+<TypeDemo kind="ui" />
+
+## Trên website và tài liệu
+
+Website và tài liệu, kể cả site này, dùng cùng các text style. Có hai điểm khác giao diện sản phẩm: tiêu đề trang lớn hơn một bậc, và đoạn văn dùng `body.large`, vì người dùng đọc kỹ các trang này thay vì lướt.
+
+| Phần | Text style |
+|---|---|
+| **Header của site** | |
+| Mục điều hướng trên cùng | `label.default` |
+| Ô tìm kiếm | `body.default` |
+| Gợi ý phím tắt | `label.small` |
+| Tiêu đề kết quả tìm kiếm | `label.default` |
+| Mô tả kết quả tìm kiếm | `body.small` |
+| **Sidebar** | |
+| Mục lớn | `heading.xsmall` |
+| Nhãn nhóm | `label.small` |
+| Trang và trang con | `label.default` |
+| **Mục lục** | |
+| Tiêu đề ("Trên trang này") | `heading.xsmall` |
+| Link | `label.default` |
+| **Trang** | |
+| Breadcrumb | `body.small` |
+| Tiêu đề trang | `heading.xlarge` |
+| Đoạn dẫn dưới tiêu đề | `body.large` |
+| Tiêu đề phần (`h2`) | `heading.large` |
+| Tiêu đề phần con (`h3`) | `heading.medium` |
+| Tiêu đề nhỏ (`h4`) | `heading.small` |
+| Đoạn văn và danh sách | `body.large` |
+| Chữ trong bảng | `body.default` |
+| Header của bảng | `label.small` |
+| Khối code | `code.default` |
+| Code trong dòng | Font của `code.default` ở cỡ chữ xung quanh |
+| Tiêu đề card | `heading.small` |
+| Chữ trong card | `body.default` |
+| Badge trạng thái | `label.small` |
+| Tab | `label.default` |
+| Link trang trước và trang sau | Nhãn `body.small`, tên trang `heading.small` |
+| Footer và thông tin trang | `body.small` |
+
+## Cách dùng text style
+
+Trong CSS, mỗi text style là một khai báo `font`:
+
+```css
+.page-title  { font: var(--bh-font-heading-large); }
+.card-title  { font: var(--bh-font-heading-small); }
+.field-label { font: var(--bh-font-label-default); }
+.helper-text { font: var(--bh-font-body-small); }
+.kpi-value   { font: var(--bh-font-heading-large); font-variant-numeric: tabular-nums; }
+```
+
+- Dùng nguyên cả text style. Không lấy cỡ chữ của nó rồi tự đặt độ đậm hay line height: một text style gần giống trông như lỗi khi đứng cạnh text style thật.
+- Không tạo text style mới cho một màn hình. Nếu thiếu một vai trò, hãy thêm nó vào đây trước.
+- Đặt màu riêng, bằng các token `color.text.*`.
+- Thể hiện mục được chọn, như trang hoặc tab hiện tại, bằng màu và vạch chỉ báo, không bằng chữ đậm hơn: chữ đậm hơn sẽ rộng ra và đẩy các chữ bên cạnh.
+- Chữ đậm trong đoạn văn (`<strong>`, `<b>`) là semibold, 600. Độ đậm 700 chỉ dành cho text style display.
+- Khi một dòng trộn nhiều text style, như mã đơn hàng ở `code.default`, một badge và số tiền ở `body.default`, hãy căn chữ theo đường chân chữ (`vertical-align: baseline`, hoặc `align-items: baseline` trong flex), không căn giữa. Mỗi text style nằm khác nhau trong line height của nó, nên căn giữa làm chữ ở các độ cao khác nhau.
+
+
+## Cỡ chữ trên màn hình nhỏ
+
+- Text style của sản phẩm giữ nguyên cỡ trên mọi màn hình. Chữ đổi cỡ giữa các breakpoint làm màn hình nhiều dữ liệu khó làm quen hơn.
+- Text style display giảm cỡ dưới 768 px (`breakpoint.md`): `display.large` và `display.medium` thành `display.small`, còn `display.small` thành `heading.xlarge`.
+- Mọi cỡ chữ tính bằng `rem`, nên chữ theo cài đặt và mức zoom trình duyệt của người đọc.
+
+## Thứ bậc
+
+- Mỗi trang một tiêu đề trang (`h1`). Đi xuống các cấp tiêu đề theo thứ tự, không bỏ cấp.
+- Thể hiện cấu trúc bằng tiêu đề, không bằng chữ đậm hay đoạn văn cỡ lớn hơn.
+- Thể hiện mức quan trọng bằng cỡ chữ và độ đậm trước. Không chỉ dựa vào màu.
+
+## Dễ đọc
+
+- Giữ mỗi dòng khoảng 100 ký tự trở xuống: đặt nội dung chữ dài trên trang Narrow (xem [Độ rộng trang](/vi/foundations/styles/layout/page-widths/)).
+- Căn chữ trái, mép phải để tự nhiên. Không căn đều hai bên; chỉ căn giữa chữ ngắn và đứng riêng.
+- Viết hoa chữ đầu câu. Không viết hoa toàn bộ: đọc chậm hơn, và trong tiếng Việt các dấu chen vào dòng trên.
+- Dùng chữ nghiêng ít thôi, cho tên tác phẩm và thuật ngữ.
+
+## Chữ dài
+
+Tên đơn hàng, URL và ID không có giới hạn độ dài.
+
+- Cắt ngắn chữ một dòng bằng dấu ba chấm, và luôn có cách khác để đọc đủ giá trị, như tooltip hoặc màn hình chi tiết.
+- Cho các chuỗi dài liền mạch, như URL và key, được xuống dòng ở bất kỳ đâu thay vì tràn ra ngoài.
+- Không bao giờ cắt ngắn chữ mà người dùng cần để hoàn thành công việc.
+
+## Khả năng tiếp cận
+
+- Chữ cần độ tương phản tối thiểu 4.5 : 1 với nền; chữ lớn (24 px, hoặc 18.66 px đậm) tối thiểu 3 : 1. Xem [Màu sắc](/vi/foundations/styles/color/).
+- Đặt cỡ chữ bằng `rem` và không bao giờ chặn zoom, để chữ phóng được tới 200% (WCAG 1.4.4).
+- Không đặt chữ trong ảnh. Chữ thật phóng to được, dịch được và đọc thành tiếng được.

package/dist/docs/src/content-vi/foundations/styles/typography/vietnamese.mdx

@@ -0,0 +1,46 @@
+---
+title: Tiếng Việt
+description: Line height cao hơn cho chữ tiếng Việt, và cách giữ cho dấu không bị cắt.
+order: 2
+---
+import TypeDemo from '../../../../components/TypeDemo.astro';
+
+**Chữ tiếng Việt dùng line height cao hơn, để dấu chồng nhau không chạm dòng trên và không bị cắt.**
+
+Chữ được đánh dấu `lang="vi"` dùng line height cao hơn. Tiếng Việt có một số chữ hoa mang hai dấu chồng nhau, như Ấ, Ổ và Ẫ, nên cao vượt hẳn các chữ khác. Ở line height của tiếng Anh, các dấu này chạm vào dòng trên và bị cắt trong các thành phần một dòng có ẩn phần tràn, như ô bảng bị cắt ngắn và chữ trên nút.
+
+Line height là khoảng cách từ dòng này tới dòng kế tiếp, nên chỉ thấy rõ khi chữ có từ hai dòng. Mỗi dải tô màu bên dưới là một dòng:
+
+<TypeDemo kind="leading" />
+
+Lớp tiếng Việt chỉ đổi line height; cỡ chữ, độ đậm và font giữ nguyên. Mỗi giá trị là bội số nhỏ nhất của 4 px giữ được mọi chữ tiếng Việt trong line box của chính nó, nên dấu không chạm dòng trên và không bị cắt.
+
+| Text style | Tiếng Anh | Tiếng Việt |
+|---|---|---|
+| `display.large` | <span class="type-num">72/80</span> | <span class="type-num">72/108</span> |
+| `display.medium` | <span class="type-num">60/68</span> | <span class="type-num">60/88</span> |
+| `display.small` | <span class="type-num">48/56</span> | <span class="type-num">48/72</span> |
+| `heading.xlarge` | <span class="type-num">32/40</span> | <span class="type-num">32/48</span> |
+| `heading.large` | <span class="type-num">24/32</span> | <span class="type-num">24/40</span> |
+| `heading.medium` | <span class="type-num">20/28</span> | <span class="type-num">20/32</span> |
+| `heading.small` | <span class="type-num">16/24</span> | <span class="type-num">16/24</span> (giữ nguyên) |
+| `heading.xsmall` | <span class="type-num">14/20</span> | <span class="type-num">14/24</span> |
+| `body.large` | <span class="type-num">16/24</span> | <span class="type-num">16/24</span> (giữ nguyên) |
+| `body.default` | <span class="type-num">14/20</span> | <span class="type-num">14/24</span> |
+| `body.small` | <span class="type-num">12/16</span> | <span class="type-num">12/20</span> |
+| `label.default` | <span class="type-num">14/20</span> | <span class="type-num">14/24</span> |
+| `label.small` | <span class="type-num">12/16</span> | <span class="type-num">12/20</span> |
+| `code.default` | <span class="type-num">14/20</span> | <span class="type-num">14/20</span> (giữ nguyên) |
+
+Mỗi ô dưới đây là một dòng có ẩn phần tràn, line box được vẽ viền.
+
+<TypeDemo kind="vietnamese" />
+
+- **Đánh dấu ngôn ngữ.** Đặt `lang="vi"` trên `<html>` cho trang tiếng Việt, hoặc trên thành phần chứa chữ tiếng Việt. Chữ được đánh dấu ngôn ngữ khác bên trong nó, như `lang="en"`, trở về giá trị tiếng Anh.
+- **Dùng token.** Token text style tự chuyển khi gặp `lang="vi"` (`:lang(vi)` trong `tokens.css`). Code không đọc được biến CSS, như theme Ant Design Vue, lấy giá trị `vi` từ `tokens.js`.
+- **Cho component giãn ra.** Control hoặc dòng có chiều cao cố định phải vừa line height tiếng Việt: nhãn 14 px cần dòng cao 24 px, nên hãy tính chiều cao từ padding cộng line height, không đặt một con số cố định.
+- **Không cắt chữ theo chiều dọc.** Tránh `overflow: hidden` trên khung không có padding dọc. Khi buộc phải cắt ngắn, hãy cắt theo chiều ngang và để line box giữ các dấu.
+- **Kiểm tra bằng chuỗi này** ở mọi component và mọi trạng thái: **ỔN ĐỊNH · ẤN ĐỘ · ẪM · Ở ĐÂY CÓ ƯU ĐÃI**.
+
+JetBrains Mono vẽ dấu tiếng Việt bên trong line box của nó, nên `code.default` giữ 14/20. Site này cũng phục vụ bộ ký tự tiếng Việt của font này, nên tiếng Việt trong code không bị chuyển sang font khác.
+

package/dist/docs/src/content-vi/foundations/styles/z-index.mdx

@@ -0,0 +1,9 @@
+---
+title: "Z-index"
+description: "Thứ tự các lớp chồng lên nhau: cái gì nằm trên cái gì, từ header dính đầu trang tới dialog và toast."
+order: 8.5
+planned:
+  - "Tên các lớp và thứ tự"
+  - "Mỗi lớp phủ dùng lớp nào: dropdown, popover, tooltip, dialog, drawer, toast"
+  - "Lớp và đổ bóng đi cùng nhau thế nào"
+---

package/dist/docs/src/content.config.ts

@@ -0,0 +1,68 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+export const releasePhases = ['early-access', 'beta', 'ga', 'deprecated'] as const;
+export const componentTabs = ['examples', 'code', 'usage', 'accessibility', 'changelog'] as const;
+
+// Get started, Foundations, Tools and Release phases. The file path is the URL:
+// src/content/foundations/styles/color.mdx -> /foundations/styles/color/
+const docsSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  status: z.enum(releasePhases).optional(),
+  // Position in the sidebar, lowest first.
+  order: z.number().default(100),
+  // Shorter name for the sidebar and breadcrumb, such as "Overview".
+  sidebarLabel: z.string().optional(),
+  // Put the page in a named sidebar group instead of the folder's group.
+  sidebarGroup: z.string().optional(),
+  // Who the page is for, shown under the title: "Designers, developers".
+  audience: z.string().optional(),
+  // Team that owns the page, shown at the bottom.
+  owner: z.string().optional(),
+  updated: z.coerce.date().optional(),
+  // Pages without content show an "In development" notice with this list.
+  planned: z.array(z.string()).optional(),
+});
+const docsPattern = '{get-started,foundations,tools,release-phases}/**/*.{md,mdx}';
+const docs = defineCollection({ loader: glob({ base: './src/content', pattern: docsPattern }), schema: docsSchema });
+
+// Vietnamese texts of docs pages, at the same paths under src/content-vi/. A page without one
+// is shown in English under /vi/ with a notice (src/routes/DocPage.astro).
+const docsVi = defineCollection({ loader: glob({ base: './src/content-vi', pattern: docsPattern }), schema: docsSchema });
+
+// One meta.json per component: src/content/components/<name>/meta.json
+const components = defineCollection({
+  loader: glob({
+    base: './src/content/components',
+    pattern: '*/meta.json',
+    // The id is the folder name: button/meta.json -> button
+    generateId: ({ entry }) => entry.split('/')[0],
+  }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    status: z.enum(releasePhases).optional(),
+    group: z.string(),
+  }),
+});
+
+// One file per tab: src/content/components/<name>/<tab>.mdx -> /components/<name>/<tab>/
+const componentPages = defineCollection({
+  loader: glob({ base: './src/content/components', pattern: '*/*.{md,mdx}' }),
+  schema: z.object({
+    description: z.string().optional(),
+  }),
+});
+
+const news = defineCollection({
+  loader: glob({ base: './src/content/news', pattern: '*.{md,mdx}' }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    date: z.coerce.date(),
+  }),
+});
+
+export const collections = { docs, docsVi, components, componentPages, news };

package/dist/docs/src/lib/brand.ts

@@ -0,0 +1,57 @@
+// Logo files used by the site. The chosen logo (24/10/2026) has its wordmark in Inter Display 500.
+// The other option that was compared, weight 550, is archived in public/brand/logos/archive/d-550/
+// with its wordmark geometry in ARCHIVE_D550 (logo-geometry.ts). The site never shows it; to bring
+// it back, copy its files over the current ones and its geometry into WORDMARKS, then run
+// `npm run figures`.
+//
+// public/brand/logos/
+//   lockups/        master lockups; the viewBox includes the clear space. Use for downloads.
+//   icon/           the icon on its own, with clear space.
+//   app/            app icons and the avatar (3-side tile rule).
+//   ui/             the same artwork cropped to the icon's height, for use inside this site only.
+//                   beehexa-design-*: the "beehexa design" lockup used for this site.
+//   ui/png/         the header logo as PNG at 3× (shown at 1×; see SiteHeader.astro).
+//   archive/d-550/  the 550 option, kept for reference.
+
+// The ui/ files are cropped so the icon fills the full height; files whose text has descenders
+// ("y" in HexaSync, "g" in design) keep them below the icon.
+//
+// Screen sizes: give the icon a whole-pixel height and put it at a whole-pixel position, so
+// the top, bottom and side walls of the hexagon land on pixel edges. 28 px and its multiples
+// (56, 84) are the sharpest: the icon is 28 triangle sides tall, so each side is then a whole
+// number of pixels. The site always uses the master drawing: a version redrawn for the pixel grid was
+// tried on 23/10/2026 and dropped, because it broke the regular hexagon and the 30° angle.
+export type LogoKind = 'beehexa' | 'beehexa-design' | 'hexasync' | 'icon';
+
+// Artwork size in drawing units. The icon is 2112 units tall (2 x-heights) in every lockup.
+const sizes: Record<Exclude<LogoKind, 'icon'>, { height: number; width: number }> = {
+  beehexa: { height: 2112, width: 9980 },
+  'beehexa-design': { height: 2233, width: 16389 },
+  hexasync: { height: 2219, width: 11523 },
+};
+
+const ui = (name: string) => `/brand/logos/ui/${name}.svg`;
+
+export function logoFile(kind: LogoKind, tone: 'light' | 'dark') {
+  return kind === 'icon' ? ui('beehexa-icon-yellow') : ui(`${kind}-${tone}`);
+}
+
+// Image attributes for one logo file at a given icon height in px.
+// The width and height attributes reserve space while the file loads; the style sets the exact
+// height and lets the width follow the artwork, so a rounded width never stretches it.
+export function logoImg(kind: LogoKind, tone: 'light' | 'dark', iconHeight: number) {
+  const { height: units, width } =
+    kind === 'icon' ? { height: 300, width: 259.8 } : sizes[kind];
+  const h = +((iconHeight * units) / (kind === 'icon' ? 300 : 2112)).toFixed(3);
+  return {
+    src: logoFile(kind, tone),
+    height: Math.round(h),
+    width: Math.round((h * width) / units),
+    style: `height:${h}px;width:auto`,
+  };
+}
+
+// Where people report a problem or send feedback, until a shared channel is chosen.
+export const feedbackEmail = 'hello@beehexa.com';
+export const feedbackHref = (path: string) =>
+  `mailto:${feedbackEmail}?subject=${encodeURIComponent(`beehexa.design feedback: ${path}`)}`;

package/dist/docs/src/lib/contrast.ts

@@ -0,0 +1,34 @@
+// WCAG 2.x contrast ratio. Colours are #rrggbb, or #rrggbbaa laid over a background.
+
+const rgb = (hex: string) => {
+  const h = hex.replace('#', '');
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+};
+
+/** Lays a colour with alpha (#rrggbbaa) over an opaque background. */
+export function flatten(color: string, background: string): string {
+  const h = color.replace('#', '');
+  if (h.length !== 8) return color;
+  const a = parseInt(h.slice(6, 8), 16) / 255;
+  const fg = rgb(color);
+  const bg = rgb(background);
+  return '#' + fg.map((c, i) => Math.round(c * a + bg[i] * (1 - a)).toString(16).padStart(2, '0')).join('');
+}
+
+const luminance = (hex: string) => {
+  const [r, g, b] = rgb(hex).map((c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/** Contrast of `fg` on `bg`; both may carry alpha, laid over `base`. */
+export function contrast(fg: string, bg: string, base = '#ffffff'): number {
+  const back = flatten(bg, base);
+  const front = flatten(fg, back);
+  const [a, b] = [luminance(front), luminance(back)].sort((x, y) => y - x);
+  return (a + 0.05) / (b + 0.05);
+}
+
+export const ratio = (n: number) => `${(Math.floor(n * 10) / 10).toFixed(1)}:1`;

package/dist/docs/src/lib/i18n.ts

@@ -0,0 +1,152 @@
+// Languages. English pages live at /…, Vietnamese pages at /vi/….
+// Navigation works on English paths ("base paths"); links are localised when rendered.
+// A page without a Vietnamese text shows the English text under /vi/, with a notice.
+
+export const langs = ['en', 'vi'] as const;
+
+// The Vietnamese site is open: language switch in the header, hreflang links, /vi/ pages in the sitemap.
+export const viPublic = true;
+export type Lang = (typeof langs)[number];
+
+export const langOf = (pathname: string): Lang => (pathname === '/vi' || pathname.startsWith('/vi/') ? 'vi' : 'en');
+
+// The English path of any page: /vi/foundations/ -> /foundations/.
+export const basePath = (pathname: string) => (langOf(pathname) === 'vi' ? pathname.slice(3) || '/' : pathname);
+
+// Page links get the /vi prefix; files (with an extension), anchors and other sites don't.
+export function localize(href: string, lang: Lang) {
+  if (lang === 'en' || !href.startsWith('/') || href.startsWith('/vi/')) return href;
+  const path = href.split(/[?#]/)[0];
+  if (/\.[a-z0-9]+$/i.test(path)) return href;
+  return `/vi${href}`;
+}
+
+export const ui = {
+  en: {
+    designSystem: 'Design system',
+    news: 'News',
+    search: 'Search',
+    searchLabel: 'Search the design system',
+    searchEmpty: 'No pages match. Try a shorter word.',
+    themeDark: 'Switch to dark theme',
+    themeLight: 'Switch to light theme',
+    menu: 'Open site menu',
+    closeMenu: 'Close menu',
+    home: 'Home',
+    language: 'Language',
+    otherLang: 'Tiếng Việt',
+    otherLangShort: 'VI',
+    overview: 'Overview',
+    onThisPage: 'On this page',
+    previous: 'Previous',
+    next: 'Next',
+    updated: 'Updated',
+    owner: 'Owner',
+    for: 'For',
+    feedback: 'Report a problem or give feedback',
+    changelog: 'Changelog',
+    breadcrumb: 'Breadcrumb',
+    pager: 'Previous and next page',
+    terms: 'Terms',
+    privacy: 'Privacy',
+    cookies: 'Cookies',
+    legal: 'Legal',
+    inDevTitle: 'This page is in development',
+    inDevText: 'We are still writing it. It is listed now so you can see where this guidance will live.',
+    inDevPlanned: 'Planned content',
+    inDevSooner: 'Need it sooner?',
+    inDevAsk: 'Tell us what you are looking for',
+    notTranslated: '',
+    readEnglish: '',
+    allComponents: 'All components',
+    dateLocale: 'en-GB',
+  },
+  vi: {
+    designSystem: 'Design system',
+    news: 'Tin mới',
+    search: 'Tìm kiếm',
+    searchLabel: 'Tìm trong design system',
+    searchEmpty: 'Không có trang nào khớp. Thử một từ ngắn hơn.',
+    themeDark: 'Chuyển sang giao diện tối',
+    themeLight: 'Chuyển sang giao diện sáng',
+    menu: 'Mở menu',
+    closeMenu: 'Đóng menu',
+    home: 'Trang chủ',
+    language: 'Ngôn ngữ',
+    otherLang: 'English',
+    otherLangShort: 'EN',
+    overview: 'Tổng quan',
+    onThisPage: 'Trên trang này',
+    previous: 'Trang trước',
+    next: 'Trang sau',
+    updated: 'Cập nhật',
+    owner: 'Phụ trách',
+    for: 'Dành cho',
+    feedback: 'Báo lỗi hoặc góp ý',
+    changelog: 'Nhật ký thay đổi',
+    breadcrumb: 'Đường dẫn',
+    pager: 'Trang trước và trang sau',
+    terms: 'Điều khoản',
+    privacy: 'Quyền riêng tư',
+    cookies: 'Cookie',
+    legal: 'Pháp lý',
+    inDevTitle: 'Trang này đang được viết',
+    inDevText: 'Nội dung chưa xong. Trang được liệt kê trước để bạn biết hướng dẫn này sẽ nằm ở đâu.',
+    inDevPlanned: 'Nội dung dự kiến',
+    inDevSooner: 'Cần sớm hơn?',
+    inDevAsk: 'Cho chúng tôi biết bạn đang tìm gì',
+    notTranslated: 'Trang này chưa có bản tiếng Việt, nội dung bên dưới là bản tiếng Anh.',
+    readEnglish: 'Xem trang tiếng Anh',
+    allComponents: 'Tất cả component',
+    dateLocale: 'vi-VN',
+  },
+} as const;
+
+export const t = (lang: Lang) => ui[lang];
+
+// Section and sidebar group names. Product and technical terms stay in English.
+const names: Record<string, string> = {
+  'Get started': 'Bắt đầu',
+  Foundations: 'Nền tảng',
+  Components: 'Component',
+  Tools: 'Công cụ',
+  News: 'Tin mới',
+  'Design tokens': 'Design token',
+  Guidelines: 'Nguyên tắc',
+  Styles: 'Phong cách',
+  Reference: 'Tham khảo',
+  Overview: 'Tổng quan',
+  'All components': 'Tất cả component',
+  Actions: 'Hành động',
+  // Page names for the sidebar, breadcrumb and pager, used while a page has no Vietnamese text.
+  Design: 'Thiết kế',
+  Develop: 'Phát triển',
+  Content: 'Nội dung',
+  'Get help': 'Trợ giúp',
+  'Release phases': 'Giai đoạn phát hành',
+  'Tokens overview': 'Tổng quan token',
+  'All design tokens': 'Tất cả design token',
+  Accessibility: 'Khả năng tiếp cận',
+  Color: 'Màu sắc',
+  Typography: 'Kiểu chữ',
+  Icons: 'Icon',
+  Library: 'Thư viện',
+  Usage: 'Cách dùng',
+  Spacing: 'Khoảng cách',
+  Layout: 'Bố cục',
+  'App frame': 'Khung ứng dụng',
+  'Page widths': 'Độ rộng trang',
+  Grid: 'Lưới',
+  Breakpoints: 'Breakpoint',
+  'Size and density': 'Kích thước và mật độ',
+  Radius: 'Bo góc',
+  Border: 'Viền',
+  Elevation: 'Độ nổi',
+  Motion: 'Chuyển động',
+  'Interaction states': 'Trạng thái tương tác',
+  'Ant Design Vue theme': 'Theme Ant Design Vue',
+  'Stylelint rules': 'Quy tắc Stylelint',
+  'ESLint rules': 'Quy tắc ESLint',
+  'Docs for AI agents': 'Tài liệu cho AI agent',
+};
+export const name = (label: string, lang: Lang) => (lang === 'vi' ? names[label] ?? label : label);

package/dist/docs/src/lib/icons.ts

@@ -0,0 +1,46 @@
+// Beehexa icons: Lucide (lucide.dev, ISC licence), used directly. No Beehexa icon package.
+// Rules: decision record 26 (27/10/2026, updated 28/10/2026). The site draws its icons with @lucide/astro; the
+// Library page reads every icon from lucide-static at build time (src/pages/foundations/styles/icons/lucide.json.ts).
+
+export const lucideVersion = '1.62.0';
+
+// The sizes, in px, and what each is for. The stroke is Lucide's default: 2 on the 24 grid,
+// scaled with the icon.
+export const iconSizes = [
+  { size: 16, stroke: '1.33', use: 'Default. Next to 14 px text: buttons, menus, tables, form fields.', useVi: 'Mặc định. Cạnh chữ 14 px: nút, menu, bảng, ô nhập.' },
+  { size: 20, stroke: '1.67', use: 'Next to 16 px text, and in toolbars and the page header.', useVi: 'Cạnh chữ 16 px, trong thanh công cụ và page header.' },
+  { size: 24, stroke: '2', use: 'An icon on its own: a status in a card, a small empty state.', useVi: 'Icon đứng riêng: trạng thái trong card, trạng thái trống nhỏ.' },
+  { size: 32, stroke: '2.67', use: 'Empty states only.', useVi: 'Chỉ cho trạng thái trống.' },
+] as const;
+
+// One icon per meaning. Every name is checked against lucide-static 1.62.0 by the Library
+// endpoint at build time: a name that is not in Lucide fails the build.
+export const iconActions = [
+  { meaning: 'Sync, refresh, retry', meaningVi: 'Đồng bộ, làm mới, thử lại', icon: 'refresh-cw', note: 'Spins while a sync runs.', noteVi: 'Xoay khi đang đồng bộ.' },
+  { meaning: 'Add, create', meaningVi: 'Thêm, tạo', icon: 'plus' },
+  { meaning: 'Edit', meaningVi: 'Sửa', icon: 'pencil' },
+  { meaning: 'Delete, remove', meaningVi: 'Xoá, gỡ', icon: 'trash', note: 'Destructive: always with a label or a confirmation.', noteVi: 'Mang tính phá huỷ: luôn có nhãn hoặc bước xác nhận.' },
+  { meaning: 'Copy', meaningVi: 'Sao chép', icon: 'copy' },
+  { meaning: 'Search', meaningVi: 'Tìm kiếm', icon: 'search' },
+  { meaning: 'Settings', meaningVi: 'Cài đặt', icon: 'settings' },
+  { meaning: 'Filter', meaningVi: 'Lọc', icon: 'funnel' },
+  { meaning: 'Close, dismiss, clear', meaningVi: 'Đóng, bỏ qua, xoá nội dung', icon: 'x' },
+  { meaning: 'More actions', meaningVi: 'Thao tác khác', icon: 'ellipsis', note: 'Vertical (ellipsis-vertical) only at the end of a table row.', noteVi: 'Dạng dọc (ellipsis-vertical) chỉ dùng ở cuối dòng bảng.' },
+  { meaning: 'Opens another site', meaningVi: 'Mở trang khác', icon: 'external-link' },
+  { meaning: 'Download, export', meaningVi: 'Tải xuống, xuất', icon: 'download' },
+  { meaning: 'Upload, import', meaningVi: 'Tải lên, nhập', icon: 'upload' },
+  { meaning: 'Success, synced', meaningVi: 'Thành công, đã đồng bộ', icon: 'circle-check' },
+  { meaning: 'Warning', meaningVi: 'Cảnh báo', icon: 'triangle-alert' },
+  { meaning: 'Error, failed', meaningVi: 'Lỗi, thất bại', icon: 'circle-x' },
+  { meaning: 'Info', meaningVi: 'Thông tin', icon: 'info' },
+  { meaning: 'Help', meaningVi: 'Trợ giúp', icon: 'circle-question-mark' },
+  { meaning: 'Connection', meaningVi: 'Kết nối', icon: 'plug', note: 'Disconnected: unplug.', noteVi: 'Mất kết nối: unplug.' },
+  { meaning: 'Webhook', meaningVi: 'Webhook', icon: 'webhook' },
+  { meaning: 'Store, sales channel', meaningVi: 'Cửa hàng, kênh bán', icon: 'store' },
+  { meaning: 'Order', meaningVi: 'Đơn hàng', icon: 'receipt' },
+  { meaning: 'Product', meaningVi: 'Sản phẩm', icon: 'package' },
+  { meaning: 'Inventory, warehouse', meaningVi: 'Tồn kho, kho hàng', icon: 'warehouse' },
+  { meaning: 'User, account', meaningVi: 'Người dùng, tài khoản', icon: 'user' },
+  { meaning: 'Date', meaningVi: 'Ngày', icon: 'calendar' },
+  { meaning: 'Time, schedule', meaningVi: 'Thời gian, lịch chạy', icon: 'clock' },
+] as const;

package/dist/docs/src/lib/logo-geometry.ts

@@ -0,0 +1,30 @@
+// Logo geometry, copied from the master SVGs in public/brand/logos (do not edit by hand;
+// regenerate from the masters if they change). Units are the masters' drawing units:
+// the icon is 2112 tall (300 × 7.04), exactly 2 x-heights, with its top at y = -1801 and its
+// centre on the middle of the cap height; the wordmark baseline is y = 0.
+// x-height of Inter = 1056 = one side of the hexagon = the clear space.
+
+export const ICON_PATH = "M129.9 0L259.8 75L259.8 225L129.9 300L0 225L0 75ZM27.8 176.8L129.9 235.7L232 176.8L232 208.9L129.9 267.9L27.8 208.9ZM27.8 112.5L129.9 171.4L232 112.5L232 144.6L129.9 203.6L27.8 144.6ZM129.9 32.1L222.7 85.7L129.9 139.3L37.1 85.7Z";
+export const ICON_SCALE = 7.04;
+export const ICON_TOP = -1801;
+export const ICON_H = 2112;
+export const ICON_W = 1829; // 259.8 × 7.04
+export const X_HEIGHT = 1056;
+export const BAND = ICON_W / 28; // one band of the triangular grid (h)
+
+export type Version = 'light' | 'dark' | 'white' | 'graphite';
+
+export const COLORS = { yellow: '#FCB017', graphite: '#2B2A28', white: '#FFFFFF' } as const;
+
+type Word = { x: number; d: string; width: number; height: number };
+// The chosen wordmarks (Inter Display 500).
+export const WORDMARKS: Record<'beehexa' | 'hexasync', Word> = {
+  beehexa: {"x": 2363.3, "d": "M655 21Q587 21 525.5 1Q464 -19 413.5 -59.5Q363 -100 328 -161H326V0H119V-1490H330V-903H332Q366 -962 415.5 -1000Q465 -1038 526.5 -1057.5Q588 -1077 656 -1077Q793 -1077 895.5 -1007.5Q998 -938 1055.5 -814.5Q1113 -691 1113 -528Q1113 -365 1056 -241.5Q999 -118 896 -48.5Q793 21 655 21ZM612 -161Q698 -161 762 -203.5Q826 -246 862.5 -327.5Q899 -409 899 -528Q899 -648 862.5 -730Q826 -812 762 -854Q698 -896 612 -896Q522 -896 455.5 -850.5Q389 -805 352.5 -722.5Q316 -640 316 -528Q316 -418 352.5 -335Q389 -252 455.5 -206.5Q522 -161 612 -161Z M1750 24Q1593 24 1480.5 -47Q1368 -118 1307.5 -242.5Q1247 -367 1247 -526Q1247 -688 1310 -812.5Q1373 -937 1484 -1008.5Q1595 -1080 1739 -1080Q1851 -1080 1941.5 -1040Q2032 -1000 2097 -926.5Q2162 -853 2197 -752Q2232 -651 2232 -528V-471H1342V-631H2121L2028 -582Q2028 -680 1993 -752.5Q1958 -825 1893.5 -864.5Q1829 -904 1741 -904Q1654 -904 1590 -864.5Q1526 -825 1490.5 -752.5Q1455 -680 1455 -582V-491Q1455 -391 1490 -314.5Q1525 -238 1591.5 -195Q1658 -152 1753 -152Q1822 -152 1875 -173.5Q1928 -195 1963 -233Q1998 -271 2013 -321H2216Q2197 -219 2131.5 -141.5Q2066 -64 1967.5 -20Q1869 24 1750 24Z M2865 24Q2708 24 2595.5 -47Q2483 -118 2422.5 -242.5Q2362 -367 2362 -526Q2362 -688 2425 -812.5Q2488 -937 2599 -1008.5Q2710 -1080 2854 -1080Q2966 -1080 3056.5 -1040Q3147 -1000 3212 -926.5Q3277 -853 3312 -752Q3347 -651 3347 -528V-471H2457V-631H3236L3143 -582Q3143 -680 3108 -752.5Q3073 -825 3008.5 -864.5Q2944 -904 2856 -904Q2769 -904 2705 -864.5Q2641 -825 2605.5 -752.5Q2570 -680 2570 -582V-491Q2570 -391 2605 -314.5Q2640 -238 2706.5 -195Q2773 -152 2868 -152Q2937 -152 2990 -173.5Q3043 -195 3078 -233Q3113 -271 3128 -321H3331Q3312 -219 3246.5 -141.5Q3181 -64 3082.5 -20Q2984 24 2865 24Z M3740 -608V0H3529V-1490H3740V-794H3687Q3739 -936 3831.5 -1006.5Q3924 -1077 4055 -1077Q4164 -1077 4250.5 -1029.5Q4337 -982 4387 -889Q4437 -796 4437 -658V0H4226V-632Q4226 -759 4165.5 -823.5Q4105 -888 3995 -888Q3923 -888 3865.5 -859Q3808 -830 3774 -768Q3740 -706 3740 -608Z M5126 24Q4969 24 4856.5 -47Q4744 -118 4683.5 -242.5Q4623 -367 4623 -526Q4623 -688 4686 -812.5Q4749 -937 4860 -1008.5Q4971 -1080 5115 -1080Q5227 -1080 5317.5 -1040Q5408 -1000 5473 -926.5Q5538 -853 5573 -752Q5608 -651 5608 -528V-471H4718V-631H5497L5404 -582Q5404 -680 5369 -752.5Q5334 -825 5269.5 -864.5Q5205 -904 5117 -904Q5030 -904 4966 -864.5Q4902 -825 4866.5 -752.5Q4831 -680 4831 -582V-491Q4831 -391 4866 -314.5Q4901 -238 4967.5 -195Q5034 -152 5129 -152Q5198 -152 5251 -173.5Q5304 -195 5339 -233Q5374 -271 5389 -321H5592Q5573 -219 5507.5 -141.5Q5442 -64 5343.5 -20Q5245 24 5126 24Z M5637 0 6074 -605 6071 -474 5661 -1056H5902L6028 -868Q6070 -804 6109.5 -742Q6149 -680 6189 -617H6101Q6143 -680 6182.5 -742Q6222 -804 6265 -868L6393 -1056H6630L6216 -474L6218 -606L6648 0H6407L6260 -214Q6219 -276 6180.5 -335.5Q6142 -395 6102 -456H6186Q6146 -395 6106.5 -335.5Q6067 -276 6026 -214L5876 0Z M7093 17Q6988 17 6905.5 -19Q6823 -55 6775 -126Q6727 -197 6727 -302Q6727 -392 6761.5 -450Q6796 -508 6855 -542Q6914 -576 6989 -593.5Q7064 -611 7144 -620Q7244 -633 7301.5 -640.5Q7359 -648 7383.5 -664.5Q7408 -681 7408 -719V-728Q7408 -779 7383 -818.5Q7358 -858 7310 -881Q7262 -904 7195 -904Q7128 -904 7076.5 -882Q7025 -860 6994.5 -821.5Q6964 -783 6960 -734H6753Q6758 -835 6814 -912Q6870 -989 6968 -1033Q7066 -1077 7198 -1077Q7295 -1077 7373 -1052Q7451 -1027 7505.5 -980.5Q7560 -934 7588.5 -869Q7617 -804 7617 -724V0H7409V-150H7405Q7383 -107 7345 -69Q7307 -31 7245.5 -7Q7184 17 7093 17ZM7136 -153Q7229 -153 7289.5 -186.5Q7350 -220 7379.5 -275Q7409 -330 7409 -395V-519Q7398 -510 7373.5 -502.5Q7349 -495 7314 -488.5Q7279 -482 7238 -475Q7197 -468 7156 -463Q7098 -455 7048 -436.5Q6998 -418 6967.5 -385Q6937 -352 6937 -298Q6937 -253 6961 -220.5Q6985 -188 7030 -170.5Q7075 -153 7136 -153Z", "width": 9980.0, "height": 2112},
+  hexasync: {"x": 2346.3, "d": "M136 0V-1490H358V-859H1099V-1490H1321V0H1099V-665H358V0Z M2027 24Q1870 24 1757.5 -47Q1645 -118 1584.5 -242.5Q1524 -367 1524 -526Q1524 -688 1587 -812.5Q1650 -937 1761 -1008.5Q1872 -1080 2016 -1080Q2128 -1080 2218.5 -1040Q2309 -1000 2374 -926.5Q2439 -853 2474 -752Q2509 -651 2509 -528V-471H1619V-631H2398L2305 -582Q2305 -680 2270 -752.5Q2235 -825 2170.5 -864.5Q2106 -904 2018 -904Q1931 -904 1867 -864.5Q1803 -825 1767.5 -752.5Q1732 -680 1732 -582V-491Q1732 -391 1767 -314.5Q1802 -238 1868.5 -195Q1935 -152 2030 -152Q2099 -152 2152 -173.5Q2205 -195 2240 -233Q2275 -271 2290 -321H2493Q2474 -219 2408.5 -141.5Q2343 -64 2244.5 -20Q2146 24 2027 24Z M2538 0 2975 -605 2972 -474 2562 -1056H2803L2929 -868Q2971 -804 3010.5 -742Q3050 -680 3090 -617H3002Q3044 -680 3083.5 -742Q3123 -804 3166 -868L3294 -1056H3531L3117 -474L3119 -606L3549 0H3308L3161 -214Q3120 -276 3081.5 -335.5Q3043 -395 3003 -456H3087Q3047 -395 3007.5 -335.5Q2968 -276 2927 -214L2777 0Z M3994 17Q3889 17 3806.5 -19Q3724 -55 3676 -126Q3628 -197 3628 -302Q3628 -392 3662.5 -450Q3697 -508 3756 -542Q3815 -576 3890 -593.5Q3965 -611 4045 -620Q4145 -633 4202.5 -640.5Q4260 -648 4284.5 -664.5Q4309 -681 4309 -719V-728Q4309 -779 4284 -818.5Q4259 -858 4211 -881Q4163 -904 4096 -904Q4029 -904 3977.5 -882Q3926 -860 3895.5 -821.5Q3865 -783 3861 -734H3654Q3659 -835 3715 -912Q3771 -989 3869 -1033Q3967 -1077 4099 -1077Q4196 -1077 4274 -1052Q4352 -1027 4406.5 -980.5Q4461 -934 4489.5 -869Q4518 -804 4518 -724V0H4310V-150H4306Q4284 -107 4246 -69Q4208 -31 4146.5 -7Q4085 17 3994 17ZM4037 -153Q4130 -153 4190.5 -186.5Q4251 -220 4280.5 -275Q4310 -330 4310 -395V-519Q4299 -510 4274.5 -502.5Q4250 -495 4215 -488.5Q4180 -482 4139 -475Q4098 -468 4057 -463Q3999 -455 3949 -436.5Q3899 -418 3868.5 -385Q3838 -352 3838 -298Q3838 -253 3862 -220.5Q3886 -188 3931 -170.5Q3976 -153 4037 -153Z M5289 24Q5110 24 4981 -37Q4852 -98 4782 -212Q4712 -326 4712 -483H4934Q4935 -385 4977 -314.5Q5019 -244 5098.5 -207Q5178 -170 5289 -170Q5391 -170 5465.5 -199Q5540 -228 5582 -281.5Q5624 -335 5624 -408Q5624 -465 5595.5 -507.5Q5567 -550 5504.5 -582Q5442 -614 5338 -638L5175 -677Q4949 -730 4845.5 -827Q4742 -924 4742 -1079Q4742 -1210 4808 -1307.5Q4874 -1405 4994 -1459.5Q5114 -1514 5273 -1514Q5434 -1514 5552 -1457Q5670 -1400 5735.5 -1295Q5801 -1190 5806 -1044H5591Q5583 -1173 5497 -1246.5Q5411 -1320 5270 -1320Q5181 -1320 5111.5 -1290.5Q5042 -1261 5002.5 -1209.5Q4963 -1158 4963 -1090Q4963 -1036 4992 -996Q5021 -956 5083.5 -926Q5146 -896 5248 -871L5409 -833Q5521 -806 5603.5 -768Q5686 -730 5739.5 -679.5Q5793 -629 5819.5 -564.5Q5846 -500 5846 -420Q5846 -286 5777 -186Q5708 -86 5583 -31Q5458 24 5289 24Z M6054 418V240H6168Q6202 240 6226 227.5Q6250 215 6269.5 188Q6289 161 6305 119L6353 -7L5945 -1056H6171L6382 -477Q6411 -395 6438.5 -313.5Q6466 -232 6491 -150H6434Q6459 -232 6486.5 -313.5Q6514 -395 6543 -477L6751 -1056H6974L6494 185Q6464 262 6420 313.5Q6376 365 6318 391.5Q6260 418 6188 418Q6155 418 6121 418Q6087 418 6054 418Z M7328 -608V0H7117V-1056H7324V-794H7275Q7327 -936 7419.5 -1006.5Q7512 -1077 7643 -1077Q7752 -1077 7838.5 -1029.5Q7925 -982 7975 -889Q8025 -796 8025 -658V0H7814V-632Q7814 -759 7753.5 -823.5Q7693 -888 7583 -888Q7511 -888 7453.5 -859Q7396 -830 7362 -768Q7328 -706 7328 -608Z M8715 24Q8564 24 8451 -46Q8338 -116 8274.5 -240.5Q8211 -365 8211 -526Q8211 -689 8274.5 -814Q8338 -939 8451 -1009.5Q8564 -1080 8715 -1080Q8809 -1080 8889.5 -1051.5Q8970 -1023 9031 -971.5Q9092 -920 9129.5 -849.5Q9167 -779 9177 -695H8967Q8959 -740 8939 -777Q8919 -814 8887 -841Q8855 -868 8812.5 -883Q8770 -898 8716 -898Q8625 -898 8560 -852Q8495 -806 8460 -722.5Q8425 -639 8425 -526Q8425 -414 8460 -331.5Q8495 -249 8560 -203.5Q8625 -158 8716 -158Q8770 -158 8812 -172.5Q8854 -187 8884 -214Q8914 -241 8934 -278.5Q8954 -316 8964 -362H9177Q9168 -279 9130.5 -209Q9093 -139 9031.5 -86.5Q8970 -34 8889.5 -5Q8809 24 8715 24Z", "width": 11523.0, "height": 2219.0},
+};
+
+// Archived: the weight-550 option, compared on 22–24/10/2026 (public/brand/logos/archive/d-550/).
+export const ARCHIVE_D550: Record<'beehexa' | 'hexasync', Word> = {
+  beehexa: {"x": 2367.3, "d": "M668 21Q600 21 539 1Q478 -19 428.5 -59.5Q379 -100 345 -161H343V0H115V-1490H347V-905H349Q383 -963 431.5 -1001Q480 -1039 541 -1058Q602 -1077 670 -1077Q806 -1077 908.5 -1008Q1011 -939 1068.5 -815Q1126 -691 1126 -529Q1126 -365 1069 -241Q1012 -117 909.5 -48Q807 21 668 21ZM617 -175Q699 -175 760.5 -216Q822 -257 856.5 -336Q891 -415 891 -529Q891 -643 856.5 -721.5Q822 -800 760.5 -841Q699 -882 617 -882Q531 -882 467 -838Q403 -794 368 -715Q333 -636 333 -529Q333 -422 368 -342.5Q403 -263 467 -219Q531 -175 617 -175Z M1765 24Q1608 24 1493.5 -47Q1379 -118 1317.5 -242.5Q1256 -367 1256 -527Q1256 -688 1319.5 -813Q1383 -938 1495.5 -1009Q1608 -1080 1754 -1080Q1867 -1080 1959 -1040Q2051 -1000 2117 -926.5Q2183 -853 2218.5 -752Q2254 -651 2254 -530V-466H1354V-633H2135L2032 -586Q2032 -680 1998.5 -748.5Q1965 -817 1903.5 -854.5Q1842 -892 1757 -892Q1674 -892 1612.5 -854.5Q1551 -817 1517 -748.5Q1483 -680 1483 -586V-485Q1483 -390 1516.5 -317.5Q1550 -245 1614 -204Q1678 -163 1769 -163Q1836 -163 1887 -183.5Q1938 -204 1971.5 -240Q2005 -276 2020 -324H2240Q2220 -221 2153.5 -142.5Q2087 -64 1987 -20Q1887 24 1765 24Z M2889 24Q2732 24 2617.5 -47Q2503 -118 2441.5 -242.5Q2380 -367 2380 -527Q2380 -688 2443.5 -813Q2507 -938 2619.5 -1009Q2732 -1080 2878 -1080Q2991 -1080 3083 -1040Q3175 -1000 3241 -926.5Q3307 -853 3342.5 -752Q3378 -651 3378 -530V-466H2478V-633H3259L3156 -586Q3156 -680 3122.5 -748.5Q3089 -817 3027.5 -854.5Q2966 -892 2881 -892Q2798 -892 2736.5 -854.5Q2675 -817 2641 -748.5Q2607 -680 2607 -586V-485Q2607 -390 2640.5 -317.5Q2674 -245 2738 -204Q2802 -163 2893 -163Q2960 -163 3011 -183.5Q3062 -204 3095.5 -240Q3129 -276 3144 -324H3364Q3344 -221 3277.5 -142.5Q3211 -64 3111 -20Q3011 24 2889 24Z M3786 -602V0H3554V-1490H3786V-791H3733Q3784 -932 3876.5 -1004.5Q3969 -1077 4104 -1077Q4214 -1077 4299.5 -1029.5Q4385 -982 4434 -889Q4483 -796 4483 -659V0H4251V-626Q4251 -747 4193 -809.5Q4135 -872 4029 -872Q3960 -872 3905 -844Q3850 -816 3818 -756.5Q3786 -697 3786 -602Z M5172 24Q5015 24 4900.5 -47Q4786 -118 4724.5 -242.5Q4663 -367 4663 -527Q4663 -688 4726.5 -813Q4790 -938 4902.5 -1009Q5015 -1080 5161 -1080Q5274 -1080 5366 -1040Q5458 -1000 5524 -926.5Q5590 -853 5625.5 -752Q5661 -651 5661 -530V-466H4761V-633H5542L5439 -586Q5439 -680 5405.5 -748.5Q5372 -817 5310.5 -854.5Q5249 -892 5164 -892Q5081 -892 5019.5 -854.5Q4958 -817 4924 -748.5Q4890 -680 4890 -586V-485Q4890 -390 4923.5 -317.5Q4957 -245 5021 -204Q5085 -163 5176 -163Q5243 -163 5294 -183.5Q5345 -204 5378.5 -240Q5412 -276 5427 -324H5647Q5627 -221 5560.5 -142.5Q5494 -64 5394 -20Q5294 24 5172 24Z M5686 0 6120 -605 6117 -475 5710 -1056H5971L6089 -878Q6131 -813 6169.5 -751Q6208 -689 6247 -626H6158Q6198 -689 6237 -751Q6276 -813 6318 -878L6438 -1056H6695L6284 -475L6287 -606L6713 0H6452L6315 -201Q6274 -264 6236 -323.5Q6198 -383 6160 -445H6243Q6204 -383 6165.5 -323.5Q6127 -264 6085 -201L5946 0Z M7153 17Q7047 17 6965 -18.5Q6883 -54 6835 -125Q6787 -196 6787 -301Q6787 -391 6821 -449.5Q6855 -508 6913.5 -542Q6972 -576 7047.5 -594Q7123 -612 7203 -621Q7302 -633 7359.5 -641Q7417 -649 7441.5 -665.5Q7466 -682 7466 -719V-727Q7466 -776 7442 -813Q7418 -850 7372.5 -871.5Q7327 -893 7263 -893Q7199 -893 7150 -872Q7101 -851 7072.5 -814.5Q7044 -778 7040 -731H6815Q6821 -834 6877.5 -911.5Q6934 -989 7033.5 -1033Q7133 -1077 7268 -1077Q7368 -1077 7447.5 -1052Q7527 -1027 7582.5 -980.5Q7638 -934 7667 -868.5Q7696 -803 7696 -722V0H7468V-149H7464Q7441 -105 7401.5 -67Q7362 -29 7301.5 -6Q7241 17 7153 17ZM7205 -161Q7293 -161 7351.5 -193Q7410 -225 7439 -277.5Q7468 -330 7468 -393V-512Q7456 -504 7432.5 -497Q7409 -490 7375.5 -483Q7342 -476 7303.5 -470Q7265 -464 7224 -458Q7169 -450 7121 -432Q7073 -414 7044 -382.5Q7015 -351 7015 -300Q7015 -257 7038.5 -226Q7062 -195 7104.5 -178Q7147 -161 7205 -161Z", "width": 10063.0, "height": 2112},
+  hexasync: {"x": 2352.3, "d": "M130 0V-1490H373V-867H1087V-1490H1331V0H1087V-655H373V0Z M2034 24Q1877 24 1762.5 -47Q1648 -118 1586.5 -242.5Q1525 -367 1525 -527Q1525 -688 1588.5 -813Q1652 -938 1764.5 -1009Q1877 -1080 2023 -1080Q2136 -1080 2228 -1040Q2320 -1000 2386 -926.5Q2452 -853 2487.5 -752Q2523 -651 2523 -530V-466H1623V-633H2404L2301 -586Q2301 -680 2267.5 -748.5Q2234 -817 2172.5 -854.5Q2111 -892 2026 -892Q1943 -892 1881.5 -854.5Q1820 -817 1786 -748.5Q1752 -680 1752 -586V-485Q1752 -390 1785.5 -317.5Q1819 -245 1883 -204Q1947 -163 2038 -163Q2105 -163 2156 -183.5Q2207 -204 2240.5 -240Q2274 -276 2289 -324H2509Q2489 -221 2422.5 -142.5Q2356 -64 2256 -20Q2156 24 2034 24Z M2548 0 2982 -605 2979 -475 2572 -1056H2833L2951 -878Q2993 -813 3031.5 -751Q3070 -689 3109 -626H3020Q3060 -689 3099 -751Q3138 -813 3180 -878L3300 -1056H3557L3146 -475L3149 -606L3575 0H3314L3177 -201Q3136 -264 3098 -323.5Q3060 -383 3022 -445H3105Q3066 -383 3027.5 -323.5Q2989 -264 2947 -201L2808 0Z M4015 17Q3909 17 3827 -18.5Q3745 -54 3697 -125Q3649 -196 3649 -301Q3649 -391 3683 -449.5Q3717 -508 3775.5 -542Q3834 -576 3909.5 -594Q3985 -612 4065 -621Q4164 -633 4221.5 -641Q4279 -649 4303.5 -665.5Q4328 -682 4328 -719V-727Q4328 -776 4304 -813Q4280 -850 4234.5 -871.5Q4189 -893 4125 -893Q4061 -893 4012 -872Q3963 -851 3934.5 -814.5Q3906 -778 3902 -731H3677Q3683 -834 3739.5 -911.5Q3796 -989 3895.5 -1033Q3995 -1077 4130 -1077Q4230 -1077 4309.5 -1052Q4389 -1027 4444.5 -980.5Q4500 -934 4529 -868.5Q4558 -803 4558 -722V0H4330V-149H4326Q4303 -105 4263.5 -67Q4224 -29 4163.5 -6Q4103 17 4015 17ZM4067 -161Q4155 -161 4213.5 -193Q4272 -225 4301 -277.5Q4330 -330 4330 -393V-512Q4318 -504 4294.5 -497Q4271 -490 4237.5 -483Q4204 -476 4165.5 -470Q4127 -464 4086 -458Q4031 -450 3983 -432Q3935 -414 3906 -382.5Q3877 -351 3877 -300Q3877 -257 3900.5 -226Q3924 -195 3966.5 -178Q4009 -161 4067 -161Z M5330 24Q5149 24 5018.5 -37Q4888 -98 4817.5 -212Q4747 -326 4747 -484H4988Q4988 -391 5029 -323.5Q5070 -256 5147.5 -220Q5225 -184 5332 -184Q5429 -184 5501 -212Q5573 -240 5613.5 -291Q5654 -342 5654 -411Q5654 -466 5625.5 -507Q5597 -548 5535.5 -578.5Q5474 -609 5372 -632L5210 -670Q4986 -722 4881.5 -820.5Q4777 -919 4777 -1075Q4777 -1207 4844 -1305.5Q4911 -1404 5032.5 -1459Q5154 -1514 5316 -1514Q5480 -1514 5599.5 -1457Q5719 -1400 5786 -1294Q5853 -1188 5857 -1041H5624Q5616 -1165 5533 -1235Q5450 -1305 5314 -1305Q5228 -1305 5161.5 -1277Q5095 -1249 5057 -1200Q5019 -1151 5019 -1086Q5019 -1034 5047.5 -996Q5076 -958 5137 -929Q5198 -900 5298 -876L5453 -840Q5568 -814 5651 -776Q5734 -738 5788.5 -687.5Q5843 -637 5869.5 -571.5Q5896 -506 5896 -425Q5896 -289 5826.5 -188Q5757 -87 5630 -31.5Q5503 24 5330 24Z M6102 418V226H6221Q6255 226 6279 214Q6303 202 6321.5 175.5Q6340 149 6355 107L6399 -7L5991 -1056H6237L6440 -491Q6470 -407 6497 -322Q6524 -237 6550 -153H6486Q6512 -237 6539.5 -322Q6567 -407 6596 -491L6797 -1056H7040L6564 179Q6534 259 6489.5 312Q6445 365 6385.5 391.5Q6326 418 6251 418Q6215 418 6177 418Q6139 418 6102 418Z M7408 -602V0H7176V-1056H7404V-791H7355Q7406 -932 7498.5 -1004.5Q7591 -1077 7726 -1077Q7836 -1077 7921.5 -1029.5Q8007 -982 8056 -889Q8105 -796 8105 -659V0H7873V-626Q7873 -747 7815 -809.5Q7757 -872 7651 -872Q7582 -872 7527 -844Q7472 -816 7440 -756.5Q7408 -697 7408 -602Z M8795 24Q8643 24 8528 -46Q8413 -116 8349 -240Q8285 -364 8285 -527Q8285 -689 8349 -814Q8413 -939 8528 -1009.5Q8643 -1080 8795 -1080Q8892 -1080 8974 -1051Q9056 -1022 9118 -969Q9180 -916 9218 -844.5Q9256 -773 9266 -687H9037Q9030 -730 9010.5 -766Q8991 -802 8960.5 -828.5Q8930 -855 8889.5 -869.5Q8849 -884 8797 -884Q8711 -884 8648.5 -840Q8586 -796 8553 -715.5Q8520 -635 8520 -527Q8520 -419 8553 -339Q8586 -259 8648 -215.5Q8710 -172 8797 -172Q8849 -172 8889 -186Q8929 -200 8958 -226Q8987 -252 9006 -289Q9025 -326 9035 -370H9266Q9258 -286 9220 -214Q9182 -142 9119.5 -88.5Q9057 -35 8974.5 -5.5Q8892 24 8795 24Z", "width": 11618.0, "height": 2219.0},
+};