fix(keyboard): forward iframe keydown events to parent window

When a slide or preview iframe receives focus, keydown events fire in
the iframe's own browsing context and never reach the parent window's
listener. This broke arrow-key navigation and the fullscreen shortcut
(f/F) in DeckViewer, and the fullscreen shortcut in PreviewPane.

Fix: on each iframe's onLoad, attach a keydown listener to its
contentWindow that re-dispatches the event on the parent window.

A shared isEditableTarget() helper (src/lib/iframe-key.ts) guards
against forwarding keys typed into INPUT/TEXTAREA/contentEditable
controls. The naive `instanceof HTMLElement` check is intentionally
avoided — it fails across window realms because the element's prototype
chain belongs to the iframe's HTMLElement, not the parent's.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: chasel34

src/components/deck-viewer.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { parseDeck, type DeckSlide } from "@/lib/deck";
 import { useT } from "@/lib/i18n";
+import { isEditableTarget } from "@/lib/iframe-key";
 
 type Props = {
   html: string;
@@ -80,6 +81,15 @@ export function DeckViewer({ html, active, onMainIframe, onSlides }: Props) {
     }
   }, []);
 
+  const handleIframeLoad = useCallback((e: React.SyntheticEvent<HTMLIFrameElement>) => {
+    const iframeWin = e.currentTarget.contentWindow;
+    if (!iframeWin) return;
+    iframeWin.addEventListener("keydown", (ev) => {
+      if (isEditableTarget(ev.target)) return;
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: ev.key, bubbles: true, cancelable: true }));
+    });
+  }, []);
+
   if (slides.length === 0) {
     return (
       <div className="grid h-full place-items-center text-[13px] text-[var(--ink-mute)]">
@@ -106,6 +116,7 @@ export function DeckViewer({ html, active, onMainIframe, onSlides }: Props) {
           sandbox="allow-scripts allow-same-origin"
           className="h-full w-full"
           style={{ background: current.bg ?? "#fff", border: "0" }}
+          onLoad={handleIframeLoad}
         />
 
         {/* floating prev/next arrows */}

src/components/preview-pane.tsx

@@ -5,6 +5,7 @@ import { useStore, selectActiveTask, type LogEntry, type RunStats } from "@/lib/
 import { useT, type DictKey } from "@/lib/i18n";
 import { previewHtml, extractHtml } from "@/lib/extract-html";
 import { isDeck } from "@/lib/deck";
+import { isEditableTarget } from "@/lib/iframe-key";
 import { DeckViewer } from "./deck-viewer";
 
 type PreviewTab = "preview" | "deck" | "code" | "log";
@@ -109,6 +110,15 @@ export function PreviewPane({
     }
   }, []);
 
+  const handleIframeLoad = useCallback((e: React.SyntheticEvent<HTMLIFrameElement>) => {
+    const iframeWin = e.currentTarget.contentWindow;
+    if (!iframeWin) return;
+    iframeWin.addEventListener("keydown", (ev) => {
+      if (isEditableTarget(ev.target)) return;
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: ev.key, bubbles: true, cancelable: true }));
+    });
+  }, []);
+
   // F to toggle fullscreen (only when not on Deck tab — DeckViewer handles its own).
   useEffect(() => {
     if (tab === "deck") return;
@@ -297,6 +307,7 @@ export function PreviewPane({
                   sandbox="allow-scripts allow-same-origin"
                   className="h-full w-full"
                   style={{ background: "#fff" }}
+                  onLoad={handleIframeLoad}
                 />
                 {isPreviewingTemplate && (
                   <div

src/lib/iframe-key.ts

@@ -0,0 +1,10 @@
+/**
+ * Realm-safe editable-target check. `instanceof HTMLElement` fails when the
+ * event target comes from an iframe's own window realm, so we check tagName
+ * (a plain string) and isContentEditable (a plain boolean) directly.
+ */
+export function isEditableTarget(target: EventTarget | null): boolean {
+  if (!target || typeof (target as Element).tagName !== "string") return false;
+  const tag = (target as Element).tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || !!(target as HTMLElement).isContentEditable;
+}