@thewhateverapp/tile-sdk 0.12.19 → 0.12.21

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,9 @@
+/**
+ * Tile Templates
+ *
+ * Pre-built templates for common tile types.
+ * These get injected as strings by tile-deploy/agent-service.
+ */
+export * from './video';
+export * from './slideshow';
+//# 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;AACxB,cAAc,aAAa,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';
+export * from './slideshow';
+// Future templates:
+// export * from './image';

package/dist/templates/slideshow/PersistentSlideshow.tsx.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Slideshow Template - PersistentSlideshow Component
+ *
+ * React component that attaches to the SlideshowManager singleton.
+ * The slideshow state persists across route changes.
+ */
+export declare const persistentSlideshowTemplate = "'use client';\n\nimport { useEffect, useState, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from './SlideshowManager';\n\n// Context to share slideshow state with overlays\ninterface SlideshowContextValue {\n  state: SlideshowState;\n  controls: {\n    next: () => void;\n    prev: () => void;\n    goTo: (index: number) => void;\n    pause: () => void;\n    resume: () => void;\n    toggle: () => void;\n  };\n}\n\nconst SlideshowContext = createContext<SlideshowContextValue | null>(null);\n\nexport function useSlideshow(): SlideshowContextValue {\n  const context = useContext(SlideshowContext);\n  if (!context) {\n    throw new Error('useSlideshow must be used within PersistentSlideshow');\n  }\n  return context;\n}\n\ninterface PersistentSlideshowProps {\n  images: SlideImage[];\n  /** Auto-advance interval in milliseconds (default: 5000) */\n  intervalMs?: number;\n  /** Auto-advance slides (default: true) */\n  autoAdvance?: boolean;\n  /** Transition type (default: 'fade') */\n  transition?: 'fade' | 'slide' | 'none';\n  /** Transition duration in ms (default: 500) */\n  transitionDuration?: number;\n  /** Show navigation dots (default: true) */\n  showDots?: boolean;\n  /** Show navigation arrows (default: true) */\n  showArrows?: boolean;\n  /** Additional class names */\n  className?: string;\n  /** Image container class names */\n  imageClassName?: string;\n  /** Children rendered as overlay */\n  children?: ReactNode;\n}\n\nexport function PersistentSlideshow({\n  images,\n  intervalMs = 5000,\n  autoAdvance = true,\n  transition = 'fade',\n  transitionDuration = 500,\n  showDots = true,\n  showArrows = true,\n  className = '',\n  imageClassName = '',\n  children\n}: PersistentSlideshowProps) {\n  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\n\n  useEffect(() => {\n    // Initialize slideshow with images\n    SlideshowManager.initialize(images, {\n      intervalMs,\n      transitionDuration,\n      autoAdvance,\n    });\n\n    // Subscribe to state changes\n    const unsubscribe = SlideshowManager.onStateChange(setState);\n\n    return () => {\n      unsubscribe();\n      // Don't destroy - let slideshow persist for route changes\n    };\n  }, [images, intervalMs, transitionDuration, autoAdvance]);\n\n  const contextValue: SlideshowContextValue = {\n    state,\n    controls: {\n      next: () => SlideshowManager.next(),\n      prev: () => SlideshowManager.prev(),\n      goTo: (index) => SlideshowManager.goTo(index),\n      pause: () => SlideshowManager.pause(),\n      resume: () => SlideshowManager.resume(),\n      toggle: () => SlideshowManager.toggle(),\n    },\n  };\n\n  // Get transition styles\n  const getTransitionStyles = (index: number): React.CSSProperties => {\n    const isActive = index === state.currentIndex;\n\n    switch (transition) {\n      case 'fade':\n        return {\n          opacity: isActive ? 1 : 0,\n          transition: `opacity ${transitionDuration}ms ease-in-out`,\n          position: 'absolute',\n          inset: 0,\n        };\n      case 'slide':\n        const offset = (index - state.currentIndex) * 100;\n        return {\n          transform: `translateX(${offset}%)`,\n          transition: `transform ${transitionDuration}ms ease-in-out`,\n          position: 'absolute',\n          inset: 0,\n        };\n      case 'none':\n      default:\n        return {\n          opacity: isActive ? 1 : 0,\n          position: 'absolute',\n          inset: 0,\n        };\n    }\n  };\n\n  if (images.length === 0) {\n    return (\n      <div className={`relative w-full h-full bg-black flex items-center justify-center ${className}`}>\n        <p className=\"text-white/60\">No images</p>\n      </div>\n    );\n  }\n\n  return (\n    <SlideshowContext.Provider value={contextValue}>\n      <div className={`relative w-full h-full bg-black overflow-hidden ${className}`}>\n        {/* Image container */}\n        <div className=\"relative w-full h-full\">\n          {state.images.map((image, index) => (\n            <div\n              key={`${image.url}-${index}`}\n              style={getTransitionStyles(index)}\n              className={imageClassName}\n            >\n              <img\n                src={image.url}\n                alt={image.alt || `Slide ${index + 1}`}\n                className=\"w-full h-full object-contain\"\n                loading={index === 0 ? 'eager' : 'lazy'}\n              />\n            </div>\n          ))}\n        </div>\n\n        {/* Navigation arrows */}\n        {showArrows && state.totalSlides > 1 && (\n          <>\n            <button\n              onClick={() => SlideshowManager.prev()}\n              disabled={state.isTransitioning}\n              className=\"absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50\"\n              aria-label=\"Previous slide\"\n            >\n              <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n              </svg>\n            </button>\n            <button\n              onClick={() => SlideshowManager.next()}\n              disabled={state.isTransitioning}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50\"\n              aria-label=\"Next slide\"\n            >\n              <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n              </svg>\n            </button>\n          </>\n        )}\n\n        {/* Navigation dots */}\n        {showDots && state.totalSlides > 1 && (\n          <div className=\"absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5\">\n            {state.images.map((_, index) => (\n              <button\n                key={index}\n                onClick={() => SlideshowManager.goTo(index)}\n                disabled={state.isTransitioning}\n                className={`w-2 h-2 rounded-full transition-colors ${\n                  index === state.currentIndex\n                    ? 'bg-white'\n                    : 'bg-white/40 hover:bg-white/60'\n                }`}\n                aria-label={`Go to slide ${index + 1}`}\n              />\n            ))}\n          </div>\n        )}\n\n        {/* Overlay children */}\n        <div className=\"absolute inset-0 z-10\">\n          {children}\n        </div>\n      </div>\n    </SlideshowContext.Provider>\n  );\n}\n";
+//# sourceMappingURL=PersistentSlideshow.tsx.template.d.ts.map

package/dist/templates/slideshow/PersistentSlideshow.tsx.template.d.ts.map

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

package/dist/templates/slideshow/PersistentSlideshow.tsx.template.js

@@ -0,0 +1,212 @@
+/**
+ * Slideshow Template - PersistentSlideshow Component
+ *
+ * React component that attaches to the SlideshowManager singleton.
+ * The slideshow state persists across route changes.
+ */
+export const persistentSlideshowTemplate = `'use client';
+
+import { useEffect, useState, createContext, useContext, ReactNode } from 'react';
+import { SlideshowManager, SlideshowState, SlideImage } from './SlideshowManager';
+
+// Context to share slideshow state with overlays
+interface SlideshowContextValue {
+  state: SlideshowState;
+  controls: {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    pause: () => void;
+    resume: () => void;
+    toggle: () => void;
+  };
+}
+
+const SlideshowContext = createContext<SlideshowContextValue | null>(null);
+
+export function useSlideshow(): SlideshowContextValue {
+  const context = useContext(SlideshowContext);
+  if (!context) {
+    throw new Error('useSlideshow must be used within PersistentSlideshow');
+  }
+  return context;
+}
+
+interface PersistentSlideshowProps {
+  images: SlideImage[];
+  /** Auto-advance interval in milliseconds (default: 5000) */
+  intervalMs?: number;
+  /** Auto-advance slides (default: true) */
+  autoAdvance?: boolean;
+  /** Transition type (default: 'fade') */
+  transition?: 'fade' | 'slide' | 'none';
+  /** Transition duration in ms (default: 500) */
+  transitionDuration?: number;
+  /** Show navigation dots (default: true) */
+  showDots?: boolean;
+  /** Show navigation arrows (default: true) */
+  showArrows?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Image container class names */
+  imageClassName?: string;
+  /** Children rendered as overlay */
+  children?: ReactNode;
+}
+
+export function PersistentSlideshow({
+  images,
+  intervalMs = 5000,
+  autoAdvance = true,
+  transition = 'fade',
+  transitionDuration = 500,
+  showDots = true,
+  showArrows = true,
+  className = '',
+  imageClassName = '',
+  children
+}: PersistentSlideshowProps) {
+  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());
+
+  useEffect(() => {
+    // Initialize slideshow with images
+    SlideshowManager.initialize(images, {
+      intervalMs,
+      transitionDuration,
+      autoAdvance,
+    });
+
+    // Subscribe to state changes
+    const unsubscribe = SlideshowManager.onStateChange(setState);
+
+    return () => {
+      unsubscribe();
+      // Don't destroy - let slideshow persist for route changes
+    };
+  }, [images, intervalMs, transitionDuration, autoAdvance]);
+
+  const contextValue: SlideshowContextValue = {
+    state,
+    controls: {
+      next: () => SlideshowManager.next(),
+      prev: () => SlideshowManager.prev(),
+      goTo: (index) => SlideshowManager.goTo(index),
+      pause: () => SlideshowManager.pause(),
+      resume: () => SlideshowManager.resume(),
+      toggle: () => SlideshowManager.toggle(),
+    },
+  };
+
+  // Get transition styles
+  const getTransitionStyles = (index: number): React.CSSProperties => {
+    const isActive = index === state.currentIndex;
+
+    switch (transition) {
+      case 'fade':
+        return {
+          opacity: isActive ? 1 : 0,
+          transition: \`opacity \${transitionDuration}ms ease-in-out\`,
+          position: 'absolute',
+          inset: 0,
+        };
+      case 'slide':
+        const offset = (index - state.currentIndex) * 100;
+        return {
+          transform: \`translateX(\${offset}%)\`,
+          transition: \`transform \${transitionDuration}ms ease-in-out\`,
+          position: 'absolute',
+          inset: 0,
+        };
+      case 'none':
+      default:
+        return {
+          opacity: isActive ? 1 : 0,
+          position: 'absolute',
+          inset: 0,
+        };
+    }
+  };
+
+  if (images.length === 0) {
+    return (
+      <div className={\`relative w-full h-full bg-black flex items-center justify-center \${className}\`}>
+        <p className="text-white/60">No images</p>
+      </div>
+    );
+  }
+
+  return (
+    <SlideshowContext.Provider value={contextValue}>
+      <div className={\`relative w-full h-full bg-black overflow-hidden \${className}\`}>
+        {/* Image container */}
+        <div className="relative w-full h-full">
+          {state.images.map((image, index) => (
+            <div
+              key={\`\${image.url}-\${index}\`}
+              style={getTransitionStyles(index)}
+              className={imageClassName}
+            >
+              <img
+                src={image.url}
+                alt={image.alt || \`Slide \${index + 1}\`}
+                className="w-full h-full object-contain"
+                loading={index === 0 ? 'eager' : 'lazy'}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Navigation arrows */}
+        {showArrows && state.totalSlides > 1 && (
+          <>
+            <button
+              onClick={() => SlideshowManager.prev()}
+              disabled={state.isTransitioning}
+              className="absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50"
+              aria-label="Previous slide"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button
+              onClick={() => SlideshowManager.next()}
+              disabled={state.isTransitioning}
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50"
+              aria-label="Next slide"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </>
+        )}
+
+        {/* Navigation dots */}
+        {showDots && state.totalSlides > 1 && (
+          <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5">
+            {state.images.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => SlideshowManager.goTo(index)}
+                disabled={state.isTransitioning}
+                className={\`w-2 h-2 rounded-full transition-colors \${
+                  index === state.currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'
+                }\`}
+                aria-label={\`Go to slide \${index + 1}\`}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Overlay children */}
+        <div className="absolute inset-0 z-10">
+          {children}
+        </div>
+      </div>
+    </SlideshowContext.Provider>
+  );
+}
+`;

package/dist/templates/slideshow/SlideshowManager.ts.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Slideshow Template - SlideshowManager
+ *
+ * Singleton to persist slideshow state across route changes.
+ * Similar pattern to VideoManager - holds state globally.
+ */
+export declare const slideshowManagerTemplate = "/**\n * SlideshowManager - Singleton to persist slideshow state across route changes\n *\n * Maintains currentIndex, isPaused, and images across Next.js soft navigations.\n * When navigating from /tile to /page, the slideshow stays on the same slide.\n */\n\ndeclare global {\n  interface Window {\n    __slideshowState?: SlideshowState;\n    __slideshowInitialized?: boolean;\n  }\n}\n\nexport interface SlideImage {\n  url: string;\n  alt?: string;\n  caption?: string;\n}\n\nexport interface SlideshowState {\n  currentIndex: number;\n  totalSlides: number;\n  isTransitioning: boolean;\n  isPaused: boolean;\n  images: SlideImage[];\n}\n\ntype StateCallback = (state: SlideshowState) => void;\n\nclass SlideshowManagerClass {\n  private stateCallbacks: Set<StateCallback> = new Set();\n  private currentState: SlideshowState = {\n    currentIndex: 0,\n    totalSlides: 0,\n    isTransitioning: false,\n    isPaused: false,\n    images: [],\n  };\n  private autoAdvanceInterval: NodeJS.Timeout | null = null;\n  private transitionDuration = 500;\n  private intervalMs = 5000;\n\n  constructor() {\n    // Restore state from window if available\n    if (typeof window !== 'undefined' && window.__slideshowState) {\n      this.currentState = window.__slideshowState;\n    }\n  }\n\n  /**\n   * Initialize slideshow with images\n   */\n  initialize(images: SlideImage[], options?: {\n    intervalMs?: number;\n    transitionDuration?: number;\n    autoAdvance?: boolean;\n  }): void {\n    if (typeof window === 'undefined') return;\n\n    // Check if already initialized with same images\n    const imagesMatch = this.currentState.images.length === images.length &&\n      this.currentState.images.every((img, i) => img.url === images[i]?.url);\n\n    if (window.__slideshowInitialized && imagesMatch) {\n      // Already initialized with same images, just restore callbacks\n      return;\n    }\n\n    this.intervalMs = options?.intervalMs ?? 5000;\n    this.transitionDuration = options?.transitionDuration ?? 500;\n\n    this.currentState = {\n      ...this.currentState,\n      images,\n      totalSlides: images.length,\n      // Keep current index if valid, otherwise reset\n      currentIndex: this.currentState.currentIndex < images.length\n        ? this.currentState.currentIndex\n        : 0,\n      isPaused: options?.autoAdvance === false,\n    };\n\n    window.__slideshowState = this.currentState;\n    window.__slideshowInitialized = true;\n\n    this.notifyCallbacks();\n\n    // Start auto-advance if enabled\n    if (!this.currentState.isPaused && images.length > 1) {\n      this.startAutoAdvance();\n    }\n  }\n\n  /**\n   * Get current state\n   */\n  getState(): SlideshowState {\n    return { ...this.currentState };\n  }\n\n  /**\n   * Subscribe to state changes\n   */\n  onStateChange(callback: StateCallback): () => void {\n    this.stateCallbacks.add(callback);\n    callback(this.currentState);\n    return () => this.stateCallbacks.delete(callback);\n  }\n\n  /**\n   * Go to next slide\n   */\n  next(): void {\n    if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) return;\n\n    this.updateState({ isTransitioning: true });\n    const nextIndex = (this.currentState.currentIndex + 1) % this.currentState.totalSlides;\n    this.updateState({ currentIndex: nextIndex });\n\n    setTimeout(() => {\n      this.updateState({ isTransitioning: false });\n    }, this.transitionDuration);\n  }\n\n  /**\n   * Go to previous slide\n   */\n  prev(): void {\n    if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) return;\n\n    this.updateState({ isTransitioning: true });\n    const prevIndex = (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides;\n    this.updateState({ currentIndex: prevIndex });\n\n    setTimeout(() => {\n      this.updateState({ isTransitioning: false });\n    }, this.transitionDuration);\n  }\n\n  /**\n   * Go to specific slide\n   */\n  goTo(index: number): void {\n    if (\n      this.currentState.isTransitioning ||\n      index === this.currentState.currentIndex ||\n      index < 0 ||\n      index >= this.currentState.totalSlides\n    ) return;\n\n    this.updateState({ isTransitioning: true, currentIndex: index });\n\n    setTimeout(() => {\n      this.updateState({ isTransitioning: false });\n    }, this.transitionDuration);\n  }\n\n  /**\n   * Pause auto-advance\n   */\n  pause(): void {\n    this.updateState({ isPaused: true });\n    this.stopAutoAdvance();\n  }\n\n  /**\n   * Resume auto-advance\n   */\n  resume(): void {\n    this.updateState({ isPaused: false });\n    if (this.currentState.totalSlides > 1) {\n      this.startAutoAdvance();\n    }\n  }\n\n  /**\n   * Toggle pause/resume\n   */\n  toggle(): void {\n    if (this.currentState.isPaused) {\n      this.resume();\n    } else {\n      this.pause();\n    }\n  }\n\n  /**\n   * Clean up resources\n   */\n  destroy(): void {\n    this.stopAutoAdvance();\n    this.stateCallbacks.clear();\n    if (typeof window !== 'undefined') {\n      window.__slideshowInitialized = false;\n    }\n  }\n\n  private startAutoAdvance(): void {\n    this.stopAutoAdvance();\n    this.autoAdvanceInterval = setInterval(() => {\n      if (!this.currentState.isPaused) {\n        this.next();\n      }\n    }, this.intervalMs);\n  }\n\n  private stopAutoAdvance(): void {\n    if (this.autoAdvanceInterval) {\n      clearInterval(this.autoAdvanceInterval);\n      this.autoAdvanceInterval = null;\n    }\n  }\n\n  private updateState(partial: Partial<SlideshowState>): void {\n    this.currentState = { ...this.currentState, ...partial };\n    if (typeof window !== 'undefined') {\n      window.__slideshowState = this.currentState;\n    }\n    this.notifyCallbacks();\n  }\n\n  private notifyCallbacks(): void {\n    this.stateCallbacks.forEach(cb => cb(this.currentState));\n  }\n}\n\nexport const SlideshowManager = new SlideshowManagerClass();\n";
+//# sourceMappingURL=SlideshowManager.ts.template.d.ts.map

package/dist/templates/slideshow/SlideshowManager.ts.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideshowManager.ts.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/SlideshowManager.ts.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,s1LAoOpC,CAAC"}

package/dist/templates/slideshow/SlideshowManager.ts.template.js

@@ -0,0 +1,235 @@
+/**
+ * Slideshow Template - SlideshowManager
+ *
+ * Singleton to persist slideshow state across route changes.
+ * Similar pattern to VideoManager - holds state globally.
+ */
+export const slideshowManagerTemplate = `/**
+ * SlideshowManager - Singleton to persist slideshow state across route changes
+ *
+ * Maintains currentIndex, isPaused, and images across Next.js soft navigations.
+ * When navigating from /tile to /page, the slideshow stays on the same slide.
+ */
+
+declare global {
+  interface Window {
+    __slideshowState?: SlideshowState;
+    __slideshowInitialized?: boolean;
+  }
+}
+
+export interface SlideImage {
+  url: string;
+  alt?: string;
+  caption?: string;
+}
+
+export interface SlideshowState {
+  currentIndex: number;
+  totalSlides: number;
+  isTransitioning: boolean;
+  isPaused: boolean;
+  images: SlideImage[];
+}
+
+type StateCallback = (state: SlideshowState) => void;
+
+class SlideshowManagerClass {
+  private stateCallbacks: Set<StateCallback> = new Set();
+  private currentState: SlideshowState = {
+    currentIndex: 0,
+    totalSlides: 0,
+    isTransitioning: false,
+    isPaused: false,
+    images: [],
+  };
+  private autoAdvanceInterval: NodeJS.Timeout | null = null;
+  private transitionDuration = 500;
+  private intervalMs = 5000;
+
+  constructor() {
+    // Restore state from window if available
+    if (typeof window !== 'undefined' && window.__slideshowState) {
+      this.currentState = window.__slideshowState;
+    }
+  }
+
+  /**
+   * Initialize slideshow with images
+   */
+  initialize(images: SlideImage[], options?: {
+    intervalMs?: number;
+    transitionDuration?: number;
+    autoAdvance?: boolean;
+  }): void {
+    if (typeof window === 'undefined') return;
+
+    // Check if already initialized with same images
+    const imagesMatch = this.currentState.images.length === images.length &&
+      this.currentState.images.every((img, i) => img.url === images[i]?.url);
+
+    if (window.__slideshowInitialized && imagesMatch) {
+      // Already initialized with same images, just restore callbacks
+      return;
+    }
+
+    this.intervalMs = options?.intervalMs ?? 5000;
+    this.transitionDuration = options?.transitionDuration ?? 500;
+
+    this.currentState = {
+      ...this.currentState,
+      images,
+      totalSlides: images.length,
+      // Keep current index if valid, otherwise reset
+      currentIndex: this.currentState.currentIndex < images.length
+        ? this.currentState.currentIndex
+        : 0,
+      isPaused: options?.autoAdvance === false,
+    };
+
+    window.__slideshowState = this.currentState;
+    window.__slideshowInitialized = true;
+
+    this.notifyCallbacks();
+
+    // Start auto-advance if enabled
+    if (!this.currentState.isPaused && images.length > 1) {
+      this.startAutoAdvance();
+    }
+  }
+
+  /**
+   * Get current state
+   */
+  getState(): SlideshowState {
+    return { ...this.currentState };
+  }
+
+  /**
+   * Subscribe to state changes
+   */
+  onStateChange(callback: StateCallback): () => void {
+    this.stateCallbacks.add(callback);
+    callback(this.currentState);
+    return () => this.stateCallbacks.delete(callback);
+  }
+
+  /**
+   * Go to next slide
+   */
+  next(): void {
+    if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) return;
+
+    this.updateState({ isTransitioning: true });
+    const nextIndex = (this.currentState.currentIndex + 1) % this.currentState.totalSlides;
+    this.updateState({ currentIndex: nextIndex });
+
+    setTimeout(() => {
+      this.updateState({ isTransitioning: false });
+    }, this.transitionDuration);
+  }
+
+  /**
+   * Go to previous slide
+   */
+  prev(): void {
+    if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) return;
+
+    this.updateState({ isTransitioning: true });
+    const prevIndex = (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides;
+    this.updateState({ currentIndex: prevIndex });
+
+    setTimeout(() => {
+      this.updateState({ isTransitioning: false });
+    }, this.transitionDuration);
+  }
+
+  /**
+   * Go to specific slide
+   */
+  goTo(index: number): void {
+    if (
+      this.currentState.isTransitioning ||
+      index === this.currentState.currentIndex ||
+      index < 0 ||
+      index >= this.currentState.totalSlides
+    ) return;
+
+    this.updateState({ isTransitioning: true, currentIndex: index });
+
+    setTimeout(() => {
+      this.updateState({ isTransitioning: false });
+    }, this.transitionDuration);
+  }
+
+  /**
+   * Pause auto-advance
+   */
+  pause(): void {
+    this.updateState({ isPaused: true });
+    this.stopAutoAdvance();
+  }
+
+  /**
+   * Resume auto-advance
+   */
+  resume(): void {
+    this.updateState({ isPaused: false });
+    if (this.currentState.totalSlides > 1) {
+      this.startAutoAdvance();
+    }
+  }
+
+  /**
+   * Toggle pause/resume
+   */
+  toggle(): void {
+    if (this.currentState.isPaused) {
+      this.resume();
+    } else {
+      this.pause();
+    }
+  }
+
+  /**
+   * Clean up resources
+   */
+  destroy(): void {
+    this.stopAutoAdvance();
+    this.stateCallbacks.clear();
+    if (typeof window !== 'undefined') {
+      window.__slideshowInitialized = false;
+    }
+  }
+
+  private startAutoAdvance(): void {
+    this.stopAutoAdvance();
+    this.autoAdvanceInterval = setInterval(() => {
+      if (!this.currentState.isPaused) {
+        this.next();
+      }
+    }, this.intervalMs);
+  }
+
+  private stopAutoAdvance(): void {
+    if (this.autoAdvanceInterval) {
+      clearInterval(this.autoAdvanceInterval);
+      this.autoAdvanceInterval = null;
+    }
+  }
+
+  private updateState(partial: Partial<SlideshowState>): void {
+    this.currentState = { ...this.currentState, ...partial };
+    if (typeof window !== 'undefined') {
+      window.__slideshowState = this.currentState;
+    }
+    this.notifyCallbacks();
+  }
+
+  private notifyCallbacks(): void {
+    this.stateCallbacks.forEach(cb => cb(this.currentState));
+  }
+}
+
+export const SlideshowManager = new SlideshowManagerClass();
+`;

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

@@ -0,0 +1,13 @@
+/**
+ * Slideshow Template Exports
+ *
+ * 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 declare const slideshowTemplateFiles: {
+    'src/shared/lib/SlideshowManager.ts': string;
+    'src/shared/components/PersistentSlideshow.tsx': string;
+};
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/templates/slideshow/index.js

@@ -0,0 +1,13 @@
+/**
+ * Slideshow Template Exports
+ *
+ * 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';
+// Template file structure for slideshow tiles
+export const slideshowTemplateFiles = {
+    'src/shared/lib/SlideshowManager.ts': 'slideshowManagerTemplate',
+    'src/shared/components/PersistentSlideshow.tsx': 'persistentSlideshowTemplate',
+};

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.21",
   "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": [