@comitor/ui 0.1.0 → 0.2.1

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

@@ -1 +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":[]}
+{"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 { getAvatarToneClasses } from \"../components/composite/letter-avatar.js\";\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 { 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\", getAvatarToneClasses(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          // `text-muted-foreground` chứ không `text-sidebar-foreground/55`: đây là CHỮ (11px) nên\n          // ngưỡng là AA 4,5:1, mà /55 trên `--sidebar` #FAFAF9 chỉ được 4,13:1 ✗ (dark 5,78:1 —\n          // mỗi theme hỏng một nửa). `--muted-foreground` là bậc chữ phụ đã đo cho đúng vai trò:\n          // 5,01:1 (light) · 5,35:1 (dark) trên `--sidebar` ✓.\n          <span className=\"truncate text-[11px] text-muted-foreground\">{currentWorkspace.plan}</span>\n        ) : null}\n      </span>\n      {/* Mũi tên MANG THÔNG TIN (nút này mở ra một panel chọn) nên chịu ngưỡng 3:1 của WCAG\n          1.4.11, mà `text-sidebar-foreground/45` chỉ được 3,02:1 trên `--sidebar` ở light và\n          tụt xuống 3,01:1 khi hover đổi nền sang `--sidebar-accent` — sát/dưới vạch, và ở\n          layout \"header-first\" nút này còn nằm trên nền `--background` khác nữa.\n          `--muted-foreground` là bậc đã đo và dư biên ở mọi nền nó có thể đứng: 5,01:1 trên\n          `--sidebar` · 4,78:1 trên `--sidebar-accent` · 5,23:1 trên `--background` (light);\n          5,35 / 4,86 / 5,70:1 (dark) ✓. (Dark của `/45` là 4,26 / 4,14:1 — chỉ light hỏng,\n          nhưng bậc mờ theo alpha luôn lệch nhau như vậy giữa hai theme.) */}\n      <ChevronsUpDown className=\"size-3.5 shrink-0 text-muted-foreground\" />\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                    // Focus dùng `--primary-ink`, KHÔNG `--ring` cũng không `--gold-300`. Cả hai\n                    // bậc kia ở light đều là gold #E8B824 — chỉ 1,73:1 trên nền trang, tức lúc\n                    // focus ô tìm MẤT ranh giới (`--ring` chỉ hợp cho vòng focus `ring-*`, thứ có\n                    // luật riêng, không phải cho viền control). `--primary-ink` giữ đúng sắc gold\n                    // mà đạt 6,09–6,51:1 (light) · 10,80–12,67:1 (dark) — hợp đồng màu §3.\n                    \"placeholder:text-muted-foreground focus:border-primary-ink 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        // Bậc ink chứ không `text-destructive`: dòng \"Đăng xuất\" là CHỮ trên nền `--popover`,\n        // mà `--destructive` (token NỀN) chỉ được 3,53:1 trên `--popover` ở dark ✗. Ink đạt cả\n        // hai: 7,15:1 (light) · 6,42:1 (dark). Icon ở `opacity-70` là thành phần phi-văn-bản\n        // (ngưỡng 3:1): 3,69:1 / 3,73:1 lúc nghỉ, và 3,37:1 / 3,62:1 trên nền hover\n        // `bg-destructive/10` — đó mới là tổ hợp chặt nhất, vẫn ✓. Chữ lúc hover: 6,18:1 / 5,94:1.\n        destructive ? \"text-destructive-ink 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

@@ -1,3 +1,6 @@
+import { AvatarToneColors } from './lib/avatar-tone.js';
+export { getAvatarToneIndex } from './lib/avatar-tone.js';
+
 /**
  * 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.
@@ -7,7 +10,18 @@
  *
  * 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.
+ *
+ * Hợp đồng ba vai trò của màu (giống hệt `styles.css`; bảng đầy đủ ở docs/hop-dong-mau.md),
+ * đọc tên là biết dùng ở đâu:
+ *   `x`            → tô NỀN (fill đặc hoặc tint /5–/20 — trần chung an toàn cho mọi tone)
+ *   `xForeground`  → chữ/icon NẰM TRÊN nền `x` ĐẶC — đo với `x`, ngưỡng 4,5:1
+ *   `xInk`         → chính màu đó khi ĐI LÊN nền trang hoặc lên tint của chính nó (chữ, icon
+ *                    rời, viền, vạch active) — đo với nền đó
+ *
+ * Cố ý KHÔNG mirror (xem docs/quyet-dinh-tich-hop.md §21): `--elevation-*` (chuỗi box-shadow chỉ
+ * có nghĩa trong CSS), `--app-accent*` (giá trị thuộc về APP, không phải gói), `--font-*`.
  */
+
 /** Thang GOLD 7 bậc — trục màu chính của brand Comitor. */
 declare const gold: {
     readonly 50: "#FBF5DC";
@@ -40,8 +54,12 @@ declare const ash: {
     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 đó.
+ * Màu phụ — vai trò TÔ NỀN (fill đặc hoặc tint). Bản `dark` được nâng sáng vì trên nền #0E1116
+ * bản `light` chìm nghỉm.
+ *
+ * ⚠ ĐỪNG dùng bảng này làm màu CHỮ ở light: nó được chọn để tô nền nên quá nhạt — dùng
+ * `accentInk` ngay dưới. `accent.dark.navy` giữ nguyên #0F1E3D chỉ để mirror đúng `styles.css`
+ * (khối `.dark` không override `--navy`); vai trò navy ở dark do `accentInk.dark.navy` gánh.
  */
 declare const accent: {
     readonly light: {
@@ -59,6 +77,65 @@ declare const accent: {
         readonly yellow: "#FACC15";
     };
 };
+/**
+ * Bậc INK của màu phụ — mirror `--teal-ink` / `--green-ink` / `--red-ink` / `--yellow-ink` /
+ * `--navy-ink`. Đây là màu phụ khi nó làm **CHỮ/ICON/VIỀN trên nền trang** (hoặc trên tint
+ * /5–/20 của chính nó), tức vai trò NGƯỢC với `accent`.
+ *
+ * Hợp đồng đặt tên của cả gói: `--x` tô nền · `--x-foreground` là chữ NẰM TRÊN nền `--x` ·
+ * `--x-ink` là chính màu đó ĐI LÊN nền trang.
+ *
+ * Bản `light` là bậc tối đã đóng băng (kết quả của `color-mix(in srgb, --<màu>, --ink 30/40%)`
+ * mà trước đây mỗi component tự tính lấy); bản `dark` chính là `accent.dark` vì bên đó màu phụ
+ * đã đủ sáng để làm chữ. Đo trên tint 15% của chính nó — nền thật mà chữ initials avatar và
+ * badge tonal đứng lên: teal 5,54 · green 5,60 · red 5,83:1 ở light (bản chưa có ink: 3,44 /
+ * 2,69 / 3,57:1 ✗); 7,12 / 7,44 / 5,18:1 ở dark.
+ */
+declare const accentInk: {
+    readonly light: {
+        readonly navy: "#0F1E3D";
+        readonly teal: "#1A6668";
+        readonly red: "#9A3537";
+        readonly green: "#216A48";
+        /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */
+        readonly yellow: "#7A5800";
+    };
+    readonly dark: {
+        /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
+        readonly navy: "#7EA2E8";
+        readonly teal: "#2DD4BF";
+        readonly red: "#F87171";
+        readonly green: "#4ADE80";
+        readonly yellow: "#FACC15";
+    };
+};
+/**
+ * Bậc FOREGROUND của màu phụ — mirror `--teal-foreground` / `--green-foreground` /
+ * `--yellow-foreground` / `--navy-foreground`. Đây là chữ/icon nằm **TRÊN nền `accent.*` ĐẶC**,
+ * tức vai trò thứ ba, khác hẳn `accentInk` (màu đó đi lên nền TRANG).
+ *
+ * Cả ba sắc teal/green/yellow đều sáng ở light và còn sáng hơn ở dark → chữ là MỰC ở cả hai
+ * theme, một giá trị đủ dùng: teal 4,56:1 (light) / 10,16:1 (dark) · green 6,04 / 10,85 ·
+ * yellow 11,92 / 12,35. Navy thì ngược lại — chữ TRẮNG, 16,49:1 ở cả hai theme.
+ *
+ * ⚠ CỐ Ý KHÔNG có `red`: nền `accent.light.red` #D64545 đặc không mang được chữ ở light — trắng
+ * 4,38:1 ✗ và mực 4,32:1 ✗. Nền đỏ đặc có chữ phải dùng `status.*.destructive` (#C93B3B) cùng
+ * `destructiveForeground` = 5,03:1 ✓. `accent.*.red` chỉ để tô TINT và làm màu chart.
+ */
+declare const accentForeground: {
+    readonly light: {
+        readonly navy: "#FFFFFF";
+        readonly teal: "#0E1116";
+        readonly green: "#0E1116";
+        readonly yellow: "#0E1116";
+    };
+    readonly dark: {
+        readonly navy: "#FFFFFF";
+        readonly teal: "#0E1116";
+        readonly green: "#0E1116";
+        readonly yellow: "#0E1116";
+    };
+};
 /** Semantic token của shadcn — mirror khối `:root` / `.dark` trong styles.css. */
 declare const semantic: {
     readonly light: {
@@ -70,17 +147,43 @@ declare const semantic: {
         readonly popoverForeground: "#0E1116";
         readonly primary: "#E8B824";
         readonly primaryForeground: "#0E1116";
+        /** Bậc INK của brand — gold khi phải ĐI LÊN nền trang (rãnh Switch khi BẬT, ô Checkbox đã
+         *  chọn). `primary` #E8B824 chỉ 1,86:1 với nền trắng ✗; bậc này = `gold[500]` = 6,51:1 ✓. */
+        readonly primaryInk: "#7A5800";
         readonly secondary: "#EDE8D8";
         readonly secondaryForeground: "#0E1116";
         readonly muted: "#F7F7F8";
-        readonly mutedForeground: "#7E8290";
+        /** Bậc chữ phụ — là CHỮ nên ngưỡng AA 4,5:1: 5,23:1 trên nền trắng, 4,89:1 trên `muted`.
+         *  KHÔNG còn bằng `ash[500]` (#7E8290 chỉ 3,83:1 ✗) — bậc bảng màu và token semantic tách nhau. */
+        readonly mutedForeground: "#686C7A";
         readonly accent: "#FBF5DC";
         readonly accentForeground: "#0E1116";
-        readonly destructive: "#D64545";
+        readonly destructive: "#C93B3B";
         readonly destructiveForeground: "#FFFFFF";
+        /** Chữ báo lỗi trên nền trang — KHÁC `destructive` (nền) và `destructiveForeground` (chữ
+         *  trắng trên nền đó). 7,15:1 trên nền trắng. */
+        readonly destructiveInk: "#9A3537";
+        /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương
+         *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */
         readonly border: "#EDEEF1";
-        readonly input: "#EDEEF1";
+        /** = `controlEdge`: viền ô nhập là ranh giới nhận dạng control (1.4.11) → 3,83:1 ✓. */
+        readonly input: "#7E8290";
         readonly ring: "#E8B824";
+        /** Ranh giới của control lúc NGHỈ (viền Input, ô Checkbox chưa chọn, rãnh Switch khi TẮT) —
+         *  WCAG 1.4.11, ràng buộc HAI PHÍA. Một giá trị cho cả hai theme: 3,83:1 với nền trắng và
+         *  3,83:1 với `controlKnob` (trắng ở light); 4,94:1 với nền dark và với knob #0E1116. */
+        readonly controlEdge: "#7E8290";
+        /** Cùng vai trò nhưng ở HOVER/ACTIVE — phải ĐẬM hơn lúc nghỉ. = `ash[700]`, 10,55:1 trên nền
+         *  trắng · 9,86:1 trên `muted`. */
+        readonly controlEdgeStrong: "#3A3F4A";
+        /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio) = `primaryInk`.
+         *  Ràng buộc hai phía: 6,51:1 với nền trang VÀ 6,51:1 với `controlKnob` ở light. `primary`
+         *  #E8B824 chỉ 1,86:1 cả hai phía ✗. */
+        readonly controlOn: "#7A5800";
+        /** Núm Switch / dấu check / chấm Radio — mang màu NỀN TRANG nên luôn tương phản đúng chiều
+         *  với cả rãnh BẬT (6,51:1) lẫn rãnh TẮT (3,83:1). KHÔNG dùng `primaryForeground` (mực): mực
+         *  trên `controlOn` #7A5800 chỉ 1,86:1 ✗. */
+        readonly controlKnob: "#FFFFFF";
         readonly sidebar: "#FAFAF9";
         readonly sidebarForeground: "#0E1116";
         readonly sidebarBorder: "#EDEEF1";
@@ -96,17 +199,33 @@ declare const semantic: {
         readonly popoverForeground: "#F7F7F8";
         readonly primary: "#F5D060";
         readonly primaryForeground: "#0E1116";
+        /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */
+        readonly primaryInk: "#F5D060";
         readonly secondary: "#1E2128";
         readonly secondaryForeground: "#F7F7F8";
         readonly muted: "#1E2128";
-        readonly mutedForeground: "#7E8290";
+        /** Sáng hơn bản light: chữ phụ ở dark hay nằm trên `card`/`muted`. 5,35:1 trên `card`,
+         *  4,86:1 trên `muted` (giá trị cũ #7E8290 chỉ 4,21:1 trên `muted` ✗). */
+        readonly mutedForeground: "#888D9B";
         readonly accent: "#1E2128";
         readonly accentForeground: "#F7F7F8";
-        readonly destructive: "#D64545";
+        readonly destructive: "#C93B3B";
         readonly destructiveForeground: "#FFFFFF";
+        /** 6,42:1 trên `card` — `destructive` dùng làm chữ ở dark chỉ được 3,53:1 ✗. */
+        readonly destructiveInk: "#F87171";
+        /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */
         readonly border: "#1E2128";
-        readonly input: "#1E2128";
+        /** = `controlEdge`, ghim một giá trị cho cả hai theme — 4,94:1 trên `background` ✓. */
+        readonly input: "#7E8290";
         readonly ring: "#F5D060";
+        /** Ghim đúng giá trị của light — xem chú thích ở nhánh light. */
+        readonly controlEdge: "#7E8290";
+        /** = `ash[300]` (lật chiều so với light): 11,65:1 trên `background` · 10,94:1 trên `card`. */
+        readonly controlEdgeStrong: "#C8CBD3";
+        /** = `primaryInk` của dark; 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116). */
+        readonly controlOn: "#F5D060";
+        /** = `background` của dark. Núm trắng cứng sẽ chỉ được 1,49:1 với rãnh BẬT ✗. */
+        readonly controlKnob: "#0E1116";
         readonly sidebar: "#16181D";
         readonly sidebarForeground: "#F7F7F8";
         readonly sidebarBorder: "#1E2128";
@@ -114,17 +233,36 @@ declare const semantic: {
         readonly sidebarAccentForeground: "#F7F7F8";
     };
 };
-/** Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ. */
+/**
+ * Alias trạng thái — success/warning/info trỏ vào màu phụ, destructive giữ nguyên 2 chế độ.
+ *
+ * Ba lớp KHÁC nhau, đừng gộp:
+ *   • `destructive` (#C93B3B) — màu NỀN (nút xoá), đủ đậm cho chữ trắng ở cả hai theme (5,03:1);
+ *   • `destructiveForeground` (#FFFFFF) — chữ NẰM TRÊN nền đó;
+ *   • `destructiveInk` — màu CHỮ đỏ trên nền trang (dòng lỗi). Dùng nhầm `destructive` cho vai
+ *     trò này thì ở dark chỉ được 3,53:1, dùng `accent.light.red` thì ở light chỉ 4,38:1.
+ *
+ * `successForeground` / `warningForeground` / `infoForeground` là MỰC ở CẢ hai theme (không phải
+ * trắng ở light rồi lật ở dark như bản 0.1.0): ba nền trạng thái đều là sắc sáng.
+ *     success mực 6,04:1 (light) · 10,85:1 (dark)   [trắng chỉ 3,13 / 1,74:1 ✗]
+ *     info    mực 4,56:1 (light) · 10,16:1 (dark)   [trắng chỉ 4,14 / 1,86:1 ✗]
+ *     warning mực 11,92:1 (light) · 12,35:1 (dark)  [trắng chỉ 1,59 / 1,53:1 ✗]
+ * ⚠ `info` ở light là cặp chặt nhất gói (4,56:1, dư 0,06) — đổi `accent.light.teal` là phải đo lại.
+ */
 declare const status: {
     readonly light: {
         readonly success: "#2EA56A";
-        readonly successForeground: "#FFFFFF";
+        readonly successForeground: "#0E1116";
         readonly warning: "#F2C94C";
         readonly warningForeground: "#0E1116";
         readonly info: "#1F8A8B";
-        readonly infoForeground: "#FFFFFF";
-        readonly destructive: "#D64545";
+        readonly infoForeground: "#0E1116";
+        readonly destructive: "#C93B3B";
         readonly destructiveForeground: "#FFFFFF";
+        readonly successInk: "#216A48";
+        readonly warningInk: "#7A5800";
+        readonly infoInk: "#1A6668";
+        readonly destructiveInk: "#9A3537";
     };
     readonly dark: {
         readonly success: "#4ADE80";
@@ -133,8 +271,12 @@ declare const status: {
         readonly warningForeground: "#0E1116";
         readonly info: "#2DD4BF";
         readonly infoForeground: "#0E1116";
-        readonly destructive: "#D64545";
+        readonly destructive: "#C93B3B";
         readonly destructiveForeground: "#FFFFFF";
+        readonly successInk: "#4ADE80";
+        readonly warningInk: "#FACC15";
+        readonly infoInk: "#2DD4BF";
+        readonly destructiveInk: "#F87171";
     };
 };
 /** Bảng màu biểu đồ (chart-1…chart-5). Thứ tự = thứ tự series mặc định. */
@@ -142,8 +284,15 @@ 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"];
+/**
+ * Cặp nền/chữ (hex) của avatar cho một tên, theo theme.
+ *
+ * Tên hàm nói đúng thứ nó trả về: `...Colors` = hex (canvas/email/PDF), còn bản trả về chuỗi
+ * class Tailwind cho DOM là `getAvatarToneClasses` ở `@comitor/ui`. Cùng một tên người luôn ra
+ * cùng một tone ở cả hai đường vì chỉ số do MỘT hàm tính (`getAvatarToneIndex`).
+ */
+declare function getAvatarToneColors(name: string, mode?: ThemeMode): AvatarToneColors;
+
 /** Số đo khung ứng dụng — mirror --sidebar-width / --sidebar-width-icon / --header-height. */
 declare const layout: {
     /** px — --header-height 3.5rem */
@@ -159,7 +308,6 @@ declare const layout: {
         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;
 };
@@ -170,4 +318,4 @@ declare const typography: {
 };
 type ThemeMode = "light" | "dark";
 
-export { type ThemeMode, accent, ash, avatarPalette, brandNeutral, chart, gold, layout, semantic, status, typography };
+export { AvatarToneColors, type ThemeMode, accent, accentForeground, accentInk, ash, brandNeutral, chart, getAvatarToneColors, gold, layout, semantic, status, typography };

package/dist/tokens.js

@@ -1,3 +1,4 @@
+import { AVATAR_TONES, getAvatarToneIndex } from "./lib/avatar-tone.js";
 const gold = {
   50: "#FBF5DC",
   100: "#F8E89D",
@@ -38,6 +39,38 @@ const accent = {
     yellow: "#FACC15"
   }
 };
+const accentInk = {
+  light: {
+    navy: accent.light.navy,
+    teal: "#1A6668",
+    red: "#9A3537",
+    green: "#216A48",
+    /** = gold[500]: vàng không có bậc tối riêng, mượn thang gold cùng sắc. */
+    yellow: gold[500]
+  },
+  dark: {
+    /** navy nguyên bản chìm vào nền dark (1,15:1) → bậc sáng riêng; cũng là `--chart-3` ở dark. */
+    navy: "#7EA2E8",
+    teal: accent.dark.teal,
+    red: accent.dark.red,
+    green: accent.dark.green,
+    yellow: accent.dark.yellow
+  }
+};
+const accentForeground = {
+  light: {
+    navy: "#FFFFFF",
+    teal: "#0E1116",
+    green: "#0E1116",
+    yellow: "#0E1116"
+  },
+  dark: {
+    navy: "#FFFFFF",
+    teal: "#0E1116",
+    green: "#0E1116",
+    yellow: "#0E1116"
+  }
+};
 const semantic = {
   light: {
     background: "#FFFFFF",
@@ -48,17 +81,43 @@ const semantic = {
     popoverForeground: "#0E1116",
     primary: "#E8B824",
     primaryForeground: "#0E1116",
+    /** Bậc INK của brand — gold khi phải ĐI LÊN nền trang (rãnh Switch khi BẬT, ô Checkbox đã
+     *  chọn). `primary` #E8B824 chỉ 1,86:1 với nền trắng ✗; bậc này = `gold[500]` = 6,51:1 ✓. */
+    primaryInk: gold[500],
     secondary: "#EDE8D8",
     secondaryForeground: "#0E1116",
     muted: "#F7F7F8",
-    mutedForeground: "#7E8290",
+    /** Bậc chữ phụ — là CHỮ nên ngưỡng AA 4,5:1: 5,23:1 trên nền trắng, 4,89:1 trên `muted`.
+     *  KHÔNG còn bằng `ash[500]` (#7E8290 chỉ 3,83:1 ✗) — bậc bảng màu và token semantic tách nhau. */
+    mutedForeground: "#686C7A",
     accent: "#FBF5DC",
     accentForeground: "#0E1116",
-    destructive: "#D64545",
+    destructive: "#C93B3B",
     destructiveForeground: "#FFFFFF",
+    /** Chữ báo lỗi trên nền trang — KHÁC `destructive` (nền) và `destructiveForeground` (chữ
+     *  trắng trên nền đó). 7,15:1 trên nền trắng. */
+    destructiveInk: accentInk.light.red,
+    /** RANH GIỚI TRANG TRÍ (vạch chia, viền thẻ nghỉ) — 1,16:1, cố ý: 1.4.11 không đòi tương
+     *  phản cho thứ không mang thông tin. Ranh giới của CONTROL đi qua `controlEdge`. */
     border: "#EDEEF1",
-    input: "#EDEEF1",
+    /** = `controlEdge`: viền ô nhập là ranh giới nhận dạng control (1.4.11) → 3,83:1 ✓. */
+    input: "#7E8290",
     ring: "#E8B824",
+    /** Ranh giới của control lúc NGHỈ (viền Input, ô Checkbox chưa chọn, rãnh Switch khi TẮT) —
+     *  WCAG 1.4.11, ràng buộc HAI PHÍA. Một giá trị cho cả hai theme: 3,83:1 với nền trắng và
+     *  3,83:1 với `controlKnob` (trắng ở light); 4,94:1 với nền dark và với knob #0E1116. */
+    controlEdge: "#7E8290",
+    /** Cùng vai trò nhưng ở HOVER/ACTIVE — phải ĐẬM hơn lúc nghỉ. = `ash[700]`, 10,55:1 trên nền
+     *  trắng · 9,86:1 trên `muted`. */
+    controlEdgeStrong: ash[700],
+    /** Nền control khi BẬT/ĐÃ CHỌN (rãnh Switch bật, ô Checkbox đã chọn, chấm Radio) = `primaryInk`.
+     *  Ràng buộc hai phía: 6,51:1 với nền trang VÀ 6,51:1 với `controlKnob` ở light. `primary`
+     *  #E8B824 chỉ 1,86:1 cả hai phía ✗. */
+    controlOn: gold[500],
+    /** Núm Switch / dấu check / chấm Radio — mang màu NỀN TRANG nên luôn tương phản đúng chiều
+     *  với cả rãnh BẬT (6,51:1) lẫn rãnh TẮT (3,83:1). KHÔNG dùng `primaryForeground` (mực): mực
+     *  trên `controlOn` #7A5800 chỉ 1,86:1 ✗. */
+    controlKnob: "#FFFFFF",
     sidebar: "#FAFAF9",
     sidebarForeground: "#0E1116",
     sidebarBorder: "#EDEEF1",
@@ -74,17 +133,33 @@ const semantic = {
     popoverForeground: "#F7F7F8",
     primary: "#F5D060",
     primaryForeground: "#0E1116",
+    /** Ở dark `primary` vốn đã là bậc sáng (12,67:1 trên nền `background`) nên ink = chính nó. */
+    primaryInk: "#F5D060",
     secondary: "#1E2128",
     secondaryForeground: "#F7F7F8",
     muted: "#1E2128",
-    mutedForeground: "#7E8290",
+    /** Sáng hơn bản light: chữ phụ ở dark hay nằm trên `card`/`muted`. 5,35:1 trên `card`,
+     *  4,86:1 trên `muted` (giá trị cũ #7E8290 chỉ 4,21:1 trên `muted` ✗). */
+    mutedForeground: "#888D9B",
     accent: "#1E2128",
     accentForeground: "#F7F7F8",
-    destructive: "#D64545",
+    destructive: "#C93B3B",
     destructiveForeground: "#FFFFFF",
+    /** 6,42:1 trên `card` — `destructive` dùng làm chữ ở dark chỉ được 3,53:1 ✗. */
+    destructiveInk: accentInk.dark.red,
+    /** TRANG TRÍ, 1,17:1 trên `background` và 1,10:1 trên `card` — cố ý, xem nhánh light. */
     border: "#1E2128",
-    input: "#1E2128",
+    /** = `controlEdge`, ghim một giá trị cho cả hai theme — 4,94:1 trên `background` ✓. */
+    input: "#7E8290",
     ring: "#F5D060",
+    /** Ghim đúng giá trị của light — xem chú thích ở nhánh light. */
+    controlEdge: "#7E8290",
+    /** = `ash[300]` (lật chiều so với light): 11,65:1 trên `background` · 10,94:1 trên `card`. */
+    controlEdgeStrong: ash[300],
+    /** = `primaryInk` của dark; 12,67:1 với nền trang VÀ với `controlKnob` (#0E1116). */
+    controlOn: "#F5D060",
+    /** = `background` của dark. Núm trắng cứng sẽ chỉ được 1,49:1 với rãnh BẬT ✗. */
+    controlKnob: "#0E1116",
     sidebar: "#16181D",
     sidebarForeground: "#F7F7F8",
     sidebarBorder: "#1E2128",
@@ -95,13 +170,17 @@ const semantic = {
 const status = {
   light: {
     success: accent.light.green,
-    successForeground: "#FFFFFF",
+    successForeground: "#0E1116",
     warning: accent.light.yellow,
     warningForeground: "#0E1116",
     info: accent.light.teal,
-    infoForeground: "#FFFFFF",
-    destructive: "#D64545",
-    destructiveForeground: "#FFFFFF"
+    infoForeground: "#0E1116",
+    destructive: "#C93B3B",
+    destructiveForeground: "#FFFFFF",
+    successInk: accentInk.light.green,
+    warningInk: accentInk.light.yellow,
+    infoInk: accentInk.light.teal,
+    destructiveInk: accentInk.light.red
   },
   dark: {
     success: accent.dark.green,
@@ -110,24 +189,40 @@ const status = {
     warningForeground: "#0E1116",
     info: accent.dark.teal,
     infoForeground: "#0E1116",
-    destructive: "#D64545",
-    destructiveForeground: "#FFFFFF"
+    destructive: "#C93B3B",
+    destructiveForeground: "#FFFFFF",
+    successInk: accentInk.dark.green,
+    warningInk: accentInk.dark.yellow,
+    infoInk: accentInk.dark.teal,
+    destructiveInk: accentInk.dark.red
   }
 };
 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]
+  dark: [gold[200], accent.dark.teal, accentInk.dark.navy, accent.dark.green, accent.dark.red]
+};
+const avatarTonePalette = {
+  light: {
+    gold,
+    ash,
+    brandNeutral,
+    accent: accent.light,
+    accentInk: accentInk.light,
+    card: semantic.light.card
+  },
+  dark: {
+    gold,
+    ash,
+    brandNeutral,
+    accent: accent.dark,
+    accentInk: accentInk.dark,
+    card: semantic.dark.card
+  }
 };
-const avatarPalette = [
-  gold[400],
-  gold[600],
-  accent.light.teal,
-  accent.light.navy,
-  accent.light.green,
-  accent.light.red,
-  ash[500],
-  brandNeutral.inkSoft
-];
+function getAvatarToneColors(name, mode = "light") {
+  const tone = AVATAR_TONES[getAvatarToneIndex(name)] ?? AVATAR_TONES[0];
+  return tone[mode](avatarTonePalette[mode]);
+}
 const layout = {
   /** px — --header-height 3.5rem */
   headerHeight: 56,
@@ -138,7 +233,6 @@ const layout = {
   /** 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
 };
@@ -148,10 +242,13 @@ const typography = {
 };
 export {
   accent,
+  accentForeground,
+  accentInk,
   ash,
-  avatarPalette,
   brandNeutral,
   chart,
+  getAvatarToneColors,
+  getAvatarToneIndex,
   gold,
   layout,
   semantic,