@thewhateverapp/tile-sdk 0.15.8 → 0.16.0

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

@@ -1,9 +1,5 @@
 import React, { type ReactNode } from 'react';
-declare global {
-    interface Window {
-        __slideshowSingleton?: SlideshowSingletonClass;
-    }
-}
+import useEmblaCarousel from 'embla-carousel-react';
 export interface SlideImage {
     url: string;
     alt?: string;
@@ -28,11 +24,14 @@ export interface SlideshowContextValue {
     state: SlideshowState;
     controls: SlideshowControls;
 }
+declare global {
+    interface Window {
+        __slideshowSingleton?: SlideshowSingletonClass;
+    }
+}
 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 {
@@ -40,27 +39,18 @@ declare class SlideshowSingletonClass {
     private currentState;
     private intervalRef;
     private intervalMs;
-    private transitionDuration;
+    private emblaApi;
+    setEmblaApi(api: ReturnType<typeof useEmblaCarousel>[1] | null): void;
     /**
      * Initialize slideshow with images
-     *
-     * Auto-advance state is ALWAYS updated based on the autoAdvance option,
-     * allowing tile mode (no auto-advance) and page mode (auto-advance) to
-     * work correctly when navigating between routes with the same images.
      */
     initialize(images: SlideImage[], options?: {
         intervalMs?: number;
         autoAdvance?: boolean;
-        transitionDuration?: number;
     }): void;
-    /**
-     * Start auto-advance timer
-     */
     private startAutoAdvance;
-    /**
-     * Stop auto-advance timer
-     */
     private stopAutoAdvance;
+    updateFromEmbla(index: number): void;
     next(): void;
     prev(): void;
     goTo(index: number): void;
@@ -70,9 +60,6 @@ declare class SlideshowSingletonClass {
     getState(): SlideshowState;
     onStateChange(callback: StateCallback): () => void;
     private notifyListeners;
-    /**
-     * Clean up (call when slideshow is removed)
-     */
     destroy(): void;
 }
 export interface SlideshowProps {
@@ -82,9 +69,9 @@ export interface SlideshowProps {
     intervalMs?: number;
     /** Auto-advance slides (default: true) */
     autoAdvance?: boolean;
-    /** Transition type (default: 'fade') */
+    /** Transition type - note: Embla always uses slide, this is kept for API compat */
     transition?: 'fade' | 'slide' | 'none';
-    /** Transition duration in ms (default: 500) */
+    /** Transition duration in ms (default: 300) */
     transitionDuration?: number;
     /** Show navigation dots (default: true) */
     showDots?: boolean;
@@ -92,8 +79,10 @@ export interface SlideshowProps {
     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) */
+    /** Image fit mode: 'cover' fills container (may crop), 'contain' shows full image */
     objectFit?: 'cover' | 'contain';
+    /** Enable looping (default: true) */
+    loop?: boolean;
     /** Children rendered as overlay */
     children?: ReactNode;
     /** Additional class names */
@@ -102,22 +91,17 @@ export interface SlideshowProps {
     imageClassName?: string;
 }
 /**
- * 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.
+ * Slideshow component using Embla Carousel for smooth, native-like swiping.
  *
- * Usage:
- * ```tsx
- * <Slideshow images={images} className="w-full h-full">
- *   <YourOverlay />
- * </Slideshow>
- * ```
+ * Features:
+ * - Smooth touch/swipe with momentum physics
+ * - State persistence across route changes
+ * - Auto-advance with configurable interval
+ * - Overlay support for custom UI
  */
-export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, swipeable, objectFit, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
+export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, swipeable, objectFit, loop, 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;

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":"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"}
+{"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,9 +1,8 @@
 'use client';
 import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
 /**
  * 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.
  */
 class SlideshowSingletonClass {
@@ -18,21 +17,19 @@ class SlideshowSingletonClass {
         };
         this.intervalRef = null;
         this.intervalMs = 5000;
-        this.transitionDuration = 500;
+        // Embla API reference (set by component)
+        this.emblaApi = null;
+    }
+    setEmblaApi(api) {
+        this.emblaApi = api;
     }
     /**
      * Initialize slideshow with images
-     *
-     * Auto-advance state is ALWAYS updated based on the autoAdvance option,
-     * allowing tile mode (no auto-advance) and page mode (auto-advance) to
-     * work correctly when navigating between routes with the same images.
      */
     initialize(images, options) {
         const imagesChanged = JSON.stringify(images) !== JSON.stringify(this.currentState.images);
-        // Determine pause state from autoAdvance option (default: true = not paused)
         const shouldBePaused = options?.autoAdvance === false;
         if (imagesChanged) {
-            // Images changed - reset to first slide
             this.currentState = {
                 ...this.currentState,
                 currentIndex: 0,
@@ -42,8 +39,6 @@ class SlideshowSingletonClass {
             };
         }
         else {
-            // Same images - preserve current slide but update auto-advance state
-            // This allows tile→page navigation to start auto-advancing
             this.currentState = {
                 ...this.currentState,
                 totalSlides: images.length,
@@ -54,15 +49,9 @@ class SlideshowSingletonClass {
         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) {
@@ -72,78 +61,63 @@ class SlideshowSingletonClass {
             this.next();
         }, this.intervalMs);
     }
-    /**
-     * Stop auto-advance timer
-     */
     stopAutoAdvance() {
         if (this.intervalRef) {
             clearInterval(this.intervalRef);
             this.intervalRef = null;
         }
     }
-    // Navigation controls
+    // Update state from Embla (called on slide change)
+    updateFromEmbla(index) {
+        if (index !== this.currentState.currentIndex) {
+            this.currentState = {
+                ...this.currentState,
+                currentIndex: index,
+                isTransitioning: false,
+            };
+            this.notifyListeners();
+            // Restart auto-advance timer on manual navigation
+            if (!this.currentState.isPaused) {
+                this.startAutoAdvance();
+            }
+        }
+    }
     next() {
-        console.log('[SlideshowSingleton] next() called:', {
-            isTransitioning: this.currentState.isTransitioning,
-            totalSlides: this.currentState.totalSlides,
-            currentIndex: this.currentState.currentIndex,
-        });
-        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) {
-            console.log('[SlideshowSingleton] next() blocked:', this.currentState.isTransitioning ? 'transitioning' : 'single slide');
+        if (this.currentState.totalSlides <= 1)
             return;
+        if (this.emblaApi) {
+            this.emblaApi.scrollNext();
         }
-        const newIndex = (this.currentState.currentIndex + 1) % this.currentState.totalSlides;
-        console.log('[SlideshowSingleton] next() advancing to index:', newIndex);
-        this.currentState = {
-            ...this.currentState,
-            isTransitioning: true,
-            currentIndex: newIndex,
-        };
-        this.notifyListeners();
-        setTimeout(() => {
-            this.currentState = { ...this.currentState, isTransitioning: false };
+        else {
+            // Fallback without Embla
+            const newIndex = (this.currentState.currentIndex + 1) % this.currentState.totalSlides;
+            this.currentState = { ...this.currentState, currentIndex: newIndex };
             this.notifyListeners();
-        }, this.transitionDuration);
+        }
     }
     prev() {
-        console.log('[SlideshowSingleton] prev() called:', {
-            isTransitioning: this.currentState.isTransitioning,
-            totalSlides: this.currentState.totalSlides,
-            currentIndex: this.currentState.currentIndex,
-        });
-        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1) {
-            console.log('[SlideshowSingleton] prev() blocked:', this.currentState.isTransitioning ? 'transitioning' : 'single slide');
+        if (this.currentState.totalSlides <= 1)
             return;
+        if (this.emblaApi) {
+            this.emblaApi.scrollPrev();
         }
-        const newIndex = (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides;
-        console.log('[SlideshowSingleton] prev() going back to index:', newIndex);
-        this.currentState = {
-            ...this.currentState,
-            isTransitioning: true,
-            currentIndex: newIndex,
-        };
-        this.notifyListeners();
-        setTimeout(() => {
-            this.currentState = { ...this.currentState, isTransitioning: false };
+        else {
+            const newIndex = (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides;
+            this.currentState = { ...this.currentState, currentIndex: newIndex };
             this.notifyListeners();
-        }, this.transitionDuration);
+        }
     }
     goTo(index) {
-        if (this.currentState.isTransitioning ||
-            index === this.currentState.currentIndex ||
-            index < 0 ||
-            index >= this.currentState.totalSlides)
+        if (index < 0 || index >= this.currentState.totalSlides || index === this.currentState.currentIndex) {
             return;
-        this.currentState = {
-            ...this.currentState,
-            isTransitioning: true,
-            currentIndex: index,
-        };
-        this.notifyListeners();
-        setTimeout(() => {
-            this.currentState = { ...this.currentState, isTransitioning: false };
+        }
+        if (this.emblaApi) {
+            this.emblaApi.scrollTo(index);
+        }
+        else {
+            this.currentState = { ...this.currentState, currentIndex: index };
             this.notifyListeners();
-        }, this.transitionDuration);
+        }
     }
     pause() {
         this.currentState = { ...this.currentState, isPaused: true };
@@ -163,7 +137,6 @@ class SlideshowSingletonClass {
             this.pause();
         }
     }
-    // State management
     getState() {
         return { ...this.currentState };
     }
@@ -175,17 +148,12 @@ class SlideshowSingletonClass {
     notifyListeners() {
         this.stateCallbacks.forEach(cb => cb(this.currentState));
     }
-    /**
-     * Clean up (call when slideshow is removed)
-     */
     destroy() {
         this.stopAutoAdvance();
         this.stateCallbacks.clear();
+        this.emblaApi = null;
     }
 }
-/**
- * Get the SlideshowSingleton instance (creates if needed)
- */
 function getSlideshowSingleton() {
     if (typeof window === 'undefined') {
         return new SlideshowSingletonClass();
@@ -200,275 +168,68 @@ function getSlideshowSingleton() {
 // =============================================================================
 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.
+ * Slideshow component using Embla Carousel for smooth, native-like swiping.
  *
- * Usage:
- * ```tsx
- * <Slideshow images={images} className="w-full h-full">
- *   <YourOverlay />
- * </Slideshow>
- * ```
+ * Features:
+ * - Smooth touch/swipe with momentum physics
+ * - State persistence across route changes
+ * - Auto-advance with configurable interval
+ * - Overlay support for custom UI
  */
-export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, swipeable = true, objectFit = 'cover', children, className = '', imageClassName = '', }) {
+export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'slide', transitionDuration = 300, showDots = true, showArrows = true, swipeable = true, objectFit = 'cover', loop = true, children, className = '', imageClassName = '', }) {
     const [state, setState] = useState(() => getSlideshowSingleton().getState());
-    const containerRef = useRef(null);
-    const touchStartRef = useRef(null);
-    // Initialize and subscribe to singleton
+    const singleton = useRef(getSlideshowSingleton());
+    // Initialize Embla Carousel
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        loop: loop && images.length > 1,
+        dragFree: false,
+        containScroll: 'trimSnaps',
+        watchDrag: swipeable,
+        duration: transitionDuration,
+        startIndex: singleton.current.getState().currentIndex,
+    });
+    // Connect Embla API 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 with visual drag feedback
-    // NOTE: We attach listeners once and check singleton state directly to avoid
-    // stale closure issues and listener teardown during swipe sequences.
-    const touchCurrentRef = useRef(null);
-    const [dragOffset, setDragOffset] = useState(0); // Pixels dragged horizontally
-    const [isDragging, setIsDragging] = useState(false);
-    const containerWidthRef = useRef(0);
+        singleton.current.setEmblaApi(emblaApi);
+        return () => {
+            singleton.current.setEmblaApi(null);
+        };
+    }, [emblaApi]);
+    // Listen for Embla slide changes
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container || !swipeable) {
+        if (!emblaApi)
             return;
-        }
-        // Get singleton reference once - we'll check its state directly in handlers
-        const swipeSingleton = getSlideshowSingleton();
-        const handleTouchStart = (e) => {
-            // Check totalSlides from singleton (not stale closure)
-            if (swipeSingleton.getState().totalSlides <= 1)
-                return;
-            const touch = e.touches[0];
-            if (!touch)
-                return;
-            // Store container width for percentage calculations
-            containerWidthRef.current = container.offsetWidth;
-            touchStartRef.current = {
-                x: touch.clientX,
-                y: touch.clientY,
-                time: Date.now(),
-            };
-            touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
-            setIsDragging(true);
-            setDragOffset(0);
+        const onSelect = () => {
+            const index = emblaApi.selectedScrollSnap();
+            singleton.current.updateFromEmbla(index);
         };
-        const handleTouchMove = (e) => {
-            if (!touchStartRef.current)
-                return;
-            const touch = e.touches[0];
-            if (!touch)
-                return;
-            touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
-            const deltaX = touch.clientX - touchStartRef.current.x;
-            const deltaY = touch.clientY - touchStartRef.current.y;
-            // Only start visual drag if horizontal movement dominates (3px threshold for responsiveness)
-            if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 3) {
-                e.preventDefault();
-                e.stopPropagation();
-                // Apply resistance at edges (can't drag past first/last)
-                const currentIndex = swipeSingleton.getState().currentIndex;
-                const slideshowTotalSlides = swipeSingleton.getState().totalSlides;
-                const isAtStart = currentIndex === 0 && deltaX > 0;
-                const isAtEnd = currentIndex === slideshowTotalSlides - 1 && deltaX < 0;
-                if (isAtStart || isAtEnd) {
-                    // Rubber band effect - reduced movement at edges
-                    setDragOffset(deltaX * 0.3);
-                }
-                else {
-                    setDragOffset(deltaX);
-                }
-            }
-        };
-        const handleTouchEnd = (e) => {
-            const wasDragging = !!touchStartRef.current;
-            if (!touchStartRef.current || !touchCurrentRef.current) {
-                touchStartRef.current = null;
-                touchCurrentRef.current = null;
-                setIsDragging(false);
-                setDragOffset(0);
-                return;
-            }
-            // Check transitioning from singleton directly (not stale closure)
-            if (swipeSingleton.getState().isTransitioning) {
-                touchStartRef.current = null;
-                touchCurrentRef.current = null;
-                setIsDragging(false);
-                setDragOffset(0);
-                return;
-            }
-            const deltaX = touchCurrentRef.current.x - touchStartRef.current.x;
-            const deltaY = touchCurrentRef.current.y - touchStartRef.current.y;
-            const deltaTime = Date.now() - touchStartRef.current.time;
-            // 15px minimum swipe distance, must be horizontal (lowered for better sensitivity)
-            const minSwipeDistance = 15;
-            const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
-            const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
-            const isQuickSwipe = deltaTime < 600 || Math.abs(deltaX) > 35;
-            // Reset drag state before triggering transition
-            setIsDragging(false);
-            setDragOffset(0);
-            if (isValidSwipe && isQuickSwipe) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (deltaX > 0) {
-                    swipeSingleton.prev();
-                }
-                else {
-                    swipeSingleton.next();
-                }
-            }
-            touchStartRef.current = null;
-            touchCurrentRef.current = null;
-        };
-        // Also handle touch cancel (e.g., incoming call)
-        const handleTouchCancel = () => {
-            touchStartRef.current = null;
-            touchCurrentRef.current = null;
-            setIsDragging(false);
-            setDragOffset(0);
-        };
-        // Use passive: false to allow preventDefault()
-        container.addEventListener('touchstart', handleTouchStart, { passive: false });
-        container.addEventListener('touchmove', handleTouchMove, { passive: false });
-        container.addEventListener('touchend', handleTouchEnd, { passive: false });
-        container.addEventListener('touchcancel', handleTouchCancel, { passive: false });
+        emblaApi.on('select', onSelect);
+        // Sync initial position if singleton has a different index
+        const currentState = singleton.current.getState();
+        if (currentState.currentIndex !== emblaApi.selectedScrollSnap() && currentState.currentIndex < images.length) {
+            emblaApi.scrollTo(currentState.currentIndex, true);
+        }
         return () => {
-            container.removeEventListener('touchstart', handleTouchStart);
-            container.removeEventListener('touchmove', handleTouchMove);
-            container.removeEventListener('touchend', handleTouchEnd);
-            container.removeEventListener('touchcancel', handleTouchCancel);
+            emblaApi.off('select', onSelect);
         };
-    }, [swipeable]); // Only re-attach if swipeable changes - check singleton for dynamic state
-    // Track if we just finished dragging (for smooth transition)
-    const [justFinishedDrag, setJustFinishedDrag] = useState(false);
-    // When isDragging changes to false, briefly keep slide mode for smooth finish
+    }, [emblaApi, images.length]);
+    // Initialize singleton and subscribe to state changes
     useEffect(() => {
-        if (!isDragging && dragOffset === 0) {
-            setJustFinishedDrag(true);
-            const timer = setTimeout(() => setJustFinishedDrag(false), transitionDuration + 50);
-            return () => clearTimeout(timer);
-        }
-    }, [isDragging, dragOffset, transitionDuration]);
-    // Get transition styles with drag offset support
-    // When swipeable, always use slide transitions for consistency
-    const getTransitionStyles = (index) => {
-        const isActive = index === state.currentIndex;
-        // Use images.length as fallback since state.totalSlides may be 0 on first render
-        const totalSlides = state.totalSlides || images.length;
-        const isPrev = index === state.currentIndex - 1 ||
-            (state.currentIndex === 0 && index === totalSlides - 1); // Wrap around
-        const isNext = index === state.currentIndex + 1 ||
-            (state.currentIndex === totalSlides - 1 && index === 0); // Wrap around
-        // During drag, use slide-style movement for visual feedback
-        if (isDragging && swipeable && totalSlides > 1) {
-            const containerWidth = containerWidthRef.current || 256;
-            const dragPercent = (dragOffset / containerWidth) * 100;
-            // Check if at edges (no wrap-around during drag)
-            const isAtStart = state.currentIndex === 0;
-            const isAtEnd = state.currentIndex === totalSlides - 1;
-            // Show current, prev, and next slides during drag
-            if (isActive) {
-                return {
-                    transform: `translateX(${dragPercent}%)`,
-                    transition: 'none', // Immediate response during drag
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 2,
-                    opacity: 1,
-                };
-            }
-            else if (isPrev && dragOffset > 0 && !isAtStart) {
-                // Dragging right - show previous slide (but not at start - no wrap)
-                return {
-                    transform: `translateX(${-100 + dragPercent}%)`,
-                    transition: 'none',
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 1,
-                    opacity: 1,
-                };
-            }
-            else if (isNext && dragOffset < 0 && !isAtEnd) {
-                // Dragging left - show next slide (but not at end - no wrap)
-                return {
-                    transform: `translateX(${100 + dragPercent}%)`,
-                    transition: 'none',
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 1,
-                    opacity: 1,
-                };
-            }
-            else {
-                // Hide other slides during drag (positioned off-screen)
-                return {
-                    transform: 'translateX(-200%)',
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 0,
-                    opacity: 1,
-                };
-            }
-        }
-        // When swipeable is enabled, ALWAYS use slide/transform transitions
-        // Never use opacity-based fade to avoid any visual glitches
-        if (swipeable) {
-            const slideOffset = totalSlides > 1 ? (index - state.currentIndex) * 100 : 0;
-            return {
-                transform: `translateX(${slideOffset}%)`,
-                transition: (justFinishedDrag || state.isTransitioning) && totalSlides > 1
-                    ? `transform ${transitionDuration}ms ease-out`
-                    : 'none',
-                position: 'absolute',
-                inset: 0,
-                opacity: 1, // Always fully visible - no fade
-            };
-        }
-        // Non-swipeable mode - use the configured transition type
-        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,
-                    opacity: 1,
-                };
-            case 'none':
-            default:
-                return {
-                    opacity: isActive ? 1 : 0,
-                    position: 'absolute',
-                    inset: 0,
-                };
-        }
+        singleton.current.initialize(images, {
+            intervalMs,
+            autoAdvance,
+        });
+        const unsubscribe = singleton.current.onStateChange(setState);
+        return unsubscribe;
+    }, [images, intervalMs, autoAdvance]);
+    // Control functions
+    const controls = {
+        next: useCallback(() => singleton.current.next(), []),
+        prev: useCallback(() => singleton.current.prev(), []),
+        goTo: useCallback((index) => singleton.current.goTo(index), []),
+        pause: useCallback(() => singleton.current.pause(), []),
+        resume: useCallback(() => singleton.current.resume(), []),
+        toggle: useCallback(() => singleton.current.toggle(), []),
     };
     const contextValue = {
         state,
@@ -479,24 +240,24 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             React.createElement("p", { className: "text-white/60" }, "No images")));
     }
     return (React.createElement(SlideshowContext.Provider, { value: contextValue },
-        React.createElement("div", { ref: containerRef, className: `relative w-full h-full bg-black overflow-hidden ${className}`, style: { touchAction: swipeable && state.totalSlides > 1 ? 'none' : 'auto' } },
-            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("div", { className: `relative w-full h-full bg-black overflow-hidden ${className}` },
+            React.createElement("div", { ref: emblaRef, className: "w-full h-full overflow-hidden" },
+                React.createElement("div", { className: "flex h-full", style: { touchAction: swipeable ? 'pan-y' : 'auto' } }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, className: `flex-none w-full h-full flex items-center justify-center ${imageClassName}`, style: { minWidth: 0 } },
+                    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 && images.length > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: controls.prev, 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 z-10", "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: 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("button", { onClick: controls.next, 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 z-10", "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 && 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
+            showDots && images.length > 1 && (React.createElement("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10" }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => controls.goTo(index), 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}` }))))),
-            React.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none" }, children))));
+            React.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }, 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);
@@ -505,5 +266,5 @@ export function useSlideshowState() {
     }
     return context;
 }
-// Alias for consistency with useVideo/useVideoState
+// Alias for consistency
 export const useSlideshow = useSlideshowState;

package/dist/spec/schema.d.ts

@@ -103,12 +103,12 @@ declare const PlacementSchema: z.ZodUnion<[z.ZodObject<{
     align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
 }, "strip", z.ZodTypeAny, {
     lane: "center" | "bottom" | "top";
-    inset?: number | undefined;
     align?: "center" | "left" | "right" | undefined;
+    inset?: number | undefined;
 }, {
     lane: "center" | "bottom" | "top";
-    inset?: number | undefined;
     align?: "center" | "left" | "right" | undefined;
+    inset?: number | undefined;
 }>, z.ZodObject<{
     type: z.ZodEnum<["fullscreen", "inset", "positioned"]>;
     insets: z.ZodOptional<z.ZodObject<{
@@ -181,12 +181,12 @@ declare const OverlayCueSchema: z.ZodObject<{
         align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
     }, "strip", z.ZodTypeAny, {
         lane: "center" | "bottom" | "top";
-        inset?: number | undefined;
         align?: "center" | "left" | "right" | undefined;
+        inset?: number | undefined;
     }, {
         lane: "center" | "bottom" | "top";
-        inset?: number | undefined;
         align?: "center" | "left" | "right" | undefined;
+        inset?: number | undefined;
     }>, z.ZodObject<{
         type: z.ZodEnum<["fullscreen", "inset", "positioned"]>;
         insets: z.ZodOptional<z.ZodObject<{
@@ -264,8 +264,8 @@ declare const OverlayCueSchema: z.ZodObject<{
     };
     placement: {
         lane: "center" | "bottom" | "top";
-        inset?: number | undefined;
         align?: "center" | "left" | "right" | undefined;
+        inset?: number | undefined;
     } | {
         type: "inset" | "fullscreen" | "positioned";
         position?: {
@@ -295,8 +295,8 @@ declare const OverlayCueSchema: z.ZodObject<{
     };
     placement: {
         lane: "center" | "bottom" | "top";
-        inset?: number | undefined;
         align?: "center" | "left" | "right" | undefined;
+        inset?: number | undefined;
     } | {
         type: "inset" | "fullscreen" | "positioned";
         position?: {
@@ -462,12 +462,12 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
             }, "strip", z.ZodTypeAny, {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             }, {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             }>, z.ZodObject<{
                 type: z.ZodEnum<["fullscreen", "inset", "positioned"]>;
                 insets: z.ZodOptional<z.ZodObject<{
@@ -545,8 +545,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {
@@ -576,8 +576,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {
@@ -609,8 +609,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {
@@ -656,8 +656,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {
@@ -741,8 +741,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {
@@ -820,8 +820,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             };
             placement: {
                 lane: "center" | "bottom" | "top";
-                inset?: number | undefined;
                 align?: "center" | "left" | "right" | undefined;
+                inset?: number | undefined;
             } | {
                 type: "inset" | "fullscreen" | "positioned";
                 position?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.15.8",
+  "version": "0.16.0",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -65,6 +65,7 @@
   "license": "MIT",
   "dependencies": {
     "@thewhateverapp/scene-sdk": "^0.1.1",
+    "embla-carousel-react": "^8.5.1",
     "matter-js": "^0.19.0",
     "zod": "^3.22.0"
   },