From 41aa0c8efebf2e443ba7372762948b5e56cfd990 Mon Sep 17 00:00:00 2001
From: 果物リン <fruitriin@riinswork.space>
Date: Thu, 9 Oct 2025 09:29:47 +0900
Subject: [カスタム絵文字beta]MacのCmdキー対応とCtrl/Cmd+Arrowキー対応 (#16621)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [カスタム絵文字beta]MacのCmdキー対応とCtrl/Cmd+Arrowキー対応

* Update packages/frontend/src/components/grid/MkGrid.vue

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

---------

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
---
 packages/frontend/src/components/grid/MkGrid.vue | 262 +++++++++++------------
 1 file changed, 122 insertions(+), 140 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/grid/MkGrid.vue b/packages/frontend/src/components/grid/MkGrid.vue
index a175485a7e..96d9e35773 100644
--- a/packages/frontend/src/components/grid/MkGrid.vue
+++ b/packages/frontend/src/components/grid/MkGrid.vue
@@ -71,7 +71,7 @@ import {
 import * as os from '@/os.js';
 import { createColumn } from '@/components/grid/column.js';
 import { createRow, defaultGridRowSetting, resetRow } from '@/components/grid/row.js';
-import { handleKeyEvent } from '@/utility/key-event.js';
+import { makeHotkey } from '@/utility/hotkey.js';
 
 type RowHolder = {
 	row: GridRow,
@@ -289,161 +289,143 @@ function onKeyDown(ev: KeyboardEvent) {
 			const max = availableBounds.value;
 			const bounds = rangedBounds.value;
 
-			handleKeyEvent(ev, [
-				{
-					code: 'Delete', handler: () => {
-						if (rangedRows.value.length > 0) {
-							if (rowSetting.events.delete) {
-								rowSetting.events.delete(rangedRows.value);
-							}
-						} else {
-							const context = createContext();
-							removeDataFromGrid(context, (cell) => {
-								emitCellValue(cell, undefined);
-							});
+			makeHotkey({
+				'delete': () => {
+					if (rangedRows.value.length > 0) {
+						if (rowSetting.events.delete) {
+							rowSetting.events.delete(rangedRows.value);
 						}
-					},
-				},
-				{
-					code: 'KeyC', modifiers: ['Control'], handler: () => {
-						const context = createContext();
-						copyGridDataToClipboard(data.value, context);
-					},
-				},
-				{
-					code: 'KeyV', modifiers: ['Control'], handler: async () => {
-						const _cells = cells.value;
+					} else {
 						const context = createContext();
-						await pasteToGridFromClipboard(context, (row, col, parsedValue) => {
-							emitCellValue(_cells[row.index].cells[col.index], parsedValue);
+						removeDataFromGrid(context, (cell) => {
+							emitCellValue(cell, undefined);
 						});
-					},
+					}
 				},
-				{
-					code: 'ArrowRight', modifiers: ['Control', 'Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: { col: selectedCellAddress.col, row: bounds.leftTop.row },
-							rightBottom: { col: max.rightBottom.col, row: bounds.rightBottom.row },
-						});
-					},
+				'ctrl+c|meta+c': () => {
+					const context = createContext();
+					copyGridDataToClipboard(data.value, context);
 				},
-				{
-					code: 'ArrowLeft', modifiers: ['Control', 'Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: { col: max.leftTop.col, row: bounds.leftTop.row },
-							rightBottom: { col: selectedCellAddress.col, row: bounds.rightBottom.row },
-						});
-					},
+				'ctrl+v|meta+v': async () => {
+					const _cells = cells.value;
+					const context = createContext();
+					await pasteToGridFromClipboard(context, (row, col, parsedValue) => {
+						emitCellValue(_cells[row.index].cells[col.index], parsedValue);
+					});
 				},
-				{
-					code: 'ArrowUp', modifiers: ['Control', 'Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: { col: bounds.leftTop.col, row: max.leftTop.row },
-							rightBottom: { col: bounds.rightBottom.col, row: selectedCellAddress.row },
-						});
-					},
+				'ctrl+shift+right|meta+shift+right': () => {
+					updateSelectionRange({
+						leftTop: { col: selectedCellAddress.col, row: bounds.leftTop.row },
+						rightBottom: { col: max.rightBottom.col, row: bounds.rightBottom.row },
+					});
 				},
-				{
-					code: 'ArrowDown', modifiers: ['Control', 'Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: { col: bounds.leftTop.col, row: selectedCellAddress.row },
-							rightBottom: { col: bounds.rightBottom.col, row: max.rightBottom.row },
-						});
-					},
+				'ctrl+shift+left|meta+shift+left': () => {
+					updateSelectionRange({
+						leftTop: { col: max.leftTop.col, row: bounds.leftTop.row },
+						rightBottom: { col: selectedCellAddress.col, row: bounds.rightBottom.row },
+					});
 				},
-				{
-					code: 'ArrowRight', modifiers: ['Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: {
-								col: bounds.leftTop.col < selectedCellAddress.col
-									? bounds.leftTop.col + 1
-									: selectedCellAddress.col,
-								row: bounds.leftTop.row,
-							},
-							rightBottom: {
-								col: (bounds.rightBottom.col > selectedCellAddress.col || bounds.leftTop.col === selectedCellAddress.col)
-									? bounds.rightBottom.col + 1
-									: selectedCellAddress.col,
-								row: bounds.rightBottom.row,
-							},
-						});
-					},
+				'ctrl+shift+up|meta+shift+up': () => {
+					updateSelectionRange({
+						leftTop: { col: bounds.leftTop.col, row: max.leftTop.row },
+						rightBottom: { col: bounds.rightBottom.col, row: selectedCellAddress.row },
+					});
 				},
-				{
-					code: 'ArrowLeft', modifiers: ['Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: {
-								col: (bounds.leftTop.col < selectedCellAddress.col || bounds.rightBottom.col === selectedCellAddress.col)
-									? bounds.leftTop.col - 1
-									: selectedCellAddress.col,
-								row: bounds.leftTop.row,
-							},
-							rightBottom: {
-								col: bounds.rightBottom.col > selectedCellAddress.col
-									? bounds.rightBottom.col - 1
-									: selectedCellAddress.col,
-								row: bounds.rightBottom.row,
-							},
-						});
-					},
+				'ctrl+shift+down|meta+shift+down': () => {
+					updateSelectionRange({
+						leftTop: { col: bounds.leftTop.col, row: selectedCellAddress.row },
+						rightBottom: { col: bounds.rightBottom.col, row: max.rightBottom.row },
+					});
 				},
-				{
-					code: 'ArrowUp', modifiers: ['Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: {
-								col: bounds.leftTop.col,
-								row: (bounds.leftTop.row < selectedCellAddress.row || bounds.rightBottom.row === selectedCellAddress.row)
-									? bounds.leftTop.row - 1
-									: selectedCellAddress.row,
-							},
-							rightBottom: {
-								col: bounds.rightBottom.col,
-								row: bounds.rightBottom.row > selectedCellAddress.row
-									? bounds.rightBottom.row - 1
-									: selectedCellAddress.row,
-							},
-						});
-					},
+				'ctrl+right|meta+right': () => {
+					selectionCell({ col: max.rightBottom.col, row: selectedCellAddress.row });
 				},
-				{
-					code: 'ArrowDown', modifiers: ['Shift'], handler: () => {
-						updateSelectionRange({
-							leftTop: {
-								col: bounds.leftTop.col,
-								row: bounds.leftTop.row < selectedCellAddress.row
-									? bounds.leftTop.row + 1
-									: selectedCellAddress.row,
-							},
-							rightBottom: {
-								col: bounds.rightBottom.col,
-								row: (bounds.rightBottom.row > selectedCellAddress.row || bounds.leftTop.row === selectedCellAddress.row)
-									? bounds.rightBottom.row + 1
-									: selectedCellAddress.row,
-							},
-						});
-					},
+				'ctrl+left|meta+left': () => {
+					selectionCell({ col: max.leftTop.col, row: selectedCellAddress.row });
+				},
+				'ctrl+up|meta+up': () => {
+					selectionCell({ col: selectedCellAddress.col, row: max.leftTop.row });
+				},
+				'ctrl+down|meta+down': () => {
+					selectionCell({ col: selectedCellAddress.col, row: max.rightBottom.row });
+				},
+				'shift+right': () => {
+					updateSelectionRange({
+						leftTop: {
+							col: bounds.leftTop.col < selectedCellAddress.col
+								? bounds.leftTop.col + 1
+								: selectedCellAddress.col,
+							row: bounds.leftTop.row,
+						},
+						rightBottom: {
+							col: (bounds.rightBottom.col > selectedCellAddress.col || bounds.leftTop.col === selectedCellAddress.col)
+								? bounds.rightBottom.col + 1
+								: selectedCellAddress.col,
+							row: bounds.rightBottom.row,
+						},
+					});
+				},
+				'shift+left': () => {
+					updateSelectionRange({
+						leftTop: {
+							col: (bounds.leftTop.col < selectedCellAddress.col || bounds.rightBottom.col === selectedCellAddress.col)
+								? bounds.leftTop.col - 1
+								: selectedCellAddress.col,
+							row: bounds.leftTop.row,
+						},
+						rightBottom: {
+							col: bounds.rightBottom.col > selectedCellAddress.col
+								? bounds.rightBottom.col - 1
+								: selectedCellAddress.col,
+							row: bounds.rightBottom.row,
+						},
+					});
+				},
+				'shift+up': () => {
+					updateSelectionRange({
+						leftTop: {
+							col: bounds.leftTop.col,
+							row: (bounds.leftTop.row < selectedCellAddress.row || bounds.rightBottom.row === selectedCellAddress.row)
+								? bounds.leftTop.row - 1
+								: selectedCellAddress.row,
+						},
+						rightBottom: {
+							col: bounds.rightBottom.col,
+							row: bounds.rightBottom.row > selectedCellAddress.row
+								? bounds.rightBottom.row - 1
+								: selectedCellAddress.row,
+						},
+					});
+				},
+				'shift+down': () => {
+					updateSelectionRange({
+						leftTop: {
+							col: bounds.leftTop.col,
+							row: bounds.leftTop.row < selectedCellAddress.row
+								? bounds.leftTop.row + 1
+								: selectedCellAddress.row,
+						},
+						rightBottom: {
+							col: bounds.rightBottom.col,
+							row: (bounds.rightBottom.row > selectedCellAddress.row || bounds.leftTop.row === selectedCellAddress.row)
+								? bounds.rightBottom.row + 1
+								: selectedCellAddress.row,
+						},
+					});
 				},
-				{
-					code: 'ArrowDown', handler: () => {
-						selectionCell({ col: selectedCellAddress.col, row: selectedCellAddress.row + 1 });
-					},
+				'down': () => {
+					selectionCell({ col: selectedCellAddress.col, row: selectedCellAddress.row + 1 });
 				},
-				{
-					code: 'ArrowUp', handler: () => {
-						selectionCell({ col: selectedCellAddress.col, row: selectedCellAddress.row - 1 });
-					},
+				'up': () => {
+					selectionCell({ col: selectedCellAddress.col, row: selectedCellAddress.row - 1 });
 				},
-				{
-					code: 'ArrowRight', handler: () => {
-						selectionCell({ col: selectedCellAddress.col + 1, row: selectedCellAddress.row });
-					},
+				'right': () => {
+					selectionCell({ col: selectedCellAddress.col + 1, row: selectedCellAddress.row });
 				},
-				{
-					code: 'ArrowLeft', handler: () => {
-						selectionCell({ col: selectedCellAddress.col - 1, row: selectedCellAddress.row });
-					},
+				'left': () => {
+					selectionCell({ col: selectedCellAddress.col - 1, row: selectedCellAddress.row });
 				},
-			]);
+			}, [])(ev);
 
 			break;
 		}
-- 
cgit v1.2.3-freya


From acd35ef96ca461604219272048f8d40ff3e0c482 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 20 Oct 2025 14:48:14 +0900
Subject: add note

---
 packages/frontend/src/components/MkUploaderDialog.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index ce098d71e4..8849fa447d 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -33,6 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<!-- クライアントで検出するMIME typeとサーバーで検出するMIME typeが異なる場合があり、混乱の元になるのでとりあえず隠しとく -->
 			<!-- https://github.com/misskey-dev/misskey/issues/16091 -->
+			<!-- https://github.com/misskey-dev/misskey/issues/16663 -->
 			<!--<div>{{ i18n.ts._uploader.allowedTypes }}: {{ $i.policies.uploadableFileTypes.join(', ') }}</div>-->
 		</div>
 	</div>
-- 
cgit v1.2.3-freya


From 8714945ec9deb88e1af6164b9290c9cf7e633aab Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 20 Oct 2025 15:05:23 +0900
Subject: fix(frontend): ウォーターマーク配置のエフェクトが壊れている問題を修正
 (#16662)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): ウォーターマーク配置のエフェクトが壊れている問題を修正

* enhance: add settings for noBoundingBoxExpansion

* Update Changelog

* fix

* perf: ウォーターマークのrepeatをWRAP属性で制御するように

* fix: ウォーターマークをrepeatした際に回転や拡大縮小の中心が「位置」設定を考慮しないのを修正

* fix: ウォーターマークをrepeatした際にマージンが各ウォーターマークごとのマージンとなっていない問題を修正

* fix: リピートモード時の拡大縮小の原点が、アライメントの設定にかかわらず左上になる問題を修正

* enhance: preserveBoundingRect の翻訳文字を変更

* fix: remove description

* fix

* fix: 回転の向きが逆になっているのを修正

* fix: マージンは元画像の大きさに対する割合で算出するように

* Update watermarkPlacement.ts

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 CHANGELOG.md                                       |   4 +
 locales/index.d.ts                                 |   4 +
 locales/ja-JP.yml                                  |   1 +
 .../components/MkWatermarkEditorDialog.Layer.vue   |  24 +-
 .../src/components/MkWatermarkEditorDialog.vue     |   2 +
 .../image-effector/fxs/watermarkPlacement.ts       | 256 ++++++++++++++-------
 packages/frontend/src/utility/watermark.ts         |   4 +
 7 files changed, 208 insertions(+), 87 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e024a3043..e74b950467 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@
 - Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
 - Fix: ナビゲーションバーの設定で削除した項目をその場で再追加できない問題を修正
 - Fix: ロールポリシーによりダイレクトメッセージが無効化されている際のデッキのダイレクトメッセージカラムの挙動を改善
+- Fix: ウォーターマークの各種挙動修正
+  - ウォーターマークを回転させると歪む問題を修正
+  - ウォーターマークを敷き詰めると上下左右反転した画像/文字が表示される問題を修正
+  - ウォーターマークを回転させた際に画面からはみ出た部分を考慮できるように
 
 ### Server
 -
diff --git a/locales/index.d.ts b/locales/index.d.ts
index d79db121db..96d6c890a8 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12345,6 +12345,10 @@ export interface Locale extends ILocale {
          * 敷き詰める
          */
         "repeat": string;
+        /**
+         * 回転時はみ出ないように調整する
+         */
+        "preserveBoundingRect": string;
         /**
          * 不透明度
          */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5d1c37740c..8e935b5d9e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3305,6 +3305,7 @@ _watermarkEditor:
   title: "ウォーターマークの編集"
   cover: "全体に被せる"
   repeat: "敷き詰める"
+  preserveBoundingRect: "回転時はみ出ないように調整する"
   opacity: "不透明度"
   scale: "サイズ"
   text: "テキスト"
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
index 288293db3f..b34181e5cc 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.Layer.vue
@@ -65,6 +65,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSwitch v-model="layer.repeat">
 			<template #label>{{ i18n.ts._watermarkEditor.repeat }}</template>
 		</MkSwitch>
+
+		<MkSwitch v-model="layerPreserveBoundingRect">
+			<template #label>{{ i18n.ts._watermarkEditor.preserveBoundingRect }}</template>
+		</MkSwitch>
 	</template>
 
 	<template v-else-if="layer.type === 'image'">
@@ -129,6 +133,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSwitch v-model="layer.cover">
 			<template #label>{{ i18n.ts._watermarkEditor.cover }}</template>
 		</MkSwitch>
+
+		<MkSwitch v-model="layerPreserveBoundingRect">
+			<template #label>{{ i18n.ts._watermarkEditor.preserveBoundingRect }}</template>
+		</MkSwitch>
 	</template>
 
 	<template v-else-if="layer.type === 'qr'">
@@ -335,7 +343,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { WatermarkPreset } from '@/utility/watermark.js';
 import { i18n } from '@/i18n.js';
@@ -351,6 +359,20 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 
 const layer = defineModel<WatermarkPreset['layers'][number]>('layer', { required: true });
 
+const layerPreserveBoundingRect = computed({
+	get: () => {
+		if (layer.value.type === 'text' || layer.value.type === 'image') {
+			return !layer.value.noBoundingBoxExpansion;
+		}
+		return false;
+	},
+	set: (v: boolean) => {
+		if (layer.value.type === 'text' || layer.value.type === 'image') {
+			layer.value.noBoundingBoxExpansion = !v;
+		}
+	},
+});
+
 const driveFile = ref<Misskey.entities.DriveFile | null>(null);
 const driveFileError = ref(false);
 onMounted(async () => {
diff --git a/packages/frontend/src/components/MkWatermarkEditorDialog.vue b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
index 0d0488d9bc..3b3f20d8d1 100644
--- a/packages/frontend/src/components/MkWatermarkEditorDialog.vue
+++ b/packages/frontend/src/components/MkWatermarkEditorDialog.vue
@@ -90,6 +90,7 @@ function createTextLayer(): WatermarkPreset['layers'][number] {
 		angle: 0,
 		opacity: 0.75,
 		repeat: false,
+		noBoundingBoxExpansion: false,
 	};
 }
 
@@ -104,6 +105,7 @@ function createImageLayer(): WatermarkPreset['layers'][number] {
 		angle: 0,
 		opacity: 0.75,
 		repeat: false,
+		noBoundingBoxExpansion: false,
 		cover: false,
 	};
 }
diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
index f79acb44b0..944e790792 100644
--- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
@@ -9,80 +9,143 @@ const shader = `#version 300 es
 precision mediump float;
 
 const float PI = 3.141592653589793;
-const float TWO_PI = 6.283185307179586;
-const float HALF_PI = 1.5707963267948966;
-
-in vec2 in_uv;
-uniform sampler2D in_texture;
-uniform vec2 in_resolution;
-uniform sampler2D u_texture_watermark;
-uniform vec2 u_resolution_watermark;
-uniform float u_scale;
-uniform float u_angle;
-uniform float u_opacity;
-uniform bool u_repeat;
-uniform int u_alignX; // 0: left, 1: center, 2: right
-uniform int u_alignY; // 0: top, 1: center, 2: bottom
-uniform float u_alignMargin;
-uniform int u_fitMode; // 0: contain, 1: cover
+
+in vec2 in_uv;                       // 0..1
+uniform sampler2D in_texture;        // 背景
+uniform vec2 in_resolution;          // 出力解像度(px)
+
+uniform sampler2D u_watermark;       // ウォーターマーク
+uniform vec2 u_wmResolution;         // ウォーターマーク元解像度(px)
+
+uniform float u_opacity;             // 0..1
+uniform float u_scale;               // watermarkのスケール
+uniform float u_angle;               // -1..1 (PI倍)
+uniform bool u_cover;                // cover基準 or fit基準
+uniform bool u_repeat;               // タイル敷き詰め
+uniform int u_alignX;                // 0:left 1:center 2:right
+uniform int u_alignY;                // 0:top 1:center 2:bottom
+uniform float u_margin;              // 余白(比率)
+uniform float u_repeatMargin;        // 敷き詰め時の余白(比率)
+uniform bool u_noBBoxExpansion;      // 回転時のBounding Box拡張を抑止
+uniform bool u_wmEnabled;            // watermark有効
+
 out vec4 out_color;
 
-void main() {
-	vec4 in_color = texture(in_texture, in_uv);
-	float in_x_ratio = max(in_resolution.x / in_resolution.y, 1.0);
-	float in_y_ratio = max(in_resolution.y / in_resolution.x, 1.0);
-
-	bool contain = u_fitMode == 0;
-
-	float x_ratio = u_resolution_watermark.x / in_resolution.x;
-	float y_ratio = u_resolution_watermark.y / in_resolution.y;
-
-	float aspect_ratio = contain ?
-		(min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) :
-		(max(x_ratio, y_ratio) / min(x_ratio, y_ratio));
-
-	float x_scale = contain ?
-		(x_ratio > y_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) :
-		(x_ratio > y_ratio ? aspect_ratio * u_scale : 1.0 * u_scale);
-
-	float y_scale = contain ?
-		(y_ratio > x_ratio ? 1.0 * u_scale : aspect_ratio * u_scale) :
-		(y_ratio > x_ratio ? aspect_ratio * u_scale : 1.0 * u_scale);
-
-	float x_offset = u_alignX == 0 ? x_scale / 2.0 : u_alignX == 2 ? 1.0 - (x_scale / 2.0) : 0.5;
-	float y_offset = u_alignY == 0 ? y_scale / 2.0 : u_alignY == 2 ? 1.0 - (y_scale / 2.0) : 0.5;
-
-	x_offset += (u_alignX == 0 ? 1.0 : u_alignX == 2 ? -1.0 : 0.0) * u_alignMargin;
-	y_offset += (u_alignY == 0 ? 1.0 : u_alignY == 2 ? -1.0 : 0.0) * u_alignMargin;
-
-	float angle = -(u_angle * PI);
-	vec2 center = vec2(x_offset, y_offset);
-	//vec2 centeredUv = (in_uv - center) * vec2(in_x_ratio, in_y_ratio);
-	vec2 centeredUv = (in_uv - center);
-	vec2 rotatedUV = vec2(
-		centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
-		centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
-	) + center;
-
-	// trim
-	if (!u_repeat) {
-		bool isInside = rotatedUV.x > x_offset - (x_scale / 2.0) && rotatedUV.x < x_offset + (x_scale / 2.0) &&
-										rotatedUV.y > y_offset - (y_scale / 2.0) && rotatedUV.y < y_offset + (y_scale / 2.0);
-		if (!isInside) {
-			out_color = in_color;
-			return;
+mat2 rot(float a) {
+	float c = cos(a), s = sin(a);
+	return mat2(c, -s, s, c);
+}
+
+// cover/fitとscaleから、最終的なサイズ(px)を計算
+vec2 computeWmSize(vec2 outSize, vec2 wmSize, bool cover, float scale) {
+	float wmAspect = wmSize.x / wmSize.y;
+	float outAspect = outSize.x / outSize.y;
+	vec2 size;
+	if (cover) {
+		if (wmAspect >= outAspect) {
+			size.y = outSize.y * scale;
+			size.x = size.y * wmAspect;
+		} else {
+			size.x = outSize.x * scale;
+			size.y = size.x / wmAspect;
+		}
+	} else {
+		if (wmAspect >= outAspect) {
+			size.x = outSize.x * scale;
+			size.y = size.x / wmAspect;
+		} else {
+			size.y = outSize.y * scale;
+			size.x = size.y * wmAspect;
 		}
 	}
+	return size;
+}
+
+void main() {
+	vec2 outSize = in_resolution;
+	vec2 p = in_uv * outSize; // 出力のピクセル座標
+	vec4 base = texture(in_texture, in_uv);
+
+	if (!u_wmEnabled) {
+		out_color = base;
+		return;
+	}
+
+	float theta = u_angle * PI; // ラジアン
+	vec2 wmSize = computeWmSize(outSize, u_wmResolution, u_cover, u_scale);
+	vec2 margin = u_repeat ? wmSize * u_repeatMargin : outSize * u_margin;
+
+	// アライメントに基づく回転中心を計算
+	float rotateX = 0.0;
+	float rotateY = 0.0;
+	if (abs(theta) > 1e-6 && !u_noBBoxExpansion) {
+		rotateX = abs(abs(wmSize.x * cos(theta)) + abs(wmSize.y * sin(theta)) - wmSize.x) * 0.5;
+		rotateY = abs(abs(wmSize.x * sin(theta)) + abs(wmSize.y * cos(theta)) - wmSize.y) * 0.5;
+	}
+
+	float x;
+	if (u_alignX == 1) {
+		x = (outSize.x - wmSize.x) * 0.5;
+	} else if (u_alignX == 0) {
+		x = rotateX + margin.x;
+	} else {
+		x = outSize.x - wmSize.x - margin.x - rotateX;
+	}
+
+	float y;
+	if (u_alignY == 1) {
+		y = (outSize.y - wmSize.y) * 0.5;
+	} else if (u_alignY == 0) {
+		y = rotateY + margin.y;
+	} else {
+		y = outSize.y - wmSize.y - margin.y - rotateY;
+	}
+
+	vec2 rectMin = vec2(x, y);
+	vec2 rectMax = rectMin + wmSize;
+	vec2 rectCenter = (rectMin + rectMax) * 0.5;
 
-	vec4 watermark_color = texture(u_texture_watermark, vec2(
-		(rotatedUV.x - (x_offset - (x_scale / 2.0))) / x_scale,
-		(rotatedUV.y - (y_offset - (y_scale / 2.0))) / y_scale
-	));
+	vec4 wmCol = vec4(0.0);
 
-	out_color.r = mix(in_color.r, watermark_color.r, u_opacity * watermark_color.a);
-	out_color.g = mix(in_color.g, watermark_color.g, u_opacity * watermark_color.a);
-	out_color.b = mix(in_color.b, watermark_color.b, u_opacity * watermark_color.a);
-	out_color.a = in_color.a * (1.0 - u_opacity * watermark_color.a) + watermark_color.a * u_opacity;
+	if (u_repeat) {
+		// アライメントに基づく中心で回転
+		vec2 q = rectCenter + rot(theta) * (p - rectCenter);
+
+		// タイルグリッドの原点をrectMin（アライメント位置）に設定
+		vec2 gridOrigin = rectMin - margin;
+		vec2 qFromOrigin = q - gridOrigin;
+
+		// タイルサイズ(ウォーターマーク + マージン)で正規化
+		vec2 tile = wmSize + margin * 2.0;
+		vec2 tileUv = qFromOrigin / tile;
+
+		// タイル内のローカル座標(0..1)を取得
+		vec2 localUv = fract(tileUv);
+
+		// ローカル座標をピクセル単位に変換
+		vec2 localPos = localUv * tile;
+
+		// マージン領域内かチェック
+		bool inMargin = any(lessThan(localPos, margin)) || any(greaterThanEqual(localPos, margin + wmSize));
+
+		if (!inMargin) {
+			// ウォーターマーク領域内: UV座標を計算
+			vec2 uvWm = (localPos - margin) / wmSize;
+			wmCol = texture(u_watermark, uvWm);
+		}
+		// マージン領域の場合は透明(wmCol = vec4(0.0))のまま
+	} else {
+		// アライメントと回転に従い一枚だけ描画
+		vec2 q = rectCenter + rot(theta) * (p - rectCenter);
+		bool inside = all(greaterThanEqual(q, rectMin)) && all(lessThan(q, rectMax));
+		if (inside) {
+			vec2 uvWm = (q - rectMin) / wmSize;
+			wmCol = texture(u_watermark, uvWm);
+		}
+	}
+
+	float a = clamp(wmCol.a * u_opacity, 0.0, 1.0);
+	out_color = mix(base, vec4(wmCol.rgb, 1.0), a);
 }
 `;
 
@@ -90,7 +153,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
 	id: 'watermarkPlacement',
 	name: '(internal)',
 	shader,
-	uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'alignMargin', 'fitMode'] as const,
+	uniforms: ['opacity', 'scale', 'angle', 'cover', 'repeat', 'alignX', 'alignY', 'margin', 'repeatMargin', 'noBBoxExpansion', 'wmResolution', 'wmEnabled', 'watermark'] as const,
 	params: {
 		cover: {
 			type: 'boolean',
@@ -125,29 +188,50 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
 			max: 1.0,
 			step: 0.01,
 		},
+		noBoundingBoxExpansion: {
+			type: 'boolean',
+			default: false,
+		},
 		watermark: {
 			type: 'texture',
 			default: null,
 		},
 	},
 	main: ({ gl, u, params, textures }) => {
-		if (textures.watermark == null) {
-			return;
-		}
-
-		gl.activeTexture(gl.TEXTURE1);
-		gl.bindTexture(gl.TEXTURE_2D, textures.watermark.texture);
-		gl.uniform1i(u.texture_watermark, 1);
-
-		gl.uniform2fv(u.resolution_watermark, [textures.watermark.width, textures.watermark.height]);
-		gl.uniform1f(u.scale, params.scale);
-
-		gl.uniform1f(u.opacity, params.opacity);
-		gl.uniform1f(u.angle, params.angle);
+		// 基本パラメータ
+		gl.uniform1f(u.opacity, params.opacity ?? 1.0);
+		gl.uniform1f(u.scale, params.scale ?? 0.3);
+		gl.uniform1f(u.angle, params.angle ?? 0.0);
+		gl.uniform1i(u.cover, params.cover ? 1 : 0);
 		gl.uniform1i(u.repeat, params.repeat ? 1 : 0);
-		gl.uniform1i(u.alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1);
-		gl.uniform1i(u.alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1);
-		gl.uniform1f(u.alignMargin, params.align.margin ?? 0);
-		gl.uniform1i(u.fitMode, params.cover ? 1 : 0);
+		const ax = params.align?.x === 'left' ? 0 : params.align?.x === 'center' ? 1 : 2;
+		const ay = params.align?.y === 'top' ? 0 : params.align?.y === 'center' ? 1 : 2;
+		gl.uniform1i(u.alignX, ax);
+		gl.uniform1i(u.alignY, ay);
+		gl.uniform1f(u.margin, (params.align?.margin ?? 0));
+		gl.uniform1f(u.repeatMargin, (params.align?.margin ?? 0));
+		gl.uniform1i(u.noBBoxExpansion, params.noBoundingBoxExpansion ? 1 : 0);
+
+		// ウォーターマークテクスチャ
+		const wm = textures.watermark;
+		if (wm) {
+			gl.activeTexture(gl.TEXTURE1);
+			gl.bindTexture(gl.TEXTURE_2D, wm.texture);
+
+			// リピートモードに応じてWRAP属性を設定
+			if (params.repeat) {
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+			} else {
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+				gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+			}
+
+			gl.uniform1i(u.watermark, 1);
+			gl.uniform2f(u.wmResolution, wm.width, wm.height);
+			gl.uniform1i(u.wmEnabled, 1);
+		} else {
+			gl.uniform1i(u.wmEnabled, 0);
+		}
 	},
 });
diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts
index b3525f158f..1b46721a2b 100644
--- a/packages/frontend/src/utility/watermark.ts
+++ b/packages/frontend/src/utility/watermark.ts
@@ -27,6 +27,7 @@ export type WatermarkPreset = {
 		type: 'text';
 		text: string;
 		repeat: boolean;
+		noBoundingBoxExpansion: boolean;
 		scale: number;
 		angle: number;
 		align: Align;
@@ -38,6 +39,7 @@ export type WatermarkPreset = {
 		imageId: string | null;
 		cover: boolean;
 		repeat: boolean;
+		noBoundingBoxExpansion: boolean;
 		scale: number;
 		angle: number;
 		align: Align;
@@ -106,6 +108,7 @@ export class WatermarkRenderer {
 					id: layer.id,
 					params: {
 						repeat: layer.repeat,
+						noBoundingBoxExpansion: layer.noBoundingBoxExpansion,
 						scale: layer.scale,
 						align: layer.align,
 						angle: layer.angle,
@@ -123,6 +126,7 @@ export class WatermarkRenderer {
 					id: layer.id,
 					params: {
 						repeat: layer.repeat,
+						noBoundingBoxExpansion: layer.noBoundingBoxExpansion,
 						scale: layer.scale,
 						align: layer.align,
 						angle: layer.angle,
-- 
cgit v1.2.3-freya


From 9aea7363cecf1d2631f3e2df01be35bb8cc66acf Mon Sep 17 00:00:00 2001
From: 果物リン <nassii74@gmail.com>
Date: Mon, 20 Oct 2025 16:11:01 +0900
Subject: fix(frontend): MkPollの集計完了後の挙動がおかしいのを修正 (#16646)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* MkPollの集計完了後の挙動がおかしいのを修正

* fix lint

* watchを削除できるように修正

* fix

* Update Changelog

* fix lint

---------

Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
---
 CHANGELOG.md                                |  1 +
 packages/frontend/src/components/MkPoll.vue | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e74b950467..8349bbc314 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
   - ウォーターマークを回転させると歪む問題を修正
   - ウォーターマークを敷き詰めると上下左右反転した画像/文字が表示される問題を修正
   - ウォーターマークを回転させた際に画面からはみ出た部分を考慮できるように
+- Fix: 投票が終了した後に投票結果が正しく表示されない問題を修正
 
 ### Server
 -
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index 76c65397ae..9fc9c98493 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -57,15 +57,8 @@ const remaining = computed(() => {
 	return Math.floor(Math.max(expiresAtTime.value - now.value, 0) / 1000);
 });
 
-const remainingWatchStop = watch(remaining, (to) => {
-	if (to <= 0) {
-		showResult.value = true;
-		remainingWatchStop();
-	}
-}, { immediate: true });
-
 const total = computed(() => sum(props.choices.map(x => x.votes)));
-const closed = computed(() => remaining.value === 0);
+const closed = computed(() => remaining.value <= 0);
 const isVoted = computed(() => !props.multiple && props.choices.some(c => c.isVoted));
 const timer = computed(() => i18n.tsx._poll[
 	remaining.value >= 86400 ? 'remainingDays' :
@@ -78,7 +71,16 @@ const timer = computed(() => i18n.tsx._poll[
 	d: Math.floor(remaining.value / 86400),
 }));
 
-const showResult = ref(props.readOnly || isVoted.value);
+const showResult = ref(props.readOnly || isVoted.value || closed.value);
+
+if (!closed.value) {
+	const closedWatchStop = watch(closed, (isNowClosed) => {
+		if (isNowClosed) {
+			showResult.value = true;
+			closedWatchStop();
+		}
+	});
+}
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-- 
cgit v1.2.3-freya


From 3c97c12e7fde60291bd26dc24217ec73eeed345b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 21 Oct 2025 20:03:57 +0900
Subject: enhance(frontend):
 下書き/予約投稿一覧は投稿フォームのアカウントメニュー内に移動し、下書き保存は「...」メニュー内に移動
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                       |  1 +
 packages/frontend/src/accounts.ts                  | 10 +--
 packages/frontend/src/components/MkPostForm.vue    | 95 +++++++++-------------
 .../src/components/global/MkPageHeader.vue         | 11 ++-
 packages/frontend/src/ui/_common_/navbar-h.vue     | 10 ++-
 packages/frontend/src/ui/_common_/navbar.vue       | 10 ++-
 6 files changed, 63 insertions(+), 74 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46356ac754..9da1baab43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 
 ### Client
 - Enhance: デッキのメインカラムのヘッダをクリックしてページ上部/下部にスクロールできるように
+- Enhance: 下書き/予約投稿一覧は投稿フォームのアカウントメニュー内に移動し、下書き保存は「...」メニュー内に移動されました
 - Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
 - Fix: バナー画像の幅が表示領域と一致していない問題を修正
 - Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
diff --git a/packages/frontend/src/accounts.ts b/packages/frontend/src/accounts.ts
index 60f7cd0b4b..79086c2b39 100644
--- a/packages/frontend/src/accounts.ts
+++ b/packages/frontend/src/accounts.ts
@@ -211,13 +211,13 @@ export async function switchAccount(host: string, id: string) {
 	}
 }
 
-export async function openAccountMenu(opts: {
+export async function getAccountMenu(opts: {
 	includeCurrentAccount?: boolean;
 	withExtraOperation: boolean;
 	active?: Misskey.entities.User['id'];
 	onChoose?: (account: Misskey.entities.MeDetailed) => void;
-}, ev: MouseEvent) {
-	if (!$i) return;
+}) {
+	if ($i == null) throw new Error('No current account');
 	const me = $i;
 
 	const callback = opts.onChoose;
@@ -338,9 +338,7 @@ export async function openAccountMenu(opts: {
 		menuItems.push(...accountItems);
 	}
 
-	popupMenu(menuItems, ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
+	return menuItems;
 }
 
 export function getAccountWithSigninDialog(): Promise<{ id: string, token: string } | null> {
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index c1b950a6c8..afa70cdbae 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -17,7 +17,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
 				<img :class="$style.avatar" :src="(postAccount ?? $i).avatarUrl" style="border-radius: 100%;"/>
 			</button>
-			<button v-if="$i.policies.noteDraftLimit > 0" v-tooltip="(postAccount != null && postAccount.id !== $i.id) ? null : i18n.ts.draftsAndScheduledNotes" class="_button" :class="$style.draftButton" :disabled="postAccount != null && postAccount.id !== $i.id" @click="showDraftMenu"><i class="ti ti-list"></i></button>
 		</div>
 		<div :class="$style.headerRight">
 			<template v-if="!(targetChannel != null && fixed)">
@@ -141,7 +140,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { ensureSignin, notesCount, incNotesCount } from '@/i.js';
-import { getAccounts, openAccountMenu as openAccountMenu_ } from '@/accounts.js';
+import { getAccounts, getAccountMenu } from '@/accounts.js';
 import { deepClone } from '@/utility/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
@@ -620,6 +619,19 @@ function showOtherSettings() {
 		action: () => {
 			toggleReactionAcceptance();
 		},
+	}, { type: 'divider' }, {
+		type: 'button',
+		text: i18n.ts._drafts.saveToDraft,
+		icon: 'ti ti-cloud-upload',
+		action: async () => {
+			if (!canSaveAsServerDraft.value) {
+				return os.alert({
+					type: 'error',
+					text: i18n.ts._drafts.cannotCreateDraft,
+				});
+			}
+			saveServerDraft();
+		},
 	}, ...($i.policies.scheduledNoteLimit > 0 ? [{
 		icon: 'ti ti-calendar-time',
 		text: i18n.ts.schedulePost + '...',
@@ -1159,34 +1171,9 @@ function showActions(ev: MouseEvent) {
 
 const postAccount = ref<Misskey.entities.UserDetailed | null>(null);
 
-function openAccountMenu(ev: MouseEvent) {
+async function openAccountMenu(ev: MouseEvent) {
 	if (props.mock) return;
 
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount.value != null ? postAccount.value.id : $i.id,
-		onChoose: (account) => {
-			if (account.id === $i.id) {
-				postAccount.value = null;
-			} else {
-				postAccount.value = account;
-			}
-		},
-	}, ev);
-}
-
-function showPerUploadItemMenu(item: UploaderItem, ev: MouseEvent) {
-	const menu = uploader.getMenu(item);
-	os.popupMenu(menu, ev.currentTarget ?? ev.target);
-}
-
-function showPerUploadItemMenuViaContextmenu(item: UploaderItem, ev: MouseEvent) {
-	const menu = uploader.getMenu(item);
-	os.contextMenu(menu, ev);
-}
-
-function showDraftMenu(ev: MouseEvent) {
 	function showDraftsDialog(scheduled: boolean) {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNoteDraftsDialog.vue')), {
 			scheduled,
@@ -1244,34 +1231,44 @@ function showDraftMenu(ev: MouseEvent) {
 		});
 	}
 
-	os.popupMenu([{
-		type: 'button',
-		text: i18n.ts._drafts.saveToDraft,
-		icon: 'ti ti-cloud-upload',
-		action: async () => {
-			if (!canSaveAsServerDraft.value) {
-				return os.alert({
-					type: 'error',
-					text: i18n.ts._drafts.cannotCreateDraft,
-				});
+	const items = await getAccountMenu({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount.value != null ? postAccount.value.id : $i.id,
+		onChoose: (account) => {
+			if (account.id === $i.id) {
+				postAccount.value = null;
+			} else {
+				postAccount.value = account;
 			}
-			saveServerDraft();
 		},
-	}, {
+	});
+
+	os.popupMenu([{
 		type: 'button',
 		text: i18n.ts._drafts.listDrafts,
 		icon: 'ti ti-cloud-download',
 		action: () => {
 			showDraftsDialog(false);
 		},
-	}, { type: 'divider' }, {
+	}, {
 		type: 'button',
 		text: i18n.ts._drafts.listScheduledNotes,
 		icon: 'ti ti-clock-down',
 		action: () => {
 			showDraftsDialog(true);
 		},
-	}], (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	}, { type: 'divider' }, ...items], (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+}
+
+function showPerUploadItemMenu(item: UploaderItem, ev: MouseEvent) {
+	const menu = uploader.getMenu(item);
+	os.popupMenu(menu, ev.currentTarget ?? ev.target);
+}
+
+function showPerUploadItemMenuViaContextmenu(item: UploaderItem, ev: MouseEvent) {
+	const menu = uploader.getMenu(item);
+	os.contextMenu(menu, ev);
 }
 
 async function schedule() {
@@ -1422,20 +1419,6 @@ defineExpose({
 	margin: auto;
 }
 
-.draftButton {
-	padding: 8px;
-	font-size: 90%;
-	border-radius: 6px;
-
-	&:hover {
-		background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
-	}
-
-	&:disabled {
-		background: none;
-	}
-}
-
 .headerRight {
 	display: flex;
 	min-height: 48px;
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 2f4de840db..c4adf440cb 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -62,9 +62,10 @@ import { onMounted, onUnmounted, ref, inject, useTemplateRef, computed } from 'v
 import { scrollToTop } from '@@/js/scroll.js';
 import XTabs from './MkPageHeader.tabs.vue';
 import { globalEvents } from '@/events.js';
-import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
+import { getAccountMenu } from '@/accounts.js';
 import { $i } from '@/i.js';
 import { DI } from '@/di.js';
+import * as os from '@/os.js';
 
 const props = withDefaults(defineProps<PageHeaderProps>(), {
 	tabs: () => ([] as Tab[]),
@@ -99,10 +100,12 @@ const top = () => {
 	}
 };
 
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
+async function openAccountMenu(ev: MouseEvent) {
+	const menuItems = await getAccountMenu({
 		withExtraOperation: true,
-	}, ev);
+	});
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
 }
 
 function onTabClick(): void {
diff --git a/packages/frontend/src/ui/_common_/navbar-h.vue b/packages/frontend/src/ui/_common_/navbar-h.vue
index a78bdd52d1..b025dd4858 100644
--- a/packages/frontend/src/ui/_common_/navbar-h.vue
+++ b/packages/frontend/src/ui/_common_/navbar-h.vue
@@ -55,7 +55,7 @@ import MkButton from '@/components/MkButton.vue';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
+import { getAccountMenu } from '@/accounts.js';
 import { $i } from '@/i.js';
 import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
 
@@ -84,10 +84,12 @@ async function more(ev: MouseEvent) {
 	});
 }
 
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
+async function openAccountMenu(ev: MouseEvent) {
+	const menuItems = await getAccountMenu({
 		withExtraOperation: true,
-	}, ev);
+	});
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
 }
 
 onMounted(() => {
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 2e21587fcb..b0e45eafcd 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -109,7 +109,7 @@ import { instance } from '@/instance.js';
 import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
 import { useRouter } from '@/router.js';
 import { prefer } from '@/preferences.js';
-import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
+import { getAccountMenu } from '@/accounts.js';
 import { $i } from '@/i.js';
 
 const router = useRouter();
@@ -170,10 +170,12 @@ function toggleRealtimeMode(ev: MouseEvent) {
 	}], ev.currentTarget ?? ev.target);
 }
 
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
+async function openAccountMenu(ev: MouseEvent) {
+	const menuItems = await getAccountMenu({
 		withExtraOperation: true,
-	}, ev);
+	});
+
+	os.popupMenu(menuItems, ev.currentTarget ?? ev.target);
 }
 
 async function more(ev: MouseEvent) {
-- 
cgit v1.2.3-freya


From d203e1a446898bb867705d4191507f1fa196fa88 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 23 Oct 2025 11:04:27 +0900
Subject: refactor(frontend): フロントエンドの型エラー解消 (#16694)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend-shared/js/emojilist.ts                      | 11 ++++++++---
 .../frontend/src/components/MkReactionsViewer.reaction.vue    |  6 +++---
 packages/frontend/src/components/MkSuperMenu.vue              |  4 +++-
 packages/frontend/src/directives/appear.ts                    |  3 ++-
 packages/frontend/src/directives/tooltip.ts                   |  5 +++--
 packages/frontend/src/directives/user-preview.ts              |  2 +-
 packages/frontend/src/type.ts                                 |  8 --------
 packages/frontend/src/types/misc.ts                           |  6 ++++++
 8 files changed, 26 insertions(+), 19 deletions(-)
 delete mode 100644 packages/frontend/src/type.ts
 create mode 100644 packages/frontend/src/types/misc.ts

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend-shared/js/emojilist.ts b/packages/frontend-shared/js/emojilist.ts
index 09bea06719..20ddd0f7d7 100644
--- a/packages/frontend-shared/js/emojilist.ts
+++ b/packages/frontend-shared/js/emojilist.ts
@@ -39,13 +39,18 @@ for (let i = 0; i < emojilist.length; i++) {
 
 export const emojiCharByCategory = _charGroupByCategory;
 
-export function getUnicodeEmoji(char: string): UnicodeEmojiDef | string {
+export function getUnicodeEmojiOrNull(char: string): UnicodeEmojiDef | null {
 	// Colorize it because emojilist.json assumes that
 	return unicodeEmojisMap.get(colorizeEmoji(char))
 		// カラースタイル絵文字がjsonに無い場合はテキストスタイル絵文字にフォールバックする
 		?? unicodeEmojisMap.get(char)
-		// それでも見つからない場合はそのまま返す（絵文字情報がjsonに無い場合、このフォールバックが無いとレンダリングに失敗する）
-		?? char;
+		// それでも見つからない場合はnullを返す
+		?? null;
+}
+
+export function getUnicodeEmoji(char: string): UnicodeEmojiDef | string {
+	// 絵文字が見つからない場合はそのまま返す（絵文字情報がjsonに無い場合、このフォールバックが無いとレンダリングに失敗する）
+	return getUnicodeEmojiOrNull(char) ?? char;
 }
 
 export function isSupportedEmoji(char: string): boolean {
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index d96f0e2420..7c60288883 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, inject, onMounted, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { getUnicodeEmoji } from '@@/js/emojilist.js';
+import { getUnicodeEmojiOrNull } from '@@/js/emojilist.js';
 import MkCustomEmojiDetailedDialog from './MkCustomEmojiDetailedDialog.vue';
 import type { MenuItem } from '@/types/menu';
 import XDetails from '@/components/MkReactionsViewer.details.vue';
@@ -60,11 +60,11 @@ const buttonEl = useTemplateRef('buttonEl');
 const emojiName = computed(() => props.reaction.replace(/:/g, '').replace(/@\./, ''));
 
 const canToggle = computed(() => {
-	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmoji(props.reaction);
+	const emoji = customEmojisMap.get(emojiName.value) ?? getUnicodeEmojiOrNull(props.reaction);
 
 	// TODO
 	//return !props.reaction.match(/@\w/) && $i && emoji && checkReactionPermissions($i, props.note, emoji);
-	return !props.reaction.match(/@\w/) && $i && emoji;
+	return props.reaction.match(/@\w/) == null && $i != null && emoji != null;
 });
 const canGetInfo = computed(() => !props.reaction.match(/@\w/) && props.reaction.includes(':'));
 const isLocalCustomEmoji = props.reaction[0] === ':' && props.reaction.includes('@.');
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index dbc673333c..236afa127c 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -64,6 +64,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
+import type { Awaitable } from '@/types/misc.js';
+
 export type SuperMenuDef = {
 	title?: string;
 	items: ({
@@ -80,7 +82,7 @@ export type SuperMenuDef = {
 		text: string;
 		danger?: boolean;
 		active?: boolean;
-		action: (ev: MouseEvent) => void | Promise<void>;
+		action: (ev: MouseEvent) => Awaitable<void>;
 	} | {
 		type?: 'link';
 		to: string;
diff --git a/packages/frontend/src/directives/appear.ts b/packages/frontend/src/directives/appear.ts
index f714871420..117dc397da 100644
--- a/packages/frontend/src/directives/appear.ts
+++ b/packages/frontend/src/directives/appear.ts
@@ -5,6 +5,7 @@
 
 import { throttle } from 'throttle-debounce';
 import type { Directive } from 'vue';
+import type { Awaitable } from '@/types/misc.js';
 
 interface HTMLElementWithObserver extends HTMLElement {
 	_observer_?: IntersectionObserver;
@@ -31,4 +32,4 @@ export const appearDirective = {
 	unmounted(src) {
 		if (src._observer_) src._observer_.disconnect();
 	},
-} as Directive<HTMLElementWithObserver, () => void>;
+} as Directive<HTMLElementWithObserver, (() => Awaitable<void>) | null | undefined>;
diff --git a/packages/frontend/src/directives/tooltip.ts b/packages/frontend/src/directives/tooltip.ts
index 9cfa8d657d..8839d9a939 100644
--- a/packages/frontend/src/directives/tooltip.ts
+++ b/packages/frontend/src/directives/tooltip.ts
@@ -15,7 +15,7 @@ const start = isTouchUsing ? 'touchstart' : 'mouseenter';
 const end = isTouchUsing ? 'touchend' : 'mouseleave';
 
 type TooltipDirectiveState = {
-	text: string;
+	text: string | null | undefined;
 	_close: null | (() => void);
 	showTimer: number | null;
 	hideTimer: number | null;
@@ -53,6 +53,7 @@ export const tooltipDirective = {
 
 		if (binding.arg === 'dialog') {
 			el.addEventListener('click', (ev) => {
+				if (binding.value == null) return;
 				ev.preventDefault();
 				ev.stopPropagation();
 				alert({
@@ -128,4 +129,4 @@ export const tooltipDirective = {
 		if (self.checkTimer) window.clearTimeout(self.checkTimer);
 		self.close();
 	},
-} as Directive<TooltipDirectiveElement, string, TooltipDirectiveModifiers, TooltipDirectiveArg>;
+} as Directive<TooltipDirectiveElement, string | null | undefined, TooltipDirectiveModifiers, TooltipDirectiveArg>;
diff --git a/packages/frontend/src/directives/user-preview.ts b/packages/frontend/src/directives/user-preview.ts
index 76e345a108..f81f5dbef8 100644
--- a/packages/frontend/src/directives/user-preview.ts
+++ b/packages/frontend/src/directives/user-preview.ts
@@ -131,4 +131,4 @@ export const userPreviewDirective = {
 		if (self == null) return;
 		self.preview.detach();
 	},
-} as Directive<UserPreviewDirectiveElement, string | Misskey.entities.UserDetailed>;
+} as Directive<UserPreviewDirectiveElement, string | Misskey.entities.UserDetailed | null | undefined>;
diff --git a/packages/frontend/src/type.ts b/packages/frontend/src/type.ts
deleted file mode 100644
index 5ff27158d2..0000000000
--- a/packages/frontend/src/type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-
-export type WithNonNullable<T, K extends keyof T> = T & { [P in K]-?: NonNullable<T[P]> };
diff --git a/packages/frontend/src/types/misc.ts b/packages/frontend/src/types/misc.ts
new file mode 100644
index 0000000000..3ddd732531
--- /dev/null
+++ b/packages/frontend/src/types/misc.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export type Awaitable <T> = T | Promise<T>;
-- 
cgit v1.2.3-freya


From 2e07e50bb49958e75770a9b09b900fae50b43606 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 23 Oct 2025 11:05:21 +0900
Subject: refactor(frontend): 既存のGLSLを単独のファイルに移行 (#16677)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(frontend): 既存のGLSLを単独のファイルに移行

* fix: glslファイルを参照元ファイルと同じ場所に移動
---
 .../frontend/src/components/MkAnimBg.fragment.glsl | 111 +++++++++++++++++++
 .../frontend/src/components/MkAnimBg.vertex.glsl   |  15 +++
 packages/frontend/src/components/MkAnimBg.vue      | 123 +--------------------
 .../src/utility/snowfall-effect.fragment.glsl      |  23 ++++
 packages/frontend/src/utility/snowfall-effect.ts   |  57 +---------
 .../src/utility/snowfall-effect.vertex.glsl        |  37 +++++++
 6 files changed, 194 insertions(+), 172 deletions(-)
 create mode 100644 packages/frontend/src/components/MkAnimBg.fragment.glsl
 create mode 100644 packages/frontend/src/components/MkAnimBg.vertex.glsl
 create mode 100644 packages/frontend/src/utility/snowfall-effect.fragment.glsl
 create mode 100644 packages/frontend/src/utility/snowfall-effect.vertex.glsl

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkAnimBg.fragment.glsl b/packages/frontend/src/components/MkAnimBg.fragment.glsl
new file mode 100644
index 0000000000..d40872bb7a
--- /dev/null
+++ b/packages/frontend/src/components/MkAnimBg.fragment.glsl
@@ -0,0 +1,111 @@
+#version 300 es
+precision mediump float;
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+vec3 mod289(vec3 x) {
+	return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec2 mod289(vec2 x) {
+	return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+
+vec3 permute(vec3 x) {
+	return mod289(((x*34.0)+1.0)*x);
+}
+
+float snoise(vec2 v) {
+	const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
+
+	vec2 i  = floor(v + dot(v, C.yy));
+	vec2 x0 = v - i + dot(i, C.xx);
+
+	vec2 i1;
+	i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+	vec4 x12 = x0.xyxy + C.xxzz;
+	x12.xy -= i1;
+
+	i = mod289(i);
+	vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+
+	vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+	m = m*m;
+	m = m*m;
+
+	vec3 x = 2.0 * fract(p * C.www) - 1.0;
+	vec3 h = abs(x) - 0.5;
+	vec3 ox = floor(x + 0.5);
+	vec3 a0 = x - ox;
+
+	m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+
+	vec3 g;
+	g.x = a0.x * x0.x + h.x * x0.y;
+	g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+	return 130.0 * dot(m, g);
+}
+
+in vec2 in_uv;
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform float u_spread;
+uniform float u_speed;
+uniform float u_warp;
+uniform float u_focus;
+uniform float u_itensity;
+out vec4 out_color;
+
+float circle(in vec2 _pos, in vec2 _origin, in float _radius) {
+	float SPREAD = 0.7 * u_spread;
+	float SPEED = 0.00055 * u_speed;
+	float WARP = 1.5 * u_warp;
+	float FOCUS = 1.15 * u_focus;
+
+	vec2 dist = _pos - _origin;
+
+	float distortion = snoise(vec2(
+		_pos.x * 1.587 * WARP + u_time * SPEED * 0.5,
+		_pos.y * 1.192 * WARP + u_time * SPEED * 0.3
+	)) * 0.5 + 0.5;
+
+	float feather = 0.01 + SPREAD * pow(distortion, FOCUS);
+
+	return 1.0 - smoothstep(
+		_radius - (_radius * feather),
+		_radius + (_radius * feather),
+		dot( dist, dist ) * 4.0
+	);
+}
+
+void main() {
+	vec3 green = vec3(1.0) - vec3(153.0 / 255.0, 211.0 / 255.0, 221.0 / 255.0);
+	vec3 purple = vec3(1.0) - vec3(195.0 / 255.0, 165.0 / 255.0, 242.0 / 255.0);
+	vec3 orange = vec3(1.0) - vec3(255.0 / 255.0, 156.0 / 255.0, 136.0 / 255.0);
+
+	float ratio = u_resolution.x / u_resolution.y;
+
+	vec2 uv = vec2(in_uv.x, in_uv.y / ratio) * 0.5 + 0.5;
+
+	vec3 color = vec3(0.0);
+
+	float greenMix = snoise(in_uv * 1.31 + u_time * 0.8 * 0.00017) * 0.5 + 0.5;
+	float purpleMix = snoise(in_uv * 1.26 + u_time * 0.8 * -0.0001) * 0.5 + 0.5;
+	float orangeMix = snoise(in_uv * 1.34 + u_time * 0.8 * 0.00015) * 0.5 + 0.5;
+
+	float alphaOne = 0.35 + 0.65 * pow(snoise(vec2(u_time * 0.00012, uv.x)) * 0.5 + 0.5, 1.2);
+	float alphaTwo = 0.35 + 0.65 * pow(snoise(vec2((u_time + 1561.0) * 0.00014, uv.x )) * 0.5 + 0.5, 1.2);
+	float alphaThree = 0.35 + 0.65 * pow(snoise(vec2((u_time + 3917.0) * 0.00013, uv.x )) * 0.5 + 0.5, 1.2);
+
+	color += vec3(circle(uv, vec2(0.22 + sin(u_time * 0.000201) * 0.06, 0.80 + cos(u_time * 0.000151) * 0.06), 0.15)) * alphaOne * (purple * purpleMix + orange * orangeMix);
+	color += vec3(circle(uv, vec2(0.90 + cos(u_time * 0.000166) * 0.06, 0.42 + sin(u_time * 0.000138) * 0.06), 0.18)) * alphaTwo * (green * greenMix + purple * purpleMix);
+	color += vec3(circle(uv, vec2(0.19 + sin(u_time * 0.000112) * 0.06, 0.25 + sin(u_time * 0.000192) * 0.06), 0.09)) * alphaThree * (orange * orangeMix);
+
+	color *= u_itensity + 1.0 * pow(snoise(vec2(in_uv.y + u_time * 0.00013, in_uv.x + u_time * -0.00009)) * 0.5 + 0.5, 2.0);
+
+	vec3 inverted = vec3(1.0) - color;
+	out_color = vec4(color, max(max(color.x, color.y), color.z));
+}
diff --git a/packages/frontend/src/components/MkAnimBg.vertex.glsl b/packages/frontend/src/components/MkAnimBg.vertex.glsl
new file mode 100644
index 0000000000..56d6b017b1
--- /dev/null
+++ b/packages/frontend/src/components/MkAnimBg.vertex.glsl
@@ -0,0 +1,15 @@
+#version 300 es
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec2 position;
+uniform vec2 u_scale;
+out vec2 in_uv;
+
+void main() {
+	gl_Position = vec4(position, 0.0, 1.0);
+	in_uv = position / u_scale;
+}
diff --git a/packages/frontend/src/components/MkAnimBg.vue b/packages/frontend/src/components/MkAnimBg.vue
index 0e1018dcbf..bcdc604bb8 100644
--- a/packages/frontend/src/components/MkAnimBg.vue
+++ b/packages/frontend/src/components/MkAnimBg.vue
@@ -10,6 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import isChromatic from 'chromatic/isChromatic';
+import vertexShaderSource from './MkAnimBg.vertex.glsl';
+import fragmentShaderSource from './MkAnimBg.fragment.glsl';
 import { initShaderProgram } from '@/utility/webgl.js';
 
 const canvasEl = useTemplateRef('canvasEl');
@@ -42,126 +44,7 @@ onMounted(() => {
 	const positionBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
-	const shaderProgram = initShaderProgram(gl, `#version 300 es
-		in vec2 position;
-		uniform vec2 u_scale;
-		out vec2 in_uv;
-
-		void main() {
-			gl_Position = vec4(position, 0.0, 1.0);
-			in_uv = position / u_scale;
-		}
-	`, `#version 300 es
-		precision mediump float;
-
-		vec3 mod289(vec3 x) {
-			return x - floor(x * (1.0 / 289.0)) * 289.0;
-		}
-
-		vec2 mod289(vec2 x) {
-			return x - floor(x * (1.0 / 289.0)) * 289.0;
-		}
-
-		vec3 permute(vec3 x) {
-			return mod289(((x*34.0)+1.0)*x);
-		}
-
-		float snoise(vec2 v) {
-			const vec4 C = vec4(0.211324865405187,
-													0.366025403784439,
-												-0.577350269189626,
-													0.024390243902439);
-
-			vec2 i  = floor(v + dot(v, C.yy) );
-			vec2 x0 = v -   i + dot(i, C.xx);
-
-			vec2 i1;
-			i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
-			vec4 x12 = x0.xyxy + C.xxzz;
-			x12.xy -= i1;
-
-			i = mod289(i);
-			vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
-				+ i.x + vec3(0.0, i1.x, 1.0 ));
-
-			vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
-			m = m*m ;
-			m = m*m ;
-
-			vec3 x = 2.0 * fract(p * C.www) - 1.0;
-			vec3 h = abs(x) - 0.5;
-			vec3 ox = floor(x + 0.5);
-			vec3 a0 = x - ox;
-
-			m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
-
-			vec3 g;
-			g.x  = a0.x  * x0.x  + h.x  * x0.y;
-			g.yz = a0.yz * x12.xz + h.yz * x12.yw;
-			return 130.0 * dot(m, g);
-		}
-
-		in vec2 in_uv;
-		uniform float u_time;
-		uniform vec2 u_resolution;
-		uniform float u_spread;
-		uniform float u_speed;
-		uniform float u_warp;
-		uniform float u_focus;
-		uniform float u_itensity;
-		out vec4 out_color;
-
-		float circle( in vec2 _pos, in vec2 _origin, in float _radius ) {
-			float SPREAD = 0.7 * u_spread;
-			float SPEED = 0.00055 * u_speed;
-			float WARP = 1.5 * u_warp;
-			float FOCUS = 1.15 * u_focus;
-
-			vec2 dist = _pos - _origin;
-
-			float distortion = snoise( vec2(
-				_pos.x * 1.587 * WARP + u_time * SPEED * 0.5,
-				_pos.y * 1.192 * WARP + u_time * SPEED * 0.3
-			) ) * 0.5 + 0.5;
-
-			float feather = 0.01 + SPREAD * pow( distortion, FOCUS );
-
-			return 1.0 - smoothstep(
-				_radius - ( _radius * feather ),
-				_radius + ( _radius * feather ),
-				dot( dist, dist ) * 4.0
-			);
-		}
-
-		void main() {
-			vec3 green = vec3( 1.0 ) - vec3( 153.0 / 255.0, 211.0 / 255.0, 221.0 / 255.0 );
-			vec3 purple = vec3( 1.0 ) - vec3( 195.0 / 255.0, 165.0 / 255.0, 242.0 / 255.0 );
-			vec3 orange = vec3( 1.0 ) - vec3( 255.0 / 255.0, 156.0 / 255.0, 136.0 / 255.0 );
-
-			float ratio = u_resolution.x / u_resolution.y;
-
-			vec2 uv = vec2( in_uv.x, in_uv.y / ratio ) * 0.5 + 0.5;
-
-			vec3 color = vec3( 0.0 );
-
-			float greenMix = snoise( in_uv * 1.31 + u_time * 0.8 * 0.00017 ) * 0.5 + 0.5;
-			float purpleMix = snoise( in_uv * 1.26 + u_time * 0.8 * -0.0001 ) * 0.5 + 0.5;
-			float orangeMix = snoise( in_uv * 1.34 + u_time * 0.8 * 0.00015 ) * 0.5 + 0.5;
-
-			float alphaOne = 0.35 + 0.65 * pow( snoise( vec2( u_time * 0.00012, uv.x ) ) * 0.5 + 0.5, 1.2 );
-			float alphaTwo = 0.35 + 0.65 * pow( snoise( vec2( ( u_time + 1561.0 ) * 0.00014, uv.x ) ) * 0.5 + 0.5, 1.2 );
-			float alphaThree = 0.35 + 0.65 * pow( snoise( vec2( ( u_time + 3917.0 ) * 0.00013, uv.x ) ) * 0.5 + 0.5, 1.2 );
-
-			color += vec3( circle( uv, vec2( 0.22 + sin( u_time * 0.000201 ) * 0.06, 0.80 + cos( u_time * 0.000151 ) * 0.06 ), 0.15 ) ) * alphaOne * ( purple * purpleMix + orange * orangeMix );
-			color += vec3( circle( uv, vec2( 0.90 + cos( u_time * 0.000166 ) * 0.06, 0.42 + sin( u_time * 0.000138 ) * 0.06 ), 0.18 ) ) * alphaTwo * ( green * greenMix + purple * purpleMix );
-			color += vec3( circle( uv, vec2( 0.19 + sin( u_time * 0.000112 ) * 0.06, 0.25 + sin( u_time * 0.000192 ) * 0.06 ), 0.09 ) ) * alphaThree * ( orange * orangeMix );
-
-			color *= u_itensity + 1.0 * pow( snoise( vec2( in_uv.y + u_time * 0.00013, in_uv.x + u_time * -0.00009 ) ) * 0.5 + 0.5, 2.0 );
-
-			vec3 inverted = vec3( 1.0 ) - color;
-			out_color = vec4(color, max(max(color.x, color.y), color.z));
-		}
-	`);
+	const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource);
 	if (shaderProgram == null) return;
 
 	gl.useProgram(shaderProgram);
diff --git a/packages/frontend/src/utility/snowfall-effect.fragment.glsl b/packages/frontend/src/utility/snowfall-effect.fragment.glsl
new file mode 100644
index 0000000000..560af039e8
--- /dev/null
+++ b/packages/frontend/src/utility/snowfall-effect.fragment.glsl
@@ -0,0 +1,23 @@
+#version 300 es
+precision mediump float;
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec4 v_color;
+in float v_rotation;
+uniform sampler2D u_texture;
+out vec4 out_color;
+
+void main() {
+	vec2 rotated = vec2(
+		cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,
+		cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5
+	);
+
+	vec4 snowflake = texture(u_texture, rotated);
+
+	out_color = vec4(snowflake.rgb * v_color.xyz, snowflake.a * v_color.a);
+}
diff --git a/packages/frontend/src/utility/snowfall-effect.ts b/packages/frontend/src/utility/snowfall-effect.ts
index 65398e6a43..cefa720ebf 100644
--- a/packages/frontend/src/utility/snowfall-effect.ts
+++ b/packages/frontend/src/utility/snowfall-effect.ts
@@ -3,59 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-export class SnowfallEffect {
-	private VERTEX_SOURCE = `#version 300 es
-		in vec4 a_position;
-		in vec4 a_color;
-		in vec3 a_rotation;
-		in vec3 a_speed;
-		in float a_size;
-		out vec4 v_color;
-		out float v_rotation;
-		uniform float u_time;
-		uniform mat4 u_projection;
-		uniform vec3 u_worldSize;
-		uniform float u_gravity;
-		uniform float u_wind;
-		uniform float u_spin_factor;
-		uniform float u_turbulence;
-
-		void main() {
-			v_color = a_color;
-			v_rotation = a_rotation.x + (u_time * u_spin_factor) * a_rotation.y;
-
-			vec3 pos = a_position.xyz;
-
-			pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;
-			pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;
-
-			pos.x += sin(u_time * a_speed.z * u_turbulence) * a_rotation.z;
-			pos.z += cos(u_time * a_speed.z * u_turbulence) * a_rotation.z;
-
-			gl_Position = u_projection * vec4(pos.xyz, a_position.w);
-			gl_PointSize = (a_size / gl_Position.w) * 100.0;
-		}
-	`;
-
-	private FRAGMENT_SOURCE = `#version 300 es
-		precision mediump float;
+import vertexSource from './snowfall-effect.vertex.glsl';
+import fragmentSource from './snowfall-effect.fragment.glsl';
 
-		in vec4 v_color;
-		in float v_rotation;
-		uniform sampler2D u_texture;
-		out vec4 out_color;
-
-		void main() {
-			vec2 rotated = vec2(
-				cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,
-				cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5
-			);
-
-			vec4 snowflake = texture(u_texture, rotated);
-
-			out_color = vec4(snowflake.rgb * v_color.xyz, snowflake.a * v_color.a);
-		}
-	`;
+export class SnowfallEffect {
+	private VERTEX_SOURCE = vertexSource;
+	private FRAGMENT_SOURCE = fragmentSource;
 
 	private gl: WebGLRenderingContext;
 	private program: WebGLProgram;
diff --git a/packages/frontend/src/utility/snowfall-effect.vertex.glsl b/packages/frontend/src/utility/snowfall-effect.vertex.glsl
new file mode 100644
index 0000000000..bfca1a76ee
--- /dev/null
+++ b/packages/frontend/src/utility/snowfall-effect.vertex.glsl
@@ -0,0 +1,37 @@
+#version 300 es
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec4 a_position;
+in vec4 a_color;
+in vec3 a_rotation;
+in vec3 a_speed;
+in float a_size;
+out vec4 v_color;
+out float v_rotation;
+uniform float u_time;
+uniform mat4 u_projection;
+uniform vec3 u_worldSize;
+uniform float u_gravity;
+uniform float u_wind;
+uniform float u_spin_factor;
+uniform float u_turbulence;
+
+void main() {
+	v_color = a_color;
+	v_rotation = a_rotation.x + (u_time * u_spin_factor) * a_rotation.y;
+
+	vec3 pos = a_position.xyz;
+
+	pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;
+	pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;
+
+	pos.x += sin(u_time * a_speed.z * u_turbulence) * a_rotation.z;
+	pos.z += cos(u_time * a_speed.z * u_turbulence) * a_rotation.z;
+
+	gl_Position = u_projection * vec4(pos.xyz, a_position.w);
+	gl_PointSize = (a_size / gl_Position.w) * 100.0;
+}
-- 
cgit v1.2.3-freya


From 81cea6aed5f0413f040390e4aa53901887afd799 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 24 Oct 2025 11:01:20 +0900
Subject: Update MkImageEffectorDialog.vue

related? #16703
---
 packages/frontend/src/components/MkImageEffectorDialog.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 5ce514f93e..19ddb81919 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.root">
 		<div :class="$style.container">
 			<div :class="$style.preview">
-				<canvas ref="canvasEl" :class="$style.previewCanvas" @pointerdown="onImagePointerdown"></canvas>
+				<canvas ref="canvasEl" :class="$style.previewCanvas" @pointerdown.prevent.stop="onImagePointerdown"></canvas>
 				<div :class="$style.previewContainer">
 					<div class="_acrylic" :class="$style.previewTitle">{{ i18n.ts.preview }}</div>
 					<div class="_acrylic" :class="$style.editControls">
@@ -448,6 +448,7 @@ function onImagePointerdown(ev: PointerEvent) {
 	margin: 20px;
 	box-sizing: border-box;
 	object-fit: contain;
+	touch-action: none;
 }
 
 .controls {
-- 
cgit v1.2.3-freya


From 456504cf8281c972fded04e1496498d494891707 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 24 Oct 2025 11:14:12 +0900
Subject: Fix touch position offset in image masking on iOS devices (#16702)

* Initial plan

* Fix iOS touch position offset in image masking feature

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 .../frontend/src/components/MkImageEffectorDialog.vue    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.vue b/packages/frontend/src/components/MkImageEffectorDialog.vue
index 19ddb81919..0fc8fa9dcc 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.vue
@@ -257,8 +257,12 @@ function onImagePointerdown(ev: PointerEvent) {
 	xOffset /= 2;
 	yOffset /= 2;
 
-	let startX = ev.offsetX - xOffset;
-	let startY = ev.offsetY - yOffset;
+	const rect = canvasEl.value.getBoundingClientRect();
+	const pointerOffsetX = ev.clientX - rect.left;
+	const pointerOffsetY = ev.clientY - rect.top;
+
+	let startX = pointerOffsetX - xOffset;
+	let startY = pointerOffsetY - yOffset;
 
 	if (AW / AH < BW / BH) { // 横長
 		startX = startX / (Math.max(AW, AH) / Math.max(BH / BW, 1));
@@ -311,9 +315,11 @@ function onImagePointerdown(ev: PointerEvent) {
 		});
 	}
 
-	_move(ev.offsetX, ev.offsetY);
+	_move(ev.clientX, ev.clientY);
 
-	function _move(pointerX: number, pointerY: number) {
+	function _move(pointerClientX: number, pointerClientY: number) {
+		const pointerX = pointerClientX - rect.left;
+		const pointerY = pointerClientY - rect.top;
 		let x = pointerX - xOffset;
 		let y = pointerY - yOffset;
 
@@ -340,7 +346,7 @@ function onImagePointerdown(ev: PointerEvent) {
 	}
 
 	function move(ev: PointerEvent) {
-		_move(ev.offsetX, ev.offsetY);
+		_move(ev.clientX, ev.clientY);
 	}
 
 	function up() {
-- 
cgit v1.2.3-freya