@thewhateverapp/tile-sdk 0.12.19 → 0.12.20

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export { StateClient } from './state/StateClient';
 export type { TileStats, ViewResponse } from './state/StateClient';
 export * from './tools';
 export * from './types';
+export * from './templates';
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

package/dist/index.js

@@ -21,3 +21,5 @@ export { StateClient } from './state/StateClient';
 export * from './tools';
 // Types
 export * from './types';
+// Templates (for tile-deploy/agent-service)
+export * from './templates';

package/dist/templates/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tile Templates
+ *
+ * Pre-built templates for common tile types.
+ * These get injected as strings by tile-deploy/agent-service.
+ */
+export * from './video';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/templates/index.js

@@ -0,0 +1,10 @@
+/**
+ * Tile Templates
+ *
+ * Pre-built templates for common tile types.
+ * These get injected as strings by tile-deploy/agent-service.
+ */
+export * from './video';
+// Future templates:
+// export * from './slideshow';
+// export * from './image';

package/dist/templates/video/PersistentVideo.tsx.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Video Template - PersistentVideo Component
+ *
+ * React component that attaches to the VideoManager singleton.
+ * The video element persists across route changes.
+ */
+export declare const persistentVideoTemplate = "'use client';\n\nimport { useEffect, useRef, useState, createContext, useContext, ReactNode } from 'react';\nimport { VideoManager, VideoState } from './VideoManager';\n\n// Context to share video state with overlays\ninterface VideoContextValue {\n  state: VideoState;\n  controls: {\n    play: () => void;\n    pause: () => void;\n    toggle: () => void;\n    seek: (time: number) => void;\n    setMuted: (muted: boolean) => void;\n    setVolume: (volume: number) => void;\n  };\n}\n\nconst VideoContext = createContext<VideoContextValue | null>(null);\n\nexport function useVideo(): VideoContextValue {\n  const context = useContext(VideoContext);\n  if (!context) {\n    throw new Error('useVideo must be used within PersistentVideo');\n  }\n  return context;\n}\n\ninterface PersistentVideoProps {\n  src?: string;\n  hlsUrl?: string;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport function PersistentVideo({\n  src,\n  hlsUrl,\n  className = '',\n  children\n}: PersistentVideoProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<VideoState>(VideoManager.getState());\n\n  useEffect(() => {\n    // Subscribe to state changes\n    const unsubscribe = VideoManager.onStateChange(setState);\n\n    // Attach video to container\n    if (containerRef.current) {\n      VideoManager.attachTo(containerRef.current);\n    }\n\n    // Load source if provided\n    const videoSrc = hlsUrl || src;\n    if (videoSrc) {\n      VideoManager.loadSource(videoSrc);\n    }\n\n    return () => {\n      unsubscribe();\n      // Don't detach - let video persist for route changes\n    };\n  }, [src, hlsUrl]);\n\n  const contextValue: VideoContextValue = {\n    state,\n    controls: {\n      play: () => VideoManager.play(),\n      pause: () => VideoManager.pause(),\n      toggle: () => VideoManager.toggle(),\n      seek: (time) => VideoManager.seek(time),\n      setMuted: (muted) => VideoManager.setMuted(muted),\n      setVolume: (volume) => VideoManager.setVolume(volume),\n    },\n  };\n\n  return (\n    <VideoContext.Provider value={contextValue}>\n      <div className={`relative w-full h-full ${className}`}>\n        {/* Container for persistent video element */}\n        <div\n          ref={containerRef}\n          className=\"absolute inset-0\"\n          style={{ backgroundColor: 'black' }}\n        />\n\n        {/* Hide native controls */}\n        <style>{`\n          #persistent-video::-webkit-media-controls { display: none !important; }\n          #persistent-video::-webkit-media-controls-start-playback-button { display: none !important; }\n          #persistent-video::-webkit-media-controls-overlay-play-button { display: none !important; }\n        `}</style>\n\n        {/* Overlay content */}\n        <div className=\"absolute inset-0 z-10\">\n          {children}\n        </div>\n      </div>\n    </VideoContext.Provider>\n  );\n}\n";
+//# sourceMappingURL=PersistentVideo.tsx.template.d.ts.map

package/dist/templates/video/PersistentVideo.tsx.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersistentVideo.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/video/PersistentVideo.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,+2FAsGnC,CAAC"}

package/dist/templates/video/PersistentVideo.tsx.template.js

@@ -0,0 +1,109 @@
+/**
+ * Video Template - PersistentVideo Component
+ *
+ * React component that attaches to the VideoManager singleton.
+ * The video element persists across route changes.
+ */
+export const persistentVideoTemplate = `'use client';
+
+import { useEffect, useRef, useState, createContext, useContext, ReactNode } from 'react';
+import { VideoManager, VideoState } from './VideoManager';
+
+// Context to share video state with overlays
+interface VideoContextValue {
+  state: VideoState;
+  controls: {
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seek: (time: number) => void;
+    setMuted: (muted: boolean) => void;
+    setVolume: (volume: number) => void;
+  };
+}
+
+const VideoContext = createContext<VideoContextValue | null>(null);
+
+export function useVideo(): VideoContextValue {
+  const context = useContext(VideoContext);
+  if (!context) {
+    throw new Error('useVideo must be used within PersistentVideo');
+  }
+  return context;
+}
+
+interface PersistentVideoProps {
+  src?: string;
+  hlsUrl?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function PersistentVideo({
+  src,
+  hlsUrl,
+  className = '',
+  children
+}: PersistentVideoProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<VideoState>(VideoManager.getState());
+
+  useEffect(() => {
+    // Subscribe to state changes
+    const unsubscribe = VideoManager.onStateChange(setState);
+
+    // Attach video to container
+    if (containerRef.current) {
+      VideoManager.attachTo(containerRef.current);
+    }
+
+    // Load source if provided
+    const videoSrc = hlsUrl || src;
+    if (videoSrc) {
+      VideoManager.loadSource(videoSrc);
+    }
+
+    return () => {
+      unsubscribe();
+      // Don't detach - let video persist for route changes
+    };
+  }, [src, hlsUrl]);
+
+  const contextValue: VideoContextValue = {
+    state,
+    controls: {
+      play: () => VideoManager.play(),
+      pause: () => VideoManager.pause(),
+      toggle: () => VideoManager.toggle(),
+      seek: (time) => VideoManager.seek(time),
+      setMuted: (muted) => VideoManager.setMuted(muted),
+      setVolume: (volume) => VideoManager.setVolume(volume),
+    },
+  };
+
+  return (
+    <VideoContext.Provider value={contextValue}>
+      <div className={\`relative w-full h-full \${className}\`}>
+        {/* Container for persistent video element */}
+        <div
+          ref={containerRef}
+          className="absolute inset-0"
+          style={{ backgroundColor: 'black' }}
+        />
+
+        {/* Hide native controls */}
+        <style>{\`
+          #persistent-video::-webkit-media-controls { display: none !important; }
+          #persistent-video::-webkit-media-controls-start-playback-button { display: none !important; }
+          #persistent-video::-webkit-media-controls-overlay-play-button { display: none !important; }
+        \`}</style>
+
+        {/* Overlay content */}
+        <div className="absolute inset-0 z-10">
+          {children}
+        </div>
+      </div>
+    </VideoContext.Provider>
+  );
+}
+`;

package/dist/templates/video/VideoManager.ts.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Video Template - VideoManager
+ *
+ * Singleton to persist video playback across route changes.
+ * Similar pattern to DoomManager - holds the video element globally.
+ */
+export declare const videoManagerTemplate = "/**\n * VideoManager - Singleton to persist video across route changes\n *\n * Uses a global video element that persists across Next.js soft navigations.\n * When navigating from /tile to /page, the video keeps playing seamlessly.\n */\n\nimport { getTileBridge } from '@thewhateverapp/tile-sdk';\n\ndeclare global {\n  interface Window {\n    __videoElement?: HTMLVideoElement;\n    __videoHls?: any; // HLS.js instance\n    __videoInitialized?: boolean;\n    __videoVisible?: boolean;\n  }\n}\n\ntype StateCallback = (state: VideoState) => void;\n\nexport interface VideoState {\n  isPlaying: boolean;\n  currentTime: number;\n  duration: number;\n  isLoading: boolean;\n  isMuted: boolean;\n  volume: number;\n  error: string | null;\n}\n\nclass VideoManagerClass {\n  private stateCallbacks: Set<StateCallback> = new Set();\n  private currentState: VideoState = {\n    isPlaying: false,\n    currentTime: 0,\n    duration: 0,\n    isLoading: true,\n    isMuted: true,\n    volume: 1,\n    error: null,\n  };\n  private hlsScriptLoaded = false;\n\n  /**\n   * Get or create the persistent video element\n   */\n  getVideo(): HTMLVideoElement {\n    if (typeof window === 'undefined') {\n      throw new Error('VideoManager requires browser environment');\n    }\n\n    if (!window.__videoElement) {\n      const video = document.createElement('video');\n      video.id = 'persistent-video';\n      video.playsInline = true;\n      video.muted = true; // Start muted\n      video.loop = true;\n      video.preload = 'auto';\n      video.style.width = '100%';\n      video.style.height = '100%';\n      video.style.objectFit = 'contain';\n      video.style.backgroundColor = 'black';\n\n      // Set up event listeners\n      video.addEventListener('play', () => this.updateState({ isPlaying: true }));\n      video.addEventListener('pause', () => this.updateState({ isPlaying: false }));\n      video.addEventListener('timeupdate', () => {\n        this.updateState({ currentTime: video.currentTime });\n      });\n      video.addEventListener('durationchange', () => {\n        this.updateState({ duration: video.duration });\n      });\n      video.addEventListener('loadeddata', () => {\n        this.updateState({ isLoading: false });\n      });\n      video.addEventListener('waiting', () => {\n        this.updateState({ isLoading: true });\n      });\n      video.addEventListener('playing', () => {\n        this.updateState({ isLoading: false, isPlaying: true });\n      });\n      video.addEventListener('volumechange', () => {\n        this.updateState({ isMuted: video.muted, volume: video.volume });\n      });\n      video.addEventListener('error', () => {\n        this.updateState({ error: 'Video playback error' });\n      });\n\n      window.__videoElement = video;\n      this.setupVisibilityHandling();\n    }\n\n    return window.__videoElement;\n  }\n\n  /**\n   * Load a video source (supports HLS and regular video)\n   */\n  async loadSource(src: string): Promise<void> {\n    const video = this.getVideo();\n\n    // Check if this is an HLS stream\n    if (src.includes('.m3u8')) {\n      await this.loadHls(src);\n    } else {\n      // Regular video file\n      video.src = src;\n      video.load();\n    }\n  }\n\n  /**\n   * Load HLS stream using hls.js\n   */\n  private async loadHls(src: string): Promise<void> {\n    const video = this.getVideo();\n\n    // Load HLS.js from CDN if not already loaded\n    if (!this.hlsScriptLoaded && !(window as any).Hls) {\n      await new Promise<void>((resolve, reject) => {\n        const script = document.createElement('script');\n        script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1';\n        script.onload = () => {\n          this.hlsScriptLoaded = true;\n          resolve();\n        };\n        script.onerror = reject;\n        document.head.appendChild(script);\n      });\n    }\n\n    const Hls = (window as any).Hls;\n\n    // Clean up existing HLS instance\n    if (window.__videoHls) {\n      window.__videoHls.destroy();\n    }\n\n    if (Hls.isSupported()) {\n      const hls = new Hls({\n        enableWorker: true,\n        lowLatencyMode: true,\n      });\n      hls.loadSource(src);\n      hls.attachMedia(video);\n      hls.on(Hls.Events.MANIFEST_PARSED, () => {\n        this.updateState({ isLoading: false });\n      });\n      hls.on(Hls.Events.ERROR, (_: any, data: any) => {\n        if (data.fatal) {\n          this.updateState({ error: 'HLS playback error' });\n        }\n      });\n      window.__videoHls = hls;\n    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {\n      // Native HLS support (Safari)\n      video.src = src;\n    }\n  }\n\n  /**\n   * Set up visibility handling via TileBridge\n   */\n  private setupVisibilityHandling(): void {\n    if (typeof window === 'undefined') return;\n\n    try {\n      const bridge = getTileBridge();\n\n      bridge.onVisibilityChange((state) => {\n        const video = this.getVideo();\n        window.__videoVisible = state.visible;\n\n        if (state.visible && !state.muted) {\n          video.muted = false;\n          video.play().catch(() => {\n            video.muted = true;\n            video.play().catch(() => {});\n          });\n        } else {\n          video.muted = true;\n          if (!state.visible) {\n            video.pause();\n          }\n        }\n      });\n    } catch (err) {\n      console.log('[VideoManager] TileBridge not available');\n    }\n  }\n\n  /**\n   * Attach video element to a container\n   */\n  attachTo(container: HTMLElement): void {\n    const video = this.getVideo();\n    if (!container.contains(video)) {\n      container.appendChild(video);\n    }\n  }\n\n  /**\n   * Detach video element (but keep it in memory)\n   */\n  detach(): void {\n    const video = this.getVideo();\n    if (video.parentElement) {\n      video.parentElement.removeChild(video);\n    }\n  }\n\n  // Playback controls\n  play(): void {\n    this.getVideo().play().catch(() => {});\n  }\n\n  pause(): void {\n    this.getVideo().pause();\n  }\n\n  toggle(): void {\n    const video = this.getVideo();\n    if (video.paused) {\n      video.play().catch(() => {});\n    } else {\n      video.pause();\n    }\n  }\n\n  seek(time: number): void {\n    this.getVideo().currentTime = time;\n  }\n\n  setMuted(muted: boolean): void {\n    this.getVideo().muted = muted;\n  }\n\n  setVolume(volume: number): void {\n    this.getVideo().volume = Math.max(0, Math.min(1, volume));\n  }\n\n  // State management\n  getState(): VideoState {\n    return { ...this.currentState };\n  }\n\n  onStateChange(callback: StateCallback): () => void {\n    this.stateCallbacks.add(callback);\n    callback(this.currentState);\n    return () => this.stateCallbacks.delete(callback);\n  }\n\n  private updateState(partial: Partial<VideoState>): void {\n    this.currentState = { ...this.currentState, ...partial };\n    this.stateCallbacks.forEach(cb => cb(this.currentState));\n  }\n}\n\nexport const VideoManager = new VideoManagerClass();\n";
+//# sourceMappingURL=VideoManager.ts.template.d.ts.map

package/dist/templates/video/VideoManager.ts.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoManager.ts.template.d.ts","sourceRoot":"","sources":["../../../src/templates/video/VideoManager.ts.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,83NAmQhC,CAAC"}

package/dist/templates/video/VideoManager.ts.template.js

@@ -0,0 +1,266 @@
+/**
+ * Video Template - VideoManager
+ *
+ * Singleton to persist video playback across route changes.
+ * Similar pattern to DoomManager - holds the video element globally.
+ */
+export const videoManagerTemplate = `/**
+ * VideoManager - Singleton to persist video across route changes
+ *
+ * Uses a global video element that persists across Next.js soft navigations.
+ * When navigating from /tile to /page, the video keeps playing seamlessly.
+ */
+
+import { getTileBridge } from '@thewhateverapp/tile-sdk';
+
+declare global {
+  interface Window {
+    __videoElement?: HTMLVideoElement;
+    __videoHls?: any; // HLS.js instance
+    __videoInitialized?: boolean;
+    __videoVisible?: boolean;
+  }
+}
+
+type StateCallback = (state: VideoState) => void;
+
+export interface VideoState {
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  isLoading: boolean;
+  isMuted: boolean;
+  volume: number;
+  error: string | null;
+}
+
+class VideoManagerClass {
+  private stateCallbacks: Set<StateCallback> = new Set();
+  private currentState: VideoState = {
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    isLoading: true,
+    isMuted: true,
+    volume: 1,
+    error: null,
+  };
+  private hlsScriptLoaded = false;
+
+  /**
+   * Get or create the persistent video element
+   */
+  getVideo(): HTMLVideoElement {
+    if (typeof window === 'undefined') {
+      throw new Error('VideoManager requires browser environment');
+    }
+
+    if (!window.__videoElement) {
+      const video = document.createElement('video');
+      video.id = 'persistent-video';
+      video.playsInline = true;
+      video.muted = true; // Start muted
+      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 }));
+      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('waiting', () => {
+        this.updateState({ isLoading: true });
+      });
+      video.addEventListener('playing', () => {
+        this.updateState({ isLoading: false, isPlaying: true });
+      });
+      video.addEventListener('volumechange', () => {
+        this.updateState({ isMuted: video.muted, volume: video.volume });
+      });
+      video.addEventListener('error', () => {
+        this.updateState({ error: 'Video playback error' });
+      });
+
+      window.__videoElement = video;
+      this.setupVisibilityHandling();
+    }
+
+    return window.__videoElement;
+  }
+
+  /**
+   * Load a video source (supports HLS and regular video)
+   */
+  async loadSource(src: string): Promise<void> {
+    const video = this.getVideo();
+
+    // Check if this is an HLS stream
+    if (src.includes('.m3u8')) {
+      await this.loadHls(src);
+    } else {
+      // Regular video file
+      video.src = src;
+      video.load();
+    }
+  }
+
+  /**
+   * Load HLS stream using hls.js
+   */
+  private async loadHls(src: string): Promise<void> {
+    const video = this.getVideo();
+
+    // Load HLS.js from CDN if not already loaded
+    if (!this.hlsScriptLoaded && !(window as any).Hls) {
+      await new Promise<void>((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;
+        document.head.appendChild(script);
+      });
+    }
+
+    const Hls = (window as any).Hls;
+
+    // Clean up existing HLS instance
+    if (window.__videoHls) {
+      window.__videoHls.destroy();
+    }
+
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: true,
+      });
+      hls.loadSource(src);
+      hls.attachMedia(video);
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        this.updateState({ isLoading: false });
+      });
+      hls.on(Hls.Events.ERROR, (_: any, data: any) => {
+        if (data.fatal) {
+          this.updateState({ error: 'HLS playback error' });
+        }
+      });
+      window.__videoHls = hls;
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      // Native HLS support (Safari)
+      video.src = src;
+    }
+  }
+
+  /**
+   * Set up visibility handling via TileBridge
+   */
+  private setupVisibilityHandling(): void {
+    if (typeof window === 'undefined') return;
+
+    try {
+      const bridge = getTileBridge();
+
+      bridge.onVisibilityChange((state) => {
+        const video = this.getVideo();
+        window.__videoVisible = state.visible;
+
+        if (state.visible && !state.muted) {
+          video.muted = false;
+          video.play().catch(() => {
+            video.muted = true;
+            video.play().catch(() => {});
+          });
+        } else {
+          video.muted = true;
+          if (!state.visible) {
+            video.pause();
+          }
+        }
+      });
+    } catch (err) {
+      console.log('[VideoManager] TileBridge not available');
+    }
+  }
+
+  /**
+   * Attach video element to a container
+   */
+  attachTo(container: HTMLElement): void {
+    const video = this.getVideo();
+    if (!container.contains(video)) {
+      container.appendChild(video);
+    }
+  }
+
+  /**
+   * Detach video element (but keep it in memory)
+   */
+  detach(): void {
+    const video = this.getVideo();
+    if (video.parentElement) {
+      video.parentElement.removeChild(video);
+    }
+  }
+
+  // Playback controls
+  play(): void {
+    this.getVideo().play().catch(() => {});
+  }
+
+  pause(): void {
+    this.getVideo().pause();
+  }
+
+  toggle(): void {
+    const video = this.getVideo();
+    if (video.paused) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }
+
+  seek(time: number): void {
+    this.getVideo().currentTime = time;
+  }
+
+  setMuted(muted: boolean): void {
+    this.getVideo().muted = muted;
+  }
+
+  setVolume(volume: number): void {
+    this.getVideo().volume = Math.max(0, Math.min(1, volume));
+  }
+
+  // State management
+  getState(): VideoState {
+    return { ...this.currentState };
+  }
+
+  onStateChange(callback: StateCallback): () => void {
+    this.stateCallbacks.add(callback);
+    callback(this.currentState);
+    return () => this.stateCallbacks.delete(callback);
+  }
+
+  private updateState(partial: Partial<VideoState>): void {
+    this.currentState = { ...this.currentState, ...partial };
+    this.stateCallbacks.forEach(cb => cb(this.currentState));
+  }
+}
+
+export const VideoManager = new VideoManagerClass();
+`;

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

@@ -0,0 +1,14 @@
+/**
+ * Video Template Exports
+ *
+ * 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 declare const videoTemplateFiles: {
+    'src/shared/lib/VideoManager.ts': string;
+    'src/shared/components/PersistentVideo.tsx': string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/templates/video/index.js

@@ -0,0 +1,14 @@
+/**
+ * Video Template Exports
+ *
+ * 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';
+// Template file structure for video tiles
+export const videoTemplateFiles = {
+    'src/shared/lib/VideoManager.ts': 'videoManagerTemplate',
+    'src/shared/components/PersistentVideo.tsx': 'persistentVideoTemplate',
+};

package/dist/templates/video/layout.tsx.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Video Template - Layout
+ *
+ * This layout wraps both /tile and /page routes.
+ * The VideoPlayer is rendered here so it persists across route navigation.
+ */
+export declare const videoLayoutTemplate = "'use client';\n\nimport { VideoPlayer } from '@thewhateverapp/tile-sdk/react';\nimport { usePathname } from 'next/navigation';\n\nexport default function VideoLayout({ children }: { children: React.ReactNode }) {\n  const pathname = usePathname();\n  const isPageView = pathname === '/page';\n\n  return (\n    <div className=\"relative w-full h-full bg-black\">\n      {/* VideoPlayer persists across route changes */}\n      <VideoPlayer className=\"absolute inset-0\">\n        {/* Children are the route-specific overlays */}\n        {children}\n      </VideoPlayer>\n    </div>\n  );\n}\n";
+//# sourceMappingURL=layout.tsx.template.d.ts.map

package/dist/templates/video/layout.tsx.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/video/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,ulBAmB/B,CAAC"}

package/dist/templates/video/layout.tsx.template.js

@@ -0,0 +1,26 @@
+/**
+ * Video Template - Layout
+ *
+ * This layout wraps both /tile and /page routes.
+ * The VideoPlayer is rendered here so it persists across route navigation.
+ */
+export const videoLayoutTemplate = `'use client';
+
+import { VideoPlayer } from '@thewhateverapp/tile-sdk/react';
+import { usePathname } from 'next/navigation';
+
+export default function VideoLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isPageView = pathname === '/page';
+
+  return (
+    <div className="relative w-full h-full bg-black">
+      {/* VideoPlayer persists across route changes */}
+      <VideoPlayer className="absolute inset-0">
+        {/* Children are the route-specific overlays */}
+        {children}
+      </VideoPlayer>
+    </div>
+  );
+}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.12.19",
+  "version": "0.12.20",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -16,6 +16,14 @@
     "./tools": {
       "types": "./dist/tools/index.d.ts",
       "import": "./dist/tools/index.js"
+    },
+    "./templates": {
+      "types": "./dist/templates/index.d.ts",
+      "import": "./dist/templates/index.js"
+    },
+    "./templates/video": {
+      "types": "./dist/templates/video/index.d.ts",
+      "import": "./dist/templates/video/index.js"
     }
   },
   "files": [