@frybynite/image-cloud 0.9.6 → 0.10.1

package/dist/vue.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/vue.js

@@ -5,11 +5,11 @@ 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)"
-}), At = 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 })
-}), Ct = Object.freeze({
+}), At = 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 }),
@@ -95,7 +95,7 @@ const mt = Object.freeze({
   enabled: !1,
   centers: !1,
   loaders: !1
-}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = Object.freeze({ speed: 4e3, direction: "clockwise" }), $t = Object.freeze({ type: "none" }), A = Object.freeze({
+}), Jt = Object.freeze({ maxAngle: 5, speed: 2e3, sync: "random" }), Kt = Object.freeze({ minScale: 0.95, maxScale: 1.05, speed: 2400, sync: "random" }), Zt = Object.freeze({ onRatio: 0.7, speed: 3e3, style: "snap" }), Qt = 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
@@ -276,59 +276,59 @@ function oe(o = {}) {
     loaders: n,
     config: r,
     image: ee(zt, e),
-    layout: { ...A.layout },
-    animation: { ...A.animation },
-    interaction: { ...A.interaction },
-    ui: { ...A.ui },
+    layout: { ...C.layout },
+    animation: { ...C.animation },
+    interaction: { ...C.interaction },
+    ui: { ...C.ui },
     styling: te(Ft, o.styling)
   };
   o.layout && (a.layout = {
-    ...A.layout,
+    ...C.layout,
     ...o.layout
   }, o.layout.responsive && (a.layout.responsive = {
-    ...A.layout.responsive,
-    mobile: o.layout.responsive.mobile ? { ...A.layout.responsive.mobile, ...o.layout.responsive.mobile } : A.layout.responsive.mobile,
-    tablet: o.layout.responsive.tablet ? { ...A.layout.responsive.tablet, ...o.layout.responsive.tablet } : A.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 = {
-    ...A.layout.spacing,
+    ...C.layout.spacing,
     ...o.layout.spacing
   })), o.animation && (a.animation = {
-    ...A.animation,
+    ...C.animation,
     ...o.animation
   }, o.animation.easing && (a.animation.easing = {
-    ...A.animation.easing,
+    ...C.animation.easing,
     ...o.animation.easing
   }), o.animation.queue && (a.animation.queue = {
-    ...A.animation.queue,
+    ...C.animation.queue,
     ...o.animation.queue
   }), o.animation.entry && (a.animation.entry = {
-    ...A.animation.entry,
+    ...C.animation.entry,
     ...o.animation.entry,
     start: o.animation.entry.start ? {
-      ...A.animation.entry.start,
+      ...C.animation.entry.start,
       ...o.animation.entry.start,
-      circular: o.animation.entry.start.circular ? { ...A.animation.entry.start.circular, ...o.animation.entry.start.circular } : A.animation.entry.start.circular
-    } : A.animation.entry.start,
-    timing: o.animation.entry.timing ? { ...A.animation.entry.timing, ...o.animation.entry.timing } : A.animation.entry.timing,
-    path: o.animation.entry.path ? { ...yt, ...o.animation.entry.path } : A.animation.entry.path,
-    rotation: o.animation.entry.rotation ? { ...vt, ...o.animation.entry.rotation } : A.animation.entry.rotation,
-    scale: o.animation.entry.scale ? { ...Et, ...o.animation.entry.scale } : A.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 = {
-    ...A.interaction,
+    ...C.interaction,
     ...o.interaction
   }, o.interaction.focus && (a.interaction.focus = {
-    ...A.interaction.focus,
+    ...C.interaction.focus,
     ...o.interaction.focus
   }), o.interaction.navigation && (a.interaction.navigation = {
-    ...A.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 = {
-    ...A.ui,
+    ...C.ui,
     ...c,
     ...o.ui
   }, a.config.debug = {
@@ -346,10 +346,10 @@ function oe(o = {}) {
   return a;
 }
 function se(o, t) {
-  return { ...o ? At[o] : At.playful, ...t };
+  return { ...o ? Ct[o] : Ct.playful, ...t };
 }
 function ae(o, t) {
-  return { ...o ? Ct[o] : Ct.gentle, ...t };
+  return { ...o ? At[o] : At.gentle, ...t };
 }
 function re(o, t) {
   return { ...o ? Rt[o] : Rt.gentle, ...t };
@@ -620,7 +620,7 @@ function pe(o) {
   }
   const z = performance.now(), L = -r / 2, _ = -a / 2;
   function O(H) {
-    const N = H - z, C = Math.min(N / s, 1);
+    const N = H - z, A = Math.min(N / s, 1);
     let D;
     switch (p) {
       case "bounce": {
@@ -628,7 +628,7 @@ function pe(o) {
           n.bouncePreset,
           n.bounce
         );
-        D = le(C, i, e, k);
+        D = le(A, i, e, k);
         break;
       }
       case "elastic": {
@@ -636,7 +636,7 @@ function pe(o) {
           n.elasticPreset,
           n.elastic
         );
-        D = de(C, i, e, k);
+        D = de(A, i, e, k);
         break;
       }
       case "wave": {
@@ -644,20 +644,20 @@ function pe(o) {
           n.wavePreset,
           n.wave
         );
-        D = ue(C, i, e, k);
+        D = ue(A, i, e, k);
         break;
       }
       default:
         D = {
-          x: J(i.x, e.x, C),
-          y: J(i.y, e.y, C)
+          x: J(i.x, e.x, A),
+          y: J(i.y, e.y, A)
         };
     }
     const W = D.x - e.x, U = D.y - e.y;
     let M;
-    m ? M = ge(C, c, y) : f ? M = J(d, c, C) : M = c;
+    m ? M = ge(A, c, y) : f ? M = J(d, c, A) : M = c;
     let R;
-    S ? R = me(C, l, w) : v ? R = J(b, l, C) : R = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${M}deg) scale(${R})`, C < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
+    S ? R = me(A, l, w) : v ? R = J(b, l, A) : R = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${M}deg) scale(${R})`, A < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
   }
   requestAnimationFrame(O);
 }
@@ -1274,7 +1274,7 @@ class xe {
     }
     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))), C = this.estimateWidth(f), D = Math.floor(N / (C * 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))), A = this.estimateWidth(f), D = Math.floor(N / (A * 0.7));
       if (D === 0) {
         I++;
         continue;
@@ -1366,7 +1366,7 @@ class Ie {
       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, C = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - C) / 2, U = f * m, M = a.columns !== "auto" && a.rows !== "auto", R = M && 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, A = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - A) / 2, U = f * m, M = a.columns !== "auto" && a.rows !== "auto", R = M && t > U;
     typeof window < "u" && (window.__gridOverflowDebug = {
       gridConfigColumns: a.columns,
       gridConfigRows: a.rows,
@@ -1448,7 +1448,7 @@ class Ie {
     return Math.random() * (i - t) + t;
   }
 }
-const Ae = Math.PI * (3 - Math.sqrt(5)), Ce = {
+const Ce = Math.PI * (3 - Math.sqrt(5)), Ae = {
   spiralType: "golden",
   direction: "counterclockwise",
   tightness: 1,
@@ -1467,14 +1467,14 @@ class Re {
    * @returns Array of layout objects with position, rotation, scale
    */
   generate(t, i, e = {}) {
-    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(
+    const n = [], { width: s, height: r } = i, a = { ...Ae, ...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;
     for (let S = 0; S < t; S++) {
       let w, I;
       if (a.spiralType === "golden")
-        w = S * Ae * v + a.startAngle, I = this.calculateGoldenRadius(S, t, E, a.tightness);
+        w = S * Ce * v + a.startAngle, I = this.calculateGoldenRadius(S, t, E, a.tightness);
       else if (a.spiralType === "archimedean") {
         const P = S * 0.5 * a.tightness;
         w = P * v + a.startAngle, I = this.calculateArchimedeanRadius(P, t, E, a.tightness);
@@ -1482,7 +1482,7 @@ class Re {
         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, C = l * N, W = C * 1.5 / 2, U = C / 2, M = c + W, R = s - c - W, k = c + U, q = r - c - U, T = Math.max(M, Math.min(z, R)), $ = Math.max(k, Math.min(L, q));
+      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, M = c + W, R = s - c - W, k = c + U, q = r - c - U, T = Math.max(M, Math.min(z, R)), $ = 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);
@@ -1495,7 +1495,7 @@ class Re {
         y: $,
         rotation: F,
         scale: N,
-        baseSize: C,
+        baseSize: A,
         zIndex: X
       });
     }
@@ -1597,9 +1597,9 @@ class Le {
         }
         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, C = l * N;
+        const H = p ? this.random(g, b) : 1, N = O * H, A = l * N;
         let D = S.x + z, W = S.y + L;
-        const M = C * 1.5 / 2, R = C / 2;
+        const M = A * 1.5 / 2, R = A / 2;
         D = Math.max(c + M, Math.min(D, s - c - M)), W = Math.max(c + R, Math.min(W, r - c - R));
         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({
@@ -1608,7 +1608,7 @@ class Le {
           y: W,
           rotation: k,
           scale: N,
-          baseSize: C,
+          baseSize: A,
           zIndex: $
         }), E++;
       }
@@ -1690,10 +1690,10 @@ class Me {
     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 = {
       ...Gt,
       ...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, C = c + y + p / 2, D = r - c - y - p / 2, W = D - C, U = m > 1 ? W / (m - 1) : 0;
+    }, { 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 M = 0;
     for (let R = 0; R < m && M < t; R++) {
-      const k = m === 1 ? (C + D) / 2 : C + R * U;
+      const k = m === 1 ? (A + D) / 2 : A + R * U;
       let q = 0;
       S === "offset" ? q = R * v : S === "alternating" && (q = R * Math.PI);
       for (let T = 0; T < w && M < t; T++) {
@@ -3256,7 +3256,7 @@ let si = class {
       layout: this.fullConfig.layout,
       image: this.fullConfig.image
     }), this.zoomEngine = new qe(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 || A.animation.entry;
+    const i = this.fullConfig.animation.entry || C.animation.entry;
     this.entryAnimationEngine = new ve(
       i,
       this.fullConfig.layout.algorithm
@@ -3293,7 +3293,7 @@ let si = 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 ei({
       loaders: e,
@@ -3332,7 +3332,7 @@ let si = class {
       if (oi(), 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(),
@@ -3342,7 +3342,7 @@ let si = 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() {