@cosmicdrift/kumiko-renderer-web 0.193.0 → 0.193.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.193.0",
+  "version": "0.193.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.193.0",
-    "@cosmicdrift/kumiko-headless": "0.193.0",
-    "@cosmicdrift/kumiko-renderer": "0.193.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.193.1",
+    "@cosmicdrift/kumiko-headless": "0.193.1",
+    "@cosmicdrift/kumiko-renderer": "0.193.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/lib/__tests__/resize-image.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, mock, test } from "bun:test";
+import { resizeImageBeforeUpload } from "../resize-image";
+
+describe("resizeImageBeforeUpload", () => {
+  test("lässt Nicht-Bilder unverändert", async () => {
+    const file = new File(["hi"], "report.pdf", { type: "application/pdf" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("fehlt OffscreenCanvas, bleibt das Bild unverändert", async () => {
+    // @ts-expect-error simulate a browser without OffscreenCanvas support
+    globalThis.OffscreenCanvas = undefined;
+    const file = new File(["hi"], "photo.jpg", { type: "image/jpeg" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("lässt SVGs unverändert (Vektor würde beim Re-Encode zerstört)", async () => {
+    const file = new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("lässt GIFs unverändert (Animation würde auf ein Frame kollabieren)", async () => {
+    const file = new File(["gif"], "anim.gif", { type: "image/gif" });
+    const result = await resizeImageBeforeUpload(file);
+    expect(result).toBe(file);
+  });
+
+  test("skaliert auf maxEdge herunter und behält das Seitenverhältnis", async () => {
+    const bitmap = { close: mock(() => {}), height: 2000, width: 4000 };
+    let capturedWidth = 0;
+    let capturedHeight = 0;
+    class FakeOffscreenCanvas {
+      constructor(w: number, h: number) {
+        capturedWidth = w;
+        capturedHeight = h;
+      }
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x"], { type: "image/jpeg" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => bitmap);
+
+    try {
+      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      const result = await resizeImageBeforeUpload(file, 2560);
+      expect(capturedWidth).toBe(2560);
+      expect(capturedHeight).toBe(1280);
+      expect(result.name).toBe("photo.jpg");
+      expect(result.type).toBe("image/jpeg");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("konvertiert nicht-erhaltbare Formate zu jpeg und passt die Extension an", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob(opts: { type: string }) {
+        return Promise.resolve(new Blob(["x"], { type: opts.type }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result.name).toBe("photo.jpg");
+      expect(result.type).toBe("image/jpeg");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("benennt nach dem tatsächlich erzeugten Blob-Typ, nicht dem angeforderten", async () => {
+    // A browser without webp encoding support silently falls back to png
+    // (spec behavior of convertToBlob) — naming must follow the blob, or a
+    // ".webp" file ends up holding png bytes with a matching-looking mimeType.
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["x"], { type: "image/png" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const file = new File(["x"], "photo.webp", { type: "image/webp" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result.name).toBe("photo.png");
+      expect(result.type).toBe("image/png");
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+
+  test("fällt bei Decode-Fehlern auf die Originaldatei zurück", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in jsdom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => {
+      throw new Error("unsupported format");
+    });
+
+    try {
+      const file = new File(["x"], "photo.heic", { type: "image/heic" });
+      const result = await resizeImageBeforeUpload(file);
+      expect(result).toBe(file);
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
+});

package/src/lib/resize-image.ts

@@ -0,0 +1,61 @@
+const DEFAULT_MAX_EDGE = 2560;
+
+// Raster formats a canvas can losslessly re-encode as themselves; anything
+// else (heic, bmp, tiff, ...) falls back to jpeg. svg/gif are excluded
+// upstream (vector/animation would be destroyed by a canvas re-encode).
+const PRESERVED_TYPES = new Set(["image/png", "image/webp"]);
+const OUTPUT_EXTENSIONS: Record<string, string> = {
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "image/webp": "webp",
+};
+
+function pickOutputType(inputType: string): string {
+  return PRESERVED_TYPES.has(inputType) ? inputType : "image/jpeg";
+}
+
+// The server validates the upload's extension against its mimeType
+// (mime_mismatch), so a re-encode that changes type must rename the file too.
+function withMatchingExtension(fileName: string, outputType: string): string {
+  const ext = OUTPUT_EXTENSIONS[outputType] ?? "jpg";
+  const dot = fileName.lastIndexOf(".");
+  const base = dot > 0 ? fileName.slice(0, dot) : fileName;
+  return `${base}.${ext}`;
+}
+
+// Downscales images before upload to a reasonable edge length (bandwidth)
+// and drops EXIF/GPS as a side effect (canvas re-encode carries no
+// metadata). Missing OffscreenCanvas/createImageBitmap (older browser), or a
+// decode failure, leaves the file unchanged — no hard error before upload.
+export async function resizeImageBeforeUpload(
+  file: File,
+  maxEdge = DEFAULT_MAX_EDGE,
+): Promise<File> {
+  if (!file.type.startsWith("image/")) return file;
+  if (file.type === "image/svg+xml" || file.type === "image/gif") return file;
+  if (typeof OffscreenCanvas === "undefined" || typeof createImageBitmap !== "function") {
+    return file;
+  }
+  try {
+    const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+    const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
+    const width = Math.round(bitmap.width * scale);
+    const height = Math.round(bitmap.height * scale);
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) return file;
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    bitmap.close();
+    const blob = await canvas.convertToBlob({ type: pickOutputType(file.type), quality: 0.85 });
+    // Name off the blob's actual type, not the requested one — a browser
+    // without webp encoding support silently falls back to png, and naming
+    // by the request would then store a lie (extension/mimeType both "webp"
+    // over png bytes).
+    const actualType = blob.type || file.type;
+    const fileName =
+      actualType === file.type ? file.name : withMatchingExtension(file.name, actualType);
+    return new File([blob], fileName, { type: actualType });
+  } catch {
+    return file;
+  }
+}

package/src/primitives/file-upload.tsx

@@ -6,6 +6,7 @@
 import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
 import { ImageIcon, Loader2, Upload } from "lucide-react";
 import { type ChangeEvent, type ReactNode, useRef, useState } from "react";
+import { resizeImageBeforeUpload } from "../lib/resize-image";
 import { Button as UiButton } from "../ui/button";
 
 export type FileUploadInputProps = {
@@ -47,8 +48,9 @@ export function FileUploadInput({
     setUploading(true);
     setError(null);
     try {
+      const uploadFile = await resizeImageBeforeUpload(file);
       const fd = new FormData();
-      fd.append("file", file);
+      fd.append("file", uploadFile);
       if (entityType !== undefined) fd.append("entityType", entityType);
       if (fieldName !== undefined) fd.append("fieldName", fieldName);
       // Double-Submit-CSRF wie der Dispatcher: kumiko_csrf-Cookie → Header.

package/src/widgets/__tests__/upload-zone.test.tsx

@@ -54,4 +54,39 @@ describe("UploadZone", () => {
     await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
     expect(input.value).toBe("");
   });
+
+  test("gibt Bilder verkleinert an onUpload weiter (nicht die Originaldatei)", async () => {
+    class FakeOffscreenCanvas {
+      getContext() {
+        return { drawImage: mock(() => {}) };
+      }
+      convertToBlob() {
+        return Promise.resolve(new Blob(["resized-bytes"], { type: "image/jpeg" }));
+      }
+    }
+    // @ts-expect-error test stub for a browser-only API missing in happy-dom
+    globalThis.OffscreenCanvas = FakeOffscreenCanvas;
+    globalThis.createImageBitmap = mock(async () => ({
+      close: mock(() => {}),
+      height: 100,
+      width: 100,
+    }));
+
+    try {
+      const onUpload = mock(async (_uploaded: File) => {});
+      render(<UploadZone title="Datei hochladen" onUpload={onUpload} testId="zone" />);
+      const file = new File(["x"], "photo.jpg", { type: "image/jpeg" });
+      pick(screen.getByTestId("zone-input"), [file]);
+
+      await waitFor(() => expect(onUpload).toHaveBeenCalledTimes(1));
+      const [uploaded] = onUpload.mock.calls[0] ?? [];
+      expect(uploaded?.size).toBe("resized-bytes".length);
+      expect(uploaded?.size).not.toBe(file.size);
+    } finally {
+      // @ts-expect-error restore missing-API baseline
+      globalThis.OffscreenCanvas = undefined;
+      // @ts-expect-error restore missing-API baseline
+      globalThis.createImageBitmap = undefined;
+    }
+  });
 });

package/src/widgets/upload-zone.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
 import { type DragEvent, type ReactNode, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn";
+import { resizeImageBeforeUpload } from "../lib/resize-image";
 
 type UploadRowStatus = "uploading" | "done" | "error";
 
@@ -68,7 +69,7 @@ export function UploadZone({
     const rowId = crypto.randomUUID();
     setRows((prev) => [...prev, { id: rowId, fileName: file.name, status: "uploading" }]);
     try {
-      await onUpload(file);
+      await onUpload(await resizeImageBeforeUpload(file));
       setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
     } catch (cause) {
       const message = cause instanceof Error ? cause.message : "upload_failed";