@frybynite/image-cloud 0.10.1 → 0.11.0

package/dist/react.d.ts

@@ -138,7 +138,18 @@ declare interface AnimationSnapshot {
     scale: number;
 }
 
-declare interface BorderConfig {
+export declare interface BeforeLoadContext {
+    url: string;
+    index: number;
+    totalImages: number;
+}
+
+export declare interface BeforeLoadResult {
+    url?: string;
+    fetch?: RequestInit;
+}
+
+export declare interface BorderConfig {
     width?: number;
     color?: string;
     radius?: number;
@@ -160,7 +171,7 @@ export declare interface BouncePathConfig {
 
 export declare type BouncePreset = 'energetic' | 'playful' | 'subtle';
 
-declare interface ClipPathConfig {
+export declare interface ClipPathConfig {
     shape: ClipPathShape;
     mode?: ClipPathMode;
 }
@@ -277,7 +288,7 @@ export declare const DEFAULT_CONFIG: ImageCloudConfig;
  */
 export declare const DEFAULT_SHARED_LOADER_CONFIG: SharedLoaderConfig;
 
-declare interface DropShadowConfig {
+export declare interface DropShadowConfig {
     x: number;
     y: number;
     blur: number;
@@ -298,7 +309,7 @@ export declare interface ElasticPathConfig {
 
 export declare type ElasticPreset = 'gentle' | 'bouncy' | 'wobbly' | 'snappy';
 
-declare interface EntryAnimationConfig {
+export declare interface EntryAnimationConfig {
     start: EntryStartConfig;
     timing: EntryTimingConfig;
     easing: string;
@@ -456,11 +467,34 @@ export declare class EntryAnimationEngine {
     private easeOutQuad;
 }
 
+export declare interface EntryAnimPoint {
+    x: number;
+    y: number;
+    rotation: number;
+    scale: number;
+}
+
 declare interface EntryCircularConfig {
     radius?: number | string;
     distribution?: 'even' | 'random';
 }
 
+export declare interface EntryCompleteContext {
+    element: HTMLElement;
+    index: number;
+    layout: ImageLayout;
+    startTime: number;
+    endTime: number;
+    duration: number;
+}
+
+declare interface EntryCurrentState {
+    x: number;
+    y: number;
+    rotation: number;
+    scale: number;
+}
+
 export declare interface EntryPathConfig {
     type: EntryPathType;
     bouncePreset?: BouncePreset;
@@ -471,9 +505,16 @@ export declare interface EntryPathConfig {
     wave?: Partial<WavePathConfig>;
 }
 
-export declare type EntryPathType = 'linear' | 'arc' | 'bounce' | 'elastic' | 'wave';
+export declare type EntryPathType = 'linear' | 'bounce' | 'elastic' | 'wave';
 
-declare interface EntryRotationConfig {
+export declare interface EntryProgressContext extends EntryStartContext {
+    progress: number;
+    rawProgress: number;
+    elapsed: number;
+    current: EntryAnimPoint;
+}
+
+export declare interface EntryRotationConfig {
     mode: EntryRotationMode;
     startRotation?: number | {
         min: number;
@@ -490,7 +531,7 @@ declare interface EntryRotationConfig {
 
 declare type EntryRotationMode = 'none' | 'settle' | 'spin' | 'wobble' | 'random';
 
-declare interface EntryScaleConfig {
+export declare interface EntryScaleConfig {
     mode: EntryScaleMode;
     startScale?: number;
     range?: {
@@ -513,13 +554,24 @@ declare interface EntryStartConfig {
     circular?: EntryCircularConfig;
 }
 
+export declare interface EntryStartContext {
+    element: HTMLElement;
+    index: number;
+    totalImages: number;
+    layout: ImageLayout;
+    from: EntryAnimPoint;
+    to: EntryAnimPoint;
+    startTime: number;
+    duration: number;
+}
+
 declare type EntryStartPosition = 'nearest-edge' | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'random-edge' | 'circular';
 
 declare interface EntryTimingConfig {
     duration: number;
 }
 
-declare interface FilterConfig {
+export declare interface FilterConfig {
     grayscale?: number;
     blur?: number;
     brightness?: number;
@@ -554,7 +606,11 @@ declare interface FocusInteractionConfig {
  */
 export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-gallery:focus,\n.fbn-ic-gallery.fbn-ic-has-focus {\n  outline: 2px solid rgba(147, 197, 253, 0.8);\n  outline-offset: -4px;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline:focus {\n  outline: none;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: -4px;\n}\n\n.fbn-ic-nav-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 10001;\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n.fbn-ic-nav-btn-prev {\n  left: 12px;\n}\n.fbn-ic-nav-btn-next {\n  right: 12px;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
 
-export declare type GalleryConfig = ImageCloudConfig;
+export declare interface GalleryReadyContext {
+    totalImages: number;
+    failedImages: number;
+    loadDuration: number;
+}
 
 export declare interface GoogleDriveFilesSource {
     files: string[];
@@ -706,7 +762,7 @@ export declare class GridPlacementLayout implements PlacementLayout {
     private random;
 }
 
-declare interface HoneycombAlgorithmConfig {
+export declare interface HoneycombAlgorithmConfig {
     spacing?: number;
 }
 
@@ -718,7 +774,7 @@ export declare class HoneycombPlacementLayout implements PlacementLayout {
     }): ImageLayout[];
 }
 
-declare interface IdleAnimationConfig {
+export declare interface IdleAnimationConfig {
     type: IdleAnimationType;
     wiggle?: IdleWiggleConfig;
     pulse?: IdlePulseConfig;
@@ -730,35 +786,35 @@ declare interface IdleAnimationConfig {
 
 declare type IdleAnimationType = 'wiggle' | 'pulse' | 'blink' | 'spin' | 'custom' | 'none';
 
-declare interface IdleBlinkConfig {
+export declare interface IdleBlinkConfig {
     onRatio: number;
     speed: number;
     style: 'snap' | 'fade';
 }
 
-declare type IdleCustomAnimationFn = (ctx: IdleCustomContext) => Animation | (() => void);
+export declare type IdleCustomAnimationFn = (ctx: IdleCustomContext) => Animation | (() => void);
 
-declare interface IdleCustomContext {
+export declare interface IdleCustomContext {
     element: HTMLElement;
     index: number;
     totalImages: number;
 }
 
-declare interface IdlePulseConfig {
+export declare interface IdlePulseConfig {
     minScale: number;
     maxScale: number;
     speed: number;
     sync: IdleSyncMode;
 }
 
-declare interface IdleSpinConfig {
+export declare interface IdleSpinConfig {
     speed: number;
     direction: 'clockwise' | 'counterclockwise';
 }
 
 declare type IdleSyncMode = 'together' | 'random';
 
-declare interface IdleWiggleConfig {
+export declare interface IdleWiggleConfig {
     maxAngle: number;
     speed: number;
     sync: IdleSyncMode;
@@ -773,7 +829,7 @@ export declare interface IImageFilter {
     getAllowedExtensions(): string[];
 }
 
-declare class ImageCloud {
+export declare class ImageCloud {
     private containerId;
     private containerRef;
     private fullConfig;
@@ -798,6 +854,7 @@ declare class ImageCloud {
     private swipeEngine;
     private imageLoader;
     private imageFilter;
+    private callbacks;
     private containerEl;
     private loadingEl;
     private errorEl;
@@ -880,11 +937,25 @@ declare class ImageCloud {
      */
     destroy(): void;
 }
-export { ImageCloud }
-export { ImageCloud as ImageGallery }
 
 export declare function imageCloud(options: ImageCloudOptions): Promise<ImageCloud>;
 
+export declare interface ImageCloudCallbacks {
+    onImageHover?: (ctx: ImageStateContext) => void;
+    onImageUnhover?: (ctx: ImageStateContext) => void;
+    onImageFocus?: (ctx: ImageStateContext) => void;
+    onImageUnfocus?: (ctx: ImageStateContext) => void;
+    onBeforeImageLoad?: (ctx: BeforeLoadContext) => BeforeLoadResult | void | Promise<BeforeLoadResult | void>;
+    onImageLoaded?: (ctx: ImageLoadedContext) => void;
+    onImageError?: (ctx: ImageErrorContext) => void;
+    onLoadProgress?: (ctx: LoadProgressContext) => void;
+    onGalleryReady?: (ctx: GalleryReadyContext) => void;
+    onLayoutComplete?: (ctx: LayoutCompleteContext) => void;
+    onEntryStart?: (ctx: EntryStartContext) => void;
+    onEntryProgress?: (ctx: EntryProgressContext) => void;
+    onEntryComplete?: (ctx: EntryCompleteContext) => void;
+}
+
 export declare interface ImageCloudConfig {
     loaders: LoaderEntry[];
     config: ConfigSection;
@@ -906,21 +977,24 @@ export declare interface ImageCloudOptions {
     animation?: Partial<AnimationConfig>;
     interaction?: Partial<InteractionConfig>;
     ui?: Partial<UIConfig>;
-    /** @deprecated Use `ui` instead of `rendering.ui` */
-    rendering?: {
-        ui?: Partial<UIConfig>;
-    };
     styling?: Partial<ImageStylingConfig>;
+    on?: ImageCloudCallbacks;
 }
 
 /**
  * Combined image configuration
  */
-declare interface ImageConfig {
+export declare interface ImageConfig {
     sizing?: ImageSizingConfig;
     rotation?: ImageRotationConfig;
 }
 
+export declare interface ImageErrorContext {
+    url: string;
+    index: number;
+    totalImages: number;
+}
+
 /**
  * ImageFilter.ts
  * Filters images by extension, designed for future extensibility
@@ -947,8 +1021,6 @@ export declare class ImageFilter {
     getAllowedExtensions(): string[];
 }
 
-export declare type ImageGalleryOptions = ImageCloudOptions;
-
 /**
  * Type definitions for Image Gallery Library
  */
@@ -962,6 +1034,14 @@ export declare interface ImageLayout {
     zIndex?: number;
 }
 
+export declare interface ImageLoadedContext {
+    element: HTMLImageElement;
+    url: string;
+    index: number;
+    totalImages: number;
+    loadTime: number;
+}
+
 /**
  * ImageLoader interface with consistent lifecycle pattern:
  * 1. Constructor - Initialize with required parameters, throw if missing
@@ -995,7 +1075,7 @@ export declare interface ImageLoader {
 /**
  * Image rotation configuration
  */
-declare interface ImageRotationConfig {
+export declare interface ImageRotationConfig {
     mode: ImageRotationMode;
     range?: ImageRotationRange;
 }
@@ -1016,7 +1096,7 @@ declare interface ImageRotationRange {
 /**
  * Image sizing configuration
  */
-declare interface ImageSizingConfig {
+export declare interface ImageSizingConfig {
     mode: SizingMode;
     height?: number | FixedModeHeight;
     minSize?: number;
@@ -1024,7 +1104,14 @@ declare interface ImageSizingConfig {
     variance?: ImageVarianceConfig;
 }
 
-declare interface ImageStyleState {
+export declare interface ImageStateContext {
+    element: HTMLElement;
+    index: number;
+    url: string;
+    layout: ImageLayout;
+}
+
+export declare interface ImageStyleState {
     className?: string | string[];
     border?: BorderConfig;
     borderTop?: Partial<BorderConfig>;
@@ -1045,7 +1132,7 @@ declare interface ImageStyleState {
     clipPath?: ClipPathShape | string | ClipPathConfig;
 }
 
-declare interface ImageStylingConfig {
+export declare interface ImageStylingConfig {
     default?: ImageStyleState;
     hover?: Partial<ImageStyleState>;
     focused?: Partial<ImageStyleState>;
@@ -1066,7 +1153,7 @@ declare interface ImageVarianceConfig {
  */
 export declare function injectFunctionalStyles(): void;
 
-declare interface InteractionConfig {
+export declare interface InteractionConfig {
     focus: FocusInteractionConfig;
     navigation?: NavigationInteractionConfig;
     dragging?: boolean;
@@ -1074,6 +1161,13 @@ declare interface InteractionConfig {
 
 export declare type LayoutAlgorithm = 'random' | 'radial' | 'grid' | 'spiral' | 'cluster' | 'wave' | 'honeycomb';
 
+export declare interface LayoutCompleteContext {
+    layouts: ImageLayout[];
+    containerBounds: ContainerBounds;
+    algorithm: LayoutAlgorithm;
+    imageCount: number;
+}
+
 export declare interface LayoutConfig {
     algorithm: LayoutAlgorithm;
     spacing: LayoutSpacingConfig;
@@ -1169,13 +1263,19 @@ declare interface LayoutSpacingConfig {
 
 export declare type LoaderEntry = StaticLoaderEntry | GoogleDriveLoaderEntry;
 
+export declare interface LoadProgressContext {
+    loaded: number;
+    failed: number;
+    total: number;
+    percent: number;
+}
+
 declare interface NavigationInteractionConfig {
     keyboard?: boolean;
     swipe?: boolean;
-    mouseWheel?: boolean;
 }
 
-declare interface OutlineConfig {
+export declare interface OutlineConfig {
     width?: number;
     color?: string;
     style?: BorderStyle;
@@ -1193,6 +1293,7 @@ declare interface PathAnimationOptions {
     rotation: number;
     scale: number;
     onComplete?: () => void;
+    onProgress?: (t: number, elapsed: number, current: EntryCurrentState) => void;
     rotationConfig?: EntryRotationConfig;
     startRotation?: number;
     scaleConfig?: EntryScaleConfig;
@@ -1208,7 +1309,7 @@ declare interface Point {
     y: number;
 }
 
-declare interface RadialAlgorithmConfig {
+export declare interface RadialAlgorithmConfig {
     tightness: number;
 }
 
@@ -1501,7 +1602,7 @@ export declare interface UIConfig {
  */
 export declare const WAVE_PATH_PRESETS: Record<WavePathPreset, WavePathConfig>;
 
-declare interface WaveAlgorithmConfig {
+export declare interface WaveAlgorithmConfig {
     rows: number;
     amplitude: number;
     frequency: number;