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

App.tsx

@@ -66,9 +66,11 @@ export default function App() {
   // photo. Library mode letterboxes the image above it so no watermark
   // position hides under an open panel. Null until the first layout pass.
   const [deckTop, setDeckTop] = useState<number | null>(null);
-  // Library photo rotation (FRAME tab), 0 or 90deg clockwise; feeds the
-  // preview source and the export alike.
-  const [photoRotation, setPhotoRotation] = useState<0 | 90>(0);
+  // Library photo rotation (FRAME tab): the quarter turn in degrees clockwise
+  // plus the fine STRAIGHTEN offset. Both feed the preview source and the
+  // export alike, the straighten angle applied on top of the turn.
+  const [photoRotation, setPhotoRotation] = useState<0 | 90 | 180 | 270>(0);
+  const [photoStraighten, setPhotoStraighten] = useState(0);
   useEffect(() => {
     const show = Keyboard.addListener('keyboardDidShow', (e) => setKeyboardHeight(e.endCoordinates.height));
     const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardHeight(0));
@@ -536,6 +538,7 @@ export default function App() {
     setUseGeotag(false);
     setWmRotation(0);
     setPhotoRotation(0);
+    setPhotoStraighten(0);
     setWallLandscape(false);
     setCropRatio('none');
     setCropRect(DEFAULT_CROP_RECT);
@@ -555,6 +558,7 @@ export default function App() {
     useGeotag ||
     wmRotation !== 0 ||
     photoRotation !== 0 ||
+    photoStraighten !== 0 ||
     wallLandscape ||
     cropRatio !== 'none' ||
     differs(cropRect, DEFAULT_CROP_RECT);
@@ -1082,6 +1086,7 @@ export default function App() {
             // save the same crop the preview showed (null = centered 1x).
             frameWindowZoom: viewfinderRef.current?.getFrameWindowZoom?.() ?? null,
             photoRotation,
+            photoStraighten,
           }
         );
 
@@ -1259,6 +1264,7 @@ export default function App() {
           libraryImageUri={libraryImageUri}
           availableHeight={deckTop}
           photoRotation={photoRotation}
+          photoStraighten={photoStraighten}
           cameraPermissionGranted={cameraPermissionGranted}
           onRequestCameraPermission={requestCameraPermission}
           photoOutput={photoOutput}
@@ -1336,7 +1342,9 @@ export default function App() {
                   selectedFrame === 'cinematic')
               }
               photoRotation={photoRotation}
-              onToggleRotation={() => setPhotoRotation((r) => (r === 0 ? 90 : 0))}
+              photoStraighten={photoStraighten}
+              onPickRotation={setPhotoRotation}
+              onStraighten={setPhotoStraighten}
               wallLandscape={wallLandscape}
               onToggleWallLandscape={() => setWallLandscape((v) => !v)}
               useGeotag={useGeotag}