ux(provisioning): draw portrait diagram pre-rotated

Portrait was drawn upright (tall rect, ribbon on left, arrow up) so the
diagram only made sense while looking at the frame in landscape. The
intended UX is the opposite: the diagram is meant to be read AFTER the
user tilts the frame 90° CW into portrait, at which point it should
look correct.

Render the portrait diagram rotated 90° CCW from upright in the
landscape source — wide rect, ribbon on the bottom, arrow pointing
left. When the user tilts the frame CW, this rotates with the e-ink
content and lands as the canonical portrait view: tall rect, ribbon
on the left, up-arrow pointing up.

Side effect: the landscape diagram looks "rotated" when the frame is
in portrait, which is the same trick in reverse and the desired
behavior.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

scripts/gen_screens.py

@@ -118,16 +118,12 @@ def up_arrow(draw, cx, cy, half_w=12, h=22, color=BK):
     ], fill=color)
 
 
-def right_arrow(draw, cx, cy, half_h=12, w=22, color=BK):
-    """Solid filled triangle pointing right, centered on (cx, cy).
-
-    Used in the portrait diagram: with the cable/ribbon on the left,
-    the physical 'up' edge of the frame (when hung) is the right side
-    of the rendered diagram, so the arrow points that way."""
+def left_arrow(draw, cx, cy, half_h=12, w=22, color=BK):
+    """Solid filled triangle pointing left, centered on (cx, cy)."""
     draw.polygon([
-        (cx + w // 2,  cy),            # tip
-        (cx - w // 2,  cy - half_h),   # base top
-        (cx - w // 2,  cy + half_h),   # base bottom
+        (cx - w // 2,  cy),            # tip
+        (cx + w // 2,  cy - half_h),   # base top
+        (cx + w // 2,  cy + half_h),   # base bottom
     ], fill=color)
 
 
@@ -162,17 +158,23 @@ def orientation_diagrams(draw, accent, show_active_ls=True):
     sep_y = ls_y + ls_h + rib_h + 14
     draw.rectangle([CTR_X+10, sep_y, CTR_X+CTR_W-10, sep_y], fill=(180,180,175))
 
-    # ── Portrait ──────────────────────────────────────────────────
-    pt_x, pt_y = CTR_X+56, sep_y+14
-    pt_w, pt_h = 64, 106
-    pr_w, pr_h = 10, 106
+    # ── Portrait — drawn 90° CCW from upright so it rotates back to a
+    # correct portrait view (tall rect, ribbon on left, arrow pointing
+    # up) when the user tilts the frame 90° CW from landscape. In the
+    # source/landscape view it appears as a wide rect with the ribbon
+    # on the bottom and the arrow pointing left — looks "rotated"
+    # because it is, on purpose.
+    pt_w, pt_h = 106, 64
+    pr_w, pr_h = 106, 10
+    pt_x = CTR_X + (CTR_W - pt_w) // 2
+    pt_y = sep_y + 14
 
     text_center(draw, cx, pt_y-14, "PORTRAIT", F_LABEL, BK)
 
-    draw.rectangle([pt_x-pr_w, pt_y, pt_x-1, pt_y+pr_h-1], fill=BK)
     draw.rectangle([pt_x, pt_y, pt_x+pt_w-1, pt_y+pt_h-1], outline=BK, width=3)
+    draw.rectangle([pt_x, pt_y+pt_h, pt_x+pr_w-1, pt_y+pt_h+pr_h-1], fill=BK)
 
-    right_arrow(draw, pt_x + pt_w // 2, pt_y + pt_h // 2, half_h=12, w=22)
+    left_arrow(draw, pt_x + pt_w // 2, pt_y + pt_h // 2, half_h=12, w=22)
 
 
 # ═══════════════════════════════════════════════════════════════════════════════