@thewhateverapp/tile-sdk 0.10.1 → 0.11.0

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export { useTileNavigation } from './react/useTileNavigation';
 export { useKeyboard } from './react/useKeyboard';
 export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
+export { VideoPlayer, useVideoState, Slideshow, useSlideshowState, OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay';
+export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, SlotPosition, OverlaySlotProps, FullOverlayProps, GradientOverlayProps, } from './react/overlay';
 export { getTileBridge, TileBridge } from './bridge/TileBridge';
 export type { TileMessage, TileConfig, TileTokenData, KeyboardState } from './bridge/TileBridge';
 export { StateClient } from './state/StateClient';

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,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGjG,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAEL,WAAW,EACX,aAAa,EAEb,SAAS,EACT,iBAAiB,EAEjB,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAEV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAEhB,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,EAEd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGjG,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -5,6 +5,14 @@ export { useTileNavigation } from './react/useTileNavigation';
 export { useKeyboard } from './react/useKeyboard';
 export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
+// Overlay components for hybrid tiles (video/image with interactive overlays)
+export { 
+// Video player
+VideoPlayer, useVideoState, 
+// Slideshow
+Slideshow, useSlideshowState, 
+// Positioning components
+OverlaySlot, FullOverlay, GradientOverlay, } from './react/overlay';
 // Bridge for secure communication
 export { getTileBridge, TileBridge } from './bridge/TileBridge';
 // State API client

package/dist/react/index.d.ts

@@ -4,4 +4,5 @@ export { useTile } from './useTile';
 export { useKeyboard } from './useKeyboard';
 export { TileContainer } from './TileContainer';
 export { withTile } from './withTile';
+export * from './overlay';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,cAAc,WAAW,CAAC"}

package/dist/react/index.js

@@ -4,3 +4,5 @@ export { useKeyboard } from './useKeyboard';
 export { TileContainer } from './TileContainer';
 export { withTile } from './withTile';
 // TileInitializer removed - router should be injected directly into TileProvider
+// Overlay components for hybrid tiles (video/image with interactive overlays)
+export * from './overlay';

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

@@ -0,0 +1,65 @@
+import React, { type ReactNode } from 'react';
+export type SlotPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface OverlaySlotProps {
+    /** Position of the slot */
+    position: SlotPosition;
+    /** Children to render in the slot */
+    children: ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Padding from edges (default: 12px) */
+    padding?: number | string;
+    /** Whether to use safe area insets (default: true) */
+    useSafeArea?: boolean;
+    /** Z-index for stacking (default: 10) */
+    zIndex?: number;
+}
+/**
+ * OverlaySlot component for positioning overlay content.
+ * Use within VideoPlayer or Slideshow to position interactive elements.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlayer src={hlsUrl}>
+ *   <OverlaySlot position="top-right">
+ *     <span className="bg-red-500 px-2 py-1 rounded text-xs">LIVE</span>
+ *   </OverlaySlot>
+ *   <OverlaySlot position="bottom-center">
+ *     <PlayPauseButton />
+ *   </OverlaySlot>
+ * </VideoPlayer>
+ * ```
+ */
+export declare function OverlaySlot({ position, children, className, padding, useSafeArea, zIndex, }: OverlaySlotProps): React.JSX.Element;
+/**
+ * Full-screen overlay container that covers the entire media area.
+ * Use for modals, overlays that need to capture all interactions, etc.
+ */
+export interface FullOverlayProps {
+    children: ReactNode;
+    className?: string;
+    /** Background color/style (default: transparent) */
+    background?: string;
+    /** Z-index for stacking (default: 20) */
+    zIndex?: number;
+    /** Click handler for the overlay background */
+    onClick?: () => void;
+}
+export declare function FullOverlay({ children, className, background, zIndex, onClick, }: FullOverlayProps): React.JSX.Element;
+/**
+ * Gradient overlay for text readability.
+ * Commonly used for bottom captions/controls on videos and images.
+ */
+export interface GradientOverlayProps {
+    /** Direction of gradient (default: 'to-top') */
+    direction?: 'to-top' | 'to-bottom' | 'to-left' | 'to-right';
+    /** Gradient start opacity 0-100 (default: 60) */
+    opacity?: number;
+    /** Height/width of gradient (default: '50%') */
+    size?: string;
+    /** Z-index for stacking (default: 5) */
+    zIndex?: number;
+    className?: string;
+}
+export declare function GradientOverlay({ direction, opacity, size, zIndex, className, }: GradientOverlayProps): React.JSX.Element;
+//# sourceMappingURL=OverlaySlot.d.ts.map

package/dist/react/overlay/OverlaySlot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlaySlot.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/OverlaySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,OAAY,EACZ,WAAkB,EAClB,MAAW,GACZ,EAAE,gBAAgB,qBAwClB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAc,EACd,UAA0B,EAC1B,MAAW,EACX,OAAO,GACR,EAAE,gBAAgB,qBAUlB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAoB,EACpB,OAAY,EACZ,IAAY,EACZ,MAAU,EACV,SAAc,GACf,EAAE,oBAAoB,qBAuBtB"}

package/dist/react/overlay/OverlaySlot.js

@@ -0,0 +1,93 @@
+'use client';
+import React from 'react';
+/**
+ * Get Tailwind classes for slot position
+ */
+function getPositionClasses(position) {
+    switch (position) {
+        case 'top-left':
+            return 'top-0 left-0';
+        case 'top-center':
+            return 'top-0 left-1/2 -translate-x-1/2';
+        case 'top-right':
+            return 'top-0 right-0';
+        case 'center-left':
+            return 'top-1/2 left-0 -translate-y-1/2';
+        case 'center':
+            return 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2';
+        case 'center-right':
+            return 'top-1/2 right-0 -translate-y-1/2';
+        case 'bottom-left':
+            return 'bottom-0 left-0';
+        case 'bottom-center':
+            return 'bottom-0 left-1/2 -translate-x-1/2';
+        case 'bottom-right':
+            return 'bottom-0 right-0';
+        default:
+            return '';
+    }
+}
+/**
+ * OverlaySlot component for positioning overlay content.
+ * Use within VideoPlayer or Slideshow to position interactive elements.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlayer src={hlsUrl}>
+ *   <OverlaySlot position="top-right">
+ *     <span className="bg-red-500 px-2 py-1 rounded text-xs">LIVE</span>
+ *   </OverlaySlot>
+ *   <OverlaySlot position="bottom-center">
+ *     <PlayPauseButton />
+ *   </OverlaySlot>
+ * </VideoPlayer>
+ * ```
+ */
+export function OverlaySlot({ position, children, className = '', padding = 12, useSafeArea = true, zIndex = 10, }) {
+    const positionClasses = getPositionClasses(position);
+    const paddingValue = typeof padding === 'number' ? `${padding}px` : padding;
+    // Calculate safe area padding based on position
+    const getSafeAreaStyle = () => {
+        if (!useSafeArea)
+            return {};
+        const style = {};
+        if (position.includes('top')) {
+            style.paddingTop = `max(${paddingValue}, env(safe-area-inset-top, ${paddingValue}))`;
+        }
+        if (position.includes('bottom')) {
+            style.paddingBottom = `max(${paddingValue}, env(safe-area-inset-bottom, ${paddingValue}))`;
+        }
+        if (position.includes('left')) {
+            style.paddingLeft = `max(${paddingValue}, env(safe-area-inset-left, ${paddingValue}))`;
+        }
+        if (position.includes('right')) {
+            style.paddingRight = `max(${paddingValue}, env(safe-area-inset-right, ${paddingValue}))`;
+        }
+        return style;
+    };
+    return (React.createElement("div", { className: `absolute pointer-events-none ${positionClasses} ${className}`, style: {
+            padding: paddingValue,
+            zIndex,
+            ...getSafeAreaStyle(),
+        } },
+        React.createElement("div", { className: "pointer-events-auto" }, children)));
+}
+export function FullOverlay({ children, className = '', background = 'transparent', zIndex = 20, onClick, }) {
+    return (React.createElement("div", { className: `absolute inset-0 ${className}`, style: { background, zIndex }, onClick: onClick }, children));
+}
+export function GradientOverlay({ direction = 'to-top', opacity = 60, size = '50%', zIndex = 5, className = '', }) {
+    const directionMap = {
+        'to-top': 'bg-gradient-to-t from-black to-transparent bottom-0',
+        'to-bottom': 'bg-gradient-to-b from-black to-transparent top-0',
+        'to-left': 'bg-gradient-to-l from-black to-transparent right-0',
+        'to-right': 'bg-gradient-to-r from-black to-transparent left-0',
+    };
+    const sizeStyle = direction === 'to-top' || direction === 'to-bottom'
+        ? { height: size, width: '100%' }
+        : { width: size, height: '100%' };
+    return (React.createElement("div", { className: `absolute pointer-events-none ${directionMap[direction]} ${className}`, style: {
+            ...sizeStyle,
+            opacity: opacity / 100,
+            zIndex,
+        } }));
+}

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

@@ -0,0 +1,57 @@
+import React, { type ReactNode } from 'react';
+export interface SlideImage {
+    url: string;
+    alt?: string;
+    caption?: string;
+}
+export interface SlideshowState {
+    currentIndex: number;
+    totalSlides: number;
+    isTransitioning: boolean;
+    isPaused: boolean;
+    images: SlideImage[];
+}
+export interface SlideshowControls {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    pause: () => void;
+    resume: () => void;
+    toggle: () => void;
+}
+export interface SlideshowContextValue {
+    state: SlideshowState;
+    controls: SlideshowControls;
+}
+export interface SlideshowProps {
+    /** Array of images to display */
+    images: SlideImage[];
+    /** Auto-advance interval in milliseconds (default: 5000) */
+    intervalMs?: number;
+    /** Auto-advance slides (default: true) */
+    autoAdvance?: boolean;
+    /** Transition type (default: 'fade') */
+    transition?: 'fade' | 'slide' | 'none';
+    /** Transition duration in ms (default: 500) */
+    transitionDuration?: number;
+    /** Show navigation dots (default: true) */
+    showDots?: boolean;
+    /** Show navigation arrows (default: true) */
+    showArrows?: boolean;
+    /** Children rendered as overlay */
+    children?: ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Image container class names */
+    imageClassName?: string;
+}
+/**
+ * Slideshow component with auto-advancing image carousel.
+ * Provides slideshow state and controls to child overlays via context.
+ */
+export declare function Slideshow({ images, intervalMs, autoAdvance, transition, transitionDuration, showDots, showArrows, children, className, imageClassName, }: SlideshowProps): React.JSX.Element;
+/**
+ * Hook to access slideshow state and controls from within Slideshow children.
+ */
+export declare function useSlideshowState(): SlideshowContextValue;
+//# sourceMappingURL=Slideshow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/Slideshow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAID,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,UAAiB,EACjB,WAAkB,EAClB,UAAmB,EACnB,kBAAwB,EACxB,QAAe,EACf,UAAiB,EACjB,QAAQ,EACR,SAAc,EACd,cAAmB,GACpB,EAAE,cAAc,qBAsLhB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,qBAAqB,CAMzD"}

package/dist/react/overlay/Slideshow.js

@@ -0,0 +1,129 @@
+'use client';
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
+const SlideshowContext = createContext(null);
+/**
+ * Slideshow component with auto-advancing image carousel.
+ * Provides slideshow state and controls to child overlays via context.
+ */
+export function Slideshow({ images, intervalMs = 5000, autoAdvance = true, transition = 'fade', transitionDuration = 500, showDots = true, showArrows = true, children, className = '', imageClassName = '', }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [isPaused, setIsPaused] = useState(!autoAdvance);
+    const intervalRef = useRef(null);
+    const totalSlides = images.length;
+    // Control functions
+    const next = useCallback(() => {
+        if (isTransitioning || totalSlides <= 1)
+            return;
+        setIsTransitioning(true);
+        setCurrentIndex(prev => (prev + 1) % totalSlides);
+        setTimeout(() => setIsTransitioning(false), transitionDuration);
+    }, [isTransitioning, totalSlides, transitionDuration]);
+    const prev = useCallback(() => {
+        if (isTransitioning || totalSlides <= 1)
+            return;
+        setIsTransitioning(true);
+        setCurrentIndex(prev => (prev - 1 + totalSlides) % totalSlides);
+        setTimeout(() => setIsTransitioning(false), transitionDuration);
+    }, [isTransitioning, totalSlides, transitionDuration]);
+    const goTo = useCallback((index) => {
+        if (isTransitioning || index === currentIndex || index < 0 || index >= totalSlides)
+            return;
+        setIsTransitioning(true);
+        setCurrentIndex(index);
+        setTimeout(() => setIsTransitioning(false), transitionDuration);
+    }, [isTransitioning, currentIndex, totalSlides, transitionDuration]);
+    const pause = useCallback(() => {
+        setIsPaused(true);
+    }, []);
+    const resume = useCallback(() => {
+        setIsPaused(false);
+    }, []);
+    const toggle = useCallback(() => {
+        setIsPaused(prev => !prev);
+    }, []);
+    // Auto-advance timer
+    useEffect(() => {
+        if (isPaused || totalSlides <= 1) {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+            return;
+        }
+        intervalRef.current = setInterval(next, intervalMs);
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+    }, [isPaused, intervalMs, next, totalSlides]);
+    // Get transition styles
+    const getTransitionStyles = (index) => {
+        const isActive = index === currentIndex;
+        switch (transition) {
+            case 'fade':
+                return {
+                    opacity: isActive ? 1 : 0,
+                    transition: `opacity ${transitionDuration}ms ease-in-out`,
+                    position: 'absolute',
+                    inset: 0,
+                };
+            case 'slide':
+                const offset = (index - currentIndex) * 100;
+                return {
+                    transform: `translateX(${offset}%)`,
+                    transition: `transform ${transitionDuration}ms ease-in-out`,
+                    position: 'absolute',
+                    inset: 0,
+                };
+            case 'none':
+            default:
+                return {
+                    opacity: isActive ? 1 : 0,
+                    position: 'absolute',
+                    inset: 0,
+                };
+        }
+    };
+    const contextValue = {
+        state: {
+            currentIndex,
+            totalSlides,
+            isTransitioning,
+            isPaused,
+            images,
+        },
+        controls: { next, prev, goTo, pause, resume, toggle },
+    };
+    if (images.length === 0) {
+        return (React.createElement("div", { className: `relative w-full h-full bg-black flex items-center justify-center ${className}` },
+            React.createElement("p", { className: "text-white/60" }, "No images")));
+    }
+    return (React.createElement(SlideshowContext.Provider, { value: contextValue },
+        React.createElement("div", { className: `relative w-full h-full bg-black overflow-hidden ${className}` },
+            React.createElement("div", { className: "relative w-full h-full" }, images.map((image, index) => (React.createElement("div", { key: `${image.url}-${index}`, style: getTransitionStyles(index), className: imageClassName },
+                React.createElement("img", { src: image.url, alt: image.alt || `Slide ${index + 1}`, className: "w-full h-full object-contain", loading: index === 0 ? 'eager' : 'lazy' }))))),
+            showArrows && totalSlides > 1 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: prev, disabled: isTransitioning, className: "absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50", "aria-label": "Previous slide" },
+                    React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }))),
+                React.createElement("button", { onClick: next, disabled: isTransitioning, className: "absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors disabled:opacity-50", "aria-label": "Next slide" },
+                    React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }))))),
+            showDots && totalSlides > 1 && (React.createElement("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" }, images.map((_, index) => (React.createElement("button", { key: index, onClick: () => goTo(index), disabled: isTransitioning, className: `w-2 h-2 rounded-full transition-colors ${index === currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'}`, "aria-label": `Go to slide ${index + 1}` }))))),
+            children)));
+}
+/**
+ * Hook to access slideshow state and controls from within Slideshow children.
+ */
+export function useSlideshowState() {
+    const context = useContext(SlideshowContext);
+    if (!context) {
+        throw new Error('useSlideshowState must be used within a Slideshow');
+    }
+    return context;
+}

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

@@ -0,0 +1,83 @@
+import React, { type ReactNode } from 'react';
+interface HlsInstance {
+    loadSource: (url: string) => void;
+    attachMedia: (video: HTMLVideoElement) => void;
+    on: (event: string, callback: (...args: unknown[]) => void) => void;
+    startLoad: () => void;
+    recoverMediaError: () => void;
+    destroy: () => void;
+}
+interface HlsStatic {
+    isSupported: () => boolean;
+    Events: {
+        MANIFEST_PARSED: string;
+        ERROR: string;
+    };
+    ErrorTypes: {
+        NETWORK_ERROR: string;
+        MEDIA_ERROR: string;
+    };
+    new (config?: {
+        enableWorker?: boolean;
+        lowLatencyMode?: boolean;
+    }): HlsInstance;
+}
+declare global {
+    interface Window {
+        Hls: HlsStatic;
+    }
+}
+export interface VideoState {
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    buffered: number;
+    volume: number;
+    muted: boolean;
+    isLoading: boolean;
+    error: string | null;
+}
+export interface VideoControls {
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    setMuted: (muted: boolean) => void;
+}
+export interface VideoContextValue {
+    state: VideoState;
+    controls: VideoControls;
+    videoRef: React.RefObject<HTMLVideoElement>;
+}
+export interface VideoPlayerProps {
+    /** HLS playlist URL (m3u8) */
+    src: string;
+    /** Auto-start playback (default: true) */
+    autoplay?: boolean;
+    /** Loop video (default: false) */
+    loop?: boolean;
+    /** Start muted (default: true for autoplay compliance) */
+    muted?: boolean;
+    /** Poster image URL */
+    poster?: string;
+    /** Show native controls (default: false) */
+    controls?: boolean;
+    /** Children rendered as overlay */
+    children?: ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Video wrapper class names */
+    videoClassName?: string;
+}
+/**
+ * VideoPlayer component with HLS streaming support.
+ * Provides video state and controls to child overlays via context.
+ */
+export declare function VideoPlayer({ src, autoplay, loop, muted, poster, controls, children, className, videoClassName, }: VideoPlayerProps): React.JSX.Element;
+/**
+ * Hook to access video state and controls from within VideoPlayer children.
+ */
+export declare function useVideoState(): VideoContextValue;
+export {};
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/dist/react/overlay/VideoPlayer.d.ts.map

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

package/dist/react/overlay/VideoPlayer.js

@@ -0,0 +1,181 @@
+'use client';
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
+const VideoContext = createContext(null);
+/**
+ * VideoPlayer component with HLS streaming support.
+ * Provides video state and controls to child overlays via context.
+ */
+export function VideoPlayer({ src, autoplay = true, loop = false, muted = true, poster, controls = false, children, className = '', videoClassName = '', }) {
+    const videoRef = useRef(null);
+    const hlsRef = useRef(null);
+    const [state, setState] = useState({
+        isPlaying: false,
+        currentTime: 0,
+        duration: 0,
+        buffered: 0,
+        volume: 1,
+        muted: muted,
+        isLoading: true,
+        error: null,
+    });
+    // Control functions
+    const play = useCallback(() => {
+        videoRef.current?.play().catch(() => { });
+    }, []);
+    const pause = useCallback(() => {
+        videoRef.current?.pause();
+    }, []);
+    const toggle = useCallback(() => {
+        if (videoRef.current?.paused) {
+            play();
+        }
+        else {
+            pause();
+        }
+    }, [play, pause]);
+    const seek = useCallback((time) => {
+        if (videoRef.current) {
+            videoRef.current.currentTime = time;
+        }
+    }, []);
+    const setVolume = useCallback((volume) => {
+        if (videoRef.current) {
+            videoRef.current.volume = Math.max(0, Math.min(1, volume));
+        }
+    }, []);
+    const setMuted = useCallback((muted) => {
+        if (videoRef.current) {
+            videoRef.current.muted = muted;
+        }
+    }, []);
+    // Load HLS.js from CDN and initialize
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !src)
+            return;
+        // Load HLS.js script if not already loaded
+        const loadHls = async () => {
+            if (!window.Hls) {
+                await new Promise((resolve, reject) => {
+                    const script = document.createElement('script');
+                    script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1';
+                    script.onload = () => resolve();
+                    script.onerror = () => reject(new Error('Failed to load HLS.js'));
+                    document.head.appendChild(script);
+                });
+            }
+            const Hls = window.Hls;
+            if (Hls.isSupported()) {
+                const hls = new Hls({
+                    enableWorker: true,
+                    lowLatencyMode: false,
+                });
+                hlsRef.current = hls;
+                hls.loadSource(src);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                    setState(s => ({ ...s, isLoading: false }));
+                    if (autoplay) {
+                        video.play().catch(() => { });
+                    }
+                });
+                hls.on(Hls.Events.ERROR, (_event, data) => {
+                    const errorData = data;
+                    if (errorData.fatal) {
+                        switch (errorData.type) {
+                            case Hls.ErrorTypes.NETWORK_ERROR:
+                                hls.startLoad();
+                                break;
+                            case Hls.ErrorTypes.MEDIA_ERROR:
+                                hls.recoverMediaError();
+                                break;
+                            default:
+                                setState(s => ({ ...s, error: 'Failed to load video', isLoading: false }));
+                                hls.destroy();
+                                break;
+                        }
+                    }
+                });
+            }
+            else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                // Native HLS support (Safari)
+                video.src = src;
+                video.addEventListener('loadedmetadata', () => {
+                    setState(s => ({ ...s, isLoading: false }));
+                    if (autoplay) {
+                        video.play().catch(() => { });
+                    }
+                });
+            }
+            else {
+                setState(s => ({ ...s, error: 'HLS not supported', isLoading: false }));
+            }
+        };
+        loadHls().catch(error => {
+            setState(s => ({ ...s, error: error.message, isLoading: false }));
+        });
+        return () => {
+            hlsRef.current?.destroy();
+            hlsRef.current = null;
+        };
+    }, [src, autoplay]);
+    // Video event listeners
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const handlePlay = () => setState(s => ({ ...s, isPlaying: true }));
+        const handlePause = () => setState(s => ({ ...s, isPlaying: false }));
+        const handleTimeUpdate = () => setState(s => ({ ...s, currentTime: video.currentTime }));
+        const handleDurationChange = () => setState(s => ({ ...s, duration: video.duration }));
+        const handleVolumeChange = () => setState(s => ({ ...s, volume: video.volume, muted: video.muted }));
+        const handleProgress = () => {
+            if (video.buffered.length > 0) {
+                setState(s => ({
+                    ...s,
+                    buffered: video.buffered.end(video.buffered.length - 1),
+                }));
+            }
+        };
+        const handleError = () => setState(s => ({ ...s, error: 'Video playback error', isLoading: false }));
+        video.addEventListener('play', handlePlay);
+        video.addEventListener('pause', handlePause);
+        video.addEventListener('timeupdate', handleTimeUpdate);
+        video.addEventListener('durationchange', handleDurationChange);
+        video.addEventListener('volumechange', handleVolumeChange);
+        video.addEventListener('progress', handleProgress);
+        video.addEventListener('error', handleError);
+        return () => {
+            video.removeEventListener('play', handlePlay);
+            video.removeEventListener('pause', handlePause);
+            video.removeEventListener('timeupdate', handleTimeUpdate);
+            video.removeEventListener('durationchange', handleDurationChange);
+            video.removeEventListener('volumechange', handleVolumeChange);
+            video.removeEventListener('progress', handleProgress);
+            video.removeEventListener('error', handleError);
+        };
+    }, []);
+    const contextValue = {
+        state,
+        controls: { play, pause, toggle, seek, setVolume, setMuted },
+        videoRef: videoRef,
+    };
+    return (React.createElement(VideoContext.Provider, { value: contextValue },
+        React.createElement("div", { className: `relative w-full h-full bg-black ${className}` },
+            React.createElement("video", { ref: videoRef, className: `w-full h-full object-contain ${videoClassName}`, poster: poster, loop: loop, muted: muted, controls: controls, playsInline: true }),
+            state.isLoading && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center" },
+                React.createElement("div", { className: "w-10 h-10 border-3 border-white/30 border-t-white rounded-full animate-spin" }))),
+            state.error && (React.createElement("div", { className: "absolute inset-0 flex items-center justify-center text-white/80" },
+                React.createElement("p", null, state.error))),
+            children)));
+}
+/**
+ * Hook to access video state and controls from within VideoPlayer children.
+ */
+export function useVideoState() {
+    const context = useContext(VideoContext);
+    if (!context) {
+        throw new Error('useVideoState must be used within a VideoPlayer');
+    }
+    return context;
+}

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

@@ -0,0 +1,7 @@
+export { VideoPlayer, useVideoState, } from './VideoPlayer';
+export type { VideoState, VideoControls, VideoContextValue, VideoPlayerProps, } from './VideoPlayer';
+export { Slideshow, useSlideshowState, } from './Slideshow';
+export type { SlideImage, SlideshowState, SlideshowControls, SlideshowContextValue, SlideshowProps, } from './Slideshow';
+export { OverlaySlot, FullOverlay, GradientOverlay, } from './OverlaySlot';
+export type { SlotPosition, OverlaySlotProps, FullOverlayProps, GradientOverlayProps, } from './OverlaySlot';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,WAAW,EACX,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,SAAS,EACT,iBAAiB,GAClB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,UAAU,EACV,cAAc,EACd,iBAAiB,EACjB,qBAAqB,EACrB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/react/overlay/index.js

@@ -0,0 +1,6 @@
+// Video player with HLS streaming support
+export { VideoPlayer, useVideoState, } from './VideoPlayer';
+// Image slideshow component
+export { Slideshow, useSlideshowState, } from './Slideshow';
+// Overlay positioning components
+export { OverlaySlot, FullOverlay, GradientOverlay, } from './OverlaySlot';

package/package.json

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