@comitor/ui 1.8.3 → 1.10.0

package/dist/components/composite/icon-avatar.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { ComponentProps, ComponentType } from 'react';
+import { AvatarToneName } from '../../lib/avatar-tone.js';
+import { LetterAvatarSize } from './letter-avatar.js';
+
+/**
+ * Icon của một app/thực thể, đặt trong ô nhận diện tô màu — EM RUỘT của `LetterAvatar`.
+ *
+ * ── VÌ SAO KHÔNG PHẢI MỘT PROP CỦA `LetterAvatar` ────────────────────────────────────────
+ * Hai component chia nhau TOÀN BỘ phần màu (cùng bảng 8 tone, cùng hàm băm, cùng ba nhánh
+ * ảnh/nội dung/`sr-only`) và chỉ khác ở thứ nằm giữa ô: chữ cái đầu, hay một icon. Gộp lại thành
+ * `<LetterAvatar icon={…}>` thì `name` mang hai nghĩa cùng lúc — vừa là chuỗi để lấy initials,
+ * vừa là hạt giống màu — và mọi chỗ gọi phải đọc JSDoc mới biết `initials` có được vẽ hay không.
+ * Tách ra thì mỗi bên có đúng một hình dạng, và phần dùng chung nằm ở `lib/avatar-tone.ts`, nơi
+ * nó vốn đã ở.
+ *
+ * ── MÀU: SUY THEO TÊN, TRỪ KHI ĐƯỢC CHỌN TAY ────────────────────────────────────────────
+ * Mặc định màu suy từ `seed` (rơi về `name` khi không có) bằng đúng hàm băm của `LetterAvatar`,
+ * nên cùng một app luôn ra cùng một màu ở mọi sản phẩm Comitor — và ở cả bản canvas/email/PDF, vì
+ * `getAvatarToneColors` của `@comitor/ui/tokens` đọc cùng bảng tone.
+ *
+ * ⚠ Với app thì `seed` phải là KHOÁ, không phải tên: tên đổi theo ngôn ngữ giao diện. Đo được
+ * 4/6 app đổi màu khi chuyển vi ⇄ en — xem JSDoc của `seed`.
+ *
+ * ⚠ Đó là điều bảng màu ghi cứng KHÔNG làm được, và là lý do component này ra đời: một danh mục
+ * app tô bằng năm token chọn tay thì sản phẩm thứ sáu hoặc phải trùng màu với sản phẩm khác, hoặc
+ * phải chờ ai đó vào sửa bảng. Ở đây thêm một app là nó tự có màu.
+ *
+ * `tone` cho phép ghi đè bằng MỘT TÊN trong 8 tone (`AVATAR_TONE_NAMES`) — cả bảng, không phải
+ * vài màu. Tên lạ thì rơi về màu suy theo `name`; xem `getAvatarToneByName` để biết vì sao không ném.
+ *
+ * ── HÌNH: VUÔNG BO GÓC, KHÔNG TRÒN ──────────────────────────────────────────────────────
+ * Tròn là hình của NGƯỜI. Ô vuông bo góc là hình của một THỨ (app, workspace, dự án) — cùng quy
+ * ước mà `LetterAvatar square` đang dùng cho workspace. `rounded` để mở lại nhánh tròn cho chỗ
+ * hiếm cần nó, nhưng mặc định là vuông.
+ *
+ * ── ⚠ ICON KHÔNG BAO GIỜ NHẬN MÀU CÓ ALPHA ─────────────────────────────────────────────
+ * Nền của tone là tint có alpha (`bg-teal/15`), nhưng CHỮ/ICON thì luôn là một bậc màu ĐẶC
+ * (`text-teal-ink`). Đó không phải tình cờ: nét icon cắt nhau mà mang alpha thì chỗ giao bị tô hai
+ * lần và lộ vệt nối — đo được và ghi ở `docs/hop-dong-mau.md` §7b. Bảng tone vốn đã đúng, và
+ * component này không được thêm `opacity-*` hay `/NN` lên `<Icon>`.
+ */
+/**
+ * Hình dạng icon mà component nhận: một component React lấy `className`.
+ *
+ * Đủ rộng cho `lucide-react` và cho icon tự vẽ, và KHÔNG nhận `ReactNode` (một element đã dựng
+ * sẵn) — nhận element thì chỗ gọi tự đặt cỡ, và cỡ icon sẽ trôi khỏi `size` của ô.
+ */
+type IconAvatarIcon = ComponentType<{
+    className?: string;
+}>;
+interface IconAvatarProps extends Omit<ComponentProps<"span">, "children"> {
+    /** Tên hiển thị — tên gọi TRỢ NĂNG của ô, và là hạt giống màu mặc định khi không có `seed`. */
+    name: string;
+    /**
+     * Hạt giống màu, khi nó KHÁC tên hiển thị. Mặc định dùng `name`.
+     *
+     * ── ⚠ VÌ SAO PROP NÀY BẮT BUỘC PHẢI CÓ, ĐÃ ĐO ─────────────────────────────────────────
+     * `LetterAvatar` băm theo tên và điều đó đúng cho NGƯỜI: tên người không đổi theo ngôn ngữ
+     * giao diện. Tên APP thì có — và nó phá đúng lời hứa "cùng một app luôn cùng màu".
+     *
+     * Đo trên đúng danh mục Comitor hiện có, băm theo tên đã dịch: **4/6 app đổi màu** khi người
+     * dùng chuyển vi ⇄ en (`starter` #E7E7E8 → #FCF2D2, `tasks` #FCF2D2 → #F9E3E3, `hr` và `mes`
+     * cũng đổi). Một người đổi ngôn ngữ và thấy cả dải ứng dụng đổi màu sẽ không nghĩ đó là tính
+     * năng.
+     *
+     * Vì vậy chỗ nào có một định danh BẤT BIẾN thì truyền nó vào đây: với app là `key`
+     * (`"tasks"`, `"crm"`), với workspace là `slug`. `name` vẫn là thứ trình đọc màn hình đọc lên.
+     */
+    seed?: string;
+    /** Icon vẽ ở giữa ô. Thiếu cả `icon` lẫn `src` thì ô vẫn vẽ, chỉ trống — không ném. */
+    icon?: IconAvatarIcon;
+    /** Ảnh tải lên. Có thì nó THẮNG `icon` — ảnh là thứ người dùng chủ động chọn cho đúng app này. */
+    src?: string | null;
+    size?: LetterAvatarSize;
+    /** Chọn tay một tone trong `AVATAR_TONE_NAMES`. Tên lạ hoặc bỏ trống → suy theo `name`. */
+    tone?: AvatarToneName | string | null;
+    /** `md` = vuông bo góc (mặc định, hình của một THỨ) · `full` = tròn (hình của NGƯỜI). */
+    rounded?: "md" | "full";
+}
+declare function IconAvatar({ name, seed, icon: Icon, src, size, tone, rounded, className, ...props }: IconAvatarProps): React.JSX.Element;
+
+export { IconAvatar, type IconAvatarIcon, type IconAvatarProps };

package/dist/components/composite/icon-avatar.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getAvatarTone, getAvatarToneByName } from "../../lib/avatar-tone.js";
+import { cn } from "../../lib/cn.js";
+const iconSizeClasses = {
+  xs: "size-3.5",
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-6"
+};
+const boxSizeClasses = {
+  xs: "size-6",
+  sm: "size-7",
+  md: "size-9",
+  lg: "size-11",
+  xl: "size-14"
+};
+function IconAvatar({
+  name,
+  seed,
+  icon: Icon,
+  src,
+  size = "md",
+  tone,
+  rounded = "md",
+  className,
+  ...props
+}) {
+  const toneClasses = (getAvatarToneByName(tone) ?? getAvatarTone(seed ?? name)).classes;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "icon-avatar",
+      title: name,
+      className: cn(
+        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
+        rounded === "full" ? "rounded-full" : "rounded-md",
+        boxSizeClasses[size],
+        !src && toneClasses,
+        className
+      ),
+      ...props,
+      children: [
+        src ? (
+          // Cùng lý do với `LetterAvatar`: gói dùng chung không phụ thuộc `next/*`.
+          // biome-ignore lint/performance/noImgElement: package dùng chung không phụ thuộc next/*
+          /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full object-cover", loading: "lazy", decoding: "async" })
+        ) : Icon ? /* @__PURE__ */ jsx(Icon, { className: iconSizeClasses[size] }) : null,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: name })
+      ]
+    }
+  );
+}
+export {
+  IconAvatar
+};
+//# sourceMappingURL=icon-avatar.js.map

package/dist/components/composite/icon-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/icon-avatar.tsx"],"sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport { type AvatarToneName, getAvatarTone, getAvatarToneByName } from \"../../lib/avatar-tone.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport type { LetterAvatarSize } from \"./letter-avatar.js\";\n\n/**\n * Icon của một app/thực thể, đặt trong ô nhận diện tô màu — EM RUỘT của `LetterAvatar`.\n *\n * ── VÌ SAO KHÔNG PHẢI MỘT PROP CỦA `LetterAvatar` ────────────────────────────────────────\n * Hai component chia nhau TOÀN BỘ phần màu (cùng bảng 8 tone, cùng hàm băm, cùng ba nhánh\n * ảnh/nội dung/`sr-only`) và chỉ khác ở thứ nằm giữa ô: chữ cái đầu, hay một icon. Gộp lại thành\n * `<LetterAvatar icon={…}>` thì `name` mang hai nghĩa cùng lúc — vừa là chuỗi để lấy initials,\n * vừa là hạt giống màu — và mọi chỗ gọi phải đọc JSDoc mới biết `initials` có được vẽ hay không.\n * Tách ra thì mỗi bên có đúng một hình dạng, và phần dùng chung nằm ở `lib/avatar-tone.ts`, nơi\n * nó vốn đã ở.\n *\n * ── MÀU: SUY THEO TÊN, TRỪ KHI ĐƯỢC CHỌN TAY ────────────────────────────────────────────\n * Mặc định màu suy từ `seed` (rơi về `name` khi không có) bằng đúng hàm băm của `LetterAvatar`,\n * nên cùng một app luôn ra cùng một màu ở mọi sản phẩm Comitor — và ở cả bản canvas/email/PDF, vì\n * `getAvatarToneColors` của `@comitor/ui/tokens` đọc cùng bảng tone.\n *\n * ⚠ Với app thì `seed` phải là KHOÁ, không phải tên: tên đổi theo ngôn ngữ giao diện. Đo được\n * 4/6 app đổi màu khi chuyển vi ⇄ en — xem JSDoc của `seed`.\n *\n * ⚠ Đó là điều bảng màu ghi cứng KHÔNG làm được, và là lý do component này ra đời: một danh mục\n * app tô bằng năm token chọn tay thì sản phẩm thứ sáu hoặc phải trùng màu với sản phẩm khác, hoặc\n * phải chờ ai đó vào sửa bảng. Ở đây thêm một app là nó tự có màu.\n *\n * `tone` cho phép ghi đè bằng MỘT TÊN trong 8 tone (`AVATAR_TONE_NAMES`) — cả bảng, không phải\n * vài màu. Tên lạ thì rơi về màu suy theo `name`; xem `getAvatarToneByName` để biết vì sao không ném.\n *\n * ── HÌNH: VUÔNG BO GÓC, KHÔNG TRÒN ──────────────────────────────────────────────────────\n * Tròn là hình của NGƯỜI. Ô vuông bo góc là hình của một THỨ (app, workspace, dự án) — cùng quy\n * ước mà `LetterAvatar square` đang dùng cho workspace. `rounded` để mở lại nhánh tròn cho chỗ\n * hiếm cần nó, nhưng mặc định là vuông.\n *\n * ── ⚠ ICON KHÔNG BAO GIỜ NHẬN MÀU CÓ ALPHA ─────────────────────────────────────────────\n * Nền của tone là tint có alpha (`bg-teal/15`), nhưng CHỮ/ICON thì luôn là một bậc màu ĐẶC\n * (`text-teal-ink`). Đó không phải tình cờ: nét icon cắt nhau mà mang alpha thì chỗ giao bị tô hai\n * lần và lộ vệt nối — đo được và ghi ở `docs/hop-dong-mau.md` §7b. Bảng tone vốn đã đúng, và\n * component này không được thêm `opacity-*` hay `/NN` lên `<Icon>`.\n */\n\n/**\n * Hình dạng icon mà component nhận: một component React lấy `className`.\n *\n * Đủ rộng cho `lucide-react` và cho icon tự vẽ, và KHÔNG nhận `ReactNode` (một element đã dựng\n * sẵn) — nhận element thì chỗ gọi tự đặt cỡ, và cỡ icon sẽ trôi khỏi `size` của ô.\n */\nexport type IconAvatarIcon = ComponentType<{ className?: string }>;\n\n/** Cỡ icon bên trong, theo cỡ ô. Ô `md` (36px) + icon 16px là tỉ lệ đang dùng ở dải ứng dụng. */\nconst iconSizeClasses: Record<LetterAvatarSize, string> = {\n  xs: \"size-3.5\",\n  sm: \"size-4\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-6\"\n};\n\nconst boxSizeClasses: Record<LetterAvatarSize, string> = {\n  xs: \"size-6\",\n  sm: \"size-7\",\n  md: \"size-9\",\n  lg: \"size-11\",\n  xl: \"size-14\"\n};\n\nexport interface IconAvatarProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Tên hiển thị — tên gọi TRỢ NĂNG của ô, và là hạt giống màu mặc định khi không có `seed`. */\n  name: string;\n  /**\n   * Hạt giống màu, khi nó KHÁC tên hiển thị. Mặc định dùng `name`.\n   *\n   * ── ⚠ VÌ SAO PROP NÀY BẮT BUỘC PHẢI CÓ, ĐÃ ĐO ─────────────────────────────────────────\n   * `LetterAvatar` băm theo tên và điều đó đúng cho NGƯỜI: tên người không đổi theo ngôn ngữ\n   * giao diện. Tên APP thì có — và nó phá đúng lời hứa \"cùng một app luôn cùng màu\".\n   *\n   * Đo trên đúng danh mục Comitor hiện có, băm theo tên đã dịch: **4/6 app đổi màu** khi người\n   * dùng chuyển vi ⇄ en (`starter` #E7E7E8 → #FCF2D2, `tasks` #FCF2D2 → #F9E3E3, `hr` và `mes`\n   * cũng đổi). Một người đổi ngôn ngữ và thấy cả dải ứng dụng đổi màu sẽ không nghĩ đó là tính\n   * năng.\n   *\n   * Vì vậy chỗ nào có một định danh BẤT BIẾN thì truyền nó vào đây: với app là `key`\n   * (`\"tasks\"`, `\"crm\"`), với workspace là `slug`. `name` vẫn là thứ trình đọc màn hình đọc lên.\n   */\n  seed?: string;\n  /** Icon vẽ ở giữa ô. Thiếu cả `icon` lẫn `src` thì ô vẫn vẽ, chỉ trống — không ném. */\n  icon?: IconAvatarIcon;\n  /** Ảnh tải lên. Có thì nó THẮNG `icon` — ảnh là thứ người dùng chủ động chọn cho đúng app này. */\n  src?: string | null;\n  size?: LetterAvatarSize;\n  /** Chọn tay một tone trong `AVATAR_TONE_NAMES`. Tên lạ hoặc bỏ trống → suy theo `name`. */\n  tone?: AvatarToneName | string | null;\n  /** `md` = vuông bo góc (mặc định, hình của một THỨ) · `full` = tròn (hình của NGƯỜI). */\n  rounded?: \"md\" | \"full\";\n}\n\nexport function IconAvatar({\n  name,\n  seed,\n  icon: Icon,\n  src,\n  size = \"md\",\n  tone,\n  rounded = \"md\",\n  className,\n  ...props\n}: IconAvatarProps) {\n  const toneClasses = (getAvatarToneByName(tone) ?? getAvatarTone(seed ?? name)).classes;\n\n  return (\n    <span\n      data-slot=\"icon-avatar\"\n      title={name}\n      className={cn(\n        \"relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden\",\n        rounded === \"full\" ? \"rounded-full\" : \"rounded-md\",\n        boxSizeClasses[size],\n        !src && toneClasses,\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        // Cùng lý do với `LetterAvatar`: gói dùng chung không phụ thuộc `next/*`.\n        // biome-ignore lint/performance/noImgElement: package dùng chung không phụ thuộc next/*\n        <img src={src} alt=\"\" className=\"size-full object-cover\" loading=\"lazy\" decoding=\"async\" />\n      ) : Icon ? (\n        <Icon className={iconSizeClasses[size]} />\n      ) : null}\n      {/* Tên cho trình đọc màn hình ở MỌI nhánh — icon là hình trang trí, ô màu không có chữ nào,\n          nên thiếu dòng này thì đây là một ô câm. Cùng khuôn với `LetterAvatar`. */}\n      <span className=\"sr-only\">{name}</span>\n    </span>\n  );\n}\n"],"mappings":"AAgHI,SAeI,KAfJ;AA/GJ,SAA8B,eAAe,2BAA2B;AACxE,SAAS,UAAU;AAkDnB,MAAM,kBAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,iBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAgCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,eAAe,oBAAoB,IAAI,KAAK,cAAc,QAAQ,IAAI,GAAG;AAE/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,QACT;AAAA,QACA,YAAY,SAAS,iBAAiB;AAAA,QACtC,eAAe,IAAI;AAAA,QACnB,CAAC,OAAO;AAAA,QACR;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA;AAAA;AAAA,UAGC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,SAAQ,QAAO,UAAS,SAAQ;AAAA,YACvF,OACF,oBAAC,QAAK,WAAW,gBAAgB,IAAI,GAAG,IACtC;AAAA,QAGJ,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA;AAAA;AAAA,EAClC;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { FilterChipItem, FilterChips, FilterChipsProps } from './components/comp
 export { FormField, FormFieldColSpan, FormFieldControlProps, FormFieldProps } from './components/composite/form-field.js';
 export { SELECT_EMPTY_VALUE, fromSelectValue, toSelectValue } from './components/composite/form-field-constants.js';
 export { FormSection, FormSectionAccent, FormSectionProps } from './components/composite/form-section.js';
+export { IconAvatar, IconAvatarIcon, IconAvatarProps } from './components/composite/icon-avatar.js';
 export { InlineEdit, InlineEditProps } from './components/composite/inline-edit.js';
 export { KeyboardHint, KeyboardHintProps, useIsMac } from './components/composite/keyboard-hint.js';
 export { LetterAvatar, LetterAvatarProps, LetterAvatarSize, getAvatarToneClasses } from './components/composite/letter-avatar.js';
@@ -79,9 +80,9 @@ export { Textarea, TextareaProps } from './components/ui/textarea.js';
 export { Toggle, ToggleProps, ToggleVariantProps, toggleVariants } from './components/ui/toggle.js';
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupVariantProps } from './components/ui/toggle-group.js';
 export { Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from './components/ui/tooltip.js';
+export { AVATAR_TONE_NAMES, AvatarToneColors, AvatarToneName, getAvatarToneIndex } from './lib/avatar-tone.js';
 export { cn } from './lib/cn.js';
 export { ThemeMode, accent, accentForeground, accentInk, ash, brandNeutral, chart, getAvatarToneColors, gold, highContrast, layout, semantic, status, typography } from './tokens.js';
-export { AvatarToneColors, getAvatarToneIndex } from './lib/avatar-tone.js';
 export { DateRange } from 'react-day-picker';
 import 'react';
 import 'date-fns';

package/dist/index.js

@@ -13,6 +13,7 @@ export * from "./components/composite/filter-chips.js";
 export * from "./components/composite/form-field.js";
 export * from "./components/composite/form-field-constants.js";
 export * from "./components/composite/form-section.js";
+import { IconAvatar } from "./components/composite/icon-avatar.js";
 export * from "./components/composite/inline-edit.js";
 export * from "./components/composite/keyboard-hint.js";
 import { getAvatarToneClasses, LetterAvatar } from "./components/composite/letter-avatar.js";
@@ -85,9 +86,12 @@ export * from "./components/ui/textarea.js";
 export * from "./components/ui/toggle.js";
 export * from "./components/ui/toggle-group.js";
 export * from "./components/ui/tooltip.js";
+import { AVATAR_TONE_NAMES } from "./lib/avatar-tone.js";
 export * from "./lib/cn.js";
 export * from "./tokens.js";
 export {
+  AVATAR_TONE_NAMES,
+  IconAvatar,
   LetterAvatar,
   getAvatarToneClasses,
   getVietnameseInitials,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Entry chính \"@comitor/ui\" — Tier 1 (primitive) + Tier 2 (composite) + lib + token.\n *\n * Quy tắc của entry này: **chỉ được phụ thuộc peer BẮT BUỘC** (react, react-dom,\n * lucide-react, tailwindcss). Không `next/*`, không `next-themes`, không `recharts`,\n * không `react-hook-form` — đó đều là peer OPTIONAL. Vì `tsup` chạy `bundle: false`\n * (ESM per-file), chỉ cần barrel này re-export một file có import optional peer là\n * mọi app import \"@comitor/ui\" đều buộc phải cài gói đó, nếu không bundler gãy ở\n * bước resolve. Vì vậy 3 nhánh dưới đây nằm ở entry riêng:\n *\n *   - Tier 3 shell (next/*, next-themes)  → \"@comitor/ui/shell\"\n *   - chart (recharts)                    → \"@comitor/ui/chart\"\n *   - binding react-hook-form             → \"@comitor/ui/form\"\n *\n * ⚠ Hai file trong `components/ui/` CỐ Ý không có mặt ở đây:\n *   - `form.tsx`   → xuất qua \"@comitor/ui/form\" (react-hook-form).\n *   - `sonner.tsx` → xuất qua \"@comitor/ui/shell\" dưới tên `SonnerToaster`\n *     (nó gọi `useTheme()` của next-themes). Bản dùng hằng ngày là composite\n *     `Toaster`/`toast` ở Tier 2 — không phụ thuộc next-themes, có sẵn ở entry này.\n *\n * ⚠ Mọi import nội bộ phải giữ đuôi `.js`: output là ESM per-file, Node ESM thuần\n * không tự suy ra phần mở rộng (bundler thì tha, Node thì không).\n */\n\n/*\n * ⚠ Sáu file `*-constants` bên dưới KHÔNG phải chỗ để gom code cho gọn — chúng là RANH GIỚI\n * SERVER/CLIENT. Component chủ (`command-palette.tsx`, `data-table.tsx`, `date-picker.tsx`,\n * `form-field.tsx`, `search-filter-bar.tsx`, `table-pagination.tsx`) đều mở đầu bằng `\"use client\"`,\n * mà mọi export của một module client đến tay Server Component dưới dạng client-reference proxy:\n * đọc ra `undefined`, KHÔNG throw, KHÔNG warning, trong khi TypeScript vẫn khai kiểu thật. Nhãn mặc\n * định / preset / sentinel là hằng dữ liệu thuần nên phải nằm ngoài ranh giới đó, và barrel này\n * phải xuất chúng THẲNG — re-export vòng qua file client là vô hiệu.\n * Cùng lý do với `chart/chart-colors.ts`; chi tiết ghi ở đầu file đó.\n * `scripts/verify-directives.mjs` canh không cho hằng thuần lọt ngược vào file client.\n */\n\n// ─── Tier 2 — composite (pattern lặp lại ở mọi app Comitor) ───\nexport * from \"./components/composite/avatar-group.js\";\nexport * from \"./components/composite/combobox.js\";\nexport * from \"./components/composite/command-palette.js\";\nexport * from \"./components/composite/command-palette-constants.js\";\nexport * from \"./components/composite/confirm-dialog.js\";\nexport * from \"./components/composite/copy-button.js\";\nexport * from \"./components/composite/data-table.js\";\nexport * from \"./components/composite/data-table-constants.js\";\nexport * from \"./components/composite/date-picker.js\";\nexport * from \"./components/composite/date-picker-constants.js\";\nexport * from \"./components/composite/empty-state.js\";\nexport * from \"./components/composite/filter-chips.js\";\nexport * from \"./components/composite/form-field.js\";\nexport * from \"./components/composite/form-field-constants.js\";\nexport * from \"./components/composite/form-section.js\";\nexport * from \"./components/composite/inline-edit.js\";\nexport * from \"./components/composite/keyboard-hint.js\";\nexport type { LetterAvatarProps, LetterAvatarSize } from \"./components/composite/letter-avatar.js\";\n// Xuất CHỌN LỌC (không `export *`): file này còn `AVATAR_TONES` nhập từ `lib/avatar-tone.js`\n// và các helper nội bộ khác. Liệt kê tường minh thì thêm helper riêng tư vào file KHÔNG tự động\n// biến nó thành API công khai — hàng rào mà `export *` không dựng được.\nexport { getAvatarToneClasses, LetterAvatar } from \"./components/composite/letter-avatar.js\";\nexport * from \"./components/composite/page-container.js\";\nexport * from \"./components/composite/page-header.js\";\nexport * from \"./components/composite/relative-time.js\";\nexport * from \"./components/composite/route-tabs.js\";\nexport * from \"./components/composite/search-filter-bar.js\";\nexport * from \"./components/composite/search-filter-bar-constants.js\";\nexport * from \"./components/composite/stat-card.js\";\nexport * from \"./components/composite/status-config.js\";\nexport * from \"./components/composite/status-pill.js\";\nexport * from \"./components/composite/table-pagination.js\";\nexport * from \"./components/composite/table-pagination-constants.js\";\n// Xuất CHỌN LỌC vì cùng lý do với `letter-avatar` ở trên: `text-utils.ts` là chỗ dễ bị thêm\n// helper nội bộ nhất của Tier 2 (0.1.0 từng rò `hashString`/`pickByString` ra API công khai\n// đúng theo đường này). Năm hàm dưới đây là hợp đồng, phần còn lại của file thì không.\nexport {\n  getVietnameseInitials,\n  matchesSearch,\n  normalizeVi,\n  removeVietnameseTones,\n  truncate\n} from \"./components/composite/text-utils.js\";\nexport * from \"./components/composite/toast.js\";\n// ─── Tier 1 — primitive (shadcn/ui \"new-york\", đã custom theo brand Comitor) ───\nexport * from \"./components/ui/accordion.js\";\nexport * from \"./components/ui/alert.js\";\nexport * from \"./components/ui/alert-dialog.js\";\nexport * from \"./components/ui/aspect-ratio.js\";\nexport * from \"./components/ui/avatar.js\";\nexport * from \"./components/ui/badge.js\";\nexport * from \"./components/ui/breadcrumb.js\";\nexport * from \"./components/ui/button.js\";\nexport * from \"./components/ui/button-group.js\";\nexport * from \"./components/ui/calendar.js\";\nexport * from \"./components/ui/card.js\";\nexport * from \"./components/ui/carousel.js\";\nexport * from \"./components/ui/checkbox.js\";\nexport * from \"./components/ui/collapsible.js\";\nexport * from \"./components/ui/command.js\";\nexport * from \"./components/ui/context-menu.js\";\nexport * from \"./components/ui/dialog.js\";\nexport * from \"./components/ui/drawer.js\";\nexport * from \"./components/ui/dropdown-menu.js\";\nexport * from \"./components/ui/empty.js\";\nexport * from \"./components/ui/field.js\";\nexport * from \"./components/ui/hover-card.js\";\nexport * from \"./components/ui/input.js\";\nexport * from \"./components/ui/input-group.js\";\nexport * from \"./components/ui/input-otp.js\";\nexport * from \"./components/ui/item.js\";\nexport * from \"./components/ui/kbd.js\";\nexport * from \"./components/ui/label.js\";\nexport * from \"./components/ui/menubar.js\";\nexport * from \"./components/ui/navigation-menu.js\";\nexport * from \"./components/ui/pagination.js\";\nexport * from \"./components/ui/popover.js\";\nexport * from \"./components/ui/progress.js\";\nexport * from \"./components/ui/radio-group.js\";\nexport * from \"./components/ui/resizable.js\";\nexport * from \"./components/ui/scroll-area.js\";\nexport * from \"./components/ui/select.js\";\nexport * from \"./components/ui/separator.js\";\nexport * from \"./components/ui/sheet.js\";\nexport * from \"./components/ui/skeleton.js\";\nexport * from \"./components/ui/slider.js\";\nexport * from \"./components/ui/spinner.js\";\nexport * from \"./components/ui/switch.js\";\nexport * from \"./components/ui/table.js\";\nexport * from \"./components/ui/tabs.js\";\n/* Bảng lớp của Tabs xuất THẲNG từ module thuần — `RouteTabs` và `Tabs` dùng chung nó, và hằng\n   dữ liệu đi vòng qua file \"use client\" sẽ thành proxy ở Server Component (CHANGELOG 0.2.2 §2). */\nexport * from \"./components/ui/tabs-variants.js\";\nexport * from \"./components/ui/textarea.js\";\nexport * from \"./components/ui/toggle.js\";\nexport * from \"./components/ui/toggle-group.js\";\nexport * from \"./components/ui/tooltip.js\";\n\n// ─── lib + token ───\nexport * from \"./lib/cn.js\";\nexport * from \"./tokens.js\";\n"],"mappings":"AAqCA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAKd,SAAS,sBAAsB,oBAAoB;AACnD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Entry chính \"@comitor/ui\" — Tier 1 (primitive) + Tier 2 (composite) + lib + token.\n *\n * Quy tắc của entry này: **chỉ được phụ thuộc peer BẮT BUỘC** (react, react-dom,\n * lucide-react, tailwindcss). Không `next/*`, không `next-themes`, không `recharts`,\n * không `react-hook-form` — đó đều là peer OPTIONAL. Vì `tsup` chạy `bundle: false`\n * (ESM per-file), chỉ cần barrel này re-export một file có import optional peer là\n * mọi app import \"@comitor/ui\" đều buộc phải cài gói đó, nếu không bundler gãy ở\n * bước resolve. Vì vậy 3 nhánh dưới đây nằm ở entry riêng:\n *\n *   - Tier 3 shell (next/*, next-themes)  → \"@comitor/ui/shell\"\n *   - chart (recharts)                    → \"@comitor/ui/chart\"\n *   - binding react-hook-form             → \"@comitor/ui/form\"\n *\n * ⚠ Hai file trong `components/ui/` CỐ Ý không có mặt ở đây:\n *   - `form.tsx`   → xuất qua \"@comitor/ui/form\" (react-hook-form).\n *   - `sonner.tsx` → xuất qua \"@comitor/ui/shell\" dưới tên `SonnerToaster`\n *     (nó gọi `useTheme()` của next-themes). Bản dùng hằng ngày là composite\n *     `Toaster`/`toast` ở Tier 2 — không phụ thuộc next-themes, có sẵn ở entry này.\n *\n * ⚠ Mọi import nội bộ phải giữ đuôi `.js`: output là ESM per-file, Node ESM thuần\n * không tự suy ra phần mở rộng (bundler thì tha, Node thì không).\n */\n\n/*\n * ⚠ Sáu file `*-constants` bên dưới KHÔNG phải chỗ để gom code cho gọn — chúng là RANH GIỚI\n * SERVER/CLIENT. Component chủ (`command-palette.tsx`, `data-table.tsx`, `date-picker.tsx`,\n * `form-field.tsx`, `search-filter-bar.tsx`, `table-pagination.tsx`) đều mở đầu bằng `\"use client\"`,\n * mà mọi export của một module client đến tay Server Component dưới dạng client-reference proxy:\n * đọc ra `undefined`, KHÔNG throw, KHÔNG warning, trong khi TypeScript vẫn khai kiểu thật. Nhãn mặc\n * định / preset / sentinel là hằng dữ liệu thuần nên phải nằm ngoài ranh giới đó, và barrel này\n * phải xuất chúng THẲNG — re-export vòng qua file client là vô hiệu.\n * Cùng lý do với `chart/chart-colors.ts`; chi tiết ghi ở đầu file đó.\n * `scripts/verify-directives.mjs` canh không cho hằng thuần lọt ngược vào file client.\n */\n\n// ─── Tier 2 — composite (pattern lặp lại ở mọi app Comitor) ───\nexport * from \"./components/composite/avatar-group.js\";\nexport * from \"./components/composite/combobox.js\";\nexport * from \"./components/composite/command-palette.js\";\nexport * from \"./components/composite/command-palette-constants.js\";\nexport * from \"./components/composite/confirm-dialog.js\";\nexport * from \"./components/composite/copy-button.js\";\nexport * from \"./components/composite/data-table.js\";\nexport * from \"./components/composite/data-table-constants.js\";\nexport * from \"./components/composite/date-picker.js\";\nexport * from \"./components/composite/date-picker-constants.js\";\nexport * from \"./components/composite/empty-state.js\";\nexport * from \"./components/composite/filter-chips.js\";\nexport * from \"./components/composite/form-field.js\";\nexport * from \"./components/composite/form-field-constants.js\";\nexport * from \"./components/composite/form-section.js\";\nexport { IconAvatar, type IconAvatarIcon, type IconAvatarProps } from \"./components/composite/icon-avatar.js\";\nexport * from \"./components/composite/inline-edit.js\";\nexport * from \"./components/composite/keyboard-hint.js\";\nexport type { LetterAvatarProps, LetterAvatarSize } from \"./components/composite/letter-avatar.js\";\n// Xuất CHỌN LỌC (không `export *`): file này còn `AVATAR_TONES` nhập từ `lib/avatar-tone.js`\n// và các helper nội bộ khác. Liệt kê tường minh thì thêm helper riêng tư vào file KHÔNG tự động\n// biến nó thành API công khai — hàng rào mà `export *` không dựng được.\nexport { getAvatarToneClasses, LetterAvatar } from \"./components/composite/letter-avatar.js\";\nexport * from \"./components/composite/page-container.js\";\nexport * from \"./components/composite/page-header.js\";\nexport * from \"./components/composite/relative-time.js\";\nexport * from \"./components/composite/route-tabs.js\";\nexport * from \"./components/composite/search-filter-bar.js\";\nexport * from \"./components/composite/search-filter-bar-constants.js\";\nexport * from \"./components/composite/stat-card.js\";\nexport * from \"./components/composite/status-config.js\";\nexport * from \"./components/composite/status-pill.js\";\nexport * from \"./components/composite/table-pagination.js\";\nexport * from \"./components/composite/table-pagination-constants.js\";\n// Xuất CHỌN LỌC vì cùng lý do với `letter-avatar` ở trên: `text-utils.ts` là chỗ dễ bị thêm\n// helper nội bộ nhất của Tier 2 (0.1.0 từng rò `hashString`/`pickByString` ra API công khai\n// đúng theo đường này). Năm hàm dưới đây là hợp đồng, phần còn lại của file thì không.\nexport {\n  getVietnameseInitials,\n  matchesSearch,\n  normalizeVi,\n  removeVietnameseTones,\n  truncate\n} from \"./components/composite/text-utils.js\";\nexport * from \"./components/composite/toast.js\";\n// ─── Tier 1 — primitive (shadcn/ui \"new-york\", đã custom theo brand Comitor) ───\nexport * from \"./components/ui/accordion.js\";\nexport * from \"./components/ui/alert.js\";\nexport * from \"./components/ui/alert-dialog.js\";\nexport * from \"./components/ui/aspect-ratio.js\";\nexport * from \"./components/ui/avatar.js\";\nexport * from \"./components/ui/badge.js\";\nexport * from \"./components/ui/breadcrumb.js\";\nexport * from \"./components/ui/button.js\";\nexport * from \"./components/ui/button-group.js\";\nexport * from \"./components/ui/calendar.js\";\nexport * from \"./components/ui/card.js\";\nexport * from \"./components/ui/carousel.js\";\nexport * from \"./components/ui/checkbox.js\";\nexport * from \"./components/ui/collapsible.js\";\nexport * from \"./components/ui/command.js\";\nexport * from \"./components/ui/context-menu.js\";\nexport * from \"./components/ui/dialog.js\";\nexport * from \"./components/ui/drawer.js\";\nexport * from \"./components/ui/dropdown-menu.js\";\nexport * from \"./components/ui/empty.js\";\nexport * from \"./components/ui/field.js\";\nexport * from \"./components/ui/hover-card.js\";\nexport * from \"./components/ui/input.js\";\nexport * from \"./components/ui/input-group.js\";\nexport * from \"./components/ui/input-otp.js\";\nexport * from \"./components/ui/item.js\";\nexport * from \"./components/ui/kbd.js\";\nexport * from \"./components/ui/label.js\";\nexport * from \"./components/ui/menubar.js\";\nexport * from \"./components/ui/navigation-menu.js\";\nexport * from \"./components/ui/pagination.js\";\nexport * from \"./components/ui/popover.js\";\nexport * from \"./components/ui/progress.js\";\nexport * from \"./components/ui/radio-group.js\";\nexport * from \"./components/ui/resizable.js\";\nexport * from \"./components/ui/scroll-area.js\";\nexport * from \"./components/ui/select.js\";\nexport * from \"./components/ui/separator.js\";\nexport * from \"./components/ui/sheet.js\";\nexport * from \"./components/ui/skeleton.js\";\nexport * from \"./components/ui/slider.js\";\nexport * from \"./components/ui/spinner.js\";\nexport * from \"./components/ui/switch.js\";\nexport * from \"./components/ui/table.js\";\nexport * from \"./components/ui/tabs.js\";\n/* Bảng lớp của Tabs xuất THẲNG từ module thuần — `RouteTabs` và `Tabs` dùng chung nó, và hằng\n   dữ liệu đi vòng qua file \"use client\" sẽ thành proxy ở Server Component (CHANGELOG 0.2.2 §2). */\nexport * from \"./components/ui/tabs-variants.js\";\nexport * from \"./components/ui/textarea.js\";\nexport * from \"./components/ui/toggle.js\";\nexport * from \"./components/ui/toggle-group.js\";\nexport * from \"./components/ui/tooltip.js\";\n/*\n * `IconAvatar` — em ruột của `LetterAvatar`, dùng chung bảng tone. Xuất kèm `AVATAR_TONE_NAMES`\n * và kiểu `AvatarToneName` vì prop `tone` chỉ có nghĩa khi chỗ gọi liệt kê được tập chọn (màn\n * quản trị cần dựng một `<Select>` từ đúng tập đó).\n *\n * ⚠ KHÔNG xuất `AVATAR_TONES` lẫn `getAvatarToneIndex` ra entry này: bảng thô và hàm băm vẫn là\n * nội bộ, đúng như `lib/avatar-tone.ts` dặn — xuất chúng là mời app dựng lại phép chọn tone của\n * riêng nó, tức cùng một tên ra hai màu.\n */\nexport { AVATAR_TONE_NAMES, type AvatarToneName } from \"./lib/avatar-tone.js\";\n\n// ─── lib + token ───\nexport * from \"./lib/cn.js\";\nexport * from \"./tokens.js\";\n"],"mappings":"AAqCA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,kBAA6D;AACtE,cAAc;AACd,cAAc;AAKd,SAAS,sBAAsB,oBAAoB;AACnD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,cAAc;AAEd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAUd,SAAS,yBAA8C;AAGvD,cAAc;AACd,cAAc;","names":[]}

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

@@ -69,6 +69,15 @@ interface AvatarTonePalette {
     card: string;
 }
 interface AvatarTone {
+    /**
+     * 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.
+     *
+     * ⚠ 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
+     * `comitor-account`) và vào prop `tone` của `IconAvatar`. Đổi tên một tone là làm mọi hàng đã
+     * 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.
+     * Thêm tone thì thêm tên mới; đừng đổi tên cũ.
+     */
+    readonly name: AvatarToneName;
     /** Vai trò DOM: chuỗi class token tĩnh (kèm biến thể `dark:`). */
     readonly classes: string;
     /** Vai trò canvas/email/PDF: đúng những gì `classes` nói, tính ra hex đục ở light. */
@@ -111,6 +120,15 @@ interface AvatarTone {
  * 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
  * ngay bên dưới (`p.accentInk.teal`) — soi hai vế cạnh nhau là thấy lệch ngay.
  */
+/**
+ * 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
+ * đượ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.
+ *
+ * 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"];
+type AvatarToneName = (typeof AVATAR_TONE_NAMES)[number];
 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.
@@ -122,5 +140,13 @@ declare const AVATAR_TONES: AvatarToneTable<AvatarTone>;
 declare function getAvatarToneIndex(name: string): number;
 /** Tone (cả class lẫn công thức hex) ứng với một tên. */
 declare function getAvatarTone(name: string): AvatarTone;
+/**
+ * Tone theo TÊN — cửa cho chỗ dùng chọn tay một màu.
+ *
+ * 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.
+ */
+declare function getAvatarToneByName(name: string | null | undefined): AvatarTone | undefined;
 
-export { AVATAR_TONES, type AvatarToneColors, type AvatarTonePalette, getAvatarTone, getAvatarToneIndex };
+export { AVATAR_TONES, AVATAR_TONE_NAMES, type AvatarToneColors, type AvatarToneName, type AvatarTonePalette, getAvatarTone, getAvatarToneByName, getAvatarToneIndex };

package/dist/lib/avatar-tone.js

@@ -3,44 +3,53 @@ 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_TONES = [
   {
+    name: "gold",
     classes: "bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100",
     light: (p) => ({ background: p.gold[100], foreground: p.gold[600] }),
     dark: (p) => ({ background: tintOver(p.gold[500], p.card, 0.3), foreground: p.gold[100] })
   },
   {
+    name: "teal",
     classes: "bg-teal/15 text-teal-ink",
     light: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal }),
     dark: (p) => ({ background: tintOver(p.accent.teal, p.card, 0.15), foreground: p.accentInk.teal })
   },
   {
+    name: "green",
     classes: "bg-green/15 text-green-ink",
     light: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green }),
     dark: (p) => ({ background: tintOver(p.accent.green, p.card, 0.15), foreground: p.accentInk.green })
   },
   {
+    name: "red",
     classes: "bg-red/15 text-red-ink",
     light: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red }),
     dark: (p) => ({ background: tintOver(p.accent.red, p.card, 0.15), foreground: p.accentInk.red })
   },
   {
+    name: "yellow",
     classes: "bg-yellow/25 text-yellow-ink dark:bg-yellow/20",
     light: (p) => ({ background: tintOver(p.accent.yellow, p.card, 0.25), foreground: p.accentInk.yellow }),
     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 })
   },
   {
+    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: "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 })
@@ -60,9 +69,15 @@ function getAvatarToneIndex(name) {
 function getAvatarTone(name) {
   return AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];
 }
+function getAvatarToneByName(name) {
+  if (!name) return void 0;
+  return AVATAR_TONES.find((tone) => tone.name === name);
+}
 export {
   AVATAR_TONES,
+  AVATAR_TONE_NAMES,
   getAvatarTone,
+  getAvatarToneByName,
   getAvatarToneIndex
 };
 //# sourceMappingURL=avatar-tone.js.map

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  /** 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 */\nexport const AVATAR_TONES: AvatarToneTable<AvatarTone> = [\n  {\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    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    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    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    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    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    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    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"],"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/** Đú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":[]}

package/dist/shell/app-launcher.js

@@ -2,13 +2,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { LayoutGrid, Lock } from "lucide-react";
 import { useRef } from "react";
+import { IconAvatar } from "../components/composite/icon-avatar.js";
 import { Badge } from "../components/ui/badge.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
 import { cn } from "../lib/cn.js";
 import { useShell } from "./shell-context.js";
 import { ShellNavLink } from "./shell-link.js";
-import { appAccentStyle, getEntitledApps, getLockedApps } from "./utils.js";
+import { getEntitledApps, getLockedApps } from "./utils.js";
 const TILE_ATTR = "data-app-tile";
 function AppLauncherPanel({ variant = "grid", className, onSelected }) {
   const { apps, currentApp, onAppSelect, onUpsell, labels } = useShell();
@@ -47,21 +48,20 @@ function AppLauncherPanel({ variant = "grid", className, onSelected }) {
       isCurrent && "bg-accent"
     );
     const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cn(
-            "relative flex shrink-0 items-center justify-center rounded-md",
-            variant === "grid" ? "size-9" : "size-8",
-            isLocked ? "bg-muted text-muted-foreground" : "bg-app-accent text-app-accent-foreground"
-          ),
-          style: appAccentStyle(app),
-          children: [
-            /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
-            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: "relative flex shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          IconAvatar,
+          {
+            name: app.name,
+            seed: app.id,
+            icon: Icon,
+            tone: app.tone,
+            size: variant === "grid" ? "md" : "sm",
+            className: cn(isLocked && "bg-muted text-muted-foreground")
+          }
+        ),
+        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(

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 { 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 { appAccentStyle, 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 kiểu Lark/Google Workspace; \"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        {/* Ô icon tô ĐẶC bằng `--app-accent` + chữ `--app-accent-foreground`, KHÔNG phải\n            `bg-app-accent/15 text-app-accent`: accent mặc định là gold #E8B824, icon vàng trên\n            nền vàng 15% (đã trộn ra #FCF4DE) chỉ được 1,69:1 — dưới xa mức 3:1 mà WCAG 1.4.11\n            đòi cho icon. Nền đặc thì icon là mực trên vàng = 10,19:1 ✓ và ô app vẫn giữ đúng\n            màu riêng của từng app. Cùng cách xử lý với `FilterChips` (chip đang bật). */}\n        <span\n          className={cn(\n            \"relative flex shrink-0 items-center justify-center rounded-md\",\n            variant === \"grid\" ? \"size-9\" : \"size-8\",\n            isLocked ? \"bg-muted text-muted-foreground\" : \"bg-app-accent text-app-accent-foreground\"\n          )}\n          style={appAccentStyle(app)}\n        >\n          <Icon className=\"size-4\" />\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 (kiểu Lark / Google Workspace) 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 kiểu Lark/Google Workspace; \"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 (kiểu Lark / Google Workspace) 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":[]}

package/dist/shell/sidebar.js

@@ -64,12 +64,12 @@ function Sidebar({
                     onClick: toggleSidebar,
                     "aria-label": sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar,
                     className: cn(
-                      "flex items-center gap-2 rounded-md text-sidebar-foreground/60",
+                      "group flex items-center gap-2 rounded-md text-sidebar-foreground/60",
                       "transition-colors duration-150 ease-out hover:bg-sidebar-accent hover:text-sidebar-foreground",
                       sidebarCollapsed ? "size-9 justify-center" : "h-8 w-full px-2 text-xs"
                     ),
-                    children: sidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" }),
+                    children: sidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 text-muted-foreground group-hover:text-sidebar-foreground" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4 text-muted-foreground group-hover:text-sidebar-foreground" }),
                       /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapseSidebarShort })
                     ] })
                   }

package/dist/shell/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { SidebarGroup } from \"./sidebar-group.js\";\nimport { appAccentStyle, flattenNavItems } from \"./utils.js\";\nimport { WorkspaceSwitcher } from \"./workspace-switcher.js\";\n\nexport interface SidebarProps {\n  className?: string;\n  /** Slot ngay dưới WorkspaceSwitcher (vd nút \"Tạo mới\", ô tìm nhanh). */\n  header?: ReactNode;\n  /** Slot đáy sidebar (dung lượng gói, \"Mời thành viên\", phiên bản app…). */\n  footer?: ReactNode;\n  /** Ẩn WorkspaceSwitcher ở đỉnh — dùng khi app đặt bộ chuyển workspace ở header. */\n  showWorkspaceSwitcher?: boolean;\n  /** Ẩn nút thu gọn ở đáy (khi header đã có nút này). */\n  showCollapseButton?: boolean;\n}\n\n/**\n * Sidebar desktop: 256px (`--sidebar-width`) / 56px khi thu gọn (`--sidebar-width-icon`).\n * Đỉnh: `WorkspaceSwitcher` (trục 1). Giữa: menu của app hiện tại. Đáy: slot footer.\n *\n * Ẩn hẳn dưới `md` — màn hình hẹp dùng `MobileMenu`.\n *\n * KHÔNG dùng `ui/sidebar.tsx` của shadcn (spec §7.6): primitive đó quản state bằng\n * cookie + provider riêng, sẽ thành nguồn sự thật thứ hai bên cạnh `ShellProvider`.\n */\nexport function Sidebar({\n  className,\n  header,\n  footer,\n  showWorkspaceSwitcher = true,\n  showCollapseButton = true\n}: SidebarProps) {\n  const { nav, currentApp, workspaces, sidebarCollapsed, toggleSidebar, labels } = useShell();\n\n  // Đối chiếu khớp chính xác trên TOÀN BỘ mục của app, không chỉ mục cùng nhóm:\n  // \"/tasks\" nằm nhóm A và \"/tasks/inbox\" nhóm B thì vẫn phải sáng đúng một mục.\n  const allItems = flattenNavItems(nav);\n\n  return (\n    <aside\n      data-collapsed={sidebarCollapsed || undefined}\n      style={appAccentStyle(currentApp)}\n      className={cn(\n        \"hidden shrink-0 flex-col border-r border-sidebar-border bg-sidebar md:flex\",\n        \"transition-[width] duration-200 ease-out\",\n        sidebarCollapsed ? \"w-sidebar-icon\" : \"w-sidebar\",\n        className\n      )}\n    >\n      {/* Không có workspace nào (app đơn tổ chức) thì bỏ hẳn dải đỉnh, không để lại ô trống. */}\n      {showWorkspaceSwitcher && workspaces.length > 0 ? (\n        <div\n          className={cn(\n            \"flex h-header shrink-0 items-center border-b border-sidebar-border\",\n            sidebarCollapsed ? \"justify-center px-1\" : \"px-2\"\n          )}\n        >\n          <WorkspaceSwitcher collapsed={sidebarCollapsed} />\n        </div>\n      ) : null}\n\n      {header ? <div className={cn(\"shrink-0\", sidebarCollapsed ? \"px-1.5 pt-2\" : \"px-2 pt-2\")}>{header}</div> : null}\n\n      <nav\n        aria-label={labels.navigationLabel}\n        className={cn(\"flex-1 overflow-y-auto scrollbar-thin py-3\", sidebarCollapsed ? \"px-1.5\" : \"px-2\")}\n      >\n        <div className={cn(\"flex flex-col\", sidebarCollapsed ? \"gap-2\" : \"gap-4\")}>\n          {nav.map((group) => (\n            <SidebarGroup key={group.id} group={group} collapsed={sidebarCollapsed} siblings={allItems} />\n          ))}\n        </div>\n      </nav>\n\n      {footer || showCollapseButton ? (\n        <div\n          className={cn(\n            \"shrink-0 border-t border-sidebar-border\",\n            sidebarCollapsed ? \"flex flex-col items-center gap-1 p-1.5\" : \"p-2\"\n          )}\n        >\n          {!sidebarCollapsed && footer ? <div className=\"mb-1\">{footer}</div> : null}\n\n          {showCollapseButton ? (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  type=\"button\"\n                  onClick={toggleSidebar}\n                  aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n                  className={cn(\n                    \"flex items-center gap-2 rounded-md text-sidebar-foreground/60\",\n                    \"transition-colors duration-150 ease-out hover:bg-sidebar-accent hover:text-sidebar-foreground\",\n                    sidebarCollapsed ? \"size-9 justify-center\" : \"h-8 w-full px-2 text-xs\"\n                  )}\n                >\n                  {sidebarCollapsed ? (\n                    <PanelLeftOpen className=\"size-4\" />\n                  ) : (\n                    <>\n                      <PanelLeftClose className=\"size-4\" />\n                      {/* Chữ NHÌN THẤY dùng bản ngắn; `aria-label` và tooltip ở trên vẫn giữ bản\n                          dài. Xem hợp đồng của `collapseSidebarShort` trong types.ts. */}\n                      <span className=\"truncate\">{labels.collapseSidebarShort}</span>\n                    </>\n                  )}\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">\n                {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · Ctrl/⌘ + B\n              </TooltipContent>\n            </Tooltip>\n          ) : null}\n        </div>\n      ) : null}\n    </aside>\n  );\n}\n"],"mappings":";AAgEU,SA0CU,UA1CV,KA0CU,YA1CV;AA9DV,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,yBAAyB;AAuB3B,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,qBAAqB;AACvB,GAAiB;AACf,QAAM,EAAE,KAAK,YAAY,YAAY,kBAAkB,eAAe,OAAO,IAAI,SAAS;AAI1F,QAAM,WAAW,gBAAgB,GAAG;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,kBAAgB,oBAAoB;AAAA,MACpC,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,mBAAmB,mBAAmB;AAAA,QACtC;AAAA,MACF;AAAA,MAGC;AAAA,iCAAyB,WAAW,SAAS,IAC5C;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,mBAAmB,wBAAwB;AAAA,YAC7C;AAAA,YAEA,8BAAC,qBAAkB,WAAW,kBAAkB;AAAA;AAAA,QAClD,IACE;AAAA,QAEH,SAAS,oBAAC,SAAI,WAAW,GAAG,YAAY,mBAAmB,gBAAgB,WAAW,GAAI,kBAAO,IAAS;AAAA,QAE3G;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,OAAO;AAAA,YACnB,WAAW,GAAG,8CAA8C,mBAAmB,WAAW,MAAM;AAAA,YAEhG,8BAAC,SAAI,WAAW,GAAG,iBAAiB,mBAAmB,UAAU,OAAO,GACrE,cAAI,IAAI,CAAC,UACR,oBAAC,gBAA4B,OAAc,WAAW,kBAAkB,UAAU,YAA/D,MAAM,EAAmE,CAC7F,GACH;AAAA;AAAA,QACF;AAAA,QAEC,UAAU,qBACT;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,mBAAmB,2CAA2C;AAAA,YAChE;AAAA,YAEC;AAAA,eAAC,oBAAoB,SAAS,oBAAC,SAAI,WAAU,QAAQ,kBAAO,IAAS;AAAA,cAErE,qBACC,qBAAC,WACC;AAAA,oCAAC,kBAAe,SAAO,MACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY,mBAAmB,OAAO,gBAAgB,OAAO;AAAA,oBAC7D,WAAW;AAAA,sBACT;AAAA,sBACA;AAAA,sBACA,mBAAmB,0BAA0B;AAAA,oBAC/C;AAAA,oBAEC,6BACC,oBAAC,iBAAc,WAAU,UAAS,IAElC,iCACE;AAAA,0CAAC,kBAAe,WAAU,UAAS;AAAA,sBAGnC,oBAAC,UAAK,WAAU,YAAY,iBAAO,sBAAqB;AAAA,uBAC1D;AAAA;AAAA,gBAEJ,GACF;AAAA,gBACA,qBAAC,kBAAe,MAAK,SAClB;AAAA,qCAAmB,OAAO,gBAAgB,OAAO;AAAA,kBAAgB;AAAA,mBACpE;AAAA,iBACF,IACE;AAAA;AAAA;AAAA,QACN,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { SidebarGroup } from \"./sidebar-group.js\";\nimport { appAccentStyle, flattenNavItems } from \"./utils.js\";\nimport { WorkspaceSwitcher } from \"./workspace-switcher.js\";\n\nexport interface SidebarProps {\n  className?: string;\n  /** Slot ngay dưới WorkspaceSwitcher (vd nút \"Tạo mới\", ô tìm nhanh). */\n  header?: ReactNode;\n  /** Slot đáy sidebar (dung lượng gói, \"Mời thành viên\", phiên bản app…). */\n  footer?: ReactNode;\n  /** Ẩn WorkspaceSwitcher ở đỉnh — dùng khi app đặt bộ chuyển workspace ở header. */\n  showWorkspaceSwitcher?: boolean;\n  /** Ẩn nút thu gọn ở đáy (khi header đã có nút này). */\n  showCollapseButton?: boolean;\n}\n\n/**\n * Sidebar desktop: 256px (`--sidebar-width`) / 56px khi thu gọn (`--sidebar-width-icon`).\n * Đỉnh: `WorkspaceSwitcher` (trục 1). Giữa: menu của app hiện tại. Đáy: slot footer.\n *\n * Ẩn hẳn dưới `md` — màn hình hẹp dùng `MobileMenu`.\n *\n * KHÔNG dùng `ui/sidebar.tsx` của shadcn (spec §7.6): primitive đó quản state bằng\n * cookie + provider riêng, sẽ thành nguồn sự thật thứ hai bên cạnh `ShellProvider`.\n */\nexport function Sidebar({\n  className,\n  header,\n  footer,\n  showWorkspaceSwitcher = true,\n  showCollapseButton = true\n}: SidebarProps) {\n  const { nav, currentApp, workspaces, sidebarCollapsed, toggleSidebar, labels } = useShell();\n\n  // Đối chiếu khớp chính xác trên TOÀN BỘ mục của app, không chỉ mục cùng nhóm:\n  // \"/tasks\" nằm nhóm A và \"/tasks/inbox\" nhóm B thì vẫn phải sáng đúng một mục.\n  const allItems = flattenNavItems(nav);\n\n  return (\n    <aside\n      data-collapsed={sidebarCollapsed || undefined}\n      style={appAccentStyle(currentApp)}\n      className={cn(\n        \"hidden shrink-0 flex-col border-r border-sidebar-border bg-sidebar md:flex\",\n        \"transition-[width] duration-200 ease-out\",\n        sidebarCollapsed ? \"w-sidebar-icon\" : \"w-sidebar\",\n        className\n      )}\n    >\n      {/* Không có workspace nào (app đơn tổ chức) thì bỏ hẳn dải đỉnh, không để lại ô trống. */}\n      {showWorkspaceSwitcher && workspaces.length > 0 ? (\n        <div\n          className={cn(\n            \"flex h-header shrink-0 items-center border-b border-sidebar-border\",\n            sidebarCollapsed ? \"justify-center px-1\" : \"px-2\"\n          )}\n        >\n          <WorkspaceSwitcher collapsed={sidebarCollapsed} />\n        </div>\n      ) : null}\n\n      {header ? <div className={cn(\"shrink-0\", sidebarCollapsed ? \"px-1.5 pt-2\" : \"px-2 pt-2\")}>{header}</div> : null}\n\n      <nav\n        aria-label={labels.navigationLabel}\n        className={cn(\"flex-1 overflow-y-auto scrollbar-thin py-3\", sidebarCollapsed ? \"px-1.5\" : \"px-2\")}\n      >\n        <div className={cn(\"flex flex-col\", sidebarCollapsed ? \"gap-2\" : \"gap-4\")}>\n          {nav.map((group) => (\n            <SidebarGroup key={group.id} group={group} collapsed={sidebarCollapsed} siblings={allItems} />\n          ))}\n        </div>\n      </nav>\n\n      {footer || showCollapseButton ? (\n        <div\n          className={cn(\n            \"shrink-0 border-t border-sidebar-border\",\n            sidebarCollapsed ? \"flex flex-col items-center gap-1 p-1.5\" : \"p-2\"\n          )}\n        >\n          {!sidebarCollapsed && footer ? <div className=\"mb-1\">{footer}</div> : null}\n\n          {showCollapseButton ? (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  type=\"button\"\n                  onClick={toggleSidebar}\n                  aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n                  /*\n                   * ⚠ Màu của NÚT giữ nguyên `/60`, còn ICON được tô riêng bằng token ĐẶC. Hai\n                   * thứ khác nhau ở đây là CỐ Ý, và đây là chỗ duy nhất trong shell phải tách:\n                   *\n                   * · nút này chứa CẢ CHỮ khi mở rộng (`text-xs`, nhãn \"Thu gọn\"), nên màu của nó\n                   *   chịu ngưỡng VĂN BẢN 4,5:1. `/60` phẳng ra `#6C6E71` = **4,90:1** ✓, còn\n                   *   `--muted-foreground` chỉ **3,67:1** ✗ — đổi màu cả nút là làm rớt AA đúng\n                   *   cái nhãn đang đạt.\n                   * · nhưng `/60` là màu có ALPHA, mà icon lấy màu qua `currentColor` — nét cắt\n                   *   nhau sẽ bị tô hai lần và lộ vệt nối (xem `docs/hop-dong-mau.md` §7b, ca KẾ\n                   *   THỪA). Icon chỉ chịu ngưỡng 3:1 nên `--muted-foreground` đủ cho nó.\n                   *\n                   * `group` + `group-hover:` là cái giá của việc tách: icon có màu riêng thì\n                   * `hover:text-sidebar-foreground` của nút không với tới nó nữa.\n                   */\n                  className={cn(\n                    \"group flex items-center gap-2 rounded-md text-sidebar-foreground/60\",\n                    \"transition-colors duration-150 ease-out hover:bg-sidebar-accent hover:text-sidebar-foreground\",\n                    sidebarCollapsed ? \"size-9 justify-center\" : \"h-8 w-full px-2 text-xs\"\n                  )}\n                >\n                  {sidebarCollapsed ? (\n                    <PanelLeftOpen className=\"size-4 text-muted-foreground group-hover:text-sidebar-foreground\" />\n                  ) : (\n                    <>\n                      <PanelLeftClose className=\"size-4 text-muted-foreground group-hover:text-sidebar-foreground\" />\n                      {/* Chữ NHÌN THẤY dùng bản ngắn; `aria-label` và tooltip ở trên vẫn giữ bản\n                          dài. Xem hợp đồng của `collapseSidebarShort` trong types.ts. */}\n                      <span className=\"truncate\">{labels.collapseSidebarShort}</span>\n                    </>\n                  )}\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">\n                {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · Ctrl/⌘ + B\n              </TooltipContent>\n            </Tooltip>\n          ) : null}\n        </div>\n      ) : null}\n    </aside>\n  );\n}\n"],"mappings":";AAgEU,SAyDU,UAzDV,KAyDU,YAzDV;AA9DV,SAAS,gBAAgB,qBAAqB;AAE9C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,yBAAyB;AAuB3B,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,qBAAqB;AACvB,GAAiB;AACf,QAAM,EAAE,KAAK,YAAY,YAAY,kBAAkB,eAAe,OAAO,IAAI,SAAS;AAI1F,QAAM,WAAW,gBAAgB,GAAG;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,kBAAgB,oBAAoB;AAAA,MACpC,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,mBAAmB,mBAAmB;AAAA,QACtC;AAAA,MACF;AAAA,MAGC;AAAA,iCAAyB,WAAW,SAAS,IAC5C;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,mBAAmB,wBAAwB;AAAA,YAC7C;AAAA,YAEA,8BAAC,qBAAkB,WAAW,kBAAkB;AAAA;AAAA,QAClD,IACE;AAAA,QAEH,SAAS,oBAAC,SAAI,WAAW,GAAG,YAAY,mBAAmB,gBAAgB,WAAW,GAAI,kBAAO,IAAS;AAAA,QAE3G;AAAA,UAAC;AAAA;AAAA,YACC,cAAY,OAAO;AAAA,YACnB,WAAW,GAAG,8CAA8C,mBAAmB,WAAW,MAAM;AAAA,YAEhG,8BAAC,SAAI,WAAW,GAAG,iBAAiB,mBAAmB,UAAU,OAAO,GACrE,cAAI,IAAI,CAAC,UACR,oBAAC,gBAA4B,OAAc,WAAW,kBAAkB,UAAU,YAA/D,MAAM,EAAmE,CAC7F,GACH;AAAA;AAAA,QACF;AAAA,QAEC,UAAU,qBACT;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,mBAAmB,2CAA2C;AAAA,YAChE;AAAA,YAEC;AAAA,eAAC,oBAAoB,SAAS,oBAAC,SAAI,WAAU,QAAQ,kBAAO,IAAS;AAAA,cAErE,qBACC,qBAAC,WACC;AAAA,oCAAC,kBAAe,SAAO,MACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY,mBAAmB,OAAO,gBAAgB,OAAO;AAAA,oBAgB7D,WAAW;AAAA,sBACT;AAAA,sBACA;AAAA,sBACA,mBAAmB,0BAA0B;AAAA,oBAC/C;AAAA,oBAEC,6BACC,oBAAC,iBAAc,WAAU,oEAAmE,IAE5F,iCACE;AAAA,0CAAC,kBAAe,WAAU,oEAAmE;AAAA,sBAG7F,oBAAC,UAAK,WAAU,YAAY,iBAAO,sBAAqB;AAAA,uBAC1D;AAAA;AAAA,gBAEJ,GACF;AAAA,gBACA,qBAAC,kBAAe,MAAK,SAClB;AAAA,qCAAmB,OAAO,gBAAgB,OAAO;AAAA,kBAAgB;AAAA,mBACpE;AAAA,iBACF,IACE;AAAA;AAAA;AAAA,QACN,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/shell/types.d.ts

@@ -44,6 +44,16 @@ interface AppDescriptor {
     description?: string;
     icon: ShellIcon;
     href: string;
+    /**
+     * Tone màu định danh — MỘT tên trong `AVATAR_TONE_NAMES` của `@comitor/ui`.
+     *
+     * 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
+     * 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.
+     *
+     * ⚠ 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
+     * được 4/6 app đổi màu khi chuyển vi ⇄ en nếu băm theo tên. Xem `IconAvatar` prop `seed`.
+     */
+    tone?: string;
     /**
      * Màu nhấn riêng của app — bất kỳ giá trị màu CSS hợp lệ (nên là `var(--…)`).
      * Shell gán vào biến `--app-accent` bằng inline style, KHÔNG sinh class động.
@@ -52,8 +62,10 @@ interface AppDescriptor {
      * (và `accentForeground` nếu nền đặc của bạn không mang được mực) — xem
      * `docs/hop-dong-mau.md` §5.
      */
+    /** @deprecated Từ 1.10.0 `AppLauncher` KHÔNG đọc prop này nữa — dùng `tone`. Xem ghi chú trên. */
     accent?: string;
     /** Màu chữ/icon nằm TRÊN nền `--app-accent` ĐẶC; mặc định giữ `--app-accent-foreground` của theme. */
+    /** @deprecated Từ 1.10.0 — dùng `tone`. */
     accentForeground?: string;
     /**
      * 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)
@@ -66,6 +78,7 @@ interface AppDescriptor {
      * **6,24:1** trên `--sidebar`, **5,96:1** trên `--sidebar-accent`. Bỏ trống trường này mà
      * vẫn đổi `accent` thì mọi chỗ dùng `text-app-accent-ink` giữ nguyên gold — sai màu app.
      */
+    /** @deprecated Từ 1.10.0 — dùng `tone`. */
     accentInk?: string;
     /** `false` = workspace chưa bật/chưa mua → hiện khoá và gọi `onUpsell` thay vì điều hướng. */
     entitled?: boolean;

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\";\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ị (mặc định tiếng Việt). */\n  name: string;\n  description?: string;\n  icon: ShellIcon;\n  href: 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  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  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  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 (Linear-style: 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 — app tiếng Anh (hoặc ngôn ngữ khác) override\n * từng khoá qua prop `labels`. Mặc định là tiếng Việt.\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 Thu gọn\" sẽ không khớp tên truy cập. \"Thu gọn\" ⊂ \"Thu gọn thanh bên\" ✓ — giữ quan hệ đó\n   * 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ự tiếng Việt vào mọi bản dịch. Cùng khuôn với `range`/`pageStatus` của\n   * `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  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}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_SHELL_LABELS: ShellLabels = {\n  collapseSidebar: \"Thu gọn thanh bên\",\n  collapseSidebarShort: \"Thu gọn\",\n  expandSidebar: \"Mở rộng thanh bên\",\n  openMenu: \"Mở menu\",\n  closeMenu: \"Đóng menu\",\n  search: \"Tìm kiếm\",\n  searchPlaceholder: \"Tìm kiếm…\",\n  notifications: \"Thông báo\",\n  navigationLabel: \"Điều hướng chính\",\n  workspace: \"Không gian làm việc\",\n  workspaceSwitcherLabel: \"Đổi không gian làm việc\",\n  workspaceSearchPlaceholder: \"Tìm không gian làm việc…\",\n  workspaceEmpty: \"Không tìm thấy không gian làm việc\",\n  createWorkspace: \"Tạo không gian làm việc\",\n  workspaceSettings: \"Cài đặt không gian làm việc\",\n  inviteMembers: \"Mời thành viên\",\n  members: (count) => `${count} thành viên`,\n  apps: \"Ứng dụng\",\n  appLauncherLabel: \"Mở danh sách ứng dụng\",\n  myApps: \"Ứng dụng của bạn\",\n  discoverApps: \"Khám phá thêm\",\n  locked: \"Chưa mở khoá\",\n  lockedHint: \"Ứng dụng chưa có trong gói hiện tại\",\n  account: \"Tài khoản\",\n  profile: \"Hồ sơ\",\n  settings: \"Cài đặt\",\n  appearance: \"Giao diện\",\n  help: \"Trợ giúp\",\n  logout: \"Đăng xuất\",\n  themeLight: \"Sáng\",\n  themeDark: \"Tối\",\n  themeSystem: \"Hệ thống\",\n  toggleTheme: \"Đổi giao diện\"\n};\n"],"mappings":"AAwNO,MAAM,uBAAoC;AAAA,EAC/C,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,SAAS,CAAC,UAAU,GAAG,KAAK;AAAA,EAC5B,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AACf;","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\";\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ị (mặc định tiếng Việt). */\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 (Linear-style: 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 — app tiếng Anh (hoặc ngôn ngữ khác) override\n * từng khoá qua prop `labels`. Mặc định là tiếng Việt.\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 Thu gọn\" sẽ không khớp tên truy cập. \"Thu gọn\" ⊂ \"Thu gọn thanh bên\" ✓ — giữ quan hệ đó\n   * 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ự tiếng Việt vào mọi bản dịch. Cùng khuôn với `range`/`pageStatus` của\n   * `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  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}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_SHELL_LABELS: ShellLabels = {\n  collapseSidebar: \"Thu gọn thanh bên\",\n  collapseSidebarShort: \"Thu gọn\",\n  expandSidebar: \"Mở rộng thanh bên\",\n  openMenu: \"Mở menu\",\n  closeMenu: \"Đóng menu\",\n  search: \"Tìm kiếm\",\n  searchPlaceholder: \"Tìm kiếm…\",\n  notifications: \"Thông báo\",\n  navigationLabel: \"Điều hướng chính\",\n  workspace: \"Không gian làm việc\",\n  workspaceSwitcherLabel: \"Đổi không gian làm việc\",\n  workspaceSearchPlaceholder: \"Tìm không gian làm việc…\",\n  workspaceEmpty: \"Không tìm thấy không gian làm việc\",\n  createWorkspace: \"Tạo không gian làm việc\",\n  workspaceSettings: \"Cài đặt không gian làm việc\",\n  inviteMembers: \"Mời thành viên\",\n  members: (count) => `${count} thành viên`,\n  apps: \"Ứng dụng\",\n  appLauncherLabel: \"Mở danh sách ứng dụng\",\n  myApps: \"Ứng dụng của bạn\",\n  discoverApps: \"Khám phá thêm\",\n  locked: \"Chưa mở khoá\",\n  lockedHint: \"Ứng dụng chưa có trong gói hiện tại\",\n  account: \"Tài khoản\",\n  profile: \"Hồ sơ\",\n  settings: \"Cài đặt\",\n  appearance: \"Giao diện\",\n  help: \"Trợ giúp\",\n  logout: \"Đăng xuất\",\n  themeLight: \"Sáng\",\n  themeDark: \"Tối\",\n  themeSystem: \"Hệ thống\",\n  toggleTheme: \"Đổi giao diện\"\n};\n"],"mappings":"AAqOO,MAAM,uBAAoC;AAAA,EAC/C,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,SAAS,CAAC,UAAU,GAAG,KAAK;AAAA,EAC5B,MAAM;AAAA,EACN,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AACf;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "1.8.3",
+  "version": "1.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",