@thewhateverapp/tile-sdk 0.20.3 → 0.21.0

package/dist/components/unified/BackgroundLayer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Background } from './types';
+interface BackgroundLayerProps {
+    background: Background;
+    className?: string;
+}
+/**
+ * BackgroundLayer Component
+ *
+ * Renders the background layer for the unified template.
+ * Supports video, image, slideshow, or no background.
+ *
+ * Key Features:
+ * - Uses VideoPlayer from tile-sdk (singleton pattern - survives route transitions)
+ * - Uses Slideshow from tile-sdk (state persistence across /tile and /page)
+ * - Handles all background types with consistent API
+ */
+export declare function BackgroundLayer({ background, className }: BackgroundLayerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=BackgroundLayer.d.ts.map

package/dist/components/unified/BackgroundLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundLayer.d.ts","sourceRoot":"","sources":["../../../src/components/unified/BackgroundLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,UAAU,EAQX,MAAM,SAAS,CAAC;AAEjB,UAAU,oBAAoB;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,SAAc,EAAE,EAAE,oBAAoB,qBAkGnF"}

package/dist/components/unified/BackgroundLayer.js

@@ -0,0 +1,75 @@
+'use client';
+import React from 'react';
+import { VideoPlayer, Slideshow } from '../../react';
+import { isVideoBackground, isImageBackground, isSlideshowBackground, isNoneBackground, DEFAULT_VIDEO_OPTIONS, DEFAULT_IMAGE_OPTIONS, DEFAULT_SLIDESHOW_OPTIONS, } from './types';
+/**
+ * BackgroundLayer Component
+ *
+ * Renders the background layer for the unified template.
+ * Supports video, image, slideshow, or no background.
+ *
+ * Key Features:
+ * - Uses VideoPlayer from tile-sdk (singleton pattern - survives route transitions)
+ * - Uses Slideshow from tile-sdk (state persistence across /tile and /page)
+ * - Handles all background types with consistent API
+ */
+export function BackgroundLayer({ background, className = '' }) {
+    // Video Background
+    if (isVideoBackground(background)) {
+        const options = { ...DEFAULT_VIDEO_OPTIONS, ...background.options };
+        const videoUrl = background.assets[0];
+        return (React.createElement("div", { className: `absolute inset-0 ${className}` },
+            React.createElement(VideoPlayer, { src: videoUrl, loop: options.loop, autoplay: options.autoplay, muted: options.muted, controls: options.controls, className: "w-full h-full object-cover" })));
+    }
+    // Image Background
+    if (isImageBackground(background)) {
+        const options = { ...DEFAULT_IMAGE_OPTIONS, ...background.options };
+        const imageUrl = background.assets[0];
+        const imageStyle = {
+            objectFit: options.objectFit,
+            objectPosition: options.position,
+            filter: [
+                options.blur ? `blur(${options.blur}px)` : '',
+                options.brightness !== 100 ? `brightness(${options.brightness}%)` : '',
+                options.contrast !== 100 ? `contrast(${options.contrast}%)` : '',
+            ]
+                .filter(Boolean)
+                .join(' '),
+        };
+        return (React.createElement("div", { className: `absolute inset-0 ${className}` },
+            React.createElement("img", { src: imageUrl, alt: "Background", className: "w-full h-full", style: imageStyle })));
+    }
+    // Slideshow Background
+    if (isSlideshowBackground(background)) {
+        const options = { ...DEFAULT_SLIDESHOW_OPTIONS, ...background.options };
+        // Convert string[] to SlideImage[]
+        const slideImages = background.assets.map((url) => ({ url }));
+        // Map transition types (our 'zoom' → slideshow's supported types)
+        const transition = options.transition === 'zoom' ? 'fade' : options.transition;
+        return (React.createElement("div", { className: `absolute inset-0 ${className}` },
+            React.createElement(Slideshow, { images: slideImages, intervalMs: options.interval, autoAdvance: true, transition: transition, showDots: options.showIndicators, showArrows: options.showControls, className: "w-full h-full" })));
+    }
+    // None Background (solid color, gradient, or pattern)
+    if (isNoneBackground(background)) {
+        const { color, gradient, pattern } = background.options || {};
+        let style = {};
+        if (pattern) {
+            style.backgroundImage = `url(${pattern})`;
+            style.backgroundSize = 'cover';
+            style.backgroundPosition = 'center';
+        }
+        else if (gradient) {
+            style.background = gradient;
+        }
+        else if (color) {
+            style.backgroundColor = color;
+        }
+        else {
+            // Default to transparent
+            style.backgroundColor = 'transparent';
+        }
+        return React.createElement("div", { className: `absolute inset-0 ${className}`, style: style });
+    }
+    // Fallback: transparent background
+    return React.createElement("div", { className: `absolute inset-0 ${className}` });
+}

package/dist/components/unified/ContentLayer.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { ContentConfig } from './types';
+interface ContentLayerProps {
+    content: ContentConfig;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * ContentLayer Component
+ *
+ * Wraps interactive content and applies layout configuration.
+ * This is where the AI-generated interactive components are rendered.
+ */
+export declare function ContentLayer({ content, children, className }: ContentLayerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ContentLayer.d.ts.map

package/dist/components/unified/ContentLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentLayer.d.ts","sourceRoot":"","sources":["../../../src/components/unified/ContentLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,UAAU,iBAAiB;IACzB,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,iBAAiB,qBA6BpF"}

package/dist/components/unified/ContentLayer.js

@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+/**
+ * ContentLayer Component
+ *
+ * Wraps interactive content and applies layout configuration.
+ * This is where the AI-generated interactive components are rendered.
+ */
+export function ContentLayer({ content, children, className = '' }) {
+    const { layout } = content;
+    // Build container styles based on layout configuration
+    const containerStyle = {
+        width: layout?.width,
+        height: layout?.height,
+        padding: layout?.padding,
+        margin: layout?.margin,
+    };
+    // Position classes
+    const positionClasses = {
+        top: 'items-start justify-center',
+        center: 'items-center justify-center',
+        bottom: 'items-end justify-center',
+        floating: 'items-start justify-start',
+    };
+    const position = layout?.position || 'center';
+    const positionClass = positionClasses[position] || positionClasses.center;
+    return (React.createElement("div", { className: `absolute inset-0 flex ${positionClass} ${className}` },
+        React.createElement("div", { style: containerStyle, className: "w-full max-w-full" }, children)));
+}

package/dist/components/unified/OverlayLayer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { OverlayConfig } from './types';
+interface OverlayLayerProps {
+    overlay?: OverlayConfig;
+    className?: string;
+}
+/**
+ * OverlayLayer Component
+ *
+ * Renders an overlay on top of the background layer.
+ * Supports gradient, solid color, or blur overlays.
+ */
+export declare function OverlayLayer({ overlay, className }: OverlayLayerProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=OverlayLayer.d.ts.map

package/dist/components/unified/OverlayLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLayer.d.ts","sourceRoot":"","sources":["../../../src/components/unified/OverlayLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAA0B,MAAM,SAAS,CAAC;AAEhE,UAAU,iBAAiB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,SAAc,EAAE,EAAE,iBAAiB,4BAqC1E"}

package/dist/components/unified/OverlayLayer.js

@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import { DEFAULT_OVERLAY_CONFIG } from './types';
+/**
+ * OverlayLayer Component
+ *
+ * Renders an overlay on top of the background layer.
+ * Supports gradient, solid color, or blur overlays.
+ */
+export function OverlayLayer({ overlay, className = '' }) {
+    if (!overlay?.enabled) {
+        return null;
+    }
+    const config = { ...DEFAULT_OVERLAY_CONFIG, ...overlay };
+    const opacity = (config.opacity ?? 50) / 100;
+    let style = {
+        opacity,
+    };
+    if (config.type === 'gradient' && config.gradient) {
+        const { from, to, direction = 'bottom' } = config.gradient;
+        const gradientDirection = {
+            top: 'to top',
+            bottom: 'to bottom',
+            left: 'to left',
+            right: 'to right',
+            radial: 'radial-gradient(circle',
+        };
+        const dir = gradientDirection[direction] || 'to bottom';
+        if (direction === 'radial') {
+            style.background = `radial-gradient(circle, ${from}, ${to})`;
+        }
+        else {
+            style.background = `linear-gradient(${dir}, ${from}, ${to})`;
+        }
+    }
+    else if (config.type === 'solid' && config.color) {
+        style.backgroundColor = config.color;
+    }
+    else if (config.type === 'blur') {
+        style.backdropFilter = `blur(${config.blur || 10}px)`;
+        style.WebkitBackdropFilter = `blur(${config.blur || 10}px)`;
+    }
+    return React.createElement("div", { className: `absolute inset-0 pointer-events-none ${className}`, style: style });
+}

package/dist/components/unified/UnifiedTemplate.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { UnifiedTemplateConfig } from './types';
+interface UnifiedTemplateProps {
+    config: UnifiedTemplateConfig;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * UnifiedTemplate Component
+ *
+ * Main wrapper component that combines all layers:
+ * 1. Background Layer (video, image, slideshow, or none)
+ * 2. Overlay Layer (optional gradient, solid, or blur)
+ * 3. Content Layer (interactive components)
+ *
+ * This component is used by both /tile and /page routes to ensure
+ * consistent rendering and state preservation across navigation.
+ */
+export declare function UnifiedTemplate({ config, children, className }: UnifiedTemplateProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=UnifiedTemplate.d.ts.map

package/dist/components/unified/UnifiedTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/unified/UnifiedTemplate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,oBAAoB,qBAyBzF"}

package/dist/components/unified/UnifiedTemplate.js

@@ -0,0 +1,31 @@
+'use client';
+import React from 'react';
+import { BackgroundLayer } from './BackgroundLayer';
+import { OverlayLayer } from './OverlayLayer';
+import { ContentLayer } from './ContentLayer';
+/**
+ * UnifiedTemplate Component
+ *
+ * Main wrapper component that combines all layers:
+ * 1. Background Layer (video, image, slideshow, or none)
+ * 2. Overlay Layer (optional gradient, solid, or blur)
+ * 3. Content Layer (interactive components)
+ *
+ * This component is used by both /tile and /page routes to ensure
+ * consistent rendering and state preservation across navigation.
+ */
+export function UnifiedTemplate({ config, children, className = '' }) {
+    const { background, overlay, content, layout } = config;
+    // Layout classes
+    const layoutClasses = {
+        standard: '',
+        fullscreen: 'overflow-hidden',
+        overlay: 'relative',
+        split: 'grid grid-cols-1 md:grid-cols-2',
+    };
+    const layoutClass = layoutClasses[layout] || layoutClasses.standard;
+    return (React.createElement("div", { className: `relative w-full h-full ${layoutClass} ${className}` },
+        React.createElement(BackgroundLayer, { background: background }),
+        React.createElement(OverlayLayer, { overlay: overlay }),
+        React.createElement(ContentLayer, { content: content }, children)));
+}

package/dist/components/unified/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Unified Template Components
+ *
+ * These components provide the foundation for the unified tile template.
+ * All tiles use this same structure with optional media backgrounds.
+ */
+export * from './types';
+export { BackgroundLayer } from './BackgroundLayer';
+export { OverlayLayer } from './OverlayLayer';
+export { ContentLayer } from './ContentLayer';
+export { UnifiedTemplate } from './UnifiedTemplate';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/unified/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/unified/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,SAAS,CAAC;AAGxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/unified/index.js

@@ -0,0 +1,13 @@
+/**
+ * Unified Template Components
+ *
+ * These components provide the foundation for the unified tile template.
+ * All tiles use this same structure with optional media backgrounds.
+ */
+// Export types
+export * from './types';
+// Export components
+export { BackgroundLayer } from './BackgroundLayer';
+export { OverlayLayer } from './OverlayLayer';
+export { ContentLayer } from './ContentLayer';
+export { UnifiedTemplate } from './UnifiedTemplate';

package/dist/components/unified/types.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Unified Template Types
+ *
+ * This template consolidates all previous template types (video, image, slideshow, hybrid)
+ * into one consistent structure with optional backgrounds and interactive content.
+ */
+export type BackgroundType = 'video' | 'image' | 'slideshow' | 'none';
+export interface VideoBackground {
+    type: 'video';
+    assets: [string];
+    options?: {
+        loop?: boolean;
+        autoplay?: boolean;
+        muted?: boolean;
+        controls?: boolean;
+        playbackRate?: number;
+    };
+}
+export interface ImageBackground {
+    type: 'image';
+    assets: [string];
+    options?: {
+        objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+        position?: string;
+        blur?: number;
+        brightness?: number;
+        contrast?: number;
+    };
+}
+export interface SlideshowBackground {
+    type: 'slideshow';
+    assets: string[];
+    options?: {
+        interval?: number;
+        transition?: 'fade' | 'slide' | 'zoom' | 'none';
+        transitionDuration?: number;
+        loop?: boolean;
+        objectFit?: 'cover' | 'contain' | 'fill';
+        showIndicators?: boolean;
+        showControls?: boolean;
+    };
+}
+export interface NoneBackground {
+    type: 'none';
+    options?: {
+        color?: string;
+        gradient?: string;
+        pattern?: string;
+    };
+}
+export type Background = VideoBackground | ImageBackground | SlideshowBackground | NoneBackground;
+export type LayoutType = 'standard' | 'fullscreen' | 'overlay' | 'split';
+export interface OverlayConfig {
+    enabled: boolean;
+    type?: 'gradient' | 'solid' | 'blur';
+    opacity?: number;
+    color?: string;
+    blur?: number;
+    gradient?: {
+        from: string;
+        to: string;
+        direction?: 'top' | 'bottom' | 'left' | 'right' | 'radial';
+    };
+}
+export interface ContentConfig {
+    type: string;
+    data?: any;
+    layout?: {
+        position?: 'top' | 'center' | 'bottom' | 'floating';
+        width?: string | number;
+        height?: string | number;
+        padding?: string | number;
+        margin?: string | number;
+    };
+}
+export interface UnifiedTemplateConfig {
+    layout: LayoutType;
+    background: Background;
+    overlay?: OverlayConfig;
+    content: ContentConfig;
+    metadata?: {
+        title?: string;
+        description?: string;
+        author?: string;
+        version?: string;
+    };
+}
+/**
+ * Helper type guards
+ */
+export declare function isVideoBackground(bg: Background): bg is VideoBackground;
+export declare function isImageBackground(bg: Background): bg is ImageBackground;
+export declare function isSlideshowBackground(bg: Background): bg is SlideshowBackground;
+export declare function isNoneBackground(bg: Background): bg is NoneBackground;
+/**
+ * Default configurations
+ */
+export declare const DEFAULT_VIDEO_OPTIONS: VideoBackground['options'];
+export declare const DEFAULT_IMAGE_OPTIONS: ImageBackground['options'];
+export declare const DEFAULT_SLIDESHOW_OPTIONS: SlideshowBackground['options'];
+export declare const DEFAULT_OVERLAY_CONFIG: OverlayConfig;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/unified/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/unified/types.ts"],"names":[],"mappings":"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"}

package/dist/components/unified/types.js

@@ -0,0 +1,57 @@
+/**
+ * Unified Template Types
+ *
+ * This template consolidates all previous template types (video, image, slideshow, hybrid)
+ * into one consistent structure with optional backgrounds and interactive content.
+ */
+/**
+ * Helper type guards
+ */
+export function isVideoBackground(bg) {
+    return bg.type === 'video';
+}
+export function isImageBackground(bg) {
+    return bg.type === 'image';
+}
+export function isSlideshowBackground(bg) {
+    return bg.type === 'slideshow';
+}
+export function isNoneBackground(bg) {
+    return bg.type === 'none';
+}
+/**
+ * Default configurations
+ */
+export const DEFAULT_VIDEO_OPTIONS = {
+    loop: true,
+    autoplay: true,
+    muted: false,
+    controls: false,
+    playbackRate: 1,
+};
+export const DEFAULT_IMAGE_OPTIONS = {
+    objectFit: 'cover',
+    position: 'center',
+    blur: 0,
+    brightness: 100,
+    contrast: 100,
+};
+export const DEFAULT_SLIDESHOW_OPTIONS = {
+    interval: 3000,
+    transition: 'fade',
+    transitionDuration: 500,
+    loop: true,
+    objectFit: 'cover',
+    showIndicators: true,
+    showControls: false,
+};
+export const DEFAULT_OVERLAY_CONFIG = {
+    enabled: false,
+    type: 'gradient',
+    opacity: 50,
+    gradient: {
+        from: 'rgba(0, 0, 0, 0.8)',
+        to: 'rgba(0, 0, 0, 0.2)',
+        direction: 'bottom',
+    },
+};

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { useKeyboard } from './react/useKeyboard.js';
 export { useViewport } from './react/useViewport.js';
 export { TileContainer } from './react/TileContainer.js';
 export { withTile } from './react/withTile.js';
+export { UnifiedTemplate, BackgroundLayer, OverlayLayer, ContentLayer, } from './components/unified/index.js';
+export type { UnifiedTemplateConfig, Background, VideoBackground, ImageBackground, SlideshowBackground, NoneBackground, BackgroundType, LayoutType, OverlayConfig, ContentConfig, } from './components/unified/index.js';
 export { VideoPlayer, useVideoState, useVideo, // Alias for useVideoState
 useCuePoint, useCuePoints, useVideoProgress, Slideshow, useSlideshowState, useSlideshow, // Alias for useSlideshowState
 OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,OAAO,EAEL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0BAA0B;AACpC,WAAW,EACX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,iBAAiB,EACjB,YAAY,EAAE,8BAA8B;AAE5C,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EAER,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGtE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGrI,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtE,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAG3B,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG/C,OAAO,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,qBAAqB,EACrB,UAAU,EACV,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,UAAU,EACV,aAAa,EACb,aAAa,GACd,MAAM,+BAA+B,CAAC;AAGvC,OAAO,EAEL,WAAW,EACX,aAAa,EACb,QAAQ,EAAE,0BAA0B;AACpC,WAAW,EACX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,iBAAiB,EACjB,YAAY,EAAE,8BAA8B;AAE5C,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,QAAQ,EAER,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGtE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGrI,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtE,cAAc,kBAAkB,CAAC;AAGjC,cAAc,YAAY,CAAC;AAG3B,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -6,6 +6,8 @@ export { useKeyboard } from './react/useKeyboard.js';
 export { useViewport } from './react/useViewport.js';
 export { TileContainer } from './react/TileContainer.js';
 export { withTile } from './react/withTile.js';
+// Unified Template Components (all tiles use this structure)
+export { UnifiedTemplate, BackgroundLayer, OverlayLayer, ContentLayer, } from './components/unified/index.js';
 // Overlay components for hybrid tiles (video/image with interactive overlays)
 export { 
 // Video player (with route persistence)

package/dist/spec/schema.d.ts

@@ -59,21 +59,21 @@ declare const CaptionTrackSchema: z.ZodObject<{
         background: z.ZodOptional<z.ZodEnum<["none", "solid", "gradient"]>>;
         color: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
-        position: "center" | "bottom" | "top";
+        position: "center" | "top" | "bottom";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        background?: "none" | "solid" | "gradient" | undefined;
+        background?: "none" | "gradient" | "solid" | undefined;
         color?: string | undefined;
     }, {
-        position: "center" | "bottom" | "top";
+        position: "center" | "top" | "bottom";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        background?: "none" | "solid" | "gradient" | undefined;
+        background?: "none" | "gradient" | "solid" | undefined;
         color?: string | undefined;
     }>;
 }, "strip", z.ZodTypeAny, {
     style: {
-        position: "center" | "bottom" | "top";
+        position: "center" | "top" | "bottom";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        background?: "none" | "solid" | "gradient" | undefined;
+        background?: "none" | "gradient" | "solid" | undefined;
         color?: string | undefined;
     };
     segments: {
@@ -84,9 +84,9 @@ declare const CaptionTrackSchema: z.ZodObject<{
     }[];
 }, {
     style: {
-        position: "center" | "bottom" | "top";
+        position: "center" | "top" | "bottom";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        background?: "none" | "solid" | "gradient" | undefined;
+        background?: "none" | "gradient" | "solid" | undefined;
         color?: string | undefined;
     };
     segments: {
@@ -102,11 +102,11 @@ declare const PlacementSchema: z.ZodUnion<[z.ZodObject<{
     inset: z.ZodOptional<z.ZodNumber>;
     align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
 }, "strip", z.ZodTypeAny, {
-    lane: "center" | "bottom" | "top";
+    lane: "center" | "top" | "bottom";
     align?: "center" | "left" | "right" | undefined;
     inset?: number | undefined;
 }, {
-    lane: "center" | "bottom" | "top";
+    lane: "center" | "top" | "bottom";
     align?: "center" | "left" | "right" | undefined;
     inset?: number | undefined;
 }>, z.ZodObject<{
@@ -119,13 +119,13 @@ declare const PlacementSchema: z.ZodUnion<[z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         left?: number | undefined;
         right?: number | undefined;
-        bottom?: number | undefined;
         top?: number | undefined;
+        bottom?: number | undefined;
     }, {
         left?: number | undefined;
         right?: number | undefined;
-        bottom?: number | undefined;
         top?: number | undefined;
+        bottom?: number | undefined;
     }>>;
     position: z.ZodOptional<z.ZodObject<{
         x: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
@@ -138,24 +138,24 @@ declare const PlacementSchema: z.ZodUnion<[z.ZodObject<{
         y: string | number;
     }>>;
 }, "strip", z.ZodTypeAny, {
-    type: "inset" | "fullscreen" | "positioned";
+    type: "fullscreen" | "inset" | "positioned";
     insets?: {
         left?: number | undefined;
         right?: number | undefined;
-        bottom?: number | undefined;
         top?: number | undefined;
+        bottom?: number | undefined;
     } | undefined;
     position?: {
         x: string | number;
         y: string | number;
     } | undefined;
 }, {
-    type: "inset" | "fullscreen" | "positioned";
+    type: "fullscreen" | "inset" | "positioned";
     insets?: {
         left?: number | undefined;
         right?: number | undefined;
-        bottom?: number | undefined;
         top?: number | undefined;
+        bottom?: number | undefined;
     } | undefined;
     position?: {
         x: string | number;
@@ -180,11 +180,11 @@ declare const OverlayCueSchema: z.ZodObject<{
         inset: z.ZodOptional<z.ZodNumber>;
         align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
     }, "strip", z.ZodTypeAny, {
-        lane: "center" | "bottom" | "top";
+        lane: "center" | "top" | "bottom";
         align?: "center" | "left" | "right" | undefined;
         inset?: number | undefined;
     }, {
-        lane: "center" | "bottom" | "top";
+        lane: "center" | "top" | "bottom";
         align?: "center" | "left" | "right" | undefined;
         inset?: number | undefined;
     }>, z.ZodObject<{
@@ -197,13 +197,13 @@ declare const OverlayCueSchema: z.ZodObject<{
         }, "strip", z.ZodTypeAny, {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         }, {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         }>>;
         position: z.ZodOptional<z.ZodObject<{
             x: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
@@ -216,24 +216,24 @@ declare const OverlayCueSchema: z.ZodObject<{
             y: string | number;
         }>>;
     }, "strip", z.ZodTypeAny, {
-        type: "inset" | "fullscreen" | "positioned";
+        type: "fullscreen" | "inset" | "positioned";
         insets?: {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         } | undefined;
         position?: {
             x: string | number;
             y: string | number;
         } | undefined;
     }, {
-        type: "inset" | "fullscreen" | "positioned";
+        type: "fullscreen" | "inset" | "positioned";
         insets?: {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         } | undefined;
         position?: {
             x: string | number;
@@ -263,16 +263,16 @@ declare const OverlayCueSchema: z.ZodObject<{
         endMs?: number | undefined;
     };
     placement: {
-        lane: "center" | "bottom" | "top";
+        lane: "center" | "top" | "bottom";
         align?: "center" | "left" | "right" | undefined;
         inset?: number | undefined;
     } | {
-        type: "inset" | "fullscreen" | "positioned";
+        type: "fullscreen" | "inset" | "positioned";
         insets?: {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         } | undefined;
         position?: {
             x: string | number;
@@ -294,16 +294,16 @@ declare const OverlayCueSchema: z.ZodObject<{
         endMs?: number | undefined;
     };
     placement: {
-        lane: "center" | "bottom" | "top";
+        lane: "center" | "top" | "bottom";
         align?: "center" | "left" | "right" | undefined;
         inset?: number | undefined;
     } | {
-        type: "inset" | "fullscreen" | "positioned";
+        type: "fullscreen" | "inset" | "positioned";
         insets?: {
             left?: number | undefined;
             right?: number | undefined;
-            bottom?: number | undefined;
             top?: number | undefined;
+            bottom?: number | undefined;
         } | undefined;
         position?: {
             x: string | number;
@@ -406,21 +406,21 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 background: z.ZodOptional<z.ZodEnum<["none", "solid", "gradient"]>>;
                 color: z.ZodOptional<z.ZodString>;
             }, "strip", z.ZodTypeAny, {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             }, {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             }>;
         }, "strip", z.ZodTypeAny, {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {
@@ -431,9 +431,9 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             }[];
         }, {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {
@@ -461,11 +461,11 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 inset: z.ZodOptional<z.ZodNumber>;
                 align: z.ZodOptional<z.ZodEnum<["left", "center", "right"]>>;
             }, "strip", z.ZodTypeAny, {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             }, {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             }>, z.ZodObject<{
@@ -478,13 +478,13 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 }, "strip", z.ZodTypeAny, {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 }, {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 }>>;
                 position: z.ZodOptional<z.ZodObject<{
                     x: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
@@ -497,24 +497,24 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                     y: string | number;
                 }>>;
             }, "strip", z.ZodTypeAny, {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
                     y: string | number;
                 } | undefined;
             }, {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -544,16 +544,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -575,16 +575,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -608,16 +608,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -634,9 +634,9 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         }[];
         captions?: {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {
@@ -655,16 +655,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -681,9 +681,9 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         }[];
         captions?: {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {
@@ -740,16 +740,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -766,9 +766,9 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         }[];
         captions?: {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {
@@ -819,16 +819,16 @@ export declare const OverlaySpecSchema: z.ZodObject<{
                 endMs?: number | undefined;
             };
             placement: {
-                lane: "center" | "bottom" | "top";
+                lane: "center" | "top" | "bottom";
                 align?: "center" | "left" | "right" | undefined;
                 inset?: number | undefined;
             } | {
-                type: "inset" | "fullscreen" | "positioned";
+                type: "fullscreen" | "inset" | "positioned";
                 insets?: {
                     left?: number | undefined;
                     right?: number | undefined;
-                    bottom?: number | undefined;
                     top?: number | undefined;
+                    bottom?: number | undefined;
                 } | undefined;
                 position?: {
                     x: string | number;
@@ -845,9 +845,9 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         }[];
         captions?: {
             style: {
-                position: "center" | "bottom" | "top";
+                position: "center" | "top" | "bottom";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                background?: "none" | "solid" | "gradient" | undefined;
+                background?: "none" | "gradient" | "solid" | undefined;
                 color?: string | undefined;
             };
             segments: {

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

@@ -6,8 +6,8 @@
  *   pnpm sync-templates
  *
  * Source files:
- * - TileOverlay: workers/base-video-worker/src/app/tile/TileOverlay.tsx
- * - PageOverlay: workers/base-video-worker/src/app/page/PageOverlay.tsx
+ * - TileOverlay: workers/base-video-worker/src/app/(video)/tile/TileOverlay.tsx
+ * - PageOverlay: workers/base-video-worker/src/app/(video)/page/PageOverlay.tsx
  */
 /**
  * Video Layout Template

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

@@ -6,8 +6,8 @@
  *   pnpm sync-templates
  *
  * Source files:
- * - TileOverlay: workers/base-video-worker/src/app/tile/TileOverlay.tsx
- * - PageOverlay: workers/base-video-worker/src/app/page/PageOverlay.tsx
+ * - TileOverlay: workers/base-video-worker/src/app/(video)/tile/TileOverlay.tsx
+ * - PageOverlay: workers/base-video-worker/src/app/(video)/page/PageOverlay.tsx
  */
 /**
  * Video Layout Template

package/package.json

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