Merge remote-tracking branch 'upstream/develop' into develop

2025-08-05 00:03:51 +09:00 · 2023-01-16 00:59:56 +09:00
parent 6714f38171 7795ff0c95
commit a39afe9805
122 changed files with 1643 additions and 1220 deletions
--- a/.config/docker_example.yml
+++ b/.config/docker_example.yml
@ -0,0 +1,151 @@
+#━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+# Misskey configuration
+#━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+#   ┌─────┐
+#───┘ URL └─────────────────────────────────────────────────────
+
+# Final accessible URL seen by a user.
+url: https://example.tld/
+
+# ONCE YOU HAVE STARTED THE INSTANCE, DO NOT CHANGE THE
+# URL SETTINGS AFTER THAT!
+
+#   ┌───────────────────────┐
+#───┘ Port and TLS settings └───────────────────────────────────
+
+#
+# Misskey requires a reverse proxy to support HTTPS connections.
+#
+#                 +----- https://example.tld/ ------------+
+#   +------+      |+-------------+      +----------------+|
+#   | User | ---> || Proxy (443) | ---> | Misskey (3000) ||
+#   +------+      |+-------------+      +----------------+|
+#                 +---------------------------------------+
+#
+#   You need to set up a reverse proxy. (e.g. nginx)
+#   An encrypted connection with HTTPS is highly recommended
+#   because tokens may be transferred in GET requests.
+
+# The port that your Misskey server should listen on.
+port: 3000
+
+#   ┌──────────────────────────┐
+#───┘ PostgreSQL configuration └────────────────────────────────
+
+db:
+  host: db
+  port: 5432
+
+  # Database name
+  db: misskey
+
+  # Auth
+  user: example-misskey-user
+  pass: example-misskey-pass
+
+  # Whether disable Caching queries
+  #disableCache: true
+
+  # Extra Connection options
+  #extra:
+  #  ssl: true
+
+#   ┌─────────────────────┐
+#───┘ Redis configuration └─────────────────────────────────────
+
+redis:
+  host: redis
+  port: 6379
+  #family: 0  # 0=Both, 4=IPv4, 6=IPv6
+  #pass: example-pass
+  #prefix: example-prefix
+  #db: 1
+
+#   ┌─────────────────────────────┐
+#───┘ Elasticsearch configuration └─────────────────────────────
+
+#elasticsearch:
+#  host: localhost
+#  port: 9200
+#  ssl: false
+#  user:
+#  pass:
+
+#   ┌───────────────┐
+#───┘ ID generation └───────────────────────────────────────────
+
+# You can select the ID generation method.
+# You don't usually need to change this setting, but you can
+# change it according to your preferences.
+
+# Available methods:
+# aid ... Short, Millisecond accuracy
+# meid ... Similar to ObjectID, Millisecond accuracy
+# ulid ... Millisecond accuracy
+# objectid ... This is left for backward compatibility
+
+# ONCE YOU HAVE STARTED THE INSTANCE, DO NOT CHANGE THE
+# ID SETTINGS AFTER THAT!
+
+id: 'aid'
+
+#   ┌─────────────────────┐
+#───┘ Other configuration └─────────────────────────────────────
+
+# Whether disable HSTS
+#disableHsts: true
+
+# Number of worker processes
+#clusterLimit: 1
+
+# Job concurrency per worker
+# deliverJobConcurrency: 128
+# inboxJobConcurrency: 16
+
+# Job rate limiter
+# deliverJobPerSec: 128
+# inboxJobPerSec: 16
+
+# Job attempts
+# deliverJobMaxAttempts: 12
+# inboxJobMaxAttempts: 8
+
+# IP address family used for outgoing request (ipv4, ipv6 or dual)
+#outgoingAddressFamily: ipv4
+
+# Syslog option
+#syslog:
+#  host: localhost
+#  port: 514
+
+# Proxy for HTTP/HTTPS
+#proxy: http://127.0.0.1:3128
+
+proxyBypassHosts:
+  - api.deepl.com
+  - api-free.deepl.com
+  - www.recaptcha.net
+  - hcaptcha.com
+  - challenges.cloudflare.com
+
+# Proxy for SMTP/SMTPS
+#proxySmtp: http://127.0.0.1:3128   # use HTTP/1.1 CONNECT
+#proxySmtp: socks4://127.0.0.1:1080 # use SOCKS4
+#proxySmtp: socks5://127.0.0.1:1080 # use SOCKS5
+
+# Media Proxy
+#mediaProxy: https://example.com/proxy
+
+# Proxy remote files (default: false)
+#proxyRemoteFiles: true
+
+# Sign to ActivityPub GET request (default: true)
+signToActivityPubGet: true
+
+#allowedPrivateNetworks: [
+#  '127.0.0.1/32'
+#]
+
+# Upload or download file size limits (bytes)
+#maxFileSize: 262144000
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -5,6 +5,11 @@

 version: 2
 updates:
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 0
 - package-ecosystem: npm
  directory: "/"
  schedule:
@ -20,3 +25,8 @@ updates:
  schedule:
    interval: daily
  open-pull-requests-limit: 0
+- package-ecosystem: npm
+  directory: "/packages/sw"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 0
--- a/.github/workflows/docker-develop.yml
+++ b/.github/workflows/docker-develop.yml
@ -10,10 +10,10 @@ jobs:
  push_to_registry:
    name: Push Docker image to Docker Hub
    runs-on: ubuntu-latest
-
+    if: github.repository == 'misskey-dev/misskey'
    steps:
      - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3.3.0
      - name: Docker meta
        id: meta
        uses: docker/metadata-action@v3
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@ -12,7 +12,7 @@ jobs:

    steps:
      - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3.3.0
      - name: Docker meta
        id: meta
        uses: docker/metadata-action@v3
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -11,11 +11,11 @@ jobs:
  yarn_install:
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3.3.0
      with:
        fetch-depth: 0
        submodules: true
-    - uses: actions/setup-node@v3.2.0
+    - uses: actions/setup-node@v3.6.0
      with:
        node-version: 18.x
        cache: 'yarn'
@ -33,11 +33,11 @@ jobs:
        - frontend
        - sw
    steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3.3.0
      with:
        fetch-depth: 0
        submodules: true
-    - uses: actions/setup-node@v3.2.0
+    - uses: actions/setup-node@v3.6.0
      with:
        node-version: 18.x
        cache: 'yarn'
--- a/.github/workflows/pr-preview-deploy.yml
+++ b/.github/workflows/pr-preview-deploy.yml
@ -13,7 +13,7 @@ jobs:
      github.event.client_payload.slash_command.sha != '' &&
      contains(github.event.client_payload.pull_request.head.sha, github.event.client_payload.slash_command.sha)
    steps:
-    - uses: actions/github-script@v5
+    - uses: actions/github-script@v6.3.3
      id: check-id
      env:
        number: ${{ github.event.client_payload.pull_request.number }}
@ -37,7 +37,7 @@ jobs:

          return check[0].id;

-    - uses: actions/github-script@v5
+    - uses: actions/github-script@v6.3.3
      env:
        check_id: ${{ steps.check-id.outputs.result }}
        details_url: ${{ github.server_url }}/${{ github.repository }}/runs/${{ github.run_id }}
@ -53,7 +53,7 @@ jobs:

    # Check out merge commit
    - name: Fork based /deploy checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3.3.0
      with:
        ref: 'refs/pull/${{ github.event.client_payload.pull_request.number }}/merge'

@ -72,7 +72,7 @@ jobs:
        timeout: 15m

    # Update check run called "integration-fork"
-    - uses: actions/github-script@v5
+    - uses: actions/github-script@v6.3.3
      id: update-check-run
      if: ${{ always() }}
      env:
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -30,11 +30,11 @@ jobs:
          - 56312:6379

    steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3.3.0
      with:
        submodules: true
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.2.0
+      uses: actions/setup-node@v3.6.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'yarn'
@ -77,7 +77,7 @@ jobs:
          - 56312:6379

    steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3.3.0
      with:
        submodules: true
    # https://github.com/cypress-io/cypress-docker-images/issues/150
@ -87,7 +87,7 @@ jobs:
    #- uses: browser-actions/setup-firefox@latest
    #  if: ${{ matrix.browser == 'firefox' }}
    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3.2.0
+      uses: actions/setup-node@v3.6.0
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'yarn'
--- a/.gitignore
+++ b/.gitignore
@ -30,6 +30,7 @@ coverage
 # config
 /.config/*
 !/.config/example.yml
+!/.config/docker_example.yml
 !/.config/docker_example.env

 # misskey
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -74,6 +74,7 @@ You should also include the user name that made the change.
 - Push notification of Antenna note @tamaina
 - AVIF support @tamaina
 - Add Cloudflare Turnstile CAPTCHA support @CyberRex0
+- レートリミットをユーザーごとに調整可能に @syuilo
 - 非モデレーターでも、権限を持つロールをアサインされたユーザーはインスタンスの招待コードを発行できるように @syuilo
 - 非モデレーターでも、権限を持つロールをアサインされたユーザーはカスタム絵文字の追加、編集、削除を行えるように @syuilo
 - クリップおよびクリップ内のノートの作成可能数を設定可能に @syuilo
@ -99,6 +100,7 @@ You should also include the user name that made the change.
 - Client: Add link to user RSS feed in profile menu @ssmucny
 - Client: Compress non-animated PNG files @saschanaz
 - Client: YouTube window player @sim1222
+- Client: show readable error when rate limit exceeded @syuilo
 - Client: enhance dashboard of control panel @syuilo
 - Client: Vite is upgraded to v4 @syuilo, @tamaina
 - Client: HMR is available while yarn dev @tamaina
@ -125,6 +127,7 @@ You should also include the user name that made the change.
 - Client: clicker game @syuilo

 ### Bugfixes
+- Server: Fix @tensorflow/tfjs-core's MODULE_NOT_FOUND error @ikuradon
 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468
 - Server: Bug fix for Pinned Users lookup on instance @squidicuzz
 - Server: Fix peers API returning suspended instances @ineffyble
--- a/2
+++ b/2
@ -1,5 +1,5 @@
 Unless otherwise stated this repository is
-Copyright © 2014-2022 syuilo and contributers
+Copyright © 2014-2023 syuilo and contributers

 And is distributed under The GNU Affero General Public License Version 3, you should have received a copy of the license file as LICENSE.

--- a/cypress/e2e/widgets.cy.js
+++ b/cypress/e2e/widgets.cy.js
@ -37,9 +37,9 @@ describe('After user signed in', () => {
 		it(`${widgetName} widget should get added`, () => {
 			cy.get('.mk-widget-edit').click();
 			cy.get('.mk-widget-select select').select(widgetName, { force: true });
-			cy.get('.bg._modalBg.transparent').click({ multiple: true, force: true });
+			cy.get('.data-cy-bg._modalBg.data-cy-transparent').click({ multiple: true, force: true });
 			cy.get('.mk-widget-add').click({ force: true });
-			cy.get(`.mkw-${widgetName}`).should('exist');
+			cy.get(`.data-cy-mkw-${widgetName}`).should('exist');
 		});
 	}

--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -8,6 +8,11 @@ services:
      - db
      - redis
 #      - es
+    depends_on:
+      db:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
    ports:
      - "3000:3000"
    networks:
@ -24,6 +29,10 @@ services:
      - internal_network
    volumes:
      - ./redis:/data
+    healthcheck:
+      test: "redis-cli ping"
+      interval: 5s
+      retries: 20

  db:
    restart: always
@ -34,6 +43,10 @@ services:
      - .config/docker.env
    volumes:
      - ./db:/var/lib/postgresql/data
+    healthcheck:
+      test: "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"
+      interval: 5s
+      retries: 20

 #  es:
 #    restart: always
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -935,6 +935,8 @@ unassign: "アサインを解除"
 color: "色"
 manageCustomEmojis: "カスタム絵文字の管理"
 youCannotCreateAnymore: "これ以上作成することはできません。"
+cannotPerformTemporary: "一時的に利用できません"
+cannotPerformTemporaryDescription: "操作回数が制限を超過するため一時的に利用できません。しばらく時間を置いてから再度お試しください。"

 _role:
  new: "ロールの作成"
@ -952,11 +954,17 @@ _role:
  isPublic: "ロールを公開"
  descriptionOfIsPublic: "ロールにアサインされたユーザーを誰でも見ることができます。また、ユーザーのプロフィールでこのロールが表示されます。"
  options: "オプション"
+  policies: "ポリシー"
  baseRole: "ベースロール"
  useBaseValue: "ベースロールの値を使用"
  chooseRoleToAssign: "アサインするロールを選択"
  canEditMembersByModerator: "モデレーターのメンバー編集を許可"
  descriptionOfCanEditMembersByModerator: "オンにすると、管理者に加えてモデレーターもこのロールへユーザーをアサイン/アサイン解除できるようになります。オフにすると管理者のみが行えます。"
+  priority: "優先度"
+  _priority:
+    low: "低"
+    middle: "中"
+    high: "高"
  _options:
    gtlAvailable: "グローバルタイムラインの閲覧"
    ltlAvailable: "ローカルタイムラインの閲覧"
@ -972,6 +980,8 @@ _role:
    noteEachClipsMax: "クリップ内のノートの最大数"
    userListMax: "ユーザーリストの作成可能数"
    userEachUserListsMax: "ユーザーリスト内のユーザーの最大数"
+    rateLimitFactor: "レートリミット"
+    descriptionOfRateLimitFactor: "小さいほど制限が緩和され、大きいほど制限が強化されます。"
  _condition:
    isLocal: "ローカルユーザー"
    isRemote: "リモートユーザー"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -907,7 +907,7 @@ subscribePushNotification: "푸시 알림 켜기"
 unsubscribePushNotification: "푸시 알림 끄기"
 pushNotificationAlreadySubscribed: "푸시 알림이 이미 켜져 있습니다"
 pushNotificationNotSupported: "브라우저나 인스턴스에서 푸시 알림이 지원되지 않습니다"
-sendPushNotificationReadMessage: "푸시 알림이니 메시지를 읽으면 푸시 알림을 삭제합니다"
+sendPushNotificationReadMessage: "푸시 알림이나 메시지를 읽은 뒤 푸시 알림을 삭제"
 sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」이라는 알림이 잠깐 표시됩니다. 기기의 전력 소비량이 증가할 수 있습니다."
 windowMaximize: "최대화"
 windowRestore: "복구"
@ -926,15 +926,26 @@ didYouLikeMisskey: "Misskey가 마음에 드시나요?"
 pleaseDonate: "{host}은(는) 무료 소프트웨어 Misskey를 사용합니다. 후원을 통해 저희의 개발이 이어질 수 있게 도와주세요!"
 roles: "역할"
 role: "역할"
+normalUser: "일반 사용자"
 undefined: "정의되지 않음"
 assign: "할당"
 unassign: "할당 취소"
 color: "색"
+manageCustomEmojis: "커스텀 이모지 관리"
+youCannotCreateAnymore: "더 이상 생성할 수 없습니다."
 _role:
  new: "새 역할 생성"
  edit: "역할 수정"
  name: "역할 이름"
  description: "역할 설명"
+  permission: "역할의 권한"
+  descriptionOfPermission: "<b>모더레이터</b>는 기본적인 중재와 관련된 작업을 수행할 수 있습니다.\n<b>관리자</b>는 인스턴스의 모든 설정을 변경할 수 있습니다."
+  assignTarget: "할당 대상"
+  descriptionOfAssignTarget: "<b>수동</b>을 선택하면 누가 이 역할에 포함되는지를 수동으로 관리할 수 있습니다.\n<b>조건부</b>를 선택하면 조건을 설정해 일치하는 사용자를 자동으로 포함되게 할 수 있습니다."
+  manual: "수동"
+  conditional: "조건부"
+  condition: "조건"
+  isConditionalRole: "조건부 역할입니다."
  isPublic: "공개 역할"
  descriptionOfIsPublic: "역할에 할당된 사용자를 누구나 볼 수 있습니다. 또한 사용자 프로필에 이 역할이 표시됩니다."
  options: "옵션"
@ -947,8 +958,29 @@ _role:
    gtlAvailable: "글로벌 타임라인 보이기"
    ltlAvailable: "로컬 타임라인 보이기"
    canPublicNote: "공개 노트 허용"
+    canInvite: "인스턴스 초대 코드 발행"
+    canManageCustomEmojis: "커스텀 이모지 관리"
    driveCapacity: "드라이브 용량"
+    pinMax: "고정할 수 있는 노트 수"
    antennaMax: "최대 안테나 생성 허용 수"
+    wordMuteMax: "뮤트할 수 있는 단어의 수"
+    webhookMax: "생성할 수 있는 WebHook의 수"
+    clipMax: "생성할 수 있는 클립 수"
+    noteEachClipsMax: "각 클립에 추가할 수 있는 노트 수"
+    userListMax: "생성할 수 있는 리스트 수"
+    userEachUserListsMax: "리스트당 최대 사용자 수"
+  _condition:
+    isLocal: "로컬 사용자"
+    isRemote: "리모트 사용자"
+    createdLessThan: "다음 일수 이내에 가입한 유저"
+    createdMoreThan: "다음 일수 이상 활동한 유저"
+    followersLessThanOrEq: "팔로워 수가 다음 이하인 유저"
+    followersMoreThanOrEq: "팔로워 수가 다음 이상인 유저"
+    followingLessThanOrEq: "팔로잉 수가 다음 이하인 유저"
+    followingMoreThanOrEq: "팔로잉 수가 다음 이상인 유저"
+    and: "다음을 모두 만족"
+    or: "다음을 하나라도 만족"
+    not: "다음을 만족하지 않음"
 _sensitiveMediaDetection:
  description: "기계학습을 통해 자동으로 민감한 미디어를 탐지하여, 모더레이션에 참고할 수 있도록 합니다. 서버의 부하를 약간 증가시킵니다."
  sensitivity: "탐지 민감도"
@ -1352,7 +1384,7 @@ _widgets:
  aiscript: "AiScript 콘솔"
  aiscriptApp: "AiScript 앱"
  aichan: "아이"
-  userList: "사용자 목록"
+  userList: "유저 리스트"
  _userList:
    chooseList: "리스트 선택"
  clicker: "클리커"
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@ -960,6 +960,7 @@ _role:
    canInvite: "發行實例邀請碼"
    canManageCustomEmojis: "管理自訂表情符號"
    driveCapacity: "雲端硬碟容量"
+    pinMax: "置頂貼文的最大數量"
    antennaMax: "可建立的天線數量"
    webhookMax: "可建立的Webhook數量"
    clipMax: "可建立的摘錄數量"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.0.0-rc.5-simkey",
+	"version": "13.0.0-rc.9-simkey",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@ -53,12 +53,15 @@
 	"devDependencies": {
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
+		"@typescript-eslint/parser": "5.48.1",
 		"cross-env": "7.0.3",
 		"cypress": "12.3.0",
 		"eslint": "^8.31.0",
 		"start-server-and-test": "1.15.2",
 		"typescript": "4.9.4"
+	},
+	"optionalDependencies": {
+		"@tensorflow/tfjs-core": "^4.2.0"
 	}
 }
--- a/packages/backend/migration/1673783015567-Policies.js
+++ b/packages/backend/migration/1673783015567-Policies.js
@ -0,0 +1,13 @@
+export class Policies1673783015567 {
+    name = 'Policies1673783015567'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "role" RENAME COLUMN "options" TO "policies"`);
+				await queryRunner.query(`ALTER TABLE "meta" RENAME COLUMN "defaultRoleOverride" TO "policies"`);
+    }
+
+    async down(queryRunner) {
+				await queryRunner.query(`ALTER TABLE "meta" RENAME COLUMN "policies" TO "defaultRoleOverride"`);
+        await queryRunner.query(`ALTER TABLE "role" RENAME COLUMN "policies" TO "options"`);
+    }
+}
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@ -21,17 +21,17 @@
 		"@tensorflow/tfjs-node": "4.1.0"
 	},
 	"dependencies": {
-		"@bull-board/api": "^4.10.1",
-		"@bull-board/fastify": "^4.10.1",
-		"@bull-board/ui": "^4.10.1",
+		"@bull-board/api": "^4.10.2",
+		"@bull-board/fastify": "^4.10.2",
+		"@bull-board/ui": "^4.10.2",
 		"@discordapp/twemoji": "14.0.2",
 		"@fastify/accepts": "4.1.0",
 		"@fastify/cookie": "^8.3.0",
 		"@fastify/cors": "8.2.0",
 		"@fastify/http-proxy": "^8.4.0",
-		"@fastify/multipart": "7.3.0",
-		"@fastify/static": "6.6.0",
-		"@fastify/view": "7.3.0",
+		"@fastify/multipart": "7.4.0",
+		"@fastify/static": "6.6.1",
+		"@fastify/view": "7.4.0",
 		"@nestjs/common": "9.2.1",
 		"@nestjs/core": "9.2.1",
 		"@nestjs/testing": "9.2.1",
@ -41,7 +41,7 @@
 		"ajv": "8.12.0",
 		"archiver": "5.3.1",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.1289.0",
+		"aws-sdk": "2.1295.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.4",
 		"bull": "4.10.2",
@ -58,7 +58,7 @@
 		"escape-regexp": "0.0.1",
 		"fastify": "4.11.0",
 		"feed": "4.2.2",
-		"file-type": "18.0.0",
+		"file-type": "18.1.0",
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "^4.0.0",
 		"got": "12.5.3",
@ -67,7 +67,7 @@
 		"ip-cidr": "3.0.11",
 		"is-svg": "4.3.2",
 		"js-yaml": "4.1.0",
-		"jsdom": "20.0.3",
+		"jsdom": "21.0.0",
 		"json5": "2.2.3",
 		"json5-loader": "4.0.1",
 		"jsonld": "8.1.0",
@ -77,7 +77,7 @@
 		"misskey-js": "0.0.14",
 		"ms": "3.0.0-canary.1",
 		"nested-property": "4.0.0",
-		"nodemailer": "6.8.0",
+		"nodemailer": "6.9.0",
 		"nsfwjs": "2.4.2",
 		"oauth": "^0.10.0",
 		"os-utils": "0.0.14",
@ -87,7 +87,7 @@
 		"probe-image-size": "7.2.3",
 		"promise-limit": "2.7.0",
 		"pug": "3.0.2",
-		"punycode": "2.1.1",
+		"punycode": "2.2.0",
 		"pureimage": "0.3.15",
 		"qrcode": "1.5.1",
 		"random-seed": "0.3.0",
@ -109,7 +109,7 @@
 		"stringz": "2.1.0",
 		"summaly": "2.7.0",
 		"syslog-pro": "git+https://github.com/misskey-dev/SyslogPro#0.2.9-misskey.2",
-		"systeminformation": "5.17.1",
+		"systeminformation": "5.17.3",
 		"tinycolor2": "1.5.2",
 		"tmp": "0.2.1",
 		"tsc-alias": "1.8.2",
@ -117,18 +117,18 @@
 		"twemoji-parser": "14.0.0",
 		"typeorm": "0.3.11",
 		"ulid": "2.3.0",
-		"undici": "^5.14.0",
+		"undici": "^5.15.0",
 		"unzipper": "0.10.11",
 		"uuid": "9.0.0",
 		"vary": "1.1.2",
 		"web-push": "3.5.0",
 		"websocket": "1.0.34",
-		"ws": "8.11.0",
+		"ws": "8.12.0",
 		"xev": "3.0.2"
 	},
 	"devDependencies": {
-		"@redocly/openapi-core": "1.0.0-beta.117",
-		"@swc/core": "1.3.25",
+		"@redocly/openapi-core": "1.0.0-beta.120",
+		"@swc/core": "1.3.26",
 		"@swc/jest": "0.2.24",
 		"@types/accepts": "1.3.5",
 		"@types/archiver": "5.3.1",
@ -172,11 +172,11 @@
 		"@types/web-push": "3.3.2",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
+		"@typescript-eslint/parser": "5.48.1",
 		"cross-env": "7.0.3",
 		"eslint": "8.31.0",
-		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-import": "2.27.4",
 		"execa": "6.1.0",
 		"jest": "29.3.1",
 		"jest-mock": "^29.3.1",
--- a/packages/backend/src/core/DriveService.ts
+++ b/packages/backend/src/core/DriveService.ts
@ -479,8 +479,8 @@ export class DriveService {
 		if (user && !isLink) {
 			const usage = await this.driveFileEntityService.calcDriveUsageOf(user);

-			const role = await this.roleService.getUserRoleOptions(user.id);
-			const driveCapacity = 1024 * 1024 * role.driveCapacityMb;
+			const policies = await this.roleService.getUserPolicies(user.id);
+			const driveCapacity = 1024 * 1024 * policies.driveCapacityMb;
 			this.registerLogger.debug('drive capacity override applied');
 			this.registerLogger.debug(`overrideCap: ${driveCapacity}bytes, usage: ${usage}bytes, u+s: ${usage + info.size}bytes`);

--- a/packages/backend/src/core/NoteCreateService.ts
+++ b/packages/backend/src/core/NoteCreateService.ts
@ -226,7 +226,7 @@ export class NoteCreateService {
 		if (data.channel != null) data.localOnly = true;

 		if (data.visibility === 'public' && data.channel == null) {
-			if ((await this.roleService.getUserRoleOptions(user.id)).canPublicNote === false) {
+			if ((await this.roleService.getUserPolicies(user.id)).canPublicNote === false) {
 				data.visibility = 'home';
 			}
 		}
--- a/packages/backend/src/core/NotePiningService.ts
+++ b/packages/backend/src/core/NotePiningService.ts
@ -57,7 +57,7 @@ export class NotePiningService {

 		const pinings = await this.userNotePiningsRepository.findBy({ userId: user.id });

-		if (pinings.length >= (await this.roleService.getUserRoleOptions(user.id)).pinLimit) {
+		if (pinings.length >= (await this.roleService.getUserPolicies(user.id)).pinLimit) {
 			throw new IdentifiableError('15a018eb-58e5-4da1-93be-330fcc5e4e1a', 'You can not pin notes any more.');
 		}

--- a/packages/backend/src/core/RoleService.ts
+++ b/packages/backend/src/core/RoleService.ts
@ -8,12 +8,12 @@ import { DI } from '@/di-symbols.js';
 import { bindThis } from '@/decorators.js';
 import { MetaService } from '@/core/MetaService.js';
 import { UserCacheService } from '@/core/UserCacheService.js';
-import { RoleCondFormulaValue } from '@/models/entities/Role.js';
+import type { RoleCondFormulaValue } from '@/models/entities/Role.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { StreamMessages } from '@/server/api/stream/types.js';
 import type { OnApplicationShutdown } from '@nestjs/common';

-export type RoleOptions = {
+export type RolePolicies = {
 	gtlAvailable: boolean;
 	ltlAvailable: boolean;
 	canPublicNote: boolean;
@ -28,9 +28,10 @@ export type RoleOptions = {
 	noteEachClipsLimit: number;
 	userListLimit: number;
 	userEachUserListsLimit: number;
+	rateLimitFactor: number;
 };

-export const DEFAULT_ROLE: RoleOptions = {
+export const DEFAULT_POLICIES: RolePolicies = {
 	gtlAvailable: true,
 	ltlAvailable: true,
 	canPublicNote: true,
@ -45,6 +46,7 @@ export const DEFAULT_ROLE: RoleOptions = {
 	noteEachClipsLimit: 200,
 	userListLimit: 10,
 	userEachUserListsLimit: 50,
+	rateLimitFactor: 1,
 };

@Injectable()
@ -193,34 +195,44 @@ export class RoleService implements OnApplicationShutdown {
 	}

 	@bindThis
-	public async getUserRoleOptions(userId: User['id'] | null): Promise<RoleOptions> {
+	public async getUserPolicies(userId: User['id'] | null): Promise<RolePolicies> {
 		const meta = await this.metaService.fetch();
-		const baseRoleOptions = { ...DEFAULT_ROLE, ...meta.defaultRoleOverride };
+		const basePolicies = { ...DEFAULT_POLICIES, ...meta.policies };

-		if (userId == null) return baseRoleOptions;
+		if (userId == null) return basePolicies;

 		const roles = await this.getUserRoles(userId);

-		function getOptionValues(option: keyof RoleOptions) {
-			if (roles.length === 0) return [baseRoleOptions[option]];
-			return roles.map(role => (role.options[option] && (role.options[option].useDefault !== true)) ? role.options[option].value : baseRoleOptions[option]);
+		function calc<T extends keyof RolePolicies>(name: T, aggregate: (values: RolePolicies[T][]) => RolePolicies[T]) {
+			if (roles.length === 0) return basePolicies[name];
+
+			const policies = roles.map(role => role.policies[name] ?? { priority: 0, useDefault: true });
+
+			const p2 = policies.filter(policy => policy.priority === 2);
+			if (p2.length > 0) return aggregate(p2.map(policy => policy.useDefault ? basePolicies[name] : policy.value));
+
+			const p1 = policies.filter(policy => policy.priority === 1);
+			if (p1.length > 0) return aggregate(p2.map(policy => policy.useDefault ? basePolicies[name] : policy.value));
+
+			return aggregate(policies.map(policy => policy.useDefault ? basePolicies[name] : policy.value));
 		}

 		return {
-			gtlAvailable: getOptionValues('gtlAvailable').some(x => x === true),
-			ltlAvailable: getOptionValues('ltlAvailable').some(x => x === true),
-			canPublicNote: getOptionValues('canPublicNote').some(x => x === true),
-			canInvite: getOptionValues('canInvite').some(x => x === true),
-			canManageCustomEmojis: getOptionValues('canManageCustomEmojis').some(x => x === true),
-			driveCapacityMb: Math.max(...getOptionValues('driveCapacityMb')),
-			pinLimit: Math.max(...getOptionValues('pinLimit')),
-			antennaLimit: Math.max(...getOptionValues('antennaLimit')),
-			wordMuteLimit: Math.max(...getOptionValues('wordMuteLimit')),
-			webhookLimit: Math.max(...getOptionValues('webhookLimit')),
-			clipLimit: Math.max(...getOptionValues('clipLimit')),
-			noteEachClipsLimit: Math.max(...getOptionValues('noteEachClipsLimit')),
-			userListLimit: Math.max(...getOptionValues('userListLimit')),
-			userEachUserListsLimit: Math.max(...getOptionValues('userEachUserListsLimit')),
+			gtlAvailable: calc('gtlAvailable', vs => vs.some(v => v === true)),
+			ltlAvailable: calc('ltlAvailable', vs => vs.some(v => v === true)),
+			canPublicNote: calc('canPublicNote', vs => vs.some(v => v === true)),
+			canInvite: calc('canInvite', vs => vs.some(v => v === true)),
+			canManageCustomEmojis: calc('canManageCustomEmojis', vs => vs.some(v => v === true)),
+			driveCapacityMb: calc('driveCapacityMb', vs => Math.max(...vs)),
+			pinLimit: calc('pinLimit', vs => Math.max(...vs)),
+			antennaLimit: calc('antennaLimit', vs => Math.max(...vs)),
+			wordMuteLimit: calc('wordMuteLimit', vs => Math.max(...vs)),
+			webhookLimit: calc('webhookLimit', vs => Math.max(...vs)),
+			clipLimit: calc('clipLimit', vs => Math.max(...vs)),
+			noteEachClipsLimit: calc('noteEachClipsLimit', vs => Math.max(...vs)),
+			userListLimit: calc('userListLimit', vs => Math.max(...vs)),
+			userEachUserListsLimit: calc('userEachUserListsLimit', vs => Math.max(...vs)),
+			rateLimitFactor: calc('rateLimitFactor', vs => Math.max(...vs)),
 		};
 	}

--- a/packages/backend/src/core/UserListService.ts
+++ b/packages/backend/src/core/UserListService.ts
@ -35,7 +35,7 @@ export class UserListService {
 		const currentCount = await this.userListJoiningsRepository.countBy({
 			userListId: list.id,
 		});
-		if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).userEachUserListsLimit) {
+		if (currentCount > (await this.roleService.getUserPolicies(me.id)).userEachUserListsLimit) {
 			throw new Error('Too many users');
 		}

--- a/packages/backend/src/core/entities/RoleEntityService.ts
+++ b/packages/backend/src/core/entities/RoleEntityService.ts
@ -6,7 +6,7 @@ import type { Packed } from '@/misc/schema.js';
 import type { User } from '@/models/entities/User.js';
 import type { Role } from '@/models/entities/Role.js';
 import { bindThis } from '@/decorators.js';
-import { DEFAULT_ROLE } from '@/core/RoleService.js';
+import { DEFAULT_POLICIES } from '@/core/RoleService.js';
 import { UserEntityService } from './UserEntityService.js';

@Injectable()
@ -40,10 +40,11 @@ export class RoleEntityService {
 			roleId: role.id,
 		});

-		const roleOptions = { ...role.options };
-		for (const [k, v] of Object.entries(DEFAULT_ROLE)) {
-			if (roleOptions[k] == null) roleOptions[k] = {
+		const policies = { ...role.policies };
+		for (const [k, v] of Object.entries(DEFAULT_POLICIES)) {
+			if (policies[k] == null) policies[k] = {
 				useDefault: true,
+				priority: 0,
 				value: v,
 			};
 		}
@ -61,7 +62,7 @@ export class RoleEntityService {
 			isAdministrator: role.isAdministrator,
 			isModerator: role.isModerator,
 			canEditMembersByModerator: role.canEditMembersByModerator,
-			options: roleOptions,
+			policies: policies,
 			usersCount: assigns.length,
 			...(opts.detail ? {
 				users: this.userEntityService.packMany(assigns.map(x => x.userId), me),
--- a/packages/backend/src/core/entities/UserEntityService.ts
+++ b/packages/backend/src/core/entities/UserEntityService.ts
@ -423,7 +423,7 @@ export class UserEntityService implements OnModuleInit {
 				bannerUrl: user.banner ? this.driveFileEntityService.getPublicUrl(user.banner, false) : null,
 				bannerBlurhash: user.banner?.blurhash ?? null,
 				isLocked: user.isLocked,
-				isSilenced: this.roleService.getUserRoleOptions(user.id).then(r => !r.canPublicNote),
+				isSilenced: this.roleService.getUserPolicies(user.id).then(r => !r.canPublicNote),
 				isSuspended: user.isSuspended ?? falsy,
 				description: profile!.description,
 				location: profile!.location,
@ -496,7 +496,7 @@ export class UserEntityService implements OnModuleInit {
 			} : {}),

 			...(opts.includeSecrets ? {
-				role: this.roleService.getUserRoleOptions(user.id),
+				policies: this.roleService.getUserPolicies(user.id),
 				email: profile!.email,
 				emailVerified: profile!.emailVerified,
 				securityKeysList: profile!.twoFactorEnabled
--- a/packages/backend/src/models/entities/Meta.ts
+++ b/packages/backend/src/models/entities/Meta.ts
@ -458,5 +458,5 @@ export class Meta {
 	@Column('jsonb', {
 		default: { },
 	})
-	public defaultRoleOverride: Record<string, any>;
+	public policies: Record<string, any>;
 }
--- a/packages/backend/src/models/entities/Role.ts
+++ b/packages/backend/src/models/entities/Role.ts
@ -136,8 +136,9 @@ export class Role {
 	@Column('jsonb', {
 		default: { },
 	})
-	public options: Record<string, {
+	public policies: Record<string, {
 		useDefault: boolean;
+		priority: number;
 		value: any;
 	}>;
 }
--- a/packages/backend/src/server/NodeinfoServerService.ts
+++ b/packages/backend/src/server/NodeinfoServerService.ts
@ -10,7 +10,7 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { bindThis } from '@/decorators.js';
 import NotesChart from '@/core/chart/charts/notes.js';
 import UsersChart from '@/core/chart/charts/users.js';
-import { DEFAULT_ROLE } from '@/core/RoleService.js';
+import { DEFAULT_POLICIES } from '@/core/RoleService.js';
 import type { FastifyInstance, FastifyPluginOptions } from 'fastify';

 const nodeinfo2_1path = '/nodeinfo/2.1';
@ -74,7 +74,7 @@ export class NodeinfoServerService {

 			const proxyAccount = meta.proxyAccountId ? await this.userEntityService.pack(meta.proxyAccountId).catch(() => null) : null;

-			const baseRoleOptions = { ...DEFAULT_ROLE, ...meta.defaultRoleOverride };
+			const basePolicies = { ...DEFAULT_POLICIES, ...meta.policies };

 			return {
 				software: {
@ -105,8 +105,8 @@ export class NodeinfoServerService {
 					repositoryUrl: meta.repositoryUrl,
 					feedbackUrl: meta.feedbackUrl,
 					disableRegistration: meta.disableRegistration,
-					disableLocalTimeline: !baseRoleOptions.ltlAvailable,
-					disableGlobalTimeline: !baseRoleOptions.gtlAvailable,
+					disableLocalTimeline: !basePolicies.ltlAvailable,
+					disableGlobalTimeline: !basePolicies.gtlAvailable,
 					emailRequiredForSignup: meta.emailRequiredForSignup,
 					enableHcaptcha: meta.enableHcaptcha,
 					enableRecaptcha: meta.enableRecaptcha,
--- a/packages/backend/src/server/api/ApiCallService.ts
+++ b/packages/backend/src/server/api/ApiCallService.ts
@ -224,8 +224,11 @@ export class ApiCallService implements OnApplicationShutdown {
 				limit.key = ep.name;
 			}

+			// TODO: 毎リクエスト計算するのもあれだしキャッシュしたい
+			const factor = user ? (await this.roleService.getUserPolicies(user.id)).rateLimitFactor : 1;
+
 			// Rate limit
-			await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor).catch(err => {
+			await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor, factor).catch(err => {
 				throw new ApiError({
 					message: 'Rate limit exceeded. Please try again later.',
 					code: 'RATE_LIMIT_EXCEEDED',
@ -271,9 +274,9 @@ export class ApiCallService implements OnApplicationShutdown {
 			}
 		}

-		if (ep.meta.requireRoleOption != null && !user!.isRoot) {
-			const myRole = await this.roleService.getUserRoleOptions(user!.id);
-			if (!myRole[ep.meta.requireRoleOption]) {
+		if (ep.meta.requireRolePolicy != null && !user!.isRoot) {
+			const policies = await this.roleService.getUserPolicies(user!.id);
+			if (!policies[ep.meta.requireRolePolicy]) {
 				throw new ApiError({
 					message: 'You are not assigned to a required role.',
 					code: 'ROLE_PERMISSION_DENIED',
--- a/packages/backend/src/server/api/EndpointsModule.ts
+++ b/packages/backend/src/server/api/EndpointsModule.ts
@ -65,7 +65,7 @@ import * as ep___admin_roles_show from './endpoints/admin/roles/show.js';
 import * as ep___admin_roles_update from './endpoints/admin/roles/update.js';
 import * as ep___admin_roles_assign from './endpoints/admin/roles/assign.js';
 import * as ep___admin_roles_unassign from './endpoints/admin/roles/unassign.js';
-import * as ep___admin_roles_updateDefaultRoleOverride from './endpoints/admin/roles/update-default-role-override.js';
+import * as ep___admin_roles_updateDefaultPolicies from './endpoints/admin/roles/update-default-policies.js';
 import * as ep___announcements from './endpoints/announcements.js';
 import * as ep___antennas_create from './endpoints/antennas/create.js';
 import * as ep___antennas_delete from './endpoints/antennas/delete.js';
@ -399,7 +399,7 @@ const $admin_roles_show: Provider = { provide: 'ep:admin/roles/show', useClass:
 const $admin_roles_update: Provider = { provide: 'ep:admin/roles/update', useClass: ep___admin_roles_update.default };
 const $admin_roles_assign: Provider = { provide: 'ep:admin/roles/assign', useClass: ep___admin_roles_assign.default };
 const $admin_roles_unassign: Provider = { provide: 'ep:admin/roles/unassign', useClass: ep___admin_roles_unassign.default };
-const $admin_roles_updateDefaultRoleOverride: Provider = { provide: 'ep:admin/roles/update-default-role-override', useClass: ep___admin_roles_updateDefaultRoleOverride.default };
+const $admin_roles_updateDefaultPolicies: Provider = { provide: 'ep:admin/roles/update-default-policies', useClass: ep___admin_roles_updateDefaultPolicies.default };
 const $announcements: Provider = { provide: 'ep:announcements', useClass: ep___announcements.default };
 const $antennas_create: Provider = { provide: 'ep:antennas/create', useClass: ep___antennas_create.default };
 const $antennas_delete: Provider = { provide: 'ep:antennas/delete', useClass: ep___antennas_delete.default };
@ -737,7 +737,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$admin_roles_update,
 		$admin_roles_assign,
 		$admin_roles_unassign,
-		$admin_roles_updateDefaultRoleOverride,
+		$admin_roles_updateDefaultPolicies,
 		$announcements,
 		$antennas_create,
 		$antennas_delete,
@ -1069,7 +1069,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$admin_roles_update,
 		$admin_roles_assign,
 		$admin_roles_unassign,
-		$admin_roles_updateDefaultRoleOverride,
+		$admin_roles_updateDefaultPolicies,
 		$announcements,
 		$antennas_create,
 		$antennas_delete,
--- a/packages/backend/src/server/api/RateLimiterService.ts
+++ b/packages/backend/src/server/api/RateLimiterService.ts
@ -26,7 +26,7 @@ export class RateLimiterService {
 	}

 	@bindThis
-	public limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string) {
+	public limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string, factor = 1) {
 		return new Promise<void>((ok, reject) => {
 			if (this.disabled) ok();

@ -34,7 +34,7 @@ export class RateLimiterService {
 			const min = (): void => {
 				const minIntervalLimiter = new Limiter({
 					id: `${actor}:${limitation.key}:min`,
-					duration: limitation.minInterval,
+					duration: limitation.minInterval * factor,
 					max: 1,
 					db: this.redisClient,
 				});
@ -62,8 +62,8 @@ export class RateLimiterService {
 			const max = (): void => {
 				const limiter = new Limiter({
 					id: `${actor}:${limitation.key}`,
-					duration: limitation.duration,
-					max: limitation.max,
+					duration: limitation.duration * factor,
+					max: limitation.max / factor,
 					db: this.redisClient,
 				});
 		
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@ -64,7 +64,7 @@ import * as ep___admin_roles_show from './endpoints/admin/roles/show.js';
 import * as ep___admin_roles_update from './endpoints/admin/roles/update.js';
 import * as ep___admin_roles_assign from './endpoints/admin/roles/assign.js';
 import * as ep___admin_roles_unassign from './endpoints/admin/roles/unassign.js';
-import * as ep___admin_roles_updateDefaultRoleOverride from './endpoints/admin/roles/update-default-role-override.js';
+import * as ep___admin_roles_updateDefaultPolicies from './endpoints/admin/roles/update-default-policies.js';
 import * as ep___announcements from './endpoints/announcements.js';
 import * as ep___antennas_create from './endpoints/antennas/create.js';
 import * as ep___antennas_delete from './endpoints/antennas/delete.js';
@ -396,7 +396,7 @@ const eps = [
 	['admin/roles/update', ep___admin_roles_update],
 	['admin/roles/assign', ep___admin_roles_assign],
 	['admin/roles/unassign', ep___admin_roles_unassign],
-	['admin/roles/update-default-role-override', ep___admin_roles_updateDefaultRoleOverride],
+	['admin/roles/update-default-policies', ep___admin_roles_updateDefaultPolicies],
 	['announcements', ep___announcements],
 	['antennas/create', ep___antennas_create],
 	['antennas/delete', ep___antennas_delete],
@ -695,7 +695,7 @@ export interface IEndpointMeta {
 	 */
 	readonly requireAdmin?: boolean;

-	readonly requireRoleOption?: string;
+	readonly requireRolePolicy?: string;

 	/**
 	 * エンドポイントのリミテーションに関するやつ
--- a/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts
@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/add.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/add.ts
@ -14,7 +14,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	errors: {
 		noSuchFile: {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts
@ -14,7 +14,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	errors: {
 		noSuchEmoji: {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts
@ -9,7 +9,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts
@ -10,7 +10,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	errors: {
 		noSuchEmoji: {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts
@ -5,7 +5,7 @@ import { QueueService } from '@/core/QueueService.js';
 export const meta = {
 	secure: true,
 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts
@ -11,7 +11,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	res: {
 		type: 'array',
--- a/packages/backend/src/server/api/endpoints/admin/emoji/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/list.ts
@ -11,7 +11,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	res: {
 		type: 'array',
--- a/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts
@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts
@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts
@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',
 } as const;

 export const paramDef = {
--- a/packages/backend/src/server/api/endpoints/admin/emoji/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/update.ts
@ -9,7 +9,7 @@ export const meta = {
 	tags: ['admin'],

 	requireCredential: true,
-	requireRoleOption: 'canManageCustomEmojis',
+	requireRolePolicy: 'canManageCustomEmojis',

 	errors: {
 		noSuchEmoji: {
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@ -4,7 +4,7 @@ import { Endpoint } from '@/server/api/endpoint-base.js';
 import { MetaService } from '@/core/MetaService.js';
 import type { Config } from '@/config.js';
 import { DI } from '@/di-symbols.js';
-import { DEFAULT_ROLE } from '@/core/RoleService.js';
+import { DEFAULT_POLICIES } from '@/core/RoleService.js';

 export const meta = {
 	tags: ['meta'],
@ -440,7 +440,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				deeplIsPro: instance.deeplIsPro,
 				enableIpLogging: instance.enableIpLogging,
 				enableActiveEmailValidation: instance.enableActiveEmailValidation,
-				baseRole: { ...DEFAULT_ROLE, ...instance.defaultRoleOverride },
+				policies: { ...DEFAULT_POLICIES, ...instance.policies },
 			};
 		});
 	}
--- a/packages/backend/src/server/api/endpoints/admin/roles/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/roles/create.ts
@ -25,7 +25,7 @@ export const paramDef = {
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		canEditMembersByModerator: { type: 'boolean' },
-		options: {
+		policies: {
 			type: 'object',
 		},
 	},
@ -39,7 +39,7 @@ export const paramDef = {
 		'isModerator',
 		'isAdministrator',
 		'canEditMembersByModerator',
-		'options',
+		'policies',
 	],
 } as const;

@ -70,7 +70,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				isAdministrator: ps.isAdministrator,
 				isModerator: ps.isModerator,
 				canEditMembersByModerator: ps.canEditMembersByModerator,
-				options: ps.options,
+				policies: ps.policies,
 			}).then(x => this.rolesRepository.findOneByOrFail(x.identifiers[0]));
 	
 			this.globalEventService.publishInternalEvent('roleCreated', created);
--- a/packages/backend/src/server/api/endpoints/admin/roles/update-default-role-override.ts
+++ b/packages/backend/src/server/api/endpoints/admin/roles/update-default-role-override.ts
@ -16,12 +16,12 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
-		options: {
+		policies: {
 			type: 'object',
 		},
 	},
 	required: [
-		'options',
+		'policies',
 	],
 } as const;

@ -34,9 +34,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	) {
 		super(meta, paramDef, async (ps) => {
 			await this.metaService.update({
-				defaultRoleOverride: ps.options,
+				policies: ps.policies,
 			});
-			this.globalEventService.publishInternalEvent('defaultRoleOverrideUpdated', ps.options);
+			this.globalEventService.publishInternalEvent('policiesUpdated', ps.policies);
 		});
 	}
 }
--- a/packages/backend/src/server/api/endpoints/admin/roles/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/roles/update.ts
@ -33,7 +33,7 @@ export const paramDef = {
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		canEditMembersByModerator: { type: 'boolean' },
-		options: {
+		policies: {
 			type: 'object',
 		},
 	},
@ -48,7 +48,7 @@ export const paramDef = {
 		'isModerator',
 		'isAdministrator',
 		'canEditMembersByModerator',
-		'options',
+		'policies',
 	],
 } as const;

@ -79,7 +79,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				isModerator: ps.isModerator,
 				isAdministrator: ps.isAdministrator,
 				canEditMembersByModerator: ps.canEditMembersByModerator,
-				options: ps.options,
+				policies: ps.policies,
 			});
 			const updated = await this.rolesRepository.findOneByOrFail({ id: ps.roleId });
 			this.globalEventService.publishInternalEvent('roleUpdated', updated);
--- a/packages/backend/src/server/api/endpoints/admin/show-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-user.ts
@ -52,7 +52,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}

 			const isModerator = await this.roleService.isModerator(user);
-			const isSilenced = !(await this.roleService.getUserRoleOptions(user.id)).canPublicNote;
+			const isSilenced = !(await this.roleService.getUserPolicies(user.id)).canPublicNote;

 			const _me = await this.usersRepository.findOneByOrFail({ id: me.id });
 			if (!await this.roleService.isAdministrator(_me) && await this.roleService.isAdministrator(user)) {
@ -94,6 +94,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				lastActiveDate: user.lastActiveDate,
 				moderationNote: profile.moderationNote,
 				signins,
+				policies: await this.roleService.getUserPolicies(user.id),
 				roles: await this.roleEntityService.packMany(roles, me, { detail: false }),
 			};
 		});
--- a/packages/backend/src/server/api/endpoints/antennas/create.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/create.ts
@ -92,7 +92,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const currentAntennasCount = await this.antennasRepository.countBy({
 				userId: me.id,
 			});
-			if (currentAntennasCount > (await this.roleService.getUserRoleOptions(me.id)).antennaLimit) {
+			if (currentAntennasCount > (await this.roleService.getUserPolicies(me.id)).antennaLimit) {
 				throw new ApiError(meta.errors.tooManyAntennas);
 			}

--- a/packages/backend/src/server/api/endpoints/clips/add-note.ts
+++ b/packages/backend/src/server/api/endpoints/clips/add-note.ts
@ -97,7 +97,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const currentCount = await this.clipNotesRepository.countBy({
 				clipId: clip.id,
 			});
-			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).noteEachClipsLimit) {
+			if (currentCount > (await this.roleService.getUserPolicies(me.id)).noteEachClipsLimit) {
 				throw new ApiError(meta.errors.tooManyClipNotes);
 			}

--- a/packages/backend/src/server/api/endpoints/clips/create.ts
+++ b/packages/backend/src/server/api/endpoints/clips/create.ts
@ -54,7 +54,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const currentCount = await this.clipsRepository.countBy({
 				userId: me.id,
 			});
-			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).clipLimit) {
+			if (currentCount > (await this.roleService.getUserPolicies(me.id)).clipLimit) {
 				throw new ApiError(meta.errors.tooManyClips);
 			}
 	
--- a/packages/backend/src/server/api/endpoints/drive.ts
+++ b/packages/backend/src/server/api/endpoints/drive.ts
@ -47,10 +47,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			// Calculate drive usage
 			const usage = await this.driveFileEntityService.calcDriveUsageOf(me.id);

-			const myRole = await this.roleService.getUserRoleOptions(me.id);
+			const policies = await this.roleService.getUserPolicies(me.id);

 			return {
-				capacity: 1024 * 1024 * myRole.driveCapacityMb,
+				capacity: 1024 * 1024 * policies.driveCapacityMb,
 				usage: usage,
 			};
 		});
--- a/packages/backend/src/server/api/endpoints/i/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/update.ts
@ -173,7 +173,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			if (ps.mutedWords !== undefined) {
 				// TODO: ちゃんと数える
 				const length = JSON.stringify(ps.mutedWords).length;
-				if (length > (await this.roleService.getUserRoleOptions(user.id)).wordMuteLimit) {
+				if (length > (await this.roleService.getUserPolicies(user.id)).wordMuteLimit) {
 					throw new ApiError(meta.errors.tooManyMutedWords);
 				}

--- a/packages/backend/src/server/api/endpoints/i/webhooks/create.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/create.ts
@ -54,7 +54,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const currentWebhooksCount = await this.webhooksRepository.countBy({
 				userId: me.id,
 			});
-			if (currentWebhooksCount > (await this.roleService.getUserRoleOptions(me.id)).webhookLimit) {
+			if (currentWebhooksCount > (await this.roleService.getUserPolicies(me.id)).webhookLimit) {
 				throw new ApiError(meta.errors.tooManyWebhooks);
 			}

--- a/packages/backend/src/server/api/endpoints/invite.ts
+++ b/packages/backend/src/server/api/endpoints/invite.ts
@ -9,7 +9,7 @@ export const meta = {
 	tags: ['meta'],

 	requireCredential: true,
-	requireRoleOption: 'canInvite',
+	requireRolePolicy: 'canInvite',

 	res: {
 		type: 'object',
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@ -7,7 +7,7 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { MetaService } from '@/core/MetaService.js';
 import type { Config } from '@/config.js';
 import { DI } from '@/di-symbols.js';
-import { DEFAULT_ROLE } from '@/core/RoleService.js';
+import { DEFAULT_POLICIES } from '@/core/RoleService.js';

 export const meta = {
 	tags: ['meta'],
@ -334,7 +334,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {

 				translatorAvailable: instance.deeplAuthKey != null,

-				baseRole: { ...DEFAULT_ROLE, ...instance.defaultRoleOverride },
+				policies: { ...DEFAULT_POLICIES, ...instance.policies },

 				...(ps.detail ? {
 					pinnedPages: instance.pinnedPages,
--- a/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
@ -62,8 +62,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private activeUsersChart: ActiveUsersChart,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const role = await this.roleService.getUserRoleOptions(me ? me.id : null);
-			if (!role.gtlAvailable) {
+			const policies = await this.roleService.getUserPolicies(me ? me.id : null);
+			if (!policies.gtlAvailable) {
 				throw new ApiError(meta.errors.gtlDisabled);
 			}

--- a/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
@ -71,8 +71,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private activeUsersChart: ActiveUsersChart,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const role = await this.roleService.getUserRoleOptions(me.id);
-			if (!role.ltlAvailable) {
+			const policies = await this.roleService.getUserPolicies(me.id);
+			if (!policies.ltlAvailable) {
 				throw new ApiError(meta.errors.stlDisabled);
 			}

--- a/packages/backend/src/server/api/endpoints/notes/local-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/local-timeline.ts
@ -67,8 +67,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private activeUsersChart: ActiveUsersChart,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const role = await this.roleService.getUserRoleOptions(me ? me.id : null);
-			if (!role.ltlAvailable) {
+			const policies = await this.roleService.getUserPolicies(me ? me.id : null);
+			if (!policies.ltlAvailable) {
 				throw new ApiError(meta.errors.ltlDisabled);
 			}

--- a/packages/backend/src/server/api/endpoints/users/lists/create.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/create.ts
@ -55,7 +55,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const currentCount = await this.userListsRepository.countBy({
 				userId: me.id,
 			});
-			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).userListLimit) {
+			if (currentCount > (await this.roleService.getUserPolicies(me.id)).userListLimit) {
 				throw new ApiError(meta.errors.tooManyUserLists);
 			}
 	
--- a/packages/backend/src/server/api/stream/channels/global-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/global-timeline.ts
@ -29,8 +29,8 @@ class GlobalTimelineChannel extends Channel {

 	@bindThis
 	public async init(params: any) {
-		const role = await this.roleService.getUserRoleOptions(this.user ? this.user.id : null);
-		if (!role.gtlAvailable) return;
+		const policies = await this.roleService.getUserPolicies(this.user ? this.user.id : null);
+		if (!policies.gtlAvailable) return;

 		// Subscribe events
 		this.subscriber.on('notesStream', this.onNote);
--- a/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
@ -30,8 +30,8 @@ class HybridTimelineChannel extends Channel {

 	@bindThis
 	public async init(params: any): Promise<void> {
-		const role = await this.roleService.getUserRoleOptions(this.user ? this.user.id : null);
-		if (!role.ltlAvailable) return;
+		const policies = await this.roleService.getUserPolicies(this.user ? this.user.id : null);
+		if (!policies.ltlAvailable) return;

 		// Subscribe events
 		this.subscriber.on('notesStream', this.onNote);
--- a/packages/backend/src/server/api/stream/channels/local-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/local-timeline.ts
@ -28,8 +28,8 @@ class LocalTimelineChannel extends Channel {

 	@bindThis
 	public async init(params: any) {
-		const role = await this.roleService.getUserRoleOptions(this.user ? this.user.id : null);
-		if (!role.ltlAvailable) return;
+		const policies = await this.roleService.getUserPolicies(this.user ? this.user.id : null);
+		if (!policies.ltlAvailable) return;

 		// Subscribe events
 		this.subscriber.on('notesStream', this.onNote);
--- a/packages/backend/src/server/api/stream/types.ts
+++ b/packages/backend/src/server/api/stream/types.ts
@ -30,7 +30,7 @@ export interface InternalStreamTypes {
 	remoteUserUpdated: Serialized<{ id: User['id']; }>;
 	follow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
 	unfollow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
-	defaultRoleOverrideUpdated: Serialized<Role['options']>;
+	policiesUpdated: Serialized<Role['options']>;
 	roleCreated: Serialized<Role>;
 	roleDeleted: Serialized<Role>;
 	roleUpdated: Serialized<Role>;
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -18,7 +18,7 @@
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
 		"blurhash": "2.0.4",
-		"broadcast-channel": "4.19.1",
+		"broadcast-channel": "4.20.1",
 		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"canvas-confetti": "^1.6.0",
 		"chart.js": "4.1.2",
@ -42,10 +42,10 @@
 		"misskey-js": "0.0.14",
 		"photoswipe": "5.3.4",
 		"prismjs": "1.29.0",
-		"punycode": "2.1.1",
+		"punycode": "2.2.0",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
-		"rollup": "3.9.1",
+		"rollup": "3.10.0",
 		"s-age": "1.1.2",
 		"sanitize-html": "^2.8.1",
 		"sass": "1.57.1",
@ -74,6 +74,7 @@
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
 		"@types/matter-js": "0.18.2",
+		"@types/node": "^18.11.18",
 		"@types/punycode": "2.1.0",
 		"@types/sanitize-html": "^2.8.0",
 		"@types/seedrandom": "3.0.4",
@ -82,16 +83,16 @@
 		"@types/uuid": "9.0.0",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.48.0",
-		"@typescript-eslint/parser": "5.48.0",
+		"@typescript-eslint/eslint-plugin": "5.48.1",
+		"@typescript-eslint/parser": "5.48.1",
 		"@vue/runtime-core": "3.2.45",
 		"cross-env": "7.0.3",
 		"cypress": "12.3.0",
 		"eslint": "8.31.0",
-		"eslint-plugin-import": "2.26.0",
-		"eslint-plugin-vue": "9.8.0",
+		"eslint-plugin-import": "2.27.4",
+		"eslint-plugin-vue": "9.9.0",
 		"start-server-and-test": "1.15.2",
 		"vue-eslint-parser": "^9.1.0",
-		"vue-tsc": "^1.0.22"
+		"vue-tsc": "^1.0.24"
 	}
 }
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@ -17,9 +17,7 @@
 	</ol>
 	<ol v-else-if="emojis.length > 0" ref="suggests" :class="$style.list">
 		<li v-for="emoji in emojis" :key="emoji.emoji" :class="$style.item" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<div :class="$style.emoji">
-				<MkEmoji :emoji="emoji.emoji"/>
-			</div>
+			<MkEmoji :emoji="emoji.emoji" :class="$style.emoji"/>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span v-if="q" :class="$style.emojiName" v-html="sanitizeHtml(emoji.name.replace(q, `<b>${q}</b>`))"></span>
 			<span v-else v-text="emoji.name"></span>
@ -439,14 +437,15 @@ onBeforeUnmount(() => {
 }

 .emoji {
-	flex-shrink: 0;
-	display: flex;
-	margin: 0 4px 0 0;
-	height: 24px;
-	width: 24px;
-	justify-content: center;
-	align-items: center;
-	font-size: 20px;
+	flex-shrink: 0 !important;
+	display: flex !important;
+	margin: 0 4px 0 0 !important;
+	height: 24px !important;
+	width: 24px !important;
+	justify-content: center !important;
+	align-items: center !important;
+	font-size: 20px !important;
+	pointer-events: none !important;
 }

 .emojiImg {
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@ -1,32 +1,34 @@
 <template>
 <button
 	v-if="!link"
-	ref="el" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full, small, large, asLike }"
+	ref="el" class="_button"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
 	:type="type"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
+	<div ref="ripples" :class="$style.ripples"></div>
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </button>
 <MkA
-	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full, small }"
+	v-else class="_button"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
 	:to="to"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
+	<div ref="ripples" :class="$style.ripples"></div>
+	<div :class="$style.content">
 		<slot></slot>
 	</div>
 </MkA>
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted, useCssModule } from 'vue';
+
+const $style = useCssModule();

 const props = defineProps<{
 	type?: 'button' | 'submit' | 'reset';
@ -78,6 +80,7 @@ function onMousedown(evt: MouseEvent): void {
 	const rect = target.getBoundingClientRect();

 	const ripple = document.createElement('div');
+	ripple.classList.add($style.ripple);
 	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
 	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';

@ -101,8 +104,8 @@ function onMousedown(evt: MouseEvent): void {
 }
 </script>

-<style lang="scss" scoped>
-.bghgjjyj {
+<style lang="scss" module>
+.root {
 	position: relative;
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
@ -173,7 +176,7 @@ function onMousedown(evt: MouseEvent): void {
 		}

 		> .ripples {
-			::v-deep(div) {
+			> .ripple {
 				background: rgba(255, 60, 106, 0.15);
 			}
 		}
@ -237,35 +240,37 @@ function onMousedown(evt: MouseEvent): void {
 		min-width: 100px;
 	}

-	> .ripples {
-		position: absolute;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 6px;
-		overflow: clip;
-
-		::v-deep(div) {
-			position: absolute;
-			width: 2px;
-			height: 2px;
-			border-radius: 100%;
-			background: rgba(0, 0, 0, 0.1);
-			opacity: 1;
-			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
-		}
-	}
-
-	&.primary > .ripples ::v-deep(div) {
+	&.primary > .ripples > .ripple {
 		background: rgba(0, 0, 0, 0.15);
 	}
+}

-	> .content {
-		position: relative;
-		z-index: 1;
-	}
+.ripples {
+	position: absolute;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: 6px;
+	overflow: clip;
+	pointer-events: none;
+}
+
+.ripple {
+	position: absolute;
+	width: 2px;
+	height: 2px;
+	border-radius: 100%;
+	background: rgba(0, 0, 0, 0.1);
+	opacity: 1;
+	transform: scale(1);
+	transition: all 0.5s cubic-bezier(0,.5,0,1);
+}
+
+.content {
+	position: relative;
+	z-index: 1;
+	pointer-events: none;
 }
 </style>
--- a/packages/frontend/src/components/MkChartTooltip.vue
+++ b/packages/frontend/src/components/MkChartTooltip.vue
@ -1,10 +1,10 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
-		<div v-if="title" class="title">{{ title }}</div>
+	<div v-if="title || series">
+		<div v-if="title" :class="$style.title">{{ title }}</div>
 		<template v-if="series">
-			<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
+			<div v-for="x in series">
+				<span :class="$style.color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
 				<span>{{ x.text }}</span>
 			</div>
 		</template>
@ -33,21 +33,17 @@ const emit = defineEmits<{
 }>();
 </script>

-<style lang="scss" scoped>
-.qpcyisrl {
-	> .title {
-		margin-bottom: 4px;
-	}
+<style lang="scss" module>
+.title {
+	margin-bottom: 4px;
+}

-	> .series {
-		> .color {
-			display: inline-block;
-			width: 8px;
-			height: 8px;
-			border-width: 1px;
-			border-style: solid;
-			margin-right: 8px;
-		}
-	}
+.color {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	border-width: 1px;
+	border-style: solid;
+	margin-right: 8px;
 }
 </style>
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@ -1,26 +1,32 @@
 <template>
-<div class="ukygtjoj _panel blur" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
-	<header v-if="showHeader" ref="header">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="sub">
-			<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
+<div class="_panel blur" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
+	<header v-if="showHeader" ref="header" :class="$style.header">
+		<div :class="$style.title">
+			<span :class="$style.titleIcon"><slot name="icon"></slot></span>
+			<slot name="header"></slot>
+		</div>
+		<div :class="$style.headerSub">
+			<slot name="func" :button-style-class="$style.headerButton"></slot>
+			<button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody">
 				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
 				<template v-else><i class="ti ti-chevron-down"></i></template>
 			</button>
 		</div>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
+		:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
 		@after-leave="afterLeave"
 	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+		<div v-show="showBody" ref="content" :class="[$style.content, { omitted }]">
 			<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+			<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
 			</button>
 		</div>
 	</Transition>
@ -129,19 +135,18 @@ export default defineComponent({
 });
 </script>

-<style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+<style lang="scss" module>
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
 	overflow-y: clip;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.container-toggle-enter-from {
-	opacity: 0;
-}
-.container-toggle-leave-to {
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
 	opacity: 0;
 }

-.ukygtjoj {
+.root {
 	position: relative;
 	overflow: clip;
 	contain: content;
@ -160,116 +165,93 @@ export default defineComponent({
 		}
 	}

-	> header {
-		position: sticky;
-		top: var(--stickyTop, 0px);
-		left: 0;
-		color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
-		border-bottom: solid 0.5px var(--panelHeaderDivider);
-		z-index: 2;
-		line-height: 1.4em;
-
-		> .title {
-			margin: 0;
-			padding: 12px 16px;
-
-			> ::v-deep(i) {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .sub {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-			height: 100%;
-
-			> ::v-deep(button) {
-				width: 42px;
-				height: 100%;
-			}
-		}
-	}
-
-	> .content {
-		--stickyTop: 0px;
-
-		&.omitted {
-			position: relative;
-			max-height: var(--maxHeight);
-			overflow: hidden;
-
-			> .fade {
-				display: block;
-				position: absolute;
-				z-index: 10;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				height: 64px;
-				background: linear-gradient(0deg, var(--panel), var(--X15));
-
-				> span {
-					display: inline-block;
-					background: var(--panel);
-					padding: 6px 10px;
-					font-size: 0.8em;
-					border-radius: 999px;
-					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-				}
-
-				&:hover {
-					> span {
-						background: var(--panelHighlight);
-					}
-				}
-			}
-		}
-	}
-
 	&.thin {
-		> header {
+		> .header {
 			> .title {
 				padding: 8px 10px;
 				font-size: 0.9em;
 			}
 		}
+	}
+}

-		> .content {
+.header {
+	position: sticky;
+	top: var(--stickyTop, 0px);
+	left: 0;
+	color: var(--panelHeaderFg);
+	background: var(--panelHeaderBg);
+	border-bottom: solid 0.5px var(--panelHeaderDivider);
+	z-index: 2;
+	line-height: 1.4em;
+}
+
+.title {
+	margin: 0;
+	padding: 12px 16px;
+
+	&:empty {
+		display: none;
+	}
+}
+
+.titleIcon {
+	margin-right: 6px;
+}
+
+.headerSub {
+	position: absolute;
+	z-index: 2;
+	top: 0;
+	right: 0;
+	height: 100%;
+}
+
+.headerButton {
+	width: 42px;
+	height: 100%;
+}
+
+.content {
+	--stickyTop: 0px;
+
+	&.omitted {
+		position: relative;
+		max-height: var(--maxHeight);
+		overflow: hidden;
+
+		> .fade {
+			display: block;
+			position: absolute;
+			z-index: 10;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+
+			> .fadeLabel {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+			}
+
+			&:hover {
+				> .fadeLabel {
+					background: var(--panelHighlight);
+				}
+			}
 		}
 	}
 }

@container (max-width: 380px) {
-	.ukygtjoj {
-		> header {
-			> .title {
-				padding: 8px 10px;
-				font-size: 0.9em;
-			}
-		}
-	}
-}
-
-._forceContainerFull_ .ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
-	}
-}
-
-._forceContainerFull_.ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
+	.title {
+		padding: 8px 10px;
+		font-size: 0.9em;
 	}
 }
 </style>
--- a/packages/frontend/src/components/MkContextMenu.vue
+++ b/packages/frontend/src/components/MkContextMenu.vue
@ -1,6 +1,12 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+<Transition
+	appear
+	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+>
+	<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </Transition>
@ -68,21 +74,22 @@ function onMousedown(evt: Event) {
 }
 </script>

-<style lang="scss" scoped>
-.nvlagfpb {
-	position: absolute;
-	backdrop-filter: var(--blur, blur(8px));
-	-webkit-backdrop-filter: var(--blur, blur(8px));
-}
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+<style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
+	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
 }
-
-.fade-enter-from, .fade-leave-to {
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
 	opacity: 0;
 	transform: scale(0.9);
 	height: 1px;
 }
+
+.root {
+	position: absolute;
+	backdrop-filter: var(--blur, blur(8px));
+	-webkit-backdrop-filter: var(--blur, blur(8px));
+}
 </style>
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@ -31,6 +31,3 @@ const emit = defineEmits<{

 const shown = ref(!!props.initialShown);
 </script>
-
-<style lang="scss" scoped>
-</style>
--- a/packages/frontend/src/components/MkFeaturedPhotos.vue
+++ b/packages/frontend/src/components/MkFeaturedPhotos.vue
@ -1,5 +1,5 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="meta" :class="$style.root" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
 </template>

 <script lang="ts" setup>
@ -14,8 +14,8 @@ os.api('meta', { detail: true }).then(gotMeta => {
 });
 </script>

-<style lang="scss" scoped>
-.xfbouadm {
+<style lang="scss" module>
+.root {
 	background-position: center;
 	background-size: cover;
 }
--- a/packages/frontend/src/components/MkInfo.vue
+++ b/packages/frontend/src/components/MkInfo.vue
@ -1,7 +1,7 @@
 <template>
-<div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn" class="ti ti-alert-triangle"></i>
-	<i v-else class="ti ti-info-circle"></i>
+<div :class="[$style.root, { [$style.warn]: warn }]">
+	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
+	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
 	<slot></slot>
 </div>
 </template>
@ -14,8 +14,8 @@ const props = defineProps<{
 }>();
 </script>

-<style lang="scss" scoped>
-.fpezltsf {
+<style lang="scss" module>
+.root {
 	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
@ -26,9 +26,9 @@ const props = defineProps<{
 		background: var(--infoWarnBg);
 		color: var(--infoWarnFg);
 	}
+}

-	> i {
-		margin-right: 4px;
-	}
+.i {
+	margin-right: 4px;
 }
 </style>
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@ -78,9 +78,9 @@ const inputEl = shallowRef<HTMLElement>();
 const prefixEl = shallowRef<HTMLElement>();
 const suffixEl = shallowRef<HTMLElement>();
 const height =
-	props.small ? 34 :
-	props.large ? 40 :
-	37;
+	props.small ? 33 :
+	props.large ? 39 :
+	36;

 const focus = () => inputEl.value.focus();
 const onInput = (ev: KeyboardEvent) => {
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@ -8,7 +8,7 @@
 	:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
 		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
@ -82,6 +82,7 @@ const type = $computed<ModalTypes>(() => {
 		return props.preferType!;
 	}
 });
+const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
 let transitionName = $computed((() =>
 	defaultStore.state.animation
 		? useSendAnime
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -493,7 +493,7 @@ function readPromo() {
 	bottom: 1em;
 }

-.howLessLabel {
+.showLessLabel {
 	display: inline-block;
 	background: var(--popup);
 	padding: 6px 10px;
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@ -1,12 +1,12 @@
 <template>
-<div class="fefdfafb">
-	<MkAvatar class="avatar" :user="$i"/>
-	<div class="main">
-		<div class="header">
+<div :class="$style.root">
+	<MkAvatar :class="$style.avatar" :user="$i"/>
+	<div :class="$style.main">
+		<div :class="$style.header">
 			<MkUserName :user="$i"/>
 		</div>
-		<div class="body">
-			<div class="content">
+		<div>
+			<div :class="$style.content">
 				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
 			</div>
 		</div>
@ -22,75 +22,48 @@ const props = defineProps<{
 }>();
 </script>

-<style lang="scss" scoped>
-.fefdfafb {
+<style lang="scss" module>
+.root {
 	display: flex;
 	margin: 0;
 	padding: 0;
 	overflow: clip;
 	font-size: 0.95em;
+}

-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-		pointer-events: none;
-	}
+.avatar {
+	flex-shrink: 0 !important;
+	display: block !important;
+	margin: 0 10px 0 0 !important;
+	width: 40px !important;
+	height: 40px !important;
+	border-radius: 8px !important;
+	pointer-events: none !important;
+}

-	> .main {
-		flex: 1;
-		min-width: 0;
+.main {
+	flex: 1;
+	min-width: 0;
+}

-		> .header {
-			margin-bottom: 2px;
-			font-weight: bold;
-		}
-
-		> .body {
-
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
-
-				> .text {
-					margin-right: 8px;
-				}
-			}
-
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
-	}
+.header {
+	margin-bottom: 2px;
+	font-weight: bold;
 }

@container (min-width: 350px) {
-	.fefdfafb {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
+	.avatar {
+		margin: 0 10px 0 0 !important;
+		width: 44px !important;
+		height: 44px !important;
 	}
 }

@container (min-width: 500px) {
-	.fefdfafb {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
+	.avatar {
+		margin: 0 12px 0 0 !important;
+		width: 48px !important;
+		height: 48px !important;
 	}
 }
 </style>
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@ -194,8 +194,6 @@ const fetchMore = async (): Promise<void> => {
 		limit: SECOND_FETCH_LIMIT + 1,
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
-		} : props.pagination.reversed ? {
-			sinceId: items.value[0].id,
 		} : {
 			untilId: items.value[items.value.length - 1].id,
 		}),
@ -262,8 +260,6 @@ const fetchMoreAhead = async (): Promise<void> => {
 		limit: SECOND_FETCH_LIMIT + 1,
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
-		} : props.pagination.reversed ? {
-			untilId: items.value[0].id,
 		} : {
 			sinceId: items.value[items.value.length - 1].id,
 		}),
--- a/packages/frontend/src/components/MkRange.vue
+++ b/packages/frontend/src/components/MkRange.vue
@ -173,7 +173,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	$thumbWidth: 20px;

 	> .body {
-		padding: 8px 12px;
+		padding: 7px 12px;
 		background: var(--panel);
 		border: solid 1px var(--panel);
 		border-radius: 6px;
--- a/packages/frontend/src/components/MkSelect.vue
+++ b/packages/frontend/src/components/MkSelect.vue
@ -65,9 +65,9 @@ const prefixEl = ref(null);
 const suffixEl = ref(null);
 const container = ref(null);
 const height =
-	props.small ? 34 :
-	props.large ? 40 :
-	37;
+	props.small ? 33 :
+	props.large ? 39 :
+	36;

 const focus = () => inputEl.value.focus();
 const onInput = (ev) => {
--- a/packages/frontend/src/components/MkVisibilityPicker.vue
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@ -1,42 +1,42 @@
 <template>
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="gqyayizv _popup blur">
-		<button key="public" class="_button item" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div class="icon"><i class="ti ti-world"></i></div>
-			<div class="body">
-				<span>{{ i18n.ts._visibility.public }}</span>
-				<span>{{ i18n.ts._visibility.publicDescription }}</span>
+	<div class="_popup blur" :class="$style.root">
+		<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
+			<div :class="$style.icon"><i class="ti ti-world"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
-		<button key="home" class="_button item" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div class="icon"><i class="ti ti-home"></i></div>
-			<div class="body">
-				<span>{{ i18n.ts._visibility.home }}</span>
-				<span>{{ i18n.ts._visibility.homeDescription }}</span>
+		<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
+			<div :class="$style.icon"><i class="ti ti-home"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
-		<button key="followers" class="_button item" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
-			<div class="icon"><i class="ti ti-lock"></i></div>
-			<div class="body">
-				<span>{{ i18n.ts._visibility.followers }}</span>
-				<span>{{ i18n.ts._visibility.followersDescription }}</span>
+		<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
+			<div :class="$style.icon"><i class="ti ti-lock"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
-		<button key="specified" :disabled="localOnly" class="_button item" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
-			<div class="icon"><i class="ti ti-mail"></i></div>
-			<div class="body">
-				<span>{{ i18n.ts._visibility.specified }}</span>
-				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
+		<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
+			<div :class="$style.icon"><i class="ti ti-mail"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>
 		</button>
-		<div class="divider"></div>
-		<button key="localOnly" class="_button item localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
-			<div class="icon"><i class="ti ti-world-off"></i></div>
-			<div class="body">
-				<span>{{ i18n.ts._visibility.localOnly }}</span>
-				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
+		<div :class="$style.divider"></div>
+		<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
+			<div :class="$style.icon"><i class="ti ti-world-off"></i></div>
+			<div :class="$style.body">
+				<span :class="$style.itemTitle">{{ i18n.ts._visibility.localOnly }}</span>
+				<span :class="$style.itemDescription">{{ i18n.ts._visibility.localOnlyDescription }}</span>
 			</div>
-			<div class="toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
+			<div :class="$style.toggle"><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
 		</button>
 	</div>
 </MkModal>
@ -79,81 +79,81 @@ function choose(visibility: typeof misskey.noteVisibilities[number]): void {
 }
 </script>

-<style lang="scss" scoped>
-.gqyayizv {
+<style lang="scss" module>
+.root {
 	width: 240px;
 	padding: 8px 0;
+}

-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--divider);
+.divider {
+	margin: 8px 0;
+	border-top: solid 0.5px var(--divider);
+}
+
+.item {
+	display: flex;
+	padding: 8px 14px;
+	font-size: 12px;
+	text-align: left;
+	width: 100%;
+	box-sizing: border-box;
+
+	&:hover {
+		background: rgba(0, 0, 0, 0.05);
 	}

-	> .item {
-		display: flex;
-		padding: 8px 14px;
-		font-size: 12px;
-		text-align: left;
-		width: 100%;
-		box-sizing: border-box;
+	&:active {
+		background: rgba(0, 0, 0, 0.1);
+	}

-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
+	&.active {
+		color: var(--fgOnAccent);
+		background: var(--accent);
+	}

-		&:active {
-			background: rgba(0, 0, 0, 0.1);
-		}
-
-		&.active {
-			color: var(--fgOnAccent);
-			background: var(--accent);
-		}
-
-		&.localOnly.active {
-			color: var(--accent);
-			background: inherit;
-		}
-
-		> .icon {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-right: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-
-		> .body {
-			flex: 1 1 auto;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> span:first-child {
-				display: block;
-				font-weight: bold;
-			}
-
-			> span:last-child:not(:first-child) {
-				opacity: 0.6;
-			}
-		}
-
-		> .toggle {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-left: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
+	&.localOnly.active {
+		color: var(--accent);
+		background: inherit;
 	}
 }
+
+.icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 10px;
+	width: 16px;
+	top: 0;
+	bottom: 0;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.body {
+	flex: 1 1 auto;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.itemTitle {
+	display: block;
+	font-weight: bold;
+}
+
+.itemDescription {
+	opacity: 0.6;
+}
+
+.toggle {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-left: 10px;
+	width: 16px;
+	top: 0;
+	bottom: 0;
+	margin-top: auto;
+	margin-bottom: auto;
+}
 </style>
--- a/packages/frontend/src/components/MkWaitingDialog.vue
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@ -1,9 +1,9 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
-	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="ti ti-check icon success"></i>
-		<MkLoading v-else class="icon waiting" :em="true"/>
-		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
+	<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
+		<i v-if="success" :class="[$style.icon, $style.success]" class="ti ti-check"></i>
+		<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>
+		<div v-if="text && !success" :class="$style.text">{{ text }}<MkEllipsis/></div>
 	</div>
 </MkModal>
 </template>
@ -35,8 +35,8 @@ watch(() => props.showing, () => {
 });
 </script>

-<style lang="scss" scoped>
-.iuyakobc {
+<style lang="scss" module>
+.root {
 	margin: auto;
 	position: relative;
 	padding: 32px;
@ -54,21 +54,21 @@ watch(() => props.showing, () => {
 		align-items: center;
 		justify-content: center;
 	}
+}

-	> .icon {
-		font-size: 32px;
+.icon {
+	font-size: 32px;

-		&.success {
-			color: var(--accent);
-		}
-
-		&.waiting {
-			opacity: 0.7;
-		}
+	&.success {
+		color: var(--accent);
 	}

-	> .text {
-		margin-top: 16px;
+	&.waiting {
+		opacity: 0.7;
 	}
 }
+
+.text {
+	margin-top: 16px;
+}
 </style>
--- a/packages/frontend/src/components/form/split.vue
+++ b/packages/frontend/src/components/form/split.vue
@ -1,27 +1,27 @@
 <template>
-<div class="terlnhxf">
+<div :class="$style.root">
 	<slot></slot>
 </div>
 </template>

 <script lang="ts" setup>
+import { provide } from 'vue';
+
 const props = withDefaults(defineProps<{
 	minWidth?: number;
 }>(), {
 	minWidth: 210,
 });

+provide('splited', true);
+
 const minWidth = props.minWidth + 'px';
 </script>

-<style lang="scss" scoped>
-.terlnhxf {
+<style lang="scss" module>
+.root {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
 	grid-gap: 12px;
-
-	> ::v-deep(*) {
-		margin: 0 !important;
-	}
 }
 </style>
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@ -17,6 +17,7 @@ import { i18n } from '@/i18n';
 .root {
 	padding: 32px;
 	text-align: center;
+  align-items: center;
 }

 .text {
@ -29,6 +30,7 @@ import { i18n } from '@/i18n';

 .img {
 	vertical-align: bottom;
+  width: 128px;
 	height: 128px;
 	margin-bottom: 16px;
 	border-radius: 16px;
--- a/packages/frontend/src/components/mfm.ts
+++ b/packages/frontend/src/components/mfm.ts
@ -307,7 +307,8 @@ export default defineComponent({
 						key: Math.random(),
 						emoji: `:${token.props.name}:`,
 						normal: this.plain,
-						host: this.author.host,
+						// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+						host: this.author?.host,
 					})];
 				}

--- a/packages/frontend/src/os.ts
+++ b/packages/frontend/src/os.ts
@ -20,7 +20,10 @@ export const apiWithDialog = ((
 	promiseDialog(promise, null, (err) => {
 		let title = null;
 		let text = err.message + '\n' + (err as any).id;
-		if (err.code.startsWith('TOO_MANY')) {
+		if (err.code === 'RATE_LIMIT_EXCEEDED') {
+			title = i18n.ts.cannotPerformTemporary;
+			text = i18n.ts.cannotPerformTemporaryDescription;
+		} else if (err.code.startsWith('TOO_MANY')) {
 			title = i18n.ts.youCannotCreateAnymore;
 			text = `${i18n.ts.error}: ${err.id}`;
 		}
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@ -36,180 +36,239 @@
 	</MkFolder>

 	<FormSlot>
-		<template #label>{{ i18n.ts._role.options }}</template>
+		<template #label>{{ i18n.ts._role.policies }}</template>
 		<div class="_gaps_s">
 			<MkFolder>
-				<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
-				<template #suffix>{{ options_gtlAvailable_useDefault ? i18n.ts._role.useBaseValue : (options_gtlAvailable_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
+				<template #suffix>{{ policies.rateLimitFactor.useDefault ? i18n.ts._role.useBaseValue : `${Math.floor(policies.rateLimitFactor.value * 100)}%` }} <i :class="getPriorityIcon(policies.rateLimitFactor)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_gtlAvailable_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.rateLimitFactor.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="options_gtlAvailable_value" :disabled="options_gtlAvailable_useDefault" :readonly="readonly">
+					<MkRange :model-value="policies.rateLimitFactor.value * 100" :min="30" :max="300" :step="10" :text-converter="(v) => `${v}%`" @update:model-value="v => policies.rateLimitFactor.value = (v / 100)">
+						<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
+						<template #caption>{{ i18n.ts._role._options.descriptionOfRateLimitFactor }}</template>
+					</MkRange>
+					<MkRange v-model="policies.rateLimitFactor.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
+				</div>
+			</MkFolder>
+
+			<MkFolder>
+				<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
+				<template #suffix>{{ policies.gtlAvailable.useDefault ? i18n.ts._role.useBaseValue : (policies.gtlAvailable.value ? i18n.ts.yes : i18n.ts.no) }} <i :class="getPriorityIcon(policies.gtlAvailable)"></i></template>
+				<div class="_gaps">
+					<MkSwitch v-model="policies.gtlAvailable.useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+					</MkSwitch>
+					<MkSwitch v-model="policies.gtlAvailable.value" :disabled="policies.gtlAvailable.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
 					</MkSwitch>
+					<MkRange v-model="policies.gtlAvailable.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.ltlAvailable }}</template>
-				<template #suffix>{{ options_ltlAvailable_useDefault ? i18n.ts._role.useBaseValue : (options_ltlAvailable_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<template #suffix>{{ policies.ltlAvailable.useDefault ? i18n.ts._role.useBaseValue : (policies.ltlAvailable.value ? i18n.ts.yes : i18n.ts.no) }} <i :class="getPriorityIcon(policies.ltlAvailable)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_ltlAvailable_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.ltlAvailable.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="options_ltlAvailable_value" :disabled="options_ltlAvailable_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.ltlAvailable.value" :disabled="policies.ltlAvailable.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
 					</MkSwitch>
+					<MkRange v-model="policies.ltlAvailable.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.canPublicNote }}</template>
-				<template #suffix>{{ options_canPublicNote_useDefault ? i18n.ts._role.useBaseValue : (options_canPublicNote_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<template #suffix>{{ policies.canPublicNote.useDefault ? i18n.ts._role.useBaseValue : (policies.canPublicNote.value ? i18n.ts.yes : i18n.ts.no) }} <i :class="getPriorityIcon(policies.canPublicNote)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_canPublicNote_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canPublicNote.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="options_canPublicNote_value" :disabled="options_canPublicNote_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canPublicNote.value" :disabled="policies.canPublicNote.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
 					</MkSwitch>
+					<MkRange v-model="policies.canPublicNote.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.canInvite }}</template>
-				<template #suffix>{{ options_canInvite_useDefault ? i18n.ts._role.useBaseValue : (options_canInvite_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<template #suffix>{{ policies.canInvite.useDefault ? i18n.ts._role.useBaseValue : (policies.canInvite.value ? i18n.ts.yes : i18n.ts.no) }} <i :class="getPriorityIcon(policies.canInvite)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_canInvite_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canInvite.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="options_canInvite_value" :disabled="options_canInvite_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canInvite.value" :disabled="policies.canInvite.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
 					</MkSwitch>
+					<MkRange v-model="policies.canInvite.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
-				<template #suffix>{{ options_canManageCustomEmojis_useDefault ? i18n.ts._role.useBaseValue : (options_canManageCustomEmojis_value ? i18n.ts.yes : i18n.ts.no) }}</template>
+				<template #suffix>{{ policies.canManageCustomEmojis.useDefault ? i18n.ts._role.useBaseValue : (policies.canManageCustomEmojis.value ? i18n.ts.yes : i18n.ts.no) }} <i :class="getPriorityIcon(policies.canManageCustomEmojis)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_canManageCustomEmojis_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canManageCustomEmojis.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="options_canManageCustomEmojis_value" :disabled="options_canManageCustomEmojis_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.canManageCustomEmojis.value" :disabled="policies.canManageCustomEmojis.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
 					</MkSwitch>
+					<MkRange v-model="policies.canManageCustomEmojis.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
-				<template #suffix>{{ options_driveCapacityMb_useDefault ? i18n.ts._role.useBaseValue : (options_driveCapacityMb_value + 'MB') }}</template>
+				<template #suffix>{{ policies.driveCapacityMb.useDefault ? i18n.ts._role.useBaseValue : (policies.driveCapacityMb.value + 'MB') }} <i :class="getPriorityIcon(policies.driveCapacityMb)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_driveCapacityMb_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.driveCapacityMb.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_driveCapacityMb_value" :disabled="options_driveCapacityMb_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.driveCapacityMb.value" :disabled="policies.driveCapacityMb.useDefault" type="number" :readonly="readonly">
 						<template #suffix>MB</template>
 					</MkInput>
+					<MkRange v-model="policies.driveCapacityMb.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.pinMax }}</template>
-				<template #suffix>{{ options_pinLimit_useDefault ? i18n.ts._role.useBaseValue : (options_pinLimit_value) }}</template>
+				<template #suffix>{{ policies.pinLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.pinLimit.value) }} <i :class="getPriorityIcon(policies.pinLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_pinLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.pinLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_pinLimit_value" :disabled="options_pinLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.pinLimit.value" :disabled="policies.pinLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.pinLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.antennaMax }}</template>
-				<template #suffix>{{ options_antennaLimit_useDefault ? i18n.ts._role.useBaseValue : (options_antennaLimit_value) }}</template>
+				<template #suffix>{{ policies.antennaLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.antennaLimit.value) }} <i :class="getPriorityIcon(policies.antennaLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_antennaLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.antennaLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_antennaLimit_value" :disabled="options_antennaLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.antennaLimit.value" :disabled="policies.antennaLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.antennaLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.wordMuteMax }}</template>
-				<template #suffix>{{ options_wordMuteLimit_useDefault ? i18n.ts._role.useBaseValue : (options_wordMuteLimit_value) }}</template>
+				<template #suffix>{{ policies.wordMuteLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.wordMuteLimit.value) }} <i :class="getPriorityIcon(policies.wordMuteLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_wordMuteLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.wordMuteLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_wordMuteLimit_value" :disabled="options_wordMuteLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.wordMuteLimit.value" :disabled="policies.wordMuteLimit.useDefault" type="number" :readonly="readonly">
 						<template #suffix>chars</template>
 					</MkInput>
+					<MkRange v-model="policies.wordMuteLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.webhookMax }}</template>
-				<template #suffix>{{ options_webhookLimit_useDefault ? i18n.ts._role.useBaseValue : (options_webhookLimit_value) }}</template>
+				<template #suffix>{{ policies.webhookLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.webhookLimit.value) }} <i :class="getPriorityIcon(policies.webhookLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_webhookLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.webhookLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_webhookLimit_value" :disabled="options_webhookLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.webhookLimit.value" :disabled="policies.webhookLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.webhookLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.clipMax }}</template>
-				<template #suffix>{{ options_clipLimit_useDefault ? i18n.ts._role.useBaseValue : (options_clipLimit_value) }}</template>
+				<template #suffix>{{ policies.clipLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.clipLimit.value) }} <i :class="getPriorityIcon(policies.clipLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_clipLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.clipLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_clipLimit_value" :disabled="options_clipLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.clipLimit.value" :disabled="policies.clipLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.clipLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.noteEachClipsMax }}</template>
-				<template #suffix>{{ options_noteEachClipsLimit_useDefault ? i18n.ts._role.useBaseValue : (options_noteEachClipsLimit_value) }}</template>
+				<template #suffix>{{ policies.noteEachClipsLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.noteEachClipsLimit.value) }} <i :class="getPriorityIcon(policies.noteEachClipsLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_noteEachClipsLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.noteEachClipsLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_noteEachClipsLimit_value" :disabled="options_noteEachClipsLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.noteEachClipsLimit.value" :disabled="policies.noteEachClipsLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.noteEachClipsLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.userListMax }}</template>
-				<template #suffix>{{ options_userListLimit_useDefault ? i18n.ts._role.useBaseValue : (options_userListLimit_value) }}</template>
+				<template #suffix>{{ policies.userListLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.userListLimit.value) }} <i :class="getPriorityIcon(policies.userListLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_userListLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.userListLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_userListLimit_value" :disabled="options_userListLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.userListLimit.value" :disabled="policies.userListLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.userListLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>

 			<MkFolder>
 				<template #label>{{ i18n.ts._role._options.userEachUserListsMax }}</template>
-				<template #suffix>{{ options_userEachUserListsLimit_useDefault ? i18n.ts._role.useBaseValue : (options_userEachUserListsLimit_value) }}</template>
+				<template #suffix>{{ policies.userEachUserListsLimit.useDefault ? i18n.ts._role.useBaseValue : (policies.userEachUserListsLimit.value) }} <i :class="getPriorityIcon(policies.userEachUserListsLimit)"></i></template>
 				<div class="_gaps">
-					<MkSwitch v-model="options_userEachUserListsLimit_useDefault" :readonly="readonly">
+					<MkSwitch v-model="policies.userEachUserListsLimit.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkInput v-model="options_userEachUserListsLimit_value" :disabled="options_userEachUserListsLimit_useDefault" type="number" :readonly="readonly">
+					<MkInput v-model="policies.userEachUserListsLimit.value" :disabled="policies.userEachUserListsLimit.useDefault" type="number" :readonly="readonly">
 					</MkInput>
+					<MkRange v-model="policies.userEachUserListsLimit.priority" :min="0" :max="2" :step="1" easing :text-converter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
 				</div>
 			</MkFolder>
 		</div>
@ -232,7 +291,7 @@
 </template>

 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
 import RolesEditorFormula from './RolesEditorFormula.vue';
 import MkInput from '@/components/MkInput.vue';
@ -241,9 +300,29 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkRange from '@/components/MkRange.vue';
 import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+
+const ROLE_POLICIES = [
+	'gtlAvailable',
+	'ltlAvailable',
+	'canPublicNote',
+	'canInvite',
+	'canManageCustomEmojis',
+	'driveCapacityMb',
+	'pinLimit',
+	'antennaLimit',
+	'wordMuteLimit',
+	'webhookLimit',
+	'clipLimit',
+	'noteEachClipsLimit',
+	'userListLimit',
+	'userEachUserListsLimit',
+	'rateLimitFactor',
+] as const;

 const emit = defineEmits<{
 	(ev: 'created', payload: any): void;
@ -265,34 +344,16 @@ let target = $ref(role?.target ?? 'manual');
 let condFormula = $ref(role?.condFormula ?? { id: uuid(), type: 'isRemote' });
 let isPublic = $ref(role?.isPublic ?? false);
 let canEditMembersByModerator = $ref(role?.canEditMembersByModerator ?? false);
-let options_gtlAvailable_useDefault = $ref(role?.options?.gtlAvailable?.useDefault ?? true);
-let options_gtlAvailable_value = $ref(role?.options?.gtlAvailable?.value ?? false);
-let options_ltlAvailable_useDefault = $ref(role?.options?.ltlAvailable?.useDefault ?? true);
-let options_ltlAvailable_value = $ref(role?.options?.ltlAvailable?.value ?? false);
-let options_canPublicNote_useDefault = $ref(role?.options?.canPublicNote?.useDefault ?? true);
-let options_canPublicNote_value = $ref(role?.options?.canPublicNote?.value ?? false);
-let options_canInvite_useDefault = $ref(role?.options?.canInvite?.useDefault ?? true);
-let options_canInvite_value = $ref(role?.options?.canInvite?.value ?? false);
-let options_canManageCustomEmojis_useDefault = $ref(role?.options?.canManageCustomEmojis?.useDefault ?? true);
-let options_canManageCustomEmojis_value = $ref(role?.options?.canManageCustomEmojis?.value ?? false);
-let options_driveCapacityMb_useDefault = $ref(role?.options?.driveCapacityMb?.useDefault ?? true);
-let options_driveCapacityMb_value = $ref(role?.options?.driveCapacityMb?.value ?? 0);
-let options_pinLimit_useDefault = $ref(role?.options?.pinLimit?.useDefault ?? true);
-let options_pinLimit_value = $ref(role?.options?.pinLimit?.value ?? 0);
-let options_antennaLimit_useDefault = $ref(role?.options?.antennaLimit?.useDefault ?? true);
-let options_antennaLimit_value = $ref(role?.options?.antennaLimit?.value ?? 0);
-let options_wordMuteLimit_useDefault = $ref(role?.options?.wordMuteLimit?.useDefault ?? true);
-let options_wordMuteLimit_value = $ref(role?.options?.wordMuteLimit?.value ?? 0);
-let options_webhookLimit_useDefault = $ref(role?.options?.webhookLimit?.useDefault ?? true);
-let options_webhookLimit_value = $ref(role?.options?.webhookLimit?.value ?? 0);
-let options_clipLimit_useDefault = $ref(role?.options?.clipLimit?.useDefault ?? true);
-let options_clipLimit_value = $ref(role?.options?.clipLimit?.value ?? 0);
-let options_noteEachClipsLimit_useDefault = $ref(role?.options?.noteEachClipsLimit?.useDefault ?? true);
-let options_noteEachClipsLimit_value = $ref(role?.options?.noteEachClipsLimit?.value ?? 0);
-let options_userListLimit_useDefault = $ref(role?.options?.userListLimit?.useDefault ?? true);
-let options_userListLimit_value = $ref(role?.options?.userListLimit?.value ?? 0);
-let options_userEachUserListsLimit_useDefault = $ref(role?.options?.userEachUserListsLimit?.useDefault ?? true);
-let options_userEachUserListsLimit_value = $ref(role?.options?.userEachUserListsLimit?.value ?? 0);
+
+const policies = reactive<Record<typeof ROLE_POLICIES[number], { useDefault: boolean; priority: number; value: any; }>>({});
+for (const ROLE_POLICY of ROLE_POLICIES) {
+	const _policies = role?.policies ?? {};
+	policies[ROLE_POLICY] = {
+		useDefault: _policies[ROLE_POLICY]?.useDefault ?? true,
+		priority: _policies[ROLE_POLICY]?.priority ?? 0,
+		value: _policies[ROLE_POLICY]?.value ?? instance.policies[ROLE_POLICY],
+	};
+}

 if (_DEV_) {
 	watch($$(condFormula), () => {
@ -300,23 +361,10 @@ if (_DEV_) {
 	}, { deep: true });
 }

-function getOptions() {
-	return {
-		gtlAvailable: { useDefault: options_gtlAvailable_useDefault, value: options_gtlAvailable_value },
-		ltlAvailable: { useDefault: options_ltlAvailable_useDefault, value: options_ltlAvailable_value },
-		canPublicNote: { useDefault: options_canPublicNote_useDefault, value: options_canPublicNote_value },
-		canInvite: { useDefault: options_canInvite_useDefault, value: options_canInvite_value },
-		canManageCustomEmojis: { useDefault: options_canManageCustomEmojis_useDefault, value: options_canManageCustomEmojis_value },
-		driveCapacityMb: { useDefault: options_driveCapacityMb_useDefault, value: options_driveCapacityMb_value },
-		pinLimit: { useDefault: options_pinLimit_useDefault, value: options_pinLimit_value },
-		antennaLimit: { useDefault: options_antennaLimit_useDefault, value: options_antennaLimit_value },
-		wordMuteLimit: { useDefault: options_wordMuteLimit_useDefault, value: options_wordMuteLimit_value },
-		webhookLimit: { useDefault: options_webhookLimit_useDefault, value: options_webhookLimit_value },
-		clipLimit: { useDefault: options_clipLimit_useDefault, value: options_clipLimit_value },
-		noteEachClipsLimit: { useDefault: options_noteEachClipsLimit_useDefault, value: options_noteEachClipsLimit_value },
-		userListLimit: { useDefault: options_userListLimit_useDefault, value: options_userListLimit_value },
-		userEachUserListsLimit: { useDefault: options_userEachUserListsLimit_useDefault, value: options_userEachUserListsLimit_value },
-	};
+function getPriorityIcon(option) {
+	if (option.priority === 2) return 'ti ti-arrows-up';
+	if (option.priority === 1) return 'ti ti-arrow-narrow-up';
+	return 'ti ti-point';
 }

 async function save() {
@ -333,7 +381,7 @@ async function save() {
 			isModerator: rolePermission === 'moderator',
 			isPublic,
 			canEditMembersByModerator,
-			options: getOptions(),
+			policies,
 		});
 		emit('updated');
 	} else {
@ -347,7 +395,7 @@ async function save() {
 			isModerator: rolePermission === 'moderator',
 			isPublic,
 			canEditMembersByModerator,
-			options: getOptions(),
+			policies,
 		});
 		emit('created', created);
 	}
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@ -8,108 +8,116 @@
 				<MkFolder>
 					<template #label>{{ i18n.ts._role.baseRole }}</template>
 					<div class="_gaps">
+						<MkFolder>
+							<template #label>{{ i18n.ts._role._options.rateLimitFactor }}</template>
+							<template #suffix>{{ Math.floor(policies.rateLimitFactor * 100) }}%</template>
+							<MkRange :model-value="policies.rateLimitFactor * 100" :min="30" :max="300" :step="10" :text-converter="(v) => `${v}%`" @update:model-value="v => policies.rateLimitFactor = (v / 100)">
+								<template #caption>{{ i18n.ts._role._options.descriptionOfRateLimitFactor }}</template>
+							</MkRange>
+						</MkFolder>
+
 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.gtlAvailable }}</template>
-							<template #suffix>{{ options_gtlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="options_gtlAvailable">
+							<template #suffix>{{ policies.gtlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.gtlAvailable">
 								<template #label>{{ i18n.ts.enable }}</template>
 							</MkSwitch>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.ltlAvailable }}</template>
-							<template #suffix>{{ options_ltlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="options_ltlAvailable">
+							<template #suffix>{{ policies.ltlAvailable ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.ltlAvailable">
 								<template #label>{{ i18n.ts.enable }}</template>
 							</MkSwitch>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.canPublicNote }}</template>
-							<template #suffix>{{ options_canPublicNote ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="options_canPublicNote">
+							<template #suffix>{{ policies.canPublicNote ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.canPublicNote">
 								<template #label>{{ i18n.ts.enable }}</template>
 							</MkSwitch>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.canInvite }}</template>
-							<template #suffix>{{ options_canInvite ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="options_canInvite">
+							<template #suffix>{{ policies.canInvite ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.canInvite">
 								<template #label>{{ i18n.ts.enable }}</template>
 							</MkSwitch>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.canManageCustomEmojis }}</template>
-							<template #suffix>{{ options_canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="options_canManageCustomEmojis">
+							<template #suffix>{{ policies.canManageCustomEmojis ? i18n.ts.yes : i18n.ts.no }}</template>
+							<MkSwitch v-model="policies.canManageCustomEmojis">
 								<template #label>{{ i18n.ts.enable }}</template>
 							</MkSwitch>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.driveCapacity }}</template>
-							<template #suffix>{{ options_driveCapacityMb }}MB</template>
-							<MkInput v-model="options_driveCapacityMb" type="number">
+							<template #suffix>{{ policies.driveCapacityMb }}MB</template>
+							<MkInput v-model="policies.driveCapacityMb" type="number">
 								<template #suffix>MB</template>
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.pinMax }}</template>
-							<template #suffix>{{ options_pinLimit }}</template>
-							<MkInput v-model="options_pinLimit" type="number">
+							<template #suffix>{{ policies.pinLimit }}</template>
+							<MkInput v-model="policies.pinLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.antennaMax }}</template>
-							<template #suffix>{{ options_antennaLimit }}</template>
-							<MkInput v-model="options_antennaLimit" type="number">
+							<template #suffix>{{ policies.antennaLimit }}</template>
+							<MkInput v-model="policies.antennaLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.wordMuteMax }}</template>
-							<template #suffix>{{ options_wordMuteLimit }}</template>
-							<MkInput v-model="options_wordMuteLimit" type="number">
+							<template #suffix>{{ policies.wordMuteLimit }}</template>
+							<MkInput v-model="policies.wordMuteLimit" type="number">
 								<template #suffix>chars</template>
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.webhookMax }}</template>
-							<template #suffix>{{ options_webhookLimit }}</template>
-							<MkInput v-model="options_webhookLimit" type="number">
+							<template #suffix>{{ policies.webhookLimit }}</template>
+							<MkInput v-model="policies.webhookLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.clipMax }}</template>
-							<template #suffix>{{ options_clipLimit }}</template>
-							<MkInput v-model="options_clipLimit" type="number">
+							<template #suffix>{{ policies.clipLimit }}</template>
+							<MkInput v-model="policies.clipLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.noteEachClipsMax }}</template>
-							<template #suffix>{{ options_noteEachClipsLimit }}</template>
-							<MkInput v-model="options_noteEachClipsLimit" type="number">
+							<template #suffix>{{ policies.noteEachClipsLimit }}</template>
+							<MkInput v-model="policies.noteEachClipsLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.userListMax }}</template>
-							<template #suffix>{{ options_userListLimit }}</template>
-							<MkInput v-model="options_userListLimit" type="number">
+							<template #suffix>{{ policies.userListLimit }}</template>
+							<MkInput v-model="policies.userListLimit" type="number">
 							</MkInput>
 						</MkFolder>

 						<MkFolder>
 							<template #label>{{ i18n.ts._role._options.userEachUserListsMax }}</template>
-							<template #suffix>{{ options_userEachUserListsLimit }}</template>
-							<MkInput v-model="options_userEachUserListsLimit" type="number">
+							<template #suffix>{{ policies.userEachUserListsLimit }}</template>
+							<MkInput v-model="policies.userEachUserListsLimit" type="number">
 							</MkInput>
 						</MkFolder>

@ -126,7 +134,7 @@
 </template>

 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import XHeader from './_header_.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
@ -134,6 +142,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkRange from '@/components/MkRange.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@ -141,43 +150,36 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { instance } from '@/instance';
 import { useRouter } from '@/router';

+const ROLE_POLICIES = [
+	'gtlAvailable',
+	'ltlAvailable',
+	'canPublicNote',
+	'canInvite',
+	'canManageCustomEmojis',
+	'driveCapacityMb',
+	'pinLimit',
+	'antennaLimit',
+	'wordMuteLimit',
+	'webhookLimit',
+	'clipLimit',
+	'noteEachClipsLimit',
+	'userListLimit',
+	'userEachUserListsLimit',
+	'rateLimitFactor',
+] as const;
+
 const router = useRouter();

 const roles = await os.api('admin/roles/list');

-let options_gtlAvailable = $ref(instance.baseRole.gtlAvailable);
-let options_ltlAvailable = $ref(instance.baseRole.ltlAvailable);
-let options_canPublicNote = $ref(instance.baseRole.canPublicNote);
-let options_canInvite = $ref(instance.baseRole.canInvite);
-let options_canManageCustomEmojis = $ref(instance.baseRole.canManageCustomEmojis);
-let options_driveCapacityMb = $ref(instance.baseRole.driveCapacityMb);
-let options_pinLimit = $ref(instance.baseRole.pinLimit);
-let options_antennaLimit = $ref(instance.baseRole.antennaLimit);
-let options_wordMuteLimit = $ref(instance.baseRole.wordMuteLimit);
-let options_webhookLimit = $ref(instance.baseRole.webhookLimit);
-let options_clipLimit = $ref(instance.baseRole.clipLimit);
-let options_noteEachClipsLimit = $ref(instance.baseRole.noteEachClipsLimit);
-let options_userListLimit = $ref(instance.baseRole.userListLimit);
-let options_userEachUserListsLimit = $ref(instance.baseRole.userEachUserListsLimit);
+const policies = reactive<Record<typeof ROLE_POLICIES[number], any>>({});
+for (const ROLE_POLICY of ROLE_POLICIES) {
+	policies[ROLE_POLICY] = instance.policies[ROLE_POLICY];
+}

 async function updateBaseRole() {
-	await os.apiWithDialog('admin/roles/update-default-role-override', {
-		options: {
-			gtlAvailable: options_gtlAvailable,
-			ltlAvailable: options_ltlAvailable,
-			canPublicNote: options_canPublicNote,
-			canInvite: options_canInvite,
-			canManageCustomEmojis: options_canManageCustomEmojis,
-			driveCapacityMb: options_driveCapacityMb,
-			pinLimit: options_pinLimit,
-			antennaLimit: options_antennaLimit,
-			wordMuteLimit: options_wordMuteLimit,
-			webhookLimit: options_webhookLimit,
-			clipLimit: options_clipLimit,
-			noteEachClipsLimit: options_noteEachClipsLimit,
-			userListLimit: options_userListLimit,
-			userEachUserListsLimit: options_userEachUserListsLimit,
-		},
+	await os.apiWithDialog('admin/roles/update-default-policies', {
+		policies,
 	});
 }

--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@ -38,7 +38,8 @@
 					</div>
 					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+						<template #icon><i class="ti ti-clock"></i></template>
+						<template #header>{{ i18n.ts.recentPosts }}</template>
 						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 							<div class="sdrarzaf">
 								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@ -37,20 +37,16 @@ const emit = defineEmits<{
 let id: any = $ref(props.modelValue.note);
 let note: any = $ref(null);

-watch(id, async () => {
+watch($$(id), async () => {
 	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		emit('update:modelValue', {
-			...props.modelValue,
-			note: (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop(),
-		});
-	} else {
-		emit('update:modelValue', {
-			...props.modelValue,
-			note: id,
-		});
+		id = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
 	}

-	note = await os.api('notes/show', { noteId: props.modelValue.note });
+	emit('update:modelValue', {
+		...props.modelValue,
+		note: id,
+	});
+	note = await os.api('notes/show', { noteId: id });
 }, {
 	immediate: true,
 });
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@ -49,7 +49,8 @@
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
-					<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+					<template #icon><i class="ti ti-clock"></i></template>
+					<template #header>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
 					</MkPagination>
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@ -35,8 +35,8 @@ import { definePageMetadata } from '@/scripts/page-metadata';

 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));

-const isLocalTimelineAvailable = ($i == null && instance.baseRole.ltlAvailable) || ($i != null && $i.role.ltlAvailable);
-const isGlobalTimelineAvailable = ($i == null && instance.baseRole.gtlAvailable) || ($i != null && $i.role.gtlAvailable);
+const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);
+const isGlobalTimelineAvailable = ($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable);
 const keymap = {
 	't': focus,
 };
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@ -86,16 +86,28 @@
 					</div>
 				</FormSection>
 			</div>
+
 			<div v-else-if="tab === 'moderation'" class="_gaps_m">
 				<MkSwitch v-model="suspended" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</MkSwitch>
+
 				<div>
 					<MkButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
 					<MkButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</MkButton>
 				</div>
+
+				<MkFolder>
+					<template #icon><i class="ti ti-license"></i></template>
+					<template #label>{{ i18n.ts._role.policies }}</template>
+					<div class="_gaps">
+						<div v-for="policy in Object.keys(info.policies)" :key="policy">
+							{{ policy }} ... {{ info.policies[policy] }}
+						</div>
+					</div>
+				</MkFolder>
+
 				<MkFolder>
 					<template #icon><i class="ti ti-badges"></i></template>
 					<template #label>{{ i18n.ts.roles }}</template>
-
 					<div class="_gaps">
 						<MkButton v-if="user.host == null && iAmModerator" primary rounded @click="assignRole"><i class="ti ti-plus"></i> {{ i18n.ts.assign }}</MkButton>

@ -105,6 +117,7 @@
 						</div>
 					</div>
 				</MkFolder>
+
 				<MkFolder>
 					<template #icon><i class="ti ti-password"></i></template>
 					<template #label>IP</template>
@ -117,16 +130,18 @@
 						</div>
 					</template>
 				</MkFolder>
+
 				<MkFolder>
 					<template #icon><i class="ti ti-cloud"></i></template>
 					<template #label>{{ i18n.ts.files }}</template>
-
 					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
 				</MkFolder>
+
 				<MkTextarea v-model="moderationNote" manual-save>
 					<template #label>Moderation note</template>
 				</MkTextarea>
 			</div>
+
 			<div v-else-if="tab === 'chart'" class="_gaps_m">
 				<div class="cmhjzshm">
 					<div class="selects">
@ -142,6 +157,7 @@
 					</div>
 				</div>
 			</div>
+
 			<div v-else-if="tab === 'raw'" class="_gaps_m">
 				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
 				</MkObjectView>
--- a/packages/frontend/src/pages/user/index.activity.vue
+++ b/packages/frontend/src/pages/user/index.activity.vue
@ -1,8 +1,9 @@
 <template>
 <MkContainer>
-	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
-	<template #func>
-		<button class="_button" @click="showMenu">
+	<template #icon><i class="ti ti-chart-line"></i></template>
+	<template #header>{{ $ts.activity }}</template>
+	<template #func="{ buttonStyleClass }">
+		<button class="_button" :class="buttonStyleClass" @click="showMenu">
 			<i class="ti ti-dots"></i>
 		</button>
 	</template>
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@ -1,19 +1,20 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
-	<div class="ujigsodd">
+	<template #icon><i class="ti ti-photo"></i></template>
+	<template #header>{{ $ts.images }}</template>
+	<div :class="$style.root">
 		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && images.length > 0" class="stream">
+		<div v-if="!fetching && images.length > 0" :class="$style.stream">
 			<MkA
 				v-for="image in images"
 				:key="image.note.id + image.file.id"
-				class="img"
+				:class="$style.img"
 				:to="notePage(image.note)"
 			>
 				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
 			</MkA>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+		<p v-if="!fetching && images.length == 0" :class="$style.empty">{{ $ts.nothing }}</p>
 	</div>
 </MkContainer>
 </template>
@ -73,30 +74,26 @@ onMounted(() => {
 });
 </script>

-<style lang="scss" scoped>
-.ujigsodd {
+<style lang="scss" module>
+.root {
 	padding: 8px;
+}

-	> .stream {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-		grid-gap: 6px;
+.stream {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	grid-gap: 6px;
+}

-		> .img {
-			height: 128px;
-			border-radius: 6px;
-			overflow: clip;
-		}
-	}
+.img {
+	height: 128px;
+	border-radius: 6px;
+	overflow: clip;
+}

-	> .empty {
-		margin: 0;
-		padding: 16px;
-		text-align: center;
-
-		> i {
-			margin-right: 4px;
-		}
-	}
+.empty {
+	margin: 0;
+	padding: 16px;
+	text-align: center;
 }
 </style>
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@ -17,7 +17,7 @@
 }

 ::selection {
-	color: #fff;
+	color: var(--fgOnAccent);
 	background-color: var(--accent);
 }

@ -150,10 +150,8 @@ hr {
 }

 ._ghost {
-	&, * {
-		@extend ._noSelect;
-		pointer-events: none;
-	}
+	@extend ._noSelect;
+	pointer-events: none;
 }

 ._modalBg {
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@ -47,7 +47,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 			to: '/clicker',
 			text: '🍪👈',
 			icon: 'ti ti-cookie',
-		}, ($i && ($i.isAdmin || $i.role.canInvite) && instance.disableRegistration) ? {
+		}, ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) ? {
 			text: i18n.ts.invite,
 			icon: 'ti ti-user-plus',
 			action: () => {
@ -63,7 +63,7 @@ export function openInstanceMenu(ev: MouseEvent) {
 					});
 				});
 			},
-		} : undefined, ($i && ($i.isAdmin || $i.role.canManageCustomEmojis)) ? {
+		} : undefined, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
 			type: 'link',
 			to: '/custom-emojis-manager',
 			text: i18n.ts.manageCustomEmojis,
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@ -1,9 +1,9 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
-	<div class="command">
-		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
-		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" :class="$style.root" class="_panel _shadow" @click="resetDisconnected">
+	<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.disconnectedFromServer }}</div>
+	<div :class="$style.command" class="_buttons">
+		<MkButton :class="$style.commandButton" small primary @click="reload">{{ i18n.ts.reload }}</MkButton>
+		<MkButton :class="$style.commandButton" small>{{ i18n.ts.doNothing }}</MkButton>
 	</div>
 </div>
 </template>
@ -12,6 +12,10 @@
 import { onUnmounted } from 'vue';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+
+const zIndex = os.claimZIndex('high');

 let hasDisconnected = $ref(false);

@ -34,28 +38,22 @@ onUnmounted(() => {
 });
 </script>

-<style lang="scss" scoped>
-.nsbbhtug {
+<style lang="scss" module>
+.root {
 	position: fixed;
-	z-index: 16385;
+	z-index: v-bind(zIndex);
 	bottom: calc(var(--minBottomSpacing) + var(--margin));
 	right: var(--margin);
 	margin: 0;
-	padding: 6px 12px;
+	padding: 12px;
 	font-size: 0.9em;
-	color: #fff;
-	background: #000;
-	opacity: 0.8;
-	border-radius: 4px;
 	max-width: 320px;
+}

-	> .command {
-		display: flex;
-		justify-content: space-around;
+.command {
+	margin-top: 8px;
+}

-		> button {
-			padding: 0.7em;
-		}
-	}
+.commandButton {
 }
 </style>
--- a/packages/frontend/src/widgets/WidgetActivity.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@ -1,7 +1,8 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity data-cy-mkw-activity">
+	<template #icon><i class="ti ti-chart-line"></i></template>
+	<template #header>{{ i18n.ts._widgets.activity }}</template>
+	<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>

 	<div>
 		<MkLoading v-if="fetching"/>
--- a/Show More
+++ b/Show More