@thewhateverapp/tile-sdk 0.10.1 → 0.11.1

package/dist/bridge/TileBridge.d.ts

@@ -49,8 +49,37 @@ export declare class TileBridge {
     private currentToken;
     private tokenExpiresAt;
     private keyboardState;
+    private baselineViewportHeight;
+    private keyboardDetectionEnabled;
+    private lastReportedKeyboardState;
+    private viewportDebounceTimer;
+    private readonly KEYBOARD_THRESHOLD;
+    private readonly DEBOUNCE_MS;
+    private inputFocused;
+    private focusedElement;
     constructor(expectedOrigin?: string, router?: NextRouter);
     private initialize;
+    /**
+     * Initialize keyboard detection using VisualViewport API and input focus tracking
+     * This runs inside the WebView to detect when the soft keyboard appears
+     */
+    private initializeKeyboardDetection;
+    /**
+     * Process viewport change and determine keyboard state
+     */
+    private processViewportChange;
+    /**
+     * Handle focusin events - input element gained focus
+     */
+    private handleFocusIn;
+    /**
+     * Handle focusout events - input element lost focus
+     */
+    private handleFocusOut;
+    /**
+     * Check if an element is an input-like element that would trigger keyboard
+     */
+    private isInputElement;
     private handleMessage;
     private handleConfig;
     private handleResponse;

package/dist/bridge/TileBridge.d.ts.map

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

package/dist/bridge/TileBridge.js

@@ -15,6 +15,16 @@ export class TileBridge {
         this.tokenExpiresAt = null;
         // Keyboard state from parent (mobile app)
         this.keyboardState = { visible: false, height: 0 };
+        // VisualViewport tracking for keyboard detection (Plan A)
+        this.baselineViewportHeight = 0;
+        this.keyboardDetectionEnabled = false;
+        this.lastReportedKeyboardState = { visible: false, height: 0 };
+        this.viewportDebounceTimer = null;
+        this.KEYBOARD_THRESHOLD = 150; // Minimum height change to consider keyboard visible
+        this.DEBOUNCE_MS = 100; // Debounce viewport events
+        // Input focus tracking (Plan B)
+        this.inputFocused = false;
+        this.focusedElement = null;
         this.parentOrigin = expectedOrigin;
         this.router = router || null;
         // Auto-detect parent origin based on environment
@@ -66,6 +76,182 @@ export class TileBridge {
         this.ready = true;
         // Send ready signal to parent
         this.sendToParent({ type: 'tile:ready' });
+        // Initialize keyboard detection (Plan A: VisualViewport + Plan B: Input Focus)
+        this.initializeKeyboardDetection();
+    }
+    /**
+     * Initialize keyboard detection using VisualViewport API and input focus tracking
+     * This runs inside the WebView to detect when the soft keyboard appears
+     */
+    initializeKeyboardDetection() {
+        if (typeof window === 'undefined')
+            return;
+        // Only enable in iframe context (when running in mobile WebView)
+        if (!this.isInIframe()) {
+            if (this.isDevelopment()) {
+                console.log('[TileBridge] Keyboard detection skipped - not in iframe');
+            }
+            return;
+        }
+        this.keyboardDetectionEnabled = true;
+        // ==================== PLAN A: VisualViewport Detection ====================
+        // Use VisualViewport API to detect keyboard by monitoring viewport height changes
+        const vv = window.visualViewport;
+        if (vv) {
+            // Set baseline height (full viewport without keyboard)
+            this.baselineViewportHeight = vv.height;
+            if (this.isDevelopment() || this.isPreview()) {
+                console.log('[TileBridge] ⌨️ Keyboard detection initialized', {
+                    baselineHeight: this.baselineViewportHeight,
+                    hasVisualViewport: true,
+                });
+            }
+            // Handler for viewport resize events
+            const handleViewportChange = () => {
+                if (!this.keyboardDetectionEnabled)
+                    return;
+                // Debounce rapid events
+                if (this.viewportDebounceTimer) {
+                    clearTimeout(this.viewportDebounceTimer);
+                }
+                this.viewportDebounceTimer = setTimeout(() => {
+                    this.processViewportChange();
+                }, this.DEBOUNCE_MS);
+            };
+            // Subscribe to resize and scroll events on visualViewport
+            vv.addEventListener('resize', handleViewportChange);
+            vv.addEventListener('scroll', handleViewportChange);
+        }
+        else {
+            if (this.isDevelopment() || this.isPreview()) {
+                console.log('[TileBridge] ⌨️ VisualViewport not available, using focus-only detection');
+            }
+        }
+        // ==================== PLAN B: Input Focus Detection ====================
+        // Track when input elements are focused/blurred
+        document.addEventListener('focusin', this.handleFocusIn.bind(this));
+        document.addEventListener('focusout', this.handleFocusOut.bind(this));
+    }
+    /**
+     * Process viewport change and determine keyboard state
+     */
+    processViewportChange() {
+        const vv = window.visualViewport;
+        if (!vv)
+            return;
+        const currentHeight = vv.height;
+        const heightDiff = this.baselineViewportHeight - currentHeight;
+        const keyboardVisible = heightDiff > this.KEYBOARD_THRESHOLD;
+        const keyboardHeight = keyboardVisible ? Math.round(heightDiff) : 0;
+        // Only report if state changed
+        if (this.lastReportedKeyboardState.visible !== keyboardVisible ||
+            Math.abs(this.lastReportedKeyboardState.height - keyboardHeight) > 10) {
+            this.lastReportedKeyboardState = { visible: keyboardVisible, height: keyboardHeight };
+            if (this.isDevelopment() || this.isPreview()) {
+                console.log('[TileBridge] ⌨️ Keyboard state changed (viewport)', {
+                    visible: keyboardVisible,
+                    height: keyboardHeight,
+                    baselineHeight: this.baselineViewportHeight,
+                    currentHeight,
+                });
+            }
+            // Send keyboard state to parent (React Native)
+            this.sendToParent({
+                type: 'tile:keyboard',
+                payload: {
+                    visible: keyboardVisible,
+                    height: keyboardHeight,
+                    source: 'viewport',
+                },
+            });
+        }
+        // Update baseline when keyboard is hidden (to handle orientation changes)
+        if (!keyboardVisible && currentHeight > this.baselineViewportHeight) {
+            this.baselineViewportHeight = currentHeight;
+        }
+    }
+    /**
+     * Handle focusin events - input element gained focus
+     */
+    handleFocusIn(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        // Check if the focused element is an input-like element
+        const isInputLike = this.isInputElement(target);
+        if (isInputLike && !this.inputFocused) {
+            this.inputFocused = true;
+            this.focusedElement = target;
+            if (this.isDevelopment() || this.isPreview()) {
+                console.log('[TileBridge] ⌨️ Input focused', {
+                    tagName: target.tagName,
+                    type: target.type,
+                    id: target.id,
+                });
+            }
+            // Send focus event to parent
+            this.sendToParent({
+                type: 'tile:input-focused',
+                payload: {
+                    tagName: target.tagName.toLowerCase(),
+                    type: target.type || null,
+                    id: target.id || null,
+                },
+            });
+        }
+    }
+    /**
+     * Handle focusout events - input element lost focus
+     */
+    handleFocusOut(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        // Check if the blurred element is the one we're tracking
+        const isInputLike = this.isInputElement(target);
+        if (isInputLike && this.inputFocused) {
+            // Use setTimeout to check if focus moved to another input
+            // If relatedTarget is another input, we stay in "focused" state
+            setTimeout(() => {
+                const activeElement = document.activeElement;
+                const stillFocused = activeElement && this.isInputElement(activeElement);
+                if (!stillFocused) {
+                    this.inputFocused = false;
+                    this.focusedElement = null;
+                    if (this.isDevelopment() || this.isPreview()) {
+                        console.log('[TileBridge] ⌨️ Input blurred');
+                    }
+                    // Send blur event to parent
+                    this.sendToParent({
+                        type: 'tile:input-blurred',
+                        payload: {},
+                    });
+                }
+            }, 10);
+        }
+    }
+    /**
+     * Check if an element is an input-like element that would trigger keyboard
+     */
+    isInputElement(element) {
+        const tagName = element.tagName.toLowerCase();
+        // Standard input elements
+        if (tagName === 'textarea')
+            return true;
+        if (tagName === 'select')
+            return false; // Select doesn't trigger keyboard
+        if (tagName === 'input') {
+            const inputType = element.type?.toLowerCase();
+            // These input types trigger the keyboard
+            const keyboardTypes = ['text', 'email', 'password', 'search', 'tel', 'url', 'number'];
+            return !inputType || keyboardTypes.includes(inputType);
+        }
+        // Contenteditable elements
+        if (element.hasAttribute('contenteditable')) {
+            const value = element.getAttribute('contenteditable');
+            return value === 'true' || value === '';
+        }
+        return false;
     }
     handleMessage(event) {
         // Validate origin (skip validation in dev and preview)

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":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,UAAU,WAAW;IACnB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,MAAM,EAAE;QACN,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,UAAU,EAAE;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,MAAM,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,WAAW,CAAC;CAClF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,EAAE,SAAS,CAAC;KAChB;CACF;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAID,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,QAAe,EACf,IAAY,EACZ,KAAY,EACZ,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,cAAmB,GACpB,EAAE,gBAAgB,qBA6MlB;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,iBAAiB,CAMjD"}

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.1",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",