feat(web): import themes from local .vsix extension packages

apps/desktop/src/ipc/methods/window.test.ts

@@ -1,11 +1,14 @@
+import * as NodePath from "@effect/platform-node/NodePath";
 import { assert, describe, it } from "@effect/vitest";
 import * as NodeServices from "@effect/platform-node/NodeServices";
 import { HostProcessEnvironment, HostProcessPlatform } from "@t3tools/shared/hostProcess";
 import * as FileSystem from "effect/FileSystem";
+import * as ByteSize from "effect/ByteSize";
 import * as Path from "effect/Path";
 import * as Effect from "effect/Effect";
 import * as Layer from "effect/Layer";
 import * as Option from "effect/Option";
+import { THEME_PACKAGE_MAX_BYTES } from "@t3tools/contracts";
 import { vi } from "vite-plus/test";
 
 import type * as Electron from "electron";
@@ -30,9 +33,66 @@ import {
   getWindowFullscreenState,
   pasteAsText,
   pickProjectFavicon,
+  pickThemeFiles,
   probeRemoteEditors,
 } from "./window.ts";
 
+function fileInfo(size: number): FileSystem.File.Info {
+  return {
+    type: "File",
+    mtime: Option.none(),
+    atime: Option.none(),
+    birthtime: Option.none(),
+    dev: 0,
+    ino: Option.none(),
+    mode: 0,
+    nlink: Option.none(),
+    uid: Option.none(),
+    gid: Option.none(),
+    rdev: Option.none(),
+    size: ByteSize.bytes(size),
+    blksize: Option.none(),
+    blocks: Option.none(),
+  };
+}
+
+function testFile(readAlloc: FileSystem.File["readAlloc"]): FileSystem.File {
+  return {
+    [FileSystem.FileTypeId]: FileSystem.FileTypeId,
+    stat: Effect.succeed(fileInfo(0)),
+    seek: () => Effect.succeed(0n),
+    sync: Effect.void,
+    read: () => Effect.succeed(0),
+    readAlloc,
+    truncate: () => Effect.void,
+    write: () => Effect.succeed(0),
+    writeAll: () => Effect.void,
+  };
+}
+
+function pickThemeFilesLayer({
+  fileSize,
+  readAlloc,
+}: {
+  fileSize: number;
+  readAlloc: FileSystem.File["readAlloc"];
+}) {
+  return Layer.mergeAll(
+    Layer.mock(ElectronDialog.ElectronDialog)({
+      pickFiles: () => Effect.succeed(["/themes/aurora.vsix"]),
+    }),
+    Layer.mock(ElectronWindow.ElectronWindow)({
+      focusedMainOrFirst: Effect.succeed(Option.none()),
+    }),
+    FileSystem.layerNoop({
+      exists: () => Effect.succeed(false),
+      stat: () => Effect.succeed(fileInfo(fileSize)),
+      open: () => Effect.succeed(testFile(readAlloc)),
+    }),
+    NodePath.layer,
+  );
+}
+
 const readyWslConfig: DesktopBackendManager.DesktopBackendStartConfig = {
   executablePath: "wsl.exe",
   args: ["-d", "Ubuntu", "--", "node", "/app/bin.mjs"],
@@ -296,3 +356,51 @@ it.effect.skipIf(HostProcessPlatform.defaultValue() === "win32")(
       assert.notInclude(editors, "webstorm");
     }).pipe(Effect.scoped, Effect.provide(NodeServices.layer)),
 );
+
+describe("pickThemeFiles", () => {
+  it.effect("returns a base64-encoded extension package without text", () => {
+    const bytes = new TextEncoder().encode("theme package");
+    let readCount = 0;
+
+    return Effect.gen(function* () {
+      const result = yield* pickThemeFiles.handler(undefined);
+
+      assert.deepEqual(result, [
+        {
+          name: "aurora.vsix",
+          size: bytes.byteLength,
+          text: "",
+          contentBase64: Buffer.from(bytes).toString("base64"),
+        },
+      ]);
+    }).pipe(
+      Effect.provide(
+        pickThemeFilesLayer({
+          fileSize: bytes.byteLength,
+          readAlloc: () => Effect.succeed(readCount++ === 0 ? Option.some(bytes) : Option.none()),
+        }),
+      ),
+    );
+  });
+
+  it.effect("reports a package that grows past the read cap as oversized", () =>
+    Effect.gen(function* () {
+      const result = yield* pickThemeFiles.handler(undefined);
+
+      assert.deepEqual(result, [
+        {
+          name: "aurora.vsix",
+          size: THEME_PACKAGE_MAX_BYTES + 1,
+          text: "",
+        },
+      ]);
+    }).pipe(
+      Effect.provide(
+        pickThemeFilesLayer({
+          fileSize: 1,
+          readAlloc: () => Effect.succeed(Option.some(new Uint8Array(64 * 1024))),
+        }),
+      ),
+    ),
+  );
+});

apps/desktop/src/ipc/methods/window.ts

@@ -6,6 +6,8 @@ import {
   EDITORS,
   EditorId,
   PickedThemeFileSchema,
+  THEME_FILE_MAX_BYTES,
+  THEME_PACKAGE_MAX_BYTES,
   PickFolderOptionsSchema,
   PRIMARY_LOCAL_ENVIRONMENT_ID,
   REMOTE_CAPABLE_EDITOR_IDS,
@@ -19,6 +21,7 @@ import * as HostProcess from "@t3tools/shared/hostProcess";
 import * as NodeOS from "node:os";
 import * as FileSystem from "effect/FileSystem";
 import * as Path from "effect/Path";
+import type { PlatformError } from "effect/PlatformError";
 import * as Effect from "effect/Effect";
 import * as Option from "effect/Option";
 import * as Schema from "effect/Schema";
@@ -373,9 +376,37 @@ export const pasteAsText = DesktopIpc.makeIpcMethod({
   }),
 });
 
-/** Theme files are a few KB; anything larger returns empty text and lets the
- *  renderer reject it by size without the contents ever crossing the bridge. */
-const PICKED_THEME_FILE_MAX_BYTES = 256 * 1024;
+/** Reads at most `limit` bytes. The cap is enforced while reading, not by a
+ *  prior stat, so a file that grows between the size check and the read can
+ *  never pull more than the cap into memory. Returns None past the limit. */
+const readCappedFile = Effect.fn("desktop.ipc.window.readCappedFile")(function* (
+  filePath: string,
+  limit: number,
+): Effect.fn.Return<Option.Option<Uint8Array>, PlatformError, FileSystem.FileSystem> {
+  const fileSystem = yield* FileSystem.FileSystem;
+  return yield* Effect.scoped(
+    Effect.gen(function* () {
+      const file = yield* fileSystem.open(filePath);
+      const chunks: Uint8Array[] = [];
+      let byteLength = 0;
+      while (byteLength <= limit) {
+        const chunk = yield* file.readAlloc(64 * 1024);
+        if (Option.isNone(chunk) || chunk.value.byteLength === 0) {
+          const bytes = new Uint8Array(byteLength);
+          let offset = 0;
+          for (const part of chunks) {
+            bytes.set(part, offset);
+            offset += part.byteLength;
+          }
+          return Option.some(bytes);
+        }
+        chunks.push(chunk.value);
+        byteLength += chunk.value.byteLength;
+      }
+      return Option.none<Uint8Array>();
+    }),
+  );
+});
 
 export const pickThemeFiles = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.PICK_THEME_FILES_CHANNEL,
@@ -396,21 +427,40 @@ export const pickThemeFiles = DesktopIpc.makeIpcMethod({
     const paths = yield* dialog.pickFiles({
       owner: yield* electronWindow.focusedMainOrFirst,
       defaultPath: defaultPath ? Option.some(extensionsDir) : Option.none(),
-      filters: [{ name: "JSON", extensions: ["json"] }],
+      filters: [
+        { name: "Themes", extensions: ["json", "vsix"] },
+        { name: "JSON", extensions: ["json"] },
+        { name: "Extension package", extensions: ["vsix"] },
+      ],
       multiple: true,
     });
     if (paths.length === 0) {
       return null;
     }
     return yield* Effect.forEach(paths, (filePath) => {
       const name = path.basename(filePath);
+      const isPackage = name.toLowerCase().endsWith(".vsix");
       return Effect.gen(function* () {
         const info = yield* fileSystem.stat(filePath);
         const size = Number(info.size);
-        if (size > PICKED_THEME_FILE_MAX_BYTES) {
+        const limit = isPackage ? THEME_PACKAGE_MAX_BYTES : THEME_FILE_MAX_BYTES;
+        // Oversized files never get read; the renderer rejects them by size.
+        if (size > limit) {
           return { name, size, text: "" } satisfies PickedThemeFile;
         }
-        const text = yield* fileSystem.readFileString(filePath);
+        const bytes = yield* readCappedFile(filePath, limit);
+        if (Option.isNone(bytes)) {
+          // Grew past the cap after stat; report a size the renderer
+          // rejects as oversized.
+          return { name, size: limit + 1, text: "" } satisfies PickedThemeFile;
+        }
+        // A package is binary, so it crosses the bridge base64-encoded; the
+        // renderer unzips it and never looks at `text`.
+        if (isPackage) {
+          const contentBase64 = Buffer.from(bytes.value).toString("base64");
+          return { name, size, text: "", contentBase64 } satisfies PickedThemeFile;
+        }
+        const text = new TextDecoder().decode(bytes.value);
         return { name, size, text } satisfies PickedThemeFile;
       }).pipe(
         // An unreadable file degrades to an entry the renderer reports.

apps/web/src/components/settings/ThemeImportDialog.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vite-plus/test";
 
-import { describeOversizedThemeFile, MAX_THEME_FILE_BYTES } from "./ThemeImportDialog";
+import {
+  describeOversizedThemeFile,
+  describeOversizedThemePackage,
+  isThemePackageName,
+  MAX_THEME_FILE_BYTES,
+} from "./ThemeImportDialog";
+import { MAX_VSIX_BYTES } from "../../vsixThemePackage";
 
 describe("theme import size guard", () => {
   it("accepts anything a theme file could plausibly be", () => {
@@ -19,3 +25,29 @@ describe("theme import size guard", () => {
     expect(describeOversizedThemeFile(MAX_THEME_FILE_BYTES + 1)).toContain("256 KB");
   });
 });
+
+describe("theme package size guard", () => {
+  it("accepts a package up to the VSIX limit", () => {
+    for (const bytes of [0, MAX_THEME_FILE_BYTES + 1, MAX_VSIX_BYTES]) {
+      expect(describeOversizedThemePackage(bytes)).toBeNull();
+    }
+  });
+
+  it("rejects a package past the VSIX limit and names both sizes", () => {
+    const message = describeOversizedThemePackage(64 * 1024 * 1024);
+    expect(message).toContain("64.0 MB");
+    expect(message).toContain("20.0 MB");
+  });
+});
+
+describe("theme package detection", () => {
+  it("recognizes .vsix regardless of case", () => {
+    expect(isThemePackageName("dracula-pro.vsix")).toBe(true);
+    expect(isThemePackageName("Dracula-Pro.VSIX")).toBe(true);
+  });
+
+  it("leaves theme JSON to the file importer", () => {
+    expect(isThemePackageName("dracula.json")).toBe(false);
+    expect(isThemePackageName("vsix")).toBe(false);
+  });
+});