fix(player): fix controls hitbox with proper z-index layering

The iframe's large layout box (1920x1080 before CSS scale) was
intercepting clicks meant for the controls bar. Fixed by:

- Replacing container click handler with a dedicated overlay div
- Z-index stacking: iframe (none) → overlay (5) → controls (10)
- Controls clicks stay on controls, overlay clicks toggle play/pause
- Larger play/pause button (40x40) with bigger icon (24x24)

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

Author: miguel-heygen

packages/player/src/controls.ts

@@ -14,7 +14,7 @@ export function formatTime(seconds: number): string {
 }
 
 export function createControls(
-  shadow: ShadowRoot,
+  parent: ShadowRoot | HTMLElement,
   callbacks: ControlsCallbacks,
 ): {
   updateTime: (current: number, duration: number) => void;
@@ -45,7 +45,7 @@ export function createControls(
   controls.appendChild(playBtn);
   controls.appendChild(scrubber);
   controls.appendChild(time);
-  shadow.appendChild(controls);
+  parent.appendChild(controls);
 
   let isPlaying = false;
   let hideTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -107,7 +107,7 @@ export function createControls(
     }, 3000);
   };
 
-  const host = shadow.host as HTMLElement;
+  const host = parent instanceof ShadowRoot ? (parent.host as HTMLElement) : parent;
   host.addEventListener("mousemove", () => {
     controls.classList.remove("hfp-hidden");
     startHideTimer();

packages/player/src/hyperframes-player.ts

@@ -45,13 +45,16 @@ class HyperframesPlayer extends HTMLElement {
     this.iframe.title = "HyperFrames Composition";
 
     this.container.appendChild(this.iframe);
-    this.shadow.appendChild(this.container);
 
-    // Click on the container area toggles play/pause
-    this.container.addEventListener("click", () => {
+    // Overlay above iframe, below controls — click to toggle play/pause
+    const overlay = document.createElement("div");
+    overlay.className = "hfp-overlay";
+    overlay.addEventListener("click", () => {
       if (this._paused) this.play();
       else this.pause();
     });
+    this.container.appendChild(overlay);
+    this.shadow.appendChild(this.container);
 
     this.resizeObserver = new ResizeObserver(() => this._updateScale());
 
@@ -345,8 +348,7 @@ class HyperframesPlayer extends HTMLElement {
     );
     this.iframe.style.width = `${this._compositionWidth}px`;
     this.iframe.style.height = `${this._compositionHeight}px`;
-    this.iframe.style.transform = `scale(${scale})`;
-    this.iframe.style.transformOrigin = "center center";
+    this.iframe.style.transform = `translate(-50%, -50%) scale(${scale})`;
   }
 
   private _setupControls() {
@@ -356,7 +358,7 @@ class HyperframesPlayer extends HTMLElement {
       onPause: () => this.pause(),
       onSeek: (fraction) => this.seek(fraction * this._duration),
     };
-    this.controlsApi = createControls(this.shadow, callbacks);
+    this.controlsApi = createControls(this.container, callbacks);
   }
 
   private _setupPoster() {

packages/player/src/styles.ts

@@ -8,18 +8,23 @@ export const PLAYER_STYLES = /* css */ `
   }
 
   .hfp-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    position: absolute;
+    inset: 0;
     overflow: hidden;
+  }
+
+  .hfp-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
     cursor: pointer;
   }
 
   .hfp-iframe {
+    position: absolute;
+    top: 50%;
+    left: 50%;
     border: none;
-    flex-shrink: 0;
     pointer-events: none;
   }
 
@@ -44,7 +49,8 @@ export const PLAYER_STYLES = /* css */ `
     color: #fff;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 13px;
-    z-index: 2;
+    z-index: 10;
+    pointer-events: auto;
     opacity: 1;
     transition: opacity 0.3s ease;
     user-select: none;
@@ -60,13 +66,15 @@ export const PLAYER_STYLES = /* css */ `
     border: none;
     color: #fff;
     cursor: pointer;
-    padding: 4px;
+    padding: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
     flex-shrink: 0;
+    position: relative;
+    z-index: 11;
   }
 
   .hfp-play-btn:hover {
@@ -103,5 +111,5 @@ export const PLAYER_STYLES = /* css */ `
   }
 `;
 
-export const PLAY_ICON = `<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>`;
-export const PAUSE_ICON = `<svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14"/><rect x="11" y="2" width="4" height="14"/></svg>`;
+export const PLAY_ICON = `<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>`;
+export const PAUSE_ICON = `<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14"/><rect x="11" y="2" width="4" height="14"/></svg>`;