@comitor/ui 3.8.0 → 3.10.0

package/dist/lib/avatar-tone.d.ts

@@ -18,6 +18,16 @@
  * (tokens.ts phải import ngược lại bảng này) — vòng có khởi tạo hằng ở giữa là lỗi TDZ lúc chạy.
  * Nhận bảng màu qua tham số thì phụ thuộc chỉ đi MỘT chiều: tokens.ts → file này.
  */
+/** Bảy sắc màu phụ mà bảng tone đọc (gold đi riêng qua thang của nó). */
+interface AvatarToneHues {
+    readonly teal: string;
+    readonly green: string;
+    readonly red: string;
+    readonly yellow: string;
+    readonly blue: string;
+    readonly purple: string;
+    readonly pink: string;
+}
 /** Đúng 8 tone — chốt ở tầng kiểu: `getAvatarToneIndex` băm theo độ dài này. */
 type AvatarToneTable<T> = readonly [T, T, T, T, T, T, T, T];
 /** Cặp nền + màu chữ (hex đục) của một tone avatar. */
@@ -37,34 +47,10 @@ interface AvatarTonePalette {
         readonly 500: string;
         readonly 600: string;
     };
-    /** Thang xám ash — cần bậc 100 · 500 · 700. */
-    ash: {
-        readonly 100: string;
-        readonly 500: string;
-        readonly 700: string;
-    };
-    /** Trung tính brand — mực và giấy. */
-    brandNeutral: {
-        readonly ink: string;
-        readonly inkSoft: string;
-        readonly paper: string;
-    };
     /** Màu phụ ở vai trò TÔ NỀN (`accent.light` hoặc `accent.dark`). */
-    accent: {
-        readonly teal: string;
-        readonly green: string;
-        readonly red: string;
-        readonly yellow: string;
-        readonly navy: string;
-    };
+    accent: AvatarToneHues;
     /** Cùng màu phụ đó ở vai trò CHỮ trên nền trang (`accentInk.light` hoặc `accentInk.dark`). */
-    accentInk: {
-        readonly teal: string;
-        readonly green: string;
-        readonly red: string;
-        readonly yellow: string;
-        readonly navy: string;
-    };
+    accentInk: AvatarToneHues;
     /** Nền mà tint hợp thành lên — `--card` của theme. */
     card: string;
 }
@@ -127,8 +113,19 @@ interface AvatarTone {
  * Tên lấy theo SẮC, không theo vai trò ngữ nghĩa: đây là màu ĐỊNH DANH, không phải màu trạng
  * thái — xem lý do dài ở docblock của `AVATAR_TONES`.
  */
-declare const AVATAR_TONE_NAMES: readonly ["gold", "teal", "green", "red", "yellow", "navy", "ash", "neutral"];
+declare const AVATAR_TONE_NAMES: readonly ["gold", "teal", "green", "red", "yellow", "blue", "purple", "pink"];
 type AvatarToneName = (typeof AVATAR_TONE_NAMES)[number];
+/**
+ * Tên tone CŨ → tên tone hôm nay (3.10.0). Ba tone cuối từng là `navy` · `ash` · `neutral` — cả ba
+ * đều là xám ám xanh ở các độ đậm khác nhau, nên ô icon của ba app khác nhau trông như cùng một
+ * màu. Chúng được THAY bằng ba sắc thật, đứng ĐÚNG vị trí cũ trong bảng (chỉ số băm giữ nguyên:
+ * người/app nào trước ra `navy` thì nay ra `blue`, không ai nhảy sang tone khác).
+ *
+ * Bí danh thay vì giữ tên cũ cho màu mới: tên là hợp đồng (cột `apps.icon_color` của Account), và
+ * một tên nói dối về màu ("ash" mà tím) còn tệ hơn một lần đổi tên có lối lùi. Bí danh đi theo
+ * cùng VỊ TRÍ, nên hàng database còn ghi tên cũ ra đúng màu mà phép băm cũng sẽ cho ở chỗ đó.
+ */
+declare const LEGACY_AVATAR_TONE_ALIASES: Readonly<Record<string, AvatarToneName>>;
 declare const AVATAR_TONES: AvatarToneTable<AvatarTone>;
 /**
  * Chỉ số tone theo tên — phép chọn màu avatar DUY NHẤT của cả gói.
@@ -145,8 +142,12 @@ declare function getAvatarTone(name: string): AvatarTone;
  *
  * Trả `undefined` cho tên lạ, và nơi gọi hiểu đó là "rơi về màu suy theo tên". KHÔNG ném: giá trị
  * này đến từ database (`apps.icon_color`), nơi một hàng cũ hoàn toàn có thể mang tên của một tone
- * đã bị xoá — làm sập cả dải ứng dụng vì một chữ trong một hàng là đổi sai lấy tệ hơn.
+ * đã bị xoá — làm sập cả dải ứng dụng vì một chữ trong một hàng là đổi sai lấy tệ hơn. Tên đã
+ * ĐỔI thì đi qua `LEGACY_AVATAR_TONE_ALIASES` trước khi tra.
+ *
+ * ⚠ `LEGACY_AVATAR_TONE_ALIASES` dùng `Record` trần: `"constructor"` tra ra một hàm, không phải
+ * tên tone — nhưng hàm thì không bằng `tone.name` nào, nên kết quả vẫn là `undefined`.
  */
 declare function getAvatarToneByName(name: string | null | undefined): AvatarTone | undefined;
 
-export { AVATAR_TONES, AVATAR_TONE_NAMES, type AvatarToneColors, type AvatarToneName, type AvatarTonePalette, getAvatarTone, getAvatarToneByName, getAvatarToneIndex };
+export { AVATAR_TONES, AVATAR_TONE_NAMES, type AvatarToneColors, type AvatarToneName, type AvatarTonePalette, LEGACY_AVATAR_TONE_ALIASES, getAvatarTone, getAvatarToneByName, getAvatarToneIndex };

package/dist/lib/avatar-tone.js

@@ -3,7 +3,12 @@ function tintOver(color, over, alpha) {
   const mixed = [0, 1, 2].map((i) => Math.round(channel(color, i) * alpha + channel(over, i) * (1 - alpha)));
   return `#${mixed.map((v) => v.toString(16).padStart(2, "0")).join("")}`.toUpperCase();
 }
-const AVATAR_TONE_NAMES = ["gold", "teal", "green", "red", "yellow", "navy", "ash", "neutral"];
+const AVATAR_TONE_NAMES = ["gold", "teal", "green", "red", "yellow", "blue", "purple", "pink"];
+const LEGACY_AVATAR_TONE_ALIASES = {
+  navy: "blue",
+  ash: "purple",
+  neutral: "pink"
+};
 const AVATAR_TONES = [
   {
     name: "gold",
@@ -36,23 +41,26 @@ const AVATAR_TONES = [
     dark: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.2), foreground: p.accentInk.yellow })
   },
   {
-    // chart-3 = navy ở light, = navy-ink (bậc sáng) ở dark — nền tint cũng đi theo đúng màu đó.
-    name: "navy",
-    classes: "bg-chart-3/15 text-chart-3",
-    light: (p) => ({ background: tintOver(p.accent.navy, p.card, 0.15), foreground: p.accentInk.navy }),
-    dark: (p) => ({ background: tintOver(p.accentInk.navy, p.card, 0.15), foreground: p.accentInk.navy })
+    // Ba tone cuối: ba sắc ĐỊNH DANH riêng của bảng này (styles.css, khối "Màu phụ") — thay navy ·
+    // ash · neutral từ 3.10.0, xem `LEGACY_AVATAR_TONE_ALIASES`. Cùng khuôn teal/green/red: tint /15
+    // + bậc ink; ở dark `--x-ink` trỏ về bản dark riêng của fill nên một chuỗi class đủ cả hai theme.
+    // Chữ trên tint /15: blue 5,67 · purple 5,72 · pink 5,33:1 (light) · 5,76 · 5,17 · 5,37:1 (dark).
+    name: "blue",
+    classes: "bg-blue/15 text-blue-ink",
+    light: (p) => ({ background: tintOver(p.accent.blue, p.card, 0.15), foreground: p.accentInk.blue }),
+    dark: (p) => ({ background: tintOver(p.accent.blue, p.card, 0.15), foreground: p.accentInk.blue })
   },
   {
-    name: "ash",
-    classes: "bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100",
-    light: (p) => ({ background: p.ash[100], foreground: p.ash[700] }),
-    dark: (p) => ({ background: tintOver(p.ash[500], p.card, 0.25), foreground: p.ash[100] })
+    name: "purple",
+    classes: "bg-purple/15 text-purple-ink",
+    light: (p) => ({ background: tintOver(p.accent.purple, p.card, 0.15), foreground: p.accentInk.purple }),
+    dark: (p) => ({ background: tintOver(p.accent.purple, p.card, 0.15), foreground: p.accentInk.purple })
   },
   {
-    name: "neutral",
-    classes: "bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper",
-    light: (p) => ({ background: tintOver(p.brandNeutral.ink, p.card, 0.1), foreground: p.brandNeutral.inkSoft }),
-    dark: (p) => ({ background: tintOver(p.brandNeutral.paper, p.card, 0.15), foreground: p.brandNeutral.paper })
+    name: "pink",
+    classes: "bg-pink/15 text-pink-ink",
+    light: (p) => ({ background: tintOver(p.accent.pink, p.card, 0.15), foreground: p.accentInk.pink }),
+    dark: (p) => ({ background: tintOver(p.accent.pink, p.card, 0.15), foreground: p.accentInk.pink })
   }
 ];
 function hashString(input) {
@@ -71,11 +79,13 @@ function getAvatarTone(name) {
 }
 function getAvatarToneByName(name) {
   if (!name) return void 0;
-  return AVATAR_TONES.find((tone) => tone.name === name);
+  const current = LEGACY_AVATAR_TONE_ALIASES[name] ?? name;
+  return AVATAR_TONES.find((tone) => tone.name === current);
 }
 export {
   AVATAR_TONES,
   AVATAR_TONE_NAMES,
+  LEGACY_AVATAR_TONE_ALIASES,
   getAvatarTone,
   getAvatarToneByName,
   getAvatarToneIndex

package/dist/lib/avatar-tone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/avatar-tone.ts"],"sourcesContent":["/**\n * NGUỒN SỰ THẬT DUY NHẤT của màu avatar chữ cái — cả gói chỉ có bảng này.\n *\n * File nội bộ (không nằm trong barrel nào): app không import trực tiếp được, mà đi qua đúng\n * hai cửa tuỳ theo chỗ vẽ:\n *   • có Tailwind (DOM)          → `getAvatarToneClasses(name)`  ở `composite/letter-avatar.tsx`\n *   • không có Tailwind (canvas, → `getAvatarToneColors(name, mode)` ở `tokens.ts`\n *     email HTML, PDF)\n *\n * Vì sao MỘT bảng chứ không phải hai (một bảng class + một bảng hex \"ảnh chiếu\"): hai bảng viết\n * tay song song thì chỉ cần một lần thêm/xoá/đảo tone là cùng một người ra hai màu khác nhau giữa\n * web và email — mà không có gì báo. Ở đây mỗi tone là MỘT phần tử mang cả chuỗi class lẫn công\n * thức hex tương ứng, nằm sát nhau trên vài dòng liền: thêm tone là thêm cả ba, không quên được.\n * Thứ tự phần tử = chỉ số băm, nên thứ tự cũng chỉ tồn tại ở một chỗ.\n *\n * Vì sao công thức hex là HÀM nhận `palette` chứ không đọc thẳng token: `tokens.ts` là entry\n * `@comitor/ui/tokens`; nếu file này `import { accent } from \"../tokens.js\"` thì thành vòng import\n * (tokens.ts phải import ngược lại bảng này) — vòng có khởi tạo hằng ở giữa là lỗi TDZ lúc chạy.\n * Nhận bảng màu qua tham số thì phụ thuộc chỉ đi MỘT chiều: tokens.ts → file này.\n */\n\n/** Đúng 8 tone — chốt ở tầng kiểu: `getAvatarToneIndex` băm theo độ dài này. */\ntype AvatarToneTable<T> = readonly [T, T, T, T, T, T, T, T];\n\n/** Cặp nền + màu chữ (hex đục) của một tone avatar. */\nexport interface AvatarToneColors {\n  background: string;\n  foreground: string;\n}\n\n/**\n * Các bậc màu mà công thức hex bên dưới đọc vào — `tokens.ts` truyền xuống một bộ cho light,\n * một bộ cho dark. Khai tường minh bằng `string` (không `typeof gold`) vì bản light và bản dark\n * là hai bộ giá trị khác nhau, không cùng một kiểu literal.\n */\nexport interface AvatarTonePalette {\n  /** Thang gold — cần bậc 100 · 500 · 600. */\n  gold: { readonly 100: string; readonly 500: string; readonly 600: string };\n  /** Thang xám ash — cần bậc 100 · 500 · 700. */\n  ash: { readonly 100: string; readonly 500: string; readonly 700: string };\n  /** Trung tính brand — mực và giấy. */\n  brandNeutral: { readonly ink: string; readonly inkSoft: string; readonly paper: string };\n  /** Màu phụ ở vai trò TÔ NỀN (`accent.light` hoặc `accent.dark`). */\n  accent: {\n    readonly teal: string;\n    readonly green: string;\n    readonly red: string;\n    readonly yellow: string;\n    readonly navy: string;\n  };\n  /** Cùng màu phụ đó ở vai trò CHỮ trên nền trang (`accentInk.light` hoặc `accentInk.dark`). */\n  accentInk: {\n    readonly teal: string;\n    readonly green: string;\n    readonly red: string;\n    readonly yellow: string;\n    readonly navy: string;\n  };\n  /** Nền mà tint hợp thành lên — `--card` của theme. */\n  card: string;\n}\n\ninterface AvatarTone {\n  /**\n   * Tên gọi của tone — để chỗ dùng CHỌN TAY một màu thay vì để hàm băm quyết.\n   *\n   * ⚠ Tên là một phần của HỢP ĐỒNG: nó đi vào cột database của app (`apps.icon_color` bên\n   * `comitor-account`) và vào prop `tone` của `IconAvatar`. Đổi tên một tone là làm mọi hàng đã\n   * lưu trỏ vào hư không — và hỏng đó IM LẶNG, vì giá trị lạ chỉ rơi về màu suy theo tên.\n   * Thêm tone thì thêm tên mới; đừng đổi tên cũ.\n   */\n  readonly name: AvatarToneName;\n  /** Vai trò DOM: chuỗi class token tĩnh (kèm biến thể `dark:`). */\n  readonly classes: string;\n  /** Vai trò canvas/email/PDF: đúng những gì `classes` nói, tính ra hex đục ở light. */\n  readonly light: (p: AvatarTonePalette) => AvatarToneColors;\n  /** Nhánh `dark:` của `classes`. */\n  readonly dark: (p: AvatarTonePalette) => AvatarToneColors;\n}\n\n/**\n * Trộn `color` phủ `alpha` lên nền `over`, trả về hex đục.\n *\n * Tái hiện đúng phép mà trình duyệt làm với `bg-teal/15`: Tailwind sinh ra màu CÓ alpha, còn nền\n * phía dưới (`--card`) mới quyết định hex cuối cùng. Nơi không có CSS thì không có gì để hợp\n * thành, nên hex phải mang sẵn kết quả đã trộn.\n */\nfunction tintOver(color: string, over: string, alpha: number): string {\n  const channel = (hex: string, i: number) => Number.parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);\n  const mixed = [0, 1, 2].map((i) => Math.round(channel(color, i) * alpha + channel(over, i) * (1 - alpha)));\n  return `#${mixed.map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`.toUpperCase();\n}\n\n/**\n * 8 tone deterministic. Phía class TẤT CẢ là token tĩnh — không ghép chuỗi lúc chạy (`bg-${c}-100`)\n * vì Tailwind quét tĩnh, class ghép động sẽ không có mặt trong CSS của app; cũng không dùng hex\n * inline vì như vậy là mất dark mode.\n *\n * ─ VÌ SAO LÀ MÀU PHỤ + CHART CHỨ KHÔNG PHẢI TOKEN SEMANTIC ─\n * Đây là màu ĐỊNH DANH (phân biệt người), không phải màu TRẠNG THÁI — gán `--success` cho một con\n * người là sai nghĩa. Bộ màu phụ + bảng chart là nhóm token DUY NHẤT có đủ 8 sắc khác nhau và có\n * bản riêng cho dark, nên vẫn đổi theo theme và app vẫn ghi đè được.\n *\n * ─ TƯƠNG PHẢN: VÌ SAO BA TONE PHẢI HẠ XUỐNG BẬC INK Ở LIGHT ─\n * Chữ initials tuy `aria-hidden` nhưng người sáng mắt vẫn đọc, nên vẫn phải đạt AA 4,5:1. Bản đầu\n * dùng thẳng `text-teal/green/red` trên nền tint 15% và HỎNG ở light (đo theo WCAG, nền tint đã\n * trộn với `--card` trắng):\n *\n *     teal   #1F8A8B trên bg-teal/15   = 3,44:1  ✗\n *     green  #2EA56A trên bg-green/15  = 2,69:1  ✗  (dưới cả ngưỡng 3:1)\n *     red    #D64545 trên bg-red/15    = 3,57:1  ✗\n *\n * Sửa đúng khuôn `Badge`: dùng bậc `--x-ink` cho light, giữ token đã nâng sáng cho dark. Đo lại\n * trên đúng hex mà `getAvatarToneColors` trả ra (styles.css đã đóng băng bậc ink, xem dưới):\n *\n *     teal   #1A6668 trên #DDEDEE = 5,54:1 ✓   ·  dark #2DD4BF trên #193435 = 7,12:1 ✓\n *     green  #216A48 trên #E0F2E9 = 5,60:1 ✓   ·  dark #4ADE80 trên #1E362C = 7,44:1 ✓\n *     red    #9A3537 trên #F9E3E3 = 5,83:1 ✓   ·  dark #F87171 trên #38252A = 5,18:1 ✓\n *\n * (Bộ số 5,56 / 5,58 / 7,10 / 7,47 / 5,17 ghi ở bản trước là kết quả của chuỗi `color-mix` TRƯỚC\n * khi hex được đóng băng vào token — lệch ở chữ, không lệch ở màu.)\n *\n * Class viết thẳng `text-teal-ink` / `text-green-ink` / `text-red-ink` / `text-yellow-ink` chứ\n * KHÔNG nhắc lại chuỗi `color-mix(...)` — hai cách cho ra đúng cùng một hex (styles.css đã đóng\n * băng kết quả: #1A6668 · #216A48 · #9A3537), và ở `.dark` thì `--teal-ink` vốn trỏ về `--teal`\n * nên không cần biến thể `dark:` nào. Nhờ vậy tên trong class khớp đúng tên trong công thức hex\n * ngay bên dưới (`p.accentInk.teal`) — soi hai vế cạnh nhau là thấy lệch ngay.\n */\n/**\n * Tên của 8 tone, ĐÚNG THỨ TỰ bảng bên dưới — thứ tự ấy cũng là chỉ số băm, nên hai thứ không\n * được trôi khỏi nhau. Đây là bảng màu mà chỗ dùng chọn tay khi không muốn để tên quyết định.\n *\n * Tên lấy theo SẮC, không theo vai trò ngữ nghĩa: đây là màu ĐỊNH DANH, không phải màu trạng\n * thái — xem lý do dài ở docblock của `AVATAR_TONES`.\n */\nexport const AVATAR_TONE_NAMES = [\"gold\", \"teal\", \"green\", \"red\", \"yellow\", \"navy\", \"ash\", \"neutral\"] as const;\n\nexport type AvatarToneName = (typeof AVATAR_TONE_NAMES)[number];\n\nexport const AVATAR_TONES: AvatarToneTable<AvatarTone> = [\n  {\n    name: \"gold\",\n    classes: \"bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100\",\n    light: (p) => ({ background: p.gold[100], foreground: p.gold[600] }),\n    dark: (p) => ({ background: tintOver(p.gold[500], p.card, 0.3), foreground: p.gold[100] })\n  },\n  {\n    name: \"teal\",\n    classes: \"bg-teal/15 text-teal-ink\",\n    light: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal }),\n    dark: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal })\n  },\n  {\n    name: \"green\",\n    classes: \"bg-green/15 text-green-ink\",\n    light: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green }),\n    dark: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green })\n  },\n  {\n    name: \"red\",\n    classes: \"bg-red/15 text-red-ink\",\n    light: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red }),\n    dark: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red })\n  },\n  {\n    name: \"yellow\",\n    classes: \"bg-yellow/25 text-yellow-ink dark:bg-yellow/20\",\n    light: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.25), foreground: p.accentInk.yellow }),\n    dark: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.2), foreground: p.accentInk.yellow })\n  },\n  {\n    // chart-3 = navy ở light, = navy-ink (bậc sáng) ở dark — nền tint cũng đi theo đúng màu đó.\n    name: \"navy\",\n    classes: \"bg-chart-3/15 text-chart-3\",\n    light: (p) => ({ background: tintOver(p.accent.navy, p.card, 0.15), foreground: p.accentInk.navy }),\n    dark: (p) => ({ background: tintOver(p.accentInk.navy, p.card, 0.15), foreground: p.accentInk.navy })\n  },\n  {\n    name: \"ash\",\n    classes: \"bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100\",\n    light: (p) => ({ background: p.ash[100], foreground: p.ash[700] }),\n    dark: (p) => ({ background: tintOver(p.ash[500], p.card, 0.25), foreground: p.ash[100] })\n  },\n  {\n    name: \"neutral\",\n    classes: \"bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper\",\n    light: (p) => ({ background: tintOver(p.brandNeutral.ink, p.card, 0.1), foreground: p.brandNeutral.inkSoft }),\n    dark: (p) => ({ background: tintOver(p.brandNeutral.paper, p.card, 0.15), foreground: p.brandNeutral.paper })\n  }\n];\n\n/**\n * Hash chuỗi → số nguyên không âm (biến thể FNV-1a 32 bit).\n *\n * Nội bộ, KHÔNG xuất ra API: công dụng duy nhất của nó là chọn tone avatar ngay dưới đây. Xuất\n * một hàm băm ra ngoài chỉ mời app dựng lại phép chọn tone của riêng nó — đúng thứ sinh ra chuyện\n * cùng một người hai màu. Chạy trên code point (không phải byte) để tên có dấu vẫn ổn định giữa\n * server và client.\n */\nfunction hashString(input: string): number {\n  let hash = 0x811c9dc5;\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return Math.abs(hash | 0);\n}\n\n/**\n * Chỉ số tone theo tên — phép chọn màu avatar DUY NHẤT của cả gói.\n *\n * Khoá băm là **tên hiển thị** đã `trim` + hạ chữ thường theo locale `vi-VN` (không phải\n * email/slug: chỗ nào hiển thị avatar cũng chắc chắn có tên, còn email/slug thì không — lấy khoá\n * khác nhau ở từng chỗ là cách nhanh nhất để cùng một người ra hai màu).\n */\nexport function getAvatarToneIndex(name: string): number {\n  return hashString(name.trim().toLocaleLowerCase(\"vi-VN\")) % AVATAR_TONES.length;\n}\n\n/** Tone (cả class lẫn công thức hex) ứng với một tên. */\nexport function getAvatarTone(name: string): AvatarTone {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  return AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n}\n\n/**\n * Tone theo TÊN — cửa cho chỗ dùng chọn tay một màu.\n *\n * Trả `undefined` cho tên lạ, và nơi gọi hiểu đó là \"rơi về màu suy theo tên\". KHÔNG ném: giá trị\n * này đến từ database (`apps.icon_color`), nơi một hàng cũ hoàn toàn có thể mang tên của một tone\n * đã bị xoá — làm sập cả dải ứng dụng vì một chữ trong một hàng là đổi sai lấy tệ hơn.\n */\nexport function getAvatarToneByName(name: string | null | undefined): AvatarTone | undefined {\n  if (!name) return undefined;\n  return AVATAR_TONES.find((tone) => tone.name === name);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/lib/avatar-tone.ts"],"sourcesContent":["/**\n * NGUỒN SỰ THẬT DUY NHẤT của màu avatar chữ cái — cả gói chỉ có bảng này.\n *\n * File nội bộ (không nằm trong barrel nào): app không import trực tiếp được, mà đi qua đúng\n * hai cửa tuỳ theo chỗ vẽ:\n *   • có Tailwind (DOM)          → `getAvatarToneClasses(name)`  ở `composite/letter-avatar.tsx`\n *   • không có Tailwind (canvas, → `getAvatarToneColors(name, mode)` ở `tokens.ts`\n *     email HTML, PDF)\n *\n * Vì sao MỘT bảng chứ không phải hai (một bảng class + một bảng hex \"ảnh chiếu\"): hai bảng viết\n * tay song song thì chỉ cần một lần thêm/xoá/đảo tone là cùng một người ra hai màu khác nhau giữa\n * web và email — mà không có gì báo. Ở đây mỗi tone là MỘT phần tử mang cả chuỗi class lẫn công\n * thức hex tương ứng, nằm sát nhau trên vài dòng liền: thêm tone là thêm cả ba, không quên được.\n * Thứ tự phần tử = chỉ số băm, nên thứ tự cũng chỉ tồn tại ở một chỗ.\n *\n * Vì sao công thức hex là HÀM nhận `palette` chứ không đọc thẳng token: `tokens.ts` là entry\n * `@comitor/ui/tokens`; nếu file này `import { accent } from \"../tokens.js\"` thì thành vòng import\n * (tokens.ts phải import ngược lại bảng này) — vòng có khởi tạo hằng ở giữa là lỗi TDZ lúc chạy.\n * Nhận bảng màu qua tham số thì phụ thuộc chỉ đi MỘT chiều: tokens.ts → file này.\n */\n\n/** Bảy sắc màu phụ mà bảng tone đọc (gold đi riêng qua thang của nó). */\ninterface AvatarToneHues {\n  readonly teal: string;\n  readonly green: string;\n  readonly red: string;\n  readonly yellow: string;\n  readonly blue: string;\n  readonly purple: string;\n  readonly pink: string;\n}\n\n/** Đúng 8 tone — chốt ở tầng kiểu: `getAvatarToneIndex` băm theo độ dài này. */\ntype AvatarToneTable<T> = readonly [T, T, T, T, T, T, T, T];\n\n/** Cặp nền + màu chữ (hex đục) của một tone avatar. */\nexport interface AvatarToneColors {\n  background: string;\n  foreground: string;\n}\n\n/**\n * Các bậc màu mà công thức hex bên dưới đọc vào — `tokens.ts` truyền xuống một bộ cho light,\n * một bộ cho dark. Khai tường minh bằng `string` (không `typeof gold`) vì bản light và bản dark\n * là hai bộ giá trị khác nhau, không cùng một kiểu literal.\n */\nexport interface AvatarTonePalette {\n  /** Thang gold — cần bậc 100 · 500 · 600. */\n  gold: { readonly 100: string; readonly 500: string; readonly 600: string };\n  /** Màu phụ ở vai trò TÔ NỀN (`accent.light` hoặc `accent.dark`). */\n  accent: AvatarToneHues;\n  /** Cùng màu phụ đó ở vai trò CHỮ trên nền trang (`accentInk.light` hoặc `accentInk.dark`). */\n  accentInk: AvatarToneHues;\n  /** Nền mà tint hợp thành lên — `--card` của theme. */\n  card: string;\n}\n\ninterface AvatarTone {\n  /**\n   * Tên gọi của tone — để chỗ dùng CHỌN TAY một màu thay vì để hàm băm quyết.\n   *\n   * ⚠ Tên là một phần của HỢP ĐỒNG: nó đi vào cột database của app (`apps.icon_color` bên\n   * `comitor-account`) và vào prop `tone` của `IconAvatar`. Đổi tên một tone là làm mọi hàng đã\n   * lưu trỏ vào hư không — và hỏng đó IM LẶNG, vì giá trị lạ chỉ rơi về màu suy theo tên.\n   * Thêm tone thì thêm tên mới; đừng đổi tên cũ.\n   */\n  readonly name: AvatarToneName;\n  /** Vai trò DOM: chuỗi class token tĩnh (kèm biến thể `dark:`). */\n  readonly classes: string;\n  /** Vai trò canvas/email/PDF: đúng những gì `classes` nói, tính ra hex đục ở light. */\n  readonly light: (p: AvatarTonePalette) => AvatarToneColors;\n  /** Nhánh `dark:` của `classes`. */\n  readonly dark: (p: AvatarTonePalette) => AvatarToneColors;\n}\n\n/**\n * Trộn `color` phủ `alpha` lên nền `over`, trả về hex đục.\n *\n * Tái hiện đúng phép mà trình duyệt làm với `bg-teal/15`: Tailwind sinh ra màu CÓ alpha, còn nền\n * phía dưới (`--card`) mới quyết định hex cuối cùng. Nơi không có CSS thì không có gì để hợp\n * thành, nên hex phải mang sẵn kết quả đã trộn.\n */\nfunction tintOver(color: string, over: string, alpha: number): string {\n  const channel = (hex: string, i: number) => Number.parseInt(hex.slice(1 + i * 2, 3 + i * 2), 16);\n  const mixed = [0, 1, 2].map((i) => Math.round(channel(color, i) * alpha + channel(over, i) * (1 - alpha)));\n  return `#${mixed.map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`.toUpperCase();\n}\n\n/**\n * 8 tone deterministic. Phía class TẤT CẢ là token tĩnh — không ghép chuỗi lúc chạy (`bg-${c}-100`)\n * vì Tailwind quét tĩnh, class ghép động sẽ không có mặt trong CSS của app; cũng không dùng hex\n * inline vì như vậy là mất dark mode.\n *\n * ─ VÌ SAO LÀ MÀU PHỤ + CHART CHỨ KHÔNG PHẢI TOKEN SEMANTIC ─\n * Đây là màu ĐỊNH DANH (phân biệt người), không phải màu TRẠNG THÁI — gán `--success` cho một con\n * người là sai nghĩa. Bộ màu phụ + bảng chart là nhóm token DUY NHẤT có đủ 8 sắc khác nhau và có\n * bản riêng cho dark, nên vẫn đổi theo theme và app vẫn ghi đè được.\n *\n * ─ TƯƠNG PHẢN: VÌ SAO BA TONE PHẢI HẠ XUỐNG BẬC INK Ở LIGHT ─\n * Chữ initials tuy `aria-hidden` nhưng người sáng mắt vẫn đọc, nên vẫn phải đạt AA 4,5:1. Bản đầu\n * dùng thẳng `text-teal/green/red` trên nền tint 15% và HỎNG ở light (đo theo WCAG, nền tint đã\n * trộn với `--card` trắng):\n *\n *     teal   #1F8A8B trên bg-teal/15   = 3,44:1  ✗\n *     green  #2EA56A trên bg-green/15  = 2,69:1  ✗  (dưới cả ngưỡng 3:1)\n *     red    #D64545 trên bg-red/15    = 3,57:1  ✗\n *\n * Sửa đúng khuôn `Badge`: dùng bậc `--x-ink` cho light, giữ token đã nâng sáng cho dark. Đo lại\n * trên đúng hex mà `getAvatarToneColors` trả ra (styles.css đã đóng băng bậc ink, xem dưới):\n *\n *     teal   #1A6668 trên #DDEDEE = 5,54:1 ✓   ·  dark #2DD4BF trên #193435 = 7,12:1 ✓\n *     green  #216A48 trên #E0F2E9 = 5,60:1 ✓   ·  dark #4ADE80 trên #1E362C = 7,44:1 ✓\n *     red    #9A3537 trên #F9E3E3 = 5,83:1 ✓   ·  dark #F87171 trên #38252A = 5,18:1 ✓\n *\n * (Bộ số 5,56 / 5,58 / 7,10 / 7,47 / 5,17 ghi ở bản trước là kết quả của chuỗi `color-mix` TRƯỚC\n * khi hex được đóng băng vào token — lệch ở chữ, không lệch ở màu.)\n *\n * Class viết thẳng `text-teal-ink` / `text-green-ink` / `text-red-ink` / `text-yellow-ink` chứ\n * KHÔNG nhắc lại chuỗi `color-mix(...)` — hai cách cho ra đúng cùng một hex (styles.css đã đóng\n * băng kết quả: #1A6668 · #216A48 · #9A3537), và ở `.dark` thì `--teal-ink` vốn trỏ về `--teal`\n * nên không cần biến thể `dark:` nào. Nhờ vậy tên trong class khớp đúng tên trong công thức hex\n * ngay bên dưới (`p.accentInk.teal`) — soi hai vế cạnh nhau là thấy lệch ngay.\n */\n/**\n * Tên của 8 tone, ĐÚNG THỨ TỰ bảng bên dưới — thứ tự ấy cũng là chỉ số băm, nên hai thứ không\n * được trôi khỏi nhau. Đây là bảng màu mà chỗ dùng chọn tay khi không muốn để tên quyết định.\n *\n * Tên lấy theo SẮC, không theo vai trò ngữ nghĩa: đây là màu ĐỊNH DANH, không phải màu trạng\n * thái — xem lý do dài ở docblock của `AVATAR_TONES`.\n */\nexport const AVATAR_TONE_NAMES = [\"gold\", \"teal\", \"green\", \"red\", \"yellow\", \"blue\", \"purple\", \"pink\"] as const;\n\nexport type AvatarToneName = (typeof AVATAR_TONE_NAMES)[number];\n\n/**\n * Tên tone CŨ → tên tone hôm nay (3.10.0). Ba tone cuối từng là `navy` · `ash` · `neutral` — cả ba\n * đều là xám ám xanh ở các độ đậm khác nhau, nên ô icon của ba app khác nhau trông như cùng một\n * màu. Chúng được THAY bằng ba sắc thật, đứng ĐÚNG vị trí cũ trong bảng (chỉ số băm giữ nguyên:\n * người/app nào trước ra `navy` thì nay ra `blue`, không ai nhảy sang tone khác).\n *\n * Bí danh thay vì giữ tên cũ cho màu mới: tên là hợp đồng (cột `apps.icon_color` của Account), và\n * một tên nói dối về màu (\"ash\" mà tím) còn tệ hơn một lần đổi tên có lối lùi. Bí danh đi theo\n * cùng VỊ TRÍ, nên hàng database còn ghi tên cũ ra đúng màu mà phép băm cũng sẽ cho ở chỗ đó.\n */\nexport const LEGACY_AVATAR_TONE_ALIASES: Readonly<Record<string, AvatarToneName>> = {\n  navy: \"blue\",\n  ash: \"purple\",\n  neutral: \"pink\"\n};\n\nexport const AVATAR_TONES: AvatarToneTable<AvatarTone> = [\n  {\n    name: \"gold\",\n    classes: \"bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100\",\n    light: (p) => ({ background: p.gold[100], foreground: p.gold[600] }),\n    dark: (p) => ({ background: tintOver(p.gold[500], p.card, 0.3), foreground: p.gold[100] })\n  },\n  {\n    name: \"teal\",\n    classes: \"bg-teal/15 text-teal-ink\",\n    light: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal }),\n    dark: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal })\n  },\n  {\n    name: \"green\",\n    classes: \"bg-green/15 text-green-ink\",\n    light: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green }),\n    dark: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green })\n  },\n  {\n    name: \"red\",\n    classes: \"bg-red/15 text-red-ink\",\n    light: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red }),\n    dark: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red })\n  },\n  {\n    name: \"yellow\",\n    classes: \"bg-yellow/25 text-yellow-ink dark:bg-yellow/20\",\n    light: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.25), foreground: p.accentInk.yellow }),\n    dark: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.2), foreground: p.accentInk.yellow })\n  },\n  {\n    // Ba tone cuối: ba sắc ĐỊNH DANH riêng của bảng này (styles.css, khối \"Màu phụ\") — thay navy ·\n    // ash · neutral từ 3.10.0, xem `LEGACY_AVATAR_TONE_ALIASES`. Cùng khuôn teal/green/red: tint /15\n    // + bậc ink; ở dark `--x-ink` trỏ về bản dark riêng của fill nên một chuỗi class đủ cả hai theme.\n    // Chữ trên tint /15: blue 5,67 · purple 5,72 · pink 5,33:1 (light) · 5,76 · 5,17 · 5,37:1 (dark).\n    name: \"blue\",\n    classes: \"bg-blue/15 text-blue-ink\",\n    light: (p) => ({ background: tintOver(p.accent.blue, p.card, 0.15), foreground: p.accentInk.blue }),\n    dark: (p) => ({ background: tintOver(p.accent.blue, p.card, 0.15), foreground: p.accentInk.blue })\n  },\n  {\n    name: \"purple\",\n    classes: \"bg-purple/15 text-purple-ink\",\n    light: (p) => ({ background: tintOver(p.accent.purple, p.card, 0.15), foreground: p.accentInk.purple }),\n    dark: (p) => ({ background: tintOver(p.accent.purple, p.card, 0.15), foreground: p.accentInk.purple })\n  },\n  {\n    name: \"pink\",\n    classes: \"bg-pink/15 text-pink-ink\",\n    light: (p) => ({ background: tintOver(p.accent.pink, p.card, 0.15), foreground: p.accentInk.pink }),\n    dark: (p) => ({ background: tintOver(p.accent.pink, p.card, 0.15), foreground: p.accentInk.pink })\n  }\n];\n\n/**\n * Hash chuỗi → số nguyên không âm (biến thể FNV-1a 32 bit).\n *\n * Nội bộ, KHÔNG xuất ra API: công dụng duy nhất của nó là chọn tone avatar ngay dưới đây. Xuất\n * một hàm băm ra ngoài chỉ mời app dựng lại phép chọn tone của riêng nó — đúng thứ sinh ra chuyện\n * cùng một người hai màu. Chạy trên code point (không phải byte) để tên có dấu vẫn ổn định giữa\n * server và client.\n */\nfunction hashString(input: string): number {\n  let hash = 0x811c9dc5;\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return Math.abs(hash | 0);\n}\n\n/**\n * Chỉ số tone theo tên — phép chọn màu avatar DUY NHẤT của cả gói.\n *\n * Khoá băm là **tên hiển thị** đã `trim` + hạ chữ thường theo locale `vi-VN` (không phải\n * email/slug: chỗ nào hiển thị avatar cũng chắc chắn có tên, còn email/slug thì không — lấy khoá\n * khác nhau ở từng chỗ là cách nhanh nhất để cùng một người ra hai màu).\n */\nexport function getAvatarToneIndex(name: string): number {\n  return hashString(name.trim().toLocaleLowerCase(\"vi-VN\")) % AVATAR_TONES.length;\n}\n\n/** Tone (cả class lẫn công thức hex) ứng với một tên. */\nexport function getAvatarTone(name: string): AvatarTone {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  return AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n}\n\n/**\n * Tone theo TÊN — cửa cho chỗ dùng chọn tay một màu.\n *\n * Trả `undefined` cho tên lạ, và nơi gọi hiểu đó là \"rơi về màu suy theo tên\". KHÔNG ném: giá trị\n * này đến từ database (`apps.icon_color`), nơi một hàng cũ hoàn toàn có thể mang tên của một tone\n * đã bị xoá — làm sập cả dải ứng dụng vì một chữ trong một hàng là đổi sai lấy tệ hơn. Tên đã\n * ĐỔI thì đi qua `LEGACY_AVATAR_TONE_ALIASES` trước khi tra.\n *\n * ⚠ `LEGACY_AVATAR_TONE_ALIASES` dùng `Record` trần: `\"constructor\"` tra ra một hàm, không phải\n * tên tone — nhưng hàm thì không bằng `tone.name` nào, nên kết quả vẫn là `undefined`.\n */\nexport function getAvatarToneByName(name: string | null | undefined): AvatarTone | undefined {\n  if (!name) return undefined;\n  const current = LEGACY_AVATAR_TONE_ALIASES[name] ?? name;\n  return AVATAR_TONES.find((tone) => tone.name === current);\n}\n"],"mappings":"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","names":[]}

package/dist/shell/app-launcher.js

@@ -42,8 +42,8 @@ function AppLauncherPanel({ variant = "grid", className, onSelected }) {
     const isCurrent = app.id === currentApp?.id;
     const Icon = app.icon;
     const tileClass = cn(
-      "group relative flex rounded-md text-left transition-colors duration-150 ease-out",
-      variant === "grid" ? "flex-col items-start gap-1.5 p-2.5" : "items-center gap-2.5 p-2",
+      "group relative flex rounded-md transition-colors duration-150 ease-out",
+      variant === "grid" ? "aspect-square flex-col items-center justify-center gap-1.5 p-1.5 text-center" : "items-center gap-2.5 p-2 text-left",
       isLocked ? "hover:bg-muted" : "hover:bg-accent",
       isCurrent && "bg-accent"
     );
@@ -56,54 +56,59 @@ function AppLauncherPanel({ variant = "grid", className, onSelected }) {
             seed: app.id,
             icon: Icon,
             tone: app.tone,
-            size: variant === "grid" ? "md" : "sm",
-            className: cn(isLocked && "bg-muted text-muted-foreground")
+            size: variant === "grid" ? "md" : "sm"
           }
         ),
         isLocked ? /* @__PURE__ */ jsx("span", { className: "absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-popover", children: /* @__PURE__ */ jsx(Lock, { className: "size-2.5" }) }) : null
       ] }),
       /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-col", variant === "grid" ? "w-full" : "flex-1"), children: [
-        /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 gap-1.5", variant === "grid" ? "items-start" : "items-center"), children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-sm font-medium text-foreground",
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn("flex min-w-0 gap-1.5", variant === "grid" ? "items-start justify-center" : "items-center"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm font-medium text-foreground",
+                    /*
+                     * Lưới: tên ứng dụng dài hơn ô là chuyện thường ("Tài khoản Comitor" ở ô 109px),
+                     * nên cho hai dòng rồi mới cắt — `grid-cols-3` khai `items-stretch` mặc định nên
+                     * ô cao thêm một dòng không làm hàng bị so le.
+                     *
+                     * `break-words` đi KÈM `line-clamp-2`, không phải phòng xa: `-webkit-line-clamp`
+                     * chỉ đặt được dấu "…" khi chữ THẬT SỰ tràn sang dòng thứ ba. Một tên không có
+                     * khoảng trắng thì không xuống dòng được, nên nó nằm gọn một dòng và bị
+                     * `overflow: hidden` cắt PHẲNG giữa chữ — đo được: `soDong: 1`,
+                     * `scrollHeight === clientHeight`, không có dấu ba chấm nào. Cho phép ngắt trong
+                     * từ thì nó thành hai dòng và dấu "…" quay lại.
+                     *
+                     * Danh sách: mỗi mục là một hàng ngang trong popover hẹp; hai dòng ở đó làm chiều
+                     * cao các mục nhấp nhô. Giữ một dòng — `truncate` vốn đã chạy đúng ở đó vì `flex-1`
+                     * ghim sẵn bề rộng. Cùng lý do tác giả chỉ cho `description` xuống hai dòng ở lưới.
+                     */
+                    variant === "grid" ? "line-clamp-2 break-words" : "truncate"
+                  ),
+                  children: app.name
+                }
+              ),
+              app.badge ? (
                 /*
-                 * Lưới: tên ứng dụng dài hơn ô là chuyện thường ("Tài khoản Comitor" ở ô 109px),
-                 * nên cho hai dòng rồi mới cắt — `grid-cols-3` khai `items-stretch` mặc định nên
-                 * ô cao thêm một dòng không làm hàng bị so le.
-                 *
-                 * `break-words` đi KÈM `line-clamp-2`, không phải phòng xa: `-webkit-line-clamp`
-                 * chỉ đặt được dấu "…" khi chữ THẬT SỰ tràn sang dòng thứ ba. Một tên không có
-                 * khoảng trắng thì không xuống dòng được, nên nó nằm gọn một dòng và bị
-                 * `overflow: hidden` cắt PHẲNG giữa chữ — đo được: `soDong: 1`,
-                 * `scrollHeight === clientHeight`, không có dấu ba chấm nào. Cho phép ngắt trong
-                 * từ thì nó thành hai dòng và dấu "…" quay lại.
+                 * `shrink-0` KHÔNG phải để chống bóp méo — đo rồi: có hay không, badge đều 116,8px,
+                 * vì `whitespace-nowrap` trong `Badge` đã giữ sàn `min-width: auto` bằng trọn bề rộng
+                 * chữ, và phần co dồn hết sang ô tên (`overflow: hidden` → sàn 0).
                  *
-                 * Danh sách: mỗi mục là một hàng ngang trong popover hẹp; hai dòng ở đó làm chiều
-                 * cao các mục nhấp nhô. Giữ một dòng — `truncate` vốn đã chạy đúng ở đó vì `flex-1`
-                 * ghim sẵn bề rộng. Cùng lý do tác giả chỉ cho `description` xuống hai dòng ở lưới.
+                 * Nó ở đây vì hai lý do khác: khớp quy ước của mọi chỗ gọi `Badge` khác trong shell
+                 * (`workspace-switcher`, `sidebar-menu-item` — chỗ này là chỗ DUY NHẤT thiếu), và để
+                 * lá chắn thôi phụ thuộc vào một lớp ngầm trong `Badge`. Ai đó thêm `truncate` vào
+                 * base cva của `Badge` là sàn tụt về 0 và badge méo, im lặng.
                  */
-                variant === "grid" ? "line-clamp-2 break-words" : "truncate"
-              ),
-              children: app.name
-            }
-          ),
-          app.badge ? (
-            /*
-             * `shrink-0` KHÔNG phải để chống bóp méo — đo rồi: có hay không, badge đều 116,8px,
-             * vì `whitespace-nowrap` trong `Badge` đã giữ sàn `min-width: auto` bằng trọn bề rộng
-             * chữ, và phần co dồn hết sang ô tên (`overflow: hidden` → sàn 0).
-             *
-             * Nó ở đây vì hai lý do khác: khớp quy ước của mọi chỗ gọi `Badge` khác trong shell
-             * (`workspace-switcher`, `sidebar-menu-item` — chỗ này là chỗ DUY NHẤT thiếu), và để
-             * lá chắn thôi phụ thuộc vào một lớp ngầm trong `Badge`. Ai đó thêm `truncate` vào
-             * base cva của `Badge` là sàn tụt về 0 và badge méo, im lặng.
-             */
-            /* @__PURE__ */ jsx(Badge, { variant: "destructive", size: "sm", className: "shrink-0", children: app.badge })
-          ) : null
-        ] }),
+                /* @__PURE__ */ jsx(Badge, { variant: "destructive", size: "sm", className: "shrink-0", children: app.badge })
+              ) : null
+            ]
+          }
+        ),
         app.description ? /* @__PURE__ */ jsx(
           "span",
           {
@@ -207,7 +212,7 @@ function AppLauncher({
       ) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: labels.apps })
     ] }),
-    /* @__PURE__ */ jsx(PopoverContent, { align, sideOffset: 8, className: "w-[22rem] p-2", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PopoverContent, { align, sideOffset: 8, className: "w-[19rem] p-2", children: /* @__PURE__ */ jsx(
       AppLauncherPanel,
       {
         variant,

package/dist/shell/app-launcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-launcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { LayoutGrid, Lock } from \"lucide-react\";\nimport { type KeyboardEvent, useRef } from \"react\";\nimport { IconAvatar } from \"../components/composite/icon-avatar.js\";\nimport { Badge } from \"../components/ui/badge.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { AppDescriptor } from \"./types.js\";\nimport { getEntitledApps, getLockedApps } from \"./utils.js\";\n\n/** Đánh dấu ô app để điều hướng bàn phím tìm được, kể cả ô render bằng LinkComponent của app. */\nconst TILE_ATTR = \"data-app-tile\";\n\nexport interface AppLauncherPanelProps {\n  /** \"grid\" = lưới 3 cột; \"list\" = danh sách dọc (menu mobile). */\n  variant?: \"grid\" | \"list\";\n  className?: string;\n  /** Gọi sau khi người dùng chọn một app — dùng để đóng popover/menu mobile. */\n  onSelected?: () => void;\n}\n\n/**\n * Nội dung của AppLauncher, tách riêng để `MobileMenu` nhúng thẳng (không popover).\n *\n * Điều hướng bàn phím: ←/→/↑/↓ chạy giữa các ô (xuyên cả hai nhóm như một lưới liền),\n * Home/End nhảy đầu-cuối; Enter/Space để chính thẻ button/link xử lý.\n * Vị trí ô đọc từ DOM chứ không giữ mảng ref: ô \"đã mở khoá\" có thể là `LinkComponent`\n * do app cung cấp — không chắc component đó nhận `ref`.\n */\nexport function AppLauncherPanel({ variant = \"grid\", className, onSelected }: AppLauncherPanelProps) {\n  const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();\n\n  const entitled = getEntitledApps(apps);\n  const locked = getLockedApps(apps);\n  const total = entitled.length + locked.length;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const columns = variant === \"grid\" ? 3 : 1;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const root = rootRef.current;\n    if (!root) return;\n    const tiles = Array.from(root.querySelectorAll<HTMLElement>(`[${TILE_ATTR}]`));\n    const index = tiles.indexOf(event.currentTarget);\n    if (index < 0) return;\n\n    const moves: Record<string, number | undefined> = {\n      ArrowRight: index + 1,\n      ArrowLeft: index - 1,\n      ArrowDown: index + columns,\n      ArrowUp: index - columns,\n      Home: 0,\n      End: tiles.length - 1\n    };\n    const next = moves[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    tiles[Math.max(0, Math.min(tiles.length - 1, next))]?.focus();\n  };\n\n  const renderTile = (app: AppDescriptor) => {\n    const isLocked = app.entitled === false;\n    const isCurrent = app.id === currentApp?.id;\n    const Icon = app.icon;\n\n    // Ô KHOÁ không tô `opacity-60` nữa. Nó KHÔNG phải control vô hiệu — bấm được và gọi\n    // `onUpsell(appId)` — nên không hưởng miễn trừ \"thành phần vô hiệu\" của WCAG 1.4.3/1.4.11.\n    // Với 60% độ mờ thì mô tả app tụt còn 2,41:1 (light) / 2,74:1 (dark) ✗ và icon trong ô\n    // `bg-muted` còn 2,31:1 / 2,60:1 ✗, chỉ phục hồi khi hover — tức người không rê chuột thì\n    // không đọc được. Bỏ độ mờ: mô tả `text-muted-foreground` 5,23:1 (light) / 5,35:1 (dark) ✓,\n    // icon trên `bg-muted` 4,89:1 / 4,86:1 ✓. Tín hiệu \"chưa mở khoá\" không mất gì: ô icon vẫn\n    // xám (thay vì tô màu app), vẫn có huy hiệu ổ khoá, vẫn có `title`/`aria-label` nói rõ.\n    const tileClass = cn(\n      \"group relative flex rounded-md text-left transition-colors duration-150 ease-out\",\n      variant === \"grid\" ? \"flex-col items-start gap-1.5 p-2.5\" : \"items-center gap-2.5 p-2\",\n      isLocked ? \"hover:bg-muted\" : \"hover:bg-accent\",\n      isCurrent && \"bg-accent\"\n    );\n\n    const body = (\n      <>\n        {/*\n         * ── Ô icon: `IconAvatar`, màu TỰ SUY theo `id` ────────────────────────────────────\n         * Từ 1.10.0 ô này thôi tô bằng `--app-accent`. Lý do không phải thẩm mỹ: bảng accent cũ\n         * bắt mỗi app phải được ai đó gán màu tay, nên sản phẩm thứ sáu hoặc trùng màu với sản\n         * phẩm khác, hoặc phải chờ một lần sửa mã. `IconAvatar` suy màu từ `id` bằng bảng tone\n         * dùng chung với `LetterAvatar`, nên thêm app là nó tự có màu — và cùng màu ấy ở email,\n         * canvas, PDF vì `getAvatarToneColors` đọc cùng bảng.\n         *\n         * ⚠ `seed={app.id}`, KHÔNG phải `app.name`: tên đổi theo ngôn ngữ giao diện. Đo được\n         * 4/6 app đổi màu khi chuyển vi ⇄ en nếu băm theo tên.\n         *\n         * ⚠ Nhánh KHOÁ vẫn tô xám bằng `className`, không bằng một tone: \"chưa mở khoá\" là\n         * trạng thái, mà bảng tone là màu ĐỊNH DANH — mượn một tone làm tín hiệu trạng thái là\n         * đúng cái nhầm vai mà `lib/avatar-tone.ts` cấm. `cn()` cho `bg-muted` thắng tone nhờ\n         * tailwind-merge; cả hai lớp đều ĐẶC nên icon không lộ vệt nối.\n         */}\n        <span className=\"relative flex shrink-0\">\n          <IconAvatar\n            name={app.name}\n            seed={app.id}\n            icon={Icon}\n            tone={app.tone}\n            size={variant === \"grid\" ? \"md\" : \"sm\"}\n            className={cn(isLocked && \"bg-muted text-muted-foreground\")}\n          />\n          {isLocked ? (\n            <span className=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-popover\">\n              <Lock className=\"size-2.5\" />\n            </span>\n          ) : null}\n        </span>\n\n        {/*\n         * `w-full` ở ô lưới là thứ THẬT SỰ bó được chữ — không phải `min-w-0`.\n         *\n         * Ô lưới là `flex-col items-start` (xem `tileClass`), nên theo trục ngang cột này lấy\n         * `fit-content`: nó RỘNG RA THEO TÊN thay vì bằng ô. Mọi phép cắt bên trong vì thế không\n         * bao giờ có gì để bám vào. Đo ở app thật, ô 109px: tên một từ dài cho cột 272px và tràn\n         * 174px, `scrollWidth === clientWidth` — `line-clamp` được đặt nhưng chưa từng chạy.\n         * Thêm `min-w-0` vào hàng bên dưới KHÔNG đổi được số nào (đo: y hệt bản hỏng); `w-full`\n         * đưa cột về đúng 89px và từ đó phép cắt mới có hiệu lực.\n         *\n         * Biến thể `list` không dính: ô đó là hàng ngang nên `flex-1` đã ghim bề rộng sẵn.\n         */}\n        <span className={cn(\"flex min-w-0 flex-col\", variant === \"grid\" ? \"w-full\" : \"flex-1\")}>\n          {/*\n           * `items-start` chứ không `items-center` khi tên có thể xuống hai dòng: căn giữa đẩy\n           * badge xuống giữa khe hai dòng (đo được 10,6px), xa hẳn dòng chữ nó đang chú thích.\n           * Tên một dòng thì hai cách lệch nhau 0,8px — không nhìn thấy.\n           */}\n          <span className={cn(\"flex min-w-0 gap-1.5\", variant === \"grid\" ? \"items-start\" : \"items-center\")}>\n            <span\n              className={cn(\n                \"text-sm font-medium text-foreground\",\n                /*\n                 * Lưới: tên ứng dụng dài hơn ô là chuyện thường (\"Tài khoản Comitor\" ở ô 109px),\n                 * nên cho hai dòng rồi mới cắt — `grid-cols-3` khai `items-stretch` mặc định nên\n                 * ô cao thêm một dòng không làm hàng bị so le.\n                 *\n                 * `break-words` đi KÈM `line-clamp-2`, không phải phòng xa: `-webkit-line-clamp`\n                 * chỉ đặt được dấu \"…\" khi chữ THẬT SỰ tràn sang dòng thứ ba. Một tên không có\n                 * khoảng trắng thì không xuống dòng được, nên nó nằm gọn một dòng và bị\n                 * `overflow: hidden` cắt PHẲNG giữa chữ — đo được: `soDong: 1`,\n                 * `scrollHeight === clientHeight`, không có dấu ba chấm nào. Cho phép ngắt trong\n                 * từ thì nó thành hai dòng và dấu \"…\" quay lại.\n                 *\n                 * Danh sách: mỗi mục là một hàng ngang trong popover hẹp; hai dòng ở đó làm chiều\n                 * cao các mục nhấp nhô. Giữ một dòng — `truncate` vốn đã chạy đúng ở đó vì `flex-1`\n                 * ghim sẵn bề rộng. Cùng lý do tác giả chỉ cho `description` xuống hai dòng ở lưới.\n                 */\n                variant === \"grid\" ? \"line-clamp-2 break-words\" : \"truncate\"\n              )}\n            >\n              {app.name}\n            </span>\n            {app.badge ? (\n              /*\n               * `shrink-0` KHÔNG phải để chống bóp méo — đo rồi: có hay không, badge đều 116,8px,\n               * vì `whitespace-nowrap` trong `Badge` đã giữ sàn `min-width: auto` bằng trọn bề rộng\n               * chữ, và phần co dồn hết sang ô tên (`overflow: hidden` → sàn 0).\n               *\n               * Nó ở đây vì hai lý do khác: khớp quy ước của mọi chỗ gọi `Badge` khác trong shell\n               * (`workspace-switcher`, `sidebar-menu-item` — chỗ này là chỗ DUY NHẤT thiếu), và để\n               * lá chắn thôi phụ thuộc vào một lớp ngầm trong `Badge`. Ai đó thêm `truncate` vào\n               * base cva của `Badge` là sàn tụt về 0 và badge méo, im lặng.\n               */\n              <Badge variant=\"destructive\" size=\"sm\" className=\"shrink-0\">\n                {app.badge}\n              </Badge>\n            ) : null}\n          </span>\n          {app.description ? (\n            <span\n              className={cn(\"text-[11px] leading-snug text-muted-foreground\", variant === \"grid\" && \"line-clamp-2\")}\n            >\n              {app.description}\n            </span>\n          ) : null}\n        </span>\n      </>\n    );\n\n    // Chưa mở khoá → không điều hướng, chỉ báo cho app biết để mời nâng gói.\n    if (isLocked) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          title={labels.lockedHint}\n          aria-label={`${app.name} — ${labels.locked}`}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onUpsell?.(app.id);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    // Có `onAppSelect` → app tự lo điều hướng (đổi subdomain, nạp trước dữ liệu…);\n    // không có → dùng link thật để giữ chuột-giữa / mở tab mới / trình đọc màn hình.\n    if (onAppSelect) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onAppSelect(app);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    return (\n      <ShellNavLink\n        key={app.id}\n        href={app.href}\n        data-app-tile=\"\"\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={tileClass}\n        onKeyDown={handleKeyDown}\n        onClick={() => onSelected?.()}\n      >\n        {body}\n      </ShellNavLink>\n    );\n  };\n\n  if (total === 0) return null;\n\n  /*\n   * `auto-rows-fr` vá thứ duy nhất mà việc cho tên xuống hai dòng làm xấu đi: TRONG một hàng thì\n   * các ô đã bằng nhau sẵn (`align-items: stretch` là mặc định của Grid), nhưng GIỮA các hàng thì\n   * không — hàng có một tên hai dòng cao 116px trong khi hàng kia 97px. `fr` cho mọi hàng chung\n   * một chiều cao.\n   */\n  const groupClass = variant === \"grid\" ? \"grid auto-rows-fr grid-cols-3 gap-1\" : \"flex flex-col gap-0.5\";\n\n  return (\n    <div ref={rootRef} className={cn(\"flex flex-col gap-3\", className)}>\n      {entitled.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.myApps}\n          </p>\n          <div className={groupClass}>{entitled.map(renderTile)}</div>\n        </section>\n      ) : null}\n\n      {locked.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.discoverApps}\n          </p>\n          <div className={groupClass}>{locked.map(renderTile)}</div>\n        </section>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AppLauncherProps extends AppLauncherPanelProps {\n  /** Bỏ nút bấm + Popover, render thẳng panel (MobileMenu dùng cách này). */\n  inline?: boolean;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * **Trục 2 — chuyển sản phẩm trong cùng workspace.**\n *\n * Nút lưới 3×3 ở header mở popover lưới ô app.\n * Trạng thái mở nằm ở `ShellProvider` để phím tắt `Cmd/Ctrl + Shift + K` bật được.\n * App chưa có trong gói hiện ô khoá và gọi `onUpsell(appId)` thay vì điều hướng.\n */\nexport function AppLauncher({\n  className,\n  variant = \"grid\",\n  inline = false,\n  align = \"end\",\n  onSelected\n}: AppLauncherProps) {\n  const { apps, appLauncherOpen, setAppLauncherOpen, labels } = useShell();\n\n  if (apps.length === 0) return null;\n\n  if (inline) {\n    return <AppLauncherPanel variant={variant} className={className} onSelected={onSelected} />;\n  }\n\n  return (\n    <Popover open={appLauncherOpen} onOpenChange={setAppLauncherOpen}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label={labels.appLauncherLabel}\n              className={cn(\n                \"flex size-9 items-center justify-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\",\n                appLauncherOpen && \"bg-muted text-foreground\",\n                className\n              )}\n            >\n              <LayoutGrid className=\"size-4\" />\n            </button>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">{labels.apps}</TooltipContent>\n      </Tooltip>\n\n      <PopoverContent align={align} sideOffset={8} className=\"w-[22rem] p-2\">\n        <AppLauncherPanel\n          variant={variant}\n          onSelected={() => {\n            setAppLauncherOpen(false);\n            onSelected?.();\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/app-launcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { LayoutGrid, Lock } from \"lucide-react\";\nimport { type KeyboardEvent, useRef } from \"react\";\nimport { IconAvatar } from \"../components/composite/icon-avatar.js\";\nimport { Badge } from \"../components/ui/badge.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { AppDescriptor } from \"./types.js\";\nimport { getEntitledApps, getLockedApps } from \"./utils.js\";\n\n/** Đánh dấu ô app để điều hướng bàn phím tìm được, kể cả ô render bằng LinkComponent của app. */\nconst TILE_ATTR = \"data-app-tile\";\n\nexport interface AppLauncherPanelProps {\n  /** \"grid\" = lưới 3 cột; \"list\" = danh sách dọc (menu mobile). */\n  variant?: \"grid\" | \"list\";\n  className?: string;\n  /** Gọi sau khi người dùng chọn một app — dùng để đóng popover/menu mobile. */\n  onSelected?: () => void;\n}\n\n/**\n * Nội dung của AppLauncher, tách riêng để `MobileMenu` nhúng thẳng (không popover).\n *\n * Điều hướng bàn phím: ←/→/↑/↓ chạy giữa các ô (xuyên cả hai nhóm như một lưới liền),\n * Home/End nhảy đầu-cuối; Enter/Space để chính thẻ button/link xử lý.\n * Vị trí ô đọc từ DOM chứ không giữ mảng ref: ô \"đã mở khoá\" có thể là `LinkComponent`\n * do app cung cấp — không chắc component đó nhận `ref`.\n */\nexport function AppLauncherPanel({ variant = \"grid\", className, onSelected }: AppLauncherPanelProps) {\n  const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();\n\n  const entitled = getEntitledApps(apps);\n  const locked = getLockedApps(apps);\n  const total = entitled.length + locked.length;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const columns = variant === \"grid\" ? 3 : 1;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    const root = rootRef.current;\n    if (!root) return;\n    const tiles = Array.from(root.querySelectorAll<HTMLElement>(`[${TILE_ATTR}]`));\n    const index = tiles.indexOf(event.currentTarget);\n    if (index < 0) return;\n\n    const moves: Record<string, number | undefined> = {\n      ArrowRight: index + 1,\n      ArrowLeft: index - 1,\n      ArrowDown: index + columns,\n      ArrowUp: index - columns,\n      Home: 0,\n      End: tiles.length - 1\n    };\n    const next = moves[event.key];\n    if (next === undefined) return;\n\n    event.preventDefault();\n    tiles[Math.max(0, Math.min(tiles.length - 1, next))]?.focus();\n  };\n\n  const renderTile = (app: AppDescriptor) => {\n    const isLocked = app.entitled === false;\n    const isCurrent = app.id === currentApp?.id;\n    const Icon = app.icon;\n\n    // Ô KHOÁ không tô `opacity-60` nữa. Nó KHÔNG phải control vô hiệu — bấm được và gọi\n    // `onUpsell(appId)` — nên không hưởng miễn trừ \"thành phần vô hiệu\" của WCAG 1.4.3/1.4.11.\n    // Với 60% độ mờ thì mô tả app tụt còn 2,41:1 (light) / 2,74:1 (dark) ✗ và icon trong ô\n    // `bg-muted` còn 2,31:1 / 2,60:1 ✗, chỉ phục hồi khi hover — tức người không rê chuột thì\n    // không đọc được. Bỏ độ mờ: mô tả `text-muted-foreground` 5,23:1 (light) / 5,35:1 (dark) ✓.\n    // Tín hiệu \"chưa mở khoá\" không mất gì: huy hiệu ổ khoá, `title`/`aria-label` nói rõ (ô icon\n    // giữ màu app — xem chú thích ở `IconAvatar` bên dưới).\n    //\n    // Ô LƯỚI là hình VUÔNG, icon + tên căn GIỮA. Bản trước là `items-start` + `text-left`: ô kéo\n    // theo bề rộng cột (~109px ở bản 22rem) nhưng chỉ cao bằng nội dung, nên ra hình chữ nhật nằm ngang với\n    // khoảng trống thừa bên phải icon và tên — mắt đọc ra một ô \"chưa điền hết\". `aspect-square`\n    // là SÀN chứ không phải trần: `min-height: auto` mặc định để ô cao thêm khi app truyền\n    // `description` dài, và `auto-rows-fr` của lưới giữ cả hàng cao đều nhau.\n    // Cạnh ô do bề rộng popover quyết (`w-[19rem]` ở `AppLauncher`, ba cột): 22rem cho ô 109px mà\n    // nội dung (icon 36px + một dòng tên) chỉ cao ~62px — gần nửa ô là khoảng trống. 19rem cho ô\n    // 92,7px; `p-1.5` để lại 80,7px cho tên — vừa đủ \"Khách hàng\" (79,7px ở `text-sm`) trên một\n    // dòng. `p-2` là nó xuống hai dòng và ô hàng đó cao hơn ô vuông. Tên dài hơn vẫn xuống dòng.\n    const tileClass = cn(\n      \"group relative flex rounded-md transition-colors duration-150 ease-out\",\n      variant === \"grid\"\n        ? \"aspect-square flex-col items-center justify-center gap-1.5 p-1.5 text-center\"\n        : \"items-center gap-2.5 p-2 text-left\",\n      isLocked ? \"hover:bg-muted\" : \"hover:bg-accent\",\n      isCurrent && \"bg-accent\"\n    );\n\n    const body = (\n      <>\n        {/*\n         * ── Ô icon: `IconAvatar`, màu TỰ SUY theo `id` ────────────────────────────────────\n         * Từ 1.10.0 ô này thôi tô bằng `--app-accent`. Lý do không phải thẩm mỹ: bảng accent cũ\n         * bắt mỗi app phải được ai đó gán màu tay, nên sản phẩm thứ sáu hoặc trùng màu với sản\n         * phẩm khác, hoặc phải chờ một lần sửa mã. `IconAvatar` suy màu từ `id` bằng bảng tone\n         * dùng chung với `LetterAvatar`, nên thêm app là nó tự có màu — và cùng màu ấy ở email,\n         * canvas, PDF vì `getAvatarToneColors` đọc cùng bảng.\n         *\n         * ⚠ `seed={app.id}`, KHÔNG phải `app.name`: tên đổi theo ngôn ngữ giao diện. Đo được\n         * 4/6 app đổi màu khi chuyển vi ⇄ en nếu băm theo tên.\n         *\n         * ⚠ Nhánh KHOÁ giữ ĐÚNG màu của app (từ 3.10.0), tín hiệu duy nhất là huy hiệu ổ khoá.\n         * Bản trước tô xám cả ô: ở mục \"Khám phá thêm\" mọi app chưa mở trông y hệt nhau, tức người\n         * dùng mất đúng thứ giúp nhận ra sản phẩm ngay ở chỗ cần mời họ dùng thử. \"Chưa mở khoá\"\n         * vẫn được nói đủ: ổ khoá, nhãn nhóm, `title`/`aria-label` của ô.\n         */}\n        <span className=\"relative flex shrink-0\">\n          <IconAvatar\n            name={app.name}\n            seed={app.id}\n            icon={Icon}\n            tone={app.tone}\n            size={variant === \"grid\" ? \"md\" : \"sm\"}\n          />\n          {isLocked ? (\n            <span className=\"absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-popover\">\n              <Lock className=\"size-2.5\" />\n            </span>\n          ) : null}\n        </span>\n\n        {/*\n         * `w-full` ở ô lưới là thứ THẬT SỰ bó được chữ — không phải `min-w-0`.\n         *\n         * Ô lưới là `flex-col` (xem `tileClass`), nên theo trục ngang cột này lấy\n         * `fit-content`: nó RỘNG RA THEO TÊN thay vì bằng ô. Mọi phép cắt bên trong vì thế không\n         * bao giờ có gì để bám vào. Đo ở app thật, ô 109px: tên một từ dài cho cột 272px và tràn\n         * 174px, `scrollWidth === clientWidth` — `line-clamp` được đặt nhưng chưa từng chạy.\n         * Thêm `min-w-0` vào hàng bên dưới KHÔNG đổi được số nào (đo: y hệt bản hỏng); `w-full`\n         * đưa cột về đúng 89px và từ đó phép cắt mới có hiệu lực.\n         *\n         * Biến thể `list` không dính: ô đó là hàng ngang nên `flex-1` đã ghim bề rộng sẵn.\n         */}\n        <span className={cn(\"flex min-w-0 flex-col\", variant === \"grid\" ? \"w-full\" : \"flex-1\")}>\n          {/*\n           * `items-start` chứ không `items-center` khi tên có thể xuống hai dòng: căn giữa đẩy\n           * badge xuống giữa khe hai dòng (đo được 10,6px), xa hẳn dòng chữ nó đang chú thích.\n           * Tên một dòng thì hai cách lệch nhau 0,8px — không nhìn thấy.\n           */}\n          <span\n            className={cn(\"flex min-w-0 gap-1.5\", variant === \"grid\" ? \"items-start justify-center\" : \"items-center\")}\n          >\n            <span\n              className={cn(\n                \"text-sm font-medium text-foreground\",\n                /*\n                 * Lưới: tên ứng dụng dài hơn ô là chuyện thường (\"Tài khoản Comitor\" ở ô 109px),\n                 * nên cho hai dòng rồi mới cắt — `grid-cols-3` khai `items-stretch` mặc định nên\n                 * ô cao thêm một dòng không làm hàng bị so le.\n                 *\n                 * `break-words` đi KÈM `line-clamp-2`, không phải phòng xa: `-webkit-line-clamp`\n                 * chỉ đặt được dấu \"…\" khi chữ THẬT SỰ tràn sang dòng thứ ba. Một tên không có\n                 * khoảng trắng thì không xuống dòng được, nên nó nằm gọn một dòng và bị\n                 * `overflow: hidden` cắt PHẲNG giữa chữ — đo được: `soDong: 1`,\n                 * `scrollHeight === clientHeight`, không có dấu ba chấm nào. Cho phép ngắt trong\n                 * từ thì nó thành hai dòng và dấu \"…\" quay lại.\n                 *\n                 * Danh sách: mỗi mục là một hàng ngang trong popover hẹp; hai dòng ở đó làm chiều\n                 * cao các mục nhấp nhô. Giữ một dòng — `truncate` vốn đã chạy đúng ở đó vì `flex-1`\n                 * ghim sẵn bề rộng. Cùng lý do tác giả chỉ cho `description` xuống hai dòng ở lưới.\n                 */\n                variant === \"grid\" ? \"line-clamp-2 break-words\" : \"truncate\"\n              )}\n            >\n              {app.name}\n            </span>\n            {app.badge ? (\n              /*\n               * `shrink-0` KHÔNG phải để chống bóp méo — đo rồi: có hay không, badge đều 116,8px,\n               * vì `whitespace-nowrap` trong `Badge` đã giữ sàn `min-width: auto` bằng trọn bề rộng\n               * chữ, và phần co dồn hết sang ô tên (`overflow: hidden` → sàn 0).\n               *\n               * Nó ở đây vì hai lý do khác: khớp quy ước của mọi chỗ gọi `Badge` khác trong shell\n               * (`workspace-switcher`, `sidebar-menu-item` — chỗ này là chỗ DUY NHẤT thiếu), và để\n               * lá chắn thôi phụ thuộc vào một lớp ngầm trong `Badge`. Ai đó thêm `truncate` vào\n               * base cva của `Badge` là sàn tụt về 0 và badge méo, im lặng.\n               */\n              <Badge variant=\"destructive\" size=\"sm\" className=\"shrink-0\">\n                {app.badge}\n              </Badge>\n            ) : null}\n          </span>\n          {app.description ? (\n            <span\n              className={cn(\"text-[11px] leading-snug text-muted-foreground\", variant === \"grid\" && \"line-clamp-2\")}\n            >\n              {app.description}\n            </span>\n          ) : null}\n        </span>\n      </>\n    );\n\n    // Chưa mở khoá → không điều hướng, chỉ báo cho app biết để mời nâng gói.\n    if (isLocked) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          title={labels.lockedHint}\n          aria-label={`${app.name} — ${labels.locked}`}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onUpsell?.(app.id);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    // Có `onAppSelect` → app tự lo điều hướng (đổi subdomain, nạp trước dữ liệu…);\n    // không có → dùng link thật để giữ chuột-giữa / mở tab mới / trình đọc màn hình.\n    if (onAppSelect) {\n      return (\n        <button\n          key={app.id}\n          type=\"button\"\n          data-app-tile=\"\"\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={tileClass}\n          onKeyDown={handleKeyDown}\n          onClick={() => {\n            onAppSelect(app);\n            onSelected?.();\n          }}\n        >\n          {body}\n        </button>\n      );\n    }\n\n    return (\n      <ShellNavLink\n        key={app.id}\n        href={app.href}\n        data-app-tile=\"\"\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={tileClass}\n        onKeyDown={handleKeyDown}\n        onClick={() => onSelected?.()}\n      >\n        {body}\n      </ShellNavLink>\n    );\n  };\n\n  if (total === 0) return null;\n\n  /*\n   * `auto-rows-fr` vá thứ duy nhất mà việc cho tên xuống hai dòng làm xấu đi: TRONG một hàng thì\n   * các ô đã bằng nhau sẵn (`align-items: stretch` là mặc định của Grid), nhưng GIỮA các hàng thì\n   * không — hàng có một tên hai dòng cao 116px trong khi hàng kia 97px. `fr` cho mọi hàng chung\n   * một chiều cao.\n   */\n  const groupClass = variant === \"grid\" ? \"grid auto-rows-fr grid-cols-3 gap-1\" : \"flex flex-col gap-0.5\";\n\n  return (\n    <div ref={rootRef} className={cn(\"flex flex-col gap-3\", className)}>\n      {entitled.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.myApps}\n          </p>\n          <div className={groupClass}>{entitled.map(renderTile)}</div>\n        </section>\n      ) : null}\n\n      {locked.length > 0 ? (\n        <section>\n          <p className=\"px-1 pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            {labels.discoverApps}\n          </p>\n          <div className={groupClass}>{locked.map(renderTile)}</div>\n        </section>\n      ) : null}\n    </div>\n  );\n}\n\nexport interface AppLauncherProps extends AppLauncherPanelProps {\n  /** Bỏ nút bấm + Popover, render thẳng panel (MobileMenu dùng cách này). */\n  inline?: boolean;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * **Trục 2 — chuyển sản phẩm trong cùng workspace.**\n *\n * Nút lưới 3×3 ở header mở popover lưới ô app.\n * Trạng thái mở nằm ở `ShellProvider` để phím tắt `Cmd/Ctrl + Shift + K` bật được.\n * App chưa có trong gói hiện ô khoá và gọi `onUpsell(appId)` thay vì điều hướng.\n */\nexport function AppLauncher({\n  className,\n  variant = \"grid\",\n  inline = false,\n  align = \"end\",\n  onSelected\n}: AppLauncherProps) {\n  const { apps, appLauncherOpen, setAppLauncherOpen, labels } = useShell();\n\n  if (apps.length === 0) return null;\n\n  if (inline) {\n    return <AppLauncherPanel variant={variant} className={className} onSelected={onSelected} />;\n  }\n\n  return (\n    <Popover open={appLauncherOpen} onOpenChange={setAppLauncherOpen}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <PopoverTrigger asChild>\n            <button\n              type=\"button\"\n              aria-label={labels.appLauncherLabel}\n              className={cn(\n                \"flex size-9 items-center justify-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\",\n                appLauncherOpen && \"bg-muted text-foreground\",\n                className\n              )}\n            >\n              <LayoutGrid className=\"size-4\" />\n            </button>\n          </PopoverTrigger>\n        </TooltipTrigger>\n        <TooltipContent side=\"bottom\">{labels.apps}</TooltipContent>\n      </Tooltip>\n\n      <PopoverContent align={align} sideOffset={8} className=\"w-[19rem] p-2\">\n        <AppLauncherPanel\n          variant={variant}\n          onSelected={() => {\n            setAppLauncherOpen(false);\n            onSelected?.();\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/display-axis-provider.d.ts

@@ -37,7 +37,7 @@ declare function useDensity(): {
 };
 declare const FontSizeProvider: ({ children, defaultValue, storageKey, nonce }: {
     children: ReactNode;
-    defaultValue?: "sm" | "md" | "lg" | undefined;
+    defaultValue?: "md" | "sm" | "lg" | undefined;
     storageKey?: string;
     /**
      * Nonce của CSP, cho script chống nháy mà provider này TỰ render.

package/dist/shell/types.d.ts

@@ -140,6 +140,7 @@ interface UserMenuItem {
     onSelect?: () => void;
     /** Nhãn phím tắt hiển thị bên phải, vd "Ctrl+P" (chỉ hiển thị, không tự gắn phím). */
     shortcut?: string;
+    /** `"destructive"`: tô đỏ VÀ chuyển mục xuống nhóm thoát (dưới vạch phân cách, trên mục đăng xuất). */
     variant?: "default" | "destructive";
 }
 /**

package/dist/shell/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/types.ts"],"sourcesContent":["/**\n * Hợp đồng dữ liệu của Tier 3 (shell).\n *\n * Nguyên tắc: package KHÔNG chứa dữ liệu app. Toàn bộ workspace / danh sách app /\n * menu / user đều là *type* — app truyền vào qua props. File này là **module thuần**\n * (chỉ type + hằng nhãn, không hook, không directive) nên dùng được ở cả server lẫn client.\n *\n * Hai trục điều hướng của Comitor — một user thuộc NHIỀU workspace, và mỗi workspace\n * lại bật NHIỀU sản phẩm. Hai chiều đó vuông góc nhau (đổi workspace không đổi app đang\n * dùng, và ngược lại) nên không gộp được vào một menu phẳng:\n *   trục 1 — WORKSPACE: đổi ngữ cảnh dữ liệu   (Acme Corp ▸ Beta Ltd)\n *   trục 2 — APP:       đổi sản phẩm trong cùng workspace (Tasks ▸ Chat ▸ CRM ▸ HR)\n */\n\nimport type { LucideIcon } from \"lucide-react\";\nimport type { AnchorHTMLAttributes, ComponentType } from \"react\";\nimport { shellEn } from \"../i18n/namespaces/shell.js\";\n\n/**\n * Icon dùng trong shell: `LucideIcon` là trường hợp phổ biến, nhưng app có thể\n * truyền component SVG riêng miễn nhận `className` (để shell điều khiển kích thước).\n */\nexport type ShellIcon = LucideIcon | ComponentType<{ className?: string }>;\n\n/** Workspace (trục 1) — một tổ chức/không gian làm việc mà user thuộc về. */\nexport interface Workspace {\n  id: string;\n  name: string;\n  /** Định danh trên URL/subdomain — shell chỉ hiển thị, không tự điều hướng. */\n  slug: string;\n  logoUrl?: string;\n  /** \"Free\" | \"Pro\" | \"Business\"… — chỉ để hiển thị nhãn gói, shell không suy luận quyền từ đây. */\n  plan?: string;\n  /** Vai trò của user trong workspace này (chuỗi hiển thị sẵn). */\n  role?: string;\n  memberCount?: number;\n}\n\n/** Một sản phẩm trong hệ sinh thái (trục 2) — Tasks, Chat, CRM, HR… */\nexport interface AppDescriptor {\n  /** \"tasks\" | \"chat\" | \"crm\" | \"hr\" | … */\n  id: string;\n  /** Tên hiển thị — app truyền theo ngôn ngữ giao diện đang dùng. */\n  name: string;\n  description?: string;\n  icon: ShellIcon;\n  href: string;\n  /**\n   * Tone màu định danh — MỘT tên trong `AVATAR_TONE_NAMES` của `@comitor/ui`.\n   *\n   * Bỏ trống thì màu TỰ SUY từ `id` bằng bảng tone dùng chung với `LetterAvatar`, nên một sản\n   * phẩm mới có màu ngay mà không ai phải cấu hình. Tên lạ cũng rơi về màu suy ra — không ném.\n   *\n   * ⚠ Hạt giống là `id` (khoá app), KHÔNG phải `name`: tên đổi theo ngôn ngữ giao diện, và đo\n   * được 4/6 app đổi màu khi chuyển vi ⇄ en nếu băm theo tên. Xem `IconAvatar` prop `seed`.\n   */\n  tone?: string;\n  /**\n   * Màu nhấn riêng của app — bất kỳ giá trị màu CSS hợp lệ (nên là `var(--…)`).\n   * Shell gán vào biến `--app-accent` bằng inline style, KHÔNG sinh class động.\n   *\n   * ⚠ `--app-accent` CHỈ để TÔ NỀN. Khai `accent` thì phải khai kèm `accentInk`\n   * (và `accentForeground` nếu nền đặc của bạn không mang được mực) — xem\n   * `docs/hop-dong-mau.md` §5.\n   */\n  /** @deprecated Từ 1.10.0 `AppLauncher` KHÔNG đọc prop này nữa — dùng `tone`. Xem ghi chú trên. */\n  accent?: string;\n  /** Màu chữ/icon nằm TRÊN nền `--app-accent` ĐẶC; mặc định giữ `--app-accent-foreground` của theme. */\n  /** @deprecated Từ 1.10.0 — dùng `tone`. */\n  accentForeground?: string;\n  /**\n   * Chính màu app khi nó đi lên NỀN TRANG (chữ, icon rời, viền, vạch active, dấu chọn)\n   * → biến `--app-accent-ink`. Mặc định giữ bậc ink của theme.\n   *\n   * Vì sao phải khai riêng chứ không dẫn xuất từ `accent`: bậc nền và bậc mực có ràng buộc\n   * NGƯỢC NHAU — nền càng đúng brand thì cùng màu đó làm chữ càng chìm. Gold mặc định là ví\n   * dụ: `--app-accent` #E8B824 làm chữ trên nền trắng chỉ **1,86:1**, trên chính tint 15%\n   * của nó **1,69:1**; `--app-accent-ink` #7A5800 đạt **6,51:1** trên `--background`,\n   * **6,24:1** trên `--sidebar`, **5,96:1** trên `--sidebar-accent`. Bỏ trống trường này mà\n   * vẫn đổi `accent` thì mọi chỗ dùng `text-app-accent-ink` giữ nguyên gold — sai màu app.\n   */\n  /** @deprecated Từ 1.10.0 — dùng `tone`. */\n  accentInk?: string;\n  /** `false` = workspace chưa bật/chưa mua → hiện khoá và gọi `onUpsell` thay vì điều hướng. */\n  entitled?: boolean;\n  badge?: number | string;\n}\n\n/** Variant badge của mục menu — map thẳng sang variant của primitive `Badge`. */\nexport type NavBadgeVariant = \"default\" | \"destructive\" | \"warning\" | \"success\";\n\n/** Một mục điều hướng trong sidebar. */\nexport interface NavItem {\n  id: string;\n  label: string;\n  href: string;\n  icon?: ShellIcon;\n  badge?: number | string;\n  badgeVariant?: NavBadgeVariant;\n  /** Mục con — render trong `Collapsible`; cha có children thì click cha chỉ mở/đóng. */\n  children?: NavItem[];\n  /**\n   * Ép trạng thái active thay vì để shell tự suy từ `pathname`\n   * (dùng khi route thật khác href, vd trang chi tiết `/tasks/123`).\n   */\n  isActive?: boolean;\n  /** Mở link ở tab mới (link ngoài: tài liệu, trạng thái hệ thống…). */\n  external?: boolean;\n  disabled?: boolean;\n}\n\n/** Nhóm mục menu (nhãn nhỏ + thu gọn được). */\nexport interface NavGroup {\n  id: string;\n  /** Bỏ trống = nhóm không nhãn (dùng cho nhóm đầu tiên). */\n  label?: string;\n  items: NavItem[];\n  /** Cho phép thu gọn cả nhóm; mặc định true khi có `label`. */\n  collapsible?: boolean;\n  /** Trạng thái ban đầu khi `collapsible` — mặc định mở. */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * Menu app truyền vào: mảng phẳng `NavItem[]` (app đơn giản) hoặc `NavGroup[]`.\n * Shell chuẩn hoá về `NavGroup[]` bằng `toNavGroups()` trong `utils.ts`.\n */\nexport type ShellNav = NavItem[] | NavGroup[];\n\n/** Người dùng đang đăng nhập. */\nexport interface ShellUser {\n  id: string;\n  name: string;\n  email?: string;\n  avatarUrl?: string;\n  /** Vai trò trong workspace hiện tại — chuỗi hiển thị sẵn, shell không map mã. */\n  role?: string;\n}\n\n/** Mục bổ sung do app chèn vào `UserMenu`. */\nexport interface UserMenuItem {\n  id: string;\n  label: string;\n  icon?: ShellIcon;\n  /** Có `href` thì render link; không thì render nút gọi `onSelect`. */\n  href?: string;\n  onSelect?: () => void;\n  /** Nhãn phím tắt hiển thị bên phải, vd \"Ctrl+P\" (chỉ hiển thị, không tự gắn phím). */\n  shortcut?: string;\n  variant?: \"default\" | \"destructive\";\n}\n\n/**\n * Props của component link do app cung cấp (`LinkComponent`).\n * Mặc định shell dùng `next/link`; app không-Next (Vite, Storybook) truyền\n * component router của mình miễn khớp hình dạng props này.\n */\nexport interface ShellLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n  /** Chỉ nhận chuỗi — shell không dùng dạng `UrlObject` của Next để adapter khác còn dùng lại được. */\n  href: string;\n}\n\n/** Component link thay thế `next/link`. */\nexport type ShellLinkComponent = ComponentType<ShellLinkProps>;\n\n/**\n * Toàn bộ chuỗi hiển thị của shell. Theo `ComitorLocaleProvider` (namespace `shell` — mặc định\n * tiếng Anh, bảng tiếng Việt dựng sẵn); override từng khoá qua prop `labels` của\n * `ShellProvider`/`AppShell`.\n */\nexport interface ShellLabels {\n  /* Sidebar & header */\n  collapseSidebar: string;\n  /**\n   * Nhãn NGẮN hiện trên chính nút thu gọn (khi thanh bên đang mở rộng).\n   *\n   * Tách khỏi `collapseSidebar` vì hai chuỗi có hai việc khác nhau: chuỗi dài là TÊN TRUY CẬP\n   * (`aria-label` + tooltip) — nó phải nói rõ thu gọn cái gì, vì người dùng trình đọc màn hình\n   * nghe nó tách khỏi ngữ cảnh; chuỗi ngắn là chữ NHÌN THẤY trong một nút rộng 240px nằm ngay\n   * dưới thanh bên, nơi ngữ cảnh đã hiển nhiên và chữ dài chỉ làm nút chật.\n   *\n   * ⚠ WCAG 2.5.3 (Label in Name): chuỗi ngắn PHẢI là một phần của chuỗi dài, nếu không lệnh thoại\n   * \"bấm Collapse\" sẽ không khớp tên truy cập. \"Collapse\" ⊂ \"Collapse sidebar\" ✓, \"Thu gọn\" ⊂\n   * \"Thu gọn thanh bên\" ✓ — giữ quan hệ đó khi dịch sang ngôn ngữ khác.\n   */\n  collapseSidebarShort: string;\n  expandSidebar: string;\n  openMenu: string;\n  closeMenu: string;\n  search: string;\n  searchPlaceholder: string;\n  notifications: string;\n  navigationLabel: string;\n  /* Workspace switcher */\n  workspace: string;\n  workspaceSwitcherLabel: string;\n  workspaceSearchPlaceholder: string;\n  workspaceEmpty: string;\n  createWorkspace: string;\n  workspaceSettings: string;\n  inviteMembers: string;\n  /**\n   * Đơn vị đếm thành viên của một workspace. Là HÀM chứ không phải chuỗi vì nó CHÈN SỐ, và\n   * trật tự từ đổi theo ngôn ngữ: tiếng Việt đặt số trước (\"12 thành viên\"), tiếng Anh cũng vậy\n   * (\"12 members\"), nhưng nhiều ngôn ngữ thì không — nối `${count} ${đơn_vị}` ở phía component\n   * là khoá cứng trật tự của một ngôn ngữ vào mọi bản dịch. Hàm còn chọn được dạng số ít/nhiều\n   * (\"1 member\" ⇄ \"2 members\"), thứ tiếng Việt không có mà tiếng Anh thì bắt buộc. Cùng khuôn\n   * với `range`/`pageStatus` của `TablePagination` (README §5, ba quy tắc của cơ chế `labels`).\n   */\n  members: (count: number) => string;\n  /* App launcher */\n  apps: string;\n  appLauncherLabel: string;\n  myApps: string;\n  discoverApps: string;\n  locked: string;\n  lockedHint: string;\n  /* User menu */\n  account: string;\n  profile: string;\n  /** Mục dựng sẵn khi `UserMenu` có `accountUrl` — trang `/preferences` của Comitor.Account. */\n  preferences: string;\n  /** Mục dựng sẵn khi `UserMenu` có `accountUrl` — trang `/security` của Comitor.Account. */\n  security: string;\n  settings: string;\n  appearance: string;\n  help: string;\n  logout: string;\n  /* Theme */\n  themeLight: string;\n  themeDark: string;\n  themeSystem: string;\n  toggleTheme: string;\n  /* Trợ năng */\n  /** Chữ của skip link đầu khung (`AppShell`, WCAG 2.4.1) — chỉ hiện khi nhận focus bàn phím */\n  skipToContent: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.shell`. Shell không đọc thẳng hằng này — `ShellProvider` đọc bảng của\n * `ComitorLocaleProvider` rồi trộn `labels` lên trên; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\nexport const DEFAULT_SHELL_LABELS: ShellLabels = { ...shellEn };\n"],"mappings":"AAgBA,SAAS,eAAe;AAmOjB,MAAM,uBAAoC,EAAE,GAAG,QAAQ;","names":[]}
+{"version":3,"sources":["../../src/shell/types.ts"],"sourcesContent":["/**\n * Hợp đồng dữ liệu của Tier 3 (shell).\n *\n * Nguyên tắc: package KHÔNG chứa dữ liệu app. Toàn bộ workspace / danh sách app /\n * menu / user đều là *type* — app truyền vào qua props. File này là **module thuần**\n * (chỉ type + hằng nhãn, không hook, không directive) nên dùng được ở cả server lẫn client.\n *\n * Hai trục điều hướng của Comitor — một user thuộc NHIỀU workspace, và mỗi workspace\n * lại bật NHIỀU sản phẩm. Hai chiều đó vuông góc nhau (đổi workspace không đổi app đang\n * dùng, và ngược lại) nên không gộp được vào một menu phẳng:\n *   trục 1 — WORKSPACE: đổi ngữ cảnh dữ liệu   (Acme Corp ▸ Beta Ltd)\n *   trục 2 — APP:       đổi sản phẩm trong cùng workspace (Tasks ▸ Chat ▸ CRM ▸ HR)\n */\n\nimport type { LucideIcon } from \"lucide-react\";\nimport type { AnchorHTMLAttributes, ComponentType } from \"react\";\nimport { shellEn } from \"../i18n/namespaces/shell.js\";\n\n/**\n * Icon dùng trong shell: `LucideIcon` là trường hợp phổ biến, nhưng app có thể\n * truyền component SVG riêng miễn nhận `className` (để shell điều khiển kích thước).\n */\nexport type ShellIcon = LucideIcon | ComponentType<{ className?: string }>;\n\n/** Workspace (trục 1) — một tổ chức/không gian làm việc mà user thuộc về. */\nexport interface Workspace {\n  id: string;\n  name: string;\n  /** Định danh trên URL/subdomain — shell chỉ hiển thị, không tự điều hướng. */\n  slug: string;\n  logoUrl?: string;\n  /** \"Free\" | \"Pro\" | \"Business\"… — chỉ để hiển thị nhãn gói, shell không suy luận quyền từ đây. */\n  plan?: string;\n  /** Vai trò của user trong workspace này (chuỗi hiển thị sẵn). */\n  role?: string;\n  memberCount?: number;\n}\n\n/** Một sản phẩm trong hệ sinh thái (trục 2) — Tasks, Chat, CRM, HR… */\nexport interface AppDescriptor {\n  /** \"tasks\" | \"chat\" | \"crm\" | \"hr\" | … */\n  id: string;\n  /** Tên hiển thị — app truyền theo ngôn ngữ giao diện đang dùng. */\n  name: string;\n  description?: string;\n  icon: ShellIcon;\n  href: string;\n  /**\n   * Tone màu định danh — MỘT tên trong `AVATAR_TONE_NAMES` của `@comitor/ui`.\n   *\n   * Bỏ trống thì màu TỰ SUY từ `id` bằng bảng tone dùng chung với `LetterAvatar`, nên một sản\n   * phẩm mới có màu ngay mà không ai phải cấu hình. Tên lạ cũng rơi về màu suy ra — không ném.\n   *\n   * ⚠ Hạt giống là `id` (khoá app), KHÔNG phải `name`: tên đổi theo ngôn ngữ giao diện, và đo\n   * được 4/6 app đổi màu khi chuyển vi ⇄ en nếu băm theo tên. Xem `IconAvatar` prop `seed`.\n   */\n  tone?: string;\n  /**\n   * Màu nhấn riêng của app — bất kỳ giá trị màu CSS hợp lệ (nên là `var(--…)`).\n   * Shell gán vào biến `--app-accent` bằng inline style, KHÔNG sinh class động.\n   *\n   * ⚠ `--app-accent` CHỈ để TÔ NỀN. Khai `accent` thì phải khai kèm `accentInk`\n   * (và `accentForeground` nếu nền đặc của bạn không mang được mực) — xem\n   * `docs/hop-dong-mau.md` §5.\n   */\n  /** @deprecated Từ 1.10.0 `AppLauncher` KHÔNG đọc prop này nữa — dùng `tone`. Xem ghi chú trên. */\n  accent?: string;\n  /** Màu chữ/icon nằm TRÊN nền `--app-accent` ĐẶC; mặc định giữ `--app-accent-foreground` của theme. */\n  /** @deprecated Từ 1.10.0 — dùng `tone`. */\n  accentForeground?: string;\n  /**\n   * Chính màu app khi nó đi lên NỀN TRANG (chữ, icon rời, viền, vạch active, dấu chọn)\n   * → biến `--app-accent-ink`. Mặc định giữ bậc ink của theme.\n   *\n   * Vì sao phải khai riêng chứ không dẫn xuất từ `accent`: bậc nền và bậc mực có ràng buộc\n   * NGƯỢC NHAU — nền càng đúng brand thì cùng màu đó làm chữ càng chìm. Gold mặc định là ví\n   * dụ: `--app-accent` #E8B824 làm chữ trên nền trắng chỉ **1,86:1**, trên chính tint 15%\n   * của nó **1,69:1**; `--app-accent-ink` #7A5800 đạt **6,51:1** trên `--background`,\n   * **6,24:1** trên `--sidebar`, **5,96:1** trên `--sidebar-accent`. Bỏ trống trường này mà\n   * vẫn đổi `accent` thì mọi chỗ dùng `text-app-accent-ink` giữ nguyên gold — sai màu app.\n   */\n  /** @deprecated Từ 1.10.0 — dùng `tone`. */\n  accentInk?: string;\n  /** `false` = workspace chưa bật/chưa mua → hiện khoá và gọi `onUpsell` thay vì điều hướng. */\n  entitled?: boolean;\n  badge?: number | string;\n}\n\n/** Variant badge của mục menu — map thẳng sang variant của primitive `Badge`. */\nexport type NavBadgeVariant = \"default\" | \"destructive\" | \"warning\" | \"success\";\n\n/** Một mục điều hướng trong sidebar. */\nexport interface NavItem {\n  id: string;\n  label: string;\n  href: string;\n  icon?: ShellIcon;\n  badge?: number | string;\n  badgeVariant?: NavBadgeVariant;\n  /** Mục con — render trong `Collapsible`; cha có children thì click cha chỉ mở/đóng. */\n  children?: NavItem[];\n  /**\n   * Ép trạng thái active thay vì để shell tự suy từ `pathname`\n   * (dùng khi route thật khác href, vd trang chi tiết `/tasks/123`).\n   */\n  isActive?: boolean;\n  /** Mở link ở tab mới (link ngoài: tài liệu, trạng thái hệ thống…). */\n  external?: boolean;\n  disabled?: boolean;\n}\n\n/** Nhóm mục menu (nhãn nhỏ + thu gọn được). */\nexport interface NavGroup {\n  id: string;\n  /** Bỏ trống = nhóm không nhãn (dùng cho nhóm đầu tiên). */\n  label?: string;\n  items: NavItem[];\n  /** Cho phép thu gọn cả nhóm; mặc định true khi có `label`. */\n  collapsible?: boolean;\n  /** Trạng thái ban đầu khi `collapsible` — mặc định mở. */\n  defaultCollapsed?: boolean;\n}\n\n/**\n * Menu app truyền vào: mảng phẳng `NavItem[]` (app đơn giản) hoặc `NavGroup[]`.\n * Shell chuẩn hoá về `NavGroup[]` bằng `toNavGroups()` trong `utils.ts`.\n */\nexport type ShellNav = NavItem[] | NavGroup[];\n\n/** Người dùng đang đăng nhập. */\nexport interface ShellUser {\n  id: string;\n  name: string;\n  email?: string;\n  avatarUrl?: string;\n  /** Vai trò trong workspace hiện tại — chuỗi hiển thị sẵn, shell không map mã. */\n  role?: string;\n}\n\n/** Mục bổ sung do app chèn vào `UserMenu`. */\nexport interface UserMenuItem {\n  id: string;\n  label: string;\n  icon?: ShellIcon;\n  /** Có `href` thì render link; không thì render nút gọi `onSelect`. */\n  href?: string;\n  onSelect?: () => void;\n  /** Nhãn phím tắt hiển thị bên phải, vd \"Ctrl+P\" (chỉ hiển thị, không tự gắn phím). */\n  shortcut?: string;\n  /** `\"destructive\"`: tô đỏ VÀ chuyển mục xuống nhóm thoát (dưới vạch phân cách, trên mục đăng xuất). */\n  variant?: \"default\" | \"destructive\";\n}\n\n/**\n * Props của component link do app cung cấp (`LinkComponent`).\n * Mặc định shell dùng `next/link`; app không-Next (Vite, Storybook) truyền\n * component router của mình miễn khớp hình dạng props này.\n */\nexport interface ShellLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n  /** Chỉ nhận chuỗi — shell không dùng dạng `UrlObject` của Next để adapter khác còn dùng lại được. */\n  href: string;\n}\n\n/** Component link thay thế `next/link`. */\nexport type ShellLinkComponent = ComponentType<ShellLinkProps>;\n\n/**\n * Toàn bộ chuỗi hiển thị của shell. Theo `ComitorLocaleProvider` (namespace `shell` — mặc định\n * tiếng Anh, bảng tiếng Việt dựng sẵn); override từng khoá qua prop `labels` của\n * `ShellProvider`/`AppShell`.\n */\nexport interface ShellLabels {\n  /* Sidebar & header */\n  collapseSidebar: string;\n  /**\n   * Nhãn NGẮN hiện trên chính nút thu gọn (khi thanh bên đang mở rộng).\n   *\n   * Tách khỏi `collapseSidebar` vì hai chuỗi có hai việc khác nhau: chuỗi dài là TÊN TRUY CẬP\n   * (`aria-label` + tooltip) — nó phải nói rõ thu gọn cái gì, vì người dùng trình đọc màn hình\n   * nghe nó tách khỏi ngữ cảnh; chuỗi ngắn là chữ NHÌN THẤY trong một nút rộng 240px nằm ngay\n   * dưới thanh bên, nơi ngữ cảnh đã hiển nhiên và chữ dài chỉ làm nút chật.\n   *\n   * ⚠ WCAG 2.5.3 (Label in Name): chuỗi ngắn PHẢI là một phần của chuỗi dài, nếu không lệnh thoại\n   * \"bấm Collapse\" sẽ không khớp tên truy cập. \"Collapse\" ⊂ \"Collapse sidebar\" ✓, \"Thu gọn\" ⊂\n   * \"Thu gọn thanh bên\" ✓ — giữ quan hệ đó khi dịch sang ngôn ngữ khác.\n   */\n  collapseSidebarShort: string;\n  expandSidebar: string;\n  openMenu: string;\n  closeMenu: string;\n  search: string;\n  searchPlaceholder: string;\n  notifications: string;\n  navigationLabel: string;\n  /* Workspace switcher */\n  workspace: string;\n  workspaceSwitcherLabel: string;\n  workspaceSearchPlaceholder: string;\n  workspaceEmpty: string;\n  createWorkspace: string;\n  workspaceSettings: string;\n  inviteMembers: string;\n  /**\n   * Đơn vị đếm thành viên của một workspace. Là HÀM chứ không phải chuỗi vì nó CHÈN SỐ, và\n   * trật tự từ đổi theo ngôn ngữ: tiếng Việt đặt số trước (\"12 thành viên\"), tiếng Anh cũng vậy\n   * (\"12 members\"), nhưng nhiều ngôn ngữ thì không — nối `${count} ${đơn_vị}` ở phía component\n   * là khoá cứng trật tự của một ngôn ngữ vào mọi bản dịch. Hàm còn chọn được dạng số ít/nhiều\n   * (\"1 member\" ⇄ \"2 members\"), thứ tiếng Việt không có mà tiếng Anh thì bắt buộc. Cùng khuôn\n   * với `range`/`pageStatus` của `TablePagination` (README §5, ba quy tắc của cơ chế `labels`).\n   */\n  members: (count: number) => string;\n  /* App launcher */\n  apps: string;\n  appLauncherLabel: string;\n  myApps: string;\n  discoverApps: string;\n  locked: string;\n  lockedHint: string;\n  /* User menu */\n  account: string;\n  profile: string;\n  /** Mục dựng sẵn khi `UserMenu` có `accountUrl` — trang `/preferences` của Comitor.Account. */\n  preferences: string;\n  /** Mục dựng sẵn khi `UserMenu` có `accountUrl` — trang `/security` của Comitor.Account. */\n  security: string;\n  settings: string;\n  appearance: string;\n  help: string;\n  logout: string;\n  /* Theme */\n  themeLight: string;\n  themeDark: string;\n  themeSystem: string;\n  toggleTheme: string;\n  /* Trợ năng */\n  /** Chữ của skip link đầu khung (`AppShell`, WCAG 2.4.1) — chỉ hiện khi nhận focus bàn phím */\n  skipToContent: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.shell`. Shell không đọc thẳng hằng này — `ShellProvider` đọc bảng của\n * `ComitorLocaleProvider` rồi trộn `labels` lên trên; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\nexport const DEFAULT_SHELL_LABELS: ShellLabels = { ...shellEn };\n"],"mappings":"AAgBA,SAAS,eAAe;AAoOjB,MAAM,uBAAoC,EAAE,GAAG,QAAQ;","names":[]}

package/dist/shell/user-menu.d.ts

@@ -33,7 +33,11 @@ interface UserMenuProps {
     settingsHref?: string;
     /** Link trợ giúp (nhãn `help`). */
     helpHref?: string;
-    /** Mục bổ sung của app — chèn ngay trên mục đăng xuất. */
+    /**
+     * Mục bổ sung của app. Mục thường đứng sau các mục dựng sẵn; mục `variant: "destructive"` (vd "Thoát
+     * khỏi mọi sản phẩm") vào NHÓM THOÁT — dưới vạch phân cách, ngay trên mục đăng xuất — để mọi lối ra
+     * nằm chung một nhóm, tách khỏi các mục điều hướng.
+     */
     items?: UserMenuItem[];
     /**
      * Submenu đổi giao diện (nhãn `appearance`) trong menu người dùng.

package/dist/shell/user-menu.js

@@ -75,7 +75,10 @@ function UserMenu({
     helpHref ? { id: "help", label: labels.help, icon: HelpCircle, href: helpHref } : null
   ];
   const visibleBuiltIns = builtInItems.filter((item) => item !== null);
-  const hasEntries = visibleBuiltIns.length > 0 || items.length > 0 || showThemeSubmenu;
+  const mainItems = items.filter((item) => item.variant !== "destructive");
+  const exitItems = items.filter((item) => item.variant === "destructive");
+  const hasEntries = visibleBuiltIns.length > 0 || mainItems.length > 0 || showThemeSubmenu;
+  const hasExitGroup = exitItems.length > 0 || Boolean(handleLogout);
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
@@ -110,7 +113,7 @@ function UserMenu({
       ] }),
       hasEntries ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
       visibleBuiltIns.map(renderItem),
-      items.map(renderItem),
+      mainItems.map(renderItem),
       showThemeSubmenu !== false ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
         /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: cn(showThemeSubmenu === "mobile" && "md:hidden"), children: [
           /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
@@ -131,12 +134,13 @@ function UserMenu({
           ] })
         ] })
       ] }) : null,
-      handleLogout ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasExitGroup ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onClick: handleLogout, children: [
+        exitItems.map(renderItem),
+        handleLogout ? /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onClick: handleLogout, children: [
           /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.logout })
-        ] })
+        ] }) : null
       ] }) : null
     ] })
   ] });

package/dist/shell/user-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/user-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChevronDown,\n  CircleUser,\n  HelpCircle,\n  LogOut,\n  Monitor,\n  Moon,\n  Palette,\n  Settings,\n  ShieldCheck,\n  SlidersHorizontal,\n  Sun\n} from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { getAvatarToneClasses } from \"../components/composite/letter-avatar.js\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../components/ui/avatar.js\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { ShellUser, UserMenuItem } from \"./types.js\";\nimport { getVietnameseInitials } from \"./utils.js\";\n\nexport interface UserAvatarProps {\n  user: ShellUser;\n  className?: string;\n}\n\n/**\n * Avatar người dùng: ảnh nếu có, không thì chữ cái kiểu VN (HỌ + TÊN) tô màu theo tên.\n *\n * Tô màu theo `user.name` chứ KHÔNG theo email: `LetterAvatar`/`AvatarGroup` ở Tier 2 seed\n * bằng tên, nên lấy khoá khác ở đây là cùng một người ra hai màu trên cùng một trang.\n */\nexport function UserAvatar({ user, className }: UserAvatarProps) {\n  return (\n    <Avatar className={cn(\"size-8\", className)}>\n      {user.avatarUrl ? <AvatarImage src={user.avatarUrl} alt=\"\" /> : null}\n      <AvatarFallback className={cn(\"text-xs font-semibold\", getAvatarToneClasses(user.name))}>\n        {getVietnameseInitials(user.name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport interface UserMenuProps {\n  className?: string;\n  /** Hiện tên + vai trò cạnh avatar; màn hình hẹp nên để `false`. */\n  showName?: boolean;\n  /**\n   * Gốc của Comitor.Account (vd `https://account.comitor.ai`, không dấu `/` cuối). Có giá trị thì menu\n   * dựng sẵn BA mục trỏ sang Account — Hồ sơ (`/profile`), Tuỳ chọn hiển thị (`/preferences`), Bảo mật\n   * (`/security`) — đứng đầu menu, trước mục của app. Chính app Account truyền chuỗi rỗng `\"\"` để ra\n   * đường dẫn tương đối. `profileHref` vẫn thắng nếu app khai cả hai.\n   *\n   * Ba trang ấy là của DANH TÍNH dùng chung cho cả hệ sinh thái, nên mọi app hiện cùng ba mục, cùng\n   * chữ, cùng thứ tự — gói giữ nhãn để không app nào phải dịch lại.\n   */\n  accountUrl?: string;\n  /** Link hồ sơ (nhãn `profile`) — bỏ trống thì không render mục này (tránh mục dẫn đi đâu không rõ). */\n  profileHref?: string;\n  /** Link cài đặt (nhãn `settings`). */\n  settingsHref?: string;\n  /** Link trợ giúp (nhãn `help`). */\n  helpHref?: string;\n  /** Mục bổ sung của app — chèn ngay trên mục đăng xuất. */\n  items?: UserMenuItem[];\n  /**\n   * Submenu đổi giao diện (nhãn `appearance`) trong menu người dùng.\n   *\n   *   `\"mobile\"`  (mặc định) — CHỈ hiện dưới `md`. Từ `md` trở lên `AppHeader` đã có\n   *               `ThemeToggle` riêng, để cả hai là hai lối vào cho cùng một thứ.\n   *   `true`      — luôn hiện. Dùng khi app tắt `showThemeToggle` của header, nếu không màn\n   *               hình rộng sẽ KHÔNG còn chỗ nào đổi giao diện.\n   *   `false`     — không bao giờ hiện.\n   *\n   * ⚠ Nhánh `\"mobile\"` ẩn bằng CSS (`md:hidden`), không phải bằng điều kiện render: nút gạt theo\n   * bề rộng cần `window`, mà đọc `window` lúc render đầu là lệch hydration. `display: none` loại\n   * phần tử khỏi CẢ cây trợ năng nên trình đọc màn hình ở desktop cũng không thấy mục thừa.\n   */\n  showThemeSubmenu?: boolean | \"mobile\";\n  /** Ghi đè handler đăng xuất của context. */\n  onLogout?: () => void;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * Menu người dùng ở góc phải header: avatar + tên/email, các mục do app khai báo,\n * submenu đổi giao diện, và mục đăng xuất (tô màu destructive).\n *\n * Mục dựng sẵn chỉ hiện khi app cấp `href` tương ứng — package không tự bịa route.\n */\nexport function UserMenu({\n  className,\n  showName = false,\n  accountUrl,\n  profileHref,\n  settingsHref,\n  helpHref,\n  items = [],\n  showThemeSubmenu = \"mobile\",\n  onLogout,\n  align = \"end\"\n}: UserMenuProps) {\n  const shell = useShell();\n  const { theme, setTheme } = useTheme();\n  const { user, labels } = shell;\n\n  if (!user) return null;\n\n  const handleLogout = onLogout ?? shell.onLogout;\n\n  const renderItem = (item: UserMenuItem) => {\n    const Icon = item.icon;\n    const content = (\n      <>\n        {Icon ? <Icon className=\"size-4\" /> : null}\n        <span className=\"truncate\">{item.label}</span>\n        {item.shortcut ? <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut> : null}\n      </>\n    );\n\n    if (item.href) {\n      return (\n        <DropdownMenuItem key={item.id} variant={item.variant} asChild>\n          <ShellNavLink href={item.href} onClick={() => item.onSelect?.()}>\n            {content}\n          </ShellNavLink>\n        </DropdownMenuItem>\n      );\n    }\n\n    return (\n      <DropdownMenuItem key={item.id} variant={item.variant} onClick={() => item.onSelect?.()}>\n        {content}\n      </DropdownMenuItem>\n    );\n  };\n\n  const builtInItems: (UserMenuItem | null)[] = [\n    profileHref || accountUrl !== undefined\n      ? { id: \"profile\", label: labels.profile, icon: CircleUser, href: profileHref ?? `${accountUrl}/profile` }\n      : null,\n    accountUrl !== undefined\n      ? { id: \"preferences\", label: labels.preferences, icon: SlidersHorizontal, href: `${accountUrl}/preferences` }\n      : null,\n    accountUrl !== undefined\n      ? { id: \"security\", label: labels.security, icon: ShieldCheck, href: `${accountUrl}/security` }\n      : null,\n    settingsHref ? { id: \"settings\", label: labels.settings, icon: Settings, href: settingsHref } : null,\n    helpHref ? { id: \"help\", label: labels.help, icon: HelpCircle, href: helpHref } : null\n  ];\n  const visibleBuiltIns = builtInItems.filter((item): item is UserMenuItem => item !== null);\n\n  const hasEntries = visibleBuiltIns.length > 0 || items.length > 0 || showThemeSubmenu;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.account}\n          className={cn(\n            \"flex items-center gap-2 rounded-md p-1 text-left\",\n            \"transition-colors duration-150 ease-out hover:bg-muted\",\n            className\n          )}\n        >\n          <UserAvatar user={user} />\n          {showName ? (\n            <>\n              <span className=\"flex min-w-0 flex-col\">\n                <span className=\"truncate text-sm font-medium leading-tight text-foreground\">{user.name}</span>\n                {user.role ? (\n                  <span className=\"truncate text-[11px] leading-tight text-muted-foreground\">{user.role}</span>\n                ) : null}\n              </span>\n              <ChevronDown className=\"size-3.5 shrink-0 text-muted-foreground\" />\n            </>\n          ) : null}\n        </button>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align={align} className=\"w-60\">\n        <DropdownMenuLabel className=\"flex items-center gap-2 font-normal\">\n          <UserAvatar user={user} />\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"truncate text-sm font-medium\">{user.name}</span>\n            {user.email ? <span className=\"truncate text-xs text-muted-foreground\">{user.email}</span> : null}\n            {user.role ? <span className=\"truncate text-[11px] text-muted-foreground\">{user.role}</span> : null}\n          </span>\n        </DropdownMenuLabel>\n\n        {hasEntries ? <DropdownMenuSeparator /> : null}\n\n        {visibleBuiltIns.map(renderItem)}\n        {items.map(renderItem)}\n\n        {showThemeSubmenu !== false ? (\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger className={cn(showThemeSubmenu === \"mobile\" && \"md:hidden\")}>\n              <Palette className=\"size-4\" />\n              <span>{labels.appearance}</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem onClick={() => setTheme(\"light\")} className={cn(theme === \"light\" && \"bg-accent\")}>\n                <Sun className=\"size-4\" />\n                {labels.themeLight}\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => setTheme(\"dark\")} className={cn(theme === \"dark\" && \"bg-accent\")}>\n                <Moon className=\"size-4\" />\n                {labels.themeDark}\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => setTheme(\"system\")} className={cn(theme === \"system\" && \"bg-accent\")}>\n                <Monitor className=\"size-4\" />\n                {labels.themeSystem}\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        ) : null}\n\n        {handleLogout ? (\n          <>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem variant=\"destructive\" onClick={handleLogout}>\n              <LogOut className=\"size-4\" />\n              <span>{labels.logout}</span>\n            </DropdownMenuItem>\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/user-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ChevronDown,\n  CircleUser,\n  HelpCircle,\n  LogOut,\n  Monitor,\n  Moon,\n  Palette,\n  Settings,\n  ShieldCheck,\n  SlidersHorizontal,\n  Sun\n} from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { getAvatarToneClasses } from \"../components/composite/letter-avatar.js\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../components/ui/avatar.js\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ShellNavLink } from \"./shell-link.js\";\nimport type { ShellUser, UserMenuItem } from \"./types.js\";\nimport { getVietnameseInitials } from \"./utils.js\";\n\nexport interface UserAvatarProps {\n  user: ShellUser;\n  className?: string;\n}\n\n/**\n * Avatar người dùng: ảnh nếu có, không thì chữ cái kiểu VN (HỌ + TÊN) tô màu theo tên.\n *\n * Tô màu theo `user.name` chứ KHÔNG theo email: `LetterAvatar`/`AvatarGroup` ở Tier 2 seed\n * bằng tên, nên lấy khoá khác ở đây là cùng một người ra hai màu trên cùng một trang.\n */\nexport function UserAvatar({ user, className }: UserAvatarProps) {\n  return (\n    <Avatar className={cn(\"size-8\", className)}>\n      {user.avatarUrl ? <AvatarImage src={user.avatarUrl} alt=\"\" /> : null}\n      <AvatarFallback className={cn(\"text-xs font-semibold\", getAvatarToneClasses(user.name))}>\n        {getVietnameseInitials(user.name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport interface UserMenuProps {\n  className?: string;\n  /** Hiện tên + vai trò cạnh avatar; màn hình hẹp nên để `false`. */\n  showName?: boolean;\n  /**\n   * Gốc của Comitor.Account (vd `https://account.comitor.ai`, không dấu `/` cuối). Có giá trị thì menu\n   * dựng sẵn BA mục trỏ sang Account — Hồ sơ (`/profile`), Tuỳ chọn hiển thị (`/preferences`), Bảo mật\n   * (`/security`) — đứng đầu menu, trước mục của app. Chính app Account truyền chuỗi rỗng `\"\"` để ra\n   * đường dẫn tương đối. `profileHref` vẫn thắng nếu app khai cả hai.\n   *\n   * Ba trang ấy là của DANH TÍNH dùng chung cho cả hệ sinh thái, nên mọi app hiện cùng ba mục, cùng\n   * chữ, cùng thứ tự — gói giữ nhãn để không app nào phải dịch lại.\n   */\n  accountUrl?: string;\n  /** Link hồ sơ (nhãn `profile`) — bỏ trống thì không render mục này (tránh mục dẫn đi đâu không rõ). */\n  profileHref?: string;\n  /** Link cài đặt (nhãn `settings`). */\n  settingsHref?: string;\n  /** Link trợ giúp (nhãn `help`). */\n  helpHref?: string;\n  /**\n   * Mục bổ sung của app. Mục thường đứng sau các mục dựng sẵn; mục `variant: \"destructive\"` (vd \"Thoát\n   * khỏi mọi sản phẩm\") vào NHÓM THOÁT — dưới vạch phân cách, ngay trên mục đăng xuất — để mọi lối ra\n   * nằm chung một nhóm, tách khỏi các mục điều hướng.\n   */\n  items?: UserMenuItem[];\n  /**\n   * Submenu đổi giao diện (nhãn `appearance`) trong menu người dùng.\n   *\n   *   `\"mobile\"`  (mặc định) — CHỈ hiện dưới `md`. Từ `md` trở lên `AppHeader` đã có\n   *               `ThemeToggle` riêng, để cả hai là hai lối vào cho cùng một thứ.\n   *   `true`      — luôn hiện. Dùng khi app tắt `showThemeToggle` của header, nếu không màn\n   *               hình rộng sẽ KHÔNG còn chỗ nào đổi giao diện.\n   *   `false`     — không bao giờ hiện.\n   *\n   * ⚠ Nhánh `\"mobile\"` ẩn bằng CSS (`md:hidden`), không phải bằng điều kiện render: nút gạt theo\n   * bề rộng cần `window`, mà đọc `window` lúc render đầu là lệch hydration. `display: none` loại\n   * phần tử khỏi CẢ cây trợ năng nên trình đọc màn hình ở desktop cũng không thấy mục thừa.\n   */\n  showThemeSubmenu?: boolean | \"mobile\";\n  /** Ghi đè handler đăng xuất của context. */\n  onLogout?: () => void;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * Menu người dùng ở góc phải header: avatar + tên/email, các mục do app khai báo,\n * submenu đổi giao diện, và mục đăng xuất (tô màu destructive).\n *\n * Mục dựng sẵn chỉ hiện khi app cấp `href` tương ứng — package không tự bịa route.\n */\nexport function UserMenu({\n  className,\n  showName = false,\n  accountUrl,\n  profileHref,\n  settingsHref,\n  helpHref,\n  items = [],\n  showThemeSubmenu = \"mobile\",\n  onLogout,\n  align = \"end\"\n}: UserMenuProps) {\n  const shell = useShell();\n  const { theme, setTheme } = useTheme();\n  const { user, labels } = shell;\n\n  if (!user) return null;\n\n  const handleLogout = onLogout ?? shell.onLogout;\n\n  const renderItem = (item: UserMenuItem) => {\n    const Icon = item.icon;\n    const content = (\n      <>\n        {Icon ? <Icon className=\"size-4\" /> : null}\n        <span className=\"truncate\">{item.label}</span>\n        {item.shortcut ? <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut> : null}\n      </>\n    );\n\n    if (item.href) {\n      return (\n        <DropdownMenuItem key={item.id} variant={item.variant} asChild>\n          <ShellNavLink href={item.href} onClick={() => item.onSelect?.()}>\n            {content}\n          </ShellNavLink>\n        </DropdownMenuItem>\n      );\n    }\n\n    return (\n      <DropdownMenuItem key={item.id} variant={item.variant} onClick={() => item.onSelect?.()}>\n        {content}\n      </DropdownMenuItem>\n    );\n  };\n\n  const builtInItems: (UserMenuItem | null)[] = [\n    profileHref || accountUrl !== undefined\n      ? { id: \"profile\", label: labels.profile, icon: CircleUser, href: profileHref ?? `${accountUrl}/profile` }\n      : null,\n    accountUrl !== undefined\n      ? { id: \"preferences\", label: labels.preferences, icon: SlidersHorizontal, href: `${accountUrl}/preferences` }\n      : null,\n    accountUrl !== undefined\n      ? { id: \"security\", label: labels.security, icon: ShieldCheck, href: `${accountUrl}/security` }\n      : null,\n    settingsHref ? { id: \"settings\", label: labels.settings, icon: Settings, href: settingsHref } : null,\n    helpHref ? { id: \"help\", label: labels.help, icon: HelpCircle, href: helpHref } : null\n  ];\n  const visibleBuiltIns = builtInItems.filter((item): item is UserMenuItem => item !== null);\n\n  const mainItems = items.filter((item) => item.variant !== \"destructive\");\n  const exitItems = items.filter((item) => item.variant === \"destructive\");\n\n  const hasEntries = visibleBuiltIns.length > 0 || mainItems.length > 0 || showThemeSubmenu;\n  const hasExitGroup = exitItems.length > 0 || Boolean(handleLogout);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={labels.account}\n          className={cn(\n            \"flex items-center gap-2 rounded-md p-1 text-left\",\n            \"transition-colors duration-150 ease-out hover:bg-muted\",\n            className\n          )}\n        >\n          <UserAvatar user={user} />\n          {showName ? (\n            <>\n              <span className=\"flex min-w-0 flex-col\">\n                <span className=\"truncate text-sm font-medium leading-tight text-foreground\">{user.name}</span>\n                {user.role ? (\n                  <span className=\"truncate text-[11px] leading-tight text-muted-foreground\">{user.role}</span>\n                ) : null}\n              </span>\n              <ChevronDown className=\"size-3.5 shrink-0 text-muted-foreground\" />\n            </>\n          ) : null}\n        </button>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align={align} className=\"w-60\">\n        <DropdownMenuLabel className=\"flex items-center gap-2 font-normal\">\n          <UserAvatar user={user} />\n          <span className=\"flex min-w-0 flex-col\">\n            <span className=\"truncate text-sm font-medium\">{user.name}</span>\n            {user.email ? <span className=\"truncate text-xs text-muted-foreground\">{user.email}</span> : null}\n            {user.role ? <span className=\"truncate text-[11px] text-muted-foreground\">{user.role}</span> : null}\n          </span>\n        </DropdownMenuLabel>\n\n        {hasEntries ? <DropdownMenuSeparator /> : null}\n\n        {visibleBuiltIns.map(renderItem)}\n        {mainItems.map(renderItem)}\n\n        {showThemeSubmenu !== false ? (\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger className={cn(showThemeSubmenu === \"mobile\" && \"md:hidden\")}>\n              <Palette className=\"size-4\" />\n              <span>{labels.appearance}</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem onClick={() => setTheme(\"light\")} className={cn(theme === \"light\" && \"bg-accent\")}>\n                <Sun className=\"size-4\" />\n                {labels.themeLight}\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => setTheme(\"dark\")} className={cn(theme === \"dark\" && \"bg-accent\")}>\n                <Moon className=\"size-4\" />\n                {labels.themeDark}\n              </DropdownMenuItem>\n              <DropdownMenuItem onClick={() => setTheme(\"system\")} className={cn(theme === \"system\" && \"bg-accent\")}>\n                <Monitor className=\"size-4\" />\n                {labels.themeSystem}\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        ) : null}\n\n        {hasExitGroup ? (\n          <>\n            <DropdownMenuSeparator />\n            {exitItems.map(renderItem)}\n            {handleLogout ? (\n              <DropdownMenuItem variant=\"destructive\" onClick={handleLogout}>\n                <LogOut className=\"size-4\" />\n                <span>{labels.logout}</span>\n              </DropdownMenuItem>\n            ) : null}\n          </>\n        ) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tokens.d.ts

@@ -71,6 +71,10 @@ declare const accent: {
         /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
          *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
         readonly orange: "#EA580C";
+        /** Ba sắc ĐỊNH DANH — chỉ bảng tone avatar/icon app đọc (`lib/avatar-tone.ts`). */
+        readonly blue: "#4169E1";
+        readonly purple: "#8A4FD8";
+        readonly pink: "#FF1493";
     };
     /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng
      *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng
@@ -83,6 +87,10 @@ declare const accent: {
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
         readonly orange: "#FB923C";
+        /** Ba sắc định danh có bản dark RIÊNG như cam — bản light trên tint /15 hợp lên `card` chỉ 3,1–3,9:1. */
+        readonly blue: "#82A8F5";
+        readonly purple: "#A78BFA";
+        readonly pink: "#FF69B4";
     };
 };
 /**
@@ -112,6 +120,10 @@ declare const accentInk: {
         /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·
          *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */
         readonly orange: "#AC440F";
+        /** Ba sắc định danh — trên tint /15 của chính nó: blue 5,67 · purple 5,72 · pink 5,33:1. */
+        readonly blue: "#3053B8";
+        readonly purple: "#6E3FB0";
+        readonly pink: "#B0126A";
     };
     readonly dark: {
         /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
@@ -121,6 +133,9 @@ declare const accentInk: {
         readonly green: "#2EA56A";
         readonly yellow: "#F2C94C";
         readonly orange: "#FB923C";
+        readonly blue: "#82A8F5";
+        readonly purple: "#A78BFA";
+        readonly pink: "#FF69B4";
     };
 };
 /**
@@ -326,6 +341,10 @@ declare const highContrast: {
             /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
              *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
             readonly orange: "#EA580C";
+            /** Ba sắc ĐỊNH DANH — chỉ bảng tone avatar/icon app đọc (`lib/avatar-tone.ts`). */
+            readonly blue: "#4169E1";
+            readonly purple: "#8A4FD8";
+            readonly pink: "#FF1493";
         };
     };
     readonly dark: {

package/dist/tokens.js

@@ -32,7 +32,11 @@ const accent = {
     yellow: "#F2C94C",
     /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó
      *  TÔ chấm của `StatusPill variant="dot"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */
-    orange: "#EA580C"
+    orange: "#EA580C",
+    /** Ba sắc ĐỊNH DANH — chỉ bảng tone avatar/icon app đọc (`lib/avatar-tone.ts`). */
+    blue: "#4169E1",
+    purple: "#8A4FD8",
+    pink: "#FF1493"
   },
   /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng
    *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng
@@ -44,7 +48,11 @@ const accent = {
     red: "#D64545",
     green: "#2EA56A",
     yellow: "#F2C94C",
-    orange: "#FB923C"
+    orange: "#FB923C",
+    /** Ba sắc định danh có bản dark RIÊNG như cam — bản light trên tint /15 hợp lên `card` chỉ 3,1–3,9:1. */
+    blue: "#82A8F5",
+    purple: "#A78BFA",
+    pink: "#FF69B4"
   }
 };
 const accentInk = {
@@ -57,7 +65,11 @@ const accentInk = {
     yellow: gold[500],
     /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·
      *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */
-    orange: "#AC440F"
+    orange: "#AC440F",
+    /** Ba sắc định danh — trên tint /15 của chính nó: blue 5,67 · purple 5,72 · pink 5,33:1. */
+    blue: "#3053B8",
+    purple: "#6E3FB0",
+    pink: "#B0126A"
   },
   dark: {
     /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
@@ -66,7 +78,10 @@ const accentInk = {
     red: accent.dark.red,
     green: accent.dark.green,
     yellow: accent.dark.yellow,
-    orange: accent.dark.orange
+    orange: accent.dark.orange,
+    blue: accent.dark.blue,
+    purple: accent.dark.purple,
+    pink: accent.dark.pink
   }
 };
 const accentForeground = {
@@ -315,16 +330,12 @@ const chart = {
 const avatarTonePalette = {
   light: {
     gold,
-    ash,
-    brandNeutral,
     accent: accent.light,
     accentInk: accentInk.light,
     card: semantic.light.card
   },
   dark: {
     gold,
-    ash,
-    brandNeutral,
     accent: accent.dark,
     accentInk: accentInk.dark,
     card: semantic.dark.card

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,\n * email HTML, xuất PDF, (sau này) React Native.\n *\n * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.\n * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.\n *\n * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),\n * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.\n *\n * Hợp đồng ba vai trò của màu (giống hệt `styles.css`; bảng đầy đủ ở docs/hop-dong-mau.md),\n * đọc tên là biết dùng ở đâu:\n *   `x`            → tô NỀN (fill đặc hoặc tint /5–/20 — trần chung an toàn cho mọi tone)\n *   `xForeground`  → chữ/icon NẰM TRÊN nền `x` ĐẶC — đo với `x`, ngưỡng 4,5:1\n *   `xInk`         → chính màu đó khi ĐI LÊN nền trang hoặc lên tint của chính nó (chữ, icon\n *                    rời, viền, vạch active) — đo với nền đó\n *\n * Cố ý KHÔNG mirror (xem docs/quyet-dinh-tich-hop.md §21): `--elevation-*` (chuỗi box-shadow chỉ\n * có nghĩa trong CSS), `--app-accent*` (giá trị thuộc về APP, không phải gói), `--font-*`.\n */\n\nimport { AVATAR_TONES, type AvatarToneColors, type AvatarTonePalette, getAvatarToneIndex } from \"./lib/avatar-tone.js\";\n\n/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */\nexport const gold = {\n  50: \"#FBF5DC\",\n  100: \"#F8E89D\",\n  200: \"#F5D060\",\n  /** primary ở light mode */\n  300: \"#E8B824\",\n  400: \"#B88A00\",\n  500: \"#7A5800\",\n  600: \"#5C4006\"\n} as const;\n\n/** Trung tính brand (khác thang ash — đây là màu \"giấy/mực\" của brand book). */\nexport const brandNeutral = {\n  ink: \"#0E1116\",\n  inkSoft: \"#3A3F4A\",\n  paper: \"#FBF7EE\",\n  warm: \"#EDE8D8\"\n} as const;\n\n/**\n * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.\n * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với\n * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).\n */\nexport const ash = {\n  50: \"#F7F7F8\",\n  100: \"#EDEEF1\",\n  300: \"#C8CBD3\",\n  500: \"#7E8290\",\n  700: \"#3A3F4A\",\n  900: \"#16181D\"\n} as const;\n\n/**\n * Màu phụ — vai trò TÔ NỀN (fill đặc hoặc tint). Bản `dark` được nâng sáng vì trên nền #0E1116\n * bản `light` chìm nghỉm.\n *\n * ⚠ ĐỪNG dùng bảng này làm màu CHỮ ở light: nó được chọn để tô nền nên quá nhạt — dùng\n * `accentInk` ngay dưới. `accent.dark.navy` giữ nguyên #0F1E3D chỉ để mirror đúng `styles.css`\n * (khối `.dark` không override `--navy`); vai trò navy ở dark do `accentInk.dark.navy` gánh.\n */\nexport const accent = {\n  light: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó\n     *  TÔ chấm của `StatusPill variant=\"dot\"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */\n    orange: \"#EA580C\"\n  },\n  /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng\n   *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng\n   *  hex thì chữ cam trên tint /15 của chính nó ở dark chỉ 4,21:1 — nên bảng mặc định có bản\n   *  dark riêng. */\n  dark: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    orange: \"#FB923C\"\n  }\n} as const;\n\n/**\n * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /\n * `--orange-ink` / `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang**\n * (hoặc trên tint /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.\n *\n * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·\n * `--x-ink` là chính màu đó ĐI LÊN nền trang.\n *\n * Bản `light` là bậc tối đã đóng băng (kết quả của `color-mix(in srgb, --<màu>, --ink 30/40%)`\n * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark`. Đo trên tint 15%\n * của chính nó — nền thật mà chữ initials avatar và badge tonal đứng lên: teal 5,54 · green 5,60\n * · red 5,83:1 ở light (bản chưa có ink: 3,44 / 2,69 / 3,57:1 ✗).\n *\n * ⚠ Ở bảng MẶC ĐỊNH, `accent.dark` bằng hex của light nên bậc ink ở dark cũng vậy — đúng thứ\n * comitor-ds render. Bậc sáng cho nền tối nằm ở `highContrast.dark`.\n */\nexport const accentInk = {\n  light: {\n    navy: accent.light.navy,\n    teal: \"#1A6668\",\n    red: \"#9A3537\",\n    green: \"#216A48\",\n    /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */\n    yellow: gold[500],\n    /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·\n     *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */\n    orange: \"#AC440F\"\n  },\n  dark: {\n    /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */\n    navy: \"#7EA2E8\",\n    teal: accent.dark.teal,\n    red: accent.dark.red,\n    green: accent.dark.green,\n    yellow: accent.dark.yellow,\n    orange: accent.dark.orange\n  }\n} as const;\n\n/**\n * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /\n * `--yellow-foreground` / `--orange-foreground` / `--navy-foreground`. Đây là chữ/icon nằm\n * **TRÊN nền `accent.*` ĐẶC**, tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).\n *\n * Cả bốn sắc teal/green/yellow/orange đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả\n * hai theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·\n * yellow 11,92 / 12,35 · orange 5,31 / 8,36. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.\n *\n * ⚠ CỐ Ý KHÔNG có `red`: nền đỏ đặc không mang được chữ tốt ở light — trắng trên #D64545 được\n * 4,38:1 và mực 4,32:1, cả hai đều dưới AA. Nền đỏ đặc có chữ phải dùng `status.*.destructive`;\n * ở bảng tương phản cao token đó là #C93B3B và đạt 5,03:1. `accent.*.red` chỉ để tô TINT và làm\n * màu chart. (Cam thì mực cứu được — 5,31:1 — nên `orange` có mặt.)\n */\nexport const accentForeground = {\n  light: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  },\n  dark: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  }\n} as const;\n\n/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */\nexport const semantic = {\n  light: {\n    background: \"#FFFFFF\",\n    foreground: \"#0E1116\",\n    card: \"#FFFFFF\",\n    cardForeground: \"#0E1116\",\n    popover: \"#FFFFFF\",\n    popoverForeground: \"#0E1116\",\n    primary: \"#E8B824\",\n    primaryForeground: \"#0E1116\",\n    /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai\n     *  trò mà 1.4.11 đòi 3:1 (rãnh Switch BẬT, gạch active của Tabs) — 1,86:1, đã biết và chấp\n     *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */\n    primaryInk: \"#E8B824\",\n    secondary: \"#EDE8D8\",\n    secondaryForeground: \"#0E1116\",\n    muted: \"#F7F7F8\",\n    /** Bậc chữ phụ — giá trị của comitor-ds, bằng đúng `ash[500]`. 3,83:1 trên nền trắng và\n     *  3,58:1 trên `muted`, tức dưới AA 4,5:1: đã biết và chấp nhận, bản đạt chuẩn nằm ở\n     *  `highContrast.light.mutedForeground`. */\n    mutedForeground: ash[500],\n    accent: \"#FBF5DC\",\n    accentForeground: \"#0E1116\",\n    /** Nền nút xoá. Chữ trắng trên nó được 4,38:1 — thiếu 0,12 so với AA, đã biết và chấp nhận. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`\n     *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */\n    destructiveHover: \"#DA5A5A\",\n    /** Chữ báo lỗi trên nền trang. comitor-ds viết `text-destructive` cho vai trò này, tức cùng\n     *  hex với nền — 4,38:1 trên nền trắng. */\n    destructiveInk: \"#D64545\",\n    /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương\n     *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */\n    border: \"#EDEEF1\",\n    /** Viền ô nhập — comitor-ds cho nó cùng bậc với `border`. 1,16:1, đã biết và chấp nhận. */\n    input: \"#EDEEF1\",\n    ring: \"#E8B824\",\n    /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */\n    controlEdge: \"#EDEEF1\",\n    /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */\n    controlEdgeStrong: ash[300],\n    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds\n     *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */\n    controlOn: \"#E8B824\",\n    /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`\n     *  vì trên nền gold SÁNG thì dấu phải là MỰC (10,19:1), còn ở bảng tương phản cao nền là\n     *  gold-500 TỐI nên dấu lật thành màu nền trang. */\n    controlCheck: brandNeutral.ink,\n    /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */\n    switchTrack: ash[300],\n    /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */\n    sliderTrack: \"#F7F7F8\",\n    /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#FAFAF9\",\n    sidebarForeground: \"#0E1116\",\n    sidebarBorder: \"#EDEEF1\",\n    sidebarAccent: \"#FBF5DC\",\n    sidebarAccentForeground: \"#0E1116\"\n  },\n  dark: {\n    background: \"#0E1116\",\n    foreground: \"#F7F7F8\",\n    card: \"#16181D\",\n    cardForeground: \"#F7F7F8\",\n    popover: \"#16181D\",\n    popoverForeground: \"#F7F7F8\",\n    primary: \"#F5D060\",\n    primaryForeground: \"#0E1116\",\n    /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */\n    primaryInk: \"#F5D060\",\n    secondary: \"#1E2128\",\n    secondaryForeground: \"#F7F7F8\",\n    muted: \"#1E2128\",\n    /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,\n     *  dưới AA: đã biết và chấp nhận. */\n    mutedForeground: ash[500],\n    accent: \"#1E2128\",\n    accentForeground: \"#F7F7F8\",\n    /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    destructiveHover: \"#DA5A5A\",\n    /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */\n    destructiveInk: \"#D64545\",\n    /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */\n    border: \"#1E2128\",\n    /** Viền ô nhập bản dark — KHÔNG phải #1E2128 của comitor-ds (chỉ 1,10:1 trên `card`, ô nhập tan\n     *  vào nền). #434A5A = 2,00:1, mirror `.dark { --input }` từ `0.5.0`; trước `3.3.3` mirror này còn\n     *  ghi #1E2128. */\n    input: \"#434A5A\",\n    ring: \"#F5D060\",\n    /** = `input` (`--control-edge: var(--input)`). */\n    controlEdge: \"#434A5A\",\n    /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */\n    controlEdgeStrong: ash[500],\n    /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó\n     *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */\n    controlOn: \"#F5D060\",\n    /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: ash[700],\n    sliderTrack: \"#1E2128\",\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#16181D\",\n    sidebarForeground: \"#F7F7F8\",\n    sidebarBorder: \"#1E2128\",\n    sidebarAccent: \"#1E2128\",\n    sidebarAccentForeground: \"#F7F7F8\"\n  }\n} as const;\n\n/**\n * BẢNG MÀU THỨ HAI — TƯƠNG PHẢN CAO. Mirror khối `[data-contrast=\"high\"]` /\n * `.dark[data-contrast=\"high\"]` trong styles.css.\n *\n * Chỉ chứa những token KHÁC bảng mặc định, đúng như CSS: hợp lên trên để có bảng đầy đủ.\n *\n * ```ts\n * const mau = { ...semantic.light, ...highContrast.light };\n * ```\n *\n * Bảng mặc định là comitor-ds (bản duyệt, có những cặp dưới ngưỡng — đã liệt kê ở từng token).\n * Bảng này là bảng đã đo, do NGƯỜI DÙNG bật qua `<ContrastProvider>` + `<ContrastToggle>`.\n * `accent` là màu phụ bản sáng dành cho nền tối — bảng mặc định không có, xem `accent.dark`.\n */\nexport const highContrast = {\n  light: {\n    /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */\n    mutedForeground: \"#686C7A\",\n    /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */\n    destructive: \"#C93B3B\",\n    /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */\n    destructiveHover: \"#AD3535\",\n    /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */\n    destructiveInk: accentInk.light.red,\n    /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[700],\n    /** #B48700 = gold-400 tối đi 2%: 3,28:1 trên `background`/`card` · 3,06:1 trên `muted` · ⇄ núm\n     *  trắng 3,28:1 (bảng mặc định: 1,86 / 1,86). Trước `3.3.3` mirror này còn ghi gold-500 — giá trị\n     *  `styles.css` đã bỏ. */\n    controlOn: \"#B48700\",\n    /** = `background`, nên luôn tương phản đúng chiều với cả rãnh BẬT lẫn rãnh TẮT. */\n    controlKnob: \"#FFFFFF\",\n    /** MỰC trên nền gold (5,77:1) — cùng cách vẽ với bảng mặc định; trước `3.3.3` mirror này ghi trắng. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: gold[500],\n    linkInk: gold[500],\n    linkInkHover: gold[600],\n    /** = `--orange-ink` của khối này — bậc ink màu phụ DUY NHẤT mà bảng này đổi ở light:\n     *  color-mix(srgb, orange 65%, ink 35%), 6,66:1 trắng · 5,55:1 trên orange/15 (bảng mặc định\n     *  #AC440F: 5,85 / 4,87:1). */\n    severeInk: \"#9D3F10\",\n    accent: accent.light\n  },\n  dark: {\n    /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */\n    mutedForeground: \"#888D9B\",\n    destructive: \"#C93B3B\",\n    destructiveHover: \"#AD3535\",\n    destructiveInk: \"#F87171\",\n    /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[300],\n    /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */\n    controlOn: \"#F5D060\",\n    controlKnob: \"#0E1116\",\n    controlCheck: \"#0E1116\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: \"#F5D060\",\n    linkInk: gold[200],\n    linkInkHover: gold[100],\n    /** Bằng bảng mặc định (8,36:1 trên `background` · 6,09:1 trên orange/15) — khai cho đủ cặp\n     *  với `light`, vì CSS phải huỷ bậc tối của khối light ở đây. */\n    severeInk: accent.dark.orange,\n    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này (trừ `orange`,\n     *  vốn đã sáng ở `accent.dark`). */\n    accent: {\n      navy: \"#0F1E3D\",\n      teal: \"#2DD4BF\",\n      red: \"#F87171\",\n      green: \"#4ADE80\",\n      yellow: \"#FACC15\",\n      orange: accent.dark.orange\n    }\n  }\n} as const;\n\n/**\n * Alias trạng thái — success/warning/severe/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.\n * `severe` (cam) là nấc giữa warning và destructive: ưu tiên cao, SLA sắp trễ.\n *\n * Ba lớp KHÁC nhau, đừng gộp:\n *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã\n *     chấp nhận), #C93B3B ở bảng tương phản cao (5,03:1 ✓);\n *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;\n *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Bảng mặc định cho nó cùng hex với\n *     nền (đúng `text-destructive` của comitor-ds); bảng tương phản cao tách thành bậc tối riêng.\n *\n * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải\n * trắng ở light rồi lật ở dark như bản 0.1.0): ba nền trạng thái đều là sắc sáng.\n *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]\n *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]\n *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]\n *     severe  mực 5,31:1 (light) · 8,36:1 (dark)    [trắng chỉ 3,56 / 2,26:1 ✗]\n * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.\n */\nexport const status = {\n  light: {\n    success: accent.light.green,\n    successForeground: \"#0E1116\",\n    warning: accent.light.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.light.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.light.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.light.green,\n    warningInk: accentInk.light.yellow,\n    severeInk: accentInk.light.orange,\n    infoInk: accentInk.light.teal,\n    /** = `semantic.light.destructiveInk` (#D64545 — `--destructive-ink: var(--destructive)` ở bảng mặc\n     *  định). Trước `3.3.3` trỏ nhầm `accentInk.light.red` (#9A3537 — bậc của bảng TƯƠNG PHẢN CAO). */\n    destructiveInk: semantic.light.destructiveInk\n  },\n  dark: {\n    success: accent.dark.green,\n    successForeground: \"#0E1116\",\n    warning: accent.dark.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.dark.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.dark.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.dark.green,\n    warningInk: accentInk.dark.yellow,\n    severeInk: accentInk.dark.orange,\n    infoInk: accentInk.dark.teal,\n    destructiveInk: semantic.dark.destructiveInk\n  }\n} as const;\n\n/**\n * Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định.\n *\n * ⚠ `chart-1` ở dark là `gold[300]` như light: `styles.css` KHÔNG khai lại `--chart-1` trong `.dark`\n * (chỉ `--chart-3` tự sáng lên qua `--navy-ink`). Trước `3.3.3` mirror này ghi `gold[200]` — biểu\n * đồ canvas/email/PDF dựng từ `tokens` ra màu khác biểu đồ trên trang.\n */\nexport const chart = {\n  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],\n  dark: [gold[300], accent.dark.teal, accentInk.dark.navy, accent.dark.green, accent.dark.red]\n} as const;\n\n/**\n * Màu avatar chữ cái (hex đục) cho nơi KHÔNG có Tailwind: canvas, email HTML, PDF.\n *\n * ⚠ KHÔNG phải bảng màu thứ hai. Bảng tone DUY NHẤT của cả gói nằm ở `lib/avatar-tone.ts`, mỗi\n * tone mang cả chuỗi class (cho DOM) lẫn công thức hex tương ứng; ở đây chỉ nạp bảng màu vào công\n * thức đó. Web và email vì vậy dùng chung một thứ tự tone, một hàm băm, một cách chuẩn hoá tên —\n * không còn hai bảng để lệch nhau.\n */\nconst avatarTonePalette = {\n  light: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.light,\n    accentInk: accentInk.light,\n    card: semantic.light.card\n  },\n  dark: {\n    gold,\n    ash,\n    brandNeutral,\n    accent: accent.dark,\n    accentInk: accentInk.dark,\n    card: semantic.dark.card\n  }\n} satisfies Record<ThemeMode, AvatarTonePalette>;\n\n/**\n * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.\n *\n * Tên hàm nói đúng thứ nó trả về: `...Colors` = hex (canvas/email/PDF), còn bản trả về chuỗi\n * class Tailwind cho DOM là `getAvatarToneClasses` ở `@comitor/ui`. Cùng một tên người luôn ra\n * cùng một tone ở cả hai đường vì chỉ số do MỘT hàm tính (`getAvatarToneIndex`).\n */\nexport function getAvatarToneColors(name: string, mode: ThemeMode = \"light\"): AvatarToneColors {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  const tone = AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n  return tone[mode](avatarTonePalette[mode]);\n}\n\nexport type { AvatarToneColors };\nexport { getAvatarToneIndex };\n\n/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */\nexport const layout = {\n  /** px — --header-height 3.5rem */\n  headerHeight: 56,\n  /** px — --sidebar-width 16rem */\n  sidebarWidth: 256,\n  /** px — --sidebar-width-icon 3.5rem */\n  sidebarCollapsedWidth: 56,\n  /** px — --radius 0.375rem */\n  radius: 6,\n  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },\n  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */\n  minTapTarget: 44\n} as const;\n\n/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */\nexport const typography = {\n  fontSans: '\"Inter\", system-ui, sans-serif',\n  fontMono: '\"Geist Mono\", ui-monospace, monospace'\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,\n * email HTML, xuất PDF, (sau này) React Native.\n *\n * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.\n * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.\n *\n * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),\n * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.\n *\n * Hợp đồng ba vai trò của màu (giống hệt `styles.css`; bảng đầy đủ ở docs/hop-dong-mau.md),\n * đọc tên là biết dùng ở đâu:\n *   `x`            → tô NỀN (fill đặc hoặc tint /5–/20 — trần chung an toàn cho mọi tone)\n *   `xForeground`  → chữ/icon NẰM TRÊN nền `x` ĐẶC — đo với `x`, ngưỡng 4,5:1\n *   `xInk`         → chính màu đó khi ĐI LÊN nền trang hoặc lên tint của chính nó (chữ, icon\n *                    rời, viền, vạch active) — đo với nền đó\n *\n * Cố ý KHÔNG mirror (xem docs/quyet-dinh-tich-hop.md §21): `--elevation-*` (chuỗi box-shadow chỉ\n * có nghĩa trong CSS), `--app-accent*` (giá trị thuộc về APP, không phải gói), `--font-*`.\n */\n\nimport { AVATAR_TONES, type AvatarToneColors, type AvatarTonePalette, getAvatarToneIndex } from \"./lib/avatar-tone.js\";\n\n/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */\nexport const gold = {\n  50: \"#FBF5DC\",\n  100: \"#F8E89D\",\n  200: \"#F5D060\",\n  /** primary ở light mode */\n  300: \"#E8B824\",\n  400: \"#B88A00\",\n  500: \"#7A5800\",\n  600: \"#5C4006\"\n} as const;\n\n/** Trung tính brand (khác thang ash — đây là màu \"giấy/mực\" của brand book). */\nexport const brandNeutral = {\n  ink: \"#0E1116\",\n  inkSoft: \"#3A3F4A\",\n  paper: \"#FBF7EE\",\n  warm: \"#EDE8D8\"\n} as const;\n\n/**\n * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.\n * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với\n * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).\n */\nexport const ash = {\n  50: \"#F7F7F8\",\n  100: \"#EDEEF1\",\n  300: \"#C8CBD3\",\n  500: \"#7E8290\",\n  700: \"#3A3F4A\",\n  900: \"#16181D\"\n} as const;\n\n/**\n * Màu phụ — vai trò TÔ NỀN (fill đặc hoặc tint). Bản `dark` được nâng sáng vì trên nền #0E1116\n * bản `light` chìm nghỉm.\n *\n * ⚠ ĐỪNG dùng bảng này làm màu CHỮ ở light: nó được chọn để tô nền nên quá nhạt — dùng\n * `accentInk` ngay dưới. `accent.dark.navy` giữ nguyên #0F1E3D chỉ để mirror đúng `styles.css`\n * (khối `.dark` không override `--navy`); vai trò navy ở dark do `accentInk.dark.navy` gánh.\n */\nexport const accent = {\n  light: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    /** Gốc của tone `severe`. Giữ 3:1 trên mọi nền trang (3,56:1 trắng · 3,32:1 `muted`) — vì nó\n     *  TÔ chấm của `StatusPill variant=\"dot\"`; bậc sáng hơn (#F97316) chỉ 2,80:1. */\n    orange: \"#EA580C\",\n    /** Ba sắc ĐỊNH DANH — chỉ bảng tone avatar/icon app đọc (`lib/avatar-tone.ts`). */\n    blue: \"#4169E1\",\n    purple: \"#8A4FD8\",\n    pink: \"#FF1493\"\n  },\n  /** Bảng MẶC ĐỊNH (comitor-ds) không khai lại màu phụ ở dark — cùng hex với light. Bản sáng\n   *  dành cho nền tối nằm ở `highContrast.dark`. Trừ `orange`: comitor-ds không có cam, và cùng\n   *  hex thì chữ cam trên tint /15 của chính nó ở dark chỉ 4,21:1 — nên bảng mặc định có bản\n   *  dark riêng. */\n  dark: {\n    navy: \"#0F1E3D\",\n    teal: \"#1F8A8B\",\n    red: \"#D64545\",\n    green: \"#2EA56A\",\n    yellow: \"#F2C94C\",\n    orange: \"#FB923C\",\n    /** Ba sắc định danh có bản dark RIÊNG như cam — bản light trên tint /15 hợp lên `card` chỉ 3,1–3,9:1. */\n    blue: \"#82A8F5\",\n    purple: \"#A78BFA\",\n    pink: \"#FF69B4\"\n  }\n} as const;\n\n/**\n * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /\n * `--orange-ink` / `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang**\n * (hoặc trên tint /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.\n *\n * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·\n * `--x-ink` là chính màu đó ĐI LÊN nền trang.\n *\n * Bản `light` là bậc tối đã đóng băng (kết quả của `color-mix(in srgb, --<màu>, --ink 30/40%)`\n * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark`. Đo trên tint 15%\n * của chính nó — nền thật mà chữ initials avatar và badge tonal đứng lên: teal 5,54 · green 5,60\n * · red 5,83:1 ở light (bản chưa có ink: 3,44 / 2,69 / 3,57:1 ✗).\n *\n * ⚠ Ở bảng MẶC ĐỊNH, `accent.dark` bằng hex của light nên bậc ink ở dark cũng vậy — đúng thứ\n * comitor-ds render. Bậc sáng cho nền tối nằm ở `highContrast.dark`.\n */\nexport const accentInk = {\n  light: {\n    navy: accent.light.navy,\n    teal: \"#1A6668\",\n    red: \"#9A3537\",\n    green: \"#216A48\",\n    /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */\n    yellow: gold[500],\n    /** = color-mix(srgb, orange 72%, ink 28%) — bậc SÁNG nhất còn giữ trần tint /20: 5,85:1 trắng ·\n     *  4,87:1 trên orange/15 · 4,58:1 trên orange/20. Bảng tương phản cao tối hơn: `highContrast`. */\n    orange: \"#AC440F\",\n    /** Ba sắc định danh — trên tint /15 của chính nó: blue 5,67 · purple 5,72 · pink 5,33:1. */\n    blue: \"#3053B8\",\n    purple: \"#6E3FB0\",\n    pink: \"#B0126A\"\n  },\n  dark: {\n    /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */\n    navy: \"#7EA2E8\",\n    teal: accent.dark.teal,\n    red: accent.dark.red,\n    green: accent.dark.green,\n    yellow: accent.dark.yellow,\n    orange: accent.dark.orange,\n    blue: accent.dark.blue,\n    purple: accent.dark.purple,\n    pink: accent.dark.pink\n  }\n} as const;\n\n/**\n * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /\n * `--yellow-foreground` / `--orange-foreground` / `--navy-foreground`. Đây là chữ/icon nằm\n * **TRÊN nền `accent.*` ĐẶC**, tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).\n *\n * Cả bốn sắc teal/green/yellow/orange đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả\n * hai theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·\n * yellow 11,92 / 12,35 · orange 5,31 / 8,36. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.\n *\n * ⚠ CỐ Ý KHÔNG có `red`: nền đỏ đặc không mang được chữ tốt ở light — trắng trên #D64545 được\n * 4,38:1 và mực 4,32:1, cả hai đều dưới AA. Nền đỏ đặc có chữ phải dùng `status.*.destructive`;\n * ở bảng tương phản cao token đó là #C93B3B và đạt 5,03:1. `accent.*.red` chỉ để tô TINT và làm\n * màu chart. (Cam thì mực cứu được — 5,31:1 — nên `orange` có mặt.)\n */\nexport const accentForeground = {\n  light: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  },\n  dark: {\n    navy: \"#FFFFFF\",\n    teal: \"#0E1116\",\n    green: \"#0E1116\",\n    yellow: \"#0E1116\",\n    orange: \"#0E1116\"\n  }\n} as const;\n\n/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */\nexport const semantic = {\n  light: {\n    background: \"#FFFFFF\",\n    foreground: \"#0E1116\",\n    card: \"#FFFFFF\",\n    cardForeground: \"#0E1116\",\n    popover: \"#FFFFFF\",\n    popoverForeground: \"#0E1116\",\n    primary: \"#E8B824\",\n    primaryForeground: \"#0E1116\",\n    /** Bậc INK của brand. Ở bảng MẶC ĐỊNH nó BẰNG `primary`: comitor-ds tô gold cho cả những vai\n     *  trò mà 1.4.11 đòi 3:1 (rãnh Switch BẬT, gạch active của Tabs) — 1,86:1, đã biết và chấp\n     *  nhận. Bậc tối #7A5800 nằm ở `highContrast.light.primaryInk`. */\n    primaryInk: \"#E8B824\",\n    secondary: \"#EDE8D8\",\n    secondaryForeground: \"#0E1116\",\n    muted: \"#F7F7F8\",\n    /** Bậc chữ phụ — giá trị của comitor-ds, bằng đúng `ash[500]`. 3,83:1 trên nền trắng và\n     *  3,58:1 trên `muted`, tức dưới AA 4,5:1: đã biết và chấp nhận, bản đạt chuẩn nằm ở\n     *  `highContrast.light.mutedForeground`. */\n    mutedForeground: ash[500],\n    accent: \"#FBF5DC\",\n    accentForeground: \"#0E1116\",\n    /** Nền nút xoá. Chữ trắng trên nó được 4,38:1 — thiếu 0,12 so với AA, đã biết và chấp nhận. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    /** Nền nút xoá lúc HOVER = `destructive` ở 90% trên nền trắng, đúng thứ `hover:bg-red/90`\n     *  của comitor-ds render. Ghim hex vì `/90` phụ thuộc nền phía sau. */\n    destructiveHover: \"#DA5A5A\",\n    /** Chữ báo lỗi trên nền trang. comitor-ds viết `text-destructive` cho vai trò này, tức cùng\n     *  hex với nền — 4,38:1 trên nền trắng. */\n    destructiveInk: \"#D64545\",\n    /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương\n     *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */\n    border: \"#EDEEF1\",\n    /** Viền ô nhập — comitor-ds cho nó cùng bậc với `border`. 1,16:1, đã biết và chấp nhận. */\n    input: \"#EDEEF1\",\n    ring: \"#E8B824\",\n    /** Ranh giới của control lúc NGHỈ — ở bảng mặc định bằng đúng `input`. */\n    controlEdge: \"#EDEEF1\",\n    /** Cùng vai trò nhưng ở HOVER/ACTIVE. comitor-ds dùng `hover:border-gray-300` = `ash[300]`. */\n    controlEdgeStrong: ash[300],\n    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio). comitor-ds\n     *  tô gold: 1,86:1 với nền trang và với núm — đã biết và chấp nhận. */\n    controlOn: \"#E8B824\",\n    /** Núm Switch / chấm Radio — TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** DẤU CHECK của Checkbox và chữ trên ngày ĐANG CHỌN của Calendar — tách khỏi `controlKnob`\n     *  vì trên nền gold SÁNG thì dấu phải là MỰC (10,19:1), còn ở bảng tương phản cao nền là\n     *  gold-500 TỐI nên dấu lật thành màu nền trang. */\n    controlCheck: brandNeutral.ink,\n    /** Rãnh Switch khi TẮT — comitor-ds dùng `bg-gray-300` / `dark:bg-gray-700`. */\n    switchTrack: ash[300],\n    /** Rãnh Slider — comitor-ds dùng `bg-muted`, khác bậc với rãnh Switch. */\n    sliderTrack: \"#F7F7F8\",\n    /** Button variant `link`. comitor-ds dùng `gold[400]` — 3,15:1, dưới AA, đã biết và chấp nhận. */\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#FAFAF9\",\n    sidebarForeground: \"#0E1116\",\n    sidebarBorder: \"#EDEEF1\",\n    sidebarAccent: \"#FBF5DC\",\n    sidebarAccentForeground: \"#0E1116\"\n  },\n  dark: {\n    background: \"#0E1116\",\n    foreground: \"#F7F7F8\",\n    card: \"#16181D\",\n    cardForeground: \"#F7F7F8\",\n    popover: \"#16181D\",\n    popoverForeground: \"#F7F7F8\",\n    primary: \"#F5D060\",\n    primaryForeground: \"#0E1116\",\n    /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */\n    primaryInk: \"#F5D060\",\n    secondary: \"#1E2128\",\n    secondaryForeground: \"#F7F7F8\",\n    muted: \"#1E2128\",\n    /** comitor-ds không khai lại token này ở dark — cùng hex với light. 4,21:1 trên `muted`,\n     *  dưới AA: đã biết và chấp nhận. */\n    mutedForeground: ash[500],\n    accent: \"#1E2128\",\n    accentForeground: \"#F7F7F8\",\n    /** Ghim đúng giá trị của light — comitor-ds dùng chung một hex cho cả hai theme. */\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    destructiveHover: \"#DA5A5A\",\n    /** 4,06:1 trên `card` — cùng hex với nền, đúng `text-destructive` của comitor-ds. */\n    destructiveInk: \"#D64545\",\n    /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */\n    border: \"#1E2128\",\n    /** Viền ô nhập bản dark — KHÔNG phải #1E2128 của comitor-ds (chỉ 1,10:1 trên `card`, ô nhập tan\n     *  vào nền). #434A5A = 2,00:1, mirror `.dark { --input }` từ `0.5.0`; trước `3.3.3` mirror này còn\n     *  ghi #1E2128. */\n    input: \"#434A5A\",\n    ring: \"#F5D060\",\n    /** = `input` (`--control-edge: var(--input)`). */\n    controlEdge: \"#434A5A\",\n    /** comitor-ds dùng `dark:hover:border-gray-500` = `ash[500]` (lật chiều so với light). */\n    controlEdgeStrong: ash[500],\n    /** comitor-ds tô `dark:data-[state=checked]:bg-gold-300`, nhưng token `primary` của chính nó\n     *  ở dark là #F5D060; gói theo token, nên control BẬT ở dark là bậc sáng. */\n    controlOn: \"#F5D060\",\n    /** TRẮNG ở cả hai theme, đúng `bg-white` của comitor-ds. */\n    controlKnob: \"#FFFFFF\",\n    /** comitor-ds vẽ dấu check bằng `text-ink` ở CẢ hai theme. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: ash[700],\n    sliderTrack: \"#1E2128\",\n    linkInk: gold[400],\n    linkInkHover: gold[300],\n    sidebar: \"#16181D\",\n    sidebarForeground: \"#F7F7F8\",\n    sidebarBorder: \"#1E2128\",\n    sidebarAccent: \"#1E2128\",\n    sidebarAccentForeground: \"#F7F7F8\"\n  }\n} as const;\n\n/**\n * BẢNG MÀU THỨ HAI — TƯƠNG PHẢN CAO. Mirror khối `[data-contrast=\"high\"]` /\n * `.dark[data-contrast=\"high\"]` trong styles.css.\n *\n * Chỉ chứa những token KHÁC bảng mặc định, đúng như CSS: hợp lên trên để có bảng đầy đủ.\n *\n * ```ts\n * const mau = { ...semantic.light, ...highContrast.light };\n * ```\n *\n * Bảng mặc định là comitor-ds (bản duyệt, có những cặp dưới ngưỡng — đã liệt kê ở từng token).\n * Bảng này là bảng đã đo, do NGƯỜI DÙNG bật qua `<ContrastProvider>` + `<ContrastToggle>`.\n * `accent` là màu phụ bản sáng dành cho nền tối — bảng mặc định không có, xem `accent.dark`.\n */\nexport const highContrast = {\n  light: {\n    /** 5,23:1 trên `background` · 4,89:1 trên `muted` (bảng mặc định: 3,83 / 3,58) */\n    mutedForeground: \"#686C7A\",\n    /** Chữ trắng trên nền này được 5,03:1 (bảng mặc định #D64545 chỉ 4,38:1) */\n    destructive: \"#C93B3B\",\n    /** = color-mix(destructive, ink 15%) — ĐẬM thêm khi hover, ngược chiều bảng mặc định. */\n    destructiveHover: \"#AD3535\",\n    /** 7,15:1 trên nền trắng (bảng mặc định dùng chính #D64545, 4,38:1) */\n    destructiveInk: accentInk.light.red,\n    /** 3,83:1 trên nền trắng (bảng mặc định #EDEEF1 chỉ 1,16:1) */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[700],\n    /** #B48700 = gold-400 tối đi 2%: 3,28:1 trên `background`/`card` · 3,06:1 trên `muted` · ⇄ núm\n     *  trắng 3,28:1 (bảng mặc định: 1,86 / 1,86). Trước `3.3.3` mirror này còn ghi gold-500 — giá trị\n     *  `styles.css` đã bỏ. */\n    controlOn: \"#B48700\",\n    /** = `background`, nên luôn tương phản đúng chiều với cả rãnh BẬT lẫn rãnh TẮT. */\n    controlKnob: \"#FFFFFF\",\n    /** MỰC trên nền gold (5,77:1) — cùng cách vẽ với bảng mặc định; trước `3.3.3` mirror này ghi trắng. */\n    controlCheck: brandNeutral.ink,\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: gold[500],\n    linkInk: gold[500],\n    linkInkHover: gold[600],\n    /** = `--orange-ink` của khối này — bậc ink màu phụ DUY NHẤT mà bảng này đổi ở light:\n     *  color-mix(srgb, orange 65%, ink 35%), 6,66:1 trắng · 5,55:1 trên orange/15 (bảng mặc định\n     *  #AC440F: 5,85 / 4,87:1). */\n    severeInk: \"#9D3F10\",\n    accent: accent.light\n  },\n  dark: {\n    /** 5,70:1 trên `background` · 5,35:1 trên `card` · 4,86:1 trên `muted` */\n    mutedForeground: \"#888D9B\",\n    destructive: \"#C93B3B\",\n    destructiveHover: \"#AD3535\",\n    destructiveInk: \"#F87171\",\n    /** Ghim một giá trị cho cả hai theme — 4,94:1 trên `background` */\n    input: \"#7E8290\",\n    controlEdge: \"#7E8290\",\n    controlEdgeStrong: ash[300],\n    /** 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116) */\n    controlOn: \"#F5D060\",\n    controlKnob: \"#0E1116\",\n    controlCheck: \"#0E1116\",\n    switchTrack: \"#7E8290\",\n    sliderTrack: \"#7E8290\",\n    primaryInk: \"#F5D060\",\n    linkInk: gold[200],\n    linkInkHover: gold[100],\n    /** Bằng bảng mặc định (8,36:1 trên `background` · 6,09:1 trên orange/15) — khai cho đủ cặp\n     *  với `light`, vì CSS phải huỷ bậc tối của khối light ở đây. */\n    severeInk: accent.dark.orange,\n    /** Màu phụ bản SÁNG cho nền tối — bảng mặc định không có bản dark cho nhóm này (trừ `orange`,\n     *  vốn đã sáng ở `accent.dark`). */\n    accent: {\n      navy: \"#0F1E3D\",\n      teal: \"#2DD4BF\",\n      red: \"#F87171\",\n      green: \"#4ADE80\",\n      yellow: \"#FACC15\",\n      orange: accent.dark.orange\n    }\n  }\n} as const;\n\n/**\n * Alias trạng thái — success/warning/severe/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.\n * `severe` (cam) là nấc giữa warning và destructive: ưu tiên cao, SLA sắp trễ.\n *\n * Ba lớp KHÁC nhau, đừng gộp:\n *   • `destructive` — màu NỀN (nút xoá): #D64545 ở bảng mặc định (chữ trắng 4,38:1, dưới AA và đã\n *     chấp nhận), #C93B3B ở bảng tương phản cao (5,03:1 ✓);\n *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;\n *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Bảng mặc định cho nó cùng hex với\n *     nền (đúng `text-destructive` của comitor-ds); bảng tương phản cao tách thành bậc tối riêng.\n *\n * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải\n * trắng ở light rồi lật ở dark như bản 0.1.0): ba nền trạng thái đều là sắc sáng.\n *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]\n *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]\n *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]\n *     severe  mực 5,31:1 (light) · 8,36:1 (dark)    [trắng chỉ 3,56 / 2,26:1 ✗]\n * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.\n */\nexport const status = {\n  light: {\n    success: accent.light.green,\n    successForeground: \"#0E1116\",\n    warning: accent.light.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.light.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.light.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.light.green,\n    warningInk: accentInk.light.yellow,\n    severeInk: accentInk.light.orange,\n    infoInk: accentInk.light.teal,\n    /** = `semantic.light.destructiveInk` (#D64545 — `--destructive-ink: var(--destructive)` ở bảng mặc\n     *  định). Trước `3.3.3` trỏ nhầm `accentInk.light.red` (#9A3537 — bậc của bảng TƯƠNG PHẢN CAO). */\n    destructiveInk: semantic.light.destructiveInk\n  },\n  dark: {\n    success: accent.dark.green,\n    successForeground: \"#0E1116\",\n    warning: accent.dark.yellow,\n    warningForeground: \"#0E1116\",\n    severe: accent.dark.orange,\n    severeForeground: \"#0E1116\",\n    info: accent.dark.teal,\n    infoForeground: \"#0E1116\",\n    destructive: \"#D64545\",\n    destructiveForeground: \"#FFFFFF\",\n    successInk: accentInk.dark.green,\n    warningInk: accentInk.dark.yellow,\n    severeInk: accentInk.dark.orange,\n    infoInk: accentInk.dark.teal,\n    destructiveInk: semantic.dark.destructiveInk\n  }\n} as const;\n\n/**\n * Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định.\n *\n * ⚠ `chart-1` ở dark là `gold[300]` như light: `styles.css` KHÔNG khai lại `--chart-1` trong `.dark`\n * (chỉ `--chart-3` tự sáng lên qua `--navy-ink`). Trước `3.3.3` mirror này ghi `gold[200]` — biểu\n * đồ canvas/email/PDF dựng từ `tokens` ra màu khác biểu đồ trên trang.\n */\nexport const chart = {\n  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],\n  dark: [gold[300], accent.dark.teal, accentInk.dark.navy, accent.dark.green, accent.dark.red]\n} as const;\n\n/**\n * Màu avatar chữ cái (hex đục) cho nơi KHÔNG có Tailwind: canvas, email HTML, PDF.\n *\n * ⚠ KHÔNG phải bảng màu thứ hai. Bảng tone DUY NHẤT của cả gói nằm ở `lib/avatar-tone.ts`, mỗi\n * tone mang cả chuỗi class (cho DOM) lẫn công thức hex tương ứng; ở đây chỉ nạp bảng màu vào công\n * thức đó. Web và email vì vậy dùng chung một thứ tự tone, một hàm băm, một cách chuẩn hoá tên —\n * không còn hai bảng để lệch nhau.\n */\nconst avatarTonePalette = {\n  light: {\n    gold,\n    accent: accent.light,\n    accentInk: accentInk.light,\n    card: semantic.light.card\n  },\n  dark: {\n    gold,\n    accent: accent.dark,\n    accentInk: accentInk.dark,\n    card: semantic.dark.card\n  }\n} satisfies Record<ThemeMode, AvatarTonePalette>;\n\n/**\n * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.\n *\n * Tên hàm nói đúng thứ nó trả về: `...Colors` = hex (canvas/email/PDF), còn bản trả về chuỗi\n * class Tailwind cho DOM là `getAvatarToneClasses` ở `@comitor/ui`. Cùng một tên người luôn ra\n * cùng một tone ở cả hai đường vì chỉ số do MỘT hàm tính (`getAvatarToneIndex`).\n */\nexport function getAvatarToneColors(name: string, mode: ThemeMode = \"light\"): AvatarToneColors {\n  // `noUncheckedIndexedAccess` bật → phải có nhánh lùi, dù chỉ số luôn nằm trong [0, 8).\n  const tone = AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];\n  return tone[mode](avatarTonePalette[mode]);\n}\n\nexport type { AvatarToneColors };\nexport { getAvatarToneIndex };\n\n/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */\nexport const layout = {\n  /** px — --header-height 3.5rem */\n  headerHeight: 56,\n  /** px — --sidebar-width 16rem */\n  sidebarWidth: 256,\n  /** px — --sidebar-width-icon 3.5rem */\n  sidebarCollapsedWidth: 56,\n  /** px — --radius 0.375rem */\n  radius: 6,\n  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },\n  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */\n  minTapTarget: 44\n} as const;\n\n/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */\nexport const typography = {\n  fontSans: '\"Inter\", system-ui, sans-serif',\n  fontMono: '\"Geist Mono\", ui-monospace, monospace'\n} as const;\n\nexport type ThemeMode = \"light\" | \"dark\";\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -131,6 +131,17 @@
      status-config.ts): --background 3,56 · --sidebar 3,41 · --muted 3,32 · --sidebar-accent
      3,25:1 ✓. Sáng hơn một nấc của cùng thang (#F97316) chỉ còn 2,80 / 2,62:1 ✗. */
   --orange: #ea580c;
+  /* Ba sắc ĐỊNH DANH — chỉ cho bảng tone avatar/icon app (`src/lib/avatar-tone.ts`), không có vai trò
+     trạng thái nào. Chúng thay navy · ash · neutral trong bảng tone: ba tone cũ đều là xám-xanh ở
+     các độ đậm khác nhau (navy #0F1E3D tint /15 ra nền xám nhạt + chữ gần đen), nên ô icon của ba
+     app khác nhau trông như cùng một màu. Gốc lấy từ bảng màu web thông dụng: royal blue #4169E1 ·
+     một nấc giữa medium purple và blue violet · deep pink #FF1493. comitor-ds không có ba sắc này
+     → màu ĐO của gói (như cam). Số đo bậc ink ở khối "Bậc INK" ngay dưới.
+     ⚠ Không có --blue/--purple/--pink-foreground: chưa chỗ nào tô chúng ĐẶC rồi đặt chữ lên. Cần
+     thì đo rồi khai, như mọi màu phụ khác. */
+  --blue: #4169e1;
+  --purple: #8a4fd8;
+  --pink: #ff1493;
 
   /* ─ HỢP ĐỒNG BA VAI TRÒ CỦA MỘT TONE MÀU — đọc tên là biết dùng ở đâu ─
 
@@ -193,6 +204,17 @@
      Sáng hơn một nấc (75% = #B3460F) vẫn qua /15 (4,60:1) nhưng tụt ở /20 (4,33:1 ✗) — app viết
      `bg-severe/20` theo khuôn của warning là hỏng. Bảng tương phản cao kéo tối thêm (khối 5b). */
   --orange-ink: #ac440f;
+  /* Ba sắc định danh: đóng băng color-mix(in srgb, --<màu>, --ink ~30%) rồi chỉnh tay cho ĐỀU sàn
+     (≥ 6,7:1 trên nền trắng · ≥ 5,3:1 trên tint /15 · ≥ 4,9:1 trên tint /20) mà vẫn đọc ra SẮC —
+     ink tối hơn nữa thì ba tone lại trôi về cùng một màu mực, đúng lỗi vừa sửa:
+         blue   #3053B8 — trắng 6,87 · --muted 6,25 · --sidebar-accent 6,28 · /15 5,67 · /20 5,27:1 ✓
+         purple #6E3FB0 — trắng 7,00 · --muted 6,37 · --sidebar-accent 6,40 · /15 5,72 · /20 5,34:1 ✓
+         pink   #B0126A — trắng 6,69 · --muted 6,08 · --sidebar-accent 6,11 · /15 5,33 · /20 4,92:1 ✓
+     (medium violet red #C71585 của bảng màu web chỉ 4,32:1 trên pink/15 ✗ — nên tối thêm một nấc.)
+     Bảng tương phản cao KHÔNG khai lại: ba bậc này đã đứng ngang sàn mà bảng đó kéo cam xuống. */
+  --blue-ink: #3053b8;
+  --purple-ink: #6e3fb0;
+  --pink-ink: #b0126a;
 
   /* ─ Bậc FOREGROUND của màu phụ — chữ/icon nằm TRÊN nền --x ĐẶC ─
      teal/green/yellow/orange đều là sắc SÁNG-VỪA ở light và còn sáng hơn ở dark, nên chữ phải là
@@ -605,6 +627,19 @@
      ink gánh vai trò đó (7,40:1 trên --background · 6,95:1 trên --card), và --chart-3 vì trỏ vào
      --navy-ink nên tự đúng, không cần khai lại ở đây nữa. */
   --navy-ink: #7ea2e8;
+  /* Ba sắc định danh có bản dark RIÊNG (như cam): bản light làm chữ trên tint /15 hợp lên --card
+     chỉ 3,1–3,9:1 ✗. Bậc ink trỏ về fill, đúng lối của khối này. Số đo (--background · --card ·
+     --muted · /15 · /20 trên --card):
+         blue   #82A8F5 — 7,99 · 7,50 · 6,80 · 5,76 · 5,19:1 ✓
+         purple #A78BFA — 6,95 · 6,53 · 5,92 · 5,17 · 4,69:1 ✓   (Tailwind violet-400)
+         pink   #FF69B4 — 7,14 · 6,71 · 6,09 · 5,37 · 4,90:1 ✓   (hot pink)
+     .dark[data-contrast="high"] không khai lại: khối light của bảng đó không đụng ba bậc này. */
+  --blue: #82a8f5;
+  --purple: #a78bfa;
+  --pink: #ff69b4;
+  --blue-ink: var(--blue);
+  --purple-ink: var(--purple);
+  --pink-ink: var(--pink);
   /* Accent app tách khỏi --primary-ink (xem :root): ở dark gold-500 chìm vào nền, nên bậc sáng
      của brand gánh vai trò này. */
   --app-accent-ink: var(--primary);
@@ -899,12 +934,18 @@
   --color-green: var(--green);
   --color-yellow: var(--yellow);
   --color-orange: var(--orange);
+  --color-blue: var(--blue);
+  --color-purple: var(--purple);
+  --color-pink: var(--pink);
   --color-navy-ink: var(--navy-ink);
   --color-teal-ink: var(--teal-ink);
   --color-red-ink: var(--red-ink);
   --color-green-ink: var(--green-ink);
   --color-yellow-ink: var(--yellow-ink);
   --color-orange-ink: var(--orange-ink);
+  --color-blue-ink: var(--blue-ink);
+  --color-purple-ink: var(--purple-ink);
+  --color-pink-ink: var(--pink-ink);
   /* Chữ trên nền màu phụ ĐẶC. Không có `red-foreground`: nền --red đặc không mang được chữ ở
      light (4,38 / 4,32:1) → dùng `bg-destructive text-destructive-foreground`. */
   --color-navy-foreground: var(--navy-foreground);