@thewhateverapp/tile-sdk 0.13.13 → 0.13.15

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

@@ -75,12 +75,21 @@ class SlideshowSingletonClass {
     }
     // Navigation controls
     next() {
-        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1)
+        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');
             return;
+        }
+        const newIndex = (this.currentState.currentIndex + 1) % this.currentState.totalSlides;
+        console.log('[SlideshowSingleton] next() advancing to index:', newIndex);
         this.currentState = {
             ...this.currentState,
             isTransitioning: true,
-            currentIndex: (this.currentState.currentIndex + 1) % this.currentState.totalSlides,
+            currentIndex: newIndex,
         };
         this.notifyListeners();
         setTimeout(() => {
@@ -89,12 +98,21 @@ class SlideshowSingletonClass {
         }, this.transitionDuration);
     }
     prev() {
-        if (this.currentState.isTransitioning || this.currentState.totalSlides <= 1)
+        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');
             return;
+        }
+        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: (this.currentState.currentIndex - 1 + this.currentState.totalSlides) % this.currentState.totalSlides,
+            currentIndex: newIndex,
         };
         this.notifyListeners();
         setTimeout(() => {
@@ -217,10 +235,36 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
     const touchCurrentRef = useRef(null);
     useEffect(() => {
         const container = containerRef.current;
-        if (!container || !swipeable || state.totalSlides <= 1)
+        console.log('[Slideshow Swipe] Effect running:', {
+            hasContainer: !!container,
+            swipeable,
+            totalSlides: state.totalSlides,
+            isTransitioning: state.isTransitioning,
+        });
+        if (!container) {
+            console.log('[Slideshow Swipe] ❌ No container ref');
             return;
+        }
+        if (!swipeable) {
+            console.log('[Slideshow Swipe] ❌ Swipeable is false');
+            return;
+        }
+        if (state.totalSlides <= 1) {
+            console.log('[Slideshow Swipe] ❌ Only', state.totalSlides, 'slide(s)');
+            return;
+        }
+        console.log('[Slideshow Swipe] ✅ Attaching touch listeners to container');
         const handleTouchStart = (e) => {
             const touch = e.touches[0];
+            console.log('[Slideshow Swipe] touchstart:', {
+                hasTouch: !!touch,
+                clientX: touch?.clientX,
+                clientY: touch?.clientY,
+                target: e.target?.tagName,
+                currentTarget: e.currentTarget?.tagName,
+            });
+            if (!touch)
+                return;
             touchStartRef.current = {
                 x: touch.clientX,
                 y: touch.clientY,
@@ -229,19 +273,40 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
         };
         const handleTouchMove = (e) => {
-            if (!touchStartRef.current)
+            if (!touchStartRef.current) {
+                console.log('[Slideshow Swipe] touchmove: no touchStart ref');
                 return;
+            }
             const touch = e.touches[0];
+            if (!touch) {
+                console.log('[Slideshow Swipe] touchmove: no touch');
+                return;
+            }
             touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
-            // Prevent vertical scroll if horizontal swipe is detected
+            // Prevent default and stop propagation for horizontal swipes
             const deltaX = touch.clientX - touchStartRef.current.x;
             const deltaY = touch.clientY - touchStartRef.current.y;
             if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+                console.log('[Slideshow Swipe] touchmove: horizontal swipe detected, preventing default', { deltaX, deltaY });
                 e.preventDefault();
+                e.stopPropagation();
             }
         };
-        const handleTouchEnd = () => {
-            if (!touchStartRef.current || !touchCurrentRef.current || state.isTransitioning) {
+        const handleTouchEnd = (e) => {
+            console.log('[Slideshow Swipe] touchend:', {
+                hasTouchStart: !!touchStartRef.current,
+                hasTouchCurrent: !!touchCurrentRef.current,
+                isTransitioning: state.isTransitioning,
+            });
+            if (!touchStartRef.current || !touchCurrentRef.current) {
+                console.log('[Slideshow Swipe] touchend: missing refs, aborting');
+                touchStartRef.current = null;
+                touchCurrentRef.current = null;
+                return;
+            }
+            // Don't process if transitioning
+            if (state.isTransitioning) {
+                console.log('[Slideshow Swipe] touchend: transitioning, aborting');
                 touchStartRef.current = null;
                 touchCurrentRef.current = null;
                 return;
@@ -249,27 +314,49 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
             const deltaX = touchCurrentRef.current.x - touchStartRef.current.x;
             const deltaY = touchCurrentRef.current.y - 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;
+            // Lower threshold for smaller tiles - 30px minimum swipe distance
+            const minSwipeDistance = 30;
             const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
             const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
-            const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;
+            const isQuickSwipe = deltaTime < 500 || Math.abs(deltaX) > 60;
+            console.log('[Slideshow Swipe] touchend analysis:', {
+                deltaX,
+                deltaY,
+                deltaTime,
+                minSwipeDistance,
+                isHorizontalSwipe,
+                isValidSwipe,
+                isQuickSwipe,
+                willTrigger: isValidSwipe && isQuickSwipe,
+                direction: deltaX > 0 ? 'prev' : 'next',
+            });
             if (isValidSwipe && isQuickSwipe) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (deltaX > 0) {
+                    console.log('[Slideshow Swipe] 🎯 Triggering PREV');
                     singleton.prev();
                 }
                 else {
+                    console.log('[Slideshow Swipe] 🎯 Triggering NEXT');
                     singleton.next();
                 }
             }
+            else {
+                console.log('[Slideshow Swipe] ❌ Swipe not valid:', {
+                    reason: !isHorizontalSwipe ? 'not horizontal' : !isValidSwipe ? 'too short' : 'too slow',
+                });
+            }
             touchStartRef.current = null;
             touchCurrentRef.current = null;
         };
-        // Use passive: false to allow preventDefault() on touchmove
-        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        // Use passive: false on all to allow preventDefault()
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
         container.addEventListener('touchmove', handleTouchMove, { passive: false });
-        container.addEventListener('touchend', handleTouchEnd, { passive: true });
+        container.addEventListener('touchend', handleTouchEnd, { passive: false });
+        console.log('[Slideshow Swipe] ✅ Listeners attached successfully');
         return () => {
+            console.log('[Slideshow Swipe] Cleaning up listeners');
             container.removeEventListener('touchstart', handleTouchStart);
             container.removeEventListener('touchmove', handleTouchMove);
             container.removeEventListener('touchend', handleTouchEnd);
@@ -312,7 +399,7 @@ 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 ? 'pan-y pinch-zoom' : 'auto' } },
+        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,

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

@@ -4,5 +4,5 @@
  * 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, useRef, useCallback, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from '../lib/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  /** Enable swipe gestures on touch devices (default: true) */\n  swipeable?: 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  swipeable = true,\n  className = '',\n  imageClassName = '',\n  children\n}: PersistentSlideshowProps) {\n  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\n  const containerRef = useRef<HTMLDivElement>(null);\n  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);\n  const touchCurrentRef = useRef<{ x: number; y: number } | null>(null);\n\n  // Touch/swipe handlers using native events (React touch events are passive)\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !swipeable || state.totalSlides <= 1) return;\n\n    const handleTouchStart = (e: TouchEvent) => {\n      const touch = e.touches[0];\n      touchStartRef.current = {\n        x: touch.clientX,\n        y: touch.clientY,\n        time: Date.now(),\n      };\n      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };\n    };\n\n    const handleTouchMove = (e: TouchEvent) => {\n      if (!touchStartRef.current) return;\n      const touch = e.touches[0];\n      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };\n\n      // Prevent vertical scroll if horizontal swipe is detected\n      const deltaX = touch.clientX - touchStartRef.current.x;\n      const deltaY = touch.clientY - touchStartRef.current.y;\n      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {\n        e.preventDefault();\n      }\n    };\n\n    const handleTouchEnd = () => {\n      if (!touchStartRef.current || !touchCurrentRef.current || state.isTransitioning) {\n        touchStartRef.current = null;\n        touchCurrentRef.current = null;\n        return;\n      }\n\n      const deltaX = touchCurrentRef.current.x - touchStartRef.current.x;\n      const deltaY = touchCurrentRef.current.y - touchStartRef.current.y;\n      const deltaTime = Date.now() - touchStartRef.current.time;\n\n      // Minimum swipe distance (50px) and max time (300ms for quick swipe, or slower with more distance)\n      const minSwipeDistance = 50;\n      const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);\n      const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;\n      const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;\n\n      if (isValidSwipe && isQuickSwipe) {\n        if (deltaX > 0) {\n          SlideshowManager.prev();\n        } else {\n          SlideshowManager.next();\n        }\n      }\n\n      touchStartRef.current = null;\n      touchCurrentRef.current = null;\n    };\n\n    // Use passive: false to allow preventDefault() on touchmove\n    container.addEventListener('touchstart', handleTouchStart, { passive: true });\n    container.addEventListener('touchmove', handleTouchMove, { passive: false });\n    container.addEventListener('touchend', handleTouchEnd, { passive: true });\n\n    return () => {\n      container.removeEventListener('touchstart', handleTouchStart);\n      container.removeEventListener('touchmove', handleTouchMove);\n      container.removeEventListener('touchend', handleTouchEnd);\n    };\n  }, [swipeable, state.totalSlides, state.isTransitioning]);\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\n        ref={containerRef}\n        className={`relative w-full h-full bg-black overflow-hidden ${className}`}\n        style={{ touchAction: swipeable && state.totalSlides > 1 ? 'pan-y pinch-zoom' : 'auto' }}\n      >\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 - pointer-events managed by individual OverlaySlot components */}\n        <div className=\"absolute inset-0 z-10 pointer-events-none\">\n          {children}\n        </div>\n      </div>\n    </SlideshowContext.Provider>\n  );\n}\n";
+export declare const persistentSlideshowTemplate = "'use client';\n\nimport { useEffect, useState, useRef, useCallback, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from '../lib/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  /** Enable swipe gestures on touch devices (default: true) */\n  swipeable?: 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  swipeable = true,\n  className = '',\n  imageClassName = '',\n  children\n}: PersistentSlideshowProps) {\n  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\n  const containerRef = useRef<HTMLDivElement>(null);\n  const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);\n  const touchCurrentRef = useRef<{ x: number; y: number } | null>(null);\n\n  // Touch/swipe handlers using native events (React touch events are passive)\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || !swipeable || state.totalSlides <= 1) return;\n\n    const handleTouchStart = (e: TouchEvent) => {\n      const touch = e.touches[0];\n      if (!touch) return;\n\n      touchStartRef.current = {\n        x: touch.clientX,\n        y: touch.clientY,\n        time: Date.now(),\n      };\n      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };\n    };\n\n    const handleTouchMove = (e: TouchEvent) => {\n      if (!touchStartRef.current) return;\n      const touch = e.touches[0];\n      if (!touch) return;\n\n      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };\n\n      // Prevent default and stop propagation for horizontal swipes\n      const deltaX = touch.clientX - touchStartRef.current.x;\n      const deltaY = touch.clientY - touchStartRef.current.y;\n      if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n    };\n\n    const handleTouchEnd = (e: TouchEvent) => {\n      if (!touchStartRef.current || !touchCurrentRef.current) {\n        touchStartRef.current = null;\n        touchCurrentRef.current = null;\n        return;\n      }\n\n      // Don't process if transitioning\n      if (state.isTransitioning) {\n        touchStartRef.current = null;\n        touchCurrentRef.current = null;\n        return;\n      }\n\n      const deltaX = touchCurrentRef.current.x - touchStartRef.current.x;\n      const deltaY = touchCurrentRef.current.y - touchStartRef.current.y;\n      const deltaTime = Date.now() - touchStartRef.current.time;\n\n      // Lower threshold for smaller tiles - 30px minimum swipe distance\n      const minSwipeDistance = 30;\n      const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);\n      const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;\n      const isQuickSwipe = deltaTime < 500 || Math.abs(deltaX) > 60;\n\n      if (isValidSwipe && isQuickSwipe) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        if (deltaX > 0) {\n          SlideshowManager.prev();\n        } else {\n          SlideshowManager.next();\n        }\n      }\n\n      touchStartRef.current = null;\n      touchCurrentRef.current = null;\n    };\n\n    // Use passive: false on all to allow preventDefault()\n    container.addEventListener('touchstart', handleTouchStart, { passive: false });\n    container.addEventListener('touchmove', handleTouchMove, { passive: false });\n    container.addEventListener('touchend', handleTouchEnd, { passive: false });\n\n    return () => {\n      container.removeEventListener('touchstart', handleTouchStart);\n      container.removeEventListener('touchmove', handleTouchMove);\n      container.removeEventListener('touchend', handleTouchEnd);\n    };\n  }, [swipeable, state.totalSlides, state.isTransitioning]);\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\n        ref={containerRef}\n        className={`relative w-full h-full bg-black overflow-hidden ${className}`}\n        style={{ touchAction: swipeable && state.totalSlides > 1 ? 'none' : 'auto' }}\n      >\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 - pointer-events managed by individual OverlaySlot components */}\n        <div className=\"absolute inset-0 z-10 pointer-events-none\">\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

@@ -1 +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,25TA4RvC,CAAC"}
+{"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,8qUA2SvC,CAAC"}

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

@@ -81,6 +81,8 @@ export function PersistentSlideshow({
 
     const handleTouchStart = (e: TouchEvent) => {
       const touch = e.touches[0];
+      if (!touch) return;
+
       touchStartRef.current = {
         x: touch.clientX,
         y: touch.clientY,
@@ -92,18 +94,28 @@ export function PersistentSlideshow({
     const handleTouchMove = (e: TouchEvent) => {
       if (!touchStartRef.current) return;
       const touch = e.touches[0];
+      if (!touch) return;
+
       touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
 
-      // Prevent vertical scroll if horizontal swipe is detected
+      // Prevent default and stop propagation for horizontal swipes
       const deltaX = touch.clientX - touchStartRef.current.x;
       const deltaY = touch.clientY - touchStartRef.current.y;
       if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
         e.preventDefault();
+        e.stopPropagation();
       }
     };
 
-    const handleTouchEnd = () => {
-      if (!touchStartRef.current || !touchCurrentRef.current || state.isTransitioning) {
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (!touchStartRef.current || !touchCurrentRef.current) {
+        touchStartRef.current = null;
+        touchCurrentRef.current = null;
+        return;
+      }
+
+      // Don't process if transitioning
+      if (state.isTransitioning) {
         touchStartRef.current = null;
         touchCurrentRef.current = null;
         return;
@@ -113,13 +125,16 @@ export function PersistentSlideshow({
       const deltaY = touchCurrentRef.current.y - 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;
+      // Lower threshold for smaller tiles - 30px minimum swipe distance
+      const minSwipeDistance = 30;
       const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
       const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
-      const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;
+      const isQuickSwipe = deltaTime < 500 || Math.abs(deltaX) > 60;
 
       if (isValidSwipe && isQuickSwipe) {
+        e.preventDefault();
+        e.stopPropagation();
+
         if (deltaX > 0) {
           SlideshowManager.prev();
         } else {
@@ -131,10 +146,10 @@ export function PersistentSlideshow({
       touchCurrentRef.current = null;
     };
 
-    // Use passive: false to allow preventDefault() on touchmove
-    container.addEventListener('touchstart', handleTouchStart, { passive: true });
+    // Use passive: false on all to allow preventDefault()
+    container.addEventListener('touchstart', handleTouchStart, { passive: false });
     container.addEventListener('touchmove', handleTouchMove, { passive: false });
-    container.addEventListener('touchend', handleTouchEnd, { passive: true });
+    container.addEventListener('touchend', handleTouchEnd, { passive: false });
 
     return () => {
       container.removeEventListener('touchstart', handleTouchStart);
@@ -215,7 +230,7 @@ export function PersistentSlideshow({
       <div
         ref={containerRef}
         className={\`relative w-full h-full bg-black overflow-hidden \${className}\`}
-        style={{ touchAction: swipeable && state.totalSlides > 1 ? 'pan-y pinch-zoom' : 'auto' }}
+        style={{ touchAction: swipeable && state.totalSlides > 1 ? 'none' : 'auto' }}
       >
         {/* Image container */}
         <div className="relative w-full h-full">

package/package.json

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