From 113bb757333e9ad809a401000f3b6b34fa1ef415 Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Sah <siddharth123sk@gmail.com>
Date: Mon, 23 Mar 2026 12:50:19 +0800
Subject: [PATCH] feat: add CSS transform props to ImageViewer for live
 rotate/flip preview

---
 .../src/components/common/image-viewer.tsx    | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/common/image-viewer.tsx b/apps/web/src/components/common/image-viewer.tsx
index f6af4621..6cce6c81 100644
--- a/apps/web/src/components/common/image-viewer.tsx
+++ b/apps/web/src/components/common/image-viewer.tsx
@@ -6,12 +6,15 @@ interface ImageViewerProps {
   src: string;
   filename: string;
   fileSize: number;
+  cssRotate?: number;
+  cssFlipH?: boolean;
+  cssFlipV?: boolean;
 }
 
 const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200, 300];
 const DEFAULT_ZOOM = 100;
 
-export function ImageViewer({ src, filename, fileSize }: ImageViewerProps) {
+export function ImageViewer({ src, filename, fileSize, cssRotate, cssFlipH, cssFlipV }: ImageViewerProps) {
   const [zoom, setZoom] = useState(DEFAULT_ZOOM);
   const [naturalWidth, setNaturalWidth] = useState<number | null>(null);
   const [naturalHeight, setNaturalHeight] = useState<number | null>(null);
@@ -62,10 +65,26 @@ export function ImageViewer({ src, filename, fileSize }: ImageViewerProps) {
     setNaturalHeight(null);
   }, [src]);
 
+  const previewTransform = [
+    cssRotate ? `rotate(${cssRotate}deg)` : "",
+    cssFlipH ? "scaleX(-1)" : "",
+    cssFlipV ? "scaleY(-1)" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   const imageStyle =
     fitMode === "fit"
-      ? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" as const }
-      : { transform: `scale(${zoom / 100})`, transformOrigin: "center center" };
+      ? {
+          maxWidth: "100%",
+          maxHeight: "100%",
+          objectFit: "contain" as const,
+          ...(previewTransform && { transform: previewTransform }),
+        }
+      : {
+          transform: `scale(${zoom / 100})${previewTransform ? ` ${previewTransform}` : ""}`,
+          transformOrigin: "center center",
+        };
 
   return (
     <div className="flex flex-col w-full h-full max-w-3xl mx-auto">