feat: 16:9 landscape canvas + F-key presentation mode

- image prompt: vertical 9:16 → landscape 16:9 cinematic, scene fills
  canvas with bottom dialogue band and horizontal choice row
- image-client: pass size=1792x1024 hint (provider honors it → output is
  now exact 16:9 instead of the model's default 1.75:1)
- PlayCanvas: drop 560px cap, use object-contain into available space,
  add fullViewport prop for chrome-less presentation rendering
- play page: F / Esc shortcuts + Fullscreen API + fullscreenchange
  sync; chrome-less black-letterbox overlay (bg-black) suited for
  screen recording

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

apps/web/app/play/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { PlayCanvas, type Phase } from "@/components/PlayCanvas";
 import { PRESETS } from "@/lib/presets";
 import type {
@@ -29,11 +29,59 @@ function PlayInner() {
   } | null>(null);
   const [turnNum, setTurnNum] = useState(0);
   const [error, setError] = useState<string | null>(null);
+  const [presentation, setPresentation] = useState(false);
 
   const startedRef = useRef(false);
   const prefetchAbortRef = useRef<AbortController | null>(null);
   const prefetchRef = useRef<Record<string, Promise<InteractResponse>>>({});
 
+  const togglePresentation = useCallback(async () => {
+    const entering = !presentation;
+    if (entering) {
+      try {
+        if (!document.fullscreenElement) {
+          await document.documentElement.requestFullscreen();
+        }
+      } catch {
+        // Browser may refuse fullscreen — still enter chrome-less mode
+      }
+      setPresentation(true);
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+      } catch {
+        // ignore
+      }
+      setPresentation(false);
+    }
+  }, [presentation]);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "f" || e.key === "F") {
+        if (e.metaKey || e.ctrlKey || e.altKey) return;
+        e.preventDefault();
+        void togglePresentation();
+      } else if (e.key === "Escape" && presentation) {
+        setPresentation(false);
+      }
+    }
+    function onFullscreenChange() {
+      // Sync if user exited browser fullscreen via Esc / system gesture
+      if (!document.fullscreenElement && presentation) {
+        setPresentation(false);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    };
+  }, [togglePresentation, presentation]);
+
   useEffect(() => {
     if (startedRef.current) return;
     startedRef.current = true;
@@ -241,6 +289,20 @@ function PlayInner() {
     );
   }
 
+  if (presentation) {
+    return (
+      <div className="fixed inset-0 bg-black flex items-center justify-center z-50">
+        <PlayCanvas
+          imageBase64={imageBase64}
+          phase={phase}
+          pendingClick={pendingClick}
+          onClick={handleClick}
+          fullViewport
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen flex flex-col">
       <header className="px-5 md:px-12 pt-6 md:pt-8 flex items-center justify-between">
@@ -300,10 +362,18 @@ function PlayInner() {
         </div>
       </main>
 
-      <footer className="px-5 md:px-12 pb-6">
-        <div className="text-[9px] smallcaps text-clay-400 text-center num">
-          Ⅰ · Ⅰ
-        </div>
+      <footer className="px-5 md:px-12 pb-6 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => void togglePresentation()}
+          className="text-[9px] smallcaps text-clay-400 hover:text-clay-700 transition-colors flex items-center gap-2"
+          aria-label="进入演示模式"
+        >
+          <i className="fa-solid fa-expand text-[10px]" />
+          F · 演 · 示
+        </button>
+        <div className="text-[9px] smallcaps text-clay-400 num">Ⅰ · Ⅰ</div>
+        <span className="text-[9px] w-[60px]" aria-hidden />
       </footer>
     </div>
   );

apps/web/components/PlayCanvas.tsx

@@ -12,11 +12,13 @@ export function PlayCanvas({
   phase,
   pendingClick,
   onClick,
+  fullViewport = false,
 }: {
   imageBase64: string | null;
   phase: Phase;
   pendingClick: { x: number; y: number } | null;
   onClick: (click: { x: number; y: number }) => void;
+  fullViewport?: boolean;
 }) {
   const imgRef = useRef<HTMLImageElement>(null);
   const [dims, setDims] = useState<{ w: number; h: number } | null>(null);
@@ -35,10 +37,26 @@ export function PlayCanvas({
   const interactive = phase === "ready" && !!imageBase64;
   const dimmed = phase === "interacting";
 
+  // 16:9 sizing — letterbox into available viewport
+  const sizeStyle = fullViewport
+    ? { maxWidth: "100vw", maxHeight: "100dvh" }
+    : { maxWidth: "96vw", maxHeight: "calc(100dvh - 280px)" };
+
+  // Placeholder needs an explicit width for aspect-video to compute height.
+  // Pick the largest 16:9 box that fits in the available viewport.
+  const placeholderWidth = fullViewport
+    ? "min(100vw, calc(100dvh * 16 / 9))"
+    : "min(96vw, calc((100dvh - 280px) * 16 / 9))";
+
   return (
-    <div className="w-full flex flex-col items-center">
+    <div
+      className={`flex flex-col items-center ${fullViewport ? "w-full h-full justify-center" : "w-full"}`}
+    >
       {imageBase64 ? (
-        <div className="relative inline-block" style={{ boxShadow: SHADOW }}>
+        <div
+          className="relative inline-block"
+          style={{ boxShadow: fullViewport ? "none" : SHADOW }}
+        >
           <img
             key={imageBase64.slice(-48)}
             ref={imgRef}
@@ -51,14 +69,15 @@ export function PlayCanvas({
             }}
             draggable={false}
             className={`block w-auto h-auto select-none animate-fade-in transition-opacity duration-700 ease-out ${interactive ? "cursor-pointer" : "cursor-wait"} ${dimmed ? "opacity-30" : "opacity-100"}`}
-            style={{
-              maxWidth: "min(560px, 92vw)",
-              maxHeight: "calc(100dvh - 200px)",
-            }}
+            style={sizeStyle}
           />
 
-          <div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-clay-900/12 to-transparent pointer-events-none" />
-          <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-clay-900/12 to-transparent pointer-events-none" />
+          {!fullViewport && (
+            <>
+              <div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-clay-900/12 to-transparent pointer-events-none" />
+              <div className="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-clay-900/12 to-transparent pointer-events-none" />
+            </>
+          )}
 
           {pendingClick && (
             <>
@@ -92,10 +111,10 @@ export function PlayCanvas({
         </div>
       ) : (
         <div
-          className="relative aspect-[2/3] bg-cream-200 flex flex-col items-center justify-center gap-4"
+          className="relative aspect-video bg-cream-200 flex flex-col items-center justify-center gap-4"
           style={{
-            width: "min(560px, calc((100dvh - 200px) * 2 / 3), 92vw)",
-            boxShadow: SHADOW,
+            width: placeholderWidth,
+            boxShadow: fullViewport ? "none" : SHADOW,
           }}
         >
           <div className="w-1.5 h-1.5 bg-clay-500 rounded-full animate-slow-pulse" />
@@ -105,17 +124,19 @@ export function PlayCanvas({
         </div>
       )}
 
-      <div
-        className="flex items-center justify-between mt-3 px-1 w-full"
-        style={{ maxWidth: "min(560px, 92vw)" }}
-      >
-        <span className="text-[9px] smallcaps text-clay-400 num">
-          {dims ? `${dims.w} × ${dims.h} · png` : "—"}
-        </span>
-        <span className="text-[9px] smallcaps text-clay-400">
-          {phase === "ready" ? "任 · 意 · 点 · 击" : "···"}
-        </span>
-      </div>
+      {!fullViewport && (
+        <div
+          className="flex items-center justify-between mt-3 px-1 w-full"
+          style={{ maxWidth: "96vw" }}
+        >
+          <span className="text-[9px] smallcaps text-clay-400 num">
+            {dims ? `${dims.w} × ${dims.h} · png` : "—"}
+          </span>
+          <span className="text-[9px] smallcaps text-clay-400">
+            {phase === "ready" ? "任 · 意 · 点 · 击" : "···"}
+          </span>
+        </div>
+      )}
     </div>
   );
 }