@frybynite/image-cloud 0.9.6 → 0.10.0

package/dist/index.d.ts

@@ -883,6 +883,8 @@ declare class ImageCloud {
 export { ImageCloud }
 export { ImageCloud as ImageGallery }
 
+export declare function imageCloud(options: ImageCloudOptions): Promise<ImageCloud>;
+
 export declare interface ImageCloudConfig {
     loaders: LoaderEntry[];
     config: ConfigSection;

package/dist/react.d.ts

@@ -883,6 +883,8 @@ declare class ImageCloud {
 export { ImageCloud }
 export { ImageCloud as ImageGallery }
 
+export declare function imageCloud(options: ImageCloudOptions): Promise<ImageCloud>;
+
 export declare interface ImageCloudConfig {
     loaders: LoaderEntry[];
     config: ConfigSection;

package/dist/react.js

@@ -6,16 +6,16 @@ const mt = Object.freeze({
   md: "0 4px 16px rgba(0,0,0,0.4)",
   lg: "0 8px 32px rgba(0,0,0,0.5)",
   glow: "0 0 30px rgba(255,255,255,0.6)"
-}), Rt = Object.freeze({
+}), Ct = Object.freeze({
   energetic: Object.freeze({ overshoot: 0.25, bounces: 2, decayRatio: 0.5 }),
   playful: Object.freeze({ overshoot: 0.15, bounces: 1, decayRatio: 0.5 }),
   subtle: Object.freeze({ overshoot: 0.08, bounces: 1, decayRatio: 0.5 })
-}), At = Object.freeze({
+}), Rt = Object.freeze({
   gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
   bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
   wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
   snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
-}), Ct = Object.freeze({
+}), At = Object.freeze({
   gentle: Object.freeze({ amplitude: 30, frequency: 1.5, decay: !0, decayRate: 0.9, phase: 0 }),
   playful: Object.freeze({ amplitude: 50, frequency: 2.5, decay: !0, decayRate: 0.7, phase: 0 }),
   serpentine: Object.freeze({ amplitude: 60, frequency: 3, decay: !1, decayRate: 1, phase: 0 }),
@@ -26,7 +26,7 @@ const mt = Object.freeze({
   mode: "none"
 }), Et = Object.freeze({
   mode: "none"
-}), Mt = Object.freeze({
+}), Ft = Object.freeze({
   default: Object.freeze({
     border: Object.freeze({
       width: 0,
@@ -96,7 +96,7 @@ const mt = Object.freeze({
   enabled: !1,
   centers: !1,
   loaders: !1
-}), Vt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Jt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Kt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Zt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), R = Object.freeze({
+}), Vt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Jt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Kt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Zt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), C = Object.freeze({
   // Loader configuration (always an array, composite behavior is implicit)
   loaders: [],
   // Shared loader settings and debug config
@@ -188,7 +188,7 @@ const mt = Object.freeze({
     showFocusOutline: !1
   }),
   // Image styling
-  styling: Mt
+  styling: Ft
 });
 function Z(o, t) {
   if (!o) return t || {};
@@ -277,59 +277,59 @@ function ne(o = {}) {
     loaders: n,
     config: r,
     image: te(zt, e),
-    layout: { ...R.layout },
-    animation: { ...R.animation },
-    interaction: { ...R.interaction },
-    ui: { ...R.ui },
-    styling: Qt(Mt, o.styling)
+    layout: { ...C.layout },
+    animation: { ...C.animation },
+    interaction: { ...C.interaction },
+    ui: { ...C.ui },
+    styling: Qt(Ft, o.styling)
   };
   o.layout && (a.layout = {
-    ...R.layout,
+    ...C.layout,
     ...o.layout
   }, o.layout.responsive && (a.layout.responsive = {
-    ...R.layout.responsive,
-    mobile: o.layout.responsive.mobile ? { ...R.layout.responsive.mobile, ...o.layout.responsive.mobile } : R.layout.responsive.mobile,
-    tablet: o.layout.responsive.tablet ? { ...R.layout.responsive.tablet, ...o.layout.responsive.tablet } : R.layout.responsive.tablet
+    ...C.layout.responsive,
+    mobile: o.layout.responsive.mobile ? { ...C.layout.responsive.mobile, ...o.layout.responsive.mobile } : C.layout.responsive.mobile,
+    tablet: o.layout.responsive.tablet ? { ...C.layout.responsive.tablet, ...o.layout.responsive.tablet } : C.layout.responsive.tablet
   }), o.layout.spacing && (a.layout.spacing = {
-    ...R.layout.spacing,
+    ...C.layout.spacing,
     ...o.layout.spacing
   })), o.animation && (a.animation = {
-    ...R.animation,
+    ...C.animation,
     ...o.animation
   }, o.animation.easing && (a.animation.easing = {
-    ...R.animation.easing,
+    ...C.animation.easing,
     ...o.animation.easing
   }), o.animation.queue && (a.animation.queue = {
-    ...R.animation.queue,
+    ...C.animation.queue,
     ...o.animation.queue
   }), o.animation.entry && (a.animation.entry = {
-    ...R.animation.entry,
+    ...C.animation.entry,
     ...o.animation.entry,
     start: o.animation.entry.start ? {
-      ...R.animation.entry.start,
+      ...C.animation.entry.start,
       ...o.animation.entry.start,
-      circular: o.animation.entry.start.circular ? { ...R.animation.entry.start.circular, ...o.animation.entry.start.circular } : R.animation.entry.start.circular
-    } : R.animation.entry.start,
-    timing: o.animation.entry.timing ? { ...R.animation.entry.timing, ...o.animation.entry.timing } : R.animation.entry.timing,
-    path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : R.animation.entry.path,
-    rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : R.animation.entry.rotation,
-    scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : R.animation.entry.scale
+      circular: o.animation.entry.start.circular ? { ...C.animation.entry.start.circular, ...o.animation.entry.start.circular } : C.animation.entry.start.circular
+    } : C.animation.entry.start,
+    timing: o.animation.entry.timing ? { ...C.animation.entry.timing, ...o.animation.entry.timing } : C.animation.entry.timing,
+    path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : C.animation.entry.path,
+    rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : C.animation.entry.rotation,
+    scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : C.animation.entry.scale
   }), o.animation.idle && (a.animation.idle = {
     ...$t,
     ...o.animation.idle
   })), o.interaction && (a.interaction = {
-    ...R.interaction,
+    ...C.interaction,
     ...o.interaction
   }, o.interaction.focus && (a.interaction.focus = {
-    ...R.interaction.focus,
+    ...C.interaction.focus,
     ...o.interaction.focus
   }), o.interaction.navigation && (a.interaction.navigation = {
-    ...R.interaction.navigation,
+    ...C.interaction.navigation,
     ...o.interaction.navigation
   }));
   const c = o.rendering?.ui;
   if (c && console.warn("[ImageCloud] rendering.ui is deprecated. Use top-level ui instead."), a.ui = {
-    ...R.ui,
+    ...C.ui,
     ...c,
     ...o.ui
   }, a.config.debug = {
@@ -347,13 +347,13 @@ function ne(o = {}) {
   return a;
 }
 function oe(o, t) {
-  return { ...o ? Rt[o] : Rt.playful, ...t };
+  return { ...o ? Ct[o] : Ct.playful, ...t };
 }
 function se(o, t) {
-  return { ...o ? At[o] : At.gentle, ...t };
+  return { ...o ? Rt[o] : Rt.gentle, ...t };
 }
 function ae(o, t) {
-  return { ...o ? Ct[o] : Ct.gentle, ...t };
+  return { ...o ? At[o] : At.gentle, ...t };
 }
 class re {
   constructor(t) {
@@ -621,7 +621,7 @@ function me(o) {
   }
   const z = performance.now(), L = -r / 2, _ = -a / 2;
   function O(H) {
-    const N = H - z, A = Math.min(N / s, 1);
+    const N = H - z, R = Math.min(N / s, 1);
     let D;
     switch (p) {
       case "bounce": {
@@ -629,7 +629,7 @@ function me(o) {
           n.bouncePreset,
           n.bounce
         );
-        D = ce(A, i, e, k);
+        D = ce(R, i, e, k);
         break;
       }
       case "elastic": {
@@ -637,7 +637,7 @@ function me(o) {
           n.elasticPreset,
           n.elastic
         );
-        D = he(A, i, e, k);
+        D = he(R, i, e, k);
         break;
       }
       case "wave": {
@@ -645,20 +645,20 @@ function me(o) {
           n.wavePreset,
           n.wave
         );
-        D = de(A, i, e, k);
+        D = de(R, i, e, k);
         break;
       }
       default:
         D = {
-          x: J(i.x, e.x, A),
-          y: J(i.y, e.y, A)
+          x: J(i.x, e.x, R),
+          y: J(i.y, e.y, R)
         };
     }
     const W = D.x - e.x, U = D.y - e.y;
-    let F;
-    m ? F = fe(A, c, y) : f ? F = J(d, c, A) : F = c;
-    let C;
-    S ? C = ge(A, l, w) : v ? C = J(b, l, A) : C = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${F}deg) scale(${C})`, A < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
+    let M;
+    m ? M = fe(R, c, y) : f ? M = J(d, c, R) : M = c;
+    let A;
+    S ? A = ge(R, l, w) : v ? A = J(b, l, R) : A = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${M}deg) scale(${A})`, R < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
   }
   requestAnimationFrame(O);
 }
@@ -1275,22 +1275,22 @@ class we {
     }
     let w = 1, I = 1;
     for (; w < t; ) {
-      const z = I / E, L = b > 0 ? 1 - z * b * 0.5 : 1, _ = Math.max(f * 0.8, S / E * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), A = this.estimateWidth(f), D = Math.floor(N / (A * 0.7));
+      const z = I / E, L = b > 0 ? 1 - z * b * 0.5 : 1, _ = Math.max(f * 0.8, S / E * 1.5 / p.tightness), O = I * _, H = O * 1.5, N = Math.PI * (3 * (H + O) - Math.sqrt((3 * H + O) * (H + 3 * O))), R = this.estimateWidth(f), D = Math.floor(N / (R * 0.7));
       if (D === 0) {
         I++;
         continue;
       }
       const W = 2 * Math.PI / D, U = I * (20 * Math.PI / 180);
-      for (let F = 0; F < D && w < t; F++) {
-        const C = F * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
-        let $ = m + Math.cos(C) * H, M = y + Math.sin(C) * O;
+      for (let M = 0; M < D && w < t; M++) {
+        const A = M * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
+        let $ = m + Math.cos(A) * H, F = y + Math.sin(A) * O;
         const P = T * 1.5 / 2, B = T / 2;
-        $ - P < v ? $ = v + P : $ + P > s - v && ($ = s - v - P), M - B < v ? M = v + B : M + B > r - v && (M = r - v - B);
+        $ - P < v ? $ = v + P : $ + P > s - v && ($ = s - v - P), F - B < v ? F = v + B : F + B > r - v && (F = r - v - B);
         const Y = c === "random" ? this.random(l, u) : 0;
         n.push({
           id: w,
           x: $,
-          y: M,
+          y: F,
           rotation: Y,
           scale: q,
           baseSize: T,
@@ -1367,27 +1367,27 @@ class Se {
       p,
       l,
       a
-    ), y = a.stagger === "row", E = a.stagger === "column", v = y ? f + 0.5 : f, S = E ? m + 0.5 : m, w = (b - a.gap * (f - 1)) / v, I = (p - a.gap * (m - 1)) / S, z = y ? w / 2 : 0, L = E ? I / 2 : 0, _ = 1 + a.overlap, O = Math.min(w, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = f * w + (f - 1) * a.gap + z, A = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - A) / 2, U = f * m, F = a.columns !== "auto" && a.rows !== "auto", C = F && t > U;
+    ), y = a.stagger === "row", E = a.stagger === "column", v = y ? f + 0.5 : f, S = E ? m + 0.5 : m, w = (b - a.gap * (f - 1)) / v, I = (p - a.gap * (m - 1)) / S, z = y ? w / 2 : 0, L = E ? I / 2 : 0, _ = 1 + a.overlap, O = Math.min(w, I) * _, H = e.fixedHeight ? Math.min(e.fixedHeight, O) : O, N = f * w + (f - 1) * a.gap + z, R = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - R) / 2, U = f * m, M = a.columns !== "auto" && a.rows !== "auto", A = M && t > U;
     typeof window < "u" && (window.__gridOverflowDebug = {
       gridConfigColumns: a.columns,
       gridConfigRows: a.rows,
       columns: f,
       rows: m,
       cellCount: U,
-      hasFixedGrid: F,
+      hasFixedGrid: M,
       imageCount: t,
-      isOverflowMode: C
+      isOverflowMode: A
     });
-    const k = C ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
+    const k = A ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
     for (let T = 0; T < t; T++) {
-      let $, M, X = 0;
-      if (C && T >= U) {
+      let $, F, X = 0;
+      if (A && T >= U) {
         const G = T - U, j = G % U;
-        X = Math.floor(G / U) + 1, k[j]++, a.fillDirection === "row" ? ($ = j % f, M = Math.floor(j / f)) : (M = j % m, $ = Math.floor(j / m));
+        X = Math.floor(G / U) + 1, k[j]++, a.fillDirection === "row" ? ($ = j % f, F = Math.floor(j / f)) : (F = j % m, $ = Math.floor(j / m));
       } else
-        a.fillDirection === "row" ? ($ = T % f, M = Math.floor(T / f)) : (M = T % m, $ = Math.floor(T / m));
-      let P = D + $ * (w + a.gap) + w / 2, B = W + M * (I + a.gap) + I / 2;
-      if (a.stagger === "row" && M % 2 === 1 ? P += w / 2 : a.stagger === "column" && $ % 2 === 1 && (B += I / 2), X > 0) {
+        a.fillDirection === "row" ? ($ = T % f, F = Math.floor(T / f)) : (F = T % m, $ = Math.floor(T / m));
+      let P = D + $ * (w + a.gap) + w / 2, B = W + F * (I + a.gap) + I / 2;
+      if (a.stagger === "row" && F % 2 === 1 ? P += w / 2 : a.stagger === "column" && $ % 2 === 1 && (B += I / 2), X > 0) {
         const G = (X - 1) % Tt.length, j = Tt[G];
         P += j.x * q, B += j.y * q;
       }
@@ -1396,9 +1396,9 @@ class Se {
         P += this.random(-G, G), B += this.random(-j, j);
       }
       let Y = P, V = B;
-      if (!C && a.fillDirection === "row") {
+      if (!A && a.fillDirection === "row") {
         const G = t % f || f;
-        if (M === Math.floor((t - 1) / f) && G < f) {
+        if (F === Math.floor((t - 1) / f) && G < f) {
           const St = G * w + (G - 1) * a.gap;
           let gt = 0;
           a.alignment === "center" ? gt = (N - St) / 2 : a.alignment === "end" && (gt = N - St), Y += gt;
@@ -1412,7 +1412,7 @@ class Se {
         a.jitter > 0 ? ut = this.random(G * a.jitter, j * a.jitter) : ut = this.random(G, j);
       }
       let ft;
-      C && X > 0 ? ft = 50 - X : ft = C ? 100 + T : T + 1, n.push({
+      A && X > 0 ? ft = 50 - X : ft = A ? 100 + T : T + 1, n.push({
         id: T,
         x: Y,
         y: V,
@@ -1449,14 +1449,14 @@ class Se {
     return Math.random() * (i - t) + t;
   }
 }
-const Ie = Math.PI * (3 - Math.sqrt(5)), Re = {
+const Ie = Math.PI * (3 - Math.sqrt(5)), Ce = {
   spiralType: "golden",
   direction: "counterclockwise",
   tightness: 1,
   scaleDecay: 0,
   startAngle: 0
 };
-class Ae {
+class Re {
   constructor(t, i = {}) {
     this.config = t, this.imageConfig = i;
   }
@@ -1468,7 +1468,7 @@ class Ae {
    * @returns Array of layout objects with position, rotation, scale
    */
   generate(t, i, e = {}) {
-    const n = [], { width: s, height: r } = i, a = { ...Re, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, y = r / 2, E = Math.min(
+    const n = [], { width: s, height: r } = i, a = { ...Ce, ...this.config.spiral }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.config.scaleDecay ?? a.scaleDecay, m = s / 2, y = r / 2, E = Math.min(
       m - c - l / 2,
       y - c - l / 2
     ), v = a.direction === "clockwise" ? -1 : 1;
@@ -1483,20 +1483,20 @@ class Ae {
         const P = S * 0.3 * a.tightness;
         w = P * v + a.startAngle, I = this.calculateLogarithmicRadius(P, t, E, a.tightness);
       }
-      const z = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / E, O = f > 0 ? 1 - _ * f * 0.5 : 1, H = p ? this.random(g, b) : 1, N = O * H, A = l * N, W = A * 1.5 / 2, U = A / 2, F = c + W, C = s - c - W, k = c + U, q = r - c - U, T = Math.max(F, Math.min(z, C)), $ = Math.max(k, Math.min(L, q));
-      let M = 0;
+      const z = m + Math.cos(w) * I, L = y + Math.sin(w) * I, _ = I / E, O = f > 0 ? 1 - _ * f * 0.5 : 1, H = p ? this.random(g, b) : 1, N = O * H, R = l * N, W = R * 1.5 / 2, U = R / 2, M = c + W, A = s - c - W, k = c + U, q = r - c - U, T = Math.max(M, Math.min(z, A)), $ = Math.max(k, Math.min(L, q));
+      let F = 0;
       if (u === "random") {
         const P = w * 180 / Math.PI % 360, B = this.random(h, d);
-        M = a.spiralType === "golden" ? B : P * 0.1 + B * 0.9;
-      } else u === "tangent" && (M = this.calculateSpiralTangent(w, I, a));
+        F = a.spiralType === "golden" ? B : P * 0.1 + B * 0.9;
+      } else u === "tangent" && (F = this.calculateSpiralTangent(w, I, a));
       const X = t - S;
       n.push({
         id: S,
         x: T,
         y: $,
-        rotation: M,
+        rotation: F,
         scale: N,
-        baseSize: A,
+        baseSize: R,
         zIndex: X
       });
     }
@@ -1550,7 +1550,7 @@ class Ae {
     return Math.random() * (i - t) + t;
   }
 }
-const Ce = {
+const Ae = {
   clusterCount: "auto",
   clusterSpread: 150,
   clusterSpacing: 200,
@@ -1570,7 +1570,7 @@ class Te {
    * @returns Array of layout objects with position, rotation, scale
    */
   generate(t, i, e = {}) {
-    const n = [], { width: s, height: r } = i, a = { ...Ce, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.calculateClusterCount(
+    const n = [], { width: s, height: r } = i, a = { ...Ae, ...this.config.cluster }, c = this.config.spacing.padding, l = e.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", h = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, g = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = g !== 1 || b !== 1, f = this.calculateClusterCount(
       t,
       a.clusterCount,
       s,
@@ -1593,15 +1593,15 @@ class Te {
         if (a.distribution === "gaussian")
           z = this.gaussianRandom() * S.spread, L = this.gaussianRandom() * S.spread;
         else {
-          const M = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
-          z = Math.cos(M) * X, L = Math.sin(M) * X;
+          const F = this.random(0, Math.PI * 2), X = this.random(0, S.spread);
+          z = Math.cos(F) * X, L = Math.sin(F) * X;
         }
         const _ = 1 + a.overlap * 0.5, O = 1 + a.overlap * 0.3;
         z /= _, L /= _;
-        const H = p ? this.random(g, b) : 1, N = O * H, A = l * N;
+        const H = p ? this.random(g, b) : 1, N = O * H, R = l * N;
         let D = S.x + z, W = S.y + L;
-        const F = A * 1.5 / 2, C = A / 2;
-        D = Math.max(c + F, Math.min(D, s - c - F)), W = Math.max(c + C, Math.min(W, r - c - C));
+        const M = R * 1.5 / 2, A = R / 2;
+        D = Math.max(c + M, Math.min(D, s - c - M)), W = Math.max(c + A, Math.min(W, r - c - A));
         const k = u === "random" ? this.random(h, d) : 0, T = Math.sqrt(z * z + L * L) / S.spread, $ = Math.round((1 - T) * 50) + 1;
         n.push({
           id: E,
@@ -1609,7 +1609,7 @@ class Te {
           y: W,
           rotation: k,
           scale: N,
-          baseSize: A,
+          baseSize: R,
           zIndex: $
         }), E++;
       }
@@ -1691,26 +1691,26 @@ class Le {
     const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, l = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, h = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, g = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || g !== 1, p = e.fixedHeight ?? a, f = {
       ...Wt,
       ...this.config.wave
-    }, { rows: m, amplitude: y, frequency: E, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = s - c - L, H = O - _, N = w > 1 ? H / (w - 1) : 0, A = c + y + p / 2, D = r - c - y - p / 2, W = D - A, U = m > 1 ? W / (m - 1) : 0;
-    let F = 0;
-    for (let C = 0; C < m && F < t; C++) {
-      const k = m === 1 ? (A + D) / 2 : A + C * U;
+    }, { rows: m, amplitude: y, frequency: E, phaseShift: v, synchronization: S } = f, w = Math.ceil(t / m), L = p * 1.5 / 2, _ = c + L, O = s - c - L, H = O - _, N = w > 1 ? H / (w - 1) : 0, R = c + y + p / 2, D = r - c - y - p / 2, W = D - R, U = m > 1 ? W / (m - 1) : 0;
+    let M = 0;
+    for (let A = 0; A < m && M < t; A++) {
+      const k = m === 1 ? (R + D) / 2 : R + A * U;
       let q = 0;
-      S === "offset" ? q = C * v : S === "alternating" && (q = C * Math.PI);
-      for (let T = 0; T < w && F < t; T++) {
-        const $ = w === 1 ? (_ + O) / 2 : _ + T * N, M = this.calculateWaveY($, s, y, E, q), X = $, P = k + M, B = b ? this.random(d, g) : 1, Y = p * B;
+      S === "offset" ? q = A * v : S === "alternating" && (q = A * Math.PI);
+      for (let T = 0; T < w && M < t; T++) {
+        const $ = w === 1 ? (_ + O) / 2 : _ + T * N, F = this.calculateWaveY($, s, y, E, q), X = $, P = k + F, B = b ? this.random(d, g) : 1, Y = p * B;
         let V = 0;
         l === "tangent" ? V = this.calculateRotation($, s, y, E, q) : l === "random" && (V = this.random(u, h));
         const K = Y * 1.5 / 2, lt = Y / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
         n.push({
-          id: F,
+          id: M,
           x: Math.max(nt, Math.min(X, ot)),
           y: Math.max(ht, Math.min(P, dt)),
           rotation: V,
           scale: B,
           baseSize: Y,
-          zIndex: F + 1
-        }), F++;
+          zIndex: M + 1
+        }), M++;
       }
     }
     return n;
@@ -1766,11 +1766,11 @@ const wt = 100, Q = 100 / Math.sqrt(3), xt = [
   // lower-left
   [0, 50]
   // left
-], Fe = xt[1][0] / wt, Me = xt[2][1] / wt;
+], Me = xt[1][0] / wt, Fe = xt[2][1] / wt;
 function ze(o) {
   return {
-    colStep: Fe * o,
-    rowOffset: Me * o
+    colStep: Me * o,
+    rowOffset: Fe * o
   };
 }
 function Oe(o, t, i, e, n, s) {
@@ -1845,7 +1845,7 @@ class _e {
       case "grid":
         return new Se(this.config, this.imageConfig);
       case "spiral":
-        return new Ae(this.config, this.imageConfig);
+        return new Re(this.config, this.imageConfig);
       case "cluster":
         return new Te(this.config, this.imageConfig);
       case "wave":
@@ -2105,7 +2105,7 @@ function pt(o, t) {
     e.trim() && o.classList.remove(e.trim());
   });
 }
-const Ft = {
+const Mt = {
   UNFOCUSING: 999,
   FOCUSING: 1e3
 };
@@ -2241,7 +2241,7 @@ class Ge {
     const r = t.style.zIndex || "", a = t.offsetWidth, c = t.offsetHeight, l = this.calculateFocusDimensions(a, c, i), u = this.calculateFocusTransform(i, e);
     this.animationEngine.cancelAllAnimations(t);
     const h = this.config.animationDuration ?? 600;
-    this.applyFocusedStyling(t, Ft.FOCUSING);
+    this.applyFocusedStyling(t, Mt.FOCUSING);
     const d = n ?? {
       x: 0,
       y: 0,
@@ -2290,7 +2290,7 @@ class Ge {
    * @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
    */
   startUnfocusAnimation(t, i, e, n) {
-    t.style.zIndex = String(Ft.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
+    t.style.zIndex = String(Mt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
     const s = this.config.animationDuration ?? 600;
     t.classList.remove("fbn-ic-focused"), pt(t, this.focusedClassName);
     const r = e ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, a = n?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, c = n?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, l = {
@@ -3257,7 +3257,7 @@ let oi = class {
       layout: this.fullConfig.layout,
       image: this.fullConfig.image
     }), this.zoomEngine = new Ge(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
-    const i = this.fullConfig.animation.entry || R.animation.entry;
+    const i = this.fullConfig.animation.entry || C.animation.entry;
     this.entryAnimationEngine = new ye(
       i,
       this.fullConfig.layout.algorithm
@@ -3294,7 +3294,7 @@ let oi = class {
   createLoader() {
     const t = this.fullConfig.loaders, i = this.fullConfig.config.loaders ?? {};
     if (!t || t.length === 0)
-      throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
+      throw new Error("No loaders configured. Provide `images`, `loaders`, or both.\n  Example: imageCloud({ container: 'id', images: ['https://...'] })");
     const e = t.map((n) => this.createLoaderFromEntry(n, i));
     return e.length === 1 ? e[0] : new ti({
       loaders: e,
@@ -3333,7 +3333,7 @@ let oi = class {
       if (ni(), this.containerRef)
         this.containerEl = this.containerRef;
       else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
-        throw new Error(`Container #${this.containerId} not found`);
+        throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
       this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
         onNext: () => this.navigateToNextImage(),
         onPrev: () => this.navigateToPreviousImage(),
@@ -3343,7 +3343,7 @@ let oi = class {
         }
       })), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
     } catch (t) {
-      console.error("Gallery initialization failed:", t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
+      console.error(`ImageCloud initialization failed (container: "${this.containerId ?? "element"}"):`, t), this.errorEl && t instanceof Error && this.showError("Gallery failed to initialize: " + t.message);
     }
   }
   setupUI() {