@comitor/ui 2.1.0 → 3.0.1

package/dist/shell/display-axis-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/display-axis-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { Switch } from \"../components/ui/switch.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { type DensityMode, FONT_SIZE_MODES, type FontSizeMode } from \"./display-axis-constants.js\";\nimport { useDensity, useFontSize } from \"./display-axis-provider.js\";\n\n/**\n * Hai control của trục MẬT ĐỘ và trục CỠ CHỮ.\n *\n * ─ VÌ SAO CẢ HAI ĐỀU CÓ `disabled={!mounted}` ─\n * Giá trị thật nằm ở localStorage, mà server không đọc được. Render lần đầu ở client PHẢI khớp\n * HTML server sinh ra, nếu không React báo lệch hydration — nên provider giữ giá trị mặc định cho\n * tới khi effect đầu chạy. Trong khoảnh khắc đó control hiện mặc định chứ không hiện lựa chọn\n * thật, và nếu người dùng kịp bấm thì họ ghi đè lên chính lựa chọn của mình. Khoá cho tới khi\n * `mounted` là cách `ContrastToggle` đã dùng.\n *\n * (DOM thật thì không nháy: script chống nháy của provider đã đặt thuộc tính lên `<html>` trước\n * lần sơn đầu tiên. Chỉ CONTROL là phải chờ.)\n */\n\nexport interface DensityToggleProps {\n  label?: string;\n  description?: React.ReactNode;\n  className?: string;\n  /**\n   * Gọi SAU khi người dùng đổi — cùng khuôn với `onContrastChange` của `ContrastToggle`.\n   *\n   * ⚠ Đây là callback THÔNG BÁO, không phải `onChange` của một component controlled. Giá trị CÓ\n   * HIỆU LỰC vẫn nằm ở `localStorage` của gói và vẫn do provider quản; prop này chỉ cho app biết\n   * \"vừa có thay đổi\" để nó ghi một MẶC ĐỊNH theo tài khoản ở nơi khác (Comitor.Account), hiện một\n   * toast, hoặc ghi log.\n   *\n   * Vì sao KHÔNG làm controlled: trục hiển thị phải có hiệu lực trước lượt sơn đầu tiên, và điều đó\n   * chỉ làm được bằng script chống nháy đọc `localStorage` — một giá trị đi từ server xuống prop\n   * luôn tới SAU lượt sơn ấy. Xem `display-axis-provider.tsx`.\n   */\n  onDensityChange?: (mode: DensityMode) => void;\n}\n\n/**\n * Nút gạt \"bố cục gọn\".\n *\n * ⚠ Đây KHÔNG phải một trường của biểu mẫu cài đặt. Nó có hiệu lực NGAY và tự lưu, giống\n * `ThemeToggle`/`ContrastToggle` — đừng đưa nó vào luồng nháp/\"Lưu thay đổi\". Trộn hai kiểu thì\n * thanh \"Có thay đổi chưa lưu\" sáng lên cho một thay đổi đã có hiệu lực, và nút \"Hoàn tác\" trong\n * toast sẽ lùi bản nháp mà KHÔNG lùi được trục — giao diện tự mâu thuẫn với chính nó.\n */\nexport function DensityToggle({\n  label = \"Bố cục gọn\",\n  description = \"Giảm khoảng cách dọc giữa các dòng trong bảng, danh sách và menu.\",\n  className,\n  onDensityChange\n}: DensityToggleProps) {\n  const { density, setDensity, mounted } = useDensity();\n\n  return (\n    <Switch\n      className={className}\n      checked={density === \"compact\"}\n      onCheckedChange={(checked) => {\n        const next: DensityMode = checked ? \"compact\" : \"comfortable\";\n        setDensity(next);\n        onDensityChange?.(next);\n      }}\n      disabled={!mounted}\n      label={label}\n      description={description}\n    />\n  );\n}\n\nexport interface FontSizeControlProps {\n  /** Nhãn của cả nhóm, đọc lên cho trình đọc màn hình. */\n  label?: string;\n  /** Nhãn từng mức — THỨ TỰ theo `FONT_SIZE_MODES` (`sm`, `md`, `lg`). */\n  optionLabels?: Record<FontSizeMode, string>;\n  className?: string;\n  /** Gọi SAU khi người dùng đổi — xem giải thích ở `DensityToggleProps.onDensityChange`. */\n  onFontSizeChange?: (mode: FontSizeMode) => void;\n}\n\nconst DEFAULT_FONT_SIZE_LABELS: Record<FontSizeMode, string> = {\n  sm: \"Nhỏ\",\n  md: \"Vừa\",\n  lg: \"Lớn\"\n};\n\n/**\n * Chọn cỡ chữ — ba mức, một hàng nút.\n *\n * `role=\"radiogroup\"` + `aria-checked` chứ không phải ba nút thường: đây là chọn MỘT trong ba, và\n * trình đọc màn hình cần nghe \"2 trên 3\" chứ không nghe ba nút rời rạc. Dùng `<button>` thật (bàn\n * phím tới được bằng Tab) thay vì roving focus của Radix ToggleGroup — nhóm chỉ có ba mục nên\n * roving focus không đáng cái giá thêm một phụ thuộc.\n *\n * Cỡ chữ của CHÍNH các nút này cố định `text-sm`: nếu chúng phóng theo lựa chọn thì bấm \"Lớn\" sẽ\n * làm cả hàng nút nhảy chỗ ngay dưới ngón tay.\n */\nexport function FontSizeControl({\n  label = \"Cỡ chữ\",\n  optionLabels = DEFAULT_FONT_SIZE_LABELS,\n  className,\n  onFontSizeChange\n}: FontSizeControlProps) {\n  const { fontSize, setFontSize, mounted } = useFontSize();\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={cn(\"inline-flex items-center gap-1 rounded-md border border-input p-1 text-sm\", className)}\n    >\n      {FONT_SIZE_MODES.map((mode) => {\n        const selected = fontSize === mode;\n        return (\n          <button\n            key={mode}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            disabled={!mounted}\n            onClick={() => {\n              setFontSize(mode);\n              onFontSizeChange?.(mode);\n            }}\n            className={cn(\n              \"rounded-sm px-3 py-1 text-sm transition-colors duration-150 ease-out\",\n              \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              selected\n                ? \"bg-control-on text-control-check font-medium\"\n                : \"text-muted-foreground hover:bg-accent hover:text-foreground\"\n            )}\n          >\n            {optionLabels[mode]}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA0DI;AAvDJ,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAA2B,uBAA0C;AACrE,SAAS,YAAY,mBAAmB;AA2CjC,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,EAAE,SAAS,YAAY,QAAQ,IAAI,WAAW;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,YAAY;AAAA,MACrB,iBAAiB,CAAC,YAAY;AAC5B,cAAM,OAAoB,UAAU,YAAY;AAChD,mBAAW,IAAI;AACf,0BAAkB,IAAI;AAAA,MACxB;AAAA,MACA,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAYA,MAAM,2BAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAAS,gBAAgB;AAAA,EAC9B,QAAQ;AAAA,EACR,eAAe;AAAA,EACf;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,EAAE,UAAU,aAAa,QAAQ,IAAI,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,6EAA6E,SAAS;AAAA,MAEnG,0BAAgB,IAAI,CAAC,SAAS;AAC7B,cAAM,WAAW,aAAa;AAC9B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,CAAC;AAAA,YACX,SAAS,MAAM;AACb,0BAAY,IAAI;AAChB,iCAAmB,IAAI;AAAA,YACzB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,WACI,iDACA;AAAA,YACN;AAAA,YAEC,uBAAa,IAAI;AAAA;AAAA,UAlBb;AAAA,QAmBP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/display-axis-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport { Switch } from \"../components/ui/switch.js\";\nimport { useComitorMessages } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { type DensityMode, FONT_SIZE_MODES, type FontSizeMode } from \"./display-axis-constants.js\";\nimport { useDensity, useFontSize } from \"./display-axis-provider.js\";\n\n/**\n * Hai control của trục MẬT ĐỘ và trục CỠ CHỮ.\n *\n * ─ VÌ SAO CẢ HAI ĐỀU CÓ `disabled={!mounted}` ─\n * Giá trị thật nằm ở localStorage, mà server không đọc được. Render lần đầu ở client PHẢI khớp\n * HTML server sinh ra, nếu không React báo lệch hydration — nên provider giữ giá trị mặc định cho\n * tới khi effect đầu chạy. Trong khoảnh khắc đó control hiện mặc định chứ không hiện lựa chọn\n * thật, và nếu người dùng kịp bấm thì họ ghi đè lên chính lựa chọn của mình. Khoá cho tới khi\n * `mounted` là cách `ContrastToggle` đã dùng.\n *\n * (DOM thật thì không nháy: script chống nháy của provider đã đặt thuộc tính lên `<html>` trước\n * lần sơn đầu tiên. Chỉ CONTROL là phải chờ.)\n *\n * ─ CHỮ ─\n * Mọi chuỗi mặc định theo namespace `displayAxis` của `ComitorLocaleProvider` (không có provider\n * → tiếng Anh). Prop `label`/`description`/`optionLabels` truyền vào vẫn thắng.\n */\n\nexport interface DensityToggleProps {\n  /** Nhãn nút gạt (khoá `densityLabel` của namespace `displayAxis`). */\n  label?: string;\n  /** Dòng mô tả dưới nhãn (khoá `densityDescription`). */\n  description?: React.ReactNode;\n  className?: string;\n  /**\n   * Gọi SAU khi người dùng đổi — cùng khuôn với `onContrastChange` của `ContrastToggle`.\n   *\n   * ⚠ Đây là callback THÔNG BÁO, không phải `onChange` của một component controlled. Giá trị CÓ\n   * HIỆU LỰC vẫn nằm ở `localStorage` của gói và vẫn do provider quản; prop này chỉ cho app biết\n   * \"vừa có thay đổi\" để nó ghi một MẶC ĐỊNH theo tài khoản ở nơi khác (Comitor.Account), hiện một\n   * toast, hoặc ghi log.\n   *\n   * Vì sao KHÔNG làm controlled: trục hiển thị phải có hiệu lực trước lượt sơn đầu tiên, và điều đó\n   * chỉ làm được bằng script chống nháy đọc `localStorage` — một giá trị đi từ server xuống prop\n   * luôn tới SAU lượt sơn ấy. Xem `display-axis-provider.tsx`.\n   */\n  onDensityChange?: (mode: DensityMode) => void;\n}\n\n/**\n * Nút gạt \"bố cục gọn\".\n *\n * ⚠ Đây KHÔNG phải một trường của biểu mẫu cài đặt. Nó có hiệu lực NGAY và tự lưu, giống\n * `ThemeToggle`/`ContrastToggle` — đừng đưa nó vào luồng nháp/\"Lưu thay đổi\". Trộn hai kiểu thì\n * thanh \"Có thay đổi chưa lưu\" sáng lên cho một thay đổi đã có hiệu lực, và nút \"Hoàn tác\" trong\n * toast sẽ lùi bản nháp mà KHÔNG lùi được trục — giao diện tự mâu thuẫn với chính nó.\n */\nexport function DensityToggle({\n  label: labelProp,\n  description: descriptionProp,\n  className,\n  onDensityChange\n}: DensityToggleProps) {\n  const t = useComitorMessages(\"displayAxis\");\n  const label = labelProp ?? t.densityLabel;\n  const description = descriptionProp ?? t.densityDescription;\n  const { density, setDensity, mounted } = useDensity();\n\n  return (\n    <Switch\n      className={className}\n      checked={density === \"compact\"}\n      onCheckedChange={(checked) => {\n        const next: DensityMode = checked ? \"compact\" : \"comfortable\";\n        setDensity(next);\n        onDensityChange?.(next);\n      }}\n      disabled={!mounted}\n      label={label}\n      description={description}\n    />\n  );\n}\n\nexport interface FontSizeControlProps {\n  /** Nhãn của cả nhóm, đọc lên cho trình đọc màn hình (khoá `fontSizeLabel` của `displayAxis`). */\n  label?: string;\n  /**\n   * Nhãn từng mức — THỨ TỰ theo `FONT_SIZE_MODES` (`sm`, `md`, `lg`). Không truyền thì lấy ba khoá\n   * `fontSizeSm`/`fontSizeMd`/`fontSizeLg` của namespace `displayAxis`.\n   */\n  optionLabels?: Record<FontSizeMode, string>;\n  className?: string;\n  /** Gọi SAU khi người dùng đổi — xem giải thích ở `DensityToggleProps.onDensityChange`. */\n  onFontSizeChange?: (mode: FontSizeMode) => void;\n}\n\n/**\n * Chọn cỡ chữ — ba mức, một hàng nút.\n *\n * `role=\"radiogroup\"` + `aria-checked` chứ không phải ba nút thường: đây là chọn MỘT trong ba, và\n * trình đọc màn hình cần nghe \"2 trên 3\" chứ không nghe ba nút rời rạc. Dùng `<button>` thật (bàn\n * phím tới được bằng Tab) thay vì roving focus của Radix ToggleGroup — nhóm chỉ có ba mục nên\n * roving focus không đáng cái giá thêm một phụ thuộc.\n *\n * Cỡ chữ của CHÍNH các nút này cố định `text-sm`: nếu chúng phóng theo lựa chọn thì bấm mức `lg`\n * sẽ làm cả hàng nút nhảy chỗ ngay dưới ngón tay.\n */\nexport function FontSizeControl({\n  label: labelProp,\n  optionLabels: optionLabelsProp,\n  className,\n  onFontSizeChange\n}: FontSizeControlProps) {\n  const t = useComitorMessages(\"displayAxis\");\n  const label = labelProp ?? t.fontSizeLabel;\n  const optionLabels = optionLabelsProp ?? { sm: t.fontSizeSm, md: t.fontSizeMd, lg: t.fontSizeLg };\n  const { fontSize, setFontSize, mounted } = useFontSize();\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={label}\n      className={cn(\"inline-flex items-center gap-1 rounded-md border border-input p-1 text-sm\", className)}\n    >\n      {FONT_SIZE_MODES.map((mode) => {\n        const selected = fontSize === mode;\n        return (\n          <button\n            key={mode}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            disabled={!mounted}\n            onClick={() => {\n              setFontSize(mode);\n              onFontSizeChange?.(mode);\n            }}\n            className={cn(\n              \"rounded-sm px-3 py-1 text-sm transition-colors duration-150 ease-out\",\n              \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              selected\n                ? \"bg-control-on text-control-check font-medium\"\n                : \"text-muted-foreground hover:bg-accent hover:text-foreground\"\n            )}\n          >\n            {optionLabels[mode]}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAoEI;AAjEJ,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAA2B,uBAA0C;AACrE,SAAS,YAAY,mBAAmB;AAiDjC,SAAS,cAAc;AAAA,EAC5B,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,mBAAmB,aAAa;AAC1C,QAAM,QAAQ,aAAa,EAAE;AAC7B,QAAM,cAAc,mBAAmB,EAAE;AACzC,QAAM,EAAE,SAAS,YAAY,QAAQ,IAAI,WAAW;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,YAAY;AAAA,MACrB,iBAAiB,CAAC,YAAY;AAC5B,cAAM,OAAoB,UAAU,YAAY;AAChD,mBAAW,IAAI;AACf,0BAAkB,IAAI;AAAA,MACxB;AAAA,MACA,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AA0BO,SAAS,gBAAgB;AAAA,EAC9B,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,IAAI,mBAAmB,aAAa;AAC1C,QAAM,QAAQ,aAAa,EAAE;AAC7B,QAAM,eAAe,oBAAoB,EAAE,IAAI,EAAE,YAAY,IAAI,EAAE,YAAY,IAAI,EAAE,WAAW;AAChG,QAAM,EAAE,UAAU,aAAa,QAAQ,IAAI,YAAY;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,6EAA6E,SAAS;AAAA,MAEnG,0BAAgB,IAAI,CAAC,SAAS;AAC7B,cAAM,WAAW,aAAa;AAC9B,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,CAAC;AAAA,YACX,SAAS,MAAM;AACb,0BAAY,IAAI;AAChB,iCAAmB,IAAI;AAAA,YACzB;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,WACI,iDACA;AAAA,YACN;AAAA,YAEC,uBAAa,IAAI;AAAA;AAAA,UAlBb;AAAA,QAmBP;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/mobile-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Separator } from \"../components/ui/separator.js\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"../components/ui/sheet.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { SidebarGroup } from \"./sidebar-group.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\nimport { appAccentStyle, flattenNavItems } from \"./utils.js\";\nimport { WorkspaceSwitcher } from \"./workspace-switcher.js\";\n\nexport interface MobileMenuProps {\n  className?: string;\n  /** Slot ngay dưới WorkspaceSwitcher. */\n  header?: ReactNode;\n  /** Slot đáy (phiên bản app, liên kết hỗ trợ…). */\n  footer?: ReactNode;\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` ở đáy. */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Menu off-canvas cho màn hình hẹp (`Sheet` trượt từ trái):\n * WorkspaceSwitcher (trục 1) → menu app HIỆN TẠI → danh sách app (trục 2) → user.\n *\n * ⚠ Thứ tự đó cố ý KHÁC thanh bên desktop. Trên desktop danh sách app nằm ở header nên nó không\n * chiếm chỗ của menu; ở đây cả hai nằm chung một vùng cuộn, và menu của app đang mở là thứ người\n * dùng mở menu để tìm. Đặt danh sách app lên trước thì một hệ sinh thái 8–10 sản phẩm đẩy toàn bộ\n * menu chính xuống dưới nếp gấp — phải cuộn mới thấy thứ mình cần.\n *\n * Tự đóng khi đổi route (`ShellProvider` lo) và khi bấm vào một link thật trong menu.\n */\nexport function MobileMenu({\n  className,\n  header,\n  footer,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  userMenuProps\n}: MobileMenuProps) {\n  const { mobileMenuOpen, setMobileMenuOpen, nav, currentApp, user, labels } = useShell();\n\n  const allItems = flattenNavItems(nav);\n\n  // Chỉ đóng khi bấm trúng LINK thật — `SidebarMenuItem` không gọi callback này\n  // khi người dùng chỉ mở/đóng nhánh con, nên menu giữ nguyên cho họ đi tiếp.\n  const closeMenu = () => setMobileMenuOpen(false);\n\n  return (\n    <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n      <SheetContent\n        side=\"left\"\n        aria-describedby={undefined}\n        // `closeLabel` PHẢI truyền tay. Mặc định của `SheetContent` là \"Đóng\" ghim cứng trong\n        // primitive, mà app đổi ngôn ngữ shell qua ĐÚNG MỘT cửa: prop `labels`. Không nối hai đầu\n        // ở đây thì app tiếng Anh khai đủ `ShellLabels` vẫn đẩy tiếng Việt vào cây trợ năng — và\n        // họ không có chỗ nào sửa, vì `MobileMenu` không nhận props của `Sheet`.\n        // Dùng `closeMenu` (\"Đóng menu\") chứ không phải một nhãn \"Đóng\" chung: trình đọc màn hình\n        // đọc nút này TÁCH khỏi ngữ cảnh, nên nó phải nói rõ đóng cái gì — cùng lý do với\n        // `collapseSidebar` trong types.ts.\n        closeLabel={labels.closeMenu}\n        style={appAccentStyle(currentApp)}\n        className={cn(\"flex w-80 max-w-[85vw] flex-col gap-0 bg-sidebar p-0 md:hidden\", className)}\n      >\n        {/*\n          `pr-12`: `SheetContent` đặt nút đóng ở `absolute top-4 right-4`, tức nó nằm ĐÈ lên nội\n          dung header. Không chừa chỗ thì nó phủ lên mũi tên của `WorkspaceSwitcher` — bấm vào\n          tưởng đổi workspace mà hoá ra đóng menu.\n        */}\n        <SheetHeader className=\"shrink-0 border-b border-sidebar-border p-2 pr-12\">\n          <SheetTitle className=\"sr-only\">{labels.navigationLabel}</SheetTitle>\n          <WorkspaceSwitcher align=\"start\" />\n        </SheetHeader>\n\n        {header ? <div className=\"shrink-0 p-2\">{header}</div> : null}\n\n        <div className=\"flex-1 overflow-y-auto scrollbar-thin\">\n          {/* Menu của app HIỆN TẠI đứng trước — xem lý do thứ tự ở JSDoc đầu file. */}\n          <div className=\"flex flex-col gap-4 p-2\">\n            {nav.map((group) => (\n              <SidebarGroup key={group.id} group={group} siblings={allItems} onNavigate={closeMenu} />\n            ))}\n          </div>\n\n          {showAppLauncher ? (\n            <>\n              <Separator className=\"bg-sidebar-border\" />\n              <div className=\"p-2\">\n                <AppLauncher inline variant=\"list\" onSelected={closeMenu} />\n              </div>\n            </>\n          ) : null}\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-2 border-t border-sidebar-border p-2\">\n          {user ? <UserMenu showName {...userMenuProps} className=\"min-w-0 flex-1\" /> : null}\n          {showThemeToggle ? <ThemeToggle labels={labels} /> : null}\n        </div>\n\n        {footer ? <div className=\"shrink-0 border-t border-sidebar-border p-2\">{footer}</div> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";AA0EQ,SAgBI,UAfF,KADF;AAvER,SAAS,iBAAiB;AAC1B,SAAS,OAAO,cAAc,aAAa,kBAAkB;AAC7D,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAoC;AAC7C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,yBAAyB;AAyB3B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB;AACF,GAAoB;AAClB,QAAM,EAAE,gBAAgB,mBAAmB,KAAK,YAAY,MAAM,OAAO,IAAI,SAAS;AAEtF,QAAM,WAAW,gBAAgB,GAAG;AAIpC,QAAM,YAAY,MAAM,kBAAkB,KAAK;AAE/C,SACE,oBAAC,SAAM,MAAM,gBAAgB,cAAc,mBACzC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB;AAAA,MAQlB,YAAY,OAAO;AAAA,MACnB,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW,GAAG,kEAAkE,SAAS;AAAA,MAOzF;AAAA,6BAAC,eAAY,WAAU,qDACrB;AAAA,8BAAC,cAAW,WAAU,WAAW,iBAAO,iBAAgB;AAAA,UACxD,oBAAC,qBAAkB,OAAM,SAAQ;AAAA,WACnC;AAAA,QAEC,SAAS,oBAAC,SAAI,WAAU,gBAAgB,kBAAO,IAAS;AAAA,QAEzD,qBAAC,SAAI,WAAU,yCAEb;AAAA,8BAAC,SAAI,WAAU,2BACZ,cAAI,IAAI,CAAC,UACR,oBAAC,gBAA4B,OAAc,UAAU,UAAU,YAAY,aAAxD,MAAM,EAA6D,CACvF,GACH;AAAA,UAEC,kBACC,iCACE;AAAA,gCAAC,aAAU,WAAU,qBAAoB;AAAA,YACzC,oBAAC,SAAI,WAAU,OACb,8BAAC,eAAY,QAAM,MAAC,SAAQ,QAAO,YAAY,WAAW,GAC5D;AAAA,aACF,IACE;AAAA,WACN;AAAA,QAEA,qBAAC,SAAI,WAAU,uEACZ;AAAA,iBAAO,oBAAC,YAAS,UAAQ,MAAE,GAAG,eAAe,WAAU,kBAAiB,IAAK;AAAA,UAC7E,kBAAkB,oBAAC,eAAY,QAAgB,IAAK;AAAA,WACvD;AAAA,QAEC,SAAS,oBAAC,SAAI,WAAU,+CAA+C,kBAAO,IAAS;AAAA;AAAA;AAAA,EAC1F,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/mobile-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Separator } from \"../components/ui/separator.js\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"../components/ui/sheet.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { SidebarGroup } from \"./sidebar-group.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\nimport { appAccentStyle, flattenNavItems } from \"./utils.js\";\nimport { WorkspaceSwitcher } from \"./workspace-switcher.js\";\n\nexport interface MobileMenuProps {\n  className?: string;\n  /** Slot ngay dưới WorkspaceSwitcher. */\n  header?: ReactNode;\n  /** Slot đáy (phiên bản app, liên kết hỗ trợ…). */\n  footer?: ReactNode;\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` ở đáy. */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Menu off-canvas cho màn hình hẹp (`Sheet` trượt từ trái):\n * WorkspaceSwitcher (trục 1) → menu app HIỆN TẠI → danh sách app (trục 2) → user.\n *\n * ⚠ Thứ tự đó cố ý KHÁC thanh bên desktop. Trên desktop danh sách app nằm ở header nên nó không\n * chiếm chỗ của menu; ở đây cả hai nằm chung một vùng cuộn, và menu của app đang mở là thứ người\n * dùng mở menu để tìm. Đặt danh sách app lên trước thì một hệ sinh thái 8–10 sản phẩm đẩy toàn bộ\n * menu chính xuống dưới nếp gấp — phải cuộn mới thấy thứ mình cần.\n *\n * Tự đóng khi đổi route (`ShellProvider` lo) và khi bấm vào một link thật trong menu.\n */\nexport function MobileMenu({\n  className,\n  header,\n  footer,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  userMenuProps\n}: MobileMenuProps) {\n  const { mobileMenuOpen, setMobileMenuOpen, nav, currentApp, user, labels } = useShell();\n\n  const allItems = flattenNavItems(nav);\n\n  // Chỉ đóng khi bấm trúng LINK thật — `SidebarMenuItem` không gọi callback này\n  // khi người dùng chỉ mở/đóng nhánh con, nên menu giữ nguyên cho họ đi tiếp.\n  const closeMenu = () => setMobileMenuOpen(false);\n\n  return (\n    <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>\n      <SheetContent\n        side=\"left\"\n        aria-describedby={undefined}\n        // `closeLabel` PHẢI truyền tay. Mặc định của `SheetContent` là nhãn \"đóng\" CHUNG của\n        // primitive (namespace `sheet`), còn app đổi chữ của shell qua prop `labels` của shell.\n        // Không nối hai đầu ở đây thì một `closeMenu` app đã đổi không bao giờ tới được cây trợ\n        // năng — và họ không có chỗ nào sửa, vì `MobileMenu` không nhận props của `Sheet`.\n        // Dùng `closeMenu` (\"Close menu\") chứ không phải một nhãn \"Close\" chung: trình đọc màn hình\n        // đọc nút này TÁCH khỏi ngữ cảnh, nên nó phải nói rõ đóng cái gì — cùng lý do với\n        // `collapseSidebar` trong types.ts.\n        closeLabel={labels.closeMenu}\n        style={appAccentStyle(currentApp)}\n        className={cn(\"flex w-80 max-w-[85vw] flex-col gap-0 bg-sidebar p-0 md:hidden\", className)}\n      >\n        {/*\n          `pr-12`: `SheetContent` đặt nút đóng ở `absolute top-4 right-4`, tức nó nằm ĐÈ lên nội\n          dung header. Không chừa chỗ thì nó phủ lên mũi tên của `WorkspaceSwitcher` — bấm vào\n          tưởng đổi workspace mà hoá ra đóng menu.\n        */}\n        <SheetHeader className=\"shrink-0 border-b border-sidebar-border p-2 pr-12\">\n          <SheetTitle className=\"sr-only\">{labels.navigationLabel}</SheetTitle>\n          <WorkspaceSwitcher align=\"start\" />\n        </SheetHeader>\n\n        {header ? <div className=\"shrink-0 p-2\">{header}</div> : null}\n\n        <div className=\"flex-1 overflow-y-auto scrollbar-thin\">\n          {/* Menu của app HIỆN TẠI đứng trước — xem lý do thứ tự ở JSDoc đầu file. */}\n          <div className=\"flex flex-col gap-4 p-2\">\n            {nav.map((group) => (\n              <SidebarGroup key={group.id} group={group} siblings={allItems} onNavigate={closeMenu} />\n            ))}\n          </div>\n\n          {showAppLauncher ? (\n            <>\n              <Separator className=\"bg-sidebar-border\" />\n              <div className=\"p-2\">\n                <AppLauncher inline variant=\"list\" onSelected={closeMenu} />\n              </div>\n            </>\n          ) : null}\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-2 border-t border-sidebar-border p-2\">\n          {user ? <UserMenu showName {...userMenuProps} className=\"min-w-0 flex-1\" /> : null}\n          {showThemeToggle ? <ThemeToggle labels={labels} /> : null}\n        </div>\n\n        {footer ? <div className=\"shrink-0 border-t border-sidebar-border p-2\">{footer}</div> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";AA0EQ,SAgBI,UAfF,KADF;AAvER,SAAS,iBAAiB;AAC1B,SAAS,OAAO,cAAc,aAAa,kBAAkB;AAC7D,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAoC;AAC7C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,yBAAyB;AAyB3B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB;AACF,GAAoB;AAClB,QAAM,EAAE,gBAAgB,mBAAmB,KAAK,YAAY,MAAM,OAAO,IAAI,SAAS;AAEtF,QAAM,WAAW,gBAAgB,GAAG;AAIpC,QAAM,YAAY,MAAM,kBAAkB,KAAK;AAE/C,SACE,oBAAC,SAAM,MAAM,gBAAgB,cAAc,mBACzC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB;AAAA,MAQlB,YAAY,OAAO;AAAA,MACnB,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW,GAAG,kEAAkE,SAAS;AAAA,MAOzF;AAAA,6BAAC,eAAY,WAAU,qDACrB;AAAA,8BAAC,cAAW,WAAU,WAAW,iBAAO,iBAAgB;AAAA,UACxD,oBAAC,qBAAkB,OAAM,SAAQ;AAAA,WACnC;AAAA,QAEC,SAAS,oBAAC,SAAI,WAAU,gBAAgB,kBAAO,IAAS;AAAA,QAEzD,qBAAC,SAAI,WAAU,yCAEb;AAAA,8BAAC,SAAI,WAAU,2BACZ,cAAI,IAAI,CAAC,UACR,oBAAC,gBAA4B,OAAc,UAAU,UAAU,YAAY,aAAxD,MAAM,EAA6D,CACvF,GACH;AAAA,UAEC,kBACC,iCACE;AAAA,gCAAC,aAAU,WAAU,qBAAoB;AAAA,YACzC,oBAAC,SAAI,WAAU,OACb,8BAAC,eAAY,QAAM,MAAC,SAAQ,QAAO,YAAY,WAAW,GAC5D;AAAA,aACF,IACE;AAAA,WACN;AAAA,QAEA,qBAAC,SAAI,WAAU,uEACZ;AAAA,iBAAO,oBAAC,YAAS,UAAQ,MAAE,GAAG,eAAe,WAAU,kBAAiB,IAAK;AAAA,UAC7E,kBAAkB,oBAAC,eAAY,QAAgB,IAAK;AAAA,WACvD;AAAA,QAEC,SAAS,oBAAC,SAAI,WAAU,+CAA+C,kBAAO,IAAS;AAAA;AAAA;AAAA,EAC1F,GACF;AAEJ;","names":[]}

package/dist/shell/notifications-button.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
 interface NotificationsButtonProps extends Omit<ComponentProps<"button">, "children"> {
     /** Số thông báo chưa đọc; 0 hoặc bỏ trống thì không hiện chấm số. */
     count?: number;
-    /** Nhãn a11y (mặc định "Thông báo"). */
+    /** Nhãn a11y. Không truyền thì lấy khoá `notifications` của namespace `shell`. */
     label?: string;
     /** Vượt ngưỡng này thì hiển thị "n+" (mặc định 9). */
     max?: number;

package/dist/shell/notifications-button.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Bell } from "lucide-react";
+import { useComitorMessages } from "../i18n/locale-provider.js";
 import { cn } from "../lib/cn.js";
-import { DEFAULT_SHELL_LABELS } from "./types.js";
 function NotificationsButton({ count = 0, label, max = 9, className, ...props }) {
-  const text = label ?? DEFAULT_SHELL_LABELS.notifications;
+  const t = useComitorMessages("shell");
+  const text = label ?? t.notifications;
   const hasUnread = count > 0;
   return /* @__PURE__ */ jsxs(
     "button",

package/dist/shell/notifications-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/notifications-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bell } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../lib/cn.js\";\nimport { DEFAULT_SHELL_LABELS } from \"./types.js\";\n\nexport interface NotificationsButtonProps extends Omit<ComponentProps<\"button\">, \"children\"> {\n  /** Số thông báo chưa đọc; 0 hoặc bỏ trống thì không hiện chấm số. */\n  count?: number;\n  /** Nhãn a11y (mặc định \"Thông báo\"). */\n  label?: string;\n  /** Vượt ngưỡng này thì hiển thị \"n+\" (mặc định 9). */\n  max?: number;\n}\n\n/**\n * Nút chuông + số chưa đọc. **Chỉ có cái nút** — nội dung panel thông báo là\n * app-specific: đóng sẵn một NotificationPanel vào package thì app nào cũng phải\n * uốn dữ liệu của mình cho vừa cái khuôn đó.\n *\n * App tự bọc trong Popover/Sheet của mình:\n * `<PopoverTrigger asChild><NotificationsButton count={3} /></PopoverTrigger>`\n */\nexport function NotificationsButton({ count = 0, label, max = 9, className, ...props }: NotificationsButtonProps) {\n  const text = label ?? DEFAULT_SHELL_LABELS.notifications;\n  const hasUnread = count > 0;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={hasUnread ? `${text} (${count})` : text}\n      className={cn(\n        \"relative 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        className\n      )}\n      {...props}\n    >\n      <Bell className=\"size-4\" />\n      {hasUnread ? (\n        /*\n         * Huy hiệu ĐẨY RA GÓC, không nằm trong lòng nút.\n         *\n         * `top-0 right-0` — huy hiệu nằm SÁT GÓC nút, không lấn vào trong và cũng không tràn ra\n         * ngoài. Hai bản trước đều lệch, đo trên DOM thật (nút 36px, icon 16px căn giữa):\n         *\n         *     right-1 top-1        che 39% cái chuông — thấy khối đỏ, không thấy chuông\n         *     -right-0.5 -top-0.5  che 6% — hết che, nhưng huy hiệu trôi ra ngoài nút, đọc như\n         *                          một chấm rời không thuộc về cái chuông\n         *     top-0 right-0        che 14% — dính vào góc icon, vẫn thấy rõ hình chuông  ← đang dùng\n         *\n         * KHÔNG dùng giá trị âm: các nút header cách nhau `gap-1` (4px), tràn ra ngoài là huy\n         * hiệu tiến sát nút bên cạnh.\n         *\n         * `ring-2 ring-background` là nửa còn lại: viền cùng màu nền header cắt một đường sạch\n         * giữa huy hiệu và icon, nên 14% chồng lấn kia đọc thành hai hình tách bạch chứ không\n         * nhoè vào nhau. Cùng thủ pháp mà mẫu AppHeader ở mục Patterns dùng cho chấm thông báo\n         * (`ring-2 ring-card`).\n         */\n        <span\n          className={cn(\n            \"absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full px-1\",\n            \"ring-2 ring-background\",\n            \"bg-destructive text-[10px] font-semibold leading-none text-destructive-foreground\"\n          )}\n        >\n          {count > max ? `${max}+` : count}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"mappings":";AA6BI,SAUE,KAVF;AA3BJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AAmB9B,SAAS,oBAAoB,EAAE,QAAQ,GAAG,OAAO,MAAM,GAAG,WAAW,GAAG,MAAM,GAA6B;AAChH,QAAM,OAAO,SAAS,qBAAqB;AAC3C,QAAM,YAAY,QAAQ;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,YAAY,GAAG,IAAI,KAAK,KAAK,MAAM;AAAA,MAC/C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,WAAU,UAAS;AAAA,QACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAoBC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEC,kBAAQ,MAAM,GAAG,GAAG,MAAM;AAAA;AAAA,UAC7B;AAAA,YACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/notifications-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Bell } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { useComitorMessages } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface NotificationsButtonProps extends Omit<ComponentProps<\"button\">, \"children\"> {\n  /** Số thông báo chưa đọc; 0 hoặc bỏ trống thì không hiện chấm số. */\n  count?: number;\n  /** Nhãn a11y. Không truyền thì lấy khoá `notifications` của namespace `shell`. */\n  label?: string;\n  /** Vượt ngưỡng này thì hiển thị \"n+\" (mặc định 9). */\n  max?: number;\n}\n\n/**\n * Nút chuông + số chưa đọc. **Chỉ có cái nút** — nội dung panel thông báo là\n * app-specific: đóng sẵn một NotificationPanel vào package thì app nào cũng phải\n * uốn dữ liệu của mình cho vừa cái khuôn đó.\n *\n * App tự bọc trong Popover/Sheet của mình:\n * `<PopoverTrigger asChild><NotificationsButton count={3} /></PopoverTrigger>`\n */\nexport function NotificationsButton({ count = 0, label, max = 9, className, ...props }: NotificationsButtonProps) {\n  const t = useComitorMessages(\"shell\");\n  const text = label ?? t.notifications;\n  const hasUnread = count > 0;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={hasUnread ? `${text} (${count})` : text}\n      className={cn(\n        \"relative 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        className\n      )}\n      {...props}\n    >\n      <Bell className=\"size-4\" />\n      {hasUnread ? (\n        /*\n         * Huy hiệu ĐẨY RA GÓC, không nằm trong lòng nút.\n         *\n         * `top-0 right-0` — huy hiệu nằm SÁT GÓC nút, không lấn vào trong và cũng không tràn ra\n         * ngoài. Hai bản trước đều lệch, đo trên DOM thật (nút 36px, icon 16px căn giữa):\n         *\n         *     right-1 top-1        che 39% cái chuông — thấy khối đỏ, không thấy chuông\n         *     -right-0.5 -top-0.5  che 6% — hết che, nhưng huy hiệu trôi ra ngoài nút, đọc như\n         *                          một chấm rời không thuộc về cái chuông\n         *     top-0 right-0        che 14% — dính vào góc icon, vẫn thấy rõ hình chuông  ← đang dùng\n         *\n         * KHÔNG dùng giá trị âm: các nút header cách nhau `gap-1` (4px), tràn ra ngoài là huy\n         * hiệu tiến sát nút bên cạnh.\n         *\n         * `ring-2 ring-background` là nửa còn lại: viền cùng màu nền header cắt một đường sạch\n         * giữa huy hiệu và icon, nên 14% chồng lấn kia đọc thành hai hình tách bạch chứ không\n         * nhoè vào nhau. Cùng thủ pháp mà mẫu AppHeader ở mục Patterns dùng cho chấm thông báo\n         * (`ring-2 ring-card`).\n         */\n        <span\n          className={cn(\n            \"absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full px-1\",\n            \"ring-2 ring-background\",\n            \"bg-destructive text-[10px] font-semibold leading-none text-destructive-foreground\"\n          )}\n        >\n          {count > max ? `${max}+` : count}\n        </span>\n      ) : null}\n    </button>\n  );\n}\n"],"mappings":";AA8BI,SAUE,KAVF;AA5BJ,SAAS,YAAY;AAErB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAmBZ,SAAS,oBAAoB,EAAE,QAAQ,GAAG,OAAO,MAAM,GAAG,WAAW,GAAG,MAAM,GAA6B;AAChH,QAAM,IAAI,mBAAmB,OAAO;AACpC,QAAM,OAAO,SAAS,EAAE;AACxB,QAAM,YAAY,QAAQ;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,YAAY,GAAG,IAAI,KAAK,KAAK,MAAM;AAAA,MAC/C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,WAAU,UAAS;AAAA,QACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAoBC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEC,kBAAQ,MAAM,GAAG,GAAG,MAAM;AAAA;AAAA,UAC7B;AAAA,YACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/shell/shell-context.d.ts

@@ -102,7 +102,10 @@ interface ShellProviderProps {
     persistSidebarState?: boolean;
     /** Tắt bộ phím tắt toàn cục. */
     enableShortcuts?: boolean;
-    /** Override chuỗi hiển thị (mặc định tiếng Việt). */
+    /**
+     * Override từng chuỗi hiển thị. Không truyền thì theo namespace `shell` của
+     * `ComitorLocaleProvider` gần nhất (không có provider → tiếng Anh).
+     */
     labels?: Partial<ShellLabels>;
     children: ReactNode;
 }

package/dist/shell/shell-context.js

@@ -4,10 +4,8 @@ import NextLinkModule from "next/link.js";
 import { usePathname } from "next/navigation.js";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { TooltipProvider } from "../components/ui/tooltip.js";
+import { useComitorLabels } from "../i18n/locale-provider.js";
 import { layout } from "../tokens.js";
-import {
-  DEFAULT_SHELL_LABELS
-} from "./types.js";
 import { getEntitledApps, resolveCurrentApp, toNavGroups, toSearchParams } from "./utils.js";
 const NextLink = NextLinkModule.default ?? NextLinkModule;
 function DefaultShellLink({ href, children, ...props }) {
@@ -77,7 +75,7 @@ function ShellProvider({
     return resolveCurrentApp(apps, pathname);
   }, [apps, currentAppId, pathname]);
   const navGroups = useMemo(() => toNavGroups(nav), [nav]);
-  const labels = useMemo(() => ({ ...DEFAULT_SHELL_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = useComitorLabels("shell", labelsProp);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);

package/dist/shell/shell-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/shell-context.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * ĐUÔI `.js` LÀ CHỦ ĐÍCH, ĐỪNG BỎ.\n *\n * Gói `next` KHÔNG khai `exports` map, nên `next/link` chỉ là đường dẫn file. Bundler\n * (webpack/Turbopack) tự thêm đuôi rồi trỏ đúng `node_modules/next/link.js`; Node ESM thuần thì\n * KHÔNG — nó ném `ERR_MODULE_NOT_FOUND: Cannot find module .../next/link` kèm gợi ý\n * \"Did you mean next/link.js?\". Hậu quả: `node -e \"await import('@comitor/ui/shell')\"` chết ngay\n * lúc nạp, tức là mọi smoke-test entry của CI đều mù với riêng entry shell.\n *\n * Ghi thẳng `next/link.js` / `next/navigation.js` là CÙNG MỘT file mà bundler vẫn resolve tới\n * (đã đối chiếu: `next` không có `resolve.alias` cho hai specifier này trong\n * `dist/build/create-compiler-aliases.js`), nhưng Node cũng nạp được.\n */\nimport NextLinkModule from \"next/link.js\";\nimport { usePathname } from \"next/navigation.js\";\nimport { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport { layout } from \"../tokens.js\";\nimport {\n  type AppDescriptor,\n  DEFAULT_SHELL_LABELS,\n  type NavGroup,\n  type ShellLabels,\n  type ShellLinkComponent,\n  type ShellLinkProps,\n  type ShellNav,\n  type ShellUser,\n  type Workspace\n} from \"./types.js\";\nimport { getEntitledApps, type NavSearchParams, resolveCurrentApp, toNavGroups, toSearchParams } from \"./utils.js\";\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Link mặc định\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Chuẩn hoá interop của `next/link.js`.\n *\n * Hai môi trường trả về hai hình dạng khác nhau cho cùng một file CJS:\n *   - bundler  → đã interop sẵn, biến này CHÍNH LÀ component `Link`\n *   - Node ESM → biến này là namespace `{ default: Link, useLinkStatus }`\n * `.default ?? chính nó` đúng ở cả hai (component `Link` không có thuộc tính `default`).\n */\nconst NextLink = ((NextLinkModule as unknown as { default?: ShellLinkComponent }).default ??\n  NextLinkModule) as ShellLinkComponent;\n\n/**\n * Bọc `next/link` thay vì truyền thẳng: hình dạng props của NextLink rộng hơn\n * `ShellLinkProps` (href nhận cả UrlObject), bọc lại cho khớp type và để chỗ\n * thay adapter router khác về sau.\n */\nfunction DefaultShellLink({ href, children, ...props }: ShellLinkProps) {\n  return (\n    <NextLink href={href} {...props}>\n      {children}\n    </NextLink>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Context\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellContextValue {\n  /* Trục 1 — workspace */\n  workspaces: Workspace[];\n  currentWorkspace: Workspace | null;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /* Trục 2 — app */\n  apps: AppDescriptor[];\n  currentApp: AppDescriptor | null;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /* Điều hướng trong app hiện tại */\n  nav: NavGroup[];\n  pathname: string;\n  /**\n   * Query hiện tại đã chuẩn hoá, hoặc `null` khi app không truyền.\n   * `null` KHÁC rỗng: rỗng nghĩa là \"URL không có query\", `null` nghĩa là \"shell không biết\"\n   * — và active matching xử lý hai ca đó khác nhau (xem `isNavItemActive`).\n   */\n  searchParams: URLSearchParams | null;\n  LinkComponent: ShellLinkComponent;\n  onNavigate?: (href: string) => void;\n\n  /* Người dùng */\n  user: ShellUser | null;\n  onLogout?: () => void;\n\n  /* Trạng thái khung */\n  sidebarCollapsed: boolean;\n  setSidebarCollapsed: (collapsed: boolean) => void;\n  toggleSidebar: () => void;\n  mobileMenuOpen: boolean;\n  setMobileMenuOpen: (open: boolean) => void;\n  commandPaletteOpen: boolean;\n  setCommandPaletteOpen: (open: boolean) => void;\n  appLauncherOpen: boolean;\n  setAppLauncherOpen: (open: boolean) => void;\n\n  /* Chuỗi hiển thị (đã trộn mặc định tiếng Việt với override của app) */\n  labels: ShellLabels;\n}\n\nconst ShellContext = createContext<ShellContextValue | undefined>(undefined);\n\n/** Truy cập state của shell — phải gọi bên trong `<ShellProvider>`. */\nexport function useShell(): ShellContextValue {\n  const context = useContext(ShellContext);\n  if (!context) {\n    throw new Error(\"useShell phải được dùng bên trong <ShellProvider> (hoặc <AppShell>).\");\n  }\n  return context;\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Ghi nhớ trạng thái thu gọn sidebar\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Khoá localStorage theo workspace — mỗi workspace nhớ riêng trạng thái sidebar\n * (spec §7.6: KHÔNG dùng cookie `sidebar_state` của shadcn để tránh hai nguồn sự thật).\n */\nfunction sidebarStorageKey(workspaceId: string | undefined): string {\n  return `comitor-sidebar:${workspaceId ?? \"default\"}`;\n}\n\n/**\n * Đang ở dải TABLET? — từ `breakpoints.mobile` (768px, mốc thanh bên thôi off-canvas) tới ngay\n * dưới `breakpoints.tablet` (1024px).\n *\n * Hai mốc lấy từ `layout.breakpoints` của `@comitor/ui/tokens` chứ không gõ số ở đây: đổi mốc mà\n * quên chỗ này thì thanh bên tự sập ở một dải mà CSS không còn coi là tablet nữa.\n */\nfunction isTabletWidth(): boolean {\n  if (typeof window === \"undefined\") return false;\n  const { mobile, tablet } = layout.breakpoints;\n  return window.matchMedia(`(min-width: ${mobile}px) and (max-width: ${tablet - 1}px)`).matches;\n}\n\nfunction readStoredCollapsed(workspaceId: string | undefined): boolean | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(sidebarStorageKey(workspaceId));\n    if (raw === \"1\") return true;\n    if (raw === \"0\") return false;\n    return null;\n  } catch {\n    // Safari private mode / storage bị chặn — coi như chưa có giá trị lưu.\n    return null;\n  }\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Provider\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellProviderProps {\n  /** Trục 1 — danh sách workspace của user. Rỗng/1 phần tử thì WorkspaceSwitcher tự ẩn danh sách. */\n  workspaces?: Workspace[];\n  /** Workspace đang mở; bỏ trống → lấy phần tử đầu. */\n  currentWorkspaceId?: string;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /** Trục 2 — danh sách app của hệ sinh thái (kể cả app chưa mở khoá). */\n  apps?: AppDescriptor[];\n  /** App đang mở; bỏ trống → suy từ `pathname` (khớp prefix dài nhất). */\n  currentAppId?: string;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /** Menu của app hiện tại — `NavItem[]` hoặc `NavGroup[]`. */\n  nav?: ShellNav;\n  /**\n   * Ghi đè pathname (Storybook, app không-Next). Bỏ trống → dùng `usePathname()`\n   * của next/navigation (trả `null` khi không có App Router → coi như \"\").\n   */\n  pathname?: string;\n  /**\n   * Query hiện tại — CHỈ cần khi menu có mục phân biệt nhau bằng query\n   * (`/cai-dat?tab=chung` ⇄ `/cai-dat?tab=thanh-vien`). Bỏ trống thì mọi mục cùng đường dẫn\n   * cùng sáng.\n   *\n   * Nhận `useSearchParams()` của Next, chuỗi `\"?tab=x\"`, hoặc object `searchParams` của\n   * Server Component.\n   *\n   * ⚠ Shell KHÔNG tự gọi `useSearchParams()`: hook đó ép trang bọc `<Suspense>` và đẩy trang\n   * sang render phía client khi build tĩnh — cái giá đó phải do app tự chọn, không phải do\n   * việc lỡ import shell. Truyền vào từ một client component đã có sẵn boundary:\n   *\n   * ```tsx\n   * \"use client\";\n   * const searchParams = useSearchParams();\n   * return <AppShell searchParams={searchParams} …>{children}</AppShell>;\n   * ```\n   */\n  searchParams?: NavSearchParams | null;\n  /**\n   * Ở dải TABLET (768–1023px), khi người dùng CHƯA từng gạt thanh bên, mở app lần đầu thì thanh\n   * bên thu gọn sẵn. Mặc định `true`.\n   *\n   * Đặt `false` khi app muốn thanh bên luôn mở rộng ở tablet — vd điều hướng là thứ chính của\n   * màn hình đó. Lựa chọn ĐÃ LƯU của người dùng luôn thắng cờ này.\n   */\n  collapseSidebarOnTablet?: boolean;\n  /** Component link thay `next/link` (app không-Next). */\n  LinkComponent?: ShellLinkComponent;\n  /** Gọi sau mỗi lần người dùng bấm một mục điều hướng (analytics, đóng panel…). */\n  onNavigate?: (href: string) => void;\n\n  user?: ShellUser | null;\n  onLogout?: () => void;\n\n  /** Trạng thái thu gọn ban đầu (SSR). Sau khi mount, localStorage của workspace thắng. */\n  defaultSidebarCollapsed?: boolean;\n  /** Tắt ghi nhớ localStorage (Storybook, chế độ kiosk). */\n  persistSidebarState?: boolean;\n  /** Tắt bộ phím tắt toàn cục. */\n  enableShortcuts?: boolean;\n\n  /** Override chuỗi hiển thị (mặc định tiếng Việt). */\n  labels?: Partial<ShellLabels>;\n\n  children: ReactNode;\n}\n\n/**\n * Provider của app shell Comitor: giữ hai trục điều hướng (workspace × app),\n * trạng thái khung (sidebar/mobile/command palette/app launcher), phím tắt toàn cục,\n * và bọc sẵn `TooltipProvider`.\n *\n * KHÔNG dùng `useRouter()` của next/navigation: hook đó *ném lỗi* khi thiếu App Router\n * (Storybook, test). Mọi điều hướng chủ động là việc của app qua callback\n * `onWorkspaceChange` / `onAppSelect` / `onNavigate`; link tĩnh đi qua `LinkComponent`.\n */\nexport function ShellProvider({\n  workspaces = [],\n  currentWorkspaceId,\n  onWorkspaceChange,\n  onCreateWorkspace,\n  onWorkspaceSettings,\n  onInviteMembers,\n  apps = [],\n  currentAppId,\n  onAppSelect,\n  onUpsell,\n  nav,\n  pathname: pathnameProp,\n  searchParams: searchParamsProp,\n  LinkComponent = DefaultShellLink,\n  onNavigate,\n  user = null,\n  onLogout,\n  defaultSidebarCollapsed = false,\n  collapseSidebarOnTablet = true,\n  persistSidebarState = true,\n  enableShortcuts = true,\n  labels: labelsProp,\n  children\n}: ShellProviderProps) {\n  // `usePathname()` trả null khi không có App Router → fallback chuỗi rỗng thay vì crash.\n  const nextPathname = usePathname();\n  const pathname = pathnameProp ?? nextPathname ?? \"\";\n\n  // Chuẩn hoá MỘT lần ở đây thay vì mỗi lần `isNavItemActive` chạy: prop có thể là chuỗi\n  // hoặc object, mà mỗi lần dựng `URLSearchParams` mới là một identity mới → mọi memo bên\n  // dưới hỏng. Khoá memo là chính prop app truyền vào.\n  const searchParams = useMemo(() => toSearchParams(searchParamsProp), [searchParamsProp]);\n\n  const currentWorkspace = useMemo(\n    () => workspaces.find((workspace) => workspace.id === currentWorkspaceId) ?? workspaces[0] ?? null,\n    [workspaces, currentWorkspaceId]\n  );\n\n  const currentApp = useMemo(() => {\n    if (currentAppId) return apps.find((app) => app.id === currentAppId) ?? null;\n    return resolveCurrentApp(apps, pathname);\n  }, [apps, currentAppId, pathname]);\n\n  const navGroups = useMemo(() => toNavGroups(nav), [nav]);\n  const labels = useMemo<ShellLabels>(() => ({ ...DEFAULT_SHELL_LABELS, ...labelsProp }), [labelsProp]);\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);\n  const [appLauncherOpen, setAppLauncherOpen] = useState(false);\n\n  /*\n   * Nạp trạng thái đã lưu SAU khi mount (đọc localStorage lúc render đầu sẽ lệch hydration).\n   *\n   * Nếu CHƯA có lựa chọn nào của người dùng thì ở dải TABLET thanh bên mặc định thu gọn: từ 768px\n   * thanh bên đã chiếm chỗ thật trong bố cục (dưới mức đó nó là sheet off-canvas), mà 768–1023px\n   * thì 256px của nó ăn tới một phần ba bề ngang — vùng nội dung còn ~512px cho một bảng nhiều cột.\n   *\n   * ⚠ KHÔNG ghi lựa chọn này vào localStorage. Đây là GIÁ TRỊ MẶC ĐỊNH, không phải quyết định của\n   * người dùng: ghi xuống là lần sau mở ở màn hình rộng thanh bên vẫn thu gọn vì \"đã có lựa chọn\n   * lưu\", mà người dùng thì chưa bấm gì cả. Chỉ khi họ tự gạt thì `applySidebarCollapsed` mới lưu.\n   *\n   * ⚠ Chỉ chạy MỘT LẦN lúc mở, không theo dõi resize. \"Mặc định khi mới mở\" khác với \"ép theo bề\n   * ngang\": kéo cửa sổ hẹp lại giữa phiên mà thanh bên tự sập là giật thứ người dùng đang cầm.\n   *\n   * Đọc bề ngang trong effect nên không đụng tới hydration — server không có `window`, và lần\n   * render đầu ở client vẫn dùng đúng `defaultSidebarCollapsed` mà server đã render.\n   */\n  useEffect(() => {\n    const stored = persistSidebarState ? readStoredCollapsed(currentWorkspace?.id) : null;\n    if (stored !== null) {\n      setSidebarCollapsed(stored);\n      return;\n    }\n    if (collapseSidebarOnTablet && isTabletWidth()) setSidebarCollapsed(true);\n  }, [persistSidebarState, currentWorkspace?.id, collapseSidebarOnTablet]);\n\n  const persistCollapsed = useCallback(\n    (collapsed: boolean) => {\n      if (!persistSidebarState || typeof window === \"undefined\") return;\n      try {\n        window.localStorage.setItem(sidebarStorageKey(currentWorkspace?.id), collapsed ? \"1\" : \"0\");\n      } catch {\n        // Bỏ qua: không ghi được localStorage thì trạng thái chỉ sống trong phiên.\n      }\n    },\n    [persistSidebarState, currentWorkspace?.id]\n  );\n\n  const applySidebarCollapsed = useCallback(\n    (collapsed: boolean) => {\n      setSidebarCollapsed(collapsed);\n      persistCollapsed(collapsed);\n    },\n    [persistCollapsed]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarCollapsed((prev) => {\n      const next = !prev;\n      persistCollapsed(next);\n      return next;\n    });\n  }, [persistCollapsed]);\n\n  // Phím tắt toàn cục (§7.4)\n  useEffect(() => {\n    if (!enableShortcuts) return;\n\n    const entitledApps = getEntitledApps(apps);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const target = event.target;\n      // Đang gõ trong ô nhập → nhường phím cho ô nhập.\n      const isTyping =\n        target instanceof HTMLInputElement ||\n        target instanceof HTMLTextAreaElement ||\n        target instanceof HTMLSelectElement ||\n        (target instanceof HTMLElement && target.isContentEditable);\n\n      if (event.key === \"Escape\") {\n        setCommandPaletteOpen(false);\n        setMobileMenuOpen(false);\n        setAppLauncherOpen(false);\n        return;\n      }\n\n      if (isTyping) return;\n\n      const mod = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      // Cmd/Ctrl + Shift + K — AppLauncher (phải xét TRƯỚC Cmd+K vì cùng phím \"k\")\n      if (mod && event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setAppLauncherOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + K — Command Palette\n      if (mod && !event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setCommandPaletteOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + B — thu gọn/mở sidebar\n      if (mod && !event.shiftKey && key === \"b\") {\n        event.preventDefault();\n        toggleSidebar();\n        return;\n      }\n\n      // Alt + 1…9 — nhảy tới app thứ n đã được cấp quyền.\n      // Dùng `event.code` chứ không `event.key`: trên macOS Alt+1 cho ra \"¡\".\n      if (event.altKey && !event.ctrlKey && !event.metaKey) {\n        const match = /^Digit([1-9])$/.exec(event.code);\n        if (match?.[1]) {\n          const index = Number.parseInt(match[1], 10) - 1;\n          const app = entitledApps[index];\n          if (app) {\n            event.preventDefault();\n            onAppSelect?.(app);\n          }\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [enableShortcuts, apps, onAppSelect, toggleSidebar]);\n\n  // Đổi route → đóng mọi overlay đang mở.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chủ đích chạy theo MỌI lần đổi pathname\n  useEffect(() => {\n    setMobileMenuOpen(false);\n    setAppLauncherOpen(false);\n    setCommandPaletteOpen(false);\n  }, [pathname]);\n\n  const value = useMemo<ShellContextValue>(\n    () => ({\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      nav: navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      setSidebarCollapsed: applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      setMobileMenuOpen,\n      commandPaletteOpen,\n      setCommandPaletteOpen,\n      appLauncherOpen,\n      setAppLauncherOpen,\n      labels\n    }),\n    [\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      commandPaletteOpen,\n      appLauncherOpen,\n      labels\n    ]\n  );\n\n  return (\n    <ShellContext.Provider value={value}>\n      <TooltipProvider delayDuration={200}>{children}</TooltipProvider>\n    </ShellContext.Provider>\n  );\n}\n"],"mappings":";AAuDI;AAxCJ,OAAO,oBAAoB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,eAA+B,aAAa,YAAY,WAAW,SAAS,gBAAgB;AACrG,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EAEE;AAAA,OAQK;AACP,SAAS,iBAAuC,mBAAmB,aAAa,sBAAsB;AActG,MAAM,WAAa,eAA+D,WAChF;AAOF,SAAS,iBAAiB,EAAE,MAAM,UAAU,GAAG,MAAM,GAAmB;AACtE,SACE,oBAAC,YAAS,MAAa,GAAG,OACvB,UACH;AAEJ;AAoDA,MAAM,eAAe,cAA6C,MAAS;AAGpE,SAAS,WAA8B;AAC5C,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qGAAsE;AAAA,EACxF;AACA,SAAO;AACT;AAUA,SAAS,kBAAkB,aAAyC;AAClE,SAAO,mBAAmB,eAAe,SAAS;AACpD;AASA,SAAS,gBAAyB;AAChC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,EAAE,QAAQ,OAAO,IAAI,OAAO;AAClC,SAAO,OAAO,WAAW,eAAe,MAAM,uBAAuB,SAAS,CAAC,KAAK,EAAE;AACxF;AAEA,SAAS,oBAAoB,aAAiD;AAC5E,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,MAAI;AACF,UAAM,MAAM,OAAO,aAAa,QAAQ,kBAAkB,WAAW,CAAC;AACtE,QAAI,QAAQ,IAAK,QAAO;AACxB,QAAI,QAAQ,IAAK,QAAO;AACxB,WAAO;AAAA,EACT,QAAQ;AAEN,WAAO;AAAA,EACT;AACF;AAuFO,SAAS,cAAc;AAAA,EAC5B,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR;AACF,GAAuB;AAErB,QAAM,eAAe,YAAY;AACjC,QAAM,WAAW,gBAAgB,gBAAgB;AAKjD,QAAM,eAAe,QAAQ,MAAM,eAAe,gBAAgB,GAAG,CAAC,gBAAgB,CAAC;AAEvF,QAAM,mBAAmB;AAAA,IACvB,MAAM,WAAW,KAAK,CAAC,cAAc,UAAU,OAAO,kBAAkB,KAAK,WAAW,CAAC,KAAK;AAAA,IAC9F,CAAC,YAAY,kBAAkB;AAAA,EACjC;AAEA,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,aAAc,QAAO,KAAK,KAAK,CAAC,QAAQ,IAAI,OAAO,YAAY,KAAK;AACxE,WAAO,kBAAkB,MAAM,QAAQ;AAAA,EACzC,GAAG,CAAC,MAAM,cAAc,QAAQ,CAAC;AAEjC,QAAM,YAAY,QAAQ,MAAM,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC;AACvD,QAAM,SAAS,QAAqB,OAAO,EAAE,GAAG,sBAAsB,GAAG,WAAW,IAAI,CAAC,UAAU,CAAC;AAEpG,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,uBAAuB;AAChF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAmB5D,YAAU,MAAM;AACd,UAAM,SAAS,sBAAsB,oBAAoB,kBAAkB,EAAE,IAAI;AACjF,QAAI,WAAW,MAAM;AACnB,0BAAoB,MAAM;AAC1B;AAAA,IACF;AACA,QAAI,2BAA2B,cAAc,EAAG,qBAAoB,IAAI;AAAA,EAC1E,GAAG,CAAC,qBAAqB,kBAAkB,IAAI,uBAAuB,CAAC;AAEvE,QAAM,mBAAmB;AAAA,IACvB,CAAC,cAAuB;AACtB,UAAI,CAAC,uBAAuB,OAAO,WAAW,YAAa;AAC3D,UAAI;AACF,eAAO,aAAa,QAAQ,kBAAkB,kBAAkB,EAAE,GAAG,YAAY,MAAM,GAAG;AAAA,MAC5F,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,kBAAkB,EAAE;AAAA,EAC5C;AAEA,QAAM,wBAAwB;AAAA,IAC5B,CAAC,cAAuB;AACtB,0BAAoB,SAAS;AAC7B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,wBAAoB,CAAC,SAAS;AAC5B,YAAM,OAAO,CAAC;AACd,uBAAiB,IAAI;AACrB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,gBAAgB,CAAC;AAGrB,YAAU,MAAM;AACd,QAAI,CAAC,gBAAiB;AAEtB,UAAM,eAAe,gBAAgB,IAAI;AAEzC,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,YAAM,SAAS,MAAM;AAErB,YAAM,WACJ,kBAAkB,oBAClB,kBAAkB,uBAClB,kBAAkB,qBACjB,kBAAkB,eAAe,OAAO;AAE3C,UAAI,MAAM,QAAQ,UAAU;AAC1B,8BAAsB,KAAK;AAC3B,0BAAkB,KAAK;AACvB,2BAAmB,KAAK;AACxB;AAAA,MACF;AAEA,UAAI,SAAU;AAEd,YAAM,MAAM,MAAM,WAAW,MAAM;AACnC,YAAM,MAAM,MAAM,IAAI,YAAY;AAGlC,UAAI,OAAO,MAAM,YAAY,QAAQ,KAAK;AACxC,cAAM,eAAe;AACrB,2BAAmB,CAAC,SAAS,CAAC,IAAI;AAClC;AAAA,MACF;AAGA,UAAI,OAAO,CAAC,MAAM,YAAY,QAAQ,KAAK;AACzC,cAAM,eAAe;AACrB,8BAAsB,CAAC,SAAS,CAAC,IAAI;AACrC;AAAA,MACF;AAGA,UAAI,OAAO,CAAC,MAAM,YAAY,QAAQ,KAAK;AACzC,cAAM,eAAe;AACrB,sBAAc;AACd;AAAA,MACF;AAIA,UAAI,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,MAAM,SAAS;AACpD,cAAM,QAAQ,iBAAiB,KAAK,MAAM,IAAI;AAC9C,YAAI,QAAQ,CAAC,GAAG;AACd,gBAAM,QAAQ,OAAO,SAAS,MAAM,CAAC,GAAG,EAAE,IAAI;AAC9C,gBAAM,MAAM,aAAa,KAAK;AAC9B,cAAI,KAAK;AACP,kBAAM,eAAe;AACrB,0BAAc,GAAG;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,iBAAiB,MAAM,aAAa,aAAa,CAAC;AAItD,YAAU,MAAM;AACd,sBAAkB,KAAK;AACvB,uBAAmB,KAAK;AACxB,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,aAAa,UAAb,EAAsB,OACrB,8BAAC,mBAAgB,eAAe,KAAM,UAAS,GACjD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/shell-context.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * ĐUÔI `.js` LÀ CHỦ ĐÍCH, ĐỪNG BỎ.\n *\n * Gói `next` KHÔNG khai `exports` map, nên `next/link` chỉ là đường dẫn file. Bundler\n * (webpack/Turbopack) tự thêm đuôi rồi trỏ đúng `node_modules/next/link.js`; Node ESM thuần thì\n * KHÔNG — nó ném `ERR_MODULE_NOT_FOUND: Cannot find module .../next/link` kèm gợi ý\n * \"Did you mean next/link.js?\". Hậu quả: `node -e \"await import('@comitor/ui/shell')\"` chết ngay\n * lúc nạp, tức là mọi smoke-test entry của CI đều mù với riêng entry shell.\n *\n * Ghi thẳng `next/link.js` / `next/navigation.js` là CÙNG MỘT file mà bundler vẫn resolve tới\n * (đã đối chiếu: `next` không có `resolve.alias` cho hai specifier này trong\n * `dist/build/create-compiler-aliases.js`), nhưng Node cũng nạp được.\n */\nimport NextLinkModule from \"next/link.js\";\nimport { usePathname } from \"next/navigation.js\";\nimport { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { TooltipProvider } from \"../components/ui/tooltip.js\";\nimport { useComitorLabels } from \"../i18n/locale-provider.js\";\nimport { layout } from \"../tokens.js\";\nimport type {\n  AppDescriptor,\n  NavGroup,\n  ShellLabels,\n  ShellLinkComponent,\n  ShellLinkProps,\n  ShellNav,\n  ShellUser,\n  Workspace\n} from \"./types.js\";\nimport { getEntitledApps, type NavSearchParams, resolveCurrentApp, toNavGroups, toSearchParams } from \"./utils.js\";\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Link mặc định\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Chuẩn hoá interop của `next/link.js`.\n *\n * Hai môi trường trả về hai hình dạng khác nhau cho cùng một file CJS:\n *   - bundler  → đã interop sẵn, biến này CHÍNH LÀ component `Link`\n *   - Node ESM → biến này là namespace `{ default: Link, useLinkStatus }`\n * `.default ?? chính nó` đúng ở cả hai (component `Link` không có thuộc tính `default`).\n */\nconst NextLink = ((NextLinkModule as unknown as { default?: ShellLinkComponent }).default ??\n  NextLinkModule) as ShellLinkComponent;\n\n/**\n * Bọc `next/link` thay vì truyền thẳng: hình dạng props của NextLink rộng hơn\n * `ShellLinkProps` (href nhận cả UrlObject), bọc lại cho khớp type và để chỗ\n * thay adapter router khác về sau.\n */\nfunction DefaultShellLink({ href, children, ...props }: ShellLinkProps) {\n  return (\n    <NextLink href={href} {...props}>\n      {children}\n    </NextLink>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Context\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellContextValue {\n  /* Trục 1 — workspace */\n  workspaces: Workspace[];\n  currentWorkspace: Workspace | null;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /* Trục 2 — app */\n  apps: AppDescriptor[];\n  currentApp: AppDescriptor | null;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /* Điều hướng trong app hiện tại */\n  nav: NavGroup[];\n  pathname: string;\n  /**\n   * Query hiện tại đã chuẩn hoá, hoặc `null` khi app không truyền.\n   * `null` KHÁC rỗng: rỗng nghĩa là \"URL không có query\", `null` nghĩa là \"shell không biết\"\n   * — và active matching xử lý hai ca đó khác nhau (xem `isNavItemActive`).\n   */\n  searchParams: URLSearchParams | null;\n  LinkComponent: ShellLinkComponent;\n  onNavigate?: (href: string) => void;\n\n  /* Người dùng */\n  user: ShellUser | null;\n  onLogout?: () => void;\n\n  /* Trạng thái khung */\n  sidebarCollapsed: boolean;\n  setSidebarCollapsed: (collapsed: boolean) => void;\n  toggleSidebar: () => void;\n  mobileMenuOpen: boolean;\n  setMobileMenuOpen: (open: boolean) => void;\n  commandPaletteOpen: boolean;\n  setCommandPaletteOpen: (open: boolean) => void;\n  appLauncherOpen: boolean;\n  setAppLauncherOpen: (open: boolean) => void;\n\n  /* Chuỗi hiển thị (bảng `shell` của `ComitorLocaleProvider`, đã trộn override của app) */\n  labels: ShellLabels;\n}\n\nconst ShellContext = createContext<ShellContextValue | undefined>(undefined);\n\n/** Truy cập state của shell — phải gọi bên trong `<ShellProvider>`. */\nexport function useShell(): ShellContextValue {\n  const context = useContext(ShellContext);\n  if (!context) {\n    throw new Error(\"useShell phải được dùng bên trong <ShellProvider> (hoặc <AppShell>).\");\n  }\n  return context;\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Ghi nhớ trạng thái thu gọn sidebar\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Khoá localStorage theo workspace — mỗi workspace nhớ riêng trạng thái sidebar\n * (spec §7.6: KHÔNG dùng cookie `sidebar_state` của shadcn để tránh hai nguồn sự thật).\n */\nfunction sidebarStorageKey(workspaceId: string | undefined): string {\n  return `comitor-sidebar:${workspaceId ?? \"default\"}`;\n}\n\n/**\n * Đang ở dải TABLET? — từ `breakpoints.mobile` (768px, mốc thanh bên thôi off-canvas) tới ngay\n * dưới `breakpoints.tablet` (1024px).\n *\n * Hai mốc lấy từ `layout.breakpoints` của `@comitor/ui/tokens` chứ không gõ số ở đây: đổi mốc mà\n * quên chỗ này thì thanh bên tự sập ở một dải mà CSS không còn coi là tablet nữa.\n */\nfunction isTabletWidth(): boolean {\n  if (typeof window === \"undefined\") return false;\n  const { mobile, tablet } = layout.breakpoints;\n  return window.matchMedia(`(min-width: ${mobile}px) and (max-width: ${tablet - 1}px)`).matches;\n}\n\nfunction readStoredCollapsed(workspaceId: string | undefined): boolean | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(sidebarStorageKey(workspaceId));\n    if (raw === \"1\") return true;\n    if (raw === \"0\") return false;\n    return null;\n  } catch {\n    // Safari private mode / storage bị chặn — coi như chưa có giá trị lưu.\n    return null;\n  }\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Provider\n   ──────────────────────────────────────────────────────────────────────────── */\n\nexport interface ShellProviderProps {\n  /** Trục 1 — danh sách workspace của user. Rỗng/1 phần tử thì WorkspaceSwitcher tự ẩn danh sách. */\n  workspaces?: Workspace[];\n  /** Workspace đang mở; bỏ trống → lấy phần tử đầu. */\n  currentWorkspaceId?: string;\n  onWorkspaceChange?: (workspaceId: string) => void;\n  onCreateWorkspace?: () => void;\n  onWorkspaceSettings?: (workspaceId: string) => void;\n  onInviteMembers?: (workspaceId: string) => void;\n\n  /** Trục 2 — danh sách app của hệ sinh thái (kể cả app chưa mở khoá). */\n  apps?: AppDescriptor[];\n  /** App đang mở; bỏ trống → suy từ `pathname` (khớp prefix dài nhất). */\n  currentAppId?: string;\n  onAppSelect?: (app: AppDescriptor) => void;\n  onUpsell?: (appId: string) => void;\n\n  /** Menu của app hiện tại — `NavItem[]` hoặc `NavGroup[]`. */\n  nav?: ShellNav;\n  /**\n   * Ghi đè pathname (Storybook, app không-Next). Bỏ trống → dùng `usePathname()`\n   * của next/navigation (trả `null` khi không có App Router → coi như \"\").\n   */\n  pathname?: string;\n  /**\n   * Query hiện tại — CHỈ cần khi menu có mục phân biệt nhau bằng query\n   * (`/cai-dat?tab=chung` ⇄ `/cai-dat?tab=thanh-vien`). Bỏ trống thì mọi mục cùng đường dẫn\n   * cùng sáng.\n   *\n   * Nhận `useSearchParams()` của Next, chuỗi `\"?tab=x\"`, hoặc object `searchParams` của\n   * Server Component.\n   *\n   * ⚠ Shell KHÔNG tự gọi `useSearchParams()`: hook đó ép trang bọc `<Suspense>` và đẩy trang\n   * sang render phía client khi build tĩnh — cái giá đó phải do app tự chọn, không phải do\n   * việc lỡ import shell. Truyền vào từ một client component đã có sẵn boundary:\n   *\n   * ```tsx\n   * \"use client\";\n   * const searchParams = useSearchParams();\n   * return <AppShell searchParams={searchParams} …>{children}</AppShell>;\n   * ```\n   */\n  searchParams?: NavSearchParams | null;\n  /**\n   * Ở dải TABLET (768–1023px), khi người dùng CHƯA từng gạt thanh bên, mở app lần đầu thì thanh\n   * bên thu gọn sẵn. Mặc định `true`.\n   *\n   * Đặt `false` khi app muốn thanh bên luôn mở rộng ở tablet — vd điều hướng là thứ chính của\n   * màn hình đó. Lựa chọn ĐÃ LƯU của người dùng luôn thắng cờ này.\n   */\n  collapseSidebarOnTablet?: boolean;\n  /** Component link thay `next/link` (app không-Next). */\n  LinkComponent?: ShellLinkComponent;\n  /** Gọi sau mỗi lần người dùng bấm một mục điều hướng (analytics, đóng panel…). */\n  onNavigate?: (href: string) => void;\n\n  user?: ShellUser | null;\n  onLogout?: () => void;\n\n  /** Trạng thái thu gọn ban đầu (SSR). Sau khi mount, localStorage của workspace thắng. */\n  defaultSidebarCollapsed?: boolean;\n  /** Tắt ghi nhớ localStorage (Storybook, chế độ kiosk). */\n  persistSidebarState?: boolean;\n  /** Tắt bộ phím tắt toàn cục. */\n  enableShortcuts?: boolean;\n\n  /**\n   * Override từng chuỗi hiển thị. Không truyền thì theo namespace `shell` của\n   * `ComitorLocaleProvider` gần nhất (không có provider → tiếng Anh).\n   */\n  labels?: Partial<ShellLabels>;\n\n  children: ReactNode;\n}\n\n/**\n * Provider của app shell Comitor: giữ hai trục điều hướng (workspace × app),\n * trạng thái khung (sidebar/mobile/command palette/app launcher), phím tắt toàn cục,\n * và bọc sẵn `TooltipProvider`.\n *\n * KHÔNG dùng `useRouter()` của next/navigation: hook đó *ném lỗi* khi thiếu App Router\n * (Storybook, test). Mọi điều hướng chủ động là việc của app qua callback\n * `onWorkspaceChange` / `onAppSelect` / `onNavigate`; link tĩnh đi qua `LinkComponent`.\n */\nexport function ShellProvider({\n  workspaces = [],\n  currentWorkspaceId,\n  onWorkspaceChange,\n  onCreateWorkspace,\n  onWorkspaceSettings,\n  onInviteMembers,\n  apps = [],\n  currentAppId,\n  onAppSelect,\n  onUpsell,\n  nav,\n  pathname: pathnameProp,\n  searchParams: searchParamsProp,\n  LinkComponent = DefaultShellLink,\n  onNavigate,\n  user = null,\n  onLogout,\n  defaultSidebarCollapsed = false,\n  collapseSidebarOnTablet = true,\n  persistSidebarState = true,\n  enableShortcuts = true,\n  labels: labelsProp,\n  children\n}: ShellProviderProps) {\n  // `usePathname()` trả null khi không có App Router → fallback chuỗi rỗng thay vì crash.\n  const nextPathname = usePathname();\n  const pathname = pathnameProp ?? nextPathname ?? \"\";\n\n  // Chuẩn hoá MỘT lần ở đây thay vì mỗi lần `isNavItemActive` chạy: prop có thể là chuỗi\n  // hoặc object, mà mỗi lần dựng `URLSearchParams` mới là một identity mới → mọi memo bên\n  // dưới hỏng. Khoá memo là chính prop app truyền vào.\n  const searchParams = useMemo(() => toSearchParams(searchParamsProp), [searchParamsProp]);\n\n  const currentWorkspace = useMemo(\n    () => workspaces.find((workspace) => workspace.id === currentWorkspaceId) ?? workspaces[0] ?? null,\n    [workspaces, currentWorkspaceId]\n  );\n\n  const currentApp = useMemo(() => {\n    if (currentAppId) return apps.find((app) => app.id === currentAppId) ?? null;\n    return resolveCurrentApp(apps, pathname);\n  }, [apps, currentAppId, pathname]);\n\n  const navGroups = useMemo(() => toNavGroups(nav), [nav]);\n  const labels = useComitorLabels(\"shell\", labelsProp);\n\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultSidebarCollapsed);\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);\n  const [appLauncherOpen, setAppLauncherOpen] = useState(false);\n\n  /*\n   * Nạp trạng thái đã lưu SAU khi mount (đọc localStorage lúc render đầu sẽ lệch hydration).\n   *\n   * Nếu CHƯA có lựa chọn nào của người dùng thì ở dải TABLET thanh bên mặc định thu gọn: từ 768px\n   * thanh bên đã chiếm chỗ thật trong bố cục (dưới mức đó nó là sheet off-canvas), mà 768–1023px\n   * thì 256px của nó ăn tới một phần ba bề ngang — vùng nội dung còn ~512px cho một bảng nhiều cột.\n   *\n   * ⚠ KHÔNG ghi lựa chọn này vào localStorage. Đây là GIÁ TRỊ MẶC ĐỊNH, không phải quyết định của\n   * người dùng: ghi xuống là lần sau mở ở màn hình rộng thanh bên vẫn thu gọn vì \"đã có lựa chọn\n   * lưu\", mà người dùng thì chưa bấm gì cả. Chỉ khi họ tự gạt thì `applySidebarCollapsed` mới lưu.\n   *\n   * ⚠ Chỉ chạy MỘT LẦN lúc mở, không theo dõi resize. \"Mặc định khi mới mở\" khác với \"ép theo bề\n   * ngang\": kéo cửa sổ hẹp lại giữa phiên mà thanh bên tự sập là giật thứ người dùng đang cầm.\n   *\n   * Đọc bề ngang trong effect nên không đụng tới hydration — server không có `window`, và lần\n   * render đầu ở client vẫn dùng đúng `defaultSidebarCollapsed` mà server đã render.\n   */\n  useEffect(() => {\n    const stored = persistSidebarState ? readStoredCollapsed(currentWorkspace?.id) : null;\n    if (stored !== null) {\n      setSidebarCollapsed(stored);\n      return;\n    }\n    if (collapseSidebarOnTablet && isTabletWidth()) setSidebarCollapsed(true);\n  }, [persistSidebarState, currentWorkspace?.id, collapseSidebarOnTablet]);\n\n  const persistCollapsed = useCallback(\n    (collapsed: boolean) => {\n      if (!persistSidebarState || typeof window === \"undefined\") return;\n      try {\n        window.localStorage.setItem(sidebarStorageKey(currentWorkspace?.id), collapsed ? \"1\" : \"0\");\n      } catch {\n        // Bỏ qua: không ghi được localStorage thì trạng thái chỉ sống trong phiên.\n      }\n    },\n    [persistSidebarState, currentWorkspace?.id]\n  );\n\n  const applySidebarCollapsed = useCallback(\n    (collapsed: boolean) => {\n      setSidebarCollapsed(collapsed);\n      persistCollapsed(collapsed);\n    },\n    [persistCollapsed]\n  );\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarCollapsed((prev) => {\n      const next = !prev;\n      persistCollapsed(next);\n      return next;\n    });\n  }, [persistCollapsed]);\n\n  // Phím tắt toàn cục (§7.4)\n  useEffect(() => {\n    if (!enableShortcuts) return;\n\n    const entitledApps = getEntitledApps(apps);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const target = event.target;\n      // Đang gõ trong ô nhập → nhường phím cho ô nhập.\n      const isTyping =\n        target instanceof HTMLInputElement ||\n        target instanceof HTMLTextAreaElement ||\n        target instanceof HTMLSelectElement ||\n        (target instanceof HTMLElement && target.isContentEditable);\n\n      if (event.key === \"Escape\") {\n        setCommandPaletteOpen(false);\n        setMobileMenuOpen(false);\n        setAppLauncherOpen(false);\n        return;\n      }\n\n      if (isTyping) return;\n\n      const mod = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      // Cmd/Ctrl + Shift + K — AppLauncher (phải xét TRƯỚC Cmd+K vì cùng phím \"k\")\n      if (mod && event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setAppLauncherOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + K — Command Palette\n      if (mod && !event.shiftKey && key === \"k\") {\n        event.preventDefault();\n        setCommandPaletteOpen((prev) => !prev);\n        return;\n      }\n\n      // Cmd/Ctrl + B — thu gọn/mở sidebar\n      if (mod && !event.shiftKey && key === \"b\") {\n        event.preventDefault();\n        toggleSidebar();\n        return;\n      }\n\n      // Alt + 1…9 — nhảy tới app thứ n đã được cấp quyền.\n      // Dùng `event.code` chứ không `event.key`: trên macOS Alt+1 cho ra \"¡\".\n      if (event.altKey && !event.ctrlKey && !event.metaKey) {\n        const match = /^Digit([1-9])$/.exec(event.code);\n        if (match?.[1]) {\n          const index = Number.parseInt(match[1], 10) - 1;\n          const app = entitledApps[index];\n          if (app) {\n            event.preventDefault();\n            onAppSelect?.(app);\n          }\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [enableShortcuts, apps, onAppSelect, toggleSidebar]);\n\n  // Đổi route → đóng mọi overlay đang mở.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: chủ đích chạy theo MỌI lần đổi pathname\n  useEffect(() => {\n    setMobileMenuOpen(false);\n    setAppLauncherOpen(false);\n    setCommandPaletteOpen(false);\n  }, [pathname]);\n\n  const value = useMemo<ShellContextValue>(\n    () => ({\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      nav: navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      setSidebarCollapsed: applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      setMobileMenuOpen,\n      commandPaletteOpen,\n      setCommandPaletteOpen,\n      appLauncherOpen,\n      setAppLauncherOpen,\n      labels\n    }),\n    [\n      workspaces,\n      currentWorkspace,\n      onWorkspaceChange,\n      onCreateWorkspace,\n      onWorkspaceSettings,\n      onInviteMembers,\n      apps,\n      currentApp,\n      onAppSelect,\n      onUpsell,\n      navGroups,\n      pathname,\n      searchParams,\n      LinkComponent,\n      onNavigate,\n      user,\n      onLogout,\n      sidebarCollapsed,\n      applySidebarCollapsed,\n      toggleSidebar,\n      mobileMenuOpen,\n      commandPaletteOpen,\n      appLauncherOpen,\n      labels\n    ]\n  );\n\n  return (\n    <ShellContext.Provider value={value}>\n      <TooltipProvider delayDuration={200}>{children}</TooltipProvider>\n    </ShellContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/sidebar.d.ts

@@ -5,7 +5,7 @@ interface SidebarProps {
     className?: string;
     /** Slot ngay dưới WorkspaceSwitcher (vd nút "Tạo mới", ô tìm nhanh). */
     header?: ReactNode;
-    /** Slot đáy sidebar (dung lượng gói, "Mời thành viên", phiên bản app…). */
+    /** Slot đáy sidebar (dung lượng gói, nút mời thành viên, phiên bản app…). */
     footer?: ReactNode;
     /** Ẩn WorkspaceSwitcher ở đỉnh — dùng khi app đặt bộ chuyển workspace ở header. */
     showWorkspaceSwitcher?: boolean;

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                  /*\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":[]}
+{"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, nút 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 `collapseSidebarShort`),\n                   *   nên màu của nó chịu ngưỡng VĂN BẢN 4,5:1. `/60` phẳng ra `#6C6E71` =\n                   *   **4,90:1** ✓, còn `--muted-foreground` chỉ **3,67:1** ✗ — đổi màu cả nút là\n                   *   làm rớt AA đúng 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/theme-toggle.d.ts

@@ -16,11 +16,14 @@ type ThemeChoice = "light" | "dark" | "system";
 interface ThemeToggleProps {
     className?: string;
     /**
-     * "icon"  — một nút, bấm là lật Sáng ⇄ Tối (mặc định, dùng ở header).
-     * "menu"  — dropdown 3 lựa chọn Sáng / Tối / Hệ thống.
+     * "icon"  — một nút, bấm là lật sáng ⇄ tối (mặc định, dùng ở header).
+     * "menu"  — dropdown 3 lựa chọn `themeLight` / `themeDark` / `themeSystem`.
      */
     variant?: "icon" | "menu";
-    /** Override chuỗi hiển thị (mặc định tiếng Việt). `AppHeader` truyền labels của shell xuống. */
+    /**
+     * Override chuỗi hiển thị. Không truyền thì theo namespace `shell` của `ComitorLocaleProvider`
+     * (không có provider → tiếng Anh). `AppHeader` truyền labels của shell xuống.
+     */
     labels?: Partial<ThemeToggleLabels>;
     /**
      * Gọi SAU khi người dùng đổi — cùng khuôn với `onContrastChange` của `ContrastToggle`.

package/dist/shell/theme-toggle.js

@@ -10,15 +10,15 @@ import {
   DropdownMenuTrigger
 } from "../components/ui/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { useComitorLabels } from "../i18n/locale-provider.js";
 import { cn } from "../lib/cn.js";
-import { DEFAULT_SHELL_LABELS } from "./types.js";
 function ThemeToggle({ className, variant = "icon", labels: labelsProp, onThemeChange }) {
   const { theme, resolvedTheme, setTheme } = useTheme();
+  const labels = useComitorLabels("shell", labelsProp);
   const choose = (next) => {
     setTheme(next);
     onThemeChange?.(next);
   };
-  const labels = { ...DEFAULT_SHELL_LABELS, ...labelsProp };
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);

package/dist/shell/theme-toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { DEFAULT_SHELL_LABELS, type ShellLabels } from \"./types.js\";\n\n/** Chỉ những nhãn ThemeToggle thực sự dùng — để nút này KHÔNG buộc phải nằm trong ShellProvider. */\nexport type ThemeToggleLabels = Pick<ShellLabels, \"themeLight\" | \"themeDark\" | \"themeSystem\" | \"toggleTheme\">;\n\n/**\n * Ba lựa chọn mà `ThemeToggle` ghi ra — tập ĐÓNG, và `\"system\"` là một giá trị thật chứ không phải\n * \"chưa chọn\".\n *\n * ⚠ App nào lưu giá trị này (ví dụ làm mặc định theo tài khoản) phải chấp nhận đủ CẢ BA. Ép nó về\n * hai trạng thái sáng/tối là làm mất lựa chọn \"đi theo hệ điều hành\" — thứ mà người bật chế độ tối\n * theo giờ trong ngày sẽ mất ngay khi họ đăng nhập ở một máy khác.\n */\nexport type ThemeChoice = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeToggleProps {\n  className?: string;\n  /**\n   * \"icon\"  — một nút, bấm là lật Sáng ⇄ Tối (mặc định, dùng ở header).\n   * \"menu\"  — dropdown 3 lựa chọn Sáng / Tối / Hệ thống.\n   */\n  variant?: \"icon\" | \"menu\";\n  /** Override chuỗi hiển thị (mặc định tiếng Việt). `AppHeader` truyền labels của shell xuống. */\n  labels?: Partial<ThemeToggleLabels>;\n  /**\n   * Gọi SAU khi người dùng đổi — cùng khuôn với `onContrastChange` của `ContrastToggle`.\n   *\n   * ⚠ Callback THÔNG BÁO, không phải `onChange` của component controlled: theme CÓ HIỆU LỰC vẫn do\n   * `next-themes` giữ trong `localStorage`. Prop này để app ghi một MẶC ĐỊNH theo tài khoản ở nơi\n   * khác. Xem `DensityToggleProps.onDensityChange` cho lý do đầy đủ.\n   *\n   * ⚠ Nhận đủ ba giá trị kể cả `\"system\"` — và ở `variant=\"icon\"` thì nó KHÔNG BAO GIỜ phát\n   * `\"system\"`, vì nút ấy chỉ lật sáng ⇄ tối. Muốn người dùng chọn được \"hệ thống\" thì phải dùng\n   * `variant=\"menu\"`.\n   */\n  onThemeChange?: (theme: ThemeChoice) => void;\n}\n\n/**\n * Nút đổi giao diện — dùng được ĐỘC LẬP (trang đăng nhập, trang marketing),\n * không bắt buộc nằm trong `ShellProvider`.\n *\n * Chống lệch hydration bằng cờ `mounted`: theme thật chỉ biết được ở client\n * (đọc localStorage/`prefers-color-scheme`), render thẳng icon theo theme ngay\n * lần đầu sẽ lệch với HTML do server sinh ra. Trước khi mount hiện ô rỗng cùng\n * kích thước để layout không nhảy.\n */\nexport function ThemeToggle({ className, variant = \"icon\", labels: labelsProp, onThemeChange }: ThemeToggleProps) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n\n  /*\n   * Gói hai lời gọi lại làm một: bốn chỗ đổi theme trong file này (ba mục menu + nút lật) đều phải\n   * báo, và một chỗ quên báo là một đường mà app không bao giờ ghi được mặc định — thứ chỉ lộ ra\n   * khi người dùng đăng nhập ở máy khác.\n   */\n  const choose = (next: ThemeChoice) => {\n    setTheme(next);\n    onThemeChange?.(next);\n  };\n  const labels: ThemeToggleLabels = { ...DEFAULT_SHELL_LABELS, ...labelsProp };\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const buttonClass = 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    className\n  );\n\n  if (!mounted) {\n    return <span className={buttonClass} aria-hidden />;\n  }\n\n  if (variant === \"menu\") {\n    return (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button type=\"button\" className={buttonClass} aria-label={labels.toggleTheme}>\n            {resolvedTheme === \"dark\" ? <Moon className=\"size-4\" /> : <Sun className=\"size-4\" />}\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuItem onClick={() => choose(\"light\")} className={cn(theme === \"light\" && \"bg-accent\")}>\n            <Sun className=\"size-4\" />\n            {labels.themeLight}\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => choose(\"dark\")} className={cn(theme === \"dark\" && \"bg-accent\")}>\n            <Moon className=\"size-4\" />\n            {labels.themeDark}\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => choose(\"system\")} className={cn(theme === \"system\" && \"bg-accent\")}>\n            <Monitor className=\"size-4\" />\n            {labels.themeSystem}\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    );\n  }\n\n  const nextTheme: ThemeChoice = resolvedTheme === \"dark\" ? \"light\" : \"dark\";\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button type=\"button\" onClick={() => choose(nextTheme)} className={buttonClass} aria-label={labels.toggleTheme}>\n          {resolvedTheme === \"dark\" ? <Sun className=\"size-4\" /> : <Moon className=\"size-4\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"bottom\">{nextTheme === \"dark\" ? labels.themeDark : labels.themeLight}</TooltipContent>\n    </Tooltip>\n  );\n}\n"],"mappings":";AAsFW,cAYD,YAZC;AApFX,SAAS,SAAS,MAAM,WAAW;AACnC,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,4BAA8C;AA+ChD,SAAS,YAAY,EAAE,WAAW,UAAU,QAAQ,QAAQ,YAAY,cAAc,GAAqB;AAChH,QAAM,EAAE,OAAO,eAAe,SAAS,IAAI,SAAS;AAOpD,QAAM,SAAS,CAAC,SAAsB;AACpC,aAAS,IAAI;AACb,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,SAA4B,EAAE,GAAG,sBAAsB,GAAG,WAAW;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO,oBAAC,UAAK,WAAW,aAAa,eAAW,MAAC;AAAA,EACnD;AAEA,MAAI,YAAY,QAAQ;AACtB,WACE,qBAAC,gBACC;AAAA,0BAAC,uBAAoB,SAAO,MAC1B,8BAAC,YAAO,MAAK,UAAS,WAAW,aAAa,cAAY,OAAO,aAC9D,4BAAkB,SAAS,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,OAAI,WAAU,UAAS,GACpF,GACF;AAAA,MACA,qBAAC,uBAAoB,OAAM,OACzB;AAAA,6BAAC,oBAAiB,SAAS,MAAM,OAAO,OAAO,GAAG,WAAW,GAAG,UAAU,WAAW,WAAW,GAC9F;AAAA,8BAAC,OAAI,WAAU,UAAS;AAAA,UACvB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,OAAO,MAAM,GAAG,WAAW,GAAG,UAAU,UAAU,WAAW,GAC5F;AAAA,8BAAC,QAAK,WAAU,UAAS;AAAA,UACxB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,OAAO,QAAQ,GAAG,WAAW,GAAG,UAAU,YAAY,WAAW,GAChG;AAAA,8BAAC,WAAQ,WAAU,UAAS;AAAA,UAC3B,OAAO;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,YAAyB,kBAAkB,SAAS,UAAU;AAEpE,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,8BAAC,YAAO,MAAK,UAAS,SAAS,MAAM,OAAO,SAAS,GAAG,WAAW,aAAa,cAAY,OAAO,aAChG,4BAAkB,SAAS,oBAAC,OAAI,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS,GACpF,GACF;AAAA,IACA,oBAAC,kBAAe,MAAK,UAAU,wBAAc,SAAS,OAAO,YAAY,OAAO,YAAW;AAAA,KAC7F;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { useComitorLabels } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\nimport type { ShellLabels } from \"./types.js\";\n\n/** Chỉ những nhãn ThemeToggle thực sự dùng — để nút này KHÔNG buộc phải nằm trong ShellProvider. */\nexport type ThemeToggleLabels = Pick<ShellLabels, \"themeLight\" | \"themeDark\" | \"themeSystem\" | \"toggleTheme\">;\n\n/**\n * Ba lựa chọn mà `ThemeToggle` ghi ra — tập ĐÓNG, và `\"system\"` là một giá trị thật chứ không phải\n * \"chưa chọn\".\n *\n * ⚠ App nào lưu giá trị này (ví dụ làm mặc định theo tài khoản) phải chấp nhận đủ CẢ BA. Ép nó về\n * hai trạng thái sáng/tối là làm mất lựa chọn \"đi theo hệ điều hành\" — thứ mà người bật chế độ tối\n * theo giờ trong ngày sẽ mất ngay khi họ đăng nhập ở một máy khác.\n */\nexport type ThemeChoice = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeToggleProps {\n  className?: string;\n  /**\n   * \"icon\"  — một nút, bấm là lật sáng ⇄ tối (mặc định, dùng ở header).\n   * \"menu\"  — dropdown 3 lựa chọn `themeLight` / `themeDark` / `themeSystem`.\n   */\n  variant?: \"icon\" | \"menu\";\n  /**\n   * Override chuỗi hiển thị. Không truyền thì theo namespace `shell` của `ComitorLocaleProvider`\n   * (không có provider → tiếng Anh). `AppHeader` truyền labels của shell xuống.\n   */\n  labels?: Partial<ThemeToggleLabels>;\n  /**\n   * Gọi SAU khi người dùng đổi — cùng khuôn với `onContrastChange` của `ContrastToggle`.\n   *\n   * ⚠ Callback THÔNG BÁO, không phải `onChange` của component controlled: theme CÓ HIỆU LỰC vẫn do\n   * `next-themes` giữ trong `localStorage`. Prop này để app ghi một MẶC ĐỊNH theo tài khoản ở nơi\n   * khác. Xem `DensityToggleProps.onDensityChange` cho lý do đầy đủ.\n   *\n   * ⚠ Nhận đủ ba giá trị kể cả `\"system\"` — và ở `variant=\"icon\"` thì nó KHÔNG BAO GIỜ phát\n   * `\"system\"`, vì nút ấy chỉ lật sáng ⇄ tối. Muốn người dùng chọn được \"hệ thống\" thì phải dùng\n   * `variant=\"menu\"`.\n   */\n  onThemeChange?: (theme: ThemeChoice) => void;\n}\n\n/**\n * Nút đổi giao diện — dùng được ĐỘC LẬP (trang đăng nhập, trang marketing),\n * không bắt buộc nằm trong `ShellProvider`.\n *\n * Chống lệch hydration bằng cờ `mounted`: theme thật chỉ biết được ở client\n * (đọc localStorage/`prefers-color-scheme`), render thẳng icon theo theme ngay\n * lần đầu sẽ lệch với HTML do server sinh ra. Trước khi mount hiện ô rỗng cùng\n * kích thước để layout không nhảy.\n */\nexport function ThemeToggle({ className, variant = \"icon\", labels: labelsProp, onThemeChange }: ThemeToggleProps) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n  const labels: ThemeToggleLabels = useComitorLabels(\"shell\", labelsProp);\n\n  /*\n   * Gói hai lời gọi lại làm một: bốn chỗ đổi theme trong file này (ba mục menu + nút lật) đều phải\n   * báo, và một chỗ quên báo là một đường mà app không bao giờ ghi được mặc định — thứ chỉ lộ ra\n   * khi người dùng đăng nhập ở máy khác.\n   */\n  const choose = (next: ThemeChoice) => {\n    setTheme(next);\n    onThemeChange?.(next);\n  };\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const buttonClass = 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    className\n  );\n\n  if (!mounted) {\n    return <span className={buttonClass} aria-hidden />;\n  }\n\n  if (variant === \"menu\") {\n    return (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button type=\"button\" className={buttonClass} aria-label={labels.toggleTheme}>\n            {resolvedTheme === \"dark\" ? <Moon className=\"size-4\" /> : <Sun className=\"size-4\" />}\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuItem onClick={() => choose(\"light\")} className={cn(theme === \"light\" && \"bg-accent\")}>\n            <Sun className=\"size-4\" />\n            {labels.themeLight}\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => choose(\"dark\")} className={cn(theme === \"dark\" && \"bg-accent\")}>\n            <Moon className=\"size-4\" />\n            {labels.themeDark}\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => choose(\"system\")} className={cn(theme === \"system\" && \"bg-accent\")}>\n            <Monitor className=\"size-4\" />\n            {labels.themeSystem}\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    );\n  }\n\n  const nextTheme: ThemeChoice = resolvedTheme === \"dark\" ? \"light\" : \"dark\";\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button type=\"button\" onClick={() => choose(nextTheme)} className={buttonClass} aria-label={labels.toggleTheme}>\n          {resolvedTheme === \"dark\" ? <Sun className=\"size-4\" /> : <Moon className=\"size-4\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"bottom\">{nextTheme === \"dark\" ? labels.themeDark : labels.themeLight}</TooltipContent>\n    </Tooltip>\n  );\n}\n"],"mappings":";AA0FW,cAYD,YAZC;AAxFX,SAAS,SAAS,MAAM,WAAW;AACnC,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAmDZ,SAAS,YAAY,EAAE,WAAW,UAAU,QAAQ,QAAQ,YAAY,cAAc,GAAqB;AAChH,QAAM,EAAE,OAAO,eAAe,SAAS,IAAI,SAAS;AACpD,QAAM,SAA4B,iBAAiB,SAAS,UAAU;AAOtE,QAAM,SAAS,CAAC,SAAsB;AACpC,aAAS,IAAI;AACb,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO,oBAAC,UAAK,WAAW,aAAa,eAAW,MAAC;AAAA,EACnD;AAEA,MAAI,YAAY,QAAQ;AACtB,WACE,qBAAC,gBACC;AAAA,0BAAC,uBAAoB,SAAO,MAC1B,8BAAC,YAAO,MAAK,UAAS,WAAW,aAAa,cAAY,OAAO,aAC9D,4BAAkB,SAAS,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,OAAI,WAAU,UAAS,GACpF,GACF;AAAA,MACA,qBAAC,uBAAoB,OAAM,OACzB;AAAA,6BAAC,oBAAiB,SAAS,MAAM,OAAO,OAAO,GAAG,WAAW,GAAG,UAAU,WAAW,WAAW,GAC9F;AAAA,8BAAC,OAAI,WAAU,UAAS;AAAA,UACvB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,OAAO,MAAM,GAAG,WAAW,GAAG,UAAU,UAAU,WAAW,GAC5F;AAAA,8BAAC,QAAK,WAAU,UAAS;AAAA,UACxB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,OAAO,QAAQ,GAAG,WAAW,GAAG,UAAU,YAAY,WAAW,GAChG;AAAA,8BAAC,WAAQ,WAAU,UAAS;AAAA,UAC3B,OAAO;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,YAAyB,kBAAkB,SAAS,UAAU;AAEpE,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,8BAAC,YAAO,MAAK,UAAS,SAAS,MAAM,OAAO,SAAS,GAAG,WAAW,aAAa,cAAY,OAAO,aAChG,4BAAkB,SAAS,oBAAC,OAAI,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS,GACpF,GACF;AAAA,IACA,oBAAC,kBAAe,MAAK,UAAU,wBAAc,SAAS,OAAO,YAAY,OAAO,YAAW;AAAA,KAC7F;AAEJ;","names":[]}

package/dist/shell/types.d.ts

@@ -39,7 +39,7 @@ interface Workspace {
 interface AppDescriptor {
     /** "tasks" | "chat" | "crm" | "hr" | … */
     id: string;
-    /** Tên hiển thị (mặc định tiếng Việt). */
+    /** Tên hiển thị — app truyền theo ngôn ngữ giao diện đang dùng. */
     name: string;
     description?: string;
     icon: ShellIcon;
@@ -154,8 +154,9 @@ interface ShellLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "
 /** Component link thay thế `next/link`. */
 type ShellLinkComponent = ComponentType<ShellLinkProps>;
 /**
- * Toàn bộ chuỗi hiển thị của shell — app tiếng Anh (hoặc ngôn ngữ khác) override
- * từng khoá qua prop `labels`. Mặc định là tiếng Việt.
+ * Toàn bộ chuỗi hiển thị của shell. Theo `ComitorLocaleProvider` (namespace `shell` — mặc định
+ * tiếng Anh, bảng tiếng Việt dựng sẵn); override từng khoá qua prop `labels` của
+ * `ShellProvider`/`AppShell`.
  */
 interface ShellLabels {
     collapseSidebar: string;
@@ -168,8 +169,8 @@ interface ShellLabels {
      * 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.
      *
      * ⚠ 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
-     * "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ệ đó
-     * khi dịch sang ngôn ngữ khác.
+     * "bấm Collapse" sẽ không khớp tên truy cập. "Collapse" ⊂ "Collapse sidebar" ✓, "Thu gọn" ⊂
+     * "Thu gọn thanh bên" ✓ — giữ quan hệ đó khi dịch sang ngôn ngữ khác.
      */
     collapseSidebarShort: string;
     expandSidebar: string;
@@ -190,8 +191,9 @@ interface ShellLabels {
      * Đơ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à
      * 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
      * ("12 members"), nhưng nhiều ngôn ngữ thì không — nối `${count} ${đơn_vị}` ở phía component
-     * 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
-     * `TablePagination` (README §5, ba quy tắc của cơ chế `labels`).
+     * là khoá cứng trật tự của một ngôn ngữ vào mọi bản dịch. Hàm còn chọn được dạng số ít/nhiều
+     * ("1 member" ⇄ "2 members"), thứ tiếng Việt không có mà tiếng Anh thì bắt buộc. Cùng khuôn
+     * với `range`/`pageStatus` của `TablePagination` (README §5, ba quy tắc của cơ chế `labels`).
      */
     members: (count: number) => string;
     apps: string;
@@ -211,7 +213,11 @@ interface ShellLabels {
     themeSystem: string;
     toggleTheme: string;
 }
-/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.shell`. Shell không đọc thẳng hằng này — `ShellProvider` đọc bảng của
+ * `ComitorLocaleProvider` rồi trộn `labels` lên trên; hằng ở đây để app trải ra khi tự dựng nhãn.
+ */
 declare const DEFAULT_SHELL_LABELS: ShellLabels;
 
 export { type AppDescriptor, DEFAULT_SHELL_LABELS, type NavBadgeVariant, type NavGroup, type NavItem, type ShellIcon, type ShellLabels, type ShellLinkComponent, type ShellLinkProps, type ShellNav, type ShellUser, type UserMenuItem, type Workspace };

package/dist/shell/types.js

@@ -1,38 +1,5 @@
-const DEFAULT_SHELL_LABELS = {
-  collapseSidebar: "Thu g\u1ECDn thanh b\xEAn",
-  collapseSidebarShort: "Thu g\u1ECDn",
-  expandSidebar: "M\u1EDF r\u1ED9ng thanh b\xEAn",
-  openMenu: "M\u1EDF menu",
-  closeMenu: "\u0110\xF3ng menu",
-  search: "T\xECm ki\u1EBFm",
-  searchPlaceholder: "T\xECm ki\u1EBFm\u2026",
-  notifications: "Th\xF4ng b\xE1o",
-  navigationLabel: "\u0110i\u1EC1u h\u01B0\u1EDBng ch\xEDnh",
-  workspace: "Kh\xF4ng gian l\xE0m vi\u1EC7c",
-  workspaceSwitcherLabel: "\u0110\u1ED5i kh\xF4ng gian l\xE0m vi\u1EC7c",
-  workspaceSearchPlaceholder: "T\xECm kh\xF4ng gian l\xE0m vi\u1EC7c\u2026",
-  workspaceEmpty: "Kh\xF4ng t\xECm th\u1EA5y kh\xF4ng gian l\xE0m vi\u1EC7c",
-  createWorkspace: "T\u1EA1o kh\xF4ng gian l\xE0m vi\u1EC7c",
-  workspaceSettings: "C\xE0i \u0111\u1EB7t kh\xF4ng gian l\xE0m vi\u1EC7c",
-  inviteMembers: "M\u1EDDi th\xE0nh vi\xEAn",
-  members: (count) => `${count} th\xE0nh vi\xEAn`,
-  apps: "\u1EE8ng d\u1EE5ng",
-  appLauncherLabel: "M\u1EDF danh s\xE1ch \u1EE9ng d\u1EE5ng",
-  myApps: "\u1EE8ng d\u1EE5ng c\u1EE7a b\u1EA1n",
-  discoverApps: "Kh\xE1m ph\xE1 th\xEAm",
-  locked: "Ch\u01B0a m\u1EDF kho\xE1",
-  lockedHint: "\u1EE8ng d\u1EE5ng ch\u01B0a c\xF3 trong g\xF3i hi\u1EC7n t\u1EA1i",
-  account: "T\xE0i kho\u1EA3n",
-  profile: "H\u1ED3 s\u01A1",
-  settings: "C\xE0i \u0111\u1EB7t",
-  appearance: "Giao di\u1EC7n",
-  help: "Tr\u1EE3 gi\xFAp",
-  logout: "\u0110\u0103ng xu\u1EA5t",
-  themeLight: "S\xE1ng",
-  themeDark: "T\u1ED1i",
-  themeSystem: "H\u1EC7 th\u1ED1ng",
-  toggleTheme: "\u0110\u1ED5i giao di\u1EC7n"
-};
+import { shellEn } from "../i18n/namespaces/shell.js";
+const DEFAULT_SHELL_LABELS = { ...shellEn };
 export {
   DEFAULT_SHELL_LABELS
 };