@frybynite/image-cloud 0.9.0 → 0.9.2

package/dist/web-component.d.ts

@@ -11,7 +11,6 @@ export declare interface AnimationConfig {
     duration: number;
     easing: AnimationEasingConfig;
     queue: AnimationQueueConfig;
-    performance?: AnimationPerformanceConfig;
     entry?: EntryAnimationConfig;
     idle?: IdleAnimationConfig;
 }
@@ -123,15 +122,9 @@ declare interface AnimationParams {
     easing: string;
 }
 
-declare interface AnimationPerformanceConfig {
-    useGPU?: boolean;
-    reduceMotion?: boolean;
-}
-
 declare interface AnimationQueueConfig {
     enabled: boolean;
     interval: number;
-    maxConcurrent?: number;
 }
 
 /**
@@ -563,11 +556,6 @@ export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative
 
 export declare type GalleryConfig = ImageCloudConfig;
 
-declare interface GestureInteractionConfig {
-    pinchToZoom?: boolean;
-    doubleTapToFocus?: boolean;
-}
-
 export declare interface GoogleDriveFilesSource {
     files: string[];
 }
@@ -722,6 +710,14 @@ declare interface HoneycombAlgorithmConfig {
     spacing?: number;
 }
 
+export declare class HoneycombPlacementLayout implements PlacementLayout {
+    private config;
+    constructor(config: LayoutConfig, _imageConfig?: ImageConfig);
+    generate(imageCount: number, containerBounds: ContainerBounds, options?: Partial<LayoutConfig> & {
+        fixedHeight?: number;
+    }): ImageLayout[];
+}
+
 declare interface IdleAnimationConfig {
     type: IdleAnimationType;
     wiggle?: IdleWiggleConfig;
@@ -1057,7 +1053,7 @@ export declare function injectFunctionalStyles(): void;
 declare interface InteractionConfig {
     focus: FocusInteractionConfig;
     navigation?: NavigationInteractionConfig;
-    gestures?: GestureInteractionConfig;
+    dragging?: boolean;
 }
 
 export declare type LayoutAlgorithm = 'random' | 'radial' | 'grid' | 'spiral' | 'cluster' | 'wave' | 'honeycomb';
@@ -1153,7 +1149,6 @@ declare interface LayoutEngineConfig {
 
 declare interface LayoutSpacingConfig {
     padding: number;
-    minGap: number;
 }
 
 export declare type LoaderEntry = StaticLoaderEntry | GoogleDriveLoaderEntry;

package/dist/web-component.js

@@ -4,11 +4,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)"
-}), Tt = Object.freeze({
+}), At = 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({
+}), Tt = 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 }),
@@ -115,10 +115,8 @@ const mt = Object.freeze({
     densityFactor: 1,
     // Default density
     spacing: Object.freeze({
-      padding: 50,
+      padding: 50
       // padding from viewport edges
-      minGap: 20
-      // minimum spacing between images
     })
   }),
   // Pattern-based animation configuration
@@ -136,16 +134,8 @@ const mt = Object.freeze({
     queue: Object.freeze({
       enabled: !0,
       // When false, all images display simultaneously
-      interval: 150,
+      interval: 150
       // ms between processing queue items (when enabled)
-      maxConcurrent: void 0
-      // STUB: Not implemented yet
-    }),
-    performance: Object.freeze({
-      useGPU: void 0,
-      // STUB: Not implemented yet
-      reduceMotion: void 0
-      // STUB: Not implemented yet
     }),
     entry: Object.freeze({
       start: Object.freeze({
@@ -181,19 +171,12 @@ const mt = Object.freeze({
       // Use default animation duration
     }),
     navigation: Object.freeze({
-      keyboard: void 0,
-      // STUB: Not implemented yet
-      swipe: void 0,
-      // STUB: Not implemented yet
+      keyboard: !0,
+      swipe: !0,
       mouseWheel: void 0
       // STUB: Not implemented yet
     }),
-    gestures: Object.freeze({
-      pinchToZoom: void 0,
-      // STUB: Not implemented yet
-      doubleTapToFocus: void 0
-      // STUB: Not implemented yet
-    })
+    dragging: !0
   }),
   // Pattern-based rendering configuration
   rendering: Object.freeze({
@@ -327,9 +310,6 @@ function te(o = {}) {
   }), o.animation.queue && (s.animation.queue = {
     ...x.animation.queue,
     ...o.animation.queue
-  }), o.animation.performance && (s.animation.performance = {
-    ...x.animation.performance,
-    ...o.animation.performance
   }), o.animation.entry && (s.animation.entry = {
     ...x.animation.entry,
     ...o.animation.entry,
@@ -354,9 +334,6 @@ function te(o = {}) {
   }), o.interaction.navigation && (s.interaction.navigation = {
     ...x.interaction.navigation,
     ...o.interaction.navigation
-  }), o.interaction.gestures && (s.interaction.gestures = {
-    ...x.interaction.gestures,
-    ...o.interaction.gestures
   })), o.rendering && (s.rendering = {
     ...x.rendering,
     ...o.rendering
@@ -383,10 +360,10 @@ function te(o = {}) {
   return s;
 }
 function ee(o, t) {
-  return { ...o ? Tt[o] : Tt.playful, ...t };
+  return { ...o ? At[o] : At.playful, ...t };
 }
 function ie(o, t) {
-  return { ...o ? At[o] : At.gentle, ...t };
+  return { ...o ? Tt[o] : Tt.gentle, ...t };
 }
 function ne(o, t) {
   return { ...o ? Ct[o] : Ct.gentle, ...t };
@@ -657,7 +634,7 @@ function ue(o) {
   }
   const O = performance.now(), L = -r / 2, P = -s / 2;
   function z(H) {
-    const k = H - O, T = Math.min(k / a, 1);
+    const k = H - O, A = Math.min(k / a, 1);
     let D;
     switch (p) {
       case "bounce": {
@@ -665,7 +642,7 @@ function ue(o) {
           n.bouncePreset,
           n.bounce
         );
-        D = se(T, i, e, N);
+        D = se(A, i, e, N);
         break;
       }
       case "elastic": {
@@ -673,7 +650,7 @@ function ue(o) {
           n.elasticPreset,
           n.elastic
         );
-        D = re(T, i, e, N);
+        D = re(A, i, e, N);
         break;
       }
       case "wave": {
@@ -681,20 +658,20 @@ function ue(o) {
           n.wavePreset,
           n.wave
         );
-        D = ce(T, i, e, N);
+        D = ce(A, i, e, N);
         break;
       }
       default:
         D = {
-          x: V(i.x, e.x, T),
-          y: V(i.y, e.y, T)
+          x: V(i.x, e.x, A),
+          y: V(i.y, e.y, A)
         };
     }
     const G = D.x - e.x, U = D.y - e.y;
     let M;
-    m ? M = he(T, c, y) : g ? M = V(d, c, T) : M = c;
-    let A;
-    I ? A = de(T, l, E) : v ? A = V(b, l, T) : A = l, t.style.transform = `translate(${L}px, ${P}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${A})`, T < 1 ? requestAnimationFrame(z) : (t.style.transform = `translate(${L}px, ${P}px) rotate(${c}deg) scale(${l})`, u && u());
+    m ? M = he(A, c, y) : g ? M = V(d, c, A) : M = c;
+    let T;
+    I ? T = de(A, l, E) : v ? T = V(b, l, A) : T = l, t.style.transform = `translate(${L}px, ${P}px) translate(${G}px, ${U}px) rotate(${M}deg) scale(${T})`, A < 1 ? requestAnimationFrame(z) : (t.style.transform = `translate(${L}px, ${P}px) rotate(${c}deg) scale(${l})`, u && u());
   }
   requestAnimationFrame(z);
 }
@@ -1311,15 +1288,15 @@ class ye {
     }
     let E = 1, R = 1;
     for (; E < t; ) {
-      const O = R / w, L = b > 0 ? 1 - O * b * 0.5 : 1, P = Math.max(g * 0.8, I / w * 1.5 / p.tightness), z = R * P, H = z * 1.5, k = Math.PI * (3 * (H + z) - Math.sqrt((3 * H + z) * (H + 3 * z))), T = this.estimateWidth(g), D = Math.floor(k / (T * 0.7));
+      const O = R / w, L = b > 0 ? 1 - O * b * 0.5 : 1, P = Math.max(g * 0.8, I / w * 1.5 / p.tightness), z = R * P, H = z * 1.5, k = Math.PI * (3 * (H + z) - Math.sqrt((3 * H + z) * (H + 3 * z))), A = this.estimateWidth(g), D = Math.floor(k / (A * 0.7));
       if (D === 0) {
         R++;
         continue;
       }
       const G = 2 * Math.PI / D, U = R * (20 * Math.PI / 180);
       for (let M = 0; M < D && E < t; M++) {
-        const A = M * G + U, N = f ? this.random(h, d) : 1, B = L * N, C = g * B;
-        let _ = m + Math.cos(A) * H, F = y + Math.sin(A) * z;
+        const T = M * G + U, N = f ? this.random(h, d) : 1, B = L * N, C = g * B;
+        let _ = m + Math.cos(T) * H, F = y + Math.sin(T) * z;
         const $ = C * 1.5 / 2, j = C / 2;
         _ - $ < v ? _ = v + $ : _ + $ > a - v && (_ = a - v - $), F - j < v ? F = v + j : F + j > r - v && (F = r - v - j);
         const Y = c === "random" ? this.random(l, u) : 0;
@@ -1403,7 +1380,7 @@ class we {
       p,
       l,
       s
-    ), y = s.stagger === "row", w = s.stagger === "column", v = y ? g + 0.5 : g, I = w ? m + 0.5 : m, E = (b - s.gap * (g - 1)) / v, R = (p - s.gap * (m - 1)) / I, O = y ? E / 2 : 0, L = w ? R / 2 : 0, P = 1 + s.overlap, z = Math.min(E, R) * P, H = e.fixedHeight ? Math.min(e.fixedHeight, z) : z, k = g * E + (g - 1) * s.gap + O, T = m * R + (m - 1) * s.gap + L, D = c + (b - k) / 2, G = c + (p - T) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", A = M && t > U;
+    ), y = s.stagger === "row", w = s.stagger === "column", v = y ? g + 0.5 : g, I = w ? m + 0.5 : m, E = (b - s.gap * (g - 1)) / v, R = (p - s.gap * (m - 1)) / I, O = y ? E / 2 : 0, L = w ? R / 2 : 0, P = 1 + s.overlap, z = Math.min(E, R) * P, H = e.fixedHeight ? Math.min(e.fixedHeight, z) : z, k = g * E + (g - 1) * s.gap + O, A = m * R + (m - 1) * s.gap + L, D = c + (b - k) / 2, G = c + (p - A) / 2, U = g * m, M = s.columns !== "auto" && s.rows !== "auto", T = M && t > U;
     typeof window < "u" && (window.__gridOverflowDebug = {
       gridConfigColumns: s.columns,
       gridConfigRows: s.rows,
@@ -1412,12 +1389,12 @@ class we {
       cellCount: U,
       hasFixedGrid: M,
       imageCount: t,
-      isOverflowMode: A
+      isOverflowMode: T
     });
-    const N = A ? new Array(U).fill(0) : [], B = Math.min(E, R) * s.overflowOffset;
+    const N = T ? new Array(U).fill(0) : [], B = Math.min(E, R) * s.overflowOffset;
     for (let C = 0; C < t; C++) {
       let _, F, X = 0;
-      if (A && C >= U) {
+      if (T && C >= U) {
         const q = C - U, W = q % U;
         X = Math.floor(q / U) + 1, N[W]++, s.fillDirection === "row" ? (_ = W % g, F = Math.floor(W / g)) : (F = W % m, _ = Math.floor(W / m));
       } else
@@ -1432,7 +1409,7 @@ class we {
         $ += this.random(-q, q), j += this.random(-W, W);
       }
       let Y = $, J = j;
-      if (!A && s.fillDirection === "row") {
+      if (!T && s.fillDirection === "row") {
         const q = t % g || g;
         if (F === Math.floor((t - 1) / g) && q < g) {
           const Rt = q * E + (q - 1) * s.gap;
@@ -1448,7 +1425,7 @@ class we {
         s.jitter > 0 ? dt = this.random(q * s.jitter, W * s.jitter) : dt = this.random(q, W);
       }
       let ut;
-      A && X > 0 ? ut = 50 - X : ut = A ? 100 + C : C + 1, n.push({
+      T && X > 0 ? ut = 50 - X : ut = T ? 100 + C : C + 1, n.push({
         id: C,
         x: Y,
         y: J,
@@ -1519,7 +1496,7 @@ class Se {
         const $ = I * 0.3 * s.tightness;
         E = $ * v + s.startAngle, R = this.calculateLogarithmicRadius($, t, w, s.tightness);
       }
-      const O = m + Math.cos(E) * R, L = y + Math.sin(E) * R, P = R / w, z = g > 0 ? 1 - P * g * 0.5 : 1, H = p ? this.random(f, b) : 1, k = z * H, T = l * k, G = T * 1.5 / 2, U = T / 2, M = c + G, A = a - c - G, N = c + U, B = r - c - U, C = Math.max(M, Math.min(O, A)), _ = Math.max(N, Math.min(L, B));
+      const O = m + Math.cos(E) * R, L = y + Math.sin(E) * R, P = R / w, z = g > 0 ? 1 - P * g * 0.5 : 1, H = p ? this.random(f, b) : 1, k = z * H, A = l * k, G = A * 1.5 / 2, U = A / 2, M = c + G, T = a - c - G, N = c + U, B = r - c - U, C = Math.max(M, Math.min(O, T)), _ = Math.max(N, Math.min(L, B));
       let F = 0;
       if (u === "random") {
         const $ = E * 180 / Math.PI % 360, j = this.random(h, d);
@@ -1532,7 +1509,7 @@ class Se {
         y: _,
         rotation: F,
         scale: k,
-        baseSize: T,
+        baseSize: A,
         zIndex: X
       });
     }
@@ -1634,10 +1611,10 @@ class Re {
         }
         const P = 1 + s.overlap * 0.5, z = 1 + s.overlap * 0.3;
         O /= P, L /= P;
-        const H = p ? this.random(f, b) : 1, k = z * H, T = l * k;
+        const H = p ? this.random(f, b) : 1, k = z * H, A = l * k;
         let D = I.x + O, G = I.y + L;
-        const M = T * 1.5 / 2, A = T / 2;
-        D = Math.max(c + M, Math.min(D, a - c - M)), G = Math.max(c + A, Math.min(G, r - c - A));
+        const M = A * 1.5 / 2, T = A / 2;
+        D = Math.max(c + M, Math.min(D, a - c - M)), G = Math.max(c + T, Math.min(G, r - c - T));
         const N = u === "random" ? this.random(h, d) : 0, C = Math.sqrt(O * O + L * L) / I.spread, _ = Math.round((1 - C) * 50) + 1;
         n.push({
           id: w,
@@ -1645,7 +1622,7 @@ class Re {
           y: G,
           rotation: N,
           scale: k,
-          baseSize: T,
+          baseSize: A,
           zIndex: _
         }), w++;
       }
@@ -1712,7 +1689,7 @@ class Re {
     return Math.random() * (i - t) + t;
   }
 }
-class Te {
+class Ae {
   constructor(t, i = {}) {
     this.config = t, this.imageConfig = i;
   }
@@ -1727,12 +1704,12 @@ class Te {
     const n = [], { width: a, height: r } = i, s = 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, f = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || f !== 1, p = e.fixedHeight ?? s, g = {
       ...Nt,
       ...this.config.wave
-    }, { rows: m, amplitude: y, frequency: w, phaseShift: v, synchronization: I } = g, E = Math.ceil(t / m), L = p * 1.5 / 2, P = c + L, z = a - c - L, H = z - P, k = E > 1 ? H / (E - 1) : 0, T = c + y + p / 2, D = r - c - y - p / 2, G = D - T, U = m > 1 ? G / (m - 1) : 0;
+    }, { rows: m, amplitude: y, frequency: w, phaseShift: v, synchronization: I } = g, E = Math.ceil(t / m), L = p * 1.5 / 2, P = c + L, z = a - c - L, H = z - P, k = E > 1 ? H / (E - 1) : 0, A = c + y + p / 2, D = r - c - y - p / 2, G = D - A, U = m > 1 ? G / (m - 1) : 0;
     let M = 0;
-    for (let A = 0; A < m && M < t; A++) {
-      const N = m === 1 ? (T + D) / 2 : T + A * U;
+    for (let T = 0; T < m && M < t; T++) {
+      const N = m === 1 ? (A + D) / 2 : A + T * U;
       let B = 0;
-      I === "offset" ? B = A * v : I === "alternating" && (B = A * Math.PI);
+      I === "offset" ? B = T * v : I === "alternating" && (B = T * Math.PI);
       for (let C = 0; C < E && M < t; C++) {
         const _ = E === 1 ? (P + z) / 2 : P + C * k, F = this.calculateWaveY(_, a, y, w, B), X = _, $ = N + F, j = b ? this.random(d, f) : 1, Y = p * j;
         let J = 0;
@@ -1802,10 +1779,10 @@ const xt = 100, Q = 100 / Math.sqrt(3), St = [
   // lower-left
   [0, 50]
   // left
-], Ae = St[1][0] / xt, Ce = St[2][1] / xt;
+], Te = St[1][0] / xt, Ce = St[2][1] / xt;
 function Le(o) {
   return {
-    colStep: Ae * o,
+    colStep: Te * o,
     rowOffset: Ce * o
   };
 }
@@ -1885,7 +1862,7 @@ class De {
       case "cluster":
         return new Re(this.config, this.imageConfig);
       case "wave":
-        return new Te(this.config, this.imageConfig);
+        return new Ae(this.config, this.imageConfig);
       case "honeycomb":
         return new ze(this.config, this.imageConfig);
       default:
@@ -3329,14 +3306,14 @@ class ei {
         this.containerEl = this.containerRef;
       else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
         throw new Error(`Container #${this.containerId} not found`);
-      this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new bt(this.containerEl, {
+      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(),
         onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
         onDragEnd: (t) => {
           t ? this.zoomEngine.clearDragOffset(!1) : this.zoomEngine.clearDragOffset(!0, Xe);
         }
-      }), this.setupUI(), this.setupEventListeners(), this.logDebug("ImageCloud initialized"), await this.loadImages();
+      })), 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);
     }
@@ -3365,7 +3342,7 @@ class ei {
     return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
   }
   setupEventListeners() {
-    document.addEventListener("keydown", (t) => {
+    this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
       t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter()) : t.key === "ArrowRight" ? this.navigateToNextImage() : t.key === "ArrowLeft" ? this.navigateToPreviousImage() : (t.key === "Enter" || t.key === " ") && this.hoveredImage && (this.handleImageClick(this.hoveredImage.element, this.hoveredImage.layout), t.preventDefault());
     }), document.addEventListener("click", (t) => {
       this.swipeEngine?.hadRecentTouch() || t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter());
@@ -3539,7 +3516,7 @@ class ei {
       h.style.left = `${d - 6}px`, h.style.top = `${f - 6}px`, h.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(f)})`, this.containerEl.appendChild(h);
     })), t.forEach((l, u) => {
       const h = document.createElement("img");
-      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
+      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(u), h.dataset.createdFlag = "true";
       const d = a[u];
       h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${d.x}px`, h.style.top = `${d.y}px`, d.zIndex && (h.style.zIndex = String(d.zIndex)), st(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
         if (this.hoveredImage = { element: h, layout: d }, !this.zoomEngine.isInvolved(h)) {