feat(desktop): Warpライクなウィンドウ透過 (macOS、デフォルトOFF)

apps/desktop/package.json

@@ -86,6 +86,7 @@
 		"@superset/host-service": "workspace:*",
 		"@superset/local-db": "workspace:*",
 		"@superset/macos-process-metrics": "workspace:*",
+		"@superset/macos-window-blur": "workspace:*",
 		"@superset/panes": "workspace:*",
 		"@superset/shared": "workspace:*",
 		"@superset/trpc": "workspace:*",

apps/desktop/runtime-dependencies.ts

@@ -49,6 +49,12 @@ const externalizedRuntimeModules: ExternalizedRuntimeModule[] = [
 		packagedCopies: [copyWholeModule("@superset/macos-process-metrics")],
 		asarUnpackGlobs: ["**/node_modules/@superset/macos-process-metrics/**/*"],
 	},
+	{
+		specifier: "@superset/macos-window-blur",
+		materialize: ["@superset/macos-window-blur"],
+		packagedCopies: [copyWholeModule("@superset/macos-window-blur")],
+		asarUnpackGlobs: ["**/node_modules/@superset/macos-window-blur/**/*"],
+	},
 	{
 		specifier: "@ast-grep/napi",
 		materialize: ["@ast-grep/napi"],

apps/desktop/src/lib/trpc/routers/index.ts

@@ -33,6 +33,7 @@ import { createSettingsRouter } from "./settings";
 import { createTabTearoffRouter } from "./tab-tearoff";
 import { createTerminalRouter } from "./terminal";
 import { createUiStateRouter } from "./ui-state";
+import { createVibrancyRouter } from "./vibrancy";
 import { createVscodeExtensionsRouter } from "./vscode-extensions";
 import { createWindowRouter } from "./window";
 import { createWorkspacesRouter } from "./workspaces";
@@ -76,6 +77,7 @@ export const createAppRouter = (
 		hostServiceCoordinator: createHostServiceCoordinatorRouter(),
 		tabTearoff: createTabTearoffRouter(wm),
 		extensions: createExtensionsRouter(getWindow),
+		vibrancy: createVibrancyRouter(wm),
 		vscodeExtensions: createVscodeExtensionsRouter(),
 	});
 };

apps/desktop/src/lib/trpc/routers/vibrancy.ts

@@ -0,0 +1,92 @@
+import { observable } from "@trpc/server/observable";
+import { nativeTheme } from "electron";
+import { appState } from "main/lib/app-state";
+import {
+	applyVibrancy,
+	DEFAULT_VIBRANCY_STATE,
+	isNativeContinuousBlurSupported,
+	isVibrancySupported,
+	normalizeVibrancyState,
+	type VibrancyBlurLevel,
+	type VibrancyState,
+} from "main/lib/vibrancy";
+import { VIBRANCY_EVENTS, vibrancyEmitter } from "main/lib/vibrancy/emitter";
+import type { WindowManager } from "main/lib/window-manager";
+import { z } from "zod";
+import { publicProcedure, router } from "..";
+
+const blurLevelSchema: z.ZodType<VibrancyBlurLevel> = z.enum([
+	"subtle",
+	"standard",
+	"strong",
+	"ultra",
+]);
+
+const vibrancyInputSchema = z.object({
+	enabled: z.boolean().optional(),
+	opacity: z.number().int().min(0).max(100).optional(),
+	blurLevel: blurLevelSchema.optional(),
+	blurRadius: z.number().min(0).max(100).optional(),
+});
+
+function getCurrentState(): VibrancyState {
+	const stored = appState.data?.vibrancyState;
+	// Merge over defaults so older on-disk states (written before we added
+	// blurRadius) still produce a complete VibrancyState. Otherwise the
+	// missing field would round-trip as `undefined` and the slider would
+	// appear to reset on every restart.
+	return { ...DEFAULT_VIBRANCY_STATE, ...stored };
+}
+
+async function writeState(next: VibrancyState): Promise<void> {
+	if (!appState.data) return;
+	appState.data.vibrancyState = next;
+	await appState.write();
+}
+
+function broadcastVibrancy(wm: WindowManager, state: VibrancyState): void {
+	const isDark = nativeTheme.shouldUseDarkColors;
+	for (const window of wm.getAll().values()) {
+		applyVibrancy(window, state, isDark);
+	}
+}
+
+export const createVibrancyRouter = (wm: WindowManager) => {
+	return router({
+		getSupported: publicProcedure.query(() => {
+			return {
+				supported: isVibrancySupported(),
+				nativeBlurSupported: isNativeContinuousBlurSupported(),
+			};
+		}),
+
+		get: publicProcedure.query(() => {
+			return getCurrentState();
+		}),
+
+		set: publicProcedure
+			.input(vibrancyInputSchema)
+			.mutation(async ({ input }) => {
+				const current = getCurrentState();
+				const next = normalizeVibrancyState(input, current);
+				await writeState(next);
+				broadcastVibrancy(wm, next);
+				vibrancyEmitter.emit(VIBRANCY_EVENTS.CHANGED, next);
+				return next;
+			}),
+
+		onChanged: publicProcedure.subscription(() => {
+			return observable<VibrancyState>((emit) => {
+				const handler = (state: VibrancyState) => {
+					emit.next(state);
+				};
+				vibrancyEmitter.on(VIBRANCY_EVENTS.CHANGED, handler);
+				return () => {
+					vibrancyEmitter.off(VIBRANCY_EVENTS.CHANGED, handler);
+				};
+			});
+		}),
+	});
+};
+
+export type VibrancyRouter = ReturnType<typeof createVibrancyRouter>;

apps/desktop/src/main/lib/app-state/index.ts

@@ -60,6 +60,10 @@ function ensureValidShape(data: Partial<AppState>): AppState {
 				...(data.hotkeysState?.byPlatform ?? {}),
 			},
 		},
+		vibrancyState: {
+			...defaultAppState.vibrancyState,
+			...(data.vibrancyState ?? {}),
+		},
 	};
 }
 

apps/desktop/src/main/lib/app-state/schemas.ts

@@ -3,6 +3,10 @@
  */
 import type { BaseTabsState } from "shared/tabs-types";
 import type { Theme } from "shared/themes";
+import {
+	DEFAULT_VIBRANCY_STATE,
+	type VibrancyState,
+} from "shared/vibrancy-types";
 
 // Re-export for convenience
 export type { BaseTabsState as TabsState, Pane } from "shared/tabs-types";
@@ -24,6 +28,7 @@ export interface AppState {
 	tabsState: BaseTabsState;
 	themeState: ThemeState;
 	hotkeysState: LegacyHotkeysState;
+	vibrancyState: VibrancyState;
 }
 
 export const defaultAppState: AppState = {
@@ -44,4 +49,5 @@ export const defaultAppState: AppState = {
 		version: 1,
 		byPlatform: { darwin: {}, win32: {}, linux: {} },
 	},
+	vibrancyState: DEFAULT_VIBRANCY_STATE,
 };

apps/desktop/src/main/lib/vibrancy/emitter.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from "node:events";
+import type { VibrancyState } from "./index";
+
+export const VIBRANCY_EVENTS = {
+	CHANGED: "vibrancy:changed",
+} as const;
+
+type VibrancyEvents = {
+	[VIBRANCY_EVENTS.CHANGED]: [VibrancyState];
+};
+
+export const vibrancyEmitter = new EventEmitter() as EventEmitter & {
+	on<K extends keyof VibrancyEvents>(
+		event: K,
+		listener: (...args: VibrancyEvents[K]) => void,
+	): EventEmitter;
+	off<K extends keyof VibrancyEvents>(
+		event: K,
+		listener: (...args: VibrancyEvents[K]) => void,
+	): EventEmitter;
+	emit<K extends keyof VibrancyEvents>(
+		event: K,
+		...args: VibrancyEvents[K]
+	): boolean;
+};