@thewhateverapp/tile-sdk 0.16.3 → 0.16.7

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

@@ -1,11 +1,21 @@
 /**
- * Slideshow Template - Layout
+ * Slideshow Templates - Auto-generated from base-image-worker
+ *
+ * DO NOT EDIT THIS FILE DIRECTLY!
+ * Edit the source files in platform/workers/base-image-worker/ and run:
+ *   pnpm sync-templates
+ *
+ * Source files:
+ * - Tile page: workers/base-image-worker/src/app/tile/page.tsx
+ * - Full page: workers/base-image-worker/src/app/page/page.tsx
+ */
+/**
+ * Slideshow Layout Template
  *
  * This layout wraps both /tile and /page routes using a route group.
  * The Slideshow is rendered ONCE here and persists across route navigation.
  *
  * File path: src/app/(slideshow)/layout.tsx
- * Routes:    src/app/(slideshow)/tile/page.tsx, src/app/(slideshow)/page/page.tsx
  */
 export const slideshowLayoutTemplate = `'use client';
 
@@ -34,47 +44,97 @@ export default function SlideshowLayout({ children }: { children: React.ReactNod
 /**
  * Slideshow Tile Overlay Template
  *
- * Overlay-only component for tile view (256×554px).
+ * Overlay-only component for tile view (256x554px).
  * Slideshow is already mounted in the parent layout.
  *
  * File path: src/app/(slideshow)/tile/page.tsx
  */
 export const slideshowTileOverlayTemplate = `'use client';
 
-import { useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
-import { useTile } from '@thewhateverapp/tile-sdk';
+import { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';
 
-export default function TileOverlay() {
-  const tile = useTile();
-  const { state } = useSlideshowState();
+export default function SlideshowTilePage() {
+  
+  if (!state.images || state.images.length === 0) {
+    return (
+      <div className="w-full h-full bg-black flex items-center justify-center">
+        <p className="text-white/60 text-sm">No images configured</p>
+      </div>
+    );
+  }
 
+  return (
+    <Slideshow
+      images={state.images}
+      autoAdvance={false}  // No auto-cycling in tile mode - user swipes manually
+      intervalMs={SLIDESHOW_CONFIG.intervalMs}
+      transition={SLIDESHOW_CONFIG.transition}
+      showDots={false}
+      showArrows={false}
+      swipeable={true}
+      className="w-full h-full"
+    >
+      <TileOverlay />
+    </Slideshow>
+  );
+}
+
+function TileOverlay() {
+  const tile = useTile();
+  const { state, controls } = useSlideshowState();
+  
   return (
     <>
-      {/* Expand button - opens full page view */}
-      <OverlaySlot position="top-right">
+      {/* Expand button - top right */}
+      <div className="absolute top-3 right-3 z-20 pointer-events-auto">
         <button
           onClick={() => tile.navigateToPage()}
           className="bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors"
           aria-label="Expand to full view"
         >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
           </svg>
         </button>
-      </OverlaySlot>
+      </div>
+
+      {/* Slide counter - top left */}
+      {state.totalSlides > 1 && (
+        <div className="absolute top-3 left-3 z-10 pointer-events-none">
+          <div className="bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white font-medium">
+            {state.currentIndex + 1} / {state.totalSlides}
+          </div>
+        </div>
+      )}
 
-      {/* Slide counter */}
-      <OverlaySlot position="top-left">
-        <div className="bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white">
-          {state.currentIndex + 1} / {state.totalSlides}
+      {/* Navigation dots at bottom */}
+      {state.totalSlides > 1 && (
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-20 pointer-events-auto">
+          <div className="flex gap-1.5">
+            {state.images.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => controls.goTo(index)}
+                disabled={state.isTransitioning}
+                className={\`w-2 h-2 rounded-full transition-colors \${
+                  index === state.currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'
+                }\`}
+                aria-label={\`Go to slide \${index + 1}\`}
+              />
+            ))}
+          </div>
         </div>
-      </OverlaySlot>
+      )}
 
-      {/* Caption at bottom */}
+      {/* Caption overlay */}
       {state.images[state.currentIndex]?.caption && (
-        <GradientOverlay position="bottom" className="p-4">
-          <p className="text-white text-sm">{state.images[state.currentIndex].caption}</p>
-        </GradientOverlay>
+        <div className="absolute bottom-10 left-3 right-3 z-10 pointer-events-none">
+          <div className="bg-black/50 backdrop-blur-sm px-3 py-2 rounded text-white text-sm">
+            {state.images[state.currentIndex].caption}
+          </div>
+        </div>
       )}
     </>
   );
@@ -90,94 +150,181 @@ export default function TileOverlay() {
  */
 export const slideshowPageOverlayTemplate = `'use client';
 
-import { useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+import { useState, useEffect, useCallback } from 'react';
+import { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';
 
-export default function PageOverlay() {
-  const { state, controls } = useSlideshowState();
+export default function SlideshowPageView() {
+  
+  if (!state.images || state.images.length === 0) {
+    return (
+      <div className="w-full h-full bg-black flex items-center justify-center">
+        <p className="text-white/60 text-sm">No images configured</p>
+      </div>
+    );
+  }
 
   return (
-    <>
-      {/* Slide counter */}
-      <OverlaySlot position="top-right">
-        <div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white">
-          {state.currentIndex + 1} / {state.totalSlides}
-        </div>
-      </OverlaySlot>
+    <Slideshow
+      images={state.images}
+      autoAdvance={true}  // Always auto-cycle in page/fullscreen mode
+      intervalMs={SLIDESHOW_CONFIG.intervalMs}
+      transition={SLIDESHOW_CONFIG.transition}
+      showDots={true}
+      showArrows={true}
+      swipeable={true}
+      className="w-full h-full object-cover"
+    >
+      <PageOverlay />
+    </Slideshow>
+  );
+}
 
-      {/* Navigation arrows (larger for full page) */}
-      <OverlaySlot position="center-left">
-        <button
-          onClick={controls.prev}
-          className="bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors"
-          aria-label="Previous slide"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-      </OverlaySlot>
+function PageOverlay() {
+  const tile = useTile();
+  const { state, controls } = useSlideshowState();
+  const [showControls, setShowControls] = useState(true);
+  const [hideTimeout, setHideTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  // Auto-hide controls after 3 seconds when slideshow is playing
+  const resetHideTimer = useCallback(() => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    setShowControls(true);
+
+    if (!state.isPaused) {
+      const timeout = setTimeout(() => {
+        setShowControls(false);
+      }, 3000);
+      setHideTimeout(timeout);
+    }
+  }, [state.isPaused, hideTimeout]);
+
+  // Show controls when slideshow is paused
+  useEffect(() => {
+    if (state.isPaused) {
+      setShowControls(true);
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        setHideTimeout(null);
+      }
+    } else {
+      resetHideTimer();
+    }
+  }, [state.isPaused]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+    };
+  }, [hideTimeout]);
+
+  // Toggle controls on tap/click
+  const handleToggleControls = useCallback((e: React.MouseEvent | React.TouchEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.closest('button, .controls-area')) {
+      return;
+    }
+    e.preventDefault();
+
+    if (showControls) {
+      setShowControls(false);
+    } else {
+      resetHideTimer();
+    }
+  }, [showControls, resetHideTimer]);
+
+  // Handle mouse movement to show controls
+  const handleMouseMove = useCallback(() => {
+    if (!state.isPaused) {
+      resetHideTimer();
+    }
+  }, [state.isPaused, resetHideTimer]);
 
-      <OverlaySlot position="center-right">
-        <button
-          onClick={controls.next}
-          className="bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors"
-          aria-label="Next slide"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-          </svg>
-        </button>
-      </OverlaySlot>
-
-      {/* Caption and controls at bottom */}
-      <GradientOverlay position="bottom" className="p-6">
-        <div className="space-y-3">
-          {/* Caption */}
-          {state.images[state.currentIndex]?.caption && (
-            <p className="text-white text-base">{state.images[state.currentIndex].caption}</p>
-          )}
-
-          {/* Controls row */}
-          <div className="flex items-center justify-between">
-            {/* Play/Pause autoplay */}
+  return (
+    <div
+      className="absolute inset-0 z-20 pointer-events-auto"
+      onClick={handleToggleControls}
+      onTouchEnd={handleToggleControls}
+      onMouseMove={handleMouseMove}
+    >
+      {/* Controls - toggleable */}
+      <div
+        className={\`controls-area transition-opacity duration-300 \${
+          showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }\`}
+      >
+        {/* Top bar with slide counter and controls */}
+        <div className="absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-black/60 to-transparent pointer-events-none" />
+
+        {/* Slide counter - top right */}
+        {state.totalSlides > 1 && (
+          <div className="absolute top-4 right-4 z-10 pointer-events-auto">
+            <div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded text-sm text-white font-medium">
+              {state.currentIndex + 1} / {state.totalSlides}
+            </div>
+          </div>
+        )}
+
+        {/* Play/Pause button - top left */}
+        {state.totalSlides > 1 && (
+          <div className="absolute top-4 left-4 z-20 pointer-events-auto">
             <button
-              onClick={controls.toggle}
-              className="text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                controls.toggle();
+              }}
+              className="bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors"
+              aria-label={state.isPaused ? 'Resume slideshow' : 'Pause slideshow'}
             >
               {state.isPaused ? (
-                <>
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                  <span>Play slideshow</span>
-                </>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
               ) : (
-                <>
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-                  </svg>
-                  <span>Pause slideshow</span>
-                </>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                </svg>
               )}
             </button>
-
-            {/* Dot indicators */}
-            <div className="flex gap-2">
-              {state.images.map((_, idx) => (
-                <button
-                  key={idx}
-                  onClick={() => controls.goTo(idx)}
-                  className={\`w-2 h-2 rounded-full transition-colors \${
-                    idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'
-                  }\`}
-                  aria-label={\`Go to slide \${idx + 1}\`}
-                />
-              ))}
+          </div>
+        )}
+
+        {/* Bottom bar with caption and minimize */}
+        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent pointer-events-none" />
+
+        {/* Caption overlay at bottom */}
+        {state.images[state.currentIndex]?.caption && (
+          <div className="absolute bottom-16 left-4 right-16 z-10 pointer-events-none">
+            <div className="text-white">
+              <p className="text-base drop-shadow-lg">{state.images[state.currentIndex].caption}</p>
+              {state.images[state.currentIndex]?.alt && (
+                <p className="text-sm text-white/70 mt-1 drop-shadow-lg">{state.images[state.currentIndex].alt}</p>
+              )}
             </div>
           </div>
+        )}
+
+        {/* Minimize button - bottom right */}
+        <div className="absolute bottom-4 right-4 z-20 pointer-events-auto">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              tile.navigateToTile();
+            }}
+            className="bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors"
+            aria-label="Minimize to tile"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+            </svg>
+          </button>
         </div>
-      </GradientOverlay>
-    </>
+      </div>
+    </div>
   );
 }
 `;
@@ -191,42 +338,63 @@ export default function PageOverlay() {
  */
 export const slideshowPreviewTileTemplate = `'use client';
 
-import { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';
+import { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';
 
 // Slideshow configuration injected at generation time
 const SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;
 
 function TileOverlay() {
   const tile = useTile();
-  const { state } = useSlideshowState();
+  const { state, controls } = useSlideshowState();
 
   return (
     <>
-      {/* Expand button - opens full page view */}
-      <OverlaySlot position="top-right">
+      <div className="absolute top-3 right-3 z-20 pointer-events-auto">
         <button
           onClick={() => tile.navigateToPage()}
           className="bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors"
           aria-label="Expand to full view"
         >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
           </svg>
         </button>
-      </OverlaySlot>
+      </div>
 
-      {/* Slide counter */}
-      <OverlaySlot position="top-left">
-        <div className="bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white">
-          {state.currentIndex + 1} / {state.totalSlides}
+      {state.totalSlides > 1 && (
+        <div className="absolute top-3 left-3 z-10 pointer-events-none">
+          <div className="bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white font-medium">
+            {state.currentIndex + 1} / {state.totalSlides}
+          </div>
         </div>
-      </OverlaySlot>
+      )}
+
+      {state.totalSlides > 1 && (
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-20 pointer-events-auto">
+          <div className="flex gap-1.5">
+            {state.images.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => controls.goTo(index)}
+                disabled={state.isTransitioning}
+                className={\`w-2 h-2 rounded-full transition-colors \${
+                  index === state.currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'
+                }\`}
+                aria-label={\`Go to slide \${index + 1}\`}
+              />
+            ))}
+          </div>
+        </div>
+      )}
 
-      {/* Caption at bottom */}
       {state.images[state.currentIndex]?.caption && (
-        <GradientOverlay position="bottom" className="p-4">
-          <p className="text-white text-sm">{state.images[state.currentIndex].caption}</p>
-        </GradientOverlay>
+        <div className="absolute bottom-10 left-3 right-3 z-10 pointer-events-none">
+          <div className="bg-black/50 backdrop-blur-sm px-3 py-2 rounded text-white text-sm">
+            {state.images[state.currentIndex].caption}
+          </div>
+        </div>
       )}
     </>
   );
@@ -258,97 +426,146 @@ export default function PreviewTile() {
  */
 export const slideshowPreviewPageTemplate = `'use client';
 
-import { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+import { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';
+import { useState, useEffect, useCallback } from 'react';
 
 // Slideshow configuration injected at generation time
 const SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;
 
 function PageOverlay() {
+  const tile = useTile();
   const { state, controls } = useSlideshowState();
+  const [showControls, setShowControls] = useState(true);
+  const [hideTimeout, setHideTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const resetHideTimer = useCallback(() => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    setShowControls(true);
+
+    if (!state.isPaused) {
+      const timeout = setTimeout(() => {
+        setShowControls(false);
+      }, 3000);
+      setHideTimeout(timeout);
+    }
+  }, [state.isPaused, hideTimeout]);
+
+  useEffect(() => {
+    if (state.isPaused) {
+      setShowControls(true);
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        setHideTimeout(null);
+      }
+    } else {
+      resetHideTimer();
+    }
+  }, [state.isPaused]);
+
+  useEffect(() => {
+    return () => {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+      }
+    };
+  }, [hideTimeout]);
+
+  const handleToggleControls = useCallback((e: React.MouseEvent | React.TouchEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.closest('button, .controls-area')) {
+      return;
+    }
+    e.preventDefault();
+
+    if (showControls) {
+      setShowControls(false);
+    } else {
+      resetHideTimer();
+    }
+  }, [showControls, resetHideTimer]);
+
+  const handleMouseMove = useCallback(() => {
+    if (!state.isPaused) {
+      resetHideTimer();
+    }
+  }, [state.isPaused, resetHideTimer]);
 
   return (
-    <>
-      {/* Slide counter */}
-      <OverlaySlot position="top-right">
-        <div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white">
-          {state.currentIndex + 1} / {state.totalSlides}
-        </div>
-      </OverlaySlot>
-
-      {/* Navigation arrows (larger for full page) */}
-      <OverlaySlot position="center-left">
-        <button
-          onClick={controls.prev}
-          className="bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors"
-          aria-label="Previous slide"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-          </svg>
-        </button>
-      </OverlaySlot>
+    <div
+      className="absolute inset-0 z-20 pointer-events-auto"
+      onClick={handleToggleControls}
+      onTouchEnd={handleToggleControls}
+      onMouseMove={handleMouseMove}
+    >
+      <div
+        className={\`controls-area transition-opacity duration-300 \${
+          showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }\`}
+      >
+        <div className="absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-black/60 to-transparent pointer-events-none" />
+
+        {state.totalSlides > 1 && (
+          <div className="absolute top-4 right-4 z-10 pointer-events-auto">
+            <div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded text-sm text-white font-medium">
+              {state.currentIndex + 1} / {state.totalSlides}
+            </div>
+          </div>
+        )}
 
-      <OverlaySlot position="center-right">
-        <button
-          onClick={controls.next}
-          className="bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors"
-          aria-label="Next slide"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-          </svg>
-        </button>
-      </OverlaySlot>
-
-      {/* Caption and controls at bottom */}
-      <GradientOverlay position="bottom" className="p-6">
-        <div className="space-y-3">
-          {/* Caption */}
-          {state.images[state.currentIndex]?.caption && (
-            <p className="text-white text-base">{state.images[state.currentIndex].caption}</p>
-          )}
-
-          {/* Controls row */}
-          <div className="flex items-center justify-between">
-            {/* Play/Pause autoplay */}
+        {state.totalSlides > 1 && (
+          <div className="absolute top-4 left-4 z-20 pointer-events-auto">
             <button
-              onClick={controls.toggle}
-              className="text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                controls.toggle();
+              }}
+              className="bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors"
+              aria-label={state.isPaused ? 'Resume slideshow' : 'Pause slideshow'}
             >
               {state.isPaused ? (
-                <>
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                  <span>Play slideshow</span>
-                </>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
               ) : (
-                <>
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-                  </svg>
-                  <span>Pause slideshow</span>
-                </>
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                </svg>
               )}
             </button>
+          </div>
+        )}
+
+        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent pointer-events-none" />
 
-            {/* Dot indicators */}
-            <div className="flex gap-2">
-              {state.images.map((_, idx) => (
-                <button
-                  key={idx}
-                  onClick={() => controls.goTo(idx)}
-                  className={\`w-2 h-2 rounded-full transition-colors \${
-                    idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'
-                  }\`}
-                  aria-label={\`Go to slide \${idx + 1}\`}
-                />
-              ))}
+        {state.images[state.currentIndex]?.caption && (
+          <div className="absolute bottom-16 left-4 right-16 z-10 pointer-events-none">
+            <div className="text-white">
+              <p className="text-base drop-shadow-lg">{state.images[state.currentIndex].caption}</p>
+              {state.images[state.currentIndex]?.alt && (
+                <p className="text-sm text-white/70 mt-1 drop-shadow-lg">{state.images[state.currentIndex].alt}</p>
+              )}
             </div>
           </div>
+        )}
+
+        <div className="absolute bottom-4 right-4 z-20 pointer-events-auto">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              tile.navigateToTile();
+            }}
+            className="bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors"
+            aria-label="Minimize to tile"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+            </svg>
+          </button>
         </div>
-      </GradientOverlay>
-    </>
+      </div>
+    </div>
   );
 }
 
@@ -359,9 +576,10 @@ export default function PreviewPage() {
       autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
       intervalMs={SLIDESHOW_CONFIG.intervalMs}
       transition={SLIDESHOW_CONFIG.transition}
-      showDots={false}
-      showArrows={false}
-      className="w-full h-full"
+      showDots={true}
+      showArrows={true}
+      swipeable={true}
+      className="w-full h-full object-cover"
     >
       <PageOverlay />
     </Slideshow>