@shortkitsdk/react-native 0.2.4 → 0.2.6

package/src/ShortKitProvider.tsx

@@ -7,15 +7,17 @@ import type {
   ShortKitProviderProps,
   ContentItem,
   ImageCarouselItem,
-  CustomFeedItem,
+  FeedInput,
   PlayerTime,
   PlayerState,
   CaptionTrack,
+  FeedScrollPhase,
   ContentSignal,
+  StoryboardData,
 } from './types';
 import {
   serializeFeedConfigForModule,
-  serializeCustomFeedItems,
+  serializeFeedInputs,
   deserializePlayerState,
   deserializeContentItem,
   deserializePlayerTime,
@@ -39,13 +41,13 @@ interface State {
   prefetchedAheadCount: number;
   remainingContentCount: number;
   isActive: boolean;
-  isTransitioning: boolean;
+  feedScrollPhase: FeedScrollPhase | null;
   lastOverlayTap: number;
   lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
   currentCarouselItem: ImageCarouselItem | null;
   nextCarouselItem: ImageCarouselItem | null;
   isCarouselActive: boolean;
-  isCarouselTransitioning: boolean;
+  currentCarouselPage: number;
   activeCellType: 'video' | 'carousel' | null;
 }
 
@@ -62,13 +64,13 @@ const initialState: State = {
   prefetchedAheadCount: 0,
   remainingContentCount: 0,
   isActive: false,
-  isTransitioning: false,
+  feedScrollPhase: null,
   lastOverlayTap: 0,
   lastOverlayDoubleTap: null,
   currentCarouselItem: null,
   nextCarouselItem: null,
   isCarouselActive: false,
-  isCarouselTransitioning: false,
+  currentCarouselPage: 0,
   activeCellType: null,
 };
 
@@ -86,16 +88,15 @@ type Action =
   | { type: 'OVERLAY_CONFIGURE'; payload: ContentItem }
   | { type: 'OVERLAY_ACTIVATE'; payload: ContentItem }
   | { type: 'OVERLAY_RESET' }
-  | { type: 'OVERLAY_FADE_OUT' }
-  | { type: 'OVERLAY_RESTORE' }
   | { type: 'OVERLAY_TAP' }
   | { type: 'OVERLAY_DOUBLE_TAP'; payload: { x: number; y: number } }
-  | { type: 'ACTIVE_CELL_TYPE'; payload: 'video' | 'carousel' }
+  | { type: 'ACTIVE_CELL_TYPE'; payload: 'video' | 'carousel' | null }
+  | { type: 'FEED_TRANSITION_ENDED'; payload: { isVideo: boolean } }
   | { type: 'CAROUSEL_OVERLAY_CONFIGURE'; payload: ImageCarouselItem }
   | { type: 'CAROUSEL_OVERLAY_ACTIVATE'; payload: ImageCarouselItem }
   | { type: 'CAROUSEL_OVERLAY_RESET' }
-  | { type: 'CAROUSEL_OVERLAY_FADE_OUT' }
-  | { type: 'CAROUSEL_OVERLAY_RESTORE' };
+  | { type: 'CAROUSEL_PAGE_CHANGED'; payload: number }
+  | { type: 'FEED_SCROLL_PHASE'; payload: FeedScrollPhase };
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -138,30 +139,29 @@ function reducer(state: State, action: Action): State {
     case 'OVERLAY_CONFIGURE':
       return { ...state, nextItem: action.payload };
     case 'OVERLAY_ACTIVATE':
-      // Reset time/cue/transition state to prevent stale playback data from
-      // the previous cell flashing on the new cell's overlay.
-      // Note: nextItem is NOT cleared here — the native-side deferred-configure
-      // (ShortKitOverlayBridge) already prevents handleSwipe from polluting it.
-      // Clearing it would cause overlay-next to unmount its content ~80ms before
-      // the page settle swaps overlays, creating a visible dim-layer gap.
+      // Clear nextItem so overlay-next doesn't show stale data from the
+      // handleSwipe re-configure. The next OVERLAY_CONFIGURE (from UIKit
+      // prefetching cell N+2) will set it to the correct upcoming item.
+      // Also clear carousel state — a video cell is now active.
+      console.log('[ShortKitProvider] OVERLAY_ACTIVATE (video):', action.payload.playbackId);
       return {
         ...state,
         currentItem: action.payload,
         isActive: true,
-        time: { current: 0, duration: action.payload.duration, buffered: 0 },
-        activeCue: null,
-        isTransitioning: false,
+        time: { current: 0, duration: action.payload.duration ?? 0, buffered: 0 },
+        nextItem: null,
+        currentCarouselItem: null,
+        isCarouselActive: false,
+        nextCarouselItem: null,
+        currentCarouselPage: 0,
       };
     case 'OVERLAY_RESET':
       // Don't set isActive = false — the overlay stays mounted during
       // transitions. In the native SDK each cell has its own overlay
       // instance, so there's no gap. We replicate this by keeping the
       // single JS overlay mounted and updating its content on activate.
-      return { ...state, isTransitioning: false };
-    case 'OVERLAY_FADE_OUT':
-      return { ...state, isTransitioning: true };
-    case 'OVERLAY_RESTORE':
-      return { ...state, isTransitioning: false };
+      console.log('[ShortKitProvider] OVERLAY_RESET (video)');
+      return { ...state, feedScrollPhase: null };
     case 'OVERLAY_TAP':
       return { ...state, lastOverlayTap: state.lastOverlayTap + 1 };
     case 'OVERLAY_DOUBLE_TAP':
@@ -174,17 +174,46 @@ function reducer(state: State, action: Action): State {
         },
       };
     case 'ACTIVE_CELL_TYPE':
+      console.log('[ShortKitProvider] ACTIVE_CELL_TYPE:', action.payload);
       return { ...state, activeCellType: action.payload };
+    case 'FEED_TRANSITION_ENDED': {
+      if (action.payload.isVideo) {
+        return {
+          ...state,
+          activeCellType: 'video',
+          currentCarouselItem: null,
+          isCarouselActive: false,
+          nextCarouselItem: null,
+          currentCarouselPage: 0,
+        };
+      }
+      // Non-video destination. If a carousel configure was received, activate it.
+      if (state.nextCarouselItem) {
+        console.log('[ShortKitProvider] FEED_TRANSITION_ENDED → carousel activate:', state.nextCarouselItem.id);
+        return {
+          ...state,
+          activeCellType: 'carousel',
+          currentCarouselItem: state.nextCarouselItem,
+          isCarouselActive: true,
+          nextCarouselItem: null,
+        };
+      }
+      // Unknown non-video type (survey, ad, etc.)
+      return { ...state, activeCellType: null };
+    }
     case 'CAROUSEL_OVERLAY_CONFIGURE':
+      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_CONFIGURE:', action.payload.id);
       return { ...state, nextCarouselItem: action.payload };
     case 'CAROUSEL_OVERLAY_ACTIVATE':
-      return { ...state, currentCarouselItem: action.payload, isCarouselActive: true };
+      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_ACTIVATE:', action.payload.id);
+      return { ...state, currentCarouselItem: action.payload, isCarouselActive: true, nextCarouselItem: null };
     case 'CAROUSEL_OVERLAY_RESET':
-      return { ...state, isCarouselTransitioning: false };
-    case 'CAROUSEL_OVERLAY_FADE_OUT':
-      return { ...state, isCarouselTransitioning: true };
-    case 'CAROUSEL_OVERLAY_RESTORE':
-      return { ...state, isCarouselTransitioning: false };
+      console.log('[ShortKitProvider] CAROUSEL_OVERLAY_RESET');
+      return { ...state, currentCarouselItem: null, isCarouselActive: false, nextCarouselItem: null, currentCarouselPage: 0 };
+    case 'CAROUSEL_PAGE_CHANGED':
+      return { ...state, currentCarouselPage: action.payload };
+    case 'FEED_SCROLL_PHASE':
+      return { ...state, feedScrollPhase: action.payload };
     default:
       return state;
   }
@@ -197,7 +226,6 @@ function reducer(state: State, action: Action): State {
 export function ShortKitProvider({
   apiKey,
   config,
-  embedId,
   userId,
   clientAppName,
   clientAppVersion,
@@ -221,7 +249,6 @@ export function ShortKitProvider({
     NativeShortKitModule.initialize(
       apiKey,
       serializedConfig,
-      embedId,
       clientAppName,
       clientAppVersion,
       serializedDimensions,
@@ -414,18 +441,6 @@ export function ShortKitProvider({
       }),
     );
 
-    subscriptions.push(
-      NativeShortKitModule.onOverlayFadeOut((_event) => {
-        dispatch({ type: 'OVERLAY_FADE_OUT' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onOverlayRestore((_event) => {
-        dispatch({ type: 'OVERLAY_RESTORE' });
-      }),
-    );
-
     // Overlay tap events
     subscriptions.push(
       NativeShortKitModule.onOverlayTap((_event) => {
@@ -445,12 +460,14 @@ export function ShortKitProvider({
     // Feed transition — track active cell type
     subscriptions.push(
       NativeShortKitModule.onFeedTransition((event) => {
+        console.log('[ShortKitProvider] onFeedTransition:', event.phase, 'toItem:', event.toItem != null ? 'video' : 'non-video');
         if (event.phase === 'ended') {
-          // toItem is null when the destination cell is non-video (carousel, survey, ad)
+          // toItem is null when the destination cell is non-video (carousel, survey, ad).
+          // The reducer checks nextCarouselItem to distinguish carousel from other types.
           const isVideo = event.toItem != null;
           dispatch({
-            type: 'ACTIVE_CELL_TYPE',
-            payload: isVideo ? 'video' : 'carousel',
+            type: 'FEED_TRANSITION_ENDED',
+            payload: { isVideo },
           });
         }
       }),
@@ -485,21 +502,26 @@ export function ShortKitProvider({
       }),
     );
 
+    // Feed scroll phase
     subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayFadeOut((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_FADE_OUT' });
-      }),
-    );
-
-    subscriptions.push(
-      NativeShortKitModule.onCarouselOverlayRestore((_event) => {
-        dispatch({ type: 'CAROUSEL_OVERLAY_RESTORE' });
+      NativeShortKitModule.onFeedScrollPhase((event) => {
+        if (event.phase === 'dragging' && event.fromId) {
+          dispatch({
+            type: 'FEED_SCROLL_PHASE',
+            payload: { phase: 'dragging', fromId: event.fromId },
+          });
+        } else if (event.phase === 'settled') {
+          dispatch({
+            type: 'FEED_SCROLL_PHASE',
+            payload: { phase: 'settled' },
+          });
+        }
       }),
     );
 
     // Note: Feed-level callback events (onDidLoop, onFeedTransition,
     // onShareTapped, etc.) are subscribed by the ShortKitFeed component
-    // (Task 11), not here. The provider only manages state-driving events.
+    // not here. The provider only manages state-driving events.
 
     return () => {
       for (const sub of subscriptions) {
@@ -508,6 +530,40 @@ export function ShortKitProvider({
     };
   }, []);
 
+  // -----------------------------------------------------------------------
+  // Overlay ready signal — tell native it's safe to swap overlay transforms.
+  // This fires after React has re-rendered overlay-current with the new
+  // content item (and the overlay component has reset its opacity).
+  // Child effects (e.g. NewsOverlay's content-change reset) fire before
+  // this parent effect, guaranteeing the overlay is visually ready.
+  // -----------------------------------------------------------------------
+  const currentItemIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    const newId = state.currentItem?.id ?? null;
+    if (newId && newId !== currentItemIdRef.current) {
+      currentItemIdRef.current = newId;
+      NativeShortKitModule?.notifyOverlayReady();
+    }
+  }, [state.currentItem?.id]);
+
+  // Carousel overlay ready signal — same mechanism as video overlays.
+  const currentCarouselIdRef = useRef<string | null>(null);
+  useEffect(() => {
+    const newId = state.currentCarouselItem?.id ?? null;
+    if (newId && newId !== currentCarouselIdRef.current) {
+      currentCarouselIdRef.current = newId;
+      NativeShortKitModule?.notifyOverlayReady();
+    }
+  }, [state.currentCarouselItem?.id]);
+
+  // Safety net: if a carousel configure arrives before any feed transition
+  // (e.g. the feed starts on a carousel cell), activate after one render cycle.
+  useEffect(() => {
+    if (state.nextCarouselItem && !state.currentCarouselItem && !state.activeCellType) {
+      dispatch({ type: 'CAROUSEL_OVERLAY_ACTIVATE', payload: state.nextCarouselItem });
+    }
+  }, [state.nextCarouselItem, state.currentCarouselItem, state.activeCellType]);
+
   // -----------------------------------------------------------------------
   // Commands (stable refs)
   // -----------------------------------------------------------------------
@@ -567,12 +623,12 @@ export function ShortKitProvider({
     NativeShortKitModule?.clearUserId();
   }, []);
 
-  const setFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
-    NativeShortKitModule?.setFeedItems(serializeCustomFeedItems(items));
+  const setFeedItemsCmd = useCallback((items: FeedInput[]) => {
+    NativeShortKitModule?.setFeedItems(serializeFeedInputs(items));
   }, []);
 
-  const appendFeedItemsCmd = useCallback((items: CustomFeedItem[]) => {
-    NativeShortKitModule?.appendFeedItems(serializeCustomFeedItems(items));
+  const appendFeedItemsCmd = useCallback((items: FeedInput[]) => {
+    NativeShortKitModule?.appendFeedItems(serializeFeedInputs(items));
   }, []);
 
   const fetchContentCmd = useCallback(async (limit: number = 10): Promise<ContentItem[]> => {
@@ -585,6 +641,21 @@ export function ShortKitProvider({
     }
   }, []);
 
+  const prefetchStoryboardCmd = useCallback((playbackId: string) => {
+    NativeShortKitModule?.prefetchStoryboard(playbackId);
+  }, []);
+
+  const getStoryboardDataCmd = useCallback(async (playbackId: string): Promise<StoryboardData | null> => {
+    if (!NativeShortKitModule) return null;
+    const json = await NativeShortKitModule.getStoryboardData(playbackId);
+    if (!json) return null;
+    try {
+      return JSON.parse(json) as StoryboardData;
+    } catch {
+      return null;
+    }
+  }, []);
+
   // -----------------------------------------------------------------------
   // Context value (memoized to avoid unnecessary re-renders)
   // -----------------------------------------------------------------------
@@ -603,7 +674,7 @@ export function ShortKitProvider({
       prefetchedAheadCount: state.prefetchedAheadCount,
       remainingContentCount: state.remainingContentCount,
       isActive: state.isActive,
-      isTransitioning: state.isTransitioning,
+      feedScrollPhase: state.feedScrollPhase,
       lastOverlayTap: state.lastOverlayTap,
       lastOverlayDoubleTap: state.lastOverlayDoubleTap,
 
@@ -625,6 +696,8 @@ export function ShortKitProvider({
       setFeedItems: setFeedItemsCmd,
       appendFeedItems: appendFeedItemsCmd,
       fetchContent: fetchContentCmd,
+      prefetchStoryboard: prefetchStoryboardCmd,
+      getStoryboardData: getStoryboardDataCmd,
 
       // Active cell type
       activeCellType: state.activeCellType,
@@ -633,8 +706,7 @@ export function ShortKitProvider({
       currentCarouselItem: state.currentCarouselItem,
       nextCarouselItem: state.nextCarouselItem,
       isCarouselActive: state.isCarouselActive,
-      isCarouselTransitioning: state.isCarouselTransitioning,
-
+      currentCarouselPage: state.currentCarouselPage,
       // Internal — consumed by ShortKitFeed to pass to OverlayManager
       _overlayConfig: config.overlay ?? 'none',
       _carouselOverlayConfig: config.carouselOverlay ?? 'none',
@@ -652,14 +724,14 @@ export function ShortKitProvider({
       state.prefetchedAheadCount,
       state.remainingContentCount,
       state.isActive,
-      state.isTransitioning,
+      state.feedScrollPhase,
       state.lastOverlayTap,
       state.lastOverlayDoubleTap,
       state.activeCellType,
       state.currentCarouselItem,
       state.nextCarouselItem,
       state.isCarouselActive,
-      state.isCarouselTransitioning,
+      state.currentCarouselPage,
       play,
       pause,
       seek,
@@ -677,6 +749,8 @@ export function ShortKitProvider({
       setFeedItemsCmd,
       appendFeedItemsCmd,
       fetchContentCmd,
+      prefetchStoryboardCmd,
+      getStoryboardDataCmd,
       config.overlay,
       config.carouselOverlay,
     ],

package/src/index.ts

@@ -20,13 +20,14 @@ export type {
   ContentItem,
   CarouselImage,
   ImageCarouselItem,
-  CustomFeedItem,
+  FeedInput,
   JSONValue,
   CaptionTrack,
   PlayerTime,
   PlayerState,
   LoopEvent,
   FeedTransitionEvent,
+  FeedScrollPhase,
   FormatChangeEvent,
   ContentSignal,
   SurveyOption,
@@ -36,5 +37,7 @@ export type {
   ShortKitPlayerProps,
   ShortKitWidgetProps,
   ShortKitPlayerState,
+  StoryboardData,
+  StoryboardTile,
 } from './types';
 export type { ShortKitCarouselState } from './useShortKitCarousel';

package/src/serialization.ts

@@ -1,7 +1,7 @@
 import type {
   FeedConfig,
   ContentItem,
-  CustomFeedItem,
+  FeedInput,
   PlayerState,
   PlayerTime,
 } from './types';
@@ -102,8 +102,8 @@ export function deserializePlayerTime(event: {
 }
 
 /**
- * Serialize CustomFeedItem[] to a JSON string for the bridge.
+ * Serialize FeedInput[] to a JSON string for the bridge.
  */
-export function serializeCustomFeedItems(items: CustomFeedItem[]): string {
+export function serializeFeedInputs(items: FeedInput[]): string {
   return JSON.stringify(items);
 }

package/src/specs/NativeShortKitModule.ts

@@ -66,6 +66,11 @@ type FeedTransitionEvent = Readonly<{
   direction: string;
 }>;
 
+type FeedScrollPhaseEvent = Readonly<{
+  phase: string;
+  fromId?: string;
+}>;
+
 type FormatChangeEvent = Readonly<{
   contentId: string;
   fromBitrate: Double;
@@ -109,14 +114,6 @@ type OverlayResetEvent = Readonly<{
   item: string; // JSON-serialized ContentItem
 }>;
 
-type OverlayFadeOutEvent = Readonly<{
-  item: string; // JSON-serialized ContentItem
-}>;
-
-type OverlayRestoreEvent = Readonly<{
-  item: string; // JSON-serialized ContentItem
-}>;
-
 type ContentTappedEvent = Readonly<{
   contentId: string;
   index: Int32;
@@ -132,9 +129,10 @@ type CarouselOverlayActivateEvent = Readonly<{
 
 type CarouselOverlayResetEvent = Readonly<{}>;
 
-type CarouselOverlayFadeOutEvent = Readonly<{}>;
-
-type CarouselOverlayRestoreEvent = Readonly<{}>;
+type CarouselPageChangedEvent = Readonly<{
+  page: Int32;
+  pageCount: Int32;
+}>;
 
 type OverlayTapEvent = Readonly<{}>;
 
@@ -148,7 +146,6 @@ export interface Spec extends TurboModule {
   initialize(
     apiKey: string,
     config: string, // JSON-serialized FeedConfig
-    embedId?: string,
     clientAppName?: string,
     clientAppVersion?: string,
     customDimensions?: string, // JSON-serialized Record<string, string>
@@ -178,6 +175,13 @@ export interface Spec extends TurboModule {
   appendFeedItems(items: string): void;
   fetchContent(limit: Int32): Promise<string>;
 
+  // --- Storyboard / seek thumbnails ---
+  prefetchStoryboard(playbackId: string): void;
+  getStoryboardData(playbackId: string): Promise<string>;
+
+  // --- Overlay lifecycle ---
+  notifyOverlayReady(): void;
+
   // --- Event emitters ---
   readonly onPlayerStateChanged: EventEmitter<PlayerStateEvent>;
   readonly onCurrentItemChanged: EventEmitter<CurrentItemEvent>;
@@ -189,6 +193,7 @@ export interface Spec extends TurboModule {
   readonly onActiveCueChanged: EventEmitter<CueEvent>;
   readonly onDidLoop: EventEmitter<LoopEvent>;
   readonly onFeedTransition: EventEmitter<FeedTransitionEvent>;
+  readonly onFeedScrollPhase: EventEmitter<FeedScrollPhaseEvent>;
   readonly onFormatChange: EventEmitter<FormatChangeEvent>;
   readonly onPrefetchedAheadCountChanged: EventEmitter<PrefetchedAheadCountEvent>;
   readonly onRemainingContentCountChanged: EventEmitter<RemainingContentCountEvent>;
@@ -198,16 +203,13 @@ export interface Spec extends TurboModule {
   readonly onOverlayConfigure: EventEmitter<OverlayConfigureEvent>;
   readonly onOverlayActivate: EventEmitter<OverlayActivateEvent>;
   readonly onOverlayReset: EventEmitter<OverlayResetEvent>;
-  readonly onOverlayFadeOut: EventEmitter<OverlayFadeOutEvent>;
-  readonly onOverlayRestore: EventEmitter<OverlayRestoreEvent>;
   readonly onOverlayTap: EventEmitter<OverlayTapEvent>;
   readonly onOverlayDoubleTap: EventEmitter<OverlayDoubleTapEvent>;
   readonly onContentTapped: EventEmitter<ContentTappedEvent>;
   readonly onCarouselOverlayConfigure: EventEmitter<CarouselOverlayConfigureEvent>;
   readonly onCarouselOverlayActivate: EventEmitter<CarouselOverlayActivateEvent>;
   readonly onCarouselOverlayReset: EventEmitter<CarouselOverlayResetEvent>;
-  readonly onCarouselOverlayFadeOut: EventEmitter<CarouselOverlayFadeOutEvent>;
-  readonly onCarouselOverlayRestore: EventEmitter<CarouselOverlayRestoreEvent>;
+  readonly onCarouselPageChanged: EventEmitter<CarouselPageChangedEvent>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('ShortKitModule');

package/src/types.ts

@@ -65,7 +65,7 @@ export interface ImageCarouselItem {
   articleUrl?: string;
 }
 
-export type CustomFeedItem =
+export type FeedInput =
   | { type: 'video'; playbackId: string }
   | { type: 'imageCarousel'; item: ImageCarouselItem };
 
@@ -76,6 +76,24 @@ export type JSONValue =
   | null
   | { [key: string]: JSONValue };
 
+// --- Storyboard / Seek Thumbnails ---
+
+export interface StoryboardTile {
+  start: number;
+  x: number;
+  y: number;
+}
+
+export interface StoryboardData {
+  url: string;
+  tileWidth: number;
+  tileHeight: number;
+  duration: number;
+  imageWidth: number;
+  imageHeight: number;
+  tiles: StoryboardTile[];
+}
+
 export interface CaptionTrack {
   language: string;
   label: string;
@@ -111,6 +129,10 @@ export interface FeedTransitionEvent {
   direction: 'forward' | 'backward';
 }
 
+export type FeedScrollPhase =
+  | { phase: 'dragging'; fromId: string }
+  | { phase: 'settled' };
+
 export interface FormatChangeEvent {
   contentId: string;
   fromBitrate: number;
@@ -136,7 +158,6 @@ export interface ShortKitError {
 export interface ShortKitProviderProps {
   apiKey: string;
   config: FeedConfig;
-  embedId?: string;
   userId?: string;
 
   clientAppName?: string;
@@ -222,7 +243,7 @@ export interface ShortKitPlayerState {
   prefetchedAheadCount: number;
   remainingContentCount: number;
   isActive: boolean;
-  isTransitioning: boolean;
+  feedScrollPhase: FeedScrollPhase | null;
   lastOverlayTap: number;
   lastOverlayDoubleTap: { x: number; y: number; id: number } | null;
 
@@ -238,4 +259,6 @@ export interface ShortKitPlayerState {
   selectCaptionTrack: (language: string) => void;
   sendContentSignal: (signal: ContentSignal) => void;
   setMaxBitrate: (bitrate: number) => void;
+  prefetchStoryboard: (playbackId: string) => void;
+  getStoryboardData: (playbackId: string) => Promise<StoryboardData | null>;
 }

package/src/useShortKitCarousel.ts

@@ -5,7 +5,7 @@ import type { ImageCarouselItem } from './types';
 export interface ShortKitCarouselState {
   currentCarouselItem: ImageCarouselItem | null;
   isCarouselActive: boolean;
-  isCarouselTransitioning: boolean;
+  currentCarouselPage: number;
 }
 
 /**
@@ -24,6 +24,6 @@ export function useShortKitCarousel(): ShortKitCarouselState {
   return {
     currentCarouselItem: context.currentCarouselItem,
     isCarouselActive: context.isCarouselActive,
-    isCarouselTransitioning: context.isCarouselTransitioning,
+    currentCarouselPage: context.currentCarouselPage,
   };
 }

package/src/useShortKitPlayer.ts

@@ -27,7 +27,6 @@ export function useShortKitPlayer(): ShortKitPlayerState {
     currentCarouselItem: _currentCarouselItem,
     nextCarouselItem: _nextCarouselItem,
     isCarouselActive: _isCarouselActive,
-    isCarouselTransitioning: _isCarouselTransitioning,
     _overlayConfig: _overlay,
     _carouselOverlayConfig: _carouselOverlay,
     ...playerState