@thewhateverapp/tile-sdk 0.12.21 → 0.13.0

package/dist/index.d.ts

@@ -4,7 +4,8 @@ export { useTileNavigation } from './react/useTileNavigation';
 export { useKeyboard } from './react/useKeyboard';
 export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
-export { VideoPlayer, useVideoState, Slideshow, useSlideshowState, OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay';
+export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState
+Slideshow, useSlideshowState, OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay';
 export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, SlotPosition, OverlaySlotProps, FullOverlayProps, GradientOverlayProps, } from './react/overlay';
 export { getTileBridge, TileBridge } from './bridge/TileBridge';
 export type { TileMessage, TileConfig, TileTokenData, KeyboardState, VisibilityState } from './bridge/TileBridge';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAEL,WAAW,EACX,aAAa,EAEb,SAAS,EACT,iBAAiB,EAEjB,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAEhB,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGlH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAEL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0BAA0B;AAEpC,SAAS,EACT,iBAAiB,EAEjB,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAEhB,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGlH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -7,8 +7,8 @@ export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
 // Overlay components for hybrid tiles (video/image with interactive overlays)
 export { 
-// Video player
-VideoPlayer, useVideoState, 
+// Video player (with route persistence)
+VideoPlayer, useVideoState, useVideo, // Alias for useVideoState
 // Slideshow
 Slideshow, useSlideshowState, 
 // Positioning components

package/dist/react/overlay/VideoPlayer.d.ts

@@ -1,4 +1,11 @@
 import React, { type ReactNode } from 'react';
+declare global {
+    interface Window {
+        __videoElement?: HTMLVideoElement;
+        __videoHls?: HlsInstance;
+        __videoSingleton?: VideoSingletonClass;
+    }
+}
 interface HlsInstance {
     loadSource: (url: string) => void;
     attachMedia: (video: HTMLVideoElement) => void;
@@ -37,6 +44,55 @@ export interface VideoState {
     isLoading: boolean;
     error: string | null;
 }
+type StateCallback = (state: VideoState) => void;
+/**
+ * VideoSingleton - Manages a persistent video element across route changes.
+ *
+ * The video element is stored on `window.__videoElement` and survives
+ * Next.js soft navigations. When navigating from /tile to /page,
+ * the video keeps playing seamlessly.
+ */
+declare class VideoSingletonClass {
+    private stateCallbacks;
+    private currentState;
+    private currentSrc;
+    private hlsScriptLoaded;
+    private visibilitySetup;
+    /**
+     * Get or create the persistent video element
+     */
+    getVideo(): HTMLVideoElement;
+    /**
+     * Load a video source (supports HLS and regular video)
+     */
+    loadSource(src: string, poster?: string): Promise<void>;
+    /**
+     * Load HLS stream using hls.js
+     */
+    private loadHls;
+    /**
+     * Set up visibility handling via TileBridge
+     */
+    setupVisibilityHandling(): void;
+    /**
+     * Attach video element to a container (moves existing element)
+     */
+    attachTo(container: HTMLElement): void;
+    /**
+     * Get video element reference (for external use)
+     */
+    getVideoRef(): HTMLVideoElement;
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    seek(time: number): void;
+    setMuted(muted: boolean): void;
+    setVolume(volume: number): void;
+    setLoop(loop: boolean): void;
+    getState(): VideoState;
+    onStateChange(callback: StateCallback): () => void;
+    private updateState;
+}
 export interface VideoControls {
     play: () => void;
     pause: () => void;
@@ -51,46 +107,24 @@ export interface VideoContextValue {
     videoRef: React.RefObject<HTMLVideoElement>;
 }
 export interface CuePoint {
-    /** Time in seconds when the cue should trigger */
     time: number;
-    /** Unique identifier for the cue point */
     id: string;
-    /** Optional data to pass to the callback */
     data?: unknown;
 }
 export interface VideoPlayerProps {
-    /** Children rendered as overlay */
     children?: ReactNode;
-    /** Additional class names */
     className?: string;
-    /** Video wrapper class names */
     videoClassName?: string;
-    /** Show native controls (default: false) */
     controls?: boolean;
-    /** Cue points for time-based triggers */
     cuePoints?: CuePoint[];
-    /** Callback when a cue point is reached */
     onCuePoint?: (cuePoint: CuePoint) => void;
-    /** Callback on time update (fires ~4 times per second) */
     onTimeUpdate?: (currentTime: number, duration: number) => void;
 }
 /**
- * VideoPlayer component with HLS streaming support.
- * Provides video state and controls to child overlays via context.
- *
- * Features:
- * - Video URL is injected at build time via NEXT_PUBLIC env vars (no API call!)
- * - HLS streaming with automatic quality adaptation
- * - Falls back to original video URL if transcoding not complete
- * - Time-based cue points for triggering overlays
- * - Visibility-aware playback (plays when visible, pauses when hidden)
- * - Auto-loops by default (can be disabled via tile metadata)
+ * VideoPlayer component with HLS streaming support and route persistence.
  *
- * Environment Variables (set at build time by tile-deploy):
- * - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL
- * - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
- * - NEXT_PUBLIC_VIDEO_THUMBNAIL - Poster image
- * - NEXT_PUBLIC_VIDEO_AUTOPLAY/LOOP/MUTED - Playback settings
+ * The video element persists across Next.js route changes (tile ↔ page).
+ * Video URL is read from NEXT_PUBLIC env vars (set at build time).
  *
  * Usage:
  * ```tsx
@@ -102,82 +136,29 @@ export interface VideoPlayerProps {
 export declare function VideoPlayer({ controls, children, className, videoClassName, cuePoints, onCuePoint, onTimeUpdate, }: VideoPlayerProps): React.JSX.Element;
 /**
  * Hook to access video state and controls from within VideoPlayer children.
+ * Also aliased as useVideo for compatibility.
  */
 export declare function useVideoState(): VideoContextValue;
+export declare const useVideo: typeof useVideoState;
 /**
  * Hook to trigger an action when a specific time is reached.
- * Returns true when the video has reached or passed the specified time.
- *
- * @param triggerTime - Time in seconds when to trigger
- * @param options - Configuration options
- * @returns boolean indicating if the trigger time has been reached
- *
- * @example
- * ```tsx
- * function PollOverlay() {
- *   const showPoll = useCuePoint(5); // Show after 5 seconds
- *   return showPoll ? <Poll /> : null;
- * }
- * ```
  */
 export declare function useCuePoint(triggerTime: number, options?: {
-    /** Reset trigger when video loops (default: true) */
     resetOnLoop?: boolean;
-    /** Trigger once or every time the time is crossed (default: 'once') */
     mode?: 'once' | 'every-loop';
 }): boolean;
 /**
  * Hook to manage multiple cue points with callbacks.
- * More flexible than useCuePoint for complex time-based interactions.
- *
- * @param cuePoints - Array of cue points with times and callbacks
- * @param options - Configuration options
- *
- * @example
- * ```tsx
- * function InteractiveOverlay() {
- *   const [showPoll, setShowPoll] = useState(false);
- *   const [showCTA, setShowCTA] = useState(false);
- *
- *   useCuePoints([
- *     { time: 5, onTrigger: () => setShowPoll(true) },
- *     { time: 10, onTrigger: () => setShowCTA(true) },
- *     { time: 15, onTrigger: () => { setShowPoll(false); setShowCTA(false); } },
- *   ]);
- *
- *   return (
- *     <>
- *       {showPoll && <Poll />}
- *       {showCTA && <CTAButton />}
- *     </>
- *   );
- * }
- * ```
  */
 export declare function useCuePoints(cuePoints: Array<{
-    /** Time in seconds when to trigger */
     time: number;
-    /** Callback to execute when time is reached */
     onTrigger: () => void;
-    /** Optional unique ID (defaults to index) */
     id?: string;
 }>, options?: {
-    /** Reset triggers when video loops (default: true) */
     resetOnLoop?: boolean;
 }): void;
 /**
  * Hook to get the current video progress as a percentage (0-100).
- * Useful for progress bars or time-based animations.
- *
- * @returns Progress percentage (0-100)
- *
- * @example
- * ```tsx
- * function ProgressBar() {
- *   const progress = useVideoProgress();
- *   return <div style={{ width: `${progress}%` }} className="h-1 bg-white" />;
- * }
- * ```
  */
 export declare function useVideoProgress(): number;
 export {};

package/dist/react/overlay/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,CAAC,EAAE,gBAAgB,CAAC;QAClC,UAAU,CAAC,EAAE,WAAW,CAAC;QACzB,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;KACxC;CACF;AASD,UAAU,WAAW;IACnB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,MAAM,EAAE;QACN,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,UAAU,EAAE;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,MAAM,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,WAAW,CAAC;CAClF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,EAAE,SAAS,CAAC;KAChB;CACF;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAEjD;;;;;;GAMG;AACH,cAAM,mBAAmB;IACvB,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,YAAY,CASlB;IACF,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,eAAe,CAAS;IAEhC;;OAEG;IACH,QAAQ,IAAI,gBAAgB;IAwD5B;;OAEG;IACG,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA6B7D;;OAEG;YACW,OAAO;IA2DrB;;OAEG;IACH,uBAAuB,IAAI,IAAI;IA0C/B;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAOtC;;OAEG;IACH,WAAW,IAAI,gBAAgB;IAK/B,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IASd,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIxB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI9B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAK5B,QAAQ,IAAI,UAAU;IAItB,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,IAAI;IAOlD,OAAO,CAAC,WAAW;CAIpB;AA2ED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAID,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,cAAmB,EACnB,SAAc,EACd,UAAU,EACV,YAAY,GACb,EAAE,gBAAgB,qBAkJlB;AAED;;;GAGG;AACH,wBAAgB,aAAa,IAAI,iBAAiB,CAMjD;AAGD,eAAO,MAAM,QAAQ,sBAAgB,CAAC;AAEtC;;GAEG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,MAAM,EACnB,OAAO,GAAE;IACP,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;CACzB,GACL,OAAO,CAuBT;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,KAAK,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,EACF,OAAO,GAAE;IACP,WAAW,CAAC,EAAE,OAAO,CAAC;CAClB,GACL,IAAI,CA8BN;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAMzC"}

package/dist/react/overlay/VideoPlayer.js

@@ -2,23 +2,282 @@
 import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
 import { getTileBridge } from '../../bridge/TileBridge';
 /**
- * Get video metadata from NEXT_PUBLIC environment variables.
- * These are injected at build time by tile-deploy for video tiles.
+ * VideoSingleton - Manages a persistent video element across route changes.
  *
- * Environment variables used:
- * - NEXT_PUBLIC_TILE_ID - Tile identifier
- * - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL (preferred)
- * - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
- * - NEXT_PUBLIC_VIDEO_THUMBNAIL - Thumbnail image URL
- * - NEXT_PUBLIC_VIDEO_DURATION - Video duration in seconds
- * - NEXT_PUBLIC_VIDEO_TITLE - Video title
- * - NEXT_PUBLIC_VIDEO_AUTOPLAY - Auto-play setting (default: true)
- * - NEXT_PUBLIC_VIDEO_LOOP - Loop setting (default: true)
- * - NEXT_PUBLIC_VIDEO_MUTED - Muted setting (default: true)
- * - NEXT_PUBLIC_VIDEO_TRANSCODING_COMPLETE - Transcoding status
+ * The video element is stored on `window.__videoElement` and survives
+ * Next.js soft navigations. When navigating from /tile to /page,
+ * the video keeps playing seamlessly.
  */
+class VideoSingletonClass {
+    constructor() {
+        this.stateCallbacks = new Set();
+        this.currentState = {
+            isPlaying: false,
+            currentTime: 0,
+            duration: 0,
+            buffered: 0,
+            volume: 1,
+            muted: true,
+            isLoading: true,
+            error: null,
+        };
+        this.currentSrc = null;
+        this.hlsScriptLoaded = false;
+        this.visibilitySetup = false;
+    }
+    /**
+     * Get or create the persistent video element
+     */
+    getVideo() {
+        if (typeof window === 'undefined') {
+            throw new Error('VideoSingleton requires browser environment');
+        }
+        if (!window.__videoElement) {
+            const video = document.createElement('video');
+            video.id = 'persistent-video';
+            video.playsInline = true;
+            video.muted = true;
+            video.loop = true;
+            video.preload = 'auto';
+            video.style.width = '100%';
+            video.style.height = '100%';
+            video.style.objectFit = 'contain';
+            video.style.backgroundColor = 'black';
+            // Set up event listeners
+            video.addEventListener('play', () => this.updateState({ isPlaying: true, isLoading: false }));
+            video.addEventListener('pause', () => this.updateState({ isPlaying: false }));
+            video.addEventListener('timeupdate', () => {
+                this.updateState({ currentTime: video.currentTime });
+            });
+            video.addEventListener('durationchange', () => {
+                this.updateState({ duration: video.duration });
+            });
+            video.addEventListener('loadeddata', () => {
+                this.updateState({ isLoading: false });
+            });
+            video.addEventListener('canplay', () => {
+                this.updateState({ isLoading: false });
+            });
+            video.addEventListener('waiting', () => {
+                this.updateState({ isLoading: true });
+            });
+            video.addEventListener('playing', () => {
+                this.updateState({ isLoading: false, isPlaying: true });
+            });
+            video.addEventListener('volumechange', () => {
+                this.updateState({ muted: video.muted, volume: video.volume });
+            });
+            video.addEventListener('progress', () => {
+                if (video.buffered.length > 0) {
+                    this.updateState({ buffered: video.buffered.end(video.buffered.length - 1) });
+                }
+            });
+            video.addEventListener('error', () => {
+                this.updateState({ error: 'Video playback error', isLoading: false });
+            });
+            window.__videoElement = video;
+        }
+        return window.__videoElement;
+    }
+    /**
+     * Load a video source (supports HLS and regular video)
+     */
+    async loadSource(src, poster) {
+        // Skip if same source already loaded
+        if (this.currentSrc === src) {
+            return;
+        }
+        const video = this.getVideo();
+        this.currentSrc = src;
+        this.updateState({ isLoading: true, error: null });
+        if (poster) {
+            video.poster = poster;
+        }
+        // Clean up existing HLS instance
+        if (window.__videoHls) {
+            window.__videoHls.destroy();
+            window.__videoHls = undefined;
+        }
+        // Check if this is an HLS stream
+        if (src.includes('.m3u8')) {
+            await this.loadHls(src);
+        }
+        else {
+            // Regular video file
+            video.src = src;
+        }
+    }
+    /**
+     * Load HLS stream using hls.js
+     */
+    async loadHls(src) {
+        const video = this.getVideo();
+        // Load HLS.js from CDN if not already loaded
+        if (!this.hlsScriptLoaded && !window.Hls) {
+            await new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1';
+                script.onload = () => {
+                    this.hlsScriptLoaded = true;
+                    resolve();
+                };
+                script.onerror = () => reject(new Error('Failed to load HLS.js'));
+                document.head.appendChild(script);
+            });
+        }
+        const Hls = window.Hls;
+        if (Hls.isSupported()) {
+            const hls = new Hls({
+                enableWorker: true,
+                lowLatencyMode: false,
+            });
+            hls.loadSource(src);
+            hls.attachMedia(video);
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                this.updateState({ isLoading: false });
+            });
+            hls.on(Hls.Events.ERROR, (_event, data) => {
+                const errorData = data;
+                if (errorData.fatal) {
+                    switch (errorData.type) {
+                        case Hls.ErrorTypes.NETWORK_ERROR:
+                            hls.startLoad();
+                            break;
+                        case Hls.ErrorTypes.MEDIA_ERROR:
+                            hls.recoverMediaError();
+                            break;
+                        default:
+                            this.updateState({ error: 'HLS playback error', isLoading: false });
+                            hls.destroy();
+                            break;
+                    }
+                }
+            });
+            window.__videoHls = hls;
+        }
+        else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            // Native HLS support (Safari)
+            video.src = src;
+        }
+        else {
+            this.updateState({ error: 'HLS not supported', isLoading: false });
+        }
+    }
+    /**
+     * Set up visibility handling via TileBridge
+     */
+    setupVisibilityHandling() {
+        if (typeof window === 'undefined' || this.visibilitySetup)
+            return;
+        this.visibilitySetup = true;
+        const video = this.getVideo();
+        // Ensure video starts paused and muted
+        video.muted = true;
+        video.pause();
+        try {
+            const bridge = getTileBridge();
+            bridge.onVisibilityChange((visibilityState) => {
+                console.log('[VideoPlayer] Visibility changed:', visibilityState.visible);
+                if (visibilityState.visible) {
+                    // Tile is visible - play video, unmute audio
+                    video.muted = false;
+                    video.play().catch(() => {
+                        // If unmuted play fails (browser policy), retry muted
+                        video.muted = true;
+                        video.play().catch(() => { });
+                    });
+                }
+                else {
+                    // Tile is hidden - pause video, mute audio
+                    video.muted = true;
+                    video.pause();
+                }
+            });
+        }
+        catch {
+            // Bridge not available (standalone tile, not in feed)
+            // For standalone tiles, play with audio if document is visible
+            if (!document.hidden) {
+                video.muted = false;
+                video.play().catch(() => {
+                    video.muted = true;
+                    video.play().catch(() => { });
+                });
+            }
+        }
+    }
+    /**
+     * Attach video element to a container (moves existing element)
+     */
+    attachTo(container) {
+        const video = this.getVideo();
+        if (!container.contains(video)) {
+            container.appendChild(video);
+        }
+    }
+    /**
+     * Get video element reference (for external use)
+     */
+    getVideoRef() {
+        return this.getVideo();
+    }
+    // Playback controls
+    play() {
+        this.getVideo().play().catch(() => { });
+    }
+    pause() {
+        this.getVideo().pause();
+    }
+    toggle() {
+        const video = this.getVideo();
+        if (video.paused) {
+            video.play().catch(() => { });
+        }
+        else {
+            video.pause();
+        }
+    }
+    seek(time) {
+        this.getVideo().currentTime = time;
+    }
+    setMuted(muted) {
+        this.getVideo().muted = muted;
+    }
+    setVolume(volume) {
+        this.getVideo().volume = Math.max(0, Math.min(1, volume));
+    }
+    setLoop(loop) {
+        this.getVideo().loop = loop;
+    }
+    // State management
+    getState() {
+        return { ...this.currentState };
+    }
+    onStateChange(callback) {
+        this.stateCallbacks.add(callback);
+        // Immediately call with current state
+        callback(this.currentState);
+        return () => this.stateCallbacks.delete(callback);
+    }
+    updateState(partial) {
+        this.currentState = { ...this.currentState, ...partial };
+        this.stateCallbacks.forEach(cb => cb(this.currentState));
+    }
+}
+/**
+ * Get the VideoSingleton instance (creates if needed)
+ */
+function getVideoSingleton() {
+    if (typeof window === 'undefined') {
+        // SSR - return a dummy that will be replaced on client
+        return new VideoSingletonClass();
+    }
+    if (!window.__videoSingleton) {
+        window.__videoSingleton = new VideoSingletonClass();
+    }
+    return window.__videoSingleton;
+}
 function getVideoMetadataFromEnv() {
-    // Check if we're in a Next.js environment with process.env
     if (typeof process === 'undefined' || !process.env) {
         return null;
     }
@@ -28,11 +287,9 @@ function getVideoMetadataFromEnv() {
     }
     const hlsUrl = process.env.NEXT_PUBLIC_VIDEO_HLS_URL || null;
     const originalUrl = process.env.NEXT_PUBLIC_VIDEO_ORIGINAL_URL || null;
-    // If neither URL is available, this isn't a video tile
     if (!hlsUrl && !originalUrl) {
         return null;
     }
-    // Prefer HLS URL if available and transcoding is complete, otherwise use original
     const transcodingComplete = process.env.NEXT_PUBLIC_VIDEO_TRANSCODING_COMPLETE === 'true';
     const videoUrl = (hlsUrl && transcodingComplete) ? hlsUrl : (originalUrl || hlsUrl);
     return {
@@ -46,33 +303,17 @@ function getVideoMetadataFromEnv() {
             ? parseFloat(process.env.NEXT_PUBLIC_VIDEO_DURATION)
             : null,
         title: process.env.NEXT_PUBLIC_VIDEO_TITLE || null,
-        // Default to false for autoplay - wait for visibility message from parent
-        // This prevents offscreen tiles from playing in TikTok-style feeds
         autoplay: process.env.NEXT_PUBLIC_VIDEO_AUTOPLAY === 'true',
-        // Default to true for loop (most video tiles loop)
         loop: process.env.NEXT_PUBLIC_VIDEO_LOOP !== 'false',
-        // Default to true for muted - start muted, unmute on visibility
         muted: process.env.NEXT_PUBLIC_VIDEO_MUTED !== 'false',
     };
 }
 const VideoContext = createContext(null);
 /**
- * VideoPlayer component with HLS streaming support.
- * Provides video state and controls to child overlays via context.
- *
- * Features:
- * - Video URL is injected at build time via NEXT_PUBLIC env vars (no API call!)
- * - HLS streaming with automatic quality adaptation
- * - Falls back to original video URL if transcoding not complete
- * - Time-based cue points for triggering overlays
- * - Visibility-aware playback (plays when visible, pauses when hidden)
- * - Auto-loops by default (can be disabled via tile metadata)
+ * VideoPlayer component with HLS streaming support and route persistence.
  *
- * Environment Variables (set at build time by tile-deploy):
- * - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL
- * - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
- * - NEXT_PUBLIC_VIDEO_THUMBNAIL - Poster image
- * - NEXT_PUBLIC_VIDEO_AUTOPLAY/LOOP/MUTED - Playback settings
+ * The video element persists across Next.js route changes (tile ↔ page).
+ * Video URL is read from NEXT_PUBLIC env vars (set at build time).
  *
  * Usage:
  * ```tsx
@@ -82,379 +323,112 @@ const VideoContext = createContext(null);
  * ```
  */
 export function VideoPlayer({ controls = false, children, className = '', videoClassName = '', cuePoints = [], onCuePoint, onTimeUpdate, }) {
-    const videoRef = useRef(null);
-    const hlsRef = useRef(null);
+    const containerRef = useRef(null);
+    const videoRefProxy = useRef(null);
     const triggeredCuePointsRef = useRef(new Set());
     const lastTimeRef = useRef(0);
-    // State for video metadata (from env vars, set at build time)
-    const [metadata, setMetadata] = useState(null);
+    const [state, setState] = useState(() => getVideoSingleton().getState());
     const [metadataError, setMetadataError] = useState(null);
-    // Get video metadata from environment variables (set at build time by tile-deploy)
-    // This is synchronous - no API call needed!
-    useEffect(() => {
-        const envMetadata = getVideoMetadataFromEnv();
-        if (!envMetadata) {
-            // Check if TILE_ID is set - if not, likely a dev environment issue
-            if (typeof process !== 'undefined' && !process.env?.NEXT_PUBLIC_TILE_ID) {
-                setMetadataError('NEXT_PUBLIC_TILE_ID not set');
-            }
-            else {
-                setMetadataError('No video metadata found in environment variables');
-            }
-            return;
-        }
-        if (!envMetadata.videoUrl) {
-            setMetadataError('No video URL found in environment variables');
-            return;
-        }
-        setMetadata(envMetadata);
-    }, []);
-    // Get values from metadata
+    // Get video metadata from env vars
+    const metadata = getVideoMetadataFromEnv();
     const src = metadata?.videoUrl || null;
-    // Default to false for autoplay - videos wait for visibility message from parent
-    // This prevents offscreen tiles from playing in TikTok-style feeds
-    const autoplay = metadata?.autoplay ?? false;
-    // Default to true for muted - videos start muted until visibility says otherwise
-    const muted = metadata?.muted ?? true;
     const poster = metadata?.thumbnail || undefined;
-    // Default to loop enabled (videos almost always loop)
-    const loop = metadata?.loop ?? true;
-    const [state, setState] = useState({
-        isPlaying: false,
-        currentTime: 0,
-        duration: 0,
-        buffered: 0,
-        volume: 1,
-        muted: muted,
-        isLoading: true,
-        error: null,
-    });
-    // Control functions
-    const play = useCallback(() => {
-        videoRef.current?.play().catch(() => { });
-    }, []);
-    const pause = useCallback(() => {
-        videoRef.current?.pause();
-    }, []);
-    const toggle = useCallback(() => {
-        if (videoRef.current?.paused) {
-            play();
-        }
-        else {
-            pause();
-        }
-    }, [play, pause]);
-    const seek = useCallback((time) => {
-        if (videoRef.current) {
-            videoRef.current.currentTime = time;
-        }
-    }, []);
-    const setVolume = useCallback((volume) => {
-        if (videoRef.current) {
-            videoRef.current.volume = Math.max(0, Math.min(1, volume));
-        }
+    // Subscribe to singleton state changes
+    useEffect(() => {
+        const singleton = getVideoSingleton();
+        const unsubscribe = singleton.onStateChange(setState);
+        return unsubscribe;
     }, []);
-    const setMuted = useCallback((muted) => {
-        if (videoRef.current) {
-            videoRef.current.muted = muted;
+    // Attach video to container and load source
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const singleton = getVideoSingleton();
+        // Attach the persistent video element to our container
+        singleton.attachTo(containerRef.current);
+        // Update video ref proxy
+        videoRefProxy.current = singleton.getVideoRef();
+        // Set loop preference
+        if (metadata?.loop !== undefined) {
+            singleton.setLoop(metadata.loop);
         }
-    }, []);
-    // Helper to start playback with visibility-aware muting
-    const startPlayback = useCallback((video) => {
-        try {
-            const bridge = getTileBridge();
-            if (bridge.isVisible()) {
-                // Visible tile - try unmuted first for mobile WebViews
-                video.muted = false;
-                video.play().catch(() => {
-                    // Unmuted failed (browser policy) - fall back to muted
-                    video.muted = true;
-                    video.play().catch(() => { });
-                });
-            }
-            else {
-                // Not visible - play muted
-                video.muted = true;
-                video.play().catch(() => { });
-            }
+        // Load source if available
+        if (src) {
+            singleton.loadSource(src, poster);
         }
-        catch {
-            // Bridge not available - just play muted (safe default)
-            video.play().catch(() => { });
+        else if (!metadata) {
+            setMetadataError('No video metadata found in environment variables');
         }
-    }, []);
-    // Load video source - handles both HLS streams and regular video files
+        // Set up visibility handling
+        singleton.setupVisibilityHandling();
+        // Note: We don't detach on unmount - that's the whole point of persistence!
+    }, [src, poster, metadata]);
+    // Handle cue points and time updates
     useEffect(() => {
-        const video = videoRef.current;
-        if (!video || !src)
-            return;
-        // Check if this is an HLS stream (.m3u8) or a regular video file
-        const isHlsUrl = src.includes('.m3u8');
-        if (!isHlsUrl) {
-            // Regular video file (MP4, WebM, etc.) - just set src directly
-            const handleLoadedMetadata = () => {
-                setState(s => ({ ...s, isLoading: false }));
-                if (autoplay) {
-                    startPlayback(video);
-                }
-            };
-            const handleError = () => {
-                setState(s => ({ ...s, error: 'Failed to load video', isLoading: false }));
-            };
-            video.src = src;
-            video.addEventListener('loadedmetadata', handleLoadedMetadata);
-            video.addEventListener('error', handleError);
-            return () => {
-                video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-                video.removeEventListener('error', handleError);
-            };
+        const { currentTime, duration } = state;
+        // Call onTimeUpdate callback
+        if (onTimeUpdate && !isNaN(duration) && duration > 0) {
+            onTimeUpdate(currentTime, duration);
         }
-        // HLS stream - load HLS.js
-        const loadHls = async () => {
-            if (!window.Hls) {
-                await new Promise((resolve, reject) => {
-                    const script = document.createElement('script');
-                    script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1';
-                    script.onload = () => resolve();
-                    script.onerror = () => reject(new Error('Failed to load HLS.js'));
-                    document.head.appendChild(script);
-                });
-            }
-            const Hls = window.Hls;
-            if (Hls.isSupported()) {
-                const hls = new Hls({
-                    enableWorker: true,
-                    lowLatencyMode: false,
-                });
-                hlsRef.current = hls;
-                hls.loadSource(src);
-                hls.attachMedia(video);
-                hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                    setState(s => ({ ...s, isLoading: false }));
-                    if (autoplay) {
-                        startPlayback(video);
-                    }
-                });
-                hls.on(Hls.Events.ERROR, (_event, data) => {
-                    const errorData = data;
-                    if (errorData.fatal) {
-                        switch (errorData.type) {
-                            case Hls.ErrorTypes.NETWORK_ERROR:
-                                hls.startLoad();
-                                break;
-                            case Hls.ErrorTypes.MEDIA_ERROR:
-                                hls.recoverMediaError();
-                                break;
-                            default:
-                                setState(s => ({ ...s, error: 'Failed to load video', isLoading: false }));
-                                hls.destroy();
-                                break;
-                        }
-                    }
-                });
-            }
-            else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-                // Native HLS support (Safari)
-                video.src = src;
-                video.addEventListener('loadedmetadata', () => {
-                    setState(s => ({ ...s, isLoading: false }));
-                    if (autoplay) {
-                        startPlayback(video);
-                    }
-                });
-            }
-            else {
-                setState(s => ({ ...s, error: 'HLS not supported', isLoading: false }));
-            }
-        };
-        loadHls().catch(error => {
-            setState(s => ({ ...s, error: error.message, isLoading: false }));
-        });
-        return () => {
-            hlsRef.current?.destroy();
-            hlsRef.current = null;
-        };
-    }, [src, autoplay, startPlayback]);
-    // Video event listeners
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        const handlePlay = () => setState(s => ({ ...s, isPlaying: true, isLoading: false }));
-        const handlePause = () => setState(s => ({ ...s, isPlaying: false }));
-        // Fallback for loading state - hide spinner when video can play
-        const handleCanPlay = () => setState(s => ({ ...s, isLoading: false }));
-        const handleLoadedData = () => setState(s => ({ ...s, isLoading: false }));
-        const handleTimeUpdate = () => {
-            const currentTime = video.currentTime;
-            const duration = video.duration;
-            setState(s => ({ ...s, currentTime }));
-            // Call onTimeUpdate callback
-            if (onTimeUpdate && !isNaN(duration)) {
-                onTimeUpdate(currentTime, duration);
-            }
-            // Check cue points - trigger if we crossed the cue time since last update
-            if (onCuePoint && cuePoints.length > 0) {
-                const lastTime = lastTimeRef.current;
-                for (const cuePoint of cuePoints) {
-                    const cueKey = `${cuePoint.id}-${Math.floor(currentTime / (duration || 1))}`;
-                    // Trigger if we crossed the cue point time (handles both forward and loop)
-                    // For looping: reset triggered cues when video loops back
-                    if (currentTime < lastTime && lastTime > duration * 0.9) {
-                        // Video looped - clear triggered cues
-                        triggeredCuePointsRef.current.clear();
-                    }
-                    const alreadyTriggered = triggeredCuePointsRef.current.has(cueKey);
-                    const crossedCuePoint = lastTime < cuePoint.time && currentTime >= cuePoint.time;
-                    if (!alreadyTriggered && crossedCuePoint) {
-                        triggeredCuePointsRef.current.add(cueKey);
-                        onCuePoint(cuePoint);
-                    }
-                }
-            }
-            lastTimeRef.current = currentTime;
-        };
-        const handleDurationChange = () => setState(s => ({ ...s, duration: video.duration }));
-        const handleVolumeChange = () => setState(s => ({ ...s, volume: video.volume, muted: video.muted }));
-        const handleProgress = () => {
-            if (video.buffered.length > 0) {
-                setState(s => ({
-                    ...s,
-                    buffered: video.buffered.end(video.buffered.length - 1),
-                }));
+        // Check cue points
+        if (onCuePoint && cuePoints.length > 0) {
+            const lastTime = lastTimeRef.current;
+            // Detect video loop
+            if (currentTime < lastTime && lastTime > duration * 0.9) {
+                triggeredCuePointsRef.current.clear();
             }
-        };
-        const handleError = () => setState(s => ({ ...s, error: 'Video playback error', isLoading: false }));
-        video.addEventListener('play', handlePlay);
-        video.addEventListener('pause', handlePause);
-        video.addEventListener('timeupdate', handleTimeUpdate);
-        video.addEventListener('durationchange', handleDurationChange);
-        video.addEventListener('volumechange', handleVolumeChange);
-        video.addEventListener('progress', handleProgress);
-        video.addEventListener('error', handleError);
-        video.addEventListener('canplay', handleCanPlay);
-        video.addEventListener('loadeddata', handleLoadedData);
-        return () => {
-            video.removeEventListener('play', handlePlay);
-            video.removeEventListener('pause', handlePause);
-            video.removeEventListener('timeupdate', handleTimeUpdate);
-            video.removeEventListener('durationchange', handleDurationChange);
-            video.removeEventListener('volumechange', handleVolumeChange);
-            video.removeEventListener('progress', handleProgress);
-            video.removeEventListener('error', handleError);
-            video.removeEventListener('canplay', handleCanPlay);
-            video.removeEventListener('loadeddata', handleLoadedData);
-        };
-    }, [onTimeUpdate, onCuePoint, cuePoints]);
-    // Visibility handling - play/pause AND mute/unmute based on tile visibility.
-    // Videos start paused and ONLY play when parent sends visible: true.
-    // This enables TikTok-style feeds where only the active tile plays.
-    // IMPORTANT: Do NOT check initial state - wait for explicit visibility message.
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video)
-            return;
-        // Ensure video starts paused and muted
-        video.muted = true;
-        video.pause();
-        try {
-            const bridge = getTileBridge();
-            // Handle visibility changes from parent (mobile app)
-            // ONLY respond to explicit messages, not initial state
-            const unsubscribe = bridge.onVisibilityChange((visibilityState) => {
-                console.log('[VideoPlayer] Visibility changed:', visibilityState.visible);
-                if (visibilityState.visible) {
-                    // Tile is visible - play video, unmute audio
-                    video.muted = false;
-                    video.play().catch(() => {
-                        // If unmuted play fails (browser policy), retry muted
-                        video.muted = true;
-                        video.play().catch(() => { });
-                    });
-                }
-                else {
-                    // Tile is hidden - pause video, mute audio
-                    video.muted = true;
-                    video.pause();
+            for (const cuePoint of cuePoints) {
+                const cueKey = `${cuePoint.id}-${Math.floor(currentTime / (duration || 1))}`;
+                const alreadyTriggered = triggeredCuePointsRef.current.has(cueKey);
+                const crossedCuePoint = lastTime < cuePoint.time && currentTime >= cuePoint.time;
+                if (!alreadyTriggered && crossedCuePoint) {
+                    triggeredCuePointsRef.current.add(cueKey);
+                    onCuePoint(cuePoint);
                 }
-            });
-            return () => {
-                unsubscribe();
-            };
-        }
-        catch {
-            // Bridge not available (standalone tile, not in feed)
-            // For standalone tiles, play with audio if document is visible
-            if (!document.hidden) {
-                video.muted = false;
-                video.play().catch(() => {
-                    video.muted = true;
-                    video.play().catch(() => { });
-                });
             }
         }
-    }, []);
+        lastTimeRef.current = currentTime;
+    }, [state.currentTime, state.duration, onTimeUpdate, onCuePoint, cuePoints]);
+    // Control functions
+    const singleton = getVideoSingleton();
+    const controlsObj = {
+        play: useCallback(() => singleton.play(), []),
+        pause: useCallback(() => singleton.pause(), []),
+        toggle: useCallback(() => singleton.toggle(), []),
+        seek: useCallback((time) => singleton.seek(time), []),
+        setVolume: useCallback((volume) => singleton.setVolume(volume), []),
+        setMuted: useCallback((muted) => singleton.setMuted(muted), []),
+    };
     const contextValue = {
         state,
-        controls: { play, pause, toggle, seek, setVolume, setMuted },
-        videoRef: videoRef,
+        controls: controlsObj,
+        videoRef: videoRefProxy,
     };
     return (React.createElement(VideoContext.Provider, { value: contextValue },
         React.createElement("div", { className: `relative w-full h-full bg-black ${className}` },
-            React.createElement("video", { ref: videoRef, className: `w-full h-full object-contain ${videoClassName}`, poster: poster, loop: loop, muted: muted, autoPlay: autoplay, controls: controls, playsInline: true, 
-                // Hide iOS Safari's native poster play button
-                style: {
-                    // @ts-expect-error - WebKit-specific property
-                    WebkitMediaControlsStartPlaybackButton: 'none',
-                } }),
+            React.createElement("div", { ref: containerRef, className: `absolute inset-0 ${videoClassName}` }),
             React.createElement("style", null, `
-          /* WebKit (Safari, iOS, Chrome) */
-          video::-webkit-media-controls-start-playback-button {
+          #persistent-video::-webkit-media-controls-start-playback-button {
             display: none !important;
             -webkit-appearance: none;
             opacity: 0 !important;
-            pointer-events: none !important;
-          }
-          video::-webkit-media-controls-panel {
-            display: none !important;
-            opacity: 0 !important;
-          }
-          video::-webkit-media-controls {
-            display: none !important;
-            opacity: 0 !important;
-          }
-          video::-webkit-media-controls-play-button {
-            display: none !important;
-            opacity: 0 !important;
-          }
-          video::-webkit-media-controls-overlay-play-button {
-            display: none !important;
-            opacity: 0 !important;
-          }
-          /* Firefox */
-          video::-moz-media-controls {
-            display: none !important;
-          }
-          /* Microsoft Edge / IE */
-          video::-ms-media-controls {
-            display: none !important;
-          }
-          /* General - remove default controls styling */
-          video {
-            -webkit-media-controls-start-playback-button: none;
-          }
-          video[poster] {
-            object-fit: cover;
           }
+          #persistent-video::-webkit-media-controls-panel { display: none !important; }
+          #persistent-video::-webkit-media-controls { display: none !important; }
+          #persistent-video::-webkit-media-controls-play-button { display: none !important; }
+          #persistent-video::-webkit-media-controls-overlay-play-button { display: none !important; }
+          #persistent-video::-moz-media-controls { display: none !important; }
+          #persistent-video::-ms-media-controls { display: none !important; }
         `),
-            (state.isLoading || (!src && !metadataError)) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+            (state.isLoading || (!src && !metadataError)) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20" },
                 React.createElement("div", { className: "w-10 h-10 border-3 border-white/30 border-t-white rounded-full animate-spin" }))),
-            (state.error || metadataError) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-white/80" },
+            (state.error || metadataError) && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-white/80 z-20" },
                 React.createElement("p", null, state.error || metadataError))),
-            children)));
+            React.createElement("div", { className: "absolute inset-0 z-10" }, children))));
 }
 /**
  * Hook to access video state and controls from within VideoPlayer children.
+ * Also aliased as useVideo for compatibility.
  */
 export function useVideoState() {
     const context = useContext(VideoContext);
@@ -463,21 +437,10 @@ export function useVideoState() {
     }
     return context;
 }
+// Alias for compatibility with PersistentVideo's useVideo
+export const useVideo = useVideoState;
 /**
  * Hook to trigger an action when a specific time is reached.
- * Returns true when the video has reached or passed the specified time.
- *
- * @param triggerTime - Time in seconds when to trigger
- * @param options - Configuration options
- * @returns boolean indicating if the trigger time has been reached
- *
- * @example
- * ```tsx
- * function PollOverlay() {
- *   const showPoll = useCuePoint(5); // Show after 5 seconds
- *   return showPoll ? <Poll /> : null;
- * }
- * ```
  */
 export function useCuePoint(triggerTime, options = {}) {
     const { resetOnLoop = true, mode = 'once' } = options;
@@ -486,13 +449,11 @@ export function useCuePoint(triggerTime, options = {}) {
     const lastTimeRef = useRef(0);
     useEffect(() => {
         const { currentTime, duration } = state;
-        // Detect video loop (time jumped backwards significantly)
         if (currentTime < lastTimeRef.current && lastTimeRef.current > duration * 0.9) {
             if (resetOnLoop && mode === 'every-loop') {
                 setTriggered(false);
             }
         }
-        // Check if we crossed the trigger time
         if (!triggered && currentTime >= triggerTime) {
             setTriggered(true);
         }
@@ -502,31 +463,6 @@ export function useCuePoint(triggerTime, options = {}) {
 }
 /**
  * Hook to manage multiple cue points with callbacks.
- * More flexible than useCuePoint for complex time-based interactions.
- *
- * @param cuePoints - Array of cue points with times and callbacks
- * @param options - Configuration options
- *
- * @example
- * ```tsx
- * function InteractiveOverlay() {
- *   const [showPoll, setShowPoll] = useState(false);
- *   const [showCTA, setShowCTA] = useState(false);
- *
- *   useCuePoints([
- *     { time: 5, onTrigger: () => setShowPoll(true) },
- *     { time: 10, onTrigger: () => setShowCTA(true) },
- *     { time: 15, onTrigger: () => { setShowPoll(false); setShowCTA(false); } },
- *   ]);
- *
- *   return (
- *     <>
- *       {showPoll && <Poll />}
- *       {showCTA && <CTAButton />}
- *     </>
- *   );
- * }
- * ```
  */
 export function useCuePoints(cuePoints, options = {}) {
     const { resetOnLoop = true } = options;
@@ -535,13 +471,11 @@ export function useCuePoints(cuePoints, options = {}) {
     const lastTimeRef = useRef(0);
     useEffect(() => {
         const { currentTime, duration } = state;
-        // Detect video loop
         if (currentTime < lastTimeRef.current && lastTimeRef.current > duration * 0.9) {
             if (resetOnLoop) {
                 triggeredRef.current.clear();
             }
         }
-        // Check each cue point
         for (let i = 0; i < cuePoints.length; i++) {
             const cue = cuePoints[i];
             const cueId = cue.id ?? `cue-${i}`;
@@ -557,17 +491,6 @@ export function useCuePoints(cuePoints, options = {}) {
 }
 /**
  * Hook to get the current video progress as a percentage (0-100).
- * Useful for progress bars or time-based animations.
- *
- * @returns Progress percentage (0-100)
- *
- * @example
- * ```tsx
- * function ProgressBar() {
- *   const progress = useVideoProgress();
- *   return <div style={{ width: `${progress}%` }} className="h-1 bg-white" />;
- * }
- * ```
  */
 export function useVideoProgress() {
     const { state } = useVideoState();

package/dist/react/overlay/index.d.ts

@@ -1,4 +1,5 @@
-export { VideoPlayer, useVideoState, useCuePoint, useCuePoints, useVideoProgress, } from './VideoPlayer';
+export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState (compatibility)
+useCuePoint, useCuePoints, useVideoProgress, } from './VideoPlayer';
 export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, CuePoint, } from './VideoPlayer';
 export { Slideshow, useSlideshowState, } from './Slideshow';
 export type { SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, } from './Slideshow';

package/dist/react/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,aAAa,EACb,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACT,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,SAAS,EACT,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0CAA0C;AACpD,WAAW,EACX,YAAY,EACZ,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,GACT,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,SAAS,EACT,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/react/overlay/index.js

@@ -1,5 +1,6 @@
-// Video player with HLS streaming support
-export { VideoPlayer, useVideoState, useCuePoint, useCuePoints, useVideoProgress, } from './VideoPlayer';
+// Video player with HLS streaming support and route persistence
+export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState (compatibility)
+useCuePoint, useCuePoints, useVideoProgress, } from './VideoPlayer';
 // Image slideshow component
 export { Slideshow, useSlideshowState, } from './Slideshow';
 // Overlay positioning components

package/dist/templates/index.d.ts

@@ -4,6 +4,6 @@
  * Pre-built templates for common tile types.
  * These get injected as strings by tile-deploy/agent-service.
  */
-export * from './video';
-export * from './slideshow';
+export * from './video/index.js';
+export * from './slideshow/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/templates/index.js

@@ -4,7 +4,8 @@
  * Pre-built templates for common tile types.
  * These get injected as strings by tile-deploy/agent-service.
  */
-export * from './video';
-export * from './slideshow';
+// ESM requires explicit index.js imports (no directory imports)
+export * from './video/index.js';
+export * from './slideshow/index.js';
 // Future templates:
-// export * from './image';
+// export * from './image/index.js';

package/dist/templates/slideshow/index.d.ts

@@ -4,8 +4,8 @@
  * These templates are used by tile-deploy/agent-service to generate
  * slideshow tiles with persistent state across route navigation.
  */
-export { slideshowManagerTemplate } from './SlideshowManager.ts.template';
-export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template';
+export { slideshowManagerTemplate } from './SlideshowManager.ts.template.js';
+export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template.js';
 export declare const slideshowTemplateFiles: {
     'src/shared/lib/SlideshowManager.ts': string;
     'src/shared/components/PersistentSlideshow.tsx': string;

package/dist/templates/slideshow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAGjF,eAAO,MAAM,sBAAsB;;;CAGlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAGpF,eAAO,MAAM,sBAAsB;;;CAGlC,CAAC"}

package/dist/templates/slideshow/index.js

@@ -4,8 +4,9 @@
  * These templates are used by tile-deploy/agent-service to generate
  * slideshow tiles with persistent state across route navigation.
  */
-export { slideshowManagerTemplate } from './SlideshowManager.ts.template';
-export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template';
+// ESM requires explicit .js extension for imports
+export { slideshowManagerTemplate } from './SlideshowManager.ts.template.js';
+export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template.js';
 // Template file structure for slideshow tiles
 export const slideshowTemplateFiles = {
     'src/shared/lib/SlideshowManager.ts': 'slideshowManagerTemplate',

package/dist/templates/video/index.d.ts

@@ -4,9 +4,9 @@
  * These templates are used by tile-deploy/agent-service to generate
  * video tiles with persistent playback across route navigation.
  */
-export { videoLayoutTemplate } from './layout.tsx.template';
-export { videoManagerTemplate } from './VideoManager.ts.template';
-export { persistentVideoTemplate } from './PersistentVideo.tsx.template';
+export { videoLayoutTemplate } from './layout.tsx.template.js';
+export { videoManagerTemplate } from './VideoManager.ts.template.js';
+export { persistentVideoTemplate } from './PersistentVideo.tsx.template.js';
 export declare const videoTemplateFiles: {
     'src/shared/lib/VideoManager.ts': string;
     'src/shared/components/PersistentVideo.tsx': string;

package/dist/templates/video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/video/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/video/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC"}

package/dist/templates/video/index.js

@@ -4,9 +4,10 @@
  * These templates are used by tile-deploy/agent-service to generate
  * video tiles with persistent playback across route navigation.
  */
-export { videoLayoutTemplate } from './layout.tsx.template';
-export { videoManagerTemplate } from './VideoManager.ts.template';
-export { persistentVideoTemplate } from './PersistentVideo.tsx.template';
+// ESM requires explicit .js extension for imports
+export { videoLayoutTemplate } from './layout.tsx.template.js';
+export { videoManagerTemplate } from './VideoManager.ts.template.js';
+export { persistentVideoTemplate } from './PersistentVideo.tsx.template.js';
 // Template file structure for video tiles
 export const videoTemplateFiles = {
     'src/shared/lib/VideoManager.ts': 'videoManagerTemplate',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.12.21",
+  "version": "0.13.0",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",