@comitor/ui 0.4.0 → 0.5.0

package/dist/shell/app-header.js

@@ -77,48 +77,49 @@ function AppHeader({
           logo ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }) : null,
           /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center", children: breadcrumb ?? (title ? /* @__PURE__ */ jsx("h1", { className: "truncate text-sm font-semibold text-foreground", children: title }) : null) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center", children: showSearch ? searchSlot ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setCommandPaletteOpen(true),
-              className: cn(
-                // `rounded-full` + `w-64`: đúng ô tìm của AppHeader ở mục Patterns
-                // (`<Input className="rounded-full w-64" />`). Pill cần nhiều đệm ngang hơn ô
-                // vuông góc nên `px-3` thay vì `px-2.5`.
-                //
-                // ⚠ `lg:` chứ KHÔNG phải `sm:`. Ô tìm nằm ở vùng GIỮA và `shrink-0`, nên nó
-                // ăn 256px cố định của vùng nội dung. Dải nguy hiểm là md→lg: từ 768px thanh
-                // bên đã hiện (chiếm 256px) mà vùng nội dung mới 512px — trừ ô tìm thì hai
-                // bên chỉ còn 104px mỗi bên, không đủ cho cụm nút (~190px). Đo thật ở 768px
-                // trước khi vá: ba nút header tụt còn 16px bề ngang.
-                // Từ 1024px vùng nội dung là 768px → mỗi bên 232px, vừa đủ. Dưới ngưỡng đó
-                // dùng nút icon (36px) ngay bên dưới; phím ⌘K vẫn mở bảng lệnh như thường.
-                "hidden h-8 w-64 items-center gap-2 rounded-full border border-input bg-muted/40 px-3 lg:flex",
-                "text-sm text-muted-foreground transition-colors duration-150 ease-out",
-                // Viền control lúc hover phải ĐẬM HƠN lúc nghỉ, không nhạt đi. `border-gold-300`
-                // (#E8B824) chỉ được 1,86:1 với `--background` và 1,73:1 với `--muted` (chính là
-                // nền mà `hover:bg-muted` đổi sang) ở light — ô tìm gần như MẤT VIỀN đúng lúc rê
-                // chuột vào, dưới xa mức 3:1 WCAG 1.4.11 đòi cho viền control. `gold-300` lại là
-                // bậc thang màu thô, không đổi theo theme, nên ở dark cùng giá trị đó thành
-                // 10,19:1 — mỗi theme một hành vi.
-                // `--control-edge-strong` là bậc viền control lúc hover, đo đúng cho vai trò này:
-                // 10,55:1 / 9,86:1 (light, trên `--background` / `--muted`) · 11,65:1 / 9,93:1
-                // (dark). Lúc nghỉ vẫn `border-input` = 3,83:1 (light) · 4,94:1 (dark) ✓.
-                "hover:border-control-edge-strong hover:bg-muted"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: labels.searchPlaceholder }),
-                /* @__PURE__ */ jsxs(Kbd, { children: [
-                  modKey,
-                  "K"
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center", children: showSearch ? searchSlot ?? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setCommandPaletteOpen(true),
+            className: cn(
+              // `rounded-full` + `w-64`: đúng ô tìm của AppHeader ở mục Patterns
+              // (`<Input className="rounded-full w-64" />`). Pill cần nhiều đệm ngang hơn ô
+              // vuông góc nên `px-3` thay vì `px-2.5`.
+              //
+              // ⚠ `lg:` chứ KHÔNG phải `sm:`. Ô tìm nằm ở vùng GIỮA và `shrink-0`, nên nó
+              // ăn 256px cố định của vùng nội dung. Dải nguy hiểm là md→lg: từ 768px thanh
+              // bên đã hiện (chiếm 256px) mà vùng nội dung mới 512px — trừ ô tìm thì hai
+              // bên chỉ còn 104px mỗi bên, không đủ cho cụm nút (~190px). Đo thật ở 768px
+              // trước khi vá: ba nút header tụt còn 16px bề ngang.
+              // Từ 1024px vùng nội dung là 768px → mỗi bên 232px, vừa đủ. Dưới ngưỡng đó
+              // dùng nút icon (36px) ngay bên dưới; phím ⌘K vẫn mở bảng lệnh như thường.
+              "hidden h-8 w-64 items-center gap-2 rounded-full border border-input bg-muted/40 px-3 lg:flex",
+              "text-sm text-muted-foreground transition-colors duration-150 ease-out",
+              // Viền control lúc hover phải ĐẬM HƠN lúc nghỉ, không nhạt đi. `border-gold-300`
+              // (#E8B824) chỉ được 1,86:1 với `--background` và 1,73:1 với `--muted` (chính là
+              // nền mà `hover:bg-muted` đổi sang) ở light — ô tìm gần như MẤT VIỀN đúng lúc rê
+              // chuột vào, dưới xa mức 3:1 WCAG 1.4.11 đòi cho viền control. `gold-300` lại là
+              // bậc thang màu thô, không đổi theo theme, nên ở dark cùng giá trị đó thành
+              // 10,19:1 — mỗi theme một hành vi.
+              // `--control-edge-strong` là bậc viền control lúc hover, đo đúng cho vai trò này:
+              // 10,55:1 / 9,86:1 (light, trên `--background` / `--muted`) · 11,65:1 / 9,93:1
+              // (dark). Lúc nghỉ vẫn `border-input` = 3,83:1 (light) · 4,94:1 (dark) ✓.
+              "hover:border-control-edge-strong hover:bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Search, { className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children: labels.searchPlaceholder }),
+              /* @__PURE__ */ jsxs(Kbd, { children: [
+                modKey,
+                "K"
+              ] })
+            ]
+          }
+        ) : null }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-1 items-center justify-end gap-1", children: [
+          extraSlot,
+          showSearch && !searchSlot ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -130,11 +131,8 @@ function AppHeader({
               ),
               children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
             }
-          )
-        ] }) : null }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-1 items-center justify-end gap-1", children: [
-          extraSlot,
-          showAppLauncher ? /* @__PURE__ */ jsx(AppLauncher, {}) : null,
+          ) : null,
+          showAppLauncher ? /* @__PURE__ */ jsx(AppLauncher, { className: "hidden md:flex" }) : null,
           notificationsSlot ?? (notificationCount === void 0 ? null : /* @__PURE__ */ jsx(
             NotificationsButton,
             {
@@ -143,7 +141,7 @@ function AppHeader({
               onClick: onNotificationsClick
             }
           )),
-          showThemeToggle ? /* @__PURE__ */ jsx(ThemeToggle, { labels }) : null,
+          showThemeToggle ? /* @__PURE__ */ jsx(ThemeToggle, { labels, className: "hidden md:flex" }) : null,
           showUserMenu && user ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "mx-1 hidden h-5 w-px bg-border sm:block", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx(UserMenu, { ...userMenuProps })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu, PanelLeft, Search } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n// `useIsMac` nhập thẳng từ Tier 2: 0.2.0 chỉ còn MỘT cửa xuất cho nó (entry `.`),\n// `/shell` không re-export nữa.\nimport { useIsMac } from \"../components/composite/keyboard-hint.js\";\nimport { Kbd } from \"../components/ui/kbd.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { NotificationsButton } from \"./notifications-button.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\n\nexport interface AppHeaderProps {\n  className?: string;\n  /** Tiêu đề trang — dùng khi không truyền `breadcrumb`. */\n  title?: ReactNode;\n  /** Slot breadcrumb (composite `PageHeader` của app) — ưu tiên hơn `title`. */\n  breadcrumb?: ReactNode;\n  /** Slot ngoài cùng bên trái (vd `<ComitorLockup size=\"xs\" variant=\"auto\" />`). */\n  logo?: ReactNode;\n\n  /** Thay ô tìm kiếm dựng sẵn bằng UI riêng của app. */\n  searchSlot?: ReactNode;\n  showSearch?: boolean;\n  /** Nút thu gọn sidebar ở header (layout sidebar-first thường để ở sidebar). */\n  showSidebarToggle?: boolean;\n\n  /** Slot thông báo (app tự render Popover + panel). Có slot thì `notificationCount` bị bỏ qua. */\n  notificationsSlot?: ReactNode;\n  notificationCount?: number;\n  onNotificationsClick?: () => void;\n\n  /** Slot phụ bên phải, đứng trước AppLauncher. */\n  extraSlot?: ReactNode;\n\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  showUserMenu?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` (profileHref, settingsHref, items…). */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Header cao 56px (`--header-height`), nền `bg-background/80 backdrop-blur`.\n * Comitor là hệ sáng — **không** dùng header luôn-tối.\n *\n * BA VÙNG, và ô tìm nằm ở vùng GIỮA — đúng bố cục AppHeader ở mục Patterns của comitor-ds:\n *\n *     trái   hamburger (mobile) / nút thu gọn sidebar + logo + breadcrumb hoặc tiêu đề\n *     giữa   ô tìm (Cmd/Ctrl+K), bo tròn hết cỡ\n *     phải   AppLauncher · thông báo · ThemeToggle · UserMenu\n *\n * Hai vùng ngoài đều `flex-1`, vùng giữa `shrink-0` — đó là điều kiện để vùng giữa nằm CHÍNH GIỮA\n * header bất kể breadcrumb bên trái dài ngắn thế nào. Nếu để ô tìm trong cụm phải (bản trước) thì\n * nó trôi theo số lượng nút bên phải; nếu căn giữa bằng `absolute left-1/2` thì nó đè lên\n * breadcrumb dài. Cách này không mắc cả hai.\n */\nexport function AppHeader({\n  className,\n  title,\n  breadcrumb,\n  logo,\n  searchSlot,\n  showSearch = true,\n  showSidebarToggle = false,\n  notificationsSlot,\n  notificationCount,\n  onNotificationsClick,\n  extraSlot,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  showUserMenu = true,\n  userMenuProps\n}: AppHeaderProps) {\n  const { setMobileMenuOpen, setCommandPaletteOpen, toggleSidebar, sidebarCollapsed, labels, user } = useShell();\n  const isMac = useIsMac();\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-40 flex h-header shrink-0 items-center gap-2 px-3 sm:px-4\",\n        \"border-b border-border bg-background/80 backdrop-blur-sm\",\n        className\n      )}\n    >\n      {/* ── VÙNG TRÁI ─────────────────────────────────────────────────────── */}\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {/* Mở menu off-canvas — chỉ màn hình hẹp */}\n        <button\n          type=\"button\"\n          onClick={() => setMobileMenuOpen(true)}\n          aria-label={labels.openMenu}\n          className={cn(\n            \"-ml-1 flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:hidden\",\n            \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n          )}\n        >\n          <Menu className=\"size-5\" />\n        </button>\n\n        {showSidebarToggle ? (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button\n                type=\"button\"\n                onClick={toggleSidebar}\n                aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n                className={cn(\n                  \"hidden size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:flex\",\n                  \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n                )}\n              >\n                <PanelLeft className=\"size-4\" />\n              </button>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · {modKey} + B\n            </TooltipContent>\n          </Tooltip>\n        ) : null}\n\n        {logo ? <div className=\"shrink-0\">{logo}</div> : null}\n\n        {/* Breadcrumb thắng title khi có cả hai */}\n        <div className=\"flex min-w-0 items-center\">\n          {breadcrumb ?? (title ? <h1 className=\"truncate text-sm font-semibold text-foreground\">{title}</h1> : null)}\n        </div>\n      </div>\n\n      {/* ── VÙNG GIỮA: ô tìm ──────────────────────────────────────────────── */}\n      <div className=\"flex shrink-0 items-center justify-center\">\n        {showSearch\n          ? (searchSlot ?? (\n              <>\n                {/* ≥sm: ô giả lập trường tìm kiếm, kèm gợi ý phím tắt */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  className={cn(\n                    // `rounded-full` + `w-64`: đúng ô tìm của AppHeader ở mục Patterns\n                    // (`<Input className=\"rounded-full w-64\" />`). Pill cần nhiều đệm ngang hơn ô\n                    // vuông góc nên `px-3` thay vì `px-2.5`.\n                    //\n                    // ⚠ `lg:` chứ KHÔNG phải `sm:`. Ô tìm nằm ở vùng GIỮA và `shrink-0`, nên nó\n                    // ăn 256px cố định của vùng nội dung. Dải nguy hiểm là md→lg: từ 768px thanh\n                    // bên đã hiện (chiếm 256px) mà vùng nội dung mới 512px — trừ ô tìm thì hai\n                    // bên chỉ còn 104px mỗi bên, không đủ cho cụm nút (~190px). Đo thật ở 768px\n                    // trước khi vá: ba nút header tụt còn 16px bề ngang.\n                    // Từ 1024px vùng nội dung là 768px → mỗi bên 232px, vừa đủ. Dưới ngưỡng đó\n                    // dùng nút icon (36px) ngay bên dưới; phím ⌘K vẫn mở bảng lệnh như thường.\n                    \"hidden h-8 w-64 items-center gap-2 rounded-full border border-input bg-muted/40 px-3 lg:flex\",\n                    \"text-sm text-muted-foreground transition-colors duration-150 ease-out\",\n                    // Viền control lúc hover phải ĐẬM HƠN lúc nghỉ, không nhạt đi. `border-gold-300`\n                    // (#E8B824) chỉ được 1,86:1 với `--background` và 1,73:1 với `--muted` (chính là\n                    // nền mà `hover:bg-muted` đổi sang) ở light — ô tìm gần như MẤT VIỀN đúng lúc rê\n                    // chuột vào, dưới xa mức 3:1 WCAG 1.4.11 đòi cho viền control. `gold-300` lại là\n                    // bậc thang màu thô, không đổi theo theme, nên ở dark cùng giá trị đó thành\n                    // 10,19:1 — mỗi theme một hành vi.\n                    // `--control-edge-strong` là bậc viền control lúc hover, đo đúng cho vai trò này:\n                    // 10,55:1 / 9,86:1 (light, trên `--background` / `--muted`) · 11,65:1 / 9,93:1\n                    // (dark). Lúc nghỉ vẫn `border-input` = 3,83:1 (light) · 4,94:1 (dark) ✓.\n                    \"hover:border-control-edge-strong hover:bg-muted\"\n                  )}\n                >\n                  <Search className=\"size-3.5 shrink-0\" />\n                  <span className=\"flex-1 truncate text-left\">{labels.searchPlaceholder}</span>\n                  <Kbd>{modKey}K</Kbd>\n                </button>\n\n                {/* <sm: chỉ icon */}\n                <button\n                  type=\"button\"\n                  onClick={() => setCommandPaletteOpen(true)}\n                  aria-label={labels.search}\n                  className={cn(\n                    \"flex size-9 items-center justify-center rounded-md text-muted-foreground lg:hidden\",\n                    \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n                  )}\n                >\n                  <Search className=\"size-4\" />\n                </button>\n              </>\n            ))\n          : null}\n      </div>\n\n      {/* ── VÙNG PHẢI ─────────────────────────────────────────────────────── */}\n      {/* `shrink-0`: cụm nút KHÔNG được co. Thiếu nó thì flexbox bóp chúng thay vì bóp ô tìm —\n          ở 768px (thanh bên vừa hiện mà vùng nội dung mới 512px) chúng tụt còn 16px bề ngang. */}\n      <div className=\"flex shrink-0 flex-1 items-center justify-end gap-1\">\n        {extraSlot}\n\n        {showAppLauncher ? <AppLauncher /> : null}\n\n        {notificationsSlot ??\n          (notificationCount === undefined ? null : (\n            <NotificationsButton\n              count={notificationCount}\n              label={labels.notifications}\n              onClick={onNotificationsClick}\n            />\n          ))}\n\n        {showThemeToggle ? <ThemeToggle labels={labels} /> : null}\n\n        {showUserMenu && user ? (\n          <>\n            <span className=\"mx-1 hidden h-5 w-px bg-border sm:block\" aria-hidden=\"true\" />\n            <UserMenu {...userMenuProps} />\n          </>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/app-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu, PanelLeft, Search } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n// `useIsMac` nhập thẳng từ Tier 2: 0.2.0 chỉ còn MỘT cửa xuất cho nó (entry `.`),\n// `/shell` không re-export nữa.\nimport { useIsMac } from \"../components/composite/keyboard-hint.js\";\nimport { Kbd } from \"../components/ui/kbd.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { AppLauncher } from \"./app-launcher.js\";\nimport { NotificationsButton } from \"./notifications-button.js\";\nimport { useShell } from \"./shell-context.js\";\nimport { ThemeToggle } from \"./theme-toggle.js\";\nimport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\n\nexport interface AppHeaderProps {\n  className?: string;\n  /** Tiêu đề trang — dùng khi không truyền `breadcrumb`. */\n  title?: ReactNode;\n  /** Slot breadcrumb (composite `PageHeader` của app) — ưu tiên hơn `title`. */\n  breadcrumb?: ReactNode;\n  /** Slot ngoài cùng bên trái (vd `<ComitorLockup size=\"xs\" variant=\"auto\" />`). */\n  logo?: ReactNode;\n\n  /** Thay ô tìm kiếm dựng sẵn bằng UI riêng của app. */\n  searchSlot?: ReactNode;\n  showSearch?: boolean;\n  /** Nút thu gọn sidebar ở header (layout sidebar-first thường để ở sidebar). */\n  showSidebarToggle?: boolean;\n\n  /** Slot thông báo (app tự render Popover + panel). Có slot thì `notificationCount` bị bỏ qua. */\n  notificationsSlot?: ReactNode;\n  notificationCount?: number;\n  onNotificationsClick?: () => void;\n\n  /** Slot phụ bên phải, đứng trước AppLauncher. */\n  extraSlot?: ReactNode;\n\n  showAppLauncher?: boolean;\n  showThemeToggle?: boolean;\n  showUserMenu?: boolean;\n  /** Chuyển tiếp props cho `UserMenu` (profileHref, settingsHref, items…). */\n  userMenuProps?: UserMenuProps;\n}\n\n/**\n * Header cao 56px (`--header-height`), nền `bg-background/80 backdrop-blur`.\n * Comitor là hệ sáng — **không** dùng header luôn-tối.\n *\n * BA VÙNG, và ô tìm nằm ở vùng GIỮA — đúng bố cục AppHeader ở mục Patterns của comitor-ds:\n *\n *     trái   hamburger (mobile) / nút thu gọn sidebar + logo + breadcrumb hoặc tiêu đề\n *     giữa   ô tìm (Cmd/Ctrl+K), bo tròn hết cỡ\n *     phải   AppLauncher · thông báo · ThemeToggle · UserMenu\n *\n * Hai vùng ngoài đều `flex-1`, vùng giữa `shrink-0` — đó là điều kiện để vùng giữa nằm CHÍNH GIỮA\n * header bất kể breadcrumb bên trái dài ngắn thế nào. Nếu để ô tìm trong cụm phải (bản trước) thì\n * nó trôi theo số lượng nút bên phải; nếu căn giữa bằng `absolute left-1/2` thì nó đè lên\n * breadcrumb dài. Cách này không mắc cả hai.\n */\nexport function AppHeader({\n  className,\n  title,\n  breadcrumb,\n  logo,\n  searchSlot,\n  showSearch = true,\n  showSidebarToggle = false,\n  notificationsSlot,\n  notificationCount,\n  onNotificationsClick,\n  extraSlot,\n  showAppLauncher = true,\n  showThemeToggle = true,\n  showUserMenu = true,\n  userMenuProps\n}: AppHeaderProps) {\n  const { setMobileMenuOpen, setCommandPaletteOpen, toggleSidebar, sidebarCollapsed, labels, user } = useShell();\n  const isMac = useIsMac();\n  const modKey = isMac ? \"⌘\" : \"Ctrl\";\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-40 flex h-header shrink-0 items-center gap-2 px-3 sm:px-4\",\n        \"border-b border-border bg-background/80 backdrop-blur-sm\",\n        className\n      )}\n    >\n      {/* ── VÙNG TRÁI ─────────────────────────────────────────────────────── */}\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        {/* Mở menu off-canvas — chỉ màn hình hẹp */}\n        <button\n          type=\"button\"\n          onClick={() => setMobileMenuOpen(true)}\n          aria-label={labels.openMenu}\n          className={cn(\n            \"-ml-1 flex size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:hidden\",\n            \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n          )}\n        >\n          <Menu className=\"size-5\" />\n        </button>\n\n        {showSidebarToggle ? (\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <button\n                type=\"button\"\n                onClick={toggleSidebar}\n                aria-label={sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar}\n                className={cn(\n                  \"hidden size-9 shrink-0 items-center justify-center rounded-md text-muted-foreground md:flex\",\n                  \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n                )}\n              >\n                <PanelLeft className=\"size-4\" />\n              </button>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\">\n              {sidebarCollapsed ? labels.expandSidebar : labels.collapseSidebar} · {modKey} + B\n            </TooltipContent>\n          </Tooltip>\n        ) : null}\n\n        {logo ? <div className=\"shrink-0\">{logo}</div> : null}\n\n        {/* Breadcrumb thắng title khi có cả hai */}\n        <div className=\"flex min-w-0 items-center\">\n          {breadcrumb ?? (title ? <h1 className=\"truncate text-sm font-semibold text-foreground\">{title}</h1> : null)}\n        </div>\n      </div>\n\n      {/*\n        ── VÙNG GIỮA: ô tìm dạng PILL, và chỉ nó ────────────────────────────\n        Từ `lg` trở lên vùng này giữ ô tìm 256px và nằm chính giữa header. Dưới `lg` ô pill bị\n        `hidden` nên vùng này RỖNG và co về 0 — lúc đó hai vùng `flex-1` hai bên chia đôi phần\n        còn lại, và nút icon tìm kiếm (nằm ở vùng PHẢI) được căn phải cùng các icon khác.\n        ⚠ Nút icon KHÔNG được để ở đây: nó sẽ bị căn giữa header, tức một icon lẻ trôi giữa\n        khoảng trống trong khi mọi icon khác nằm sát phải.\n      */}\n      <div className=\"flex shrink-0 items-center justify-center\">\n        {showSearch\n          ? (searchSlot ?? (\n              <button\n                type=\"button\"\n                onClick={() => setCommandPaletteOpen(true)}\n                className={cn(\n                  // `rounded-full` + `w-64`: đúng ô tìm của AppHeader ở mục Patterns\n                  // (`<Input className=\"rounded-full w-64\" />`). Pill cần nhiều đệm ngang hơn ô\n                  // vuông góc nên `px-3` thay vì `px-2.5`.\n                  //\n                  // ⚠ `lg:` chứ KHÔNG phải `sm:`. Ô tìm nằm ở vùng GIỮA và `shrink-0`, nên nó\n                  // ăn 256px cố định của vùng nội dung. Dải nguy hiểm là md→lg: từ 768px thanh\n                  // bên đã hiện (chiếm 256px) mà vùng nội dung mới 512px — trừ ô tìm thì hai\n                  // bên chỉ còn 104px mỗi bên, không đủ cho cụm nút (~190px). Đo thật ở 768px\n                  // trước khi vá: ba nút header tụt còn 16px bề ngang.\n                  // Từ 1024px vùng nội dung là 768px → mỗi bên 232px, vừa đủ. Dưới ngưỡng đó\n                  // dùng nút icon (36px) ngay bên dưới; phím ⌘K vẫn mở bảng lệnh như thường.\n                  \"hidden h-8 w-64 items-center gap-2 rounded-full border border-input bg-muted/40 px-3 lg:flex\",\n                  \"text-sm text-muted-foreground transition-colors duration-150 ease-out\",\n                  // Viền control lúc hover phải ĐẬM HƠN lúc nghỉ, không nhạt đi. `border-gold-300`\n                  // (#E8B824) chỉ được 1,86:1 với `--background` và 1,73:1 với `--muted` (chính là\n                  // nền mà `hover:bg-muted` đổi sang) ở light — ô tìm gần như MẤT VIỀN đúng lúc rê\n                  // chuột vào, dưới xa mức 3:1 WCAG 1.4.11 đòi cho viền control. `gold-300` lại là\n                  // bậc thang màu thô, không đổi theo theme, nên ở dark cùng giá trị đó thành\n                  // 10,19:1 — mỗi theme một hành vi.\n                  // `--control-edge-strong` là bậc viền control lúc hover, đo đúng cho vai trò này:\n                  // 10,55:1 / 9,86:1 (light, trên `--background` / `--muted`) · 11,65:1 / 9,93:1\n                  // (dark). Lúc nghỉ vẫn `border-input` = 3,83:1 (light) · 4,94:1 (dark) ✓.\n                  \"hover:border-control-edge-strong hover:bg-muted\"\n                )}\n              >\n                <Search className=\"size-3.5 shrink-0\" />\n                <span className=\"flex-1 truncate text-left\">{labels.searchPlaceholder}</span>\n                <Kbd>{modKey}K</Kbd>\n              </button>\n            ))\n          : null}\n      </div>\n\n      {/* ── VÙNG PHẢI ─────────────────────────────────────────────────────── */}\n      {/* `shrink-0`: cụm nút KHÔNG được co. Thiếu nó thì flexbox bóp chúng thay vì bóp ô tìm —\n          ở 768px (thanh bên vừa hiện mà vùng nội dung mới 512px) chúng tụt còn 16px bề ngang. */}\n      <div className=\"flex shrink-0 flex-1 items-center justify-end gap-1\">\n        {extraSlot}\n\n        {/*\n          Dưới `lg`: ô tìm thu thành icon và đứng ở ĐÂY, cùng hàng với các icon khác bên phải —\n          không phải ở vùng giữa. `searchSlot` của app thì không có bản icon nên nó ở lại vùng\n          giữa và tự lo phần thu hẹp.\n        */}\n        {showSearch && !searchSlot ? (\n          <button\n            type=\"button\"\n            onClick={() => setCommandPaletteOpen(true)}\n            aria-label={labels.search}\n            className={cn(\n              \"flex size-9 items-center justify-center rounded-md text-muted-foreground lg:hidden\",\n              \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\"\n            )}\n          >\n            <Search className=\"size-4\" />\n          </button>\n        ) : null}\n\n        {/*\n          `hidden md:flex`: nút danh sách ứng dụng chỉ ở desktop. Dưới `md`, `MobileMenu` đã\n          render `<AppLauncher inline variant=\"list\">` ngay trong menu hamburger — để cả hai là\n          hai lối vào cho cùng một danh sách, và trên màn hình hẹp thì mỗi ô 36px của header đều\n          đáng giá. Cùng mốc `md` với nút đổi giao diện ngay dưới.\n          ⚠ App nào tắt `showMobileMenu`/`showAppLauncher` của `MobileMenu` thì phải xét lại đây,\n          nếu không màn hình hẹp sẽ mất hẳn lối vào danh sách ứng dụng.\n        */}\n        {showAppLauncher ? <AppLauncher className=\"hidden md:flex\" /> : null}\n\n        {notificationsSlot ??\n          (notificationCount === undefined ? null : (\n            <NotificationsButton\n              count={notificationCount}\n              label={labels.notifications}\n              onClick={onNotificationsClick}\n            />\n          ))}\n\n        {/*\n          `hidden md:flex`: nút đổi giao diện chỉ ở desktop. Dưới `md` lối vào là submenu \"Giao\n          diện\" trong `UserMenu` (mặc định `showThemeSubmenu=\"mobile\"`) — hai bên dùng CHUNG mốc\n          `md` nên ở mọi bề rộng có đúng MỘT lối vào, không trùng và không hụt.\n          ⚠ Đổi mốc ở một bên thì phải đổi ở bên kia, nếu không sẽ có dải bề rộng mất hẳn nút đổi\n          giao diện.\n        */}\n        {showThemeToggle ? <ThemeToggle labels={labels} className=\"hidden md:flex\" /> : null}\n\n        {showUserMenu && user ? (\n          <>\n            <span className=\"mx-1 hidden h-5 w-px bg-border sm:block\" aria-hidden=\"true\" />\n            <UserMenu {...userMenuProps} />\n          </>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -17,7 +17,12 @@ interface MobileMenuProps {
 }
 /**
  * Menu off-canvas cho màn hình hẹp (`Sheet` trượt từ trái):
- * WorkspaceSwitcher (trục 1) → lưới app dạng danh sách (trục 2) → menu app hiện tại → user.
+ * WorkspaceSwitcher (trục 1) → menu app HIỆN TẠI → danh sách app (trục 2) → user.
+ *
+ * ⚠ Thứ tự đó cố ý KHÁC thanh bên desktop. Trên desktop danh sách app nằm ở header nên nó không
+ * 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
+ * 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ộ
+ * menu chính xuống dưới nếp gấp — phải cuộn mới thấy thứ mình cần.
  *
  * Tự đóng khi đổi route (`ShellProvider` lo) và khi bấm vào một link thật trong menu.
  */

package/dist/shell/mobile-menu.js

@@ -29,17 +29,17 @@ function MobileMenu({
       style: appAccentStyle(currentApp),
       className: cn("flex w-80 max-w-[85vw] flex-col gap-0 bg-sidebar p-0 md:hidden", className),
       children: [
-        /* @__PURE__ */ jsxs(SheetHeader, { className: "shrink-0 border-b border-sidebar-border p-2", children: [
+        /* @__PURE__ */ jsxs(SheetHeader, { className: "shrink-0 border-b border-sidebar-border p-2 pr-12", children: [
           /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: labels.navigationLabel }),
           /* @__PURE__ */ jsx(WorkspaceSwitcher, { align: "start" })
         ] }),
         header ? /* @__PURE__ */ jsx("div", { className: "shrink-0 p-2", children: header }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto scrollbar-thin", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-2", children: nav.map((group) => /* @__PURE__ */ jsx(SidebarGroup, { group, siblings: allItems, onNavigate: closeMenu }, group.id)) }),
           showAppLauncher ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(AppLauncher, { inline: true, variant: "list", onSelected: closeMenu }) }),
-            /* @__PURE__ */ jsx(Separator, { className: "bg-sidebar-border" })
-          ] }) : null,
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-2", children: nav.map((group) => /* @__PURE__ */ jsx(SidebarGroup, { group, siblings: allItems, onNavigate: closeMenu }, group.id)) })
+            /* @__PURE__ */ jsx(Separator, { className: "bg-sidebar-border" }),
+            /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx(AppLauncher, { inline: true, variant: "list", onSelected: closeMenu }) })
+          ] }) : null
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-t border-sidebar-border p-2", children: [
           user ? /* @__PURE__ */ jsx(UserMenu, { showName: true, ...userMenuProps, className: "min-w-0 flex-1" }) : null,

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) → lưới app dạng danh sách (trục 2) → menu app hiện tại → user.\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        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        <SheetHeader className=\"shrink-0 border-b border-sidebar-border p-2\">\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          {showAppLauncher ? (\n            <>\n              <div className=\"p-2\">\n                <AppLauncher inline variant=\"list\" onSelected={closeMenu} />\n              </div>\n              <Separator className=\"bg-sidebar-border\" />\n            </>\n          ) : null}\n\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        </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":";AAwDQ,SASI,UARF,KADF;AArDR,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;AAoB3B,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,MAClB,OAAO,eAAe,UAAU;AAAA,MAChC,WAAW,GAAG,kEAAkE,SAAS;AAAA,MAEzF;AAAA,6BAAC,eAAY,WAAU,+CACrB;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,yCACZ;AAAA,4BACC,iCACE;AAAA,gCAAC,SAAI,WAAU,OACb,8BAAC,eAAY,QAAM,MAAC,SAAQ,QAAO,YAAY,WAAW,GAC5D;AAAA,YACA,oBAAC,aAAU,WAAU,qBAAoB;AAAA,aAC3C,IACE;AAAA,UAEJ,oBAAC,SAAI,WAAU,2BACZ,cAAI,IAAI,CAAC,UACR,oBAAC,gBAA4B,OAAc,UAAU,UAAU,YAAY,aAAxD,MAAM,EAA6D,CACvF,GACH;AAAA,WACF;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        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":";AAkEQ,SAgBI,UAfF,KADF;AA/DR,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,MAClB,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.js

@@ -19,15 +19,37 @@ function NotificationsButton({ count = 0, label, max = 9, className, ...props })
       ...props,
       children: [
         /* @__PURE__ */ jsx(Bell, { className: "size-4" }),
-        hasUnread ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "absolute right-1 top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1",
-              "bg-destructive text-[10px] font-semibold leading-none text-destructive-foreground"
-            ),
-            children: count > max ? `${max}+` : count
-          }
+        hasUnread ? (
+          /*
+           * Huy hiệu ĐẨY RA GÓC, không nằm trong lòng nút.
+           *
+           * `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
+           * 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):
+           *
+           *     right-1 top-1        che 39% cái chuông — thấy khối đỏ, không thấy chuông
+           *     -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ư
+           *                          một chấm rời không thuộc về cái chuông
+           *     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
+           *
+           * 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
+           * hiệu tiến sát nút bên cạnh.
+           *
+           * `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
+           * 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
+           * 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
+           * (`ring-2 ring-card`).
+           */
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute right-0 top-0 flex h-4 min-w-4 items-center justify-center rounded-full px-1",
+                "ring-2 ring-background",
+                "bg-destructive text-[10px] font-semibold leading-none text-destructive-foreground"
+              ),
+              children: count > max ? `${max}+` : count
+            }
+          )
         ) : null
       ]
     }

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        <span\n          className={cn(\n            \"absolute right-1 top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1\",\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,YACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YAEC,kBAAQ,MAAM,GAAG,GAAG,MAAM;AAAA;AAAA,QAC7B,IACE;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 { 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":[]}

package/dist/shell/sidebar.js

@@ -70,7 +70,7 @@ function Sidebar({
                     ),
                     children: sidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" }),
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapseSidebar })
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapseSidebarShort })
                     ] })
                   }
                 ) }),

package/dist/shell/sidebar.js.map

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

package/dist/shell/types.d.ts

@@ -146,6 +146,19 @@ type ShellLinkComponent = ComponentType<ShellLinkProps>;
  */
 interface ShellLabels {
     collapseSidebar: string;
+    /**
+     * Nhãn NGẮN hiện trên chính nút thu gọn (khi thanh bên đang mở rộng).
+     *
+     * Tách khỏi `collapseSidebar` vì hai chuỗi có hai việc khác nhau: chuỗi dài là TÊN TRUY CẬP
+     * (`aria-label` + tooltip) — nó phải nói rõ thu gọn cái gì, vì người dùng trình đọc màn hình
+     * nghe nó tách khỏi ngữ cảnh; chuỗi ngắn là chữ NHÌN THẤY trong một nút rộng 240px nằm ngay
+     * 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.
+     */
+    collapseSidebarShort: string;
     expandSidebar: string;
     openMenu: string;
     closeMenu: string;

package/dist/shell/types.js

@@ -1,5 +1,6 @@
 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",

package/dist/shell/types.js.map

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

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

@@ -25,8 +25,20 @@ interface UserMenuProps {
     helpHref?: string;
     /** Mục bổ sung của app — chèn ngay trên "Đăng xuất". */
     items?: UserMenuItem[];
-    /** Ẩn submenu đổi giao diện (khi header đã có `ThemeToggle` riêng và không muốn lặp). */
-    showThemeSubmenu?: boolean;
+    /**
+     * Submenu "Giao diện" trong menu người dùng.
+     *
+     *   `"mobile"`  (mặc định) — CHỈ hiện dưới `md`. Từ `md` trở lên `AppHeader` đã có
+     *               `ThemeToggle` riêng, để cả hai là hai lối vào cho cùng một thứ.
+     *   `true`      — luôn hiện. Dùng khi app tắt `showThemeToggle` của header, nếu không màn
+     *               hình rộng sẽ KHÔNG còn chỗ nào đổi giao diện.
+     *   `false`     — không bao giờ hiện.
+     *
+     * ⚠ Nhánh `"mobile"` ẩn bằng CSS (`md:hidden`), không phải bằng điều kiện render: nút gạt theo
+     * bề rộng cần `window`, mà đọc `window` lúc render đầu là lệch hydration. `display: none` loại
+     * phần tử khỏi CẢ cây trợ năng nên trình đọc màn hình ở desktop cũng không thấy mục thừa.
+     */
+    showThemeSubmenu?: boolean | "mobile";
     /** Ghi đè handler đăng xuất của context. */
     onLogout?: () => void;
     align?: "start" | "center" | "end";

package/dist/shell/user-menu.js

@@ -33,7 +33,7 @@ function UserMenu({
   settingsHref,
   helpHref,
   items = [],
-  showThemeSubmenu = true,
+  showThemeSubmenu = "mobile",
   onLogout,
   align = "end"
 }) {
@@ -96,8 +96,8 @@ function UserMenu({
       hasEntries ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
       visibleBuiltIns.map(renderItem),
       items.map(renderItem),
-      showThemeSubmenu ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-        /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+      showThemeSubmenu !== false ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: cn(showThemeSubmenu === "mobile" && "md:hidden"), children: [
           /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { children: labels.appearance })
         ] }),

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

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