fix: show real image dimensions in right pane for DNG/RAW files

The preview endpoint now returns X-Original-Width/Height headers with
dimensions read from Sharp metadata (or ExifTool for RAW files). The
frontend stores these in FileEntry and the ImageViewer prefers them over
the browser's naturalWidth/naturalHeight, which reflects the resized
preview rather than the original sensor dimensions.

apps/web/src/components/common/image-viewer.tsx

@@ -19,6 +19,8 @@ interface ImageViewerProps {
   src: string;
   filename: string;
   fileSize: number;
+  originalWidth?: number | null;
+  originalHeight?: number | null;
   cssRotate?: number;
   cssFlipH?: boolean;
   cssFlipV?: boolean;
@@ -34,6 +36,8 @@ export function ImageViewer({
   src,
   filename,
   fileSize,
+  originalWidth,
+  originalHeight,
   cssRotate,
   cssFlipH,
   cssFlipV,
@@ -298,9 +302,9 @@ export function ImageViewer({
       <div className="flex items-center justify-between px-3 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0">
         <span className="truncate mr-2">{filename}</span>
         <div className="flex items-center gap-3 shrink-0">
-          {naturalWidth != null && naturalHeight != null && (
+          {(originalWidth || naturalWidth) != null && (originalHeight || naturalHeight) != null && (
             <span>
-              {naturalWidth} x {naturalHeight}
+              {originalWidth || naturalWidth} x {originalHeight || naturalHeight}
             </span>
           )}
           <span>{formatFileSize(fileSize)}</span>

apps/web/src/lib/image-preview.ts

@@ -65,7 +65,13 @@ export function needsServerPreview(file: File): boolean {
   return SERVER_PREVIEW_EXTENSIONS.has(ext);
 }
 
-export async function fetchDecodedPreview(file: File): Promise<string | null> {
+export interface DecodedPreview {
+  url: string;
+  originalWidth: number | null;
+  originalHeight: number | null;
+}
+
+export async function fetchDecodedPreview(file: File): Promise<DecodedPreview | null> {
   try {
     const formData = new FormData();
     formData.append("file", file);
@@ -75,8 +81,16 @@ export async function fetchDecodedPreview(file: File): Promise<string | null> {
       body: formData,
     });
     if (!res.ok) return null;
+
+    const w = Number(res.headers.get("X-Original-Width"));
+    const h = Number(res.headers.get("X-Original-Height"));
+
     const blob = await res.blob();
-    return URL.createObjectURL(blob);
+    return {
+      url: URL.createObjectURL(blob),
+      originalWidth: w > 0 ? w : null,
+      originalHeight: h > 0 ? h : null,
+    };
   } catch {
     return null;
   }

apps/web/src/pages/tool-page.tsx

@@ -631,6 +631,8 @@ export function ToolPage() {
           src={originalBlobUrl}
           filename={fname}
           fileSize={fsize}
+          originalWidth={currentEntry?.originalWidth}
+          originalHeight={currentEntry?.originalHeight}
           {...(isLivePreview && previewTransform
             ? {
                 cssRotate: previewTransform.rotate,

apps/web/src/stores/collage-store.ts

@@ -141,7 +141,7 @@ export const useCollageStore = create<CollageState>((set, get) => ({
     for (const img of newImages) {
       if (img.previewLoading) {
         const imgId = img.id;
-        fetchDecodedPreview(img.file).then((url) => {
+        fetchDecodedPreview(img.file).then((result) => {
           const current = get();
           const idx = current.images.findIndex((i) => i.id === imgId);
           if (idx === -1) return;
@@ -149,7 +149,7 @@ export const useCollageStore = create<CollageState>((set, get) => ({
           updated[idx] = {
             ...updated[idx],
             previewLoading: false,
-            ...(url ? { previewBlobUrl: url } : {}),
+            ...(result ? { previewBlobUrl: result.url } : {}),
           };
           set({ images: updated });
         });

apps/web/src/stores/file-store.ts

@@ -10,6 +10,8 @@ export interface FileEntry {
   processedFilename: string | null;
   processedSize: number | null;
   originalSize: number;
+  originalWidth: number | null;
+  originalHeight: number | null;
   status: "pending" | "processing" | "completed" | "failed";
   error: string | null;
   serverFileId?: string;
@@ -29,6 +31,8 @@ function createEntry(file: File): FileEntry {
     processedFilename: null,
     processedSize: null,
     originalSize: file.size,
+    originalWidth: null,
+    originalHeight: null,
     status: "pending",
     error: null,
     serverFileId: undefined,
@@ -147,13 +151,23 @@ export const useFileStore = create<FileState>((set, get) => ({
     for (let i = 0; i < entries.length; i++) {
       if (needsServerPreview(entries[i].file)) {
         const file = entries[i].file;
-        fetchDecodedPreview(file).then((url) => {
+        fetchDecodedPreview(file).then((result) => {
           const state = get();
           if (state.entries[i]?.file !== file) return;
           const updated = [...state.entries];
           const oldBlobUrl = updated[i].blobUrl;
-          updated[i] = { ...updated[i], previewLoading: false, ...(url ? { blobUrl: url } : {}) };
-          if (url && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
+          updated[i] = {
+            ...updated[i],
+            previewLoading: false,
+            ...(result
+              ? {
+                  blobUrl: result.url,
+                  originalWidth: result.originalWidth,
+                  originalHeight: result.originalHeight,
+                }
+              : {}),
+          };
+          if (result && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
           set({ entries: updated, ...deriveSelected(updated, state.selectedIndex) });
         });
       }
@@ -171,13 +185,23 @@ export const useFileStore = create<FileState>((set, get) => ({
       const i = oldLen + j;
       if (needsServerPreview(newEntries[j].file)) {
         const file = newEntries[j].file;
-        fetchDecodedPreview(file).then((url) => {
+        fetchDecodedPreview(file).then((result) => {
           const state = get();
           if (state.entries[i]?.file !== file) return;
           const updated = [...state.entries];
           const oldBlobUrl = updated[i].blobUrl;
-          updated[i] = { ...updated[i], previewLoading: false, ...(url ? { blobUrl: url } : {}) };
-          if (url && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
+          updated[i] = {
+            ...updated[i],
+            previewLoading: false,
+            ...(result
+              ? {
+                  blobUrl: result.url,
+                  originalWidth: result.originalWidth,
+                  originalHeight: result.originalHeight,
+                }
+              : {}),
+          };
+          if (result && oldBlobUrl) URL.revokeObjectURL(oldBlobUrl);
           set({ entries: updated, ...deriveSelected(updated, state.selectedIndex) });
         });
       }