@frybynite/image-cloud 0.9.6 → 0.10.0

package/dist/image-cloud.js

@@ -13,7 +13,7 @@ const mt = Object.freeze({
   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 })
-}), Rt = Object.freeze({
+}), Ct = 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 }),
@@ -24,7 +24,7 @@ const mt = Object.freeze({
   mode: "none"
 }), Et = Object.freeze({
   mode: "none"
-}), Ft = Object.freeze({
+}), Mt = Object.freeze({
   default: Object.freeze({
     border: Object.freeze({
       width: 0,
@@ -82,7 +82,7 @@ const mt = Object.freeze({
     min: -15,
     max: 15
   })
-}), Mt = Object.freeze({
+}), Ft = Object.freeze({
   sizing: Bt,
   rotation: jt
 }), zt = Object.freeze({
@@ -103,7 +103,7 @@ const mt = Object.freeze({
     debug: Ot
   }),
   // Image sizing and rotation configuration
-  image: Mt,
+  image: Ft,
   // Pattern-based layout configuration
   layout: Object.freeze({
     algorithm: "radial",
@@ -186,7 +186,7 @@ const mt = Object.freeze({
     showFocusOutline: !1
   }),
   // Image styling
-  styling: Ft
+  styling: Mt
 });
 function Z(o, t) {
   if (!o) return t || {};
@@ -274,12 +274,12 @@ function Zt(o = {}) {
   }, a = {
     loaders: n,
     config: r,
-    image: Vt(Mt, e),
+    image: Vt(Ft, e),
     layout: { ...A.layout },
     animation: { ...A.animation },
     interaction: { ...A.interaction },
     ui: { ...A.ui },
-    styling: Yt(Ft, o.styling)
+    styling: Yt(Mt, o.styling)
   };
   o.layout && (a.layout = {
     ...A.layout,
@@ -351,7 +351,7 @@ function te(o, t) {
   return { ...o ? At[o] : At.gentle, ...t };
 }
 function ee(o, t) {
-  return { ...o ? Rt[o] : Rt.gentle, ...t };
+  return { ...o ? Ct[o] : Ct.gentle, ...t };
 }
 class ie {
   constructor(t) {
@@ -619,7 +619,7 @@ function he(o) {
   }
   const z = performance.now(), L = -r / 2, _ = -a / 2;
   function O(H) {
-    const N = H - z, R = Math.min(N / s, 1);
+    const N = H - z, C = Math.min(N / s, 1);
     let D;
     switch (p) {
       case "bounce": {
@@ -627,7 +627,7 @@ function he(o) {
           n.bouncePreset,
           n.bounce
         );
-        D = ne(R, i, e, k);
+        D = ne(C, i, e, k);
         break;
       }
       case "elastic": {
@@ -635,7 +635,7 @@ function he(o) {
           n.elasticPreset,
           n.elastic
         );
-        D = se(R, i, e, k);
+        D = se(C, i, e, k);
         break;
       }
       case "wave": {
@@ -643,20 +643,20 @@ function he(o) {
           n.wavePreset,
           n.wave
         );
-        D = ae(R, i, e, k);
+        D = ae(C, i, e, k);
         break;
       }
       default:
         D = {
-          x: J(i.x, e.x, R),
-          y: J(i.y, e.y, R)
+          x: J(i.x, e.x, C),
+          y: J(i.y, e.y, C)
         };
     }
     const W = D.x - e.x, U = D.y - e.y;
-    let F;
-    m ? F = ce(R, c, y) : f ? F = J(d, c, R) : F = c;
-    let C;
-    S ? C = le(R, l, w) : v ? C = J(b, l, R) : C = l, t.style.transform = `translate(${L}px, ${_}px) translate(${W}px, ${U}px) rotate(${F}deg) scale(${C})`, R < 1 ? requestAnimationFrame(O) : (t.style.transform = `translate(${L}px, ${_}px) rotate(${c}deg) scale(${l})`, u && u());
+    let M;
+    m ? M = ce(C, c, y) : f ? M = J(d, c, C) : M = c;
+    let R;
+    S ? R = le(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());
   }
   requestAnimationFrame(O);
 }
@@ -1273,22 +1273,22 @@ class pe {
     }
     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))), R = this.estimateWidth(f), D = Math.floor(N / (R * 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))), C = this.estimateWidth(f), D = Math.floor(N / (C * 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 R = M * W + U, k = g ? this.random(h, d) : 1, q = L * k, T = f * q;
+        let $ = m + Math.cos(R) * H, F = y + Math.sin(R) * 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,
@@ -1329,7 +1329,7 @@ const be = {
   alignment: "center",
   gap: 10,
   overflowOffset: 0.25
-}, Ct = [
+}, Rt = [
   { x: 1, y: 1 },
   // bottom-right
   { x: -1, y: -1 },
@@ -1365,28 +1365,28 @@ class ye {
       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, R = m * I + (m - 1) * a.gap + L, D = c + (b - N) / 2, W = c + (p - R) / 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, 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;
     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: R
     });
-    const k = C ? new Array(U).fill(0) : [], q = Math.min(w, I) * a.overflowOffset;
+    const k = R ? 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 (R && 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) {
-        const G = (X - 1) % Ct.length, j = Ct[G];
+        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) % Rt.length, j = Rt[G];
         P += j.x * q, B += j.y * q;
       }
       if (a.jitter > 0) {
@@ -1394,9 +1394,9 @@ class ye {
         P += this.random(-G, G), B += this.random(-j, j);
       }
       let Y = P, V = B;
-      if (!C && a.fillDirection === "row") {
+      if (!R && 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;
@@ -1410,7 +1410,7 @@ class ye {
         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({
+      R && X > 0 ? ft = 50 - X : ft = R ? 100 + T : T + 1, n.push({
         id: T,
         x: Y,
         y: V,
@@ -1481,20 +1481,20 @@ class we {
         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, R = l * N, W = R * 1.5 / 2, U = R / 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, 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));
+      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: R,
+        baseSize: C,
         zIndex: X
       });
     }
@@ -1591,15 +1591,15 @@ class Se {
         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, R = l * N;
+        const H = p ? this.random(g, b) : 1, N = O * H, C = l * N;
         let D = S.x + z, W = S.y + L;
-        const F = R * 1.5 / 2, C = R / 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 = C * 1.5 / 2, R = C / 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({
           id: E,
@@ -1607,7 +1607,7 @@ class Se {
           y: W,
           rotation: k,
           scale: N,
-          baseSize: R,
+          baseSize: C,
           zIndex: $
         }), E++;
       }
@@ -1689,26 +1689,26 @@ class Ie {
     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 = {
       ...Ht,
       ...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, R = c + y + p / 2, D = r - c - y - p / 2, W = D - R, U = m > 1 ? W / (m - 1) : 0;
-    let F = 0;
-    for (let C = 0; C < m && F < t; C++) {
-      const k = m === 1 ? (R + D) / 2 : R + 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, C = c + y + p / 2, D = r - c - y - p / 2, W = D - C, 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;
       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 = R * v : S === "alternating" && (q = R * 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;
@@ -1764,15 +1764,15 @@ const wt = 100, Q = 100 / Math.sqrt(3), xt = [
   // lower-left
   [0, 50]
   // left
-], Ae = xt[1][0] / wt, Re = xt[2][1] / wt;
-function Ce(o) {
+], Ae = xt[1][0] / wt, Ce = xt[2][1] / wt;
+function Re(o) {
   return {
     colStep: Ae * o,
-    rowOffset: Re * o
+    rowOffset: Ce * o
   };
 }
 function Te(o, t, i, e, n, s) {
-  const { colStep: r } = Ce(s);
+  const { colStep: r } = Re(s);
   return {
     px: e + r * o,
     py: n + s * (t + o / 2)
@@ -1786,7 +1786,7 @@ const Le = [
   [0, -1, 1],
   [1, -1, 0]
 ];
-function Fe(o) {
+function Me(o) {
   if (o === 0) return [[0, 0, 0]];
   const t = [];
   let [i, e, n] = [0, -o, o];
@@ -1795,7 +1795,7 @@ function Fe(o) {
       t.push([i, e, n]), i += s, e += r, n += a;
   return t;
 }
-class Me {
+class Fe {
   // imageConfig intentionally not stored — honeycomb forces uniform sizing (rotation/variance
   // would break hex tiling). Kept as parameter for interface compatibility.
   constructor(t, i = {}) {
@@ -1808,7 +1808,7 @@ class Me {
     }.spacing ?? 0, d = l + h;
     let g = 0, b = 0;
     for (; g < t; ) {
-      const p = Fe(b);
+      const p = Me(b);
       for (const [f, m, y] of p) {
         if (g >= t) break;
         const { px: E, py: v } = Te(f, m, y, a, c, d);
@@ -1849,7 +1849,7 @@ class ze {
       case "wave":
         return new Ie(this.config, this.imageConfig);
       case "honeycomb":
-        return new Me(this.config, this.imageConfig);
+        return new Fe(this.config, this.imageConfig);
       default:
         return new me(this.config, this.imageConfig);
     }
@@ -3292,7 +3292,7 @@ class Qe {
   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 Ve({
       loaders: e,
@@ -3331,7 +3331,7 @@ class Qe {
       if (Ze(), 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(),
@@ -3341,7 +3341,7 @@ class Qe {
         }
       })), 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() {
@@ -3660,6 +3660,10 @@ class Qe {
     this.clearImageCloud(), this.loadingElAutoCreated && this.loadingEl && (this.loadingEl.remove(), this.loadingEl = null), this.errorElAutoCreated && this.errorEl && (this.errorEl.remove(), this.errorEl = null), this.counterElAutoCreated && this.counterEl && (this.counterEl.remove(), this.counterEl = null), this.prevButtonElAutoCreated && this.prevButtonEl && (this.prevButtonEl.remove(), this.prevButtonEl = null), this.nextButtonElAutoCreated && this.nextButtonEl && (this.nextButtonEl.remove(), this.nextButtonEl = null), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy(), this.idleAnimationEngine?.stopAll(), this.idleAnimationEngine = null;
   }
 }
+async function ti(o) {
+  const t = new Qe(o);
+  return await t.init(), t;
+}
 export {
   ie as AnimationEngine,
   It as BOUNCE_PRESETS,
@@ -3672,7 +3676,7 @@ export {
   Ke as FUNCTIONAL_CSS,
   Xe as GoogleDriveLoader,
   ye as GridPlacementLayout,
-  Me as HoneycombPlacementLayout,
+  Fe as HoneycombPlacementLayout,
   Qe as ImageCloud,
   Je as ImageFilter,
   Qe as ImageGallery,
@@ -3681,10 +3685,11 @@ export {
   me as RandomPlacementLayout,
   we as SpiralPlacementLayout,
   Ye as StaticImageLoader,
-  Rt as WAVE_PATH_PRESETS,
+  Ct as WAVE_PATH_PRESETS,
   Ie as WavePlacementLayout,
   Ne as ZoomEngine,
   he as animatePath,
+  ti as imageCloud,
   Ze as injectFunctionalStyles,
   de as requiresJSAnimation
 };