@thewhateverapp/tile-sdk 0.13.1 → 0.13.3

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

@@ -86,6 +86,10 @@ export interface SlideshowProps {
     showDots?: boolean;
     /** Show navigation arrows (default: true) */
     showArrows?: boolean;
+    /** Enable swipe gestures on touch devices (default: true) */
+    swipeable?: boolean;
+    /** Image fit mode: 'cover' fills container (may crop), 'contain' shows full image (may letterbox) */
+    objectFit?: 'cover' | 'contain';
     /** Children rendered as overlay */
     children?: ReactNode;
     /** Additional class names */
@@ -106,7 +110,7 @@ export interface SlideshowProps {
  * </Slideshow>
  * ```
  */
-export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
+export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, swipeable, objectFit, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
 /**
  * Hook to access slideshow state and controls from within Slideshow children.
  * Also aliased as useSlideshow for consistency with VideoPlayer.

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":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,oBAAoB,CAAC,EAAE,uBAAuB,CAAC;KAChD;CACF;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAErD;;;;;GAKG;AACH,cAAM,uBAAuB;IAC3B,OAAO,CAAC,cAAc,CAAiC;IACvD,OAAO,CAAC,YAAY,CAMlB;IACF,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEzC;;OAEG;IACH,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,EAAE;QACzC,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B,GAAG,IAAI;IAgCR;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB,IAAI,IAAI,IAAI;IAgBZ,IAAI,IAAI,IAAI;IAgBZ,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAqBzB,KAAK,IAAI,IAAI;IAMb,MAAM,IAAI,IAAI;IAMd,MAAM,IAAI,IAAI;IASd,QAAQ,IAAI,cAAc;IAI1B,aAAa,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,IAAI;IAMlD,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,IAAI,IAAI;CAIhB;AAqBD,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qGAAqG;IACrG,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,UAAiB,EACjB,WAAkB,EAClB,UAAmB,EACnB,kBAAwB,EACxB,QAAe,EACf,UAAiB,EACjB,SAAgB,EAChB,SAAmB,EACnB,QAAQ,EACR,SAAc,EACd,cAAmB,GACpB,EAAE,cAAc,qBAkMhB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,qBAAqB,CAMzD;AAGD,eAAO,MAAM,YAAY,0BAAoB,CAAC"}

package/dist/react/overlay/Slideshow.js

@@ -1,5 +1,5 @@
 'use client';
-import React, { createContext, useContext, useEffect, useState, useCallback, } from 'react';
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
 /**
  * SlideshowSingleton - Manages slideshow state across route changes.
  *
@@ -186,8 +186,10 @@ const SlideshowContext = createContext(null);
  * </Slideshow>
  * ```
  */
-export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, children, className = '', imageClassName = '', }) {
+export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, swipeable = true, objectFit = 'cover', children, className = '', imageClassName = '', }) {
     const [state, setState] = useState(() => getSlideshowSingleton().getState());
+    const containerRef = useRef(null);
+    const touchStartRef = useRef(null);
     // Initialize and subscribe to singleton
     useEffect(() => {
         const singleton = getSlideshowSingleton();
@@ -201,6 +203,49 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
         const unsubscribe = singleton.onStateChange(setState);
         return unsubscribe;
     }, [images, intervalMs, autoAdvance, transitionDuration]);
+    // Control functions bound to singleton
+    const singleton = getSlideshowSingleton();
+    const controls = {
+        next: useCallback(() => singleton.next(), []),
+        prev: useCallback(() => singleton.prev(), []),
+        goTo: useCallback((index) => singleton.goTo(index), []),
+        pause: useCallback(() => singleton.pause(), []),
+        resume: useCallback(() => singleton.resume(), []),
+        toggle: useCallback(() => singleton.toggle(), []),
+    };
+    // Touch/swipe handlers
+    const handleTouchStart = useCallback((e) => {
+        if (!swipeable || state.totalSlides <= 1)
+            return;
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now(),
+        };
+    }, [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();
+            }
+            else {
+                controls.next();
+            }
+        }
+        touchStartRef.current = null;
+    }, [swipeable, state.isTransitioning, controls]);
     // Get transition styles
     const getTransitionStyles = (index) => {
         const isActive = index === state.currentIndex;
@@ -229,16 +274,6 @@ export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, trans
                 };
         }
     };
-    // Control functions bound to singleton
-    const singleton = getSlideshowSingleton();
-    const controls = {
-        next: useCallback(() => singleton.next(), []),
-        prev: useCallback(() => singleton.prev(), []),
-        goTo: useCallback((index) => singleton.goTo(index), []),
-        pause: useCallback(() => singleton.pause(), []),
-        resume: useCallback(() => singleton.resume(), []),
-        toggle: useCallback(() => singleton.toggle(), []),
-    };
     const contextValue = {
         state,
         controls,
@@ -248,9 +283,9 @@ 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", { className: `relative w-full h-full bg-black overflow-hidden ${className}` },
-            React.createElement("div", { className: "relative w-full h-full" }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, style: getTransitionStyles(index), className: imageClassName },
-                React.createElement("img", { src: image.url, alt: image.alt || `Slide ${index + 1}`, className: "w-full h-full object-contain", loading: index === 0 ? 'eager' : 'lazy' }))))),
+        React.createElement("div", { ref: containerRef, className: `relative w-full h-full bg-black overflow-hidden ${className}`, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd },
+            React.createElement("div", { className: "relative w-full h-full" }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, style: getTransitionStyles(index), className: `flex items-center justify-center ${imageClassName}` },
+                React.createElement("img", { src: image.url, alt: image.alt || `Slide ${index + 1}`, className: `w-full h-full ${objectFit === 'cover' ? 'object-cover' : 'object-contain'}`, style: { objectPosition: 'center' }, loading: index === 0 ? 'eager' : 'lazy', draggable: false }))))),
             showArrows && state.totalSlides > 1 && (React.createElement(React.Fragment, null,
                 React.createElement("button", { onClick: controls.prev, disabled: state.isTransitioning, className: "absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50", "aria-label": "Previous slide" },
                     React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },

package/dist/templates/slideshow/index.d.ts

@@ -3,10 +3,25 @@
  *
  * These templates are used by tile-deploy/agent-service to generate
  * slideshow tiles with persistent state across route navigation.
+ *
+ * Layout-based approach:
+ * - Slideshow is mounted ONCE in the layout (route group)
+ * - Tile and page routes only render overlay content
+ * - This ensures seamless state persistence across navigation
  */
+export { slideshowLayoutTemplate, slideshowTileOverlayTemplate, slideshowPageOverlayTemplate, } from './layout.tsx.template.js';
 export { slideshowManagerTemplate } from './SlideshowManager.ts.template.js';
 export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template.js';
+/**
+ * Template file structure for slideshow tiles using layout-based approach.
+ * The (slideshow) route group ensures state persists across tile/page navigation.
+ */
 export declare const slideshowTemplateFiles: {
+    'src/app/(slideshow)/layout.tsx': string;
+    'src/app/(slideshow)/tile/page.tsx': string;
+    'src/app/(slideshow)/page/page.tsx': string;
+};
+export declare const slideshowLegacyTemplateFiles: {
     'src/shared/lib/SlideshowManager.ts': string;
     'src/shared/components/PersistentSlideshow.tsx': string;
 };

package/dist/templates/slideshow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAGpF,eAAO,MAAM,sBAAsB;;;CAGlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EACL,uBAAuB,EACvB,4BAA4B,EAC5B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,uCAAuC,CAAC;AAEpF;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;CAMlC,CAAC;AAGF,eAAO,MAAM,4BAA4B;;;CAGxC,CAAC"}

package/dist/templates/slideshow/index.js

@@ -3,12 +3,30 @@
  *
  * These templates are used by tile-deploy/agent-service to generate
  * slideshow tiles with persistent state across route navigation.
+ *
+ * Layout-based approach:
+ * - Slideshow is mounted ONCE in the layout (route group)
+ * - Tile and page routes only render overlay content
+ * - This ensures seamless state persistence across navigation
  */
 // ESM requires explicit .js extension for imports
+export { slideshowLayoutTemplate, slideshowTileOverlayTemplate, slideshowPageOverlayTemplate, } from './layout.tsx.template.js';
+// Legacy templates (kept for backwards compatibility)
 export { slideshowManagerTemplate } from './SlideshowManager.ts.template.js';
 export { persistentSlideshowTemplate } from './PersistentSlideshow.tsx.template.js';
-// Template file structure for slideshow tiles
+/**
+ * Template file structure for slideshow tiles using layout-based approach.
+ * The (slideshow) route group ensures state persists across tile/page navigation.
+ */
 export const slideshowTemplateFiles = {
+    // Layout mounts Slideshow once
+    'src/app/(slideshow)/layout.tsx': 'slideshowLayoutTemplate',
+    // Overlay-only pages (no Slideshow wrapper needed)
+    'src/app/(slideshow)/tile/page.tsx': 'slideshowTileOverlayTemplate',
+    'src/app/(slideshow)/page/page.tsx': 'slideshowPageOverlayTemplate',
+};
+// Legacy file structure (deprecated)
+export const slideshowLegacyTemplateFiles = {
     'src/shared/lib/SlideshowManager.ts': 'slideshowManagerTemplate',
     'src/shared/components/PersistentSlideshow.tsx': 'persistentSlideshowTemplate',
 };

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

@@ -0,0 +1,29 @@
+/**
+ * Slideshow Template - Layout
+ *
+ * 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 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";
+/**
+ * Slideshow Tile Overlay Template
+ *
+ * Overlay-only component for tile view (256×554px).
+ * Slideshow is already mounted in the parent layout.
+ *
+ * File path: src/app/(slideshow)/tile/page.tsx
+ */
+export declare const slideshowTileOverlayTemplate = "'use client';\n\nimport { useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\nimport { useTile } from '@thewhateverapp/tile-sdk';\n\nexport default function 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";
+/**
+ * Slideshow Page Overlay Template
+ *
+ * Overlay-only component for full page view.
+ * Slideshow is already mounted in the parent layout.
+ *
+ * File path: src/app/(slideshow)/page/page.tsx
+ */
+export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport { useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\nexport default function 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";
+//# sourceMappingURL=layout.tsx.template.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,183 @@
+/**
+ * Slideshow Template - Layout
+ *
+ * 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';
+
+import { Slideshow } from '@thewhateverapp/tile-sdk';
+
+// Slideshow configuration injected at generation time
+const SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;
+
+export default function SlideshowLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Slideshow
+      images={SLIDESHOW_CONFIG.images}
+      autoAdvance={SLIDESHOW_CONFIG.autoAdvance}
+      intervalMs={SLIDESHOW_CONFIG.intervalMs}
+      transition={SLIDESHOW_CONFIG.transition}
+      showDots={true}
+      showArrows={true}
+      className="w-full h-full"
+    >
+      {/* Children are the route-specific overlays */}
+      {children}
+    </Slideshow>
+  );
+}
+`;
+/**
+ * Slideshow Tile Overlay Template
+ *
+ * Overlay-only component for tile view (256×554px).
+ * 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';
+
+export default function TileOverlay() {
+  const tile = useTile();
+  const { state } = useSlideshowState();
+
+  return (
+    <>
+      {/* Expand button - opens full page view */}
+      <OverlaySlot position="top-right">
+        <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">
+            <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>
+
+      {/* 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}
+        </div>
+      </OverlaySlot>
+
+      {/* 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>
+      )}
+    </>
+  );
+}
+`;
+/**
+ * Slideshow Page Overlay Template
+ *
+ * Overlay-only component for full page view.
+ * Slideshow is already mounted in the parent layout.
+ *
+ * File path: src/app/(slideshow)/page/page.tsx
+ */
+export const slideshowPageOverlayTemplate = `'use client';
+
+import { useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+
+export default function PageOverlay() {
+  const { state, controls } = useSlideshowState();
+
+  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>
+
+      <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 */}
+            <button
+              onClick={controls.toggle}
+              className="text-white hover:text-white/80 transition-colors flex items-center gap-2 text-sm"
+            >
+              {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="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                  </svg>
+                  <span>Pause slideshow</span>
+                </>
+              )}
+            </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>
+          </div>
+        </div>
+      </GradientOverlay>
+    </>
+  );
+}
+`;

package/dist/templates/video/index.d.ts

@@ -3,11 +3,25 @@
  *
  * These templates are used by tile-deploy/agent-service to generate
  * video tiles with persistent playback across route navigation.
+ *
+ * Layout-based approach:
+ * - VideoPlayer is mounted ONCE in the layout (route group)
+ * - Tile and page routes only render overlay content
+ * - This ensures seamless video persistence across navigation
  */
-export { videoLayoutTemplate } from './layout.tsx.template.js';
+export { videoLayoutTemplate, videoTileOverlayTemplate, videoPageOverlayTemplate, } from './layout.tsx.template.js';
 export { videoManagerTemplate } from './VideoManager.ts.template.js';
 export { persistentVideoTemplate } from './PersistentVideo.tsx.template.js';
+/**
+ * Template file structure for video tiles using layout-based approach.
+ * The (video) route group ensures VideoPlayer persists across tile/page navigation.
+ */
 export declare const videoTemplateFiles: {
+    'src/app/(video)/layout.tsx': string;
+    'src/app/(video)/tile/page.tsx': string;
+    'src/app/(video)/page/page.tsx': string;
+};
+export declare const videoLegacyTemplateFiles: {
     'src/shared/lib/VideoManager.ts': string;
     'src/shared/components/PersistentVideo.tsx': string;
 };

package/dist/templates/video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/video/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/video/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAE5E;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;CAM9B,CAAC;AAGF,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC"}

package/dist/templates/video/index.js

@@ -3,13 +3,30 @@
  *
  * These templates are used by tile-deploy/agent-service to generate
  * video tiles with persistent playback across route navigation.
+ *
+ * Layout-based approach:
+ * - VideoPlayer is mounted ONCE in the layout (route group)
+ * - Tile and page routes only render overlay content
+ * - This ensures seamless video persistence across navigation
  */
 // ESM requires explicit .js extension for imports
-export { videoLayoutTemplate } from './layout.tsx.template.js';
+export { videoLayoutTemplate, videoTileOverlayTemplate, videoPageOverlayTemplate, } from './layout.tsx.template.js';
+// Legacy templates (kept for backwards compatibility)
 export { videoManagerTemplate } from './VideoManager.ts.template.js';
 export { persistentVideoTemplate } from './PersistentVideo.tsx.template.js';
-// Template file structure for video tiles
+/**
+ * Template file structure for video tiles using layout-based approach.
+ * The (video) route group ensures VideoPlayer persists across tile/page navigation.
+ */
 export const videoTemplateFiles = {
+    // Layout mounts VideoPlayer once
+    'src/app/(video)/layout.tsx': 'videoLayoutTemplate',
+    // Overlay-only pages (no VideoPlayer wrapper needed)
+    'src/app/(video)/tile/page.tsx': 'videoTileOverlayTemplate',
+    'src/app/(video)/page/page.tsx': 'videoPageOverlayTemplate',
+};
+// Legacy file structure (deprecated)
+export const videoLegacyTemplateFiles = {
     'src/shared/lib/VideoManager.ts': 'videoManagerTemplate',
     'src/shared/components/PersistentVideo.tsx': 'persistentVideoTemplate',
 };

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

@@ -1,8 +1,29 @@
 /**
  * Video Template - Layout
  *
- * This layout wraps both /tile and /page routes.
- * The VideoPlayer is rendered here so it persists across route navigation.
+ * This layout wraps both /tile and /page routes using a route group.
+ * The VideoPlayer is rendered ONCE here and persists across route navigation.
+ *
+ * File path: src/app/(video)/layout.tsx
+ * Routes:    src/app/(video)/tile/page.tsx, src/app/(video)/page/page.tsx
+ */
+export declare const videoLayoutTemplate = "'use client';\n\nimport { VideoPlayer } from '@thewhateverapp/tile-sdk';\n\nexport default function VideoLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <VideoPlayer className=\"w-full h-full\">\n      {/* Children are the route-specific overlays */}\n      {children}\n    </VideoPlayer>\n  );\n}\n";
+/**
+ * Video Tile Overlay Template
+ *
+ * Overlay-only component for tile view (256×554px).
+ * VideoPlayer is already mounted in the parent layout.
+ *
+ * File path: src/app/(video)/tile/page.tsx
+ */
+export declare const videoTileOverlayTemplate = "'use client';\n\nimport { useVideoState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\nimport { useTile } from '@thewhateverapp/tile-sdk';\n\nfunction formatTime(seconds: number): string {\n  if (!seconds || !isFinite(seconds)) return '0:00';\n  const mins = Math.floor(seconds / 60);\n  const secs = Math.floor(seconds % 60);\n  return `${mins}:${secs.toString().padStart(2, '0')}`;\n}\n\nexport default function TileOverlay() {\n  const tile = useTile();\n  const { state, controls } = useVideoState();\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      {/* Play/Pause button in center when paused */}\n      {!state.isPlaying && !state.isLoading && (\n        <OverlaySlot position=\"center\">\n          <button\n            onClick={controls.play}\n            className=\"w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors\"\n          >\n            <svg className=\"w-8 h-8 text-white ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M8 5v14l11-7z\" />\n            </svg>\n          </button>\n        </OverlaySlot>\n      )}\n\n      {/* Bottom gradient with progress */}\n      <GradientOverlay position=\"bottom\" className=\"p-4\">\n        <div className=\"space-y-2\">\n          {/* Progress bar */}\n          <div className=\"h-1 bg-white/30 rounded-full overflow-hidden\">\n            <div\n              className=\"h-full bg-white rounded-full transition-all duration-200\"\n              style={{ width: `${(state.currentTime / state.duration) * 100 || 0}%` }}\n            />\n          </div>\n          {/* Time display */}\n          <div className=\"flex justify-between text-xs text-white/80\">\n            <span>{formatTime(state.currentTime)}</span>\n            <span>{formatTime(state.duration)}</span>\n          </div>\n        </div>\n      </GradientOverlay>\n    </>\n  );\n}\n";
+/**
+ * Video Page Overlay Template
+ *
+ * Overlay-only component for full page view.
+ * VideoPlayer is already mounted in the parent layout.
+ *
+ * File path: src/app/(video)/page/page.tsx
  */
-export declare const videoLayoutTemplate = "'use client';\n\nimport { VideoPlayer } from '@thewhateverapp/tile-sdk/react';\nimport { usePathname } from 'next/navigation';\n\nexport default function VideoLayout({ children }: { children: React.ReactNode }) {\n  const pathname = usePathname();\n  const isPageView = pathname === '/page';\n\n  return (\n    <div className=\"relative w-full h-full bg-black\">\n      {/* VideoPlayer persists across route changes */}\n      <VideoPlayer className=\"absolute inset-0\">\n        {/* Children are the route-specific overlays */}\n        {children}\n      </VideoPlayer>\n    </div>\n  );\n}\n";
+export declare const videoPageOverlayTemplate = "'use client';\n\nimport { useVideoState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';\n\nfunction formatTime(seconds: number): string {\n  if (!seconds || !isFinite(seconds)) return '0:00';\n  const mins = Math.floor(seconds / 60);\n  const secs = Math.floor(seconds % 60);\n  return `${mins}:${secs.toString().padStart(2, '0')}`;\n}\n\nexport default function PageOverlay() {\n  const { state, controls } = useVideoState();\n\n  return (\n    <>\n      {/* Play/Pause button in center when paused */}\n      {!state.isPlaying && !state.isLoading && (\n        <OverlaySlot position=\"center\">\n          <button\n            onClick={controls.play}\n            className=\"w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors\"\n          >\n            <svg className=\"w-10 h-10 text-white ml-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path d=\"M8 5v14l11-7z\" />\n            </svg>\n          </button>\n        </OverlaySlot>\n      )}\n\n      {/* Bottom gradient with controls */}\n      <GradientOverlay position=\"bottom\" className=\"p-6\">\n        <div className=\"space-y-3\">\n          {/* Progress bar */}\n          <div\n            className=\"h-1.5 bg-white/30 rounded-full overflow-hidden cursor-pointer\"\n            onClick={(e) => {\n              const rect = e.currentTarget.getBoundingClientRect();\n              const percent = (e.clientX - rect.left) / rect.width;\n              controls.seek(percent * state.duration);\n            }}\n          >\n            <div\n              className=\"h-full bg-white rounded-full transition-all duration-200\"\n              style={{ width: `${(state.currentTime / state.duration) * 100 || 0}%` }}\n            />\n          </div>\n\n          {/* Controls row */}\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-4\">\n              {/* Play/Pause */}\n              <button\n                onClick={controls.toggle}\n                className=\"text-white hover:text-white/80 transition-colors\"\n              >\n                {state.isPlaying ? (\n                  <svg className=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n                  </svg>\n                ) : (\n                  <svg className=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M8 5v14l11-7z\" />\n                  </svg>\n                )}\n              </button>\n\n              {/* Mute toggle */}\n              <button\n                onClick={() => controls.setMuted(!state.muted)}\n                className=\"text-white hover:text-white/80 transition-colors\"\n              >\n                {state.muted ? (\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\" />\n                  </svg>\n                ) : (\n                  <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                    <path d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\" />\n                  </svg>\n                )}\n              </button>\n\n              {/* Time display */}\n              <span className=\"text-sm text-white/80\">\n                {formatTime(state.currentTime)} / {formatTime(state.duration)}\n              </span>\n            </div>\n          </div>\n        </div>\n      </GradientOverlay>\n    </>\n  );\n}\n";
 //# sourceMappingURL=layout.tsx.template.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/video/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,ulBAmB/B,CAAC"}
+{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/video/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,uUAY/B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,qiFAiEpC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,qgIA8FpC,CAAC"}

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

@@ -1,26 +1,199 @@
 /**
  * Video Template - Layout
  *
- * This layout wraps both /tile and /page routes.
- * The VideoPlayer is rendered here so it persists across route navigation.
+ * This layout wraps both /tile and /page routes using a route group.
+ * The VideoPlayer is rendered ONCE here and persists across route navigation.
+ *
+ * File path: src/app/(video)/layout.tsx
+ * Routes:    src/app/(video)/tile/page.tsx, src/app/(video)/page/page.tsx
  */
 export const videoLayoutTemplate = `'use client';
 
-import { VideoPlayer } from '@thewhateverapp/tile-sdk/react';
-import { usePathname } from 'next/navigation';
+import { VideoPlayer } from '@thewhateverapp/tile-sdk';
 
 export default function VideoLayout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const isPageView = pathname === '/page';
+  return (
+    <VideoPlayer className="w-full h-full">
+      {/* Children are the route-specific overlays */}
+      {children}
+    </VideoPlayer>
+  );
+}
+`;
+/**
+ * Video Tile Overlay Template
+ *
+ * Overlay-only component for tile view (256×554px).
+ * VideoPlayer is already mounted in the parent layout.
+ *
+ * File path: src/app/(video)/tile/page.tsx
+ */
+export const videoTileOverlayTemplate = `'use client';
+
+import { useVideoState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+import { useTile } from '@thewhateverapp/tile-sdk';
+
+function formatTime(seconds: number): string {
+  if (!seconds || !isFinite(seconds)) return '0:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return \`\${mins}:\${secs.toString().padStart(2, '0')}\`;
+}
+
+export default function TileOverlay() {
+  const tile = useTile();
+  const { state, controls } = useVideoState();
+
+  return (
+    <>
+      {/* Expand button - opens full page view */}
+      <OverlaySlot position="top-right">
+        <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">
+            <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>
+
+      {/* Play/Pause button in center when paused */}
+      {!state.isPlaying && !state.isLoading && (
+        <OverlaySlot position="center">
+          <button
+            onClick={controls.play}
+            className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
+          >
+            <svg className="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </button>
+        </OverlaySlot>
+      )}
+
+      {/* Bottom gradient with progress */}
+      <GradientOverlay position="bottom" className="p-4">
+        <div className="space-y-2">
+          {/* Progress bar */}
+          <div className="h-1 bg-white/30 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-white rounded-full transition-all duration-200"
+              style={{ width: \`\${(state.currentTime / state.duration) * 100 || 0}%\` }}
+            />
+          </div>
+          {/* Time display */}
+          <div className="flex justify-between text-xs text-white/80">
+            <span>{formatTime(state.currentTime)}</span>
+            <span>{formatTime(state.duration)}</span>
+          </div>
+        </div>
+      </GradientOverlay>
+    </>
+  );
+}
+`;
+/**
+ * Video Page Overlay Template
+ *
+ * Overlay-only component for full page view.
+ * VideoPlayer is already mounted in the parent layout.
+ *
+ * File path: src/app/(video)/page/page.tsx
+ */
+export const videoPageOverlayTemplate = `'use client';
+
+import { useVideoState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+
+function formatTime(seconds: number): string {
+  if (!seconds || !isFinite(seconds)) return '0:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return \`\${mins}:\${secs.toString().padStart(2, '0')}\`;
+}
+
+export default function PageOverlay() {
+  const { state, controls } = useVideoState();
 
   return (
-    <div className="relative w-full h-full bg-black">
-      {/* VideoPlayer persists across route changes */}
-      <VideoPlayer className="absolute inset-0">
-        {/* Children are the route-specific overlays */}
-        {children}
-      </VideoPlayer>
-    </div>
+    <>
+      {/* Play/Pause button in center when paused */}
+      {!state.isPlaying && !state.isLoading && (
+        <OverlaySlot position="center">
+          <button
+            onClick={controls.play}
+            className="w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"
+          >
+            <svg className="w-10 h-10 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </button>
+        </OverlaySlot>
+      )}
+
+      {/* Bottom gradient with controls */}
+      <GradientOverlay position="bottom" className="p-6">
+        <div className="space-y-3">
+          {/* Progress bar */}
+          <div
+            className="h-1.5 bg-white/30 rounded-full overflow-hidden cursor-pointer"
+            onClick={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const percent = (e.clientX - rect.left) / rect.width;
+              controls.seek(percent * state.duration);
+            }}
+          >
+            <div
+              className="h-full bg-white rounded-full transition-all duration-200"
+              style={{ width: \`\${(state.currentTime / state.duration) * 100 || 0}%\` }}
+            />
+          </div>
+
+          {/* Controls row */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              {/* Play/Pause */}
+              <button
+                onClick={controls.toggle}
+                className="text-white hover:text-white/80 transition-colors"
+              >
+                {state.isPlaying ? (
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                  </svg>
+                ) : (
+                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M8 5v14l11-7z" />
+                  </svg>
+                )}
+              </button>
+
+              {/* Mute toggle */}
+              <button
+                onClick={() => controls.setMuted(!state.muted)}
+                className="text-white hover:text-white/80 transition-colors"
+              >
+                {state.muted ? (
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
+                  </svg>
+                ) : (
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+                  </svg>
+                )}
+              </button>
+
+              {/* Time display */}
+              <span className="text-sm text-white/80">
+                {formatTime(state.currentTime)} / {formatTime(state.duration)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </GradientOverlay>
+    </>
   );
 }
 `;

package/package.json

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