feat(frame): give ROTATE quarter turns plus a fine straighten

src/components/Viewfinder.tsx

@@ -32,7 +32,7 @@ import { getSkiaColorMatrix, applyExposureGain } from '../utils/colorUtils';
 import { TONE_SKSL, getToneUniforms, toneUniformArray } from '../utils/toneShader';
 import { CINEMA_SKSL, getCinemaUniforms, cinemaOffFlat } from '../utils/cinemaShader';
 import { polaroidLayout, wallframeLayout, WALLFRAME_PNG_W, WALLFRAME_PNG_H } from '../utils/frameUtils';
-import { rotateSkImage90 } from '../utils/skiaImage';
+import { applyPhotoRotation } from '../utils/skiaImage';
 
 interface ViewfinderProps {
   mode: 'camera' | 'library';
@@ -49,8 +49,11 @@ interface ViewfinderProps {
   // custom-watermark position) hides under an open panel. Camera ignores this:
   // its feed rects are normalized against the real window.
   availableHeight?: number | null;
-  // Library only: user rotation of the inserted photo, 0 or 90deg clockwise.
-  photoRotation?: 0 | 90;
+  // Library only: user rotation of the inserted photo — the quarter turn in
+  // degrees clockwise (0/90/180/270) plus the fine STRAIGHTEN offset, applied
+  // on top of that turn.
+  photoRotation?: 0 | 90 | 180 | 270;
+  photoStraighten?: number;
   // WATERMARK tab: double-tap ON the mark re-opens the text editor (App bumps
   // a nonce so the panel puts the caret back in its input).
   onWmEdit?: () => void;
@@ -230,6 +233,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
     onWmEdit,
     wmEditing = false,
     photoRotation = 0,
+    photoStraighten = 0,
     wmRotation = 0,
     wallLandscape = false,
   }: ViewfinderProps,
@@ -327,8 +331,8 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
   // flows through every derived rect (polaroid window aspect, cover crop,
   // watermark area) and the export matches the preview for free.
   const skiaImage = useMemo(
-    () => (photoRotation === 90 ? rotateSkImage90(loadedImage) : loadedImage),
-    [loadedImage, photoRotation]
+    () => applyPhotoRotation(loadedImage, photoRotation, photoStraighten),
+    [loadedImage, photoRotation, photoStraighten]
   );
   // Wall-frame PNG artwork (project root). Loaded lazily so other frames pay
   // no asset cost; source switches to '' when unselected (useImage → null).
@@ -1196,7 +1200,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
   // stretched, and the card keeps its dimensions.
   const polaroidFit: 'cover' | 'contain' | 'fill' = ratioWH
     ? 'cover'
-    : photoRotation === 90
+    : photoRotation === 90 || photoRotation === 270
       ? 'contain'
       : 'fill';
   const polaroidGeo = useMemo(() => {