@thewhateverapp/tile-sdk 0.13.5 → 0.13.7

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, createContext, useContext, ReactNode } from 'react';\nimport { SlideshowManager, SlideshowState, SlideImage } from './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  /** 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  className = '',\n  imageClassName = '',\n  children\n}: PersistentSlideshowProps) {\n  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\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 className={`relative w-full h-full bg-black overflow-hidden ${className}`}>\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 */}\n        <div className=\"absolute inset-0 z-10\">\n          {children}\n        </div>\n      </div>\n    </SlideshowContext.Provider>\n  );\n}\n";
+export declare const persistentSlideshowTemplate = "'use client';\n\nimport { useEffect, useState, 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  /** 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  className = '',\n  imageClassName = '',\n  children\n}: PersistentSlideshowProps) {\n  const [state, setState] = useState<SlideshowState>(SlideshowManager.getState());\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 className={`relative w-full h-full bg-black overflow-hidden ${className}`}>\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 */}\n        <div className=\"absolute inset-0 z-10\">\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,grNA6MvC,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,qrNA6MvC,CAAC"}

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

@@ -7,7 +7,7 @@
 export const persistentSlideshowTemplate = `'use client';
 
 import { useEffect, useState, createContext, useContext, ReactNode } from 'react';
-import { SlideshowManager, SlideshowState, SlideImage } from './SlideshowManager';
+import { SlideshowManager, SlideshowState, SlideImage } from '../lib/SlideshowManager';
 
 // Context to share slideshow state with overlays
 interface SlideshowContextValue {

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

@@ -7,7 +7,7 @@
  * File path: src/app/(slideshow)/layout.tsx
  * Routes:    src/app/(slideshow)/tile/page.tsx, src/app/(slideshow)/page/page.tsx
  */
-export declare const slideshowLayoutTemplate = "'use client';\n\nimport { Slideshow } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nexport default function SlideshowLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={true}\n      showArrows={true}\n      className=\"w-full h-full\"\n    >\n      {/* Children are the route-specific overlays */}\n      {children}\n    </Slideshow>\n  );\n}\n";
+export declare const slideshowLayoutTemplate = "'use client';\n\nimport { Slideshow } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nexport default function SlideshowLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={false}\n      showArrows={false}\n      className=\"w-full h-full\"\n    >\n      {/* Children are the route-specific overlays */}\n      {children}\n    </Slideshow>\n  );\n}\n";
 /**
  * Slideshow Tile Overlay Template
  *
@@ -34,7 +34,7 @@ export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport { u
  *
  * File path: src/app/_preview/tile.tsx
  */
-export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction TileOverlay() {\n  const tile = useTile();\n  const { state } = useSlideshowState();\n\n  return (\n    <>\n      {/* Expand button - opens full page view */}\n      <OverlaySlot position=\"top-right\">\n        <button\n          onClick={() => tile.navigateToPage()}\n          className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Expand to full view\"\n        >\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <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\" />\n          </svg>\n        </button>\n      </OverlaySlot>\n\n      {/* Slide counter */}\n      <OverlaySlot position=\"top-left\">\n        <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white\">\n          {state.currentIndex + 1} / {state.totalSlides}\n        </div>\n      </OverlaySlot>\n\n      {/* Caption at bottom */}\n      {state.images[state.currentIndex]?.caption && (\n        <GradientOverlay position=\"bottom\" className=\"p-4\">\n          <p className=\"text-white text-sm\">{state.images[state.currentIndex].caption}</p>\n        </GradientOverlay>\n      )}\n    </>\n  );\n}\n\nexport default function PreviewTile() {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={true}\n      showArrows={true}\n      className=\"w-full h-full\"\n    >\n      <TileOverlay />\n    </Slideshow>\n  );\n}\n";
+export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction TileOverlay() {\n  const tile = useTile();\n  const { state } = useSlideshowState();\n\n  return (\n    <>\n      {/* Expand button - opens full page view */}\n      <OverlaySlot position=\"top-right\">\n        <button\n          onClick={() => tile.navigateToPage()}\n          className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Expand to full view\"\n        >\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <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\" />\n          </svg>\n        </button>\n      </OverlaySlot>\n\n      {/* Slide counter */}\n      <OverlaySlot position=\"top-left\">\n        <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white\">\n          {state.currentIndex + 1} / {state.totalSlides}\n        </div>\n      </OverlaySlot>\n\n      {/* Caption at bottom */}\n      {state.images[state.currentIndex]?.caption && (\n        <GradientOverlay position=\"bottom\" className=\"p-4\">\n          <p className=\"text-white text-sm\">{state.images[state.currentIndex].caption}</p>\n        </GradientOverlay>\n      )}\n    </>\n  );\n}\n\nexport default function PreviewTile() {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={false}\n      showArrows={false}\n      className=\"w-full h-full\"\n    >\n      <TileOverlay />\n    </Slideshow>\n  );\n}\n";
 /**
  * Slideshow Preview Entry - Page
  *
@@ -43,5 +43,5 @@ export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { S
  *
  * File path: src/app/_preview/page.tsx
  */
-export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction PageOverlay() {\n  const { state, controls } = useSlideshowState();\n\n  return (\n    <>\n      {/* Slide counter */}\n      <OverlaySlot position=\"top-right\">\n        <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white\">\n          {state.currentIndex + 1} / {state.totalSlides}\n        </div>\n      </OverlaySlot>\n\n      {/* Navigation arrows (larger for full page) */}\n      <OverlaySlot position=\"center-left\">\n        <button\n          onClick={controls.prev}\n          className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Previous slide\"\n        >\n          <svg className=\"w-6 h-6\" 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      </OverlaySlot>\n\n      <OverlaySlot position=\"center-right\">\n        <button\n          onClick={controls.next}\n          className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Next slide\"\n        >\n          <svg className=\"w-6 h-6\" 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      </OverlaySlot>\n\n      {/* Caption and controls at bottom */}\n      <GradientOverlay position=\"bottom\" className=\"p-6\">\n        <div className=\"space-y-3\">\n          {/* Caption */}\n          {state.images[state.currentIndex]?.caption && (\n            <p className=\"text-white text-base\">{state.images[state.currentIndex].caption}</p>\n          )}\n\n          {/* Controls row */}\n          <div className=\"flex items-center justify-between\">\n            {/* Play/Pause autoplay */}\n            <button\n              onClick={controls.toggle}\n              className=\"text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm\"\n            >\n              {state.isPaused ? (\n                <>\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8 5v14l11-7z\" />\n                  </svg>\n                  <span>Play slideshow</span>\n                </>\n              ) : (\n                <>\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n                  </svg>\n                  <span>Pause slideshow</span>\n                </>\n              )}\n            </button>\n\n            {/* Dot indicators */}\n            <div className=\"flex gap-2\">\n              {state.images.map((_, idx) => (\n                <button\n                  key={idx}\n                  onClick={() => controls.goTo(idx)}\n                  className={`w-2 h-2 rounded-full transition-colors ${\n                    idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'\n                  }`}\n                  aria-label={`Go to slide ${idx + 1}`}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      </GradientOverlay>\n    </>\n  );\n}\n\nexport default function PreviewPage() {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={true}\n      showArrows={true}\n      className=\"w-full h-full\"\n    >\n      <PageOverlay />\n    </Slideshow>\n  );\n}\n";
+export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction PageOverlay() {\n  const { state, controls } = useSlideshowState();\n\n  return (\n    <>\n      {/* Slide counter */}\n      <OverlaySlot position=\"top-right\">\n        <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded-full text-sm text-white\">\n          {state.currentIndex + 1} / {state.totalSlides}\n        </div>\n      </OverlaySlot>\n\n      {/* Navigation arrows (larger for full page) */}\n      <OverlaySlot position=\"center-left\">\n        <button\n          onClick={controls.prev}\n          className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Previous slide\"\n        >\n          <svg className=\"w-6 h-6\" 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      </OverlaySlot>\n\n      <OverlaySlot position=\"center-right\">\n        <button\n          onClick={controls.next}\n          className=\"bg-black/40 backdrop-blur-sm p-3 rounded-full text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Next slide\"\n        >\n          <svg className=\"w-6 h-6\" 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      </OverlaySlot>\n\n      {/* Caption and controls at bottom */}\n      <GradientOverlay position=\"bottom\" className=\"p-6\">\n        <div className=\"space-y-3\">\n          {/* Caption */}\n          {state.images[state.currentIndex]?.caption && (\n            <p className=\"text-white text-base\">{state.images[state.currentIndex].caption}</p>\n          )}\n\n          {/* Controls row */}\n          <div className=\"flex items-center justify-between\">\n            {/* Play/Pause autoplay */}\n            <button\n              onClick={controls.toggle}\n              className=\"text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm\"\n            >\n              {state.isPaused ? (\n                <>\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8 5v14l11-7z\" />\n                  </svg>\n                  <span>Play slideshow</span>\n                </>\n              ) : (\n                <>\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n                  </svg>\n                  <span>Pause slideshow</span>\n                </>\n              )}\n            </button>\n\n            {/* Dot indicators */}\n            <div className=\"flex gap-2\">\n              {state.images.map((_, idx) => (\n                <button\n                  key={idx}\n                  onClick={() => controls.goTo(idx)}\n                  className={`w-2 h-2 rounded-full transition-colors ${\n                    idx === state.currentIndex ? 'bg-white' : 'bg-white/40 hover:bg-white/60'\n                  }`}\n                  aria-label={`Go to slide ${idx + 1}`}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      </GradientOverlay>\n    </>\n  );\n}\n\nexport default function PreviewPage() {\n  return (\n    <Slideshow\n      images={SLIDESHOW_CONFIG.images}\n      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n      intervalMs={SLIDESHOW_CONFIG.intervalMs}\n      transition={SLIDESHOW_CONFIG.transition}\n      showDots={false}\n      showArrows={false}\n      className=\"w-full h-full\"\n    >\n      <PageOverlay />\n    </Slideshow>\n  );\n}\n";
 //# sourceMappingURL=layout.tsx.template.d.ts.map

package/dist/templates/slideshow/layout.tsx.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,sqBAuBnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,8gDAwCxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,49GA4FxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,q9DA0DxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,+8HA+GxC,CAAC"}
+{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,wqBAuBnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,8gDAwCxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,49GA4FxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,u9DA0DxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,i9HA+GxC,CAAC"}

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

@@ -21,8 +21,8 @@ export default function SlideshowLayout({ children }: { children: React.ReactNod
       autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
       intervalMs={SLIDESHOW_CONFIG.intervalMs}
       transition={SLIDESHOW_CONFIG.transition}
-      showDots={true}
-      showArrows={true}
+      showDots={false}
+      showArrows={false}
       className="w-full h-full"
     >
       {/* Children are the route-specific overlays */}
@@ -239,8 +239,8 @@ export default function PreviewTile() {
       autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
       intervalMs={SLIDESHOW_CONFIG.intervalMs}
       transition={SLIDESHOW_CONFIG.transition}
-      showDots={true}
-      showArrows={true}
+      showDots={false}
+      showArrows={false}
       className="w-full h-full"
     >
       <TileOverlay />
@@ -359,8 +359,8 @@ export default function PreviewPage() {
       autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
       intervalMs={SLIDESHOW_CONFIG.intervalMs}
       transition={SLIDESHOW_CONFIG.transition}
-      showDots={true}
-      showArrows={true}
+      showDots={false}
+      showArrows={false}
       className="w-full h-full"
     >
       <PageOverlay />

package/package.json

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