@comitor/ui 0.1.0

package/dist/shell/theme-toggle.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../components/ui/dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.js";
+import { DEFAULT_SHELL_LABELS } from "./types.js";
+function ThemeToggle({ className, variant = "icon", labels: labelsProp }) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const labels = { ...DEFAULT_SHELL_LABELS, ...labelsProp };
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const buttonClass = cn(
+    "flex size-9 items-center justify-center rounded-md text-muted-foreground",
+    "transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground",
+    className
+  );
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("span", { className: buttonClass, "aria-hidden": true });
+  }
+  if (variant === "menu") {
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: buttonClass, "aria-label": labels.toggleTheme, children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "size-4" }) : /* @__PURE__ */ jsx(Sun, { className: "size-4" }) }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("light"), className: cn(theme === "light" && "bg-accent"), children: [
+          /* @__PURE__ */ jsx(Sun, { className: "size-4" }),
+          labels.themeLight
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("dark"), className: cn(theme === "dark" && "bg-accent"), children: [
+          /* @__PURE__ */ jsx(Moon, { className: "size-4" }),
+          labels.themeDark
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("system"), className: cn(theme === "system" && "bg-accent"), children: [
+          /* @__PURE__ */ jsx(Monitor, { className: "size-4" }),
+          labels.themeSystem
+        ] })
+      ] })
+    ] });
+  }
+  const nextTheme = resolvedTheme === "dark" ? "light" : "dark";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setTheme(nextTheme),
+        className: buttonClass,
+        "aria-label": labels.toggleTheme,
+        children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: nextTheme === "dark" ? labels.themeDark : labels.themeLight })
+  ] });
+}
+export {
+  ThemeToggle
+};
+//# sourceMappingURL=theme-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { Monitor, Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { useEffect, useState } from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger\n} from \"../components/ui/dropdown-menu.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { DEFAULT_SHELL_LABELS, type ShellLabels } from \"./types.js\";\n\n/** Chỉ những nhãn ThemeToggle thực sự dùng — để nút này KHÔNG buộc phải nằm trong ShellProvider. */\nexport type ThemeToggleLabels = Pick<ShellLabels, \"themeLight\" | \"themeDark\" | \"themeSystem\" | \"toggleTheme\">;\n\nexport interface ThemeToggleProps {\n  className?: string;\n  /**\n   * \"icon\"  — một nút, bấm là lật Sáng ⇄ Tối (mặc định, dùng ở header).\n   * \"menu\"  — dropdown 3 lựa chọn Sáng / Tối / Hệ thống.\n   */\n  variant?: \"icon\" | \"menu\";\n  /** Override chuỗi hiển thị (mặc định tiếng Việt). `AppHeader` truyền labels của shell xuống. */\n  labels?: Partial<ThemeToggleLabels>;\n}\n\n/**\n * Nút đổi giao diện — dùng được ĐỘC LẬP (trang đăng nhập, trang marketing),\n * không bắt buộc nằm trong `ShellProvider`.\n *\n * Chống lệch hydration bằng cờ `mounted`: theme thật chỉ biết được ở client\n * (đọc localStorage/`prefers-color-scheme`), render thẳng icon theo theme ngay\n * lần đầu sẽ lệch với HTML do server sinh ra. Trước khi mount hiện ô rỗng cùng\n * kích thước để layout không nhảy.\n */\nexport function ThemeToggle({ className, variant = \"icon\", labels: labelsProp }: ThemeToggleProps) {\n  const { theme, resolvedTheme, setTheme } = useTheme();\n  const labels: ThemeToggleLabels = { ...DEFAULT_SHELL_LABELS, ...labelsProp };\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const buttonClass = cn(\n    \"flex size-9 items-center justify-center rounded-md text-muted-foreground\",\n    \"transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground\",\n    className\n  );\n\n  if (!mounted) {\n    return <span className={buttonClass} aria-hidden />;\n  }\n\n  if (variant === \"menu\") {\n    return (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <button type=\"button\" className={buttonClass} aria-label={labels.toggleTheme}>\n            {resolvedTheme === \"dark\" ? <Moon className=\"size-4\" /> : <Sun className=\"size-4\" />}\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuItem onClick={() => 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        </DropdownMenuContent>\n      </DropdownMenu>\n    );\n  }\n\n  const nextTheme = resolvedTheme === \"dark\" ? \"light\" : \"dark\";\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          onClick={() => setTheme(nextTheme)}\n          className={buttonClass}\n          aria-label={labels.toggleTheme}\n        >\n          {resolvedTheme === \"dark\" ? <Sun className=\"size-4\" /> : <Moon className=\"size-4\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent side=\"bottom\">{nextTheme === \"dark\" ? labels.themeDark : labels.themeLight}</TooltipContent>\n    </Tooltip>\n  );\n}\n"],"mappings":";AAsDW,cAYD,YAZC;AApDX,SAAS,SAAS,MAAM,WAAW;AACnC,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AACnB,SAAS,4BAA8C;AAyBhD,SAAS,YAAY,EAAE,WAAW,UAAU,QAAQ,QAAQ,WAAW,GAAqB;AACjG,QAAM,EAAE,OAAO,eAAe,SAAS,IAAI,SAAS;AACpD,QAAM,SAA4B,EAAE,GAAG,sBAAsB,GAAG,WAAW;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,CAAC,SAAS;AACZ,WAAO,oBAAC,UAAK,WAAW,aAAa,eAAW,MAAC;AAAA,EACnD;AAEA,MAAI,YAAY,QAAQ;AACtB,WACE,qBAAC,gBACC;AAAA,0BAAC,uBAAoB,SAAO,MAC1B,8BAAC,YAAO,MAAK,UAAS,WAAW,aAAa,cAAY,OAAO,aAC9D,4BAAkB,SAAS,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,OAAI,WAAU,UAAS,GACpF,GACF;AAAA,MACA,qBAAC,uBAAoB,OAAM,OACzB;AAAA,6BAAC,oBAAiB,SAAS,MAAM,SAAS,OAAO,GAAG,WAAW,GAAG,UAAU,WAAW,WAAW,GAChG;AAAA,8BAAC,OAAI,WAAU,UAAS;AAAA,UACvB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,SAAS,MAAM,GAAG,WAAW,GAAG,UAAU,UAAU,WAAW,GAC9F;AAAA,8BAAC,QAAK,WAAU,UAAS;AAAA,UACxB,OAAO;AAAA,WACV;AAAA,QACA,qBAAC,oBAAiB,SAAS,MAAM,SAAS,QAAQ,GAAG,WAAW,GAAG,UAAU,YAAY,WAAW,GAClG;AAAA,8BAAC,WAAQ,WAAU,UAAS;AAAA,UAC3B,OAAO;AAAA,WACV;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,YAAY,kBAAkB,SAAS,UAAU;AAEvD,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,SAAS;AAAA,QACjC,WAAW;AAAA,QACX,cAAY,OAAO;AAAA,QAElB,4BAAkB,SAAS,oBAAC,OAAI,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS;AAAA;AAAA,IACpF,GACF;AAAA,IACA,oBAAC,kBAAe,MAAK,UAAU,wBAAc,SAAS,OAAO,YAAY,OAAO,YAAW;AAAA,KAC7F;AAEJ;","names":[]}

package/dist/shell/types.d.ts

@@ -0,0 +1,168 @@
+import { LucideIcon } from 'lucide-react';
+import { ComponentType, AnchorHTMLAttributes } from 'react';
+
+/**
+ * Hợp đồng dữ liệu của Tier 3 (shell).
+ *
+ * Nguyên tắc: package KHÔNG chứa dữ liệu app. Toàn bộ workspace / danh sách app /
+ * menu / user đều là *type* — app truyền vào qua props. File này là **module thuần**
+ * (chỉ type + hằng nhãn, không hook, không directive) nên dùng được ở cả server lẫn client.
+ *
+ * Hai trục điều hướng của Comitor — một user thuộc NHIỀU workspace, và mỗi workspace
+ * 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
+ * dùng, và ngược lại) nên không gộp được vào một menu phẳng:
+ *   trục 1 — WORKSPACE: đổi ngữ cảnh dữ liệu   (Acme Corp ▸ Beta Ltd)
+ *   trục 2 — APP:       đổi sản phẩm trong cùng workspace (Tasks ▸ Chat ▸ CRM ▸ HR)
+ */
+
+/**
+ * Icon dùng trong shell: `LucideIcon` là trường hợp phổ biến, nhưng app có thể
+ * truyền component SVG riêng miễn nhận `className` (để shell điều khiển kích thước).
+ */
+type ShellIcon = LucideIcon | ComponentType<{
+    className?: string;
+}>;
+/** Workspace (trục 1) — một tổ chức/không gian làm việc mà user thuộc về. */
+interface Workspace {
+    id: string;
+    name: string;
+    /** Định danh trên URL/subdomain — shell chỉ hiển thị, không tự điều hướng. */
+    slug: string;
+    logoUrl?: string;
+    /** "Free" | "Pro" | "Business"… — chỉ để hiển thị nhãn gói, shell không suy luận quyền từ đây. */
+    plan?: string;
+    /** Vai trò của user trong workspace này (chuỗi hiển thị sẵn). */
+    role?: string;
+    memberCount?: number;
+}
+/** Một sản phẩm trong hệ sinh thái (trục 2) — Tasks, Chat, CRM, HR… */
+interface AppDescriptor {
+    /** "tasks" | "chat" | "crm" | "hr" | … */
+    id: string;
+    /** Tên hiển thị (mặc định tiếng Việt). */
+    name: string;
+    description?: string;
+    icon: ShellIcon;
+    href: string;
+    /**
+     * Màu nhấn riêng của app — bất kỳ giá trị màu CSS hợp lệ (nên là `var(--…)`).
+     * Shell gán vào biến `--app-accent` bằng inline style, KHÔNG sinh class động.
+     */
+    accent?: string;
+    /** Màu chữ trên nền accent; mặc định giữ `--app-accent-foreground` của theme. */
+    accentForeground?: string;
+    /** `false` = workspace chưa bật/chưa mua → hiện khoá và gọi `onUpsell` thay vì điều hướng. */
+    entitled?: boolean;
+    badge?: number | string;
+}
+/** Variant badge của mục menu — map thẳng sang variant của primitive `Badge`. */
+type NavBadgeVariant = "default" | "destructive" | "warning" | "success";
+/** Một mục điều hướng trong sidebar. */
+interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: ShellIcon;
+    badge?: number | string;
+    badgeVariant?: NavBadgeVariant;
+    /** Mục con — render trong `Collapsible`; cha có children thì click cha chỉ mở/đóng. */
+    children?: NavItem[];
+    /**
+     * Ép trạng thái active thay vì để shell tự suy từ `pathname`
+     * (dùng khi route thật khác href, vd trang chi tiết `/tasks/123`).
+     */
+    isActive?: boolean;
+    /** Mở link ở tab mới (link ngoài: tài liệu, trạng thái hệ thống…). */
+    external?: boolean;
+    disabled?: boolean;
+}
+/** Nhóm mục menu (Linear-style: nhãn nhỏ + thu gọn được). */
+interface NavGroup {
+    id: string;
+    /** Bỏ trống = nhóm không nhãn (dùng cho nhóm đầu tiên). */
+    label?: string;
+    items: NavItem[];
+    /** Cho phép thu gọn cả nhóm; mặc định true khi có `label`. */
+    collapsible?: boolean;
+    /** Trạng thái ban đầu khi `collapsible` — mặc định mở. */
+    defaultCollapsed?: boolean;
+}
+/**
+ * Menu app truyền vào: mảng phẳng `NavItem[]` (app đơn giản) hoặc `NavGroup[]`.
+ * Shell chuẩn hoá về `NavGroup[]` bằng `toNavGroups()` trong `utils.ts`.
+ */
+type ShellNav = NavItem[] | NavGroup[];
+/** Người dùng đang đăng nhập. */
+interface ShellUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+    /** Vai trò trong workspace hiện tại — chuỗi hiển thị sẵn, shell không map mã. */
+    role?: string;
+}
+/** Mục bổ sung do app chèn vào `UserMenu`. */
+interface UserMenuItem {
+    id: string;
+    label: string;
+    icon?: ShellIcon;
+    /** Có `href` thì render link; không thì render nút gọi `onSelect`. */
+    href?: string;
+    onSelect?: () => void;
+    /** Nhãn phím tắt hiển thị bên phải, vd "Ctrl+P" (chỉ hiển thị, không tự gắn phím). */
+    shortcut?: string;
+    variant?: "default" | "destructive";
+}
+/**
+ * Props của component link do app cung cấp (`LinkComponent`).
+ * Mặc định shell dùng `next/link`; app không-Next (Vite, Storybook) truyền
+ * component router của mình miễn khớp hình dạng props này.
+ */
+interface ShellLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    /** 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. */
+    href: string;
+}
+/** Component link thay thế `next/link`. */
+type ShellLinkComponent = ComponentType<ShellLinkProps>;
+/**
+ * Toàn bộ chuỗi hiển thị của shell — app tiếng Anh (hoặc ngôn ngữ khác) override
+ * từng khoá qua prop `labels`. Mặc định là tiếng Việt.
+ */
+interface ShellLabels {
+    collapseSidebar: string;
+    expandSidebar: string;
+    openMenu: string;
+    closeMenu: string;
+    search: string;
+    searchPlaceholder: string;
+    notifications: string;
+    navigationLabel: string;
+    workspace: string;
+    workspaceSwitcherLabel: string;
+    workspaceSearchPlaceholder: string;
+    workspaceEmpty: string;
+    createWorkspace: string;
+    workspaceSettings: string;
+    inviteMembers: string;
+    members: string;
+    apps: string;
+    appLauncherLabel: string;
+    myApps: string;
+    discoverApps: string;
+    locked: string;
+    lockedHint: string;
+    account: string;
+    profile: string;
+    settings: string;
+    appearance: string;
+    help: string;
+    logout: string;
+    themeLight: string;
+    themeDark: string;
+    themeSystem: string;
+    toggleTheme: string;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+declare const DEFAULT_SHELL_LABELS: ShellLabels;
+
+export { type AppDescriptor, DEFAULT_SHELL_LABELS, type NavBadgeVariant, type NavGroup, type NavItem, type ShellIcon, type ShellLabels, type ShellLinkComponent, type ShellLinkProps, type ShellNav, type ShellUser, type UserMenuItem, type Workspace };

package/dist/shell/types.js

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

package/dist/shell/types.js.map

@@ -0,0 +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  accent?: string;\n  /** Màu chữ trên nền accent; mặc định giữ `--app-accent-foreground` của theme. */\n  accentForeground?: 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":"AAoLO,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":[]}

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { UserMenuItem, ShellUser } from './types.js';
+import 'lucide-react';
+
+interface UserAvatarProps {
+    user: ShellUser;
+    className?: string;
+}
+/**
+ * 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.
+ *
+ * Tô màu theo `user.name` chứ KHÔNG theo email: `LetterAvatar`/`AvatarGroup` ở Tier 2 seed
+ * 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.
+ */
+declare function UserAvatar({ user, className }: UserAvatarProps): React.JSX.Element;
+interface UserMenuProps {
+    className?: string;
+    /** Hiện tên + vai trò cạnh avatar; màn hình hẹp nên để `false`. */
+    showName?: boolean;
+    /** 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õ). */
+    profileHref?: string;
+    /** Link "Cài đặt". */
+    settingsHref?: string;
+    /** Link "Trợ giúp". */
+    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;
+    /** Ghi đè handler đăng xuất của context. */
+    onLogout?: () => void;
+    align?: "start" | "center" | "end";
+}
+/**
+ * Menu người dùng ở góc phải header: avatar + tên/email, các mục do app khai báo,
+ * submenu đổi giao diện, và "Đăng xuất" (tô màu destructive).
+ *
+ * Mục dựng sẵn chỉ hiện khi app cấp `href` tương ứng — package không tự bịa route.
+ */
+declare function UserMenu({ className, showName, profileHref, settingsHref, helpHref, items, showThemeSubmenu, onLogout, align }: UserMenuProps): React.JSX.Element | null;
+
+export { UserAvatar, type UserAvatarProps, UserMenu, type UserMenuProps };

package/dist/shell/user-menu.js

@@ -0,0 +1,132 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, CircleUser, HelpCircle, LogOut, Monitor, Moon, Palette, Settings, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "../components/ui/dropdown-menu.js";
+import { cn } from "../lib/cn.js";
+import { useShell } from "./shell-context.js";
+import { ShellNavLink } from "./shell-link.js";
+import { getAvatarToneClass, getVietnameseInitials } from "./utils.js";
+function UserAvatar({ user, className }) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: cn("size-8", className), children: [
+    user.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarUrl, alt: "" }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: cn("text-xs font-semibold", getAvatarToneClass(user.name)), children: getVietnameseInitials(user.name) })
+  ] });
+}
+function UserMenu({
+  className,
+  showName = false,
+  profileHref,
+  settingsHref,
+  helpHref,
+  items = [],
+  showThemeSubmenu = true,
+  onLogout,
+  align = "end"
+}) {
+  const shell = useShell();
+  const { theme, setTheme } = useTheme();
+  const { user, labels } = shell;
+  if (!user) return null;
+  const handleLogout = onLogout ?? shell.onLogout;
+  const renderItem = (item) => {
+    const Icon = item.icon;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4" }) : null,
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }),
+      item.shortcut ? /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.shortcut }) : null
+    ] });
+    if (item.href) {
+      return /* @__PURE__ */ jsx(DropdownMenuItem, { variant: item.variant, asChild: true, children: /* @__PURE__ */ jsx(ShellNavLink, { href: item.href, onClick: () => item.onSelect?.(), children: content }) }, item.id);
+    }
+    return /* @__PURE__ */ jsx(DropdownMenuItem, { variant: item.variant, onClick: () => item.onSelect?.(), children: content }, item.id);
+  };
+  const builtInItems = [
+    profileHref ? { id: "profile", label: labels.profile, icon: CircleUser, href: profileHref } : null,
+    settingsHref ? { id: "settings", label: labels.settings, icon: Settings, href: settingsHref } : null,
+    helpHref ? { id: "help", label: labels.help, icon: HelpCircle, href: helpHref } : null
+  ];
+  const visibleBuiltIns = builtInItems.filter((item) => item !== null);
+  const hasEntries = visibleBuiltIns.length > 0 || items.length > 0 || showThemeSubmenu;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": labels.account,
+        className: cn(
+          "flex items-center gap-2 rounded-md p-1 text-left",
+          "transition-colors duration-150 ease-out hover:bg-muted",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(UserAvatar, { user }),
+          showName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium leading-tight text-foreground", children: user.name }),
+              user.role ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] leading-tight text-muted-foreground", children: user.role }) : null
+            ] }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 shrink-0 text-muted-foreground" })
+          ] }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align, className: "w-60", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex items-center gap-2 font-normal", children: [
+        /* @__PURE__ */ jsx(UserAvatar, { user }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: user.name }),
+          user.email ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email }) : null,
+          user.role ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: user.role }) : null
+        ] })
+      ] }),
+      hasEntries ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+      visibleBuiltIns.map(renderItem),
+      items.map(renderItem),
+      showThemeSubmenu ? /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+          /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: labels.appearance })
+        ] }),
+        /* @__PURE__ */ jsxs(DropdownMenuSubContent, { children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("light"), className: cn(theme === "light" && "bg-accent"), children: [
+            /* @__PURE__ */ jsx(Sun, { className: "size-4" }),
+            labels.themeLight
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("dark"), className: cn(theme === "dark" && "bg-accent"), children: [
+            /* @__PURE__ */ jsx(Moon, { className: "size-4" }),
+            labels.themeDark
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setTheme("system"), className: cn(theme === "system" && "bg-accent"), children: [
+            /* @__PURE__ */ jsx(Monitor, { className: "size-4" }),
+            labels.themeSystem
+          ] })
+        ] })
+      ] }) : null,
+      handleLogout ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onClick: handleLogout, children: [
+          /* @__PURE__ */ jsx(LogOut, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { children: labels.logout })
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
+export {
+  UserAvatar,
+  UserMenu
+};
+//# sourceMappingURL=user-menu.js.map

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

@@ -0,0 +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 { 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 { getAvatarToneClass, 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\", getAvatarToneClass(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":[]}

package/dist/shell/utils.d.ts

@@ -0,0 +1,62 @@
+import { CSSProperties } from 'react';
+import { AppDescriptor, NavGroup, NavItem, ShellNav } from './types.js';
+export { getVietnameseInitials } from '../components/composite/text-utils.js';
+import 'lucide-react';
+
+/**
+ * Hàm thuần dùng chung cho tầng shell — KHÔNG hook, KHÔNG directive
+ * (dùng được ở cả server lẫn client).
+ */
+
+/**
+ * Chuẩn hoá menu app truyền vào về `NavGroup[]`.
+ * Mảng phẳng `NavItem[]` → một nhóm không nhãn (id "default").
+ */
+declare function toNavGroups(nav: ShellNav | undefined): NavGroup[];
+/** Gộp mọi item của mọi nhóm thành một mảng phẳng (kể cả mục con). */
+declare function flattenNavItems(groups: NavGroup[]): NavItem[];
+/**
+ * Active matching "thông minh": chỉ dùng `startsWith` khi KHÔNG có mục nào khác
+ * khớp CHÍNH XÁC `pathname`. Nếu không, `/tasks` vẫn sáng khi đang đứng ở
+ * `/tasks/inbox` (có mục riêng cho nó).
+ *
+ * @param siblings Danh sách mục để đối chiếu khớp chính xác — nên truyền toàn bộ
+ *                 mục của app hiện tại (`flattenNavItems`), không chỉ mục cùng cấp.
+ */
+declare function isNavItemActive(item: NavItem, pathname: string, siblings?: NavItem[]): boolean;
+/** Mục cha được coi là active khi chính nó hoặc bất kỳ mục con nào active. */
+declare function isNavBranchActive(item: NavItem, pathname: string, siblings?: NavItem[]): boolean;
+/** App đã được cấp quyền (`entitled` khác `false`) — thứ tự giữ nguyên như app truyền vào. */
+declare function getEntitledApps(apps: AppDescriptor[]): AppDescriptor[];
+/** App chưa mở khoá — hiển thị ở nhóm "Khám phá thêm" của AppLauncher. */
+declare function getLockedApps(apps: AppDescriptor[]): AppDescriptor[];
+/**
+ * Suy ra app hiện tại từ `pathname` — khớp prefix DÀI NHẤT trước để
+ * "/crm/deals" không rơi nhầm vào app có href "/".
+ */
+declare function resolveCurrentApp(apps: AppDescriptor[], pathname: string): AppDescriptor | null;
+/**
+ * Bỏ dấu tiếng Việt + hạ chữ thường để so khớp khi tìm kiếm.
+ * ("Đà Nẵng" → "da nang"). `đ/Đ` phải xử lý riêng vì NFD không tách được — phần bỏ dấu
+ * dùng lại `removeVietnameseTones` của Tier 2, ở đây chỉ thêm hạ chữ thường + trim.
+ */
+declare function normalizeVi(value: string): string;
+/**
+ * Class nền/chữ của avatar chữ cái theo TÊN.
+ *
+ * Chỉ là lối vào tầng shell của `getLetterAvatarTone` (`composite/letter-avatar.tsx`) —
+ * NGUỒN SỰ THẬT DUY NHẤT về màu avatar. 0.1.0 từng có bảng tông + hàm băm riêng ở đây,
+ * lệch cả bảng màu lẫn thuật toán băm với `LetterAvatar`, nên UserMenu/WorkspaceSwitcher
+ * tô một màu còn `AvatarGroup` của CÙNG một người tô màu khác trên CÙNG một trang.
+ *
+ * @param seed Phải là **tên hiển thị** (đúng thứ truyền vào prop `name` của `LetterAvatar`).
+ *             Truyền email/slug sẽ lại lệch màu với avatar cùng người ở chỗ khác.
+ */
+declare function getAvatarToneClass(seed: string): string;
+/**
+ * Inline style gán `--app-accent` cho một app cụ thể.
+ * Trả về `undefined` khi app không khai accent → giữ nguyên token mặc định của theme.
+ */
+declare function appAccentStyle(app: Pick<AppDescriptor, "accent" | "accentForeground"> | null | undefined): CSSProperties | undefined;
+
+export { appAccentStyle, flattenNavItems, getAvatarToneClass, getEntitledApps, getLockedApps, isNavBranchActive, isNavItemActive, normalizeVi, resolveCurrentApp, toNavGroups };

package/dist/shell/utils.js

@@ -0,0 +1,73 @@
+import { getLetterAvatarTone } from "../components/composite/letter-avatar.js";
+import { removeVietnameseTones } from "../components/composite/text-utils.js";
+import { getVietnameseInitials } from "../components/composite/text-utils.js";
+function isNavGroup(value) {
+  return Array.isArray(value.items);
+}
+function toNavGroups(nav) {
+  if (!nav || nav.length === 0) return [];
+  const first = nav[0];
+  if (first && isNavGroup(first)) return nav;
+  return [{ id: "default", items: nav }];
+}
+function flattenNavItems(groups) {
+  const out = [];
+  const walk = (items) => {
+    for (const item of items) {
+      out.push(item);
+      if (item.children?.length) walk(item.children);
+    }
+  };
+  for (const group of groups) walk(group.items);
+  return out;
+}
+function isNavItemActive(item, pathname, siblings = []) {
+  if (item.isActive !== void 0) return item.isActive;
+  if (!pathname || !item.href) return false;
+  if (pathname === item.href) return true;
+  const hasExactMatchElsewhere = siblings.some((other) => other.href !== item.href && pathname === other.href);
+  if (hasExactMatchElsewhere) return false;
+  return item.href !== "/" && pathname.startsWith(`${item.href}/`);
+}
+function isNavBranchActive(item, pathname, siblings = []) {
+  if (isNavItemActive(item, pathname, siblings)) return true;
+  return (item.children ?? []).some((child) => isNavBranchActive(child, pathname, siblings));
+}
+function getEntitledApps(apps) {
+  return apps.filter((app) => app.entitled !== false);
+}
+function getLockedApps(apps) {
+  return apps.filter((app) => app.entitled === false);
+}
+function resolveCurrentApp(apps, pathname) {
+  if (apps.length === 0) return null;
+  const matched = [...apps].sort((a, b) => b.href.length - a.href.length).find((app) => pathname === app.href || app.href !== "/" && pathname.startsWith(`${app.href}/`));
+  return matched ?? apps[0] ?? null;
+}
+function normalizeVi(value) {
+  return removeVietnameseTones(value).toLowerCase().trim();
+}
+function getAvatarToneClass(seed) {
+  return getLetterAvatarTone(seed);
+}
+function appAccentStyle(app) {
+  if (!app?.accent && !app?.accentForeground) return void 0;
+  const style = {};
+  if (app.accent) style["--app-accent"] = app.accent;
+  if (app.accentForeground) style["--app-accent-foreground"] = app.accentForeground;
+  return style;
+}
+export {
+  appAccentStyle,
+  flattenNavItems,
+  getAvatarToneClass,
+  getEntitledApps,
+  getLockedApps,
+  getVietnameseInitials,
+  isNavBranchActive,
+  isNavItemActive,
+  normalizeVi,
+  resolveCurrentApp,
+  toNavGroups
+};
+//# sourceMappingURL=utils.js.map