@thewhateverapp/tile-sdk 0.13.0 → 0.13.2

package/dist/index.d.ts

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

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

@@ -9,8 +9,9 @@ export { withTile } from './react/withTile';
 export { 
 // Video player (with route persistence)
 VideoPlayer, useVideoState, useVideo, // Alias for useVideoState
-// Slideshow
-Slideshow, useSlideshowState, 
+useCuePoint, useCuePoints, useVideoProgress, 
+// Slideshow (with route persistence)
+Slideshow, useSlideshowState, useSlideshow, // Alias for useSlideshowState
 // Positioning components
 OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay';
 // Bridge for secure communication

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

@@ -1,4 +1,9 @@
 import React, { type ReactNode } from 'react';
+declare global {
+    interface Window {
+        __slideshowSingleton?: SlideshowSingletonClass;
+    }
+}
 export interface SlideImage {
     url: string;
     alt?: string;
@@ -23,6 +28,49 @@ export interface SlideshowContextValue {
     state: SlideshowState;
     controls: SlideshowControls;
 }
+type StateCallback = (state: SlideshowState) => void;
+/**
+ * SlideshowSingleton - Manages slideshow state across route changes.
+ *
+ * The current slide index and pause state persist across Next.js soft navigations.
+ * When navigating from /tile to /page, the slideshow maintains its position.
+ */
+declare class SlideshowSingletonClass {
+    private stateCallbacks;
+    private currentState;
+    private intervalRef;
+    private intervalMs;
+    private transitionDuration;
+    /**
+     * Initialize slideshow with images
+     */
+    initialize(images: SlideImage[], options?: {
+        intervalMs?: number;
+        autoAdvance?: boolean;
+        transitionDuration?: number;
+    }): void;
+    /**
+     * Start auto-advance timer
+     */
+    private startAutoAdvance;
+    /**
+     * Stop auto-advance timer
+     */
+    private stopAutoAdvance;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    pause(): void;
+    resume(): void;
+    toggle(): void;
+    getState(): SlideshowState;
+    onStateChange(callback: StateCallback): () => void;
+    private notifyListeners;
+    /**
+     * Clean up (call when slideshow is removed)
+     */
+    destroy(): void;
+}
 export interface SlideshowProps {
     /** Array of images to display */
     images: SlideImage[];
@@ -38,6 +86,10 @@ export interface SlideshowProps {
     showDots?: boolean;
     /** Show navigation arrows (default: true) */
     showArrows?: boolean;
+    /** Enable swipe gestures on touch devices (default: true) */
+    swipeable?: boolean;
+    /** Image fit mode: 'cover' fills container (may crop), 'contain' shows full image (may letterbox) */
+    objectFit?: 'cover' | 'contain';
     /** Children rendered as overlay */
     children?: ReactNode;
     /** Additional class names */
@@ -46,12 +98,24 @@ export interface SlideshowProps {
     imageClassName?: string;
 }
 /**
- * Slideshow component with auto-advancing image carousel.
- * Provides slideshow state and controls to child overlays via context.
+ * Slideshow component with auto-advancing image carousel and route persistence.
+ *
+ * The current slide index persists across Next.js route changes (tile ↔ page).
+ * When navigating between routes, the slideshow maintains its position.
+ *
+ * Usage:
+ * ```tsx
+ * <Slideshow images={images} className="w-full h-full">
+ *   <YourOverlay />
+ * </Slideshow>
+ * ```
  */
-export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
+export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, swipeable, objectFit, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
 /**
  * Hook to access slideshow state and controls from within Slideshow children.
+ * Also aliased as useSlideshow for consistency with VideoPlayer.
  */
 export declare function useSlideshowState(): SlideshowContextValue;
+export declare const useSlideshow: typeof useSlideshowState;
+export {};
 //# sourceMappingURL=Slideshow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAID,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,UAAiB,EACjB,WAAkB,EAClB,UAAmB,EACnB,kBAAwB,EACxB,QAAe,EACf,UAAiB,EACjB,QAAQ,EACR,SAAc,EACd,cAAmB,GACpB,EAAE,cAAc,qBAsLhB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,qBAAqB,CAMzD"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"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"}

package/dist/react/overlay/Slideshow.js

@@ -1,67 +1,254 @@
 'use client';
 import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
-const SlideshowContext = createContext(null);
 /**
- * Slideshow component with auto-advancing image carousel.
- * Provides slideshow state and controls to child overlays via context.
+ * SlideshowSingleton - Manages slideshow state across route changes.
+ *
+ * The current slide index and pause state persist across Next.js soft navigations.
+ * When navigating from /tile to /page, the slideshow maintains its position.
  */
-export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, children, className = '', imageClassName = '', }) {
-    const [currentIndex, setCurrentIndex] = useState(0);
-    const [isTransitioning, setIsTransitioning] = useState(false);
-    const [isPaused, setIsPaused] = useState(!autoAdvance);
-    const intervalRef = useRef(null);
-    const totalSlides = images.length;
-    // Control functions
-    const next = useCallback(() => {
-        if (isTransitioning || totalSlides <= 1)
+class SlideshowSingletonClass {
+    constructor() {
+        this.stateCallbacks = new Set();
+        this.currentState = {
+            currentIndex: 0,
+            totalSlides: 0,
+            isTransitioning: false,
+            isPaused: false,
+            images: [],
+        };
+        this.intervalRef = null;
+        this.intervalMs = 5000;
+        this.transitionDuration = 500;
+    }
+    /**
+     * Initialize slideshow with images
+     */
+    initialize(images, options) {
+        const imagesChanged = JSON.stringify(images) !== JSON.stringify(this.currentState.images);
+        // Only reset if images changed
+        if (imagesChanged) {
+            this.currentState = {
+                ...this.currentState,
+                currentIndex: 0,
+                totalSlides: images.length,
+                images,
+                isPaused: options?.autoAdvance === false,
+            };
+        }
+        else {
+            // Just update totalSlides in case it changed
+            this.currentState = {
+                ...this.currentState,
+                totalSlides: images.length,
+                images,
+            };
+        }
+        if (options?.intervalMs) {
+            this.intervalMs = options.intervalMs;
+        }
+        if (options?.transitionDuration) {
+            this.transitionDuration = options.transitionDuration;
+        }
+        this.notifyListeners();
+        this.startAutoAdvance();
+    }
+    /**
+     * Start auto-advance timer
+     */
+    startAutoAdvance() {
+        this.stopAutoAdvance();
+        if (this.currentState.isPaused || this.currentState.totalSlides <= 1) {
             return;
-        setIsTransitioning(true);
-        setCurrentIndex(prev => (prev + 1) % totalSlides);
-        setTimeout(() => setIsTransitioning(false), transitionDuration);
-    }, [isTransitioning, totalSlides, transitionDuration]);
-    const prev = useCallback(() => {
-        if (isTransitioning || totalSlides <= 1)
+        }
+        this.intervalRef = setInterval(() => {
+            this.next();
+        }, this.intervalMs);
+    }
+    /**
+     * Stop auto-advance timer
+     */
+    stopAutoAdvance() {
+        if (this.intervalRef) {
+            clearInterval(this.intervalRef);
+            this.intervalRef = null;
+        }
+    }
+    // Navigation controls
+    next() {
+        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1)
             return;
-        setIsTransitioning(true);
-        setCurrentIndex(prev => (prev - 1 + totalSlides) % totalSlides);
-        setTimeout(() => setIsTransitioning(false), transitionDuration);
-    }, [isTransitioning, totalSlides, transitionDuration]);
-    const goTo = useCallback((index) => {
-        if (isTransitioning || index === currentIndex || index < 0 || index >= totalSlides)
+        this.currentState = {
+            ...this.currentState,
+            isTransitioning: true,
+            currentIndex: (this.currentState.currentIndex + 1) % this.currentState.totalSlides,
+        };
+        this.notifyListeners();
+        setTimeout(() => {
+            this.currentState = { ...this.currentState, isTransitioning: false };
+            this.notifyListeners();
+        }, this.transitionDuration);
+    }
+    prev() {
+        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1)
             return;
-        setIsTransitioning(true);
-        setCurrentIndex(index);
-        setTimeout(() => setIsTransitioning(false), transitionDuration);
-    }, [isTransitioning, currentIndex, totalSlides, transitionDuration]);
-    const pause = useCallback(() => {
-        setIsPaused(true);
-    }, []);
-    const resume = useCallback(() => {
-        setIsPaused(false);
-    }, []);
-    const toggle = useCallback(() => {
-        setIsPaused(prev => !prev);
-    }, []);
-    // Auto-advance timer
-    useEffect(() => {
-        if (isPaused || totalSlides <= 1) {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
-                intervalRef.current = null;
-            }
+        this.currentState = {
+            ...this.currentState,
+            isTransitioning: true,
+            currentIndex: (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides,
+        };
+        this.notifyListeners();
+        setTimeout(() => {
+            this.currentState = { ...this.currentState, isTransitioning: false };
+            this.notifyListeners();
+        }, this.transitionDuration);
+    }
+    goTo(index) {
+        if (this.currentState.isTransitioning ||
+            index === this.currentState.currentIndex ||
+            index < 0 ||
+            index >= this.currentState.totalSlides)
             return;
+        this.currentState = {
+            ...this.currentState,
+            isTransitioning: true,
+            currentIndex: index,
+        };
+        this.notifyListeners();
+        setTimeout(() => {
+            this.currentState = { ...this.currentState, isTransitioning: false };
+            this.notifyListeners();
+        }, this.transitionDuration);
+    }
+    pause() {
+        this.currentState = { ...this.currentState, isPaused: true };
+        this.stopAutoAdvance();
+        this.notifyListeners();
+    }
+    resume() {
+        this.currentState = { ...this.currentState, isPaused: false };
+        this.startAutoAdvance();
+        this.notifyListeners();
+    }
+    toggle() {
+        if (this.currentState.isPaused) {
+            this.resume();
         }
-        intervalRef.current = setInterval(next, intervalMs);
-        return () => {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
-                intervalRef.current = null;
-            }
+        else {
+            this.pause();
+        }
+    }
+    // State management
+    getState() {
+        return { ...this.currentState };
+    }
+    onStateChange(callback) {
+        this.stateCallbacks.add(callback);
+        callback(this.currentState);
+        return () => this.stateCallbacks.delete(callback);
+    }
+    notifyListeners() {
+        this.stateCallbacks.forEach(cb => cb(this.currentState));
+    }
+    /**
+     * Clean up (call when slideshow is removed)
+     */
+    destroy() {
+        this.stopAutoAdvance();
+        this.stateCallbacks.clear();
+    }
+}
+/**
+ * Get the SlideshowSingleton instance (creates if needed)
+ */
+function getSlideshowSingleton() {
+    if (typeof window === 'undefined') {
+        return new SlideshowSingletonClass();
+    }
+    if (!window.__slideshowSingleton) {
+        window.__slideshowSingleton = new SlideshowSingletonClass();
+    }
+    return window.__slideshowSingleton;
+}
+// =============================================================================
+// React Context and Component
+// =============================================================================
+const SlideshowContext = createContext(null);
+/**
+ * Slideshow component with auto-advancing image carousel and route persistence.
+ *
+ * The current slide index persists across Next.js route changes (tile ↔ page).
+ * When navigating between routes, the slideshow maintains its position.
+ *
+ * Usage:
+ * ```tsx
+ * <Slideshow images={images} className="w-full h-full">
+ *   <YourOverlay />
+ * </Slideshow>
+ * ```
+ */
+export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, swipeable = true, objectFit = 'cover', children, className = '', imageClassName = '', }) {
+    const [state, setState] = useState(() => getSlideshowSingleton().getState());
+    const containerRef = useRef(null);
+    const touchStartRef = useRef(null);
+    // Initialize and subscribe to singleton
+    useEffect(() => {
+        const singleton = getSlideshowSingleton();
+        // Initialize with images and options
+        singleton.initialize(images, {
+            intervalMs,
+            autoAdvance,
+            transitionDuration,
+        });
+        // Subscribe to state changes
+        const unsubscribe = singleton.onStateChange(setState);
+        return unsubscribe;
+    }, [images, intervalMs, autoAdvance, transitionDuration]);
+    // Control functions bound to singleton
+    const singleton = getSlideshowSingleton();
+    const controls = {
+        next: useCallback(() => singleton.next(), []),
+        prev: useCallback(() => singleton.prev(), []),
+        goTo: useCallback((index) => singleton.goTo(index), []),
+        pause: useCallback(() => singleton.pause(), []),
+        resume: useCallback(() => singleton.resume(), []),
+        toggle: useCallback(() => singleton.toggle(), []),
+    };
+    // Touch/swipe handlers
+    const handleTouchStart = useCallback((e) => {
+        if (!swipeable || state.totalSlides <= 1)
+            return;
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now(),
         };
-    }, [isPaused, intervalMs, next, totalSlides]);
+    }, [swipeable, state.totalSlides]);
+    const handleTouchEnd = useCallback((e) => {
+        if (!swipeable || !touchStartRef.current || state.isTransitioning)
+            return;
+        const touch = e.changedTouches[0];
+        const deltaX = touch.clientX - touchStartRef.current.x;
+        const deltaY = touch.clientY - touchStartRef.current.y;
+        const deltaTime = Date.now() - touchStartRef.current.time;
+        // Minimum swipe distance (50px) and max time (300ms for quick swipe, or slower with more distance)
+        const minSwipeDistance = 50;
+        const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
+        const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
+        const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;
+        if (isValidSwipe && isQuickSwipe) {
+            if (deltaX > 0) {
+                controls.prev();
+            }
+            else {
+                controls.next();
+            }
+        }
+        touchStartRef.current = null;
+    }, [swipeable, state.isTransitioning, controls]);
     // Get transition styles
     const getTransitionStyles = (index) => {
-        const isActive = index === currentIndex;
+        const isActive = index === state.currentIndex;
         switch (transition) {
             case 'fade':
                 return {
@@ -71,7 +258,7 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
                     inset: 0,
                 };
             case 'slide':
-                const offset = (index - currentIndex) * 100;
+                const offset = (index - state.currentIndex) * 100;
                 return {
                     transform: `translateX(${offset}%)`,
                     transition: `transform ${transitionDuration}ms ease-in-out`,
@@ -88,37 +275,33 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
         }
     };
     const contextValue = {
-        state: {
-            currentIndex,
-            totalSlides,
-            isTransitioning,
-            isPaused,
-            images,
-        },
-        controls: { next, prev, goTo, pause, resume, toggle },
+        state,
+        controls,
     };
     if (images.length === 0) {
         return (React.createElement("div", { className: `relative w-full h-full bg-black flex items-center justify-center ${className}` },
             React.createElement("p", { className: "text-white/60" }, "No images")));
     }
     return (React.createElement(SlideshowContext.Provider, { value: contextValue },
-        React.createElement("div", { className: `relative w-full h-full bg-black overflow-hidden ${className}` },
-            React.createElement("div", { className: "relative w-full h-full" }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, style: getTransitionStyles(index), className: imageClassName },
-                React.createElement("img", { src: image.url, alt: image.alt || `Slide ${index + 1}`, className: "w-full h-full object-contain", loading: index === 0 ? 'eager' : 'lazy' }))))),
-            showArrows && totalSlides > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { onClick: prev, disabled: 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" },
+        React.createElement("div", { ref: containerRef, className: `relative w-full h-full bg-black overflow-hidden ${className}`, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd },
+            React.createElement("div", { className: "relative w-full h-full" }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, style: getTransitionStyles(index), className: `flex items-center justify-center ${imageClassName}` },
+                React.createElement("img", { src: image.url, alt: image.alt || `Slide ${index + 1}`, className: `w-full h-full ${objectFit === 'cover' ? 'object-cover' : 'object-contain'}`, style: { objectPosition: 'center' }, loading: index === 0 ? 'eager' : 'lazy', draggable: false }))))),
+            showArrows && state.totalSlides > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: controls.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" },
                     React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                         React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }))),
-                React.createElement("button", { onClick: next, disabled: 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" },
+                React.createElement("button", { onClick: controls.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" },
                     React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                         React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }))))),
-            showDots && totalSlides > 1 && (React.createElement("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => goTo(index), disabled: isTransitioning, className: `w-2 h-2 rounded-full transition-colors ${index === currentIndex
+            showDots && state.totalSlides > 1 && (React.createElement("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => controls.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}` }))))),
-            children)));
+            React.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none" },
+                React.createElement("div", { className: "pointer-events-auto" }, children)))));
 }
 /**
  * Hook to access slideshow state and controls from within Slideshow children.
+ * Also aliased as useSlideshow for consistency with VideoPlayer.
  */
 export function useSlideshowState() {
     const context = useContext(SlideshowContext);
@@ -127,3 +310,5 @@ export function useSlideshowState() {
     }
     return context;
 }
+// Alias for consistency with useVideo/useVideoState
+export const useSlideshow = useSlideshowState;

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

@@ -1,7 +1,7 @@
 export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState (compatibility)
 useCuePoint, useCuePoints, useVideoProgress, } from './VideoPlayer';
 export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, CuePoint, } from './VideoPlayer';
-export { Slideshow, useSlideshowState, } from './Slideshow';
+export { Slideshow, useSlideshowState, useSlideshow, } from './Slideshow';
 export type { SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, } from './Slideshow';
 export { OverlaySlot, FullOverlay, GradientOverlay, } from './OverlaySlot';
 export type { SlotPosition, OverlaySlotProps, FullOverlayProps, GradientOverlayProps, } from './OverlaySlot';

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

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

package/dist/react/overlay/index.js

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

package/package.json

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