@thewhateverapp/tile-sdk 0.13.11 → 0.13.13

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

@@ -213,39 +213,68 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
         resume: useCallback(() => singleton.resume(), []),
         toggle: useCallback(() => singleton.toggle(), []),
     };
-    // Touch/swipe handlers
-    const handleTouchStart = useCallback((e) => {
-        if (!swipeable || state.totalSlides <= 1)
+    // Touch/swipe handlers using native events (React touch events are passive)
+    const touchCurrentRef = useRef(null);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !swipeable || state.totalSlides <= 1)
             return;
-        const touch = e.touches[0];
-        touchStartRef.current = {
-            x: touch.clientX,
-            y: touch.clientY,
-            time: Date.now(),
+        const handleTouchStart = (e) => {
+            const touch = e.touches[0];
+            touchStartRef.current = {
+                x: touch.clientX,
+                y: touch.clientY,
+                time: Date.now(),
+            };
+            touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
         };
-    }, [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();
+        const handleTouchMove = (e) => {
+            if (!touchStartRef.current)
+                return;
+            const touch = e.touches[0];
+            touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
+            // Prevent vertical scroll if horizontal swipe is detected
+            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();
+            }
+        };
+        const handleTouchEnd = () => {
+            if (!touchStartRef.current || !touchCurrentRef.current || state.isTransitioning) {
+                touchStartRef.current = null;
+                touchCurrentRef.current = null;
+                return;
             }
-            else {
-                controls.next();
+            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;
+            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) {
+                    singleton.prev();
+                }
+                else {
+                    singleton.next();
+                }
             }
-        }
-        touchStartRef.current = null;
-    }, [swipeable, state.isTransitioning, controls]);
+            touchStartRef.current = null;
+            touchCurrentRef.current = null;
+        };
+        // Use passive: false to allow preventDefault() on touchmove
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd, { passive: true });
+        return () => {
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [swipeable, state.totalSlides, state.isTransitioning, singleton]);
     // Get transition styles
     const getTransitionStyles = (index) => {
         const isActive = index === state.currentIndex;
@@ -283,7 +312,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}`, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd },
+        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", { 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 touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);\n\n  // Touch/swipe handlers\n  const handleTouchStart = useCallback((e: React.TouchEvent) => {\n    if (!swipeable || state.totalSlides <= 1) return;\n    const touch = e.touches[0];\n    touchStartRef.current = {\n      x: touch.clientX,\n      y: touch.clientY,\n      time: Date.now(),\n    };\n  }, [swipeable, state.totalSlides]);\n\n  const handleTouchEnd = useCallback((e: React.TouchEvent) => {\n    if (!swipeable || !touchStartRef.current || state.isTransitioning) return;\n\n    const touch = e.changedTouches[0];\n    const deltaX = touch.clientX - touchStartRef.current.x;\n    const deltaY = touch.clientY - 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  }, [swipeable, 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        className={`relative w-full h-full bg-black overflow-hidden ${className}`}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\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      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";
 //# 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,y2QAyPvC,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,25TA4RvC,CAAC"}

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

@@ -70,43 +70,78 @@ export function PersistentSlideshow({
   children
 }: PersistentSlideshowProps) {
   const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());
+  const containerRef = useRef<HTMLDivElement>(null);
   const touchStartRef = useRef<{ x: number; y: number; time: number } | null>(null);
+  const touchCurrentRef = useRef<{ x: number; y: number } | null>(null);
 
-  // Touch/swipe handlers
-  const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    if (!swipeable || state.totalSlides <= 1) return;
-    const touch = e.touches[0];
-    touchStartRef.current = {
-      x: touch.clientX,
-      y: touch.clientY,
-      time: Date.now(),
+  // Touch/swipe handlers using native events (React touch events are passive)
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !swipeable || state.totalSlides <= 1) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      const touch = e.touches[0];
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        time: Date.now(),
+      };
+      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
     };
-  }, [swipeable, state.totalSlides]);
 
-  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
-    if (!swipeable || !touchStartRef.current || state.isTransitioning) return;
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!touchStartRef.current) return;
+      const touch = e.touches[0];
+      touchCurrentRef.current = { x: touch.clientX, y: touch.clientY };
+
+      // Prevent vertical scroll if horizontal swipe is detected
+      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();
+      }
+    };
+
+    const handleTouchEnd = () => {
+      if (!touchStartRef.current || !touchCurrentRef.current || state.isTransitioning) {
+        touchStartRef.current = null;
+        touchCurrentRef.current = null;
+        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;
+      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;
-    const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
-    const isValidSwipe = Math.abs(deltaX) > minSwipeDistance && isHorizontalSwipe;
-    const isQuickSwipe = deltaTime < 300 || Math.abs(deltaX) > 100;
+      // 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) {
-        SlideshowManager.prev();
-      } else {
-        SlideshowManager.next();
+      if (isValidSwipe && isQuickSwipe) {
+        if (deltaX > 0) {
+          SlideshowManager.prev();
+        } else {
+          SlideshowManager.next();
+        }
       }
-    }
 
-    touchStartRef.current = null;
-  }, [swipeable, state.isTransitioning]);
+      touchStartRef.current = null;
+      touchCurrentRef.current = null;
+    };
+
+    // Use passive: false to allow preventDefault() on touchmove
+    container.addEventListener('touchstart', handleTouchStart, { passive: true });
+    container.addEventListener('touchmove', handleTouchMove, { passive: false });
+    container.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    return () => {
+      container.removeEventListener('touchstart', handleTouchStart);
+      container.removeEventListener('touchmove', handleTouchMove);
+      container.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [swipeable, state.totalSlides, state.isTransitioning]);
 
   useEffect(() => {
     // Initialize slideshow with images
@@ -178,9 +213,9 @@ export function PersistentSlideshow({
   return (
     <SlideshowContext.Provider value={contextValue}>
       <div
+        ref={containerRef}
         className={\`relative w-full h-full bg-black overflow-hidden \${className}\`}
-        onTouchStart={handleTouchStart}
-        onTouchEnd={handleTouchEnd}
+        style={{ touchAction: swipeable && state.totalSlides > 1 ? 'pan-y pinch-zoom' : 'auto' }}
       >
         {/* Image container */}
         <div className="relative w-full h-full">

package/package.json

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