@comitor/ui 0.1.0

package/dist/shell/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/utils.ts"],"sourcesContent":["/**\n * Hàm thuần dùng chung cho tầng shell — KHÔNG hook, KHÔNG directive\n * (dùng được ở cả server lẫn client).\n */\n\nimport type { CSSProperties } from \"react\";\nimport { getLetterAvatarTone } from \"../components/composite/letter-avatar.js\";\nimport { removeVietnameseTones } from \"../components/composite/text-utils.js\";\nimport type { AppDescriptor, NavGroup, NavItem, ShellNav } from \"./types.js\";\n\n/**\n * Initials kiểu Việt Nam — **cùng một cài đặt** với entry chính (`@comitor/ui`).\n *\n * Re-export chứ không viết lại: 0.1.0 từng có hai bản (`toUpperCase()` ở đây,\n * `toLocaleUpperCase(\"vi-VN\")` ở `composite/text-utils.ts`) nên cùng một cái tên\n * cho ra hai kết quả tuỳ chỗ import. Tên vẫn xuất ở cả hai entry để không phá API,\n * nhưng chỉ còn MỘT thân hàm.\n */\nexport { getVietnameseInitials } from \"../components/composite/text-utils.js\";\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Điều hướng\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/** Phân biệt `NavGroup` với `NavItem` khi app truyền mảng phẳng. */\nfunction isNavGroup(value: NavItem | NavGroup): value is NavGroup {\n  return Array.isArray((value as NavGroup).items);\n}\n\n/**\n * Chuẩn hoá menu app truyền vào về `NavGroup[]`.\n * Mảng phẳng `NavItem[]` → một nhóm không nhãn (id \"default\").\n */\nexport function toNavGroups(nav: ShellNav | undefined): NavGroup[] {\n  if (!nav || nav.length === 0) return [];\n  const first = nav[0];\n  if (first && isNavGroup(first)) return nav as NavGroup[];\n  return [{ id: \"default\", items: nav as NavItem[] }];\n}\n\n/** Gộp mọi item của mọi nhóm thành một mảng phẳng (kể cả mục con). */\nexport function flattenNavItems(groups: NavGroup[]): NavItem[] {\n  const out: NavItem[] = [];\n  const walk = (items: NavItem[]) => {\n    for (const item of items) {\n      out.push(item);\n      if (item.children?.length) walk(item.children);\n    }\n  };\n  for (const group of groups) walk(group.items);\n  return out;\n}\n\n/**\n * Active matching \"thông minh\": chỉ dùng `startsWith` khi KHÔNG có mục nào khác\n * khớp CHÍNH XÁC `pathname`. Nếu không, `/tasks` vẫn sáng khi đang đứng ở\n * `/tasks/inbox` (có mục riêng cho nó).\n *\n * @param siblings Danh sách mục để đối chiếu khớp chính xác — nên truyền toàn bộ\n *                 mục của app hiện tại (`flattenNavItems`), không chỉ mục cùng cấp.\n */\nexport function isNavItemActive(item: NavItem, pathname: string, siblings: NavItem[] = []): boolean {\n  if (item.isActive !== undefined) return item.isActive;\n  if (!pathname || !item.href) return false;\n  if (pathname === item.href) return true;\n  const hasExactMatchElsewhere = siblings.some((other) => other.href !== item.href && pathname === other.href);\n  if (hasExactMatchElsewhere) return false;\n  return item.href !== \"/\" && pathname.startsWith(`${item.href}/`);\n}\n\n/** Mục cha được coi là active khi chính nó hoặc bất kỳ mục con nào active. */\nexport function isNavBranchActive(item: NavItem, pathname: string, siblings: NavItem[] = []): boolean {\n  if (isNavItemActive(item, pathname, siblings)) return true;\n  return (item.children ?? []).some((child) => isNavBranchActive(child, pathname, siblings));\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   App (trục 2)\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/** App đã được cấp quyền (`entitled` khác `false`) — thứ tự giữ nguyên như app truyền vào. */\nexport function getEntitledApps(apps: AppDescriptor[]): AppDescriptor[] {\n  return apps.filter((app) => app.entitled !== false);\n}\n\n/** App chưa mở khoá — hiển thị ở nhóm \"Khám phá thêm\" của AppLauncher. */\nexport function getLockedApps(apps: AppDescriptor[]): AppDescriptor[] {\n  return apps.filter((app) => app.entitled === false);\n}\n\n/**\n * Suy ra app hiện tại từ `pathname` — khớp prefix DÀI NHẤT trước để\n * \"/crm/deals\" không rơi nhầm vào app có href \"/\".\n */\nexport function resolveCurrentApp(apps: AppDescriptor[], pathname: string): AppDescriptor | null {\n  if (apps.length === 0) return null;\n  const matched = [...apps]\n    .sort((a, b) => b.href.length - a.href.length)\n    .find((app) => pathname === app.href || (app.href !== \"/\" && pathname.startsWith(`${app.href}/`)));\n  return matched ?? apps[0] ?? null;\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Chuỗi tiếng Việt\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Bỏ dấu tiếng Việt + hạ chữ thường để so khớp khi tìm kiếm.\n * (\"Đà Nẵng\" → \"da nang\"). `đ/Đ` phải xử lý riêng vì NFD không tách được — phần bỏ dấu\n * dùng lại `removeVietnameseTones` của Tier 2, ở đây chỉ thêm hạ chữ thường + trim.\n */\nexport function normalizeVi(value: string): string {\n  return removeVietnameseTones(value).toLowerCase().trim();\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Avatar chữ cái\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Class nền/chữ của avatar chữ cái theo TÊN.\n *\n * Chỉ là lối vào tầng shell của `getLetterAvatarTone` (`composite/letter-avatar.tsx`) —\n * 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,\n * lệch cả bảng màu lẫn thuật toán băm với `LetterAvatar`, nên UserMenu/WorkspaceSwitcher\n * 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.\n *\n * @param seed Phải là **tên hiển thị** (đúng thứ truyền vào prop `name` của `LetterAvatar`).\n *             Truyền email/slug sẽ lại lệch màu với avatar cùng người ở chỗ khác.\n */\nexport function getAvatarToneClass(seed: string): string {\n  return getLetterAvatarTone(seed);\n}\n\n/* ────────────────────────────────────────────────────────────────────────────\n   Biến CSS theo app\n   ──────────────────────────────────────────────────────────────────────────── */\n\n/**\n * Inline style gán `--app-accent` cho một app cụ thể.\n * Trả về `undefined` khi app không khai accent → giữ nguyên token mặc định của theme.\n */\nexport function appAccentStyle(app: Pick<AppDescriptor, \"accent\" | \"accentForeground\"> | null | undefined) {\n  if (!app?.accent && !app?.accentForeground) return undefined;\n  const style: Record<string, string> = {};\n  if (app.accent) style[\"--app-accent\"] = app.accent;\n  if (app.accentForeground) style[\"--app-accent-foreground\"] = app.accentForeground;\n  return style as CSSProperties;\n}\n"],"mappings":"AAMA,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AAWtC,SAAS,6BAA6B;AAOtC,SAAS,WAAW,OAA8C;AAChE,SAAO,MAAM,QAAS,MAAmB,KAAK;AAChD;AAMO,SAAS,YAAY,KAAuC;AACjE,MAAI,CAAC,OAAO,IAAI,WAAW,EAAG,QAAO,CAAC;AACtC,QAAM,QAAQ,IAAI,CAAC;AACnB,MAAI,SAAS,WAAW,KAAK,EAAG,QAAO;AACvC,SAAO,CAAC,EAAE,IAAI,WAAW,OAAO,IAAiB,CAAC;AACpD;AAGO,SAAS,gBAAgB,QAA+B;AAC7D,QAAM,MAAiB,CAAC;AACxB,QAAM,OAAO,CAAC,UAAqB;AACjC,eAAW,QAAQ,OAAO;AACxB,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,UAAU,OAAQ,MAAK,KAAK,QAAQ;AAAA,IAC/C;AAAA,EACF;AACA,aAAW,SAAS,OAAQ,MAAK,MAAM,KAAK;AAC5C,SAAO;AACT;AAUO,SAAS,gBAAgB,MAAe,UAAkB,WAAsB,CAAC,GAAY;AAClG,MAAI,KAAK,aAAa,OAAW,QAAO,KAAK;AAC7C,MAAI,CAAC,YAAY,CAAC,KAAK,KAAM,QAAO;AACpC,MAAI,aAAa,KAAK,KAAM,QAAO;AACnC,QAAM,yBAAyB,SAAS,KAAK,CAAC,UAAU,MAAM,SAAS,KAAK,QAAQ,aAAa,MAAM,IAAI;AAC3G,MAAI,uBAAwB,QAAO;AACnC,SAAO,KAAK,SAAS,OAAO,SAAS,WAAW,GAAG,KAAK,IAAI,GAAG;AACjE;AAGO,SAAS,kBAAkB,MAAe,UAAkB,WAAsB,CAAC,GAAY;AACpG,MAAI,gBAAgB,MAAM,UAAU,QAAQ,EAAG,QAAO;AACtD,UAAQ,KAAK,YAAY,CAAC,GAAG,KAAK,CAAC,UAAU,kBAAkB,OAAO,UAAU,QAAQ,CAAC;AAC3F;AAOO,SAAS,gBAAgB,MAAwC;AACtE,SAAO,KAAK,OAAO,CAAC,QAAQ,IAAI,aAAa,KAAK;AACpD;AAGO,SAAS,cAAc,MAAwC;AACpE,SAAO,KAAK,OAAO,CAAC,QAAQ,IAAI,aAAa,KAAK;AACpD;AAMO,SAAS,kBAAkB,MAAuB,UAAwC;AAC/F,MAAI,KAAK,WAAW,EAAG,QAAO;AAC9B,QAAM,UAAU,CAAC,GAAG,IAAI,EACrB,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,MAAM,EAC5C,KAAK,CAAC,QAAQ,aAAa,IAAI,QAAS,IAAI,SAAS,OAAO,SAAS,WAAW,GAAG,IAAI,IAAI,GAAG,CAAE;AACnG,SAAO,WAAW,KAAK,CAAC,KAAK;AAC/B;AAWO,SAAS,YAAY,OAAuB;AACjD,SAAO,sBAAsB,KAAK,EAAE,YAAY,EAAE,KAAK;AACzD;AAiBO,SAAS,mBAAmB,MAAsB;AACvD,SAAO,oBAAoB,IAAI;AACjC;AAUO,SAAS,eAAe,KAA4E;AACzG,MAAI,CAAC,KAAK,UAAU,CAAC,KAAK,iBAAkB,QAAO;AACnD,QAAM,QAAgC,CAAC;AACvC,MAAI,IAAI,OAAQ,OAAM,cAAc,IAAI,IAAI;AAC5C,MAAI,IAAI,iBAAkB,OAAM,yBAAyB,IAAI,IAAI;AACjE,SAAO;AACT;","names":[]}

package/dist/shell/workspace-switcher.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface WorkspaceSwitcherProps {
+    className?: string;
+    /** Sidebar thu gọn → chỉ hiện avatar + tooltip. */
+    collapsed?: boolean;
+    /** Ẩn khu "Hành động" (tạo workspace, cài đặt, mời thành viên, đăng xuất). */
+    showActions?: boolean;
+    /** Căn panel — mặc định "start" (mở xuôi theo mép trái sidebar). */
+    align?: "start" | "center" | "end";
+}
+/**
+ * **Trục 1 — đổi không gian làm việc.**
+ *
+ * Chỉ gọi `onWorkspaceChange(id)`; điều hướng/đổi subdomain là việc của app
+ * (đổi workspace kéo theo đổi toàn bộ dữ liệu + quyền nên shell không tự quyết).
+ * Có ≤1 workspace thì phần danh sách tự ẩn, chỉ còn nhãn workspace hiện tại.
+ *
+ * Dùng `Popover` chứ không `DropdownMenu`: menu của Radix có typeahead, gõ vào
+ * ô tìm kiếm bên trong sẽ bị nó cướp phím.
+ */
+declare function WorkspaceSwitcher({ className, collapsed, showActions, align }: WorkspaceSwitcherProps): React.JSX.Element | null;
+
+export { WorkspaceSwitcher, type WorkspaceSwitcherProps };

package/dist/shell/workspace-switcher.js

@@ -0,0 +1,219 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Building2, Check, ChevronsUpDown, LogOut, Plus, Search, Settings, UserPlus } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar.js";
+import { Badge } from "../components/ui/badge.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { Separator } from "../components/ui/separator.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip.js";
+import { cn } from "../lib/cn.js";
+import { useShell } from "./shell-context.js";
+import { getAvatarToneClass, getVietnameseInitials, normalizeVi } from "./utils.js";
+const SEARCH_THRESHOLD = 8;
+function WorkspaceAvatar({ workspace, className }) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: cn("size-6 rounded-md", className), children: [
+    workspace.logoUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: workspace.logoUrl, alt: "", className: "rounded-md" }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: cn("rounded-md text-[10px] font-semibold", getAvatarToneClass(workspace.name)), children: getVietnameseInitials(workspace.name) })
+  ] });
+}
+function WorkspaceSwitcher({
+  className,
+  collapsed = false,
+  showActions = true,
+  align = "start"
+}) {
+  const {
+    workspaces,
+    currentWorkspace,
+    onWorkspaceChange,
+    onCreateWorkspace,
+    onWorkspaceSettings,
+    onInviteMembers,
+    onLogout,
+    labels
+  } = useShell();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const searchRef = useRef(null);
+  const showList = workspaces.length > 1;
+  const showSearch = workspaces.length >= SEARCH_THRESHOLD;
+  const filtered = useMemo(() => {
+    if (!query.trim()) return workspaces;
+    const needle = normalizeVi(query);
+    return workspaces.filter(
+      (workspace) => normalizeVi(workspace.name).includes(needle) || normalizeVi(workspace.slug).includes(needle)
+    );
+  }, [workspaces, query]);
+  const hasActions = showActions && Boolean(onCreateWorkspace || onWorkspaceSettings || onInviteMembers || onLogout);
+  if (!currentWorkspace) return null;
+  const handleSelect = (workspace) => {
+    setOpen(false);
+    setQuery("");
+    if (workspace.id !== currentWorkspace.id) onWorkspaceChange?.(workspace.id);
+  };
+  const closeThen = (action) => () => {
+    setOpen(false);
+    action();
+  };
+  const trigger = collapsed ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": labels.workspaceSwitcherLabel,
+      className: cn(
+        "flex size-9 items-center justify-center rounded-md",
+        "transition-colors duration-150 ease-out hover:bg-sidebar-accent",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace: currentWorkspace })
+    }
+  ) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": labels.workspaceSwitcherLabel,
+      className: cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left",
+        "transition-colors duration-150 ease-out hover:bg-sidebar-accent",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace: currentWorkspace }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-sidebar-foreground", children: currentWorkspace.name }),
+          currentWorkspace.plan ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-sidebar-foreground/55", children: currentWorkspace.plan }) : null
+        ] }),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 shrink-0 text-sidebar-foreground/45" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    collapsed ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: currentWorkspace.name })
+    ] }) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align,
+        sideOffset: 6,
+        className: "w-72 p-0",
+        onOpenAutoFocus: (event) => {
+          if (!searchRef.current) return;
+          event.preventDefault();
+          searchRef.current.focus();
+        },
+        children: [
+          showList ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            showSearch ? /* @__PURE__ */ jsxs("div", { className: "relative border-b border-border p-2", children: [
+              /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-4 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchRef,
+                  type: "search",
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  placeholder: labels.workspaceSearchPlaceholder,
+                  "aria-label": labels.workspaceSearchPlaceholder,
+                  className: cn(
+                    "h-8 w-full rounded-md border border-input bg-background pl-7 pr-2 text-sm",
+                    // `border-ring` chứ không `border-gold-300`: token semantic đổi theo theme
+                    // (gold-300 giữ nguyên ở dark), và đây là quy tắc màu của package.
+                    "placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/50"
+                  )
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto scrollbar-thin p-1", role: "group", "aria-label": labels.workspace, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 py-6 text-center text-sm text-muted-foreground", children: labels.workspaceEmpty }) : filtered.map((workspace) => {
+              const isCurrent = workspace.id === currentWorkspace.id;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-current": isCurrent ? "true" : void 0,
+                  onClick: () => handleSelect(workspace),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left",
+                    "transition-colors duration-150 ease-out hover:bg-accent",
+                    isCurrent && "bg-accent/60"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: workspace.name }),
+                      workspace.role || workspace.memberCount !== void 0 ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: [
+                        workspace.role,
+                        workspace.memberCount === void 0 ? void 0 : `${workspace.memberCount} ${labels.members}`
+                      ].filter(Boolean).join(" \xB7 ") }) : null
+                    ] }),
+                    workspace.plan ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", size: "sm", className: "shrink-0", children: workspace.plan }) : null,
+                    isCurrent ? /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-popover-foreground" }) : null
+                  ]
+                },
+                workspace.id
+              );
+            }) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3", children: [
+            /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace: currentWorkspace, className: "size-8" }),
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: currentWorkspace.name }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: currentWorkspace.plan ?? currentWorkspace.slug })
+            ] })
+          ] }),
+          hasActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-1", children: [
+              onCreateWorkspace ? /* @__PURE__ */ jsx(ActionRow, { icon: Plus, label: labels.createWorkspace, onClick: closeThen(onCreateWorkspace) }) : null,
+              onWorkspaceSettings ? /* @__PURE__ */ jsx(
+                ActionRow,
+                {
+                  icon: Settings,
+                  label: labels.workspaceSettings,
+                  onClick: closeThen(() => onWorkspaceSettings(currentWorkspace.id))
+                }
+              ) : null,
+              onInviteMembers ? /* @__PURE__ */ jsx(
+                ActionRow,
+                {
+                  icon: UserPlus,
+                  label: labels.inviteMembers,
+                  onClick: closeThen(() => onInviteMembers(currentWorkspace.id))
+                }
+              ) : null,
+              onLogout ? /* @__PURE__ */ jsx(ActionRow, { icon: LogOut, label: labels.logout, destructive: true, onClick: closeThen(onLogout) }) : null
+            ] })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function ActionRow({
+  icon: Icon = Building2,
+  label,
+  onClick,
+  destructive = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+        "transition-colors duration-150 ease-out",
+        destructive ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 opacity-70" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+export {
+  WorkspaceSwitcher
+};
+//# sourceMappingURL=workspace-switcher.js.map

package/dist/shell/workspace-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/workspace-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { Building2, Check, ChevronsUpDown, LogOut, Plus, Search, Settings, UserPlus } from \"lucide-react\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../components/ui/avatar.js\";\nimport { Badge } from \"../components/ui/badge.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../components/ui/popover.js\";\nimport { Separator } from \"../components/ui/separator.js\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../components/ui/tooltip.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useShell } from \"./shell-context.js\";\nimport type { Workspace } from \"./types.js\";\nimport { getAvatarToneClass, getVietnameseInitials, normalizeVi } from \"./utils.js\";\n\n/** Từ số workspace này trở lên thì hiện ô tìm kiếm trong danh sách. */\nconst SEARCH_THRESHOLD = 8;\n\n/**\n * Ảnh đại diện workspace: logo nếu có, không thì ô chữ cái tô màu deterministic.\n *\n * Seed là `workspace.name` chứ KHÔNG phải slug: app hiển thị workspace bằng\n * `<LetterAvatar name={workspace.name} square />` ở chỗ khác, seed lệch là màu lệch.\n */\nfunction WorkspaceAvatar({ workspace, className }: { workspace: Workspace; className?: string }) {\n  return (\n    <Avatar className={cn(\"size-6 rounded-md\", className)}>\n      {workspace.logoUrl ? <AvatarImage src={workspace.logoUrl} alt=\"\" className=\"rounded-md\" /> : null}\n      <AvatarFallback className={cn(\"rounded-md text-[10px] font-semibold\", getAvatarToneClass(workspace.name))}>\n        {getVietnameseInitials(workspace.name)}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n\nexport interface WorkspaceSwitcherProps {\n  className?: string;\n  /** Sidebar thu gọn → chỉ hiện avatar + tooltip. */\n  collapsed?: boolean;\n  /** Ẩn khu \"Hành động\" (tạo workspace, cài đặt, mời thành viên, đăng xuất). */\n  showActions?: boolean;\n  /** Căn panel — mặc định \"start\" (mở xuôi theo mép trái sidebar). */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\n/**\n * **Trục 1 — đổi không gian làm việc.**\n *\n * Chỉ gọi `onWorkspaceChange(id)`; điều hướng/đổi subdomain là việc của app\n * (đổi workspace kéo theo đổi toàn bộ dữ liệu + quyền nên shell không tự quyết).\n * Có ≤1 workspace thì phần danh sách tự ẩn, chỉ còn nhãn workspace hiện tại.\n *\n * Dùng `Popover` chứ không `DropdownMenu`: menu của Radix có typeahead, gõ vào\n * ô tìm kiếm bên trong sẽ bị nó cướp phím.\n */\nexport function WorkspaceSwitcher({\n  className,\n  collapsed = false,\n  showActions = true,\n  align = \"start\"\n}: WorkspaceSwitcherProps) {\n  const {\n    workspaces,\n    currentWorkspace,\n    onWorkspaceChange,\n    onCreateWorkspace,\n    onWorkspaceSettings,\n    onInviteMembers,\n    onLogout,\n    labels\n  } = useShell();\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const searchRef = useRef<HTMLInputElement>(null);\n\n  const showList = workspaces.length > 1;\n  const showSearch = workspaces.length >= SEARCH_THRESHOLD;\n\n  const filtered = useMemo(() => {\n    if (!query.trim()) return workspaces;\n    const needle = normalizeVi(query);\n    return workspaces.filter(\n      (workspace) => normalizeVi(workspace.name).includes(needle) || normalizeVi(workspace.slug).includes(needle)\n    );\n  }, [workspaces, query]);\n\n  const hasActions = showActions && Boolean(onCreateWorkspace || onWorkspaceSettings || onInviteMembers || onLogout);\n\n  if (!currentWorkspace) return null;\n\n  const handleSelect = (workspace: Workspace) => {\n    setOpen(false);\n    setQuery(\"\");\n    if (workspace.id !== currentWorkspace.id) onWorkspaceChange?.(workspace.id);\n  };\n\n  /** Đóng panel rồi mới chạy hành động — tránh panel còn mở đè lên dialog app mở ra sau đó. */\n  const closeThen = (action: () => void) => () => {\n    setOpen(false);\n    action();\n  };\n\n  const trigger = collapsed ? (\n    <button\n      type=\"button\"\n      aria-label={labels.workspaceSwitcherLabel}\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-md\",\n        \"transition-colors duration-150 ease-out hover:bg-sidebar-accent\",\n        className\n      )}\n    >\n      <WorkspaceAvatar workspace={currentWorkspace} />\n    </button>\n  ) : (\n    <button\n      type=\"button\"\n      aria-label={labels.workspaceSwitcherLabel}\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left\",\n        \"transition-colors duration-150 ease-out hover:bg-sidebar-accent\",\n        className\n      )}\n    >\n      <WorkspaceAvatar workspace={currentWorkspace} />\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"truncate text-sm font-semibold text-sidebar-foreground\">{currentWorkspace.name}</span>\n        {currentWorkspace.plan ? (\n          <span className=\"truncate text-[11px] text-sidebar-foreground/55\">{currentWorkspace.plan}</span>\n        ) : null}\n      </span>\n      <ChevronsUpDown className=\"size-3.5 shrink-0 text-sidebar-foreground/45\" />\n    </button>\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {collapsed ? (\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">{currentWorkspace.name}</TooltipContent>\n        </Tooltip>\n      ) : (\n        <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      )}\n\n      <PopoverContent\n        align={align}\n        sideOffset={6}\n        className=\"w-72 p-0\"\n        onOpenAutoFocus={(event) => {\n          // Mặc định Radix focus vào khung panel; có ô tìm thì đưa con trỏ vào đó luôn.\n          if (!searchRef.current) return;\n          event.preventDefault();\n          searchRef.current.focus();\n        }}\n      >\n        {showList ? (\n          <>\n            {showSearch ? (\n              <div className=\"relative border-b border-border p-2\">\n                <Search className=\"pointer-events-none absolute left-4 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground\" />\n                <input\n                  ref={searchRef}\n                  type=\"search\"\n                  value={query}\n                  onChange={(event) => setQuery(event.target.value)}\n                  placeholder={labels.workspaceSearchPlaceholder}\n                  aria-label={labels.workspaceSearchPlaceholder}\n                  className={cn(\n                    \"h-8 w-full rounded-md border border-input bg-background pl-7 pr-2 text-sm\",\n                    // `border-ring` chứ không `border-gold-300`: token semantic đổi theo theme\n                    // (gold-300 giữ nguyên ở dark), và đây là quy tắc màu của package.\n                    \"placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/50\"\n                  )}\n                />\n              </div>\n            ) : null}\n\n            {/*\n              CỐ Ý không dùng role=\"listbox\"/\"option\": bộ ARIA đó hứa với trình đọc màn hình\n              một widget điều khiển bằng ↑/↓/Home/End + roving tabindex + aria-activedescendant,\n              mà hành vi thật ở đây chỉ là Tab qua từng nút trong Popover (Popover được chọn\n              thay DropdownMenu vì menu của Radix cướp phím gõ của ô tìm kiếm — xem chú thích\n              component). Khai đúng cái mình làm còn hơn khai sang trọng rồi lừa người dùng:\n              danh sách nút thường + `aria-current` cho mục đang chọn.\n            */}\n            <div className=\"max-h-64 overflow-y-auto scrollbar-thin p-1\" role=\"group\" aria-label={labels.workspace}>\n              {filtered.length === 0 ? (\n                <p className=\"px-2 py-6 text-center text-sm text-muted-foreground\">{labels.workspaceEmpty}</p>\n              ) : (\n                filtered.map((workspace) => {\n                  const isCurrent = workspace.id === currentWorkspace.id;\n                  return (\n                    <button\n                      key={workspace.id}\n                      type=\"button\"\n                      aria-current={isCurrent ? \"true\" : undefined}\n                      onClick={() => handleSelect(workspace)}\n                      className={cn(\n                        \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left\",\n                        \"transition-colors duration-150 ease-out hover:bg-accent\",\n                        isCurrent && \"bg-accent/60\"\n                      )}\n                    >\n                      <WorkspaceAvatar workspace={workspace} />\n                      <span className=\"flex min-w-0 flex-1 flex-col\">\n                        <span className=\"truncate text-sm font-medium text-foreground\">{workspace.name}</span>\n                        {workspace.role || workspace.memberCount !== undefined ? (\n                          <span className=\"truncate text-[11px] text-muted-foreground\">\n                            {[\n                              workspace.role,\n                              workspace.memberCount === undefined\n                                ? undefined\n                                : `${workspace.memberCount} ${labels.members}`\n                            ]\n                              .filter(Boolean)\n                              .join(\" · \")}\n                          </span>\n                        ) : null}\n                      </span>\n                      {workspace.plan ? (\n                        <Badge variant=\"secondary\" size=\"sm\" className=\"shrink-0\">\n                          {workspace.plan}\n                        </Badge>\n                      ) : null}\n                      {/* KHÔNG dùng `text-app-accent`: accent mặc định (gold #E8B824) chỉ đạt\n                          1,86:1 trên nền popover trắng — dưới ngưỡng 3:1 của WCAG 1.4.11 cho\n                          thành phần phi-văn-bản. `text-popover-foreground` đạt 18,9:1 (light)\n                          và 16,6:1 (dark). */}\n                      {isCurrent ? <Check className=\"size-4 shrink-0 text-popover-foreground\" /> : null}\n                    </button>\n                  );\n                })\n              )}\n            </div>\n          </>\n        ) : (\n          <div className=\"flex items-center gap-2 p-3\">\n            <WorkspaceAvatar workspace={currentWorkspace} className=\"size-8\" />\n            <span className=\"flex min-w-0 flex-col\">\n              <span className=\"truncate text-sm font-semibold text-foreground\">{currentWorkspace.name}</span>\n              <span className=\"truncate text-[11px] text-muted-foreground\">\n                {currentWorkspace.plan ?? currentWorkspace.slug}\n              </span>\n            </span>\n          </div>\n        )}\n\n        {hasActions ? (\n          <>\n            <Separator />\n            <div className=\"flex flex-col p-1\">\n              {onCreateWorkspace ? (\n                <ActionRow icon={Plus} label={labels.createWorkspace} onClick={closeThen(onCreateWorkspace)} />\n              ) : null}\n              {onWorkspaceSettings ? (\n                <ActionRow\n                  icon={Settings}\n                  label={labels.workspaceSettings}\n                  onClick={closeThen(() => onWorkspaceSettings(currentWorkspace.id))}\n                />\n              ) : null}\n              {onInviteMembers ? (\n                <ActionRow\n                  icon={UserPlus}\n                  label={labels.inviteMembers}\n                  onClick={closeThen(() => onInviteMembers(currentWorkspace.id))}\n                />\n              ) : null}\n              {onLogout ? (\n                <ActionRow icon={LogOut} label={labels.logout} destructive onClick={closeThen(onLogout)} />\n              ) : null}\n            </div>\n          </>\n        ) : null}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n/** Một dòng hành động trong panel (không phải mục chọn workspace). */\nfunction ActionRow({\n  icon: Icon = Building2,\n  label,\n  onClick,\n  destructive = false\n}: {\n  icon?: typeof Building2;\n  label: string;\n  onClick: () => void;\n  destructive?: boolean;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={cn(\n        \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm\",\n        \"transition-colors duration-150 ease-out\",\n        destructive ? \"text-destructive hover:bg-destructive/10\" : \"text-foreground hover:bg-accent\"\n      )}\n    >\n      <Icon className=\"size-4 shrink-0 opacity-70\" />\n      <span className=\"truncate\">{label}</span>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tokens.d.ts

@@ -0,0 +1,173 @@
+/**
+ * Design token dạng TS object — dành cho nơi KHÔNG có Tailwind: canvas, biểu đồ tuỳ biến,
+ * email HTML, xuất PDF, (sau này) React Native.
+ *
+ * ⚠ Nguồn sự thật của giá trị là `styles.css` (CSS variable). File này chỉ MIRROR hằng số.
+ * Sửa màu ở styles.css thì phải sửa kèm ở đây — và ngược lại.
+ *
+ * Trong môi trường có Tailwind, LUÔN dùng class token (`bg-primary`, `text-ash-500`),
+ * đừng đọc hex từ đây rồi nhét vào style inline: làm vậy là mất dark mode.
+ */
+/** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */
+declare const gold: {
+    readonly 50: "#FBF5DC";
+    readonly 100: "#F8E89D";
+    readonly 200: "#F5D060";
+    /** primary ở light mode */
+    readonly 300: "#E8B824";
+    readonly 400: "#B88A00";
+    readonly 500: "#7A5800";
+    readonly 600: "#5C4006";
+};
+/** Trung tính brand (khác thang ash — đây là màu "giấy/mực" của brand book). */
+declare const brandNeutral: {
+    readonly ink: "#0E1116";
+    readonly inkSoft: "#3A3F4A";
+    readonly paper: "#FBF7EE";
+    readonly warm: "#EDE8D8";
+};
+/**
+ * Thang xám Comitor — namespace `ash`, KHÔNG phải `gray`.
+ * Chỉ có 6 bậc; các bậc khuyết (200/400/600/800) cố ý không khai để không lẫn với
+ * thang gray dựng sẵn của Tailwind (xem chú thích trong styles.css).
+ */
+declare const ash: {
+    readonly 50: "#F7F7F8";
+    readonly 100: "#EDEEF1";
+    readonly 300: "#C8CBD3";
+    readonly 500: "#7E8290";
+    readonly 700: "#3A3F4A";
+    readonly 900: "#16181D";
+};
+/**
+ * Màu phụ. Bản `dark` được nâng sáng để đạt tương phản AA khi làm CHỮ trên nền #0E1116 —
+ * bản `light` quá tối cho việc đó.
+ */
+declare const accent: {
+    readonly light: {
+        readonly navy: "#0F1E3D";
+        readonly teal: "#1F8A8B";
+        readonly red: "#D64545";
+        readonly green: "#2EA56A";
+        readonly yellow: "#F2C94C";
+    };
+    readonly dark: {
+        readonly navy: "#0F1E3D";
+        readonly teal: "#2DD4BF";
+        readonly red: "#F87171";
+        readonly green: "#4ADE80";
+        readonly yellow: "#FACC15";
+    };
+};
+/** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */
+declare const semantic: {
+    readonly light: {
+        readonly background: "#FFFFFF";
+        readonly foreground: "#0E1116";
+        readonly card: "#FFFFFF";
+        readonly cardForeground: "#0E1116";
+        readonly popover: "#FFFFFF";
+        readonly popoverForeground: "#0E1116";
+        readonly primary: "#E8B824";
+        readonly primaryForeground: "#0E1116";
+        readonly secondary: "#EDE8D8";
+        readonly secondaryForeground: "#0E1116";
+        readonly muted: "#F7F7F8";
+        readonly mutedForeground: "#7E8290";
+        readonly accent: "#FBF5DC";
+        readonly accentForeground: "#0E1116";
+        readonly destructive: "#D64545";
+        readonly destructiveForeground: "#FFFFFF";
+        readonly border: "#EDEEF1";
+        readonly input: "#EDEEF1";
+        readonly ring: "#E8B824";
+        readonly sidebar: "#FAFAF9";
+        readonly sidebarForeground: "#0E1116";
+        readonly sidebarBorder: "#EDEEF1";
+        readonly sidebarAccent: "#FBF5DC";
+        readonly sidebarAccentForeground: "#0E1116";
+    };
+    readonly dark: {
+        readonly background: "#0E1116";
+        readonly foreground: "#F7F7F8";
+        readonly card: "#16181D";
+        readonly cardForeground: "#F7F7F8";
+        readonly popover: "#16181D";
+        readonly popoverForeground: "#F7F7F8";
+        readonly primary: "#F5D060";
+        readonly primaryForeground: "#0E1116";
+        readonly secondary: "#1E2128";
+        readonly secondaryForeground: "#F7F7F8";
+        readonly muted: "#1E2128";
+        readonly mutedForeground: "#7E8290";
+        readonly accent: "#1E2128";
+        readonly accentForeground: "#F7F7F8";
+        readonly destructive: "#D64545";
+        readonly destructiveForeground: "#FFFFFF";
+        readonly border: "#1E2128";
+        readonly input: "#1E2128";
+        readonly ring: "#F5D060";
+        readonly sidebar: "#16181D";
+        readonly sidebarForeground: "#F7F7F8";
+        readonly sidebarBorder: "#1E2128";
+        readonly sidebarAccent: "#1E2128";
+        readonly sidebarAccentForeground: "#F7F7F8";
+    };
+};
+/** Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ. */
+declare const status: {
+    readonly light: {
+        readonly success: "#2EA56A";
+        readonly successForeground: "#FFFFFF";
+        readonly warning: "#F2C94C";
+        readonly warningForeground: "#0E1116";
+        readonly info: "#1F8A8B";
+        readonly infoForeground: "#FFFFFF";
+        readonly destructive: "#D64545";
+        readonly destructiveForeground: "#FFFFFF";
+    };
+    readonly dark: {
+        readonly success: "#4ADE80";
+        readonly successForeground: "#0E1116";
+        readonly warning: "#FACC15";
+        readonly warningForeground: "#0E1116";
+        readonly info: "#2DD4BF";
+        readonly infoForeground: "#0E1116";
+        readonly destructive: "#D64545";
+        readonly destructiveForeground: "#FFFFFF";
+    };
+};
+/** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */
+declare const chart: {
+    readonly light: readonly ["#E8B824", "#1F8A8B", "#0F1E3D", "#2EA56A", "#D64545"];
+    readonly dark: readonly ["#F5D060", "#2DD4BF", "#7EA2E8", "#4ADE80", "#F87171"];
+};
+/** Màu avatar chữ cái — chọn deterministic theo tên, lấy từ token nên luôn hợp tông brand. */
+declare const avatarPalette: readonly ["#B88A00", "#5C4006", "#1F8A8B", "#0F1E3D", "#2EA56A", "#D64545", "#7E8290", "#3A3F4A"];
+/** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */
+declare const layout: {
+    /** px — --header-height 3.5rem */
+    readonly headerHeight: 56;
+    /** px — --sidebar-width 16rem */
+    readonly sidebarWidth: 256;
+    /** px — --sidebar-width-icon 3.5rem */
+    readonly sidebarCollapsedWidth: 56;
+    /** px — --radius 0.375rem */
+    readonly radius: 6;
+    readonly breakpoints: {
+        readonly mobile: 768;
+        readonly tablet: 1024;
+        readonly desktop: 1280;
+    };
+    readonly pageSizes: readonly [20, 50, 100];
+    /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */
+    readonly minTapTarget: 44;
+};
+/** Font stack — app phải tự nạp Inter (subsets latin + vietnamese) và gán --font-inter. */
+declare const typography: {
+    readonly fontSans: "\"Inter\", system-ui, sans-serif";
+    readonly fontMono: "\"Geist Mono\", ui-monospace, monospace";
+};
+type ThemeMode = "light" | "dark";
+
+export { type ThemeMode, accent, ash, avatarPalette, brandNeutral, chart, gold, layout, semantic, status, typography };

package/dist/tokens.js

@@ -0,0 +1,161 @@
+const gold = {
+  50: "#FBF5DC",
+  100: "#F8E89D",
+  200: "#F5D060",
+  /** primary ở light mode */
+  300: "#E8B824",
+  400: "#B88A00",
+  500: "#7A5800",
+  600: "#5C4006"
+};
+const brandNeutral = {
+  ink: "#0E1116",
+  inkSoft: "#3A3F4A",
+  paper: "#FBF7EE",
+  warm: "#EDE8D8"
+};
+const ash = {
+  50: "#F7F7F8",
+  100: "#EDEEF1",
+  300: "#C8CBD3",
+  500: "#7E8290",
+  700: "#3A3F4A",
+  900: "#16181D"
+};
+const accent = {
+  light: {
+    navy: "#0F1E3D",
+    teal: "#1F8A8B",
+    red: "#D64545",
+    green: "#2EA56A",
+    yellow: "#F2C94C"
+  },
+  dark: {
+    navy: "#0F1E3D",
+    teal: "#2DD4BF",
+    red: "#F87171",
+    green: "#4ADE80",
+    yellow: "#FACC15"
+  }
+};
+const semantic = {
+  light: {
+    background: "#FFFFFF",
+    foreground: "#0E1116",
+    card: "#FFFFFF",
+    cardForeground: "#0E1116",
+    popover: "#FFFFFF",
+    popoverForeground: "#0E1116",
+    primary: "#E8B824",
+    primaryForeground: "#0E1116",
+    secondary: "#EDE8D8",
+    secondaryForeground: "#0E1116",
+    muted: "#F7F7F8",
+    mutedForeground: "#7E8290",
+    accent: "#FBF5DC",
+    accentForeground: "#0E1116",
+    destructive: "#D64545",
+    destructiveForeground: "#FFFFFF",
+    border: "#EDEEF1",
+    input: "#EDEEF1",
+    ring: "#E8B824",
+    sidebar: "#FAFAF9",
+    sidebarForeground: "#0E1116",
+    sidebarBorder: "#EDEEF1",
+    sidebarAccent: "#FBF5DC",
+    sidebarAccentForeground: "#0E1116"
+  },
+  dark: {
+    background: "#0E1116",
+    foreground: "#F7F7F8",
+    card: "#16181D",
+    cardForeground: "#F7F7F8",
+    popover: "#16181D",
+    popoverForeground: "#F7F7F8",
+    primary: "#F5D060",
+    primaryForeground: "#0E1116",
+    secondary: "#1E2128",
+    secondaryForeground: "#F7F7F8",
+    muted: "#1E2128",
+    mutedForeground: "#7E8290",
+    accent: "#1E2128",
+    accentForeground: "#F7F7F8",
+    destructive: "#D64545",
+    destructiveForeground: "#FFFFFF",
+    border: "#1E2128",
+    input: "#1E2128",
+    ring: "#F5D060",
+    sidebar: "#16181D",
+    sidebarForeground: "#F7F7F8",
+    sidebarBorder: "#1E2128",
+    sidebarAccent: "#1E2128",
+    sidebarAccentForeground: "#F7F7F8"
+  }
+};
+const status = {
+  light: {
+    success: accent.light.green,
+    successForeground: "#FFFFFF",
+    warning: accent.light.yellow,
+    warningForeground: "#0E1116",
+    info: accent.light.teal,
+    infoForeground: "#FFFFFF",
+    destructive: "#D64545",
+    destructiveForeground: "#FFFFFF"
+  },
+  dark: {
+    success: accent.dark.green,
+    successForeground: "#0E1116",
+    warning: accent.dark.yellow,
+    warningForeground: "#0E1116",
+    info: accent.dark.teal,
+    infoForeground: "#0E1116",
+    destructive: "#D64545",
+    destructiveForeground: "#FFFFFF"
+  }
+};
+const chart = {
+  light: [gold[300], accent.light.teal, accent.light.navy, accent.light.green, accent.light.red],
+  dark: [gold[200], accent.dark.teal, "#7EA2E8", accent.dark.green, accent.dark.red]
+};
+const avatarPalette = [
+  gold[400],
+  gold[600],
+  accent.light.teal,
+  accent.light.navy,
+  accent.light.green,
+  accent.light.red,
+  ash[500],
+  brandNeutral.inkSoft
+];
+const layout = {
+  /** px — --header-height 3.5rem */
+  headerHeight: 56,
+  /** px — --sidebar-width 16rem */
+  sidebarWidth: 256,
+  /** px — --sidebar-width-icon 3.5rem */
+  sidebarCollapsedWidth: 56,
+  /** px — --radius 0.375rem */
+  radius: 6,
+  breakpoints: { mobile: 768, tablet: 1024, desktop: 1280 },
+  pageSizes: [20, 50, 100],
+  /** px — kích thước tối thiểu của vùng chạm trên mobile (WCAG 2.5.5) */
+  minTapTarget: 44
+};
+const typography = {
+  fontSans: '"Inter", system-ui, sans-serif',
+  fontMono: '"Geist Mono", ui-monospace, monospace'
+};
+export {
+  accent,
+  ash,
+  avatarPalette,
+  brandNeutral,
+  chart,
+  gold,
+  layout,
+  semantic,
+  status,
+  typography
+};
+//# sourceMappingURL=tokens.js.map