From 7bc718f9e3104e7f21015ee746774e3056dc1cab Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 2 Jul 2026 19:28:20 +0200
Subject: [PATCH] =?UTF-8?q?fix(machine):=20rotate=20pairing=20camera=20pre?=
 =?UTF-8?q?view=2090=C2=B0=20CCW=20for=20the=20Sintra=20mount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Sintra's camera is physically mounted rotated, so the wizard's viewfinder
showed a sideways image — hard to aim at the spire-seed QR. Rotate the preview
90° CCW (-rotate-90). Preview-only: qr-source decodes the raw frame (CSS
transforms don't touch canvas drawImage) and QR decoding is rotation-invariant,
so scanning is unaffected. The viewfinder is a square, overflow-hidden container,
so the rotated square stays in the box.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/machine/src/components/PairingWizard.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/machine/src/components/PairingWizard.vue b/apps/machine/src/components/PairingWizard.vue
index fb343e1..7057730 100644
--- a/apps/machine/src/components/PairingWizard.vue
+++ b/apps/machine/src/components/PairingWizard.vue
@@ -157,7 +157,17 @@ onUnmounted(teardown)
       class="relative overflow-hidden rounded-2xl border-4 border-primary/40 bg-black"
       style="width: min(80vw, 28rem); aspect-ratio: 1 / 1"
     >
-      <video ref="videoEl" class="h-full w-full object-cover" muted autoplay playsinline></video>
+      <!-- The Sintra's camera is mounted rotated, so rotate the preview 90° CCW
+           for an upright image. Preview-only: qr-source decodes the raw (un-
+           rotated) frame and QR decoding is rotation-invariant. The container is
+           square + overflow-hidden, so the rotated square stays in the box. -->
+      <video
+        ref="videoEl"
+        class="h-full w-full -rotate-90 object-cover"
+        muted
+        autoplay
+        playsinline
+      ></video>
       <!-- Reticle -->
       <div class="pointer-events-none absolute inset-6 rounded-xl border-2 border-white/70"></div>
     </div>