@thewhateverapp/tile-sdk 0.12.20 → 0.12.21

package/dist/templates/index.d.ts

@@ -5,4 +5,5 @@
  * 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

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

@@ -5,6 +5,6 @@
  * These get injected as strings by tile-deploy/agent-service.
  */
 export * from './video';
+export * from './slideshow';
 // Future templates:
-// export * from './slideshow';
 // 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/package.json

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