@frybynite/image-cloud 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,9 +1,3 @@
-declare interface AdaptiveSizingConfig {
-    enabled: boolean;
-    minSize: number;
-    maxSize: number;
-}
-
 declare interface AdaptiveSizingResult {
     height: number;
 }
@@ -530,12 +524,28 @@ declare interface FilterConfig {
     dropShadow?: DropShadowConfig | string;
 }
 
+/**
+ * Fixed mode height configuration with responsive breakpoints
+ * At least one of mobile, tablet, or screen is required
+ */
+declare interface FixedModeHeight {
+    mobile?: number;
+    tablet?: number;
+    screen?: number;
+}
+
 declare interface FocusInteractionConfig {
     scalePercent: number;
     zIndex: number;
     animationDuration?: number;
 }
 
+/**
+ * Minimal functional CSS required for the library to work.
+ * Injected automatically - no external CSS file needed.
+ */
+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-hidden {\n  display: none !important;\n}\n";
+
 export declare type GalleryConfig = ImageCloudConfig;
 
 declare interface GestureInteractionConfig {
@@ -917,9 +927,11 @@ declare interface ImageRotationRange {
  * Image sizing configuration
  */
 declare interface ImageSizingConfig {
-    baseHeight?: number | ResponsiveBaseHeight;
+    mode: SizingMode;
+    height?: number | FixedModeHeight;
+    minSize?: number;
+    maxSize?: number;
     variance?: ImageVarianceConfig;
-    scaleDecay?: number;
 }
 
 declare interface ImageStyleState {
@@ -957,6 +969,12 @@ declare interface ImageVarianceConfig {
     max: number;
 }
 
+/**
+ * Inject functional styles into document head.
+ * Idempotent - safe to call multiple times.
+ */
+export declare function injectFunctionalStyles(): void;
+
 declare interface InteractionConfig {
     focus: FocusInteractionConfig;
     navigation?: NavigationInteractionConfig;
@@ -967,8 +985,9 @@ export declare type LayoutAlgorithm = 'random' | 'radial' | 'grid' | 'spiral' |
 
 export declare interface LayoutConfig {
     algorithm: LayoutAlgorithm;
-    sizing: LayoutSizingConfig;
     spacing: LayoutSpacingConfig;
+    scaleDecay?: number;
+    responsive?: ResponsiveBreakpoints;
     targetCoverage?: number;
     densityFactor?: number;
     debugRadials?: boolean;
@@ -982,7 +1001,6 @@ export declare interface LayoutConfig {
 export declare class LayoutEngine {
     private config;
     private imageConfig;
-    private breakpoints;
     private layouts;
     private generator;
     constructor(config: LayoutEngineConfig);
@@ -1014,21 +1032,29 @@ export declare class LayoutEngine {
      * @param newConfig - Updated configuration
      */
     updateConfig(newConfig: Partial<LayoutEngineConfig>): void;
+    /**
+     * Get responsive breakpoints from layout config
+     */
+    private getBreakpoints;
+    /**
+     * Resolve breakpoint name based on viewport width
+     */
+    resolveBreakpoint(viewportWidth: number): 'mobile' | 'tablet' | 'screen';
     /**
      * Resolve the effective base height based on image config and current viewport
      * @param viewportWidth - Current viewport width
-     * @returns Resolved base height or undefined if should auto-calculate
+     * @returns Resolved base height or undefined if should auto-calculate (adaptive mode)
      */
     resolveBaseHeight(viewportWidth: number): number | undefined;
     /**
      * Calculate adaptive image size based on container dimensions and image count
      * @param containerBounds - Container dimensions {width, height}
      * @param imageCount - Number of images to display
-     * @param responsiveHeight - Current responsive breakpoint height (upper bound)
+     * @param maxHeight - Maximum height constraint (upper bound)
      * @param viewportWidth - Current viewport width for baseHeight resolution
      * @returns Calculated sizing result with height
      */
-    calculateAdaptiveSize(containerBounds: ContainerBounds, imageCount: number, responsiveHeight: number, viewportWidth: number): AdaptiveSizingResult;
+    calculateAdaptiveSize(containerBounds: ContainerBounds, imageCount: number, maxHeight: number, viewportWidth: number): AdaptiveSizingResult;
     /**
      * Utility: Clamp a value between min and max
      */
@@ -1038,16 +1064,6 @@ export declare class LayoutEngine {
 declare interface LayoutEngineConfig {
     layout: LayoutConfig;
     image: ImageConfig;
-    breakpoints?: {
-        mobile: number;
-        tablet?: number;
-    };
-}
-
-declare interface LayoutSizingConfig {
-    base: number;
-    responsive: ResponsiveHeight[];
-    adaptive?: AdaptiveSizingConfig;
 }
 
 declare interface LayoutSpacingConfig {
@@ -1176,13 +1192,16 @@ declare interface RenderingConfig {
 export declare function requiresJSAnimation(pathType: EntryPathType): boolean;
 
 /**
- * Responsive base height configuration
- * Can be a simple number or responsive breakpoint object
+ * Responsive breakpoints configuration for layout
+ * Defines viewport width thresholds for mobile and tablet
  */
-declare interface ResponsiveBaseHeight {
-    default: number;
-    tablet?: number;
-    mobile?: number;
+declare interface ResponsiveBreakpoints {
+    mobile: {
+        maxWidth: number;
+    };
+    tablet: {
+        maxWidth: number;
+    };
 }
 
 export declare interface ResponsiveHeight {
@@ -1201,6 +1220,14 @@ export declare interface ResponsiveRenderingConfig {
 
 declare type ShadowPreset = 'none' | 'sm' | 'md' | 'lg' | 'glow';
 
+/**
+ * Sizing mode:
+ * - 'fixed': single explicit height for all breakpoints
+ * - 'responsive': different heights per breakpoint (mobile/tablet/screen)
+ * - 'adaptive': auto-calculates based on container size and image count
+ */
+declare type SizingMode = 'fixed' | 'responsive' | 'adaptive';
+
 export declare interface SpiralAlgorithmConfig {
     spiralType: 'golden' | 'archimedean' | 'logarithmic';
     direction: 'clockwise' | 'counterclockwise';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frybynite/image-cloud",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "TypeScript image cloud library with custom loaders, various layouts, full images styling, what animation and zoom effects",
   "type": "module",
   "main": "./dist/image-cloud.umd.js",