@frybynite/image-cloud 0.11.2 → 1.0.0

package/README.md

@@ -4,18 +4,16 @@
 
 A TypeScript library for creating interactive image clouds with animated scattered layouts and zoom effects. Supports multiple image sources (static URLs, JSON endpoints, Google Drive) and layout algorithms.
 
-> [!WARNING]
-> ⚠️ All minor versions of this library before 1.0 (e.g., 0.1, 0.2, ...) will include breaking changes during development. Please re-test every time before upgrading until we have published v1.0.
-
 ## Features
 
 - ✨ Animated image layouts with smooth transitions
 - 🎯 Multiple layout algorithms (radial, grid, spiral, cluster, wave, honeycomb, random)
 - 🎬 Rich entry animations (bounce, elastic, wave paths; spin, wobble rotations)
-- 🔍 Zoom/focus interactions with keyboard, swipe, and mouse wheel navigation
+- 🔍 Zoom/focus interactions with keyboard, swipe, and click navigation
 - 🎨 State-based image styling (borders, shadows, filters for default/hover/focused)
 - 📱 Responsive design with adaptive sizing
 - 🖼️ Multiple image sources (static URLs, JSON endpoints, Google Drive, composite loaders)
+- ⚛️ Framework wrappers for React, Vue 3, and Web Components
 - 🛠️ Interactive configurator for visual configuration
 - 📦 Zero runtime dependencies
 - 🔷 Full TypeScript support
@@ -46,7 +44,7 @@ https://unpkg.com/@frybynite/image-cloud@latest/dist/image-cloud-auto-init.js
 https://unpkg.com/@frybynite/image-cloud@latest/dist/style.css
 ```
 
-Replace `@latest` with a specific version (e.g., `@0.5.1`) to pin to that release.
+Replace `@latest` with a specific version (e.g., `@1.0.0`) to pin to that release.
 
 ## Quick Start
 
@@ -76,6 +74,72 @@ const cloud = await imageCloud({
 > await cloud.init();
 > ```
 
+### React
+
+```bash
+npm install @frybynite/image-cloud react react-dom
+```
+
+```tsx
+import { ImageCloud } from '@frybynite/image-cloud/react';
+import '@frybynite/image-cloud/style.css';
+
+function App() {
+  return (
+    <ImageCloud
+      style={{ width: '100%', height: '80vh' }}
+      images={[
+        'https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600',
+        'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600',
+        'https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600'
+      ]}
+      layout={{ algorithm: 'radial' }}
+    />
+  );
+}
+```
+
+### Vue 3
+
+```bash
+npm install @frybynite/image-cloud vue
+```
+
+```vue
+<script setup>
+import { ImageCloud } from '@frybynite/image-cloud/vue';
+import '@frybynite/image-cloud/style.css';
+
+const options = {
+  images: [
+    'https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600',
+    'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600',
+    'https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600'
+  ],
+  layout: { algorithm: 'radial' }
+};
+</script>
+
+<template>
+  <ImageCloud :options="options" style="width: 100%; height: 80vh" />
+</template>
+```
+
+### Web Component
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@frybynite/image-cloud@latest/dist/style.css">
+<script type="module">
+  import '@frybynite/image-cloud/web-component';
+</script>
+
+<image-cloud
+  style="display: block; width: 100%; height: 80vh"
+  images='["https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&w=600","https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&w=600","https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&w=600"]'
+  layout="radial"
+></image-cloud>
+```
+
 ### HTML (Auto-initialization)
 
 ```html
@@ -111,6 +175,7 @@ Full documentation is available at **[frybynite.github.io/image-cloud](https://f
 - **[Loaders](https://frybynite.github.io/image-cloud/loaders/)** — Configure image sources (static URLs, JSON endpoints, Google Drive)
 - **[Layouts](https://frybynite.github.io/image-cloud/layouts/)** — Layout algorithms (radial, grid, spiral, cluster, wave, honeycomb, random)
 - **[Image Sizing](https://frybynite.github.io/image-cloud/image_sizing/)** — Base sizes, variance, and responsive/adaptive behavior
+- **[Framework Wrappers](https://frybynite.github.io/image-cloud/parameters/#framework-wrappers)** — React, Vue 3, and Web Component usage
 - **[Parameters](https://frybynite.github.io/image-cloud/parameters/)** — Complete configuration reference
 - **[API Reference](https://frybynite.github.io/image-cloud/api/)** — TypeScript API documentation
 

package/dist/image-cloud-auto-init.js

@@ -1,4 +1,4 @@
-const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-counter{background:#0009;color:#fff;padding:6px 16px;border-radius:16px;font-family:system-ui,sans-serif;font-size:14px}.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus{outline:2px solid var(--fbn-ic-accent-primary);outline-offset:-4px}.fbn-ic-nav-btn{background:#0009;color:#fff;width:44px;height:44px;border-radius:50%;font-family:system-ui,sans-serif;font-size:28px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,opacity .2s ease;opacity:.8}.fbn-ic-nav-btn:hover{background:#000000d9;opacity:1}.fbn-ic-hidden{display:none!important}", mt = Object.freeze({
+const Ut = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-counter{background:#0009;color:#fff;padding:6px 16px;border-radius:16px;font-family:system-ui,sans-serif;font-size:14px}.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus{outline:2px solid var(--fbn-ic-accent-primary);outline-offset:-4px}.fbn-ic-nav-btn{background:#0009;color:#fff;width:44px;height:44px;border-radius:50%;font-family:system-ui,sans-serif;font-size:28px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,opacity .2s ease;opacity:.8}.fbn-ic-nav-btn:hover{background:#000000d9;opacity:1}.fbn-ic-hidden{display:none!important}.fbn-ic-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}", mt = Object.freeze({
   none: "none",
   sm: "0 2px 4px rgba(0,0,0,0.1)",
   md: "0 4px 16px rgba(0,0,0,0.4)",
@@ -583,8 +583,8 @@ function le(o) {
     return;
   }
   const R = performance.now(), M = -r / 2, T = -a / 2;
-  function O(k) {
-    const D = k - R, z = Math.min(D / s, 1);
+  function O(_) {
+    const D = _ - R, z = Math.min(D / s, 1);
     let S;
     switch (l) {
       case "bounce": {
@@ -617,11 +617,11 @@ function le(o) {
           y: J(i.y, e.y, z)
         };
     }
-    const _ = S.x - e.x, $ = S.y - e.y;
+    const U = S.x - e.x, k = S.y - e.y;
     let A;
     h ? A = re(z, c, b) : g ? A = J(p, c, z) : A = c;
     let j;
-    x ? j = ce(z, d, w) : y ? j = J(v, d, z) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${_}px, ${$}px) rotate(${A}deg) scale(${j})`, f && z < 1 && f(z, D, {
+    x ? j = ce(z, d, w) : y ? j = J(v, d, z) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${U}px, ${k}px) rotate(${A}deg) scale(${j})`, f && z < 1 && f(z, D, {
       x: S.x,
       y: S.y,
       rotation: A,
@@ -1243,25 +1243,25 @@ class me {
     }
     let x = 1, w = 1;
     for (; x < t; ) {
-      const F = w / b, R = E > 0 ? 1 - F * E * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = w * M, O = T * 1.5, k = Math.PI * (3 * (O + T) - Math.sqrt((3 * O + T) * (O + 3 * T))), D = this.estimateWidth(l), z = Math.floor(k / (D * 0.7));
+      const F = w / b, R = E > 0 ? 1 - F * E * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = w * M, O = T * 1.5, _ = Math.PI * (3 * (O + T) - Math.sqrt((3 * O + T) * (O + 3 * T))), D = this.estimateWidth(l), z = Math.floor(_ / (D * 0.7));
       if (z === 0) {
         w++;
         continue;
       }
-      const S = 2 * Math.PI / z, _ = w * (20 * Math.PI / 180);
-      for (let $ = 0; $ < z && x < t; $++) {
-        const A = $ * S + _, j = p ? this.random(f, m) : 1, N = R * j, P = l * N;
-        let H = g + Math.cos(A) * O, U = h + Math.sin(A) * T;
-        const B = P * 1.5 / 2, W = P / 2;
-        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), U - W < I ? U = I + W : U + W > r - I && (U = r - I - W);
+      const S = 2 * Math.PI / z, U = w * (20 * Math.PI / 180);
+      for (let k = 0; k < z && x < t; k++) {
+        const A = k * S + U, j = p ? this.random(f, m) : 1, N = R * j, $ = l * N;
+        let H = g + Math.cos(A) * O, P = h + Math.sin(A) * T;
+        const B = $ * 1.5 / 2, W = $ / 2;
+        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), P - W < I ? P = I + W : P + W > r - I && (P = r - I - W);
         const X = c === "random" ? this.random(d, u) : 0;
         n.push({
           id: x,
           x: H,
-          y: U,
+          y: P,
           rotation: X,
           scale: N,
-          baseSize: P,
+          baseSize: $,
           zIndex: Math.max(1, 100 - w)
           // Outer rings have lower z-index
         }), x++;
@@ -1335,27 +1335,16 @@ class be {
       v,
       d,
       a
-    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, x = (E - a.gap * (l - 1)) / I, w = (v - a.gap * (g - 1)) / y, F = h ? x / 2 : 0, R = b ? w / 2 : 0, M = 1 + a.overlap, T = Math.min(x, w) * M, O = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, k = l * x + (l - 1) * a.gap + F, D = g * w + (g - 1) * a.gap + R, z = c + (E - k) / 2, S = c + (v - D) / 2, _ = l * g, $ = a.columns !== "auto" && a.rows !== "auto", A = $ && t > _;
-    typeof window < "u" && (window.__gridOverflowDebug = {
-      gridConfigColumns: a.columns,
-      gridConfigRows: a.rows,
-      columns: l,
-      rows: g,
-      cellCount: _,
-      hasFixedGrid: $,
-      imageCount: t,
-      isOverflowMode: A
-    });
-    const j = A ? new Array(_).fill(0) : [], N = Math.min(x, w) * a.overflowOffset;
-    for (let P = 0; P < t; P++) {
-      let H, U, Y = 0;
-      if (A && P >= _) {
-        const q = P - _, G = q % _;
-        Y = Math.floor(q / _) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, U = Math.floor(G / l)) : (U = G % g, H = Math.floor(G / g));
+    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, x = (E - a.gap * (l - 1)) / I, w = (v - a.gap * (g - 1)) / y, F = h ? x / 2 : 0, R = b ? w / 2 : 0, M = 1 + a.overlap, T = Math.min(x, w) * M, O = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, _ = l * x + (l - 1) * a.gap + F, D = g * w + (g - 1) * a.gap + R, z = c + (E - _) / 2, S = c + (v - D) / 2, U = l * g, A = a.columns !== "auto" && a.rows !== "auto" && t > U, j = A ? new Array(U).fill(0) : [], N = Math.min(x, w) * a.overflowOffset;
+    for (let $ = 0; $ < t; $++) {
+      let H, P, Y = 0;
+      if (A && $ >= U) {
+        const q = $ - U, G = q % U;
+        Y = Math.floor(q / U) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, P = Math.floor(G / l)) : (P = G % g, H = Math.floor(G / g));
       } else
-        a.fillDirection === "row" ? (H = P % l, U = Math.floor(P / l)) : (U = P % g, H = Math.floor(P / g));
-      let B = z + H * (x + a.gap) + x / 2, W = S + U * (w + a.gap) + w / 2;
-      if (a.stagger === "row" && U % 2 === 1 ? B += x / 2 : a.stagger === "column" && H % 2 === 1 && (W += w / 2), Y > 0) {
+        a.fillDirection === "row" ? (H = $ % l, P = Math.floor($ / l)) : (P = $ % g, H = Math.floor($ / g));
+      let B = z + H * (x + a.gap) + x / 2, W = S + P * (w + a.gap) + w / 2;
+      if (a.stagger === "row" && P % 2 === 1 ? B += x / 2 : a.stagger === "column" && H % 2 === 1 && (W += w / 2), Y > 0) {
         const q = (Y - 1) % Tt.length, G = Tt[q];
         B += G.x * N, W += G.y * N;
       }
@@ -1366,10 +1355,10 @@ class be {
       let X = B, V = W;
       if (!A && a.fillDirection === "row") {
         const q = t % l || l;
-        if (U === Math.floor((t - 1) / l) && q < l) {
+        if (P === Math.floor((t - 1) / l) && q < l) {
           const It = q * x + (q - 1) * a.gap;
           let gt = 0;
-          a.alignment === "center" ? gt = (k - It) / 2 : a.alignment === "end" && (gt = k - It), X += gt;
+          a.alignment === "center" ? gt = (_ - It) / 2 : a.alignment === "end" && (gt = _ - It), X += gt;
         }
       }
       const ct = p ? this.random(f, m) : 1, K = O * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, Pt = c + ot, _t = r - c - ot;
@@ -1380,8 +1369,8 @@ class be {
         a.jitter > 0 ? ut = this.random(q * a.jitter, G * a.jitter) : ut = this.random(q, G);
       }
       let ft;
-      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + P : P + 1, n.push({
-        id: P,
+      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + $ : $ + 1, n.push({
+        id: $,
         x: X,
         y: V,
         rotation: ut,
@@ -1451,19 +1440,19 @@ class xe {
         const B = y * 0.3 * a.tightness;
         x = B * I + a.startAngle, w = this.calculateLogarithmicRadius(B, t, b, a.tightness);
       }
-      const F = g + Math.cos(x) * w, R = h + Math.sin(x) * w, M = w / b, T = l > 0 ? 1 - M * l * 0.5 : 1, O = v ? this.random(p, E) : 1, k = T * O, D = d * k, S = D * 1.5 / 2, _ = D / 2, $ = c + S, A = s - c - S, j = c + _, N = r - c - _, P = Math.max($, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
-      let U = 0;
+      const F = g + Math.cos(x) * w, R = h + Math.sin(x) * w, M = w / b, T = l > 0 ? 1 - M * l * 0.5 : 1, O = v ? this.random(p, E) : 1, _ = T * O, D = d * _, S = D * 1.5 / 2, U = D / 2, k = c + S, A = s - c - S, j = c + U, N = r - c - U, $ = Math.max(k, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
+      let P = 0;
       if (u === "random") {
         const B = x * 180 / Math.PI % 360, W = this.random(f, m);
-        U = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
-      } else u === "tangent" && (U = this.calculateSpiralTangent(x, w, a));
+        P = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
+      } else u === "tangent" && (P = this.calculateSpiralTangent(x, w, a));
       const Y = t - y;
       n.push({
         id: y,
-        x: P,
+        x: $,
         y: H,
-        rotation: U,
-        scale: k,
+        rotation: P,
+        scale: _,
         baseSize: D,
         zIndex: Y
       });
@@ -1561,22 +1550,22 @@ class Ee {
         if (a.distribution === "gaussian")
           F = this.gaussianRandom() * y.spread, R = this.gaussianRandom() * y.spread;
         else {
-          const U = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
-          F = Math.cos(U) * Y, R = Math.sin(U) * Y;
+          const P = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
+          F = Math.cos(P) * Y, R = Math.sin(P) * Y;
         }
         const M = 1 + a.overlap * 0.5, T = 1 + a.overlap * 0.3;
         F /= M, R /= M;
-        const O = v ? this.random(p, E) : 1, k = T * O, D = d * k;
+        const O = v ? this.random(p, E) : 1, _ = T * O, D = d * _;
         let z = y.x + F, S = y.y + R;
-        const $ = D * 1.5 / 2, A = D / 2;
-        z = Math.max(c + $, Math.min(z, s - c - $)), S = Math.max(c + A, Math.min(S, r - c - A));
-        const j = u === "random" ? this.random(f, m) : 0, P = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - P) * 50) + 1;
+        const k = D * 1.5 / 2, A = D / 2;
+        z = Math.max(c + k, Math.min(z, s - c - k)), S = Math.max(c + A, Math.min(S, r - c - A));
+        const j = u === "random" ? this.random(f, m) : 0, $ = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - $) * 50) + 1;
         n.push({
           id: b,
           x: z,
           y: S,
           rotation: j,
-          scale: k,
+          scale: _,
           baseSize: D,
           zIndex: H
         }), b++;
@@ -1659,26 +1648,26 @@ class Ie {
     const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, E = m !== 1 || p !== 1, v = e.fixedHeight ?? a, l = {
       ...Ht,
       ...this.config.wave
-    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, x = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, O = T - M, k = x > 1 ? O / (x - 1) : 0, D = c + h + v / 2, z = r - c - h - v / 2, S = z - D, _ = g > 1 ? S / (g - 1) : 0;
-    let $ = 0;
-    for (let A = 0; A < g && $ < t; A++) {
-      const j = g === 1 ? (D + z) / 2 : D + A * _;
+    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, x = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, O = T - M, _ = x > 1 ? O / (x - 1) : 0, D = c + h + v / 2, z = r - c - h - v / 2, S = z - D, U = g > 1 ? S / (g - 1) : 0;
+    let k = 0;
+    for (let A = 0; A < g && k < t; A++) {
+      const j = g === 1 ? (D + z) / 2 : D + A * U;
       let N = 0;
       y === "offset" ? N = A * I : y === "alternating" && (N = A * Math.PI);
-      for (let P = 0; P < x && $ < t; P++) {
-        const H = x === 1 ? (M + T) / 2 : M + P * k, U = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + U, W = E ? this.random(m, p) : 1, X = v * W;
+      for (let $ = 0; $ < x && k < t; $++) {
+        const H = x === 1 ? (M + T) / 2 : M + $ * _, P = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + P, W = E ? this.random(m, p) : 1, X = v * W;
         let V = 0;
         d === "tangent" ? V = this.calculateRotation(H, s, h, b, N) : d === "random" && (V = this.random(u, f));
         const K = X * 1.5 / 2, lt = X / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
         n.push({
-          id: $,
+          id: k,
           x: Math.max(nt, Math.min(Y, ot)),
           y: Math.max(ht, Math.min(B, dt)),
           rotation: V,
           scale: W,
           baseSize: X,
-          zIndex: $ + 1
-        }), $++;
+          zIndex: k + 1
+        }), k++;
       }
     }
     return n;
@@ -3221,7 +3210,7 @@ function Ke() {
 }
 class Ze {
   constructor(t = {}) {
-    this.fullConfig = Kt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ee(this.fullConfig.animation), this.layoutEngine = new Me({
+    this.ariaLiveEl = null, this.fullConfig = Kt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ee(this.fullConfig.animation), this.layoutEngine = new Me({
       layout: this.fullConfig.layout,
       image: this.fullConfig.image
     }), this.zoomEngine = new ke(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;
@@ -3311,7 +3300,7 @@ class Ze {
         this.containerEl = this.containerRef;
       else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
         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, {
+      this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.containerEl.setAttribute("role", "region"), this.containerEl.setAttribute("aria-label", "Image gallery"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
         onNext: () => this.navigateToNextImage(),
         onPrev: () => this.navigateToPreviousImage(),
         onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
@@ -3329,7 +3318,7 @@ class Ze {
       i.stopPropagation(), this.navigateToPreviousImage();
     }), this.nextButtonEl?.addEventListener("click", (i) => {
       i.stopPropagation(), this.navigateToNextImage();
-    }));
+    })), this.ariaLiveEl = document.createElement("div"), this.ariaLiveEl.setAttribute("aria-live", "polite"), this.ariaLiveEl.setAttribute("aria-atomic", "true"), this.ariaLiveEl.className = "fbn-ic-sr-only", this.containerEl.appendChild(this.ariaLiveEl);
   }
   resolveElement(t) {
     return t instanceof HTMLElement ? t : document.getElementById(t);
@@ -3352,11 +3341,19 @@ class Ze {
   }
   createDefaultPrevButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), this.containerEl.appendChild(t), t;
   }
   createDefaultNextButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), this.containerEl.appendChild(t), t;
+  }
+  getImageAlt(t, i) {
+    try {
+      const s = (new URL(t).pathname.split("/").pop() ?? "").replace(/\.[^.]+$/, "").replace(/[-_]/g, " ").trim();
+      return s.length > 0 ? s : `Image ${i + 1}`;
+    } catch {
+      return `Image ${i + 1}`;
+    }
   }
   setupEventListeners() {
     this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
@@ -3473,7 +3470,7 @@ class Ze {
     }, E = (l) => {
       this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(async () => {
         l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1";
-        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), x = parseFloat(l.dataset.startY || "0"), w = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), O = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), k = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
+        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), x = parseFloat(l.dataset.startY || "0"), w = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), O = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), _ = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
         if (this.callbacks.onEntryStart && h) {
           const S = {
             element: l,
@@ -3494,7 +3491,7 @@ class Ze {
             endPosition: { x: w, y: F },
             pathConfig: this.entryAnimationEngine.getPathConfig(),
             duration: b.duration,
-            imageWidth: k,
+            imageWidth: _,
             imageHeight: D,
             rotation: R,
             scale: M,
@@ -3502,7 +3499,7 @@ class Ze {
             startRotation: T,
             scaleConfig: this.entryAnimationEngine.getScaleConfig(),
             startScale: O,
-            onProgress: this.callbacks.onEntryProgress && h ? (S, _, $) => {
+            onProgress: this.callbacks.onEntryProgress && h ? (S, U, k) => {
               const A = {
                 element: l,
                 index: g,
@@ -3514,8 +3511,8 @@ class Ze {
                 duration: b.duration,
                 progress: S,
                 rawProgress: S,
-                elapsed: _,
-                current: $
+                elapsed: U,
+                current: k
               };
               this.callbacks.onEntryProgress(A);
             } : void 0,
@@ -3536,9 +3533,9 @@ class Ze {
         else {
           const S = l.dataset.finalTransform || "";
           if (l.style.transform = S, this.callbacks.onEntryComplete && h) {
-            const _ = ($) => {
-              if ($.propertyName !== "transform") return;
-              l.removeEventListener("transitionend", _);
+            const U = (k) => {
+              if (k.propertyName !== "transform") return;
+              l.removeEventListener("transitionend", U);
               const A = {
                 element: l,
                 index: g,
@@ -3549,7 +3546,7 @@ class Ze {
               };
               this.callbacks.onEntryComplete(A);
             };
-            l.addEventListener("transitionend", _);
+            l.addEventListener("transitionend", U);
           }
         }
         if (this.fullConfig.config.debug?.enabled && g < 3) {
@@ -3606,7 +3603,7 @@ class Ze {
       h.style.left = `${b - 6}px`, h.style.top = `${I - 6}px`, h.title = `Image ${g}: center (${Math.round(b)}, ${Math.round(I)})`, this.containerEl.appendChild(h);
     })), t.forEach((l, g) => {
       const h = document.createElement("img");
-      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g), h.dataset.createdFlag = "true";
+      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.alt = this.getImageAlt(l, g), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g);
       const b = s[g];
       h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${b.x}px`, h.style.top = `${b.y}px`, b.zIndex && (h.style.zIndex = String(b.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
         if (this.hoveredImage = { element: h, layout: b }, !this.zoomEngine.isInvolved(h)) {
@@ -3632,7 +3629,7 @@ class Ze {
         if (n !== this.loadGeneration)
           return;
         const y = h.naturalWidth / h.naturalHeight, x = i * y;
-        h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${g}] Called with imageHeight=${i}, renderedWidth=${x}`), h.style.width = `${x}px`, h.cachedRenderedWidth = x, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, x);
+        h.style.width = `${x}px`, h.cachedRenderedWidth = x, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, x);
         const w = { x: b.x, y: b.y }, F = { width: x, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
           w,
           F,
@@ -3644,7 +3641,7 @@ class Ze {
           b.scale,
           x,
           i
-        ), k = this.entryAnimationEngine.buildStartTransform(
+        ), _ = this.entryAnimationEngine.buildStartTransform(
           R,
           w,
           b.rotation,
@@ -3662,7 +3659,7 @@ class Ze {
           finalTransform: O,
           renderedWidth: x,
           renderedHeight: i
-        }), h.style.transform = k, h.dataset.finalTransform = O, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(w.x), h.dataset.endY = String(w.y), h.dataset.imageWidth = String(x), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
+        }), h.style.transform = _, h.dataset.finalTransform = O, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(w.x), h.dataset.endY = String(w.y), h.dataset.imageWidth = String(x), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
           const D = {
             element: h,
             url: l,
@@ -3712,8 +3709,8 @@ class Ze {
                 const M = await (await fetch(F, w.fetch)).blob(), T = URL.createObjectURL(M);
                 y = T;
                 const O = h.onload;
-                h.onload = (k) => {
-                  URL.revokeObjectURL(T), O?.call(h, k);
+                h.onload = (_) => {
+                  URL.revokeObjectURL(T), O?.call(h, _);
                 };
               } catch {
                 I();
@@ -3732,11 +3729,15 @@ class Ze {
       height: this.containerEl.offsetHeight
     };
     if (e)
-      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
+      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.ariaLiveEl && (this.ariaLiveEl.textContent = ""), this.hideFocusIndicator();
     else {
       this.idleAnimationEngine?.pauseForImage(t);
       const s = t.dataset.imageId;
-      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
+      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.ariaLiveEl && this.currentFocusIndex !== null) {
+        const r = t.alt, a = this.imageLayouts.length;
+        this.ariaLiveEl.textContent = `Image ${this.currentFocusIndex + 1} of ${a}: ${r}`;
+      }
+      if (this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
         const r = this.imageLoader.imageURLs(), a = {
           element: t,
           index: this.currentFocusIndex,