@thewhateverapp/tile-sdk 0.13.2 → 0.13.4

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

@@ -3,10 +3,33 @@
  *
  * 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, slideshowPreviewTileTemplate, slideshowPreviewPageTemplate, } 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;
+};
+/**
+ * Preview entry files for tile-preview bundling.
+ * These combine Slideshow + overlay since tile-preview doesn't understand Next.js layouts.
+ */
+export declare const slideshowPreviewFiles: {
+    'src/app/_preview/tile.tsx': string;
+    'src/app/_preview/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,EAC5B,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;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;CAGjC,CAAC;AAGF,eAAO,MAAM,4BAA4B;;;CAGxC,CAAC"}

package/dist/templates/slideshow/index.js

@@ -3,12 +3,38 @@
  *
  * 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, slideshowPreviewTileTemplate, slideshowPreviewPageTemplate, } 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 (for production - Next.js applies this)
+    'src/app/(slideshow)/layout.tsx': 'slideshowLayoutTemplate',
+    // Overlay-only pages (no Slideshow wrapper needed in production)
+    'src/app/(slideshow)/tile/page.tsx': 'slideshowTileOverlayTemplate',
+    'src/app/(slideshow)/page/page.tsx': 'slideshowPageOverlayTemplate',
+};
+/**
+ * Preview entry files for tile-preview bundling.
+ * These combine Slideshow + overlay since tile-preview doesn't understand Next.js layouts.
+ */
+export const slideshowPreviewFiles = {
+    'src/app/_preview/tile.tsx': 'slideshowPreviewTileTemplate',
+    'src/app/_preview/page.tsx': 'slideshowPreviewPageTemplate',
+};
+// 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,47 @@
+/**
+ * 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";
+/**
+ * Slideshow Preview Entry - Tile
+ *
+ * Combined entry point for preview bundling.
+ * Wraps Slideshow around TileOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * 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";
+/**
+ * Slideshow Preview Entry - Page
+ *
+ * Combined entry point for preview bundling.
+ * Wraps Slideshow around PageOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * 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";
+//# 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;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,q9DA0DxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,+8HA+GxC,CAAC"}

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

@@ -0,0 +1,370 @@
+/**
+ * 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>
+    </>
+  );
+}
+`;
+/**
+ * Slideshow Preview Entry - Tile
+ *
+ * Combined entry point for preview bundling.
+ * Wraps Slideshow around TileOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/tile.tsx
+ */
+export const slideshowPreviewTileTemplate = `'use client';
+
+import { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay, useTile } from '@thewhateverapp/tile-sdk';
+
+// Slideshow configuration injected at generation time
+const SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;
+
+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>
+      )}
+    </>
+  );
+}
+
+export default function PreviewTile() {
+  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"
+    >
+      <TileOverlay />
+    </Slideshow>
+  );
+}
+`;
+/**
+ * Slideshow Preview Entry - Page
+ *
+ * Combined entry point for preview bundling.
+ * Wraps Slideshow around PageOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/page.tsx
+ */
+export const slideshowPreviewPageTemplate = `'use client';
+
+import { Slideshow, useSlideshowState, OverlaySlot, GradientOverlay } from '@thewhateverapp/tile-sdk';
+
+// Slideshow configuration injected at generation time
+const SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;
+
+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>
+    </>
+  );
+}
+
+export default function PreviewPage() {
+  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"
+    >
+      <PageOverlay />
+    </Slideshow>
+  );
+}
+`;

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

@@ -3,11 +3,33 @@
  *
  * 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, videoPreviewTileTemplate, videoPreviewPageTemplate, } 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;
+};
+/**
+ * Preview entry files for tile-preview bundling.
+ * These combine VideoPlayer + overlay since tile-preview doesn't understand Next.js layouts.
+ */
+export declare const videoPreviewFiles: {
+    'src/app/_preview/tile.tsx': string;
+    'src/app/_preview/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,EACxB,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;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC;AAGF,eAAO,MAAM,wBAAwB;;;CAGpC,CAAC"}

package/dist/templates/video/index.js

@@ -3,13 +3,38 @@
  *
  * 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, videoPreviewTileTemplate, videoPreviewPageTemplate, } 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 (for production - Next.js applies this)
+    'src/app/(video)/layout.tsx': 'videoLayoutTemplate',
+    // Overlay-only pages (no VideoPlayer wrapper needed in production)
+    'src/app/(video)/tile/page.tsx': 'videoTileOverlayTemplate',
+    'src/app/(video)/page/page.tsx': 'videoPageOverlayTemplate',
+};
+/**
+ * Preview entry files for tile-preview bundling.
+ * These combine VideoPlayer + overlay since tile-preview doesn't understand Next.js layouts.
+ */
+export const videoPreviewFiles = {
+    'src/app/_preview/tile.tsx': 'videoPreviewTileTemplate',
+    'src/app/_preview/page.tsx': 'videoPreviewPageTemplate',
+};
+// 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,47 @@
 /**
  * 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 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";
+/**
+ * Video Preview Entry - Tile
+ *
+ * Combined entry point for preview bundling.
+ * Wraps VideoPlayer around TileOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/tile.tsx
+ */
+export declare const videoPreviewTileTemplate = "'use client';\n\nimport { VideoPlayer, useVideoState, OverlaySlot, GradientOverlay, 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\nfunction 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\nexport default function PreviewTile() {\n  return (\n    <VideoPlayer className=\"w-full h-full\">\n      <TileOverlay />\n    </VideoPlayer>\n  );\n}\n";
+/**
+ * Video Preview Entry - Page
+ *
+ * Combined entry point for preview bundling.
+ * Wraps VideoPlayer around PageOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/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 videoPreviewPageTemplate = "'use client';\n\nimport { VideoPlayer, 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\nfunction 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\nexport default function PreviewPage() {\n  return (\n    <VideoPlayer className=\"w-full h-full\">\n      <PageOverlay />\n    </VideoPlayer>\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;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,ipFAwEpC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,6pIAsGpC,CAAC"}

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

@@ -1,26 +1,391 @@
 /**
  * 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 (
+    <>
+      {/* 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>
+    </>
+  );
+}
+`;
+/**
+ * Video Preview Entry - Tile
+ *
+ * Combined entry point for preview bundling.
+ * Wraps VideoPlayer around TileOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/tile.tsx
+ */
+export const videoPreviewTileTemplate = `'use client';
+
+import { VideoPlayer, useVideoState, OverlaySlot, GradientOverlay, 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')}\`;
+}
+
+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>
+    </>
+  );
+}
+
+export default function PreviewTile() {
+  return (
+    <VideoPlayer className="w-full h-full">
+      <TileOverlay />
+    </VideoPlayer>
+  );
+}
+`;
+/**
+ * Video Preview Entry - Page
+ *
+ * Combined entry point for preview bundling.
+ * Wraps VideoPlayer around PageOverlay since tile-preview doesn't understand Next.js layouts.
+ *
+ * File path: src/app/_preview/page.tsx
+ */
+export const videoPreviewPageTemplate = `'use client';
+
+import { VideoPlayer, 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')}\`;
+}
+
+function PageOverlay() {
+  const { state, controls } = useVideoState();
+
+  return (
+    <>
+      {/* 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>
+    </>
+  );
+}
 
+export default function PreviewPage() {
   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>
+    <VideoPlayer className="w-full h-full">
+      <PageOverlay />
+    </VideoPlayer>
   );
 }
 `;

package/package.json

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