@frybynite/image-cloud 0.4.2 → 0.5.2

package/dist/web-component.js

@@ -0,0 +1,3265 @@
+const 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)",
+  lg: "0 8px 32px rgba(0,0,0,0.5)",
+  glow: "0 0 30px rgba(255,255,255,0.6)"
+}), Et = 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 })
+}), St = Object.freeze({
+  gentle: Object.freeze({ stiffness: 150, damping: 30, mass: 1, oscillations: 2 }),
+  bouncy: Object.freeze({ stiffness: 300, damping: 15, mass: 1, oscillations: 4 }),
+  wobbly: Object.freeze({ stiffness: 180, damping: 12, mass: 1.5, oscillations: 5 }),
+  snappy: Object.freeze({ stiffness: 400, damping: 25, mass: 0.8, oscillations: 2 })
+}), It = 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 }),
+  flutter: Object.freeze({ amplitude: 20, frequency: 4, decay: !0, decayRate: 0.5, phase: 0 })
+}), bt = Object.freeze({
+  type: "linear"
+}), yt = Object.freeze({
+  mode: "none"
+}), vt = Object.freeze({
+  mode: "none"
+}), Ct = Object.freeze({
+  default: Object.freeze({
+    border: Object.freeze({
+      width: 0,
+      color: "#000000",
+      radius: 0,
+      style: "solid"
+    }),
+    shadow: "none",
+    filter: Object.freeze({}),
+    opacity: 1,
+    cursor: "pointer",
+    outline: Object.freeze({
+      width: 0,
+      color: "#000000",
+      style: "solid",
+      offset: 0
+    })
+  }),
+  hover: Object.freeze({
+    shadow: "none"
+  }),
+  focused: Object.freeze({
+    shadow: "none"
+  })
+}), $t = Object.freeze({
+  rows: 1,
+  amplitude: 100,
+  frequency: 2,
+  phaseShift: 0,
+  synchronization: "offset"
+  // Note: Image rotation along wave is now controlled via image.rotation.mode = 'tangent'
+}), _t = Object.freeze({
+  mobile: Object.freeze({ maxWidth: 767 }),
+  tablet: Object.freeze({ maxWidth: 1199 })
+}), Ut = Object.freeze({
+  mode: "adaptive",
+  // Default to adaptive sizing
+  minSize: 50,
+  // Adaptive mode minimum
+  maxSize: 400,
+  // Adaptive mode maximum
+  variance: Object.freeze({
+    min: 1,
+    // No variance by default
+    max: 1
+  })
+}), Pt = Object.freeze({
+  mode: "none",
+  range: Object.freeze({
+    min: -15,
+    max: 15
+  })
+}), Rt = Object.freeze({
+  sizing: Ut,
+  rotation: Pt
+}), Mt = Object.freeze({
+  validateUrls: !0,
+  validationTimeout: 5e3,
+  validationMethod: "head",
+  allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"]
+}), Lt = Object.freeze({
+  enabled: !1,
+  centers: !1,
+  loaders: !1
+}), y = Object.freeze({
+  // Loader configuration (always an array, composite behavior is implicit)
+  loaders: [],
+  // Shared loader settings and debug config
+  config: Object.freeze({
+    loaders: Mt,
+    debug: Lt
+  }),
+  // Image sizing and rotation configuration
+  image: Rt,
+  // Pattern-based layout configuration
+  layout: Object.freeze({
+    algorithm: "radial",
+    scaleDecay: 0,
+    // No decay by default (0-1 for radial/spiral)
+    responsive: _t,
+    targetCoverage: 0.6,
+    // Target 60% of container area
+    densityFactor: 1,
+    // Default density
+    spacing: Object.freeze({
+      padding: 50,
+      // padding from viewport edges
+      minGap: 20
+      // minimum spacing between images
+    })
+  }),
+  // Pattern-based animation configuration
+  animation: Object.freeze({
+    duration: 600,
+    // milliseconds
+    easing: Object.freeze({
+      default: "cubic-bezier(0.4, 0.0, 0.2, 1)",
+      // smooth easing
+      bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+      // bounce effect
+      focus: "cubic-bezier(0.4, 0.0, 0.2, 1)"
+      // focus/zoom easing
+    }),
+    queue: Object.freeze({
+      enabled: !0,
+      // When false, all images display simultaneously
+      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({
+        position: "nearest-edge",
+        // Default to nearest edge (current behavior)
+        offset: 100,
+        // pixels beyond edge
+        circular: Object.freeze({
+          radius: "120%",
+          // 120% of container diagonal
+          distribution: "even"
+        })
+      }),
+      timing: Object.freeze({
+        duration: 600
+        // ms
+      }),
+      easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+      // smooth deceleration
+      path: bt,
+      rotation: yt,
+      scale: vt
+    })
+  }),
+  // Pattern-based interaction configuration
+  interaction: Object.freeze({
+    focus: Object.freeze({
+      scalePercent: 0.8,
+      // 80% of container height
+      zIndex: 1e3,
+      animationDuration: void 0
+      // Use default animation duration
+    }),
+    navigation: Object.freeze({
+      keyboard: void 0,
+      // STUB: Not implemented yet
+      swipe: void 0,
+      // STUB: Not implemented yet
+      mouseWheel: void 0
+      // STUB: Not implemented yet
+    }),
+    gestures: Object.freeze({
+      pinchToZoom: void 0,
+      // STUB: Not implemented yet
+      doubleTapToFocus: void 0
+      // STUB: Not implemented yet
+    })
+  }),
+  // Pattern-based rendering configuration
+  rendering: Object.freeze({
+    responsive: Object.freeze({
+      breakpoints: Object.freeze({
+        mobile: 768,
+        tablet: void 0,
+        // STUB: Not implemented yet
+        desktop: void 0
+        // STUB: Not implemented yet
+      }),
+      mobileDetection: () => typeof window > "u" ? !1 : window.innerWidth <= 768
+    }),
+    ui: Object.freeze({
+      showLoadingSpinner: !1,
+      showImageCounter: !1,
+      showThumbnails: void 0,
+      // STUB: Not implemented yet
+      theme: void 0
+      // STUB: Not implemented yet
+    }),
+    performance: Object.freeze({
+      lazyLoad: void 0,
+      // STUB: Not implemented yet
+      preloadCount: void 0,
+      // STUB: Not implemented yet
+      imageQuality: void 0
+      // STUB: Not implemented yet
+    })
+  }),
+  // Image styling
+  styling: Ct
+});
+function Z(n, t) {
+  if (!n) return t || {};
+  if (!t) return { ...n };
+  const e = { ...n };
+  return t.border !== void 0 && (e.border = { ...n.border, ...t.border }), t.borderTop !== void 0 && (e.borderTop = { ...n.borderTop, ...t.borderTop }), t.borderRight !== void 0 && (e.borderRight = { ...n.borderRight, ...t.borderRight }), t.borderBottom !== void 0 && (e.borderBottom = { ...n.borderBottom, ...t.borderBottom }), t.borderLeft !== void 0 && (e.borderLeft = { ...n.borderLeft, ...t.borderLeft }), t.filter !== void 0 && (e.filter = { ...n.filter, ...t.filter }), t.outline !== void 0 && (e.outline = { ...n.outline, ...t.outline }), t.shadow !== void 0 && (e.shadow = t.shadow), t.opacity !== void 0 && (e.opacity = t.opacity), t.cursor !== void 0 && (e.cursor = t.cursor), t.className !== void 0 && (e.className = t.className), t.objectFit !== void 0 && (e.objectFit = t.objectFit), t.aspectRatio !== void 0 && (e.aspectRatio = t.aspectRatio), t.borderRadiusTopLeft !== void 0 && (e.borderRadiusTopLeft = t.borderRadiusTopLeft), t.borderRadiusTopRight !== void 0 && (e.borderRadiusTopRight = t.borderRadiusTopRight), t.borderRadiusBottomRight !== void 0 && (e.borderRadiusBottomRight = t.borderRadiusBottomRight), t.borderRadiusBottomLeft !== void 0 && (e.borderRadiusBottomLeft = t.borderRadiusBottomLeft), e;
+}
+function Nt(n, t) {
+  if (!t) return { ...n };
+  const e = Z(n.default, t.default), i = Z(
+    Z(e, n.hover),
+    t.hover
+  ), o = Z(
+    Z(e, n.focused),
+    t.focused
+  );
+  return {
+    default: e,
+    hover: i,
+    focused: o
+  };
+}
+function Ht(n, t) {
+  if (!t) return { ...n };
+  const e = { ...n };
+  if (t.sizing !== void 0 && (e.sizing = {
+    ...n.sizing,
+    ...t.sizing
+  }, t.sizing.variance)) {
+    const i = t.sizing.variance, o = i.min !== void 0 && i.min >= 0.25 && i.min <= 1 ? i.min : n.sizing?.variance?.min ?? 1, s = i.max !== void 0 && i.max >= 1 && i.max <= 1.75 ? i.max : n.sizing?.variance?.max ?? 1;
+    e.sizing.variance = { min: o, max: s };
+  }
+  if (t.rotation !== void 0 && (e.rotation = {
+    ...n.rotation,
+    ...t.rotation
+  }, t.rotation.range)) {
+    const i = t.rotation.range, o = i.min !== void 0 && i.min >= -180 && i.min <= 0 ? i.min : n.rotation?.range?.min ?? -15, s = i.max !== void 0 && i.max >= 0 && i.max <= 180 ? i.max : n.rotation?.range?.max ?? 15;
+    e.rotation.range = { min: o, max: s };
+  }
+  return e;
+}
+function jt(n) {
+  const t = n.layout?.rotation;
+  if (t && "enabled" in t)
+    return {
+      rotation: {
+        mode: t.enabled ? "random" : "none",
+        range: t.range
+      }
+    };
+}
+function kt(n) {
+  const t = n.layout?.sizing?.variance;
+  if (t)
+    return {
+      sizing: {
+        mode: "adaptive",
+        // Legacy variance config implies adaptive mode
+        variance: t
+      }
+    };
+}
+function Wt(n = {}) {
+  const t = jt(n), e = kt(n);
+  let i = n.image;
+  (t || e) && (i = {
+    ...e || {},
+    ...t || {},
+    ...i
+  }, i.rotation && t?.rotation && n.image?.rotation && (i.rotation = {
+    ...t.rotation,
+    ...n.image.rotation
+  }));
+  const o = [...n.loaders ?? []];
+  n.images && n.images.length > 0 && o.unshift({
+    static: {
+      sources: [{ urls: n.images }]
+    }
+  });
+  const r = {
+    loaders: {
+      ...Mt,
+      ...n.config?.loaders ?? {}
+    }
+  }, a = {
+    loaders: o,
+    config: r,
+    image: Ht(Rt, i),
+    layout: { ...y.layout },
+    animation: { ...y.animation },
+    interaction: { ...y.interaction },
+    rendering: { ...y.rendering },
+    styling: Nt(Ct, n.styling)
+  };
+  return n.layout && (a.layout = {
+    ...y.layout,
+    ...n.layout
+  }, n.layout.responsive && (a.layout.responsive = {
+    ...y.layout.responsive,
+    mobile: n.layout.responsive.mobile ? { ...y.layout.responsive.mobile, ...n.layout.responsive.mobile } : y.layout.responsive.mobile,
+    tablet: n.layout.responsive.tablet ? { ...y.layout.responsive.tablet, ...n.layout.responsive.tablet } : y.layout.responsive.tablet
+  }), n.layout.spacing && (a.layout.spacing = {
+    ...y.layout.spacing,
+    ...n.layout.spacing
+  })), n.animation && (a.animation = {
+    ...y.animation,
+    ...n.animation
+  }, n.animation.easing && (a.animation.easing = {
+    ...y.animation.easing,
+    ...n.animation.easing
+  }), n.animation.queue && (a.animation.queue = {
+    ...y.animation.queue,
+    ...n.animation.queue
+  }), n.animation.performance && (a.animation.performance = {
+    ...y.animation.performance,
+    ...n.animation.performance
+  }), n.animation.entry && (a.animation.entry = {
+    ...y.animation.entry,
+    ...n.animation.entry,
+    start: n.animation.entry.start ? {
+      ...y.animation.entry.start,
+      ...n.animation.entry.start,
+      circular: n.animation.entry.start.circular ? { ...y.animation.entry.start.circular, ...n.animation.entry.start.circular } : y.animation.entry.start.circular
+    } : y.animation.entry.start,
+    timing: n.animation.entry.timing ? { ...y.animation.entry.timing, ...n.animation.entry.timing } : y.animation.entry.timing,
+    path: n.animation.entry.path ? { ...bt, ...n.animation.entry.path } : y.animation.entry.path,
+    rotation: n.animation.entry.rotation ? { ...yt, ...n.animation.entry.rotation } : y.animation.entry.rotation,
+    scale: n.animation.entry.scale ? { ...vt, ...n.animation.entry.scale } : y.animation.entry.scale
+  })), n.interaction && (a.interaction = {
+    ...y.interaction,
+    ...n.interaction
+  }, n.interaction.focus && (a.interaction.focus = {
+    ...y.interaction.focus,
+    ...n.interaction.focus
+  }), n.interaction.navigation && (a.interaction.navigation = {
+    ...y.interaction.navigation,
+    ...n.interaction.navigation
+  }), n.interaction.gestures && (a.interaction.gestures = {
+    ...y.interaction.gestures,
+    ...n.interaction.gestures
+  })), n.rendering && (a.rendering = {
+    ...y.rendering,
+    ...n.rendering
+  }, n.rendering.responsive && (a.rendering.responsive = {
+    ...y.rendering.responsive,
+    ...n.rendering.responsive,
+    breakpoints: n.rendering.responsive.breakpoints ? { ...y.rendering.responsive.breakpoints, ...n.rendering.responsive.breakpoints } : y.rendering.responsive.breakpoints,
+    mobileDetection: n.rendering.responsive.mobileDetection ? n.rendering.responsive.mobileDetection : y.rendering.responsive.mobileDetection
+  }), n.rendering.ui && (a.rendering.ui = {
+    ...y.rendering.ui,
+    ...n.rendering.ui
+  }), n.rendering.performance && (a.rendering.performance = {
+    ...y.rendering.performance,
+    ...n.rendering.performance
+  })), a.config.debug = {
+    ...Lt,
+    ...n.config?.debug ?? {}
+  }, a;
+}
+function Gt(n, t) {
+  return { ...n ? Et[n] : Et.playful, ...t };
+}
+function qt(n, t) {
+  return { ...n ? St[n] : St.gentle, ...t };
+}
+function Yt(n, t) {
+  return { ...n ? It[n] : It.gentle, ...t };
+}
+class Xt {
+  constructor(t) {
+    this.activeAnimations = /* @__PURE__ */ new Map(), this.animationIdCounter = 0, this.config = t;
+  }
+  /**
+   * Build transform string from transform params
+   * Always starts with centering transform to match image positioning system
+   */
+  buildTransformString(t) {
+    const e = ["translate(-50%, -50%)"];
+    if (t.x !== void 0 || t.y !== void 0) {
+      const i = t.x ?? 0, o = t.y ?? 0;
+      e.push(`translate(${i}px, ${o}px)`);
+    }
+    return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), t.scale !== void 0 && e.push(`scale(${t.scale})`), e.join(" ");
+  }
+  /**
+   * Start a cancellable transform animation using Web Animations API
+   * @param element - The element to animate
+   * @param from - Starting transform state
+   * @param to - Ending transform state
+   * @param duration - Animation duration in ms (optional)
+   * @param easing - CSS easing function (optional)
+   * @returns AnimationHandle that can be used to cancel or query the animation
+   */
+  animateTransformCancellable(t, e, i, o = null, s = null) {
+    this.cancelAllAnimations(t);
+    const r = o ?? this.config.duration, a = s ?? this.config.easing.default, h = this.buildTransformString(e), c = this.buildTransformString(i);
+    t.style.transition = "none";
+    const u = t.animate(
+      [
+        { transform: h },
+        { transform: c }
+      ],
+      {
+        duration: r,
+        easing: a,
+        fill: "forwards"
+        // Keep final state after animation
+      }
+    ), l = {
+      id: `anim-${++this.animationIdCounter}`,
+      element: t,
+      animation: u,
+      fromState: e,
+      toState: i,
+      startTime: performance.now(),
+      duration: r
+    };
+    return this.activeAnimations.set(t, l), u.finished.then(() => {
+      t.style.transform = c, this.activeAnimations.delete(t);
+    }).catch(() => {
+      this.activeAnimations.delete(t);
+    }), l;
+  }
+  /**
+   * Cancel an active animation
+   * @param handle - The animation handle to cancel
+   * @param commitStyle - If true, keeps current position; if false, no style change
+   * @returns Snapshot of where the animation was when cancelled
+   */
+  cancelAnimation(t, e = !0) {
+    const i = this.getCurrentTransform(t.element);
+    if (t.animation.cancel(), e) {
+      const o = this.buildTransformString({
+        x: i.x,
+        y: i.y,
+        rotation: i.rotation,
+        scale: i.scale
+      });
+      t.element.style.transform = o;
+    }
+    return this.activeAnimations.delete(t.element), i;
+  }
+  /**
+   * Cancel all animations on an element
+   * Uses Web Animations API to find and cancel ALL animations, not just tracked ones
+   * @param element - The element to cancel animations for
+   */
+  cancelAllAnimations(t) {
+    const e = this.activeAnimations.get(t);
+    e && this.cancelAnimation(e, !1);
+    const i = t.getAnimations();
+    for (const o of i)
+      o.cancel();
+  }
+  /**
+   * Get current transform state of an element (works mid-animation)
+   * Uses DOMMatrix to parse the computed transform
+   * @param element - The element to query
+   * @returns Current transform snapshot
+   */
+  getCurrentTransform(t) {
+    const i = getComputedStyle(t).transform;
+    if (i === "none" || !i)
+      return { x: 0, y: 0, rotation: 0, scale: 1 };
+    const o = new DOMMatrix(i), s = Math.sqrt(o.a * o.a + o.b * o.b), r = Math.atan2(o.b, o.a) * (180 / Math.PI), a = o.e, h = o.f;
+    return { x: a, y: h, rotation: r, scale: s };
+  }
+  /**
+   * Check if an element has an active animation
+   * @param element - The element to check
+   * @returns True if animation is in progress
+   */
+  hasActiveAnimation(t) {
+    return this.activeAnimations.has(t);
+  }
+  /**
+   * Get animation handle for an element if it exists
+   * @param element - The element to query
+   * @returns AnimationHandle or undefined
+   */
+  getAnimationHandle(t) {
+    return this.activeAnimations.get(t);
+  }
+  /**
+   * Animate element transform with smooth easing (CSS transitions - legacy method)
+   * @param element - The element to animate
+   * @param properties - Transform properties {x, y, rotation, scale}
+   * @param duration - Animation duration in ms (optional)
+   * @param easing - CSS easing function (optional)
+   * @returns Promise that resolves when animation completes
+   */
+  animateTransform(t, e, i = null, o = null) {
+    return new Promise((s) => {
+      const r = i ?? this.config.duration, a = o ?? this.config.easing.default;
+      t.style.transition = `transform ${r}ms ${a}, box-shadow ${r}ms ${a}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
+        s();
+      }, r);
+    });
+  }
+  /**
+   * Reset element to its original transform
+   * @param element - The element to reset
+   * @param originalState - Original transform state {x, y, rotation, scale}
+   * @returns Promise that resolves when animation completes
+   */
+  resetTransform(t, e) {
+    return this.animateTransform(t, e);
+  }
+  /**
+   * Remove transition styles from element
+   * @param element - The element to clear
+   */
+  clearTransition(t) {
+    t.style.transition = "";
+  }
+  /**
+   * Utility: Wait for a specified duration
+   * @param ms - Milliseconds to wait
+   * @returns Promise that resolves after the specified duration
+   */
+  wait(t) {
+    return new Promise((e) => setTimeout(e, t));
+  }
+}
+function V(n, t, e) {
+  return n + (t - n) * e;
+}
+function Bt(n, t, e, i) {
+  const { overshoot: o, bounces: s, decayRatio: r } = i, a = e.x - t.x, h = e.y - t.y, c = Jt(s, r);
+  let u = 0, l = 0, d = 1, m = o, b = !1;
+  for (let g = 0; g < c.length; g++)
+    if (n <= c[g].time) {
+      l = g === 0 ? 0 : c[g - 1].time, d = c[g].time, m = c[g].overshoot, b = c[g].isOvershoot;
+      break;
+    }
+  const p = (n - l) / (d - l);
+  if (b)
+    u = 1 + m * ot(p);
+  else if (l === 0)
+    u = ot(p);
+  else {
+    const f = 1 + (c.find(
+      (E, v) => E.time > l && v > 0 && c[v - 1].isOvershoot
+    )?.overshoot || m);
+    u = V(f, 1, ot(p));
+  }
+  return {
+    x: t.x + a * u,
+    y: t.y + h * u
+  };
+}
+function Jt(n, t) {
+  const e = [];
+  let i = 0.6;
+  e.push({ time: i, overshoot: 0, isOvershoot: !1 });
+  let o = 0.15;
+  const r = 0.4 / (n * 2);
+  for (let a = 0; a < n; a++)
+    i += r, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += r, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
+  return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
+}
+function Vt(n, t, e, i) {
+  const { stiffness: o, damping: s, mass: r, oscillations: a } = i, h = e.x - t.x, c = e.y - t.y, u = Math.sqrt(o / r), l = s / (2 * Math.sqrt(o * r));
+  let d;
+  if (l < 1) {
+    const m = u * Math.sqrt(1 - l * l), b = Math.exp(-l * u * n * 3), p = Math.cos(m * n * a * Math.PI);
+    d = 1 - b * p;
+  } else
+    d = 1 - Math.exp(-u * n * 3);
+  return d = Math.max(0, Math.min(d, 1.3)), {
+    x: t.x + h * d,
+    y: t.y + c * d
+  };
+}
+function Kt(n, t, e, i) {
+  const { amplitude: o, frequency: s, decay: r, decayRate: a, phase: h } = i, c = e.x - t.x, u = e.y - t.y, l = Math.sqrt(c * c + u * u), d = l > 0 ? -u / l : 0, m = l > 0 ? c / l : 1, b = s * Math.PI * 2 * n + h, p = r ? Math.pow(1 - n, a) : 1, g = o * Math.sin(b) * p, f = Zt(n);
+  return {
+    x: V(t.x, e.x, f) + g * d,
+    y: V(t.y, e.y, f) + g * m
+  };
+}
+function ot(n) {
+  return 1 - (1 - n) * (1 - n);
+}
+function Zt(n) {
+  return 1 - Math.pow(1 - n, 3);
+}
+function Qt(n, t, e) {
+  const { amplitude: i, frequency: o, decay: s } = e, r = Math.sin(n * o * Math.PI * 2), a = s ? Math.pow(1 - n, 2) : 1, h = i * r * a;
+  return t + h;
+}
+function te(n, t, e) {
+  const { overshoot: i, bounces: o } = e, s = [];
+  s.push({ time: 0.5, scale: i });
+  let r = i;
+  const a = 0.5, c = 0.5 / (o * 2);
+  let u = 0.5;
+  for (let d = 0; d < o; d++) {
+    const m = 1 - (r - 1) * a;
+    u += c, s.push({ time: u, scale: m }), r = 1 + (r - 1) * a * a, u += c, d < o - 1 && s.push({ time: u, scale: r });
+  }
+  s.push({ time: 1, scale: 1 });
+  let l = 1;
+  for (let d = 0; d < s.length; d++)
+    if (n <= s[d].time) {
+      const m = d === 0 ? 0 : s[d - 1].time, b = d === 0 ? 1 : s[d - 1].scale, p = (n - m) / (s[d].time - m), g = ot(p);
+      l = b + (s[d].scale - b) * g;
+      break;
+    }
+  return l * t;
+}
+function ee(n) {
+  const {
+    element: t,
+    startPosition: e,
+    endPosition: i,
+    pathConfig: o,
+    duration: s,
+    imageWidth: r,
+    imageHeight: a,
+    rotation: h,
+    scale: c,
+    onComplete: u,
+    rotationConfig: l,
+    startRotation: d,
+    scaleConfig: m,
+    startScale: b
+  } = n, p = o.type, g = d !== void 0 && d !== h, f = l?.mode === "wobble", E = l?.wobble || { amplitude: 15, frequency: 3, decay: !0 }, v = g || f, w = b !== void 0 && b !== c, S = m?.mode === "pop", x = m?.pop || { overshoot: 1.2, bounces: 1 };
+  if ((p === "linear" || p === "arc") && !v && !(w || S)) {
+    u && u();
+    return;
+  }
+  const L = performance.now(), z = -r / 2, U = -a / 2;
+  function P(Y) {
+    const H = Y - L, T = Math.min(H / s, 1);
+    let O;
+    switch (p) {
+      case "bounce": {
+        const D = Gt(
+          o.bouncePreset,
+          o.bounce
+        );
+        O = Bt(T, e, i, D);
+        break;
+      }
+      case "elastic": {
+        const D = qt(
+          o.elasticPreset,
+          o.elastic
+        );
+        O = Vt(T, e, i, D);
+        break;
+      }
+      case "wave": {
+        const D = Yt(
+          o.wavePreset,
+          o.wave
+        );
+        O = Kt(T, e, i, D);
+        break;
+      }
+      default:
+        O = {
+          x: V(e.x, i.x, T),
+          y: V(e.y, i.y, T)
+        };
+    }
+    const k = O.x - i.x, N = O.y - i.y;
+    let R;
+    f ? R = Qt(T, h, E) : g ? R = V(d, h, T) : R = h;
+    let C;
+    S ? C = te(T, c, x) : w ? C = V(b, c, T) : C = c, t.style.transform = `translate(${z}px, ${U}px) translate(${k}px, ${N}px) rotate(${R}deg) scale(${C})`, T < 1 ? requestAnimationFrame(P) : (t.style.transform = `translate(${z}px, ${U}px) rotate(${h}deg) scale(${c})`, u && u());
+  }
+  requestAnimationFrame(P);
+}
+function ie(n) {
+  return n === "bounce" || n === "elastic" || n === "wave";
+}
+const ne = {
+  radial: "center",
+  spiral: "center",
+  grid: "top",
+  cluster: "nearest-edge",
+  random: "nearest-edge",
+  wave: "left"
+};
+class oe {
+  constructor(t, e) {
+    this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || bt, this.rotationConfig = t.rotation || yt, this.scaleConfig = t.scale || vt;
+  }
+  /**
+   * Get the effective start position, considering layout-aware defaults
+   */
+  resolveStartPosition() {
+    return this.config.start.position ? this.config.start.position : ne[this.layoutAlgorithm] || "nearest-edge";
+  }
+  /**
+   * Calculate the starting position for an image's entry animation
+   */
+  calculateStartPosition(t, e, i, o, s) {
+    const r = this.resolvedStartPosition, a = this.config.start.offset ?? 100;
+    switch (r) {
+      case "nearest-edge":
+        return this.calculateNearestEdge(t, e, i, a);
+      case "top":
+        return this.calculateEdgePosition("top", t, e, i, a);
+      case "bottom":
+        return this.calculateEdgePosition("bottom", t, e, i, a);
+      case "left":
+        return this.calculateEdgePosition("left", t, e, i, a);
+      case "right":
+        return this.calculateEdgePosition("right", t, e, i, a);
+      case "center":
+        return this.calculateCenterPosition(i, t, e);
+      case "random-edge":
+        return this.calculateRandomEdge(t, e, i, a);
+      case "circular":
+        return this.calculateCircularPosition(
+          t,
+          e,
+          i,
+          o,
+          s
+        );
+      default:
+        return this.calculateNearestEdge(t, e, i, a);
+    }
+  }
+  /**
+   * Calculate start position from the nearest edge (current default behavior)
+   */
+  calculateNearestEdge(t, e, i, o) {
+    const s = t.x, r = t.y, a = s, h = i.width - s, c = r, u = i.height - r, l = Math.min(a, h, c, u);
+    let d = t.x, m = t.y;
+    return l === a ? d = -(e.width + o) : l === h ? d = i.width + o : l === c ? m = -(e.height + o) : m = i.height + o, { x: d, y: m };
+  }
+  /**
+   * Calculate start position from a specific edge
+   */
+  calculateEdgePosition(t, e, i, o, s) {
+    let r = e.x, a = e.y;
+    switch (t) {
+      case "top":
+        a = -(i.height + s);
+        break;
+      case "bottom":
+        a = o.height + s;
+        break;
+      case "left":
+        r = -(i.width + s);
+        break;
+      case "right":
+        r = o.width + s;
+        break;
+    }
+    return { x: r, y: a };
+  }
+  /**
+   * Calculate start position from center with scale animation
+   */
+  calculateCenterPosition(t, e, i) {
+    const o = t.width / 2, s = t.height / 2;
+    return {
+      x: o,
+      y: s,
+      useScale: !0
+      // Signal to use scale animation from 0
+    };
+  }
+  /**
+   * Calculate start position from a random edge
+   */
+  calculateRandomEdge(t, e, i, o) {
+    const s = ["top", "bottom", "left", "right"], r = s[Math.floor(Math.random() * s.length)];
+    return this.calculateEdgePosition(r, t, e, i, o);
+  }
+  /**
+   * Calculate start position on a circle around the container
+   */
+  calculateCircularPosition(t, e, i, o, s) {
+    const r = this.config.start.circular || {}, a = r.distribution || "even";
+    let h;
+    const c = r.radius || "120%";
+    if (typeof c == "string" && c.endsWith("%")) {
+      const p = parseFloat(c) / 100;
+      h = Math.sqrt(
+        i.width ** 2 + i.height ** 2
+      ) * p / 2;
+    } else
+      h = typeof c == "number" ? c : 500;
+    let u;
+    a === "even" ? u = o / s * 2 * Math.PI : u = Math.random() * 2 * Math.PI;
+    const l = i.width / 2, d = i.height / 2, m = l + Math.cos(u) * h, b = d + Math.sin(u) * h;
+    return { x: m, y: b };
+  }
+  /**
+   * Get animation parameters for an image
+   */
+  getAnimationParams(t) {
+    const e = this.config.timing.duration, i = this.config.easing;
+    return {
+      startTransform: "",
+      // Will be computed by caller based on start position
+      duration: e,
+      delay: 0,
+      easing: i
+    };
+  }
+  /**
+   * Build a CSS transform string for the start position
+   * Uses pixel-based centering offset for reliable cross-browser behavior
+   */
+  buildStartTransform(t, e, i, o, s, r, a, h) {
+    const c = t.x - e.x, u = t.y - e.y, l = a !== void 0 ? a : i, d = h !== void 0 ? h : o, m = s !== void 0 ? -s / 2 : 0, b = r !== void 0 ? -r / 2 : 0, p = s !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
+    return t.useScale ? `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(0)` : `${p} translate(${c}px, ${u}px) rotate(${l}deg) scale(${d})`;
+  }
+  /**
+   * Build the final CSS transform string
+   * Uses pixel-based centering offset for reliable cross-browser behavior
+   */
+  buildFinalTransform(t, e, i, o) {
+    if (i !== void 0 && o !== void 0) {
+      const s = -i / 2, r = -o / 2;
+      return `translate(${s}px, ${r}px) rotate(${t}deg) scale(${e})`;
+    }
+    return `translate(-50%, -50%) rotate(${t}deg) scale(${e})`;
+  }
+  /**
+   * Get the transition CSS for entry animation
+   * For JS-animated paths, only animate opacity (transform handled by JS)
+   */
+  getTransitionCSS() {
+    const t = this.config.timing.duration, e = this.config.easing;
+    return this.requiresJSAnimation() ? `opacity ${t}ms ease-out` : `opacity ${t}ms ease-out, transform ${t}ms ${e}`;
+  }
+  /**
+   * Check if the current path type requires JavaScript animation
+   */
+  requiresJSAnimation() {
+    return ie(this.pathConfig.type);
+  }
+  /**
+   * Get the path configuration
+   */
+  getPathConfig() {
+    return this.pathConfig;
+  }
+  /**
+   * Get the path type
+   */
+  getPathType() {
+    return this.pathConfig.type;
+  }
+  /**
+   * Get animation timing configuration
+   */
+  getTiming() {
+    return {
+      duration: this.config.timing.duration
+    };
+  }
+  /**
+   * Get the rotation configuration
+   */
+  getRotationConfig() {
+    return this.rotationConfig;
+  }
+  /**
+   * Get the rotation mode
+   */
+  getRotationMode() {
+    return this.rotationConfig.mode;
+  }
+  /**
+   * Calculate the starting rotation for an entry animation
+   * @param finalRotation - The final rotation from the layout
+   * @returns The starting rotation in degrees
+   */
+  calculateStartRotation(t) {
+    switch (this.rotationConfig.mode) {
+      case "none":
+        return t;
+      case "settle": {
+        const i = this.rotationConfig.startRotation;
+        if (i === void 0)
+          return t + (Math.random() - 0.5) * 60;
+        if (typeof i == "number")
+          return i;
+        const o = i.max - i.min;
+        return i.min + Math.random() * o;
+      }
+      case "spin": {
+        const i = this.rotationConfig.spinCount ?? 1, o = this.resolveSpinDirection(t);
+        return t + i * 360 * o;
+      }
+      case "random":
+        return t + (Math.random() - 0.5) * 60;
+      case "wobble":
+        return t;
+      default:
+        return t;
+    }
+  }
+  /**
+   * Resolve spin direction based on config
+   * @returns 1 for clockwise, -1 for counterclockwise
+   */
+  resolveSpinDirection(t) {
+    switch (this.rotationConfig.direction ?? "auto") {
+      case "clockwise":
+        return -1;
+      // Negative rotation = clockwise spin to final
+      case "counterclockwise":
+        return 1;
+      // Positive rotation = counterclockwise spin to final
+      case "random":
+        return Math.random() < 0.5 ? 1 : -1;
+      default:
+        return t >= 0 ? 1 : -1;
+    }
+  }
+  /**
+   * Check if the current rotation mode requires JavaScript animation
+   * (as opposed to CSS transitions)
+   */
+  requiresJSRotation() {
+    return this.rotationConfig.mode === "wobble";
+  }
+  /**
+   * Calculate wobble rotation for a given animation progress
+   * @param progress - Animation progress from 0 to 1
+   * @param finalRotation - The final rotation in degrees
+   * @returns The current rotation in degrees
+   */
+  calculateWobbleRotation(t, e) {
+    if (this.rotationConfig.mode !== "wobble")
+      return e;
+    const i = this.rotationConfig.wobble || {
+      amplitude: 15,
+      frequency: 3,
+      decay: !0
+    }, { amplitude: o, frequency: s, decay: r } = i, a = Math.sin(t * s * Math.PI * 2), h = r ? Math.pow(1 - t, 2) : 1, c = o * a * h;
+    return e + c;
+  }
+  /**
+   * Get the scale configuration
+   */
+  getScaleConfig() {
+    return this.scaleConfig;
+  }
+  /**
+   * Get the scale mode
+   */
+  getScaleMode() {
+    return this.scaleConfig.mode;
+  }
+  /**
+   * Calculate the starting scale for an entry animation
+   * @param finalScale - The final scale from the layout
+   * @returns The starting scale
+   */
+  calculateStartScale(t) {
+    switch (this.scaleConfig.mode) {
+      case "none":
+        return t;
+      case "grow":
+        return (this.scaleConfig.startScale ?? 0.3) * t;
+      case "shrink":
+        return (this.scaleConfig.startScale ?? 1.5) * t;
+      case "pop":
+        return t;
+      case "random": {
+        const i = this.scaleConfig.range ?? { min: 0.5, max: 1 };
+        return (i.min + Math.random() * (i.max - i.min)) * t;
+      }
+      default:
+        return t;
+    }
+  }
+  /**
+   * Check if the current scale mode requires JavaScript animation
+   * (as opposed to CSS transitions)
+   */
+  requiresJSScale() {
+    return this.scaleConfig.mode === "pop";
+  }
+  /**
+   * Calculate pop scale for a given animation progress
+   * @param progress - Animation progress from 0 to 1
+   * @param finalScale - The final scale value
+   * @returns The current scale value with bounce effect
+   */
+  calculatePopScale(t, e) {
+    if (this.scaleConfig.mode !== "pop")
+      return e;
+    const i = this.scaleConfig.pop || {
+      overshoot: 1.2,
+      bounces: 1
+    }, { overshoot: o, bounces: s } = i, r = this.generateScaleBounceKeyframes(s, o);
+    let a = e;
+    for (let h = 0; h < r.length; h++)
+      if (t <= r[h].time) {
+        const c = h === 0 ? 0 : r[h - 1].time, u = h === 0 ? e : r[h - 1].scale, l = (t - c) / (r[h].time - c), d = this.easeOutQuad(l);
+        a = u + (r[h].scale - u) * d;
+        break;
+      }
+    return a * e;
+  }
+  /**
+   * Generate keyframes for scale bounce animation
+   */
+  generateScaleBounceKeyframes(t, e) {
+    const i = [];
+    i.push({ time: 0.5, scale: e });
+    let o = e;
+    const s = 0.5, a = 0.5 / (t * 2);
+    let h = 0.5;
+    for (let c = 0; c < t; c++) {
+      const u = 1 - (o - 1) * s;
+      h += a, i.push({ time: h, scale: u }), o = 1 + (o - 1) * s * s, h += a, c < t - 1 && i.push({ time: h, scale: o });
+    }
+    return i.push({ time: 1, scale: 1 }), i;
+  }
+  /**
+   * Easing function for smooth transitions
+   */
+  easeOutQuad(t) {
+    return 1 - (1 - t) * (1 - t);
+  }
+}
+class se {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate random layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides (includes fixedHeight)
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = this.config.spacing.padding, h = i.fixedHeight ?? 200, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || m !== 1, g = h * 1.5 / 2, f = h / 2, E = s - a - g, v = r - a - f, w = a + g, S = a + f;
+    for (let x = 0; x < t; x++) {
+      const A = this.random(w, E), L = this.random(S, v), z = c === "random" ? this.random(u, l) : 0, U = b ? this.random(d, m) : 1, P = h * U, Y = {
+        id: x,
+        x: A,
+        y: L,
+        rotation: z,
+        scale: U,
+        baseSize: P
+      };
+      o.push(Y);
+    }
+    return o;
+  }
+  /**
+   * Utility: Generate random number between min and max
+   * @param min - Minimum value
+   * @param max - Maximum value
+   * @returns Random number in range
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+class ae {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate radial layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.imageConfig.rotation?.mode ?? "none", c = this.imageConfig.rotation?.range?.min ?? -15, u = this.imageConfig.rotation?.range?.max ?? 15, l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || d !== 1, b = this.config.scaleDecay ?? 0, p = i.fixedHeight ?? a, g = s / 2, f = r / 2, E = Math.ceil(Math.sqrt(t));
+    if (t > 0) {
+      const S = m ? this.random(l, d) : 1, x = p * S;
+      o.push({
+        id: 0,
+        x: g,
+        y: f,
+        rotation: h === "random" ? this.random(c * 0.33, u * 0.33) : 0,
+        // Less rotation for center
+        scale: S,
+        baseSize: x,
+        zIndex: 100
+        // Center image is highest
+      });
+    }
+    let v = 1, w = 1;
+    for (; v < t; ) {
+      const S = w / E, x = b > 0 ? 1 - S * b * 0.5 : 1, A = w * (p * 0.8), L = A * 1.5, z = Math.PI * (3 * (L + A) - Math.sqrt((3 * L + A) * (L + 3 * A))), U = this.estimateWidth(p), P = Math.floor(z / (U * 0.7));
+      if (P === 0) {
+        w++;
+        continue;
+      }
+      const Y = 2 * Math.PI / P, H = w * (20 * Math.PI / 180);
+      for (let T = 0; T < P && v < t; T++) {
+        const O = T * Y + H, k = m ? this.random(l, d) : 1, N = x * k, R = p * N;
+        let C = g + Math.cos(O) * L, D = f + Math.sin(O) * A;
+        const $ = this.config.spacing.padding ?? 50, _ = R * 1.5 / 2, M = R / 2;
+        C - _ < $ ? C = $ + _ : C + _ > s - $ && (C = s - $ - _), D - M < $ ? D = $ + M : D + M > r - $ && (D = r - $ - M);
+        const W = h === "random" ? this.random(c, u) : 0;
+        o.push({
+          id: v,
+          x: C,
+          y: D,
+          rotation: W,
+          scale: N,
+          baseSize: R,
+          zIndex: Math.max(1, 100 - w)
+          // Outer rings have lower z-index
+        }), v++;
+      }
+      w++;
+    }
+    return o;
+  }
+  /**
+   * Estimate image width based on height
+   * Assumes landscape aspect ratio (approximately 1.4:1)
+   * @param height - Image height
+   * @returns Estimated width
+   */
+  estimateWidth(t) {
+    return t * 1.4;
+  }
+  /**
+   * Utility: Generate random number between min and max
+   * @param min - Minimum value
+   * @param max - Maximum value
+   * @returns Random number in range
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+const re = {
+  columns: "auto",
+  rows: "auto",
+  stagger: "none",
+  jitter: 0,
+  overlap: 0,
+  fillDirection: "row",
+  alignment: "center",
+  gap: 10,
+  overflowOffset: 0.25
+}, At = [
+  { x: 1, y: 1 },
+  // bottom-right
+  { x: -1, y: -1 },
+  // upper-left
+  { x: 1, y: -1 },
+  // upper-right
+  { x: -1, y: 1 },
+  // bottom-left
+  { x: -1, y: 0 },
+  // left
+  { x: 1, y: 0 },
+  // right
+  { x: 0, y: -1 },
+  // up
+  { x: 0, y: 1 }
+  // down
+];
+class ce {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate grid layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides (includes fixedHeight)
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = { ...re, ...this.config.grid }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.sizing?.variance?.min ?? 1, d = this.imageConfig.sizing?.variance?.max ?? 1, m = l !== 1 || d !== 1, b = s - 2 * h, p = r - 2 * h, { columns: g, rows: f } = this.calculateGridDimensions(
+      t,
+      b,
+      p,
+      c,
+      a
+    ), E = a.stagger === "row", v = a.stagger === "column", w = E ? g + 0.5 : g, S = v ? f + 0.5 : f, x = (b - a.gap * (g - 1)) / w, A = (p - a.gap * (f - 1)) / S, L = E ? x / 2 : 0, z = v ? A / 2 : 0, U = 1 + a.overlap, P = Math.min(x, A) * U, Y = i.fixedHeight ? Math.min(i.fixedHeight, P) : P, H = g * x + (g - 1) * a.gap + L, T = f * A + (f - 1) * a.gap + z, O = h + (b - H) / 2, k = h + (p - T) / 2, N = g * f, R = a.columns !== "auto" && a.rows !== "auto", C = R && t > N;
+    typeof window < "u" && (window.__gridOverflowDebug = {
+      gridConfigColumns: a.columns,
+      gridConfigRows: a.rows,
+      columns: g,
+      rows: f,
+      cellCount: N,
+      hasFixedGrid: R,
+      imageCount: t,
+      isOverflowMode: C
+    });
+    const D = C ? new Array(N).fill(0) : [], $ = Math.min(x, A) * a.overflowOffset;
+    for (let F = 0; F < t; F++) {
+      let _, M, W = 0;
+      if (C && F >= N) {
+        const q = F - N, j = q % N;
+        W = Math.floor(q / N) + 1, D[j]++, a.fillDirection === "row" ? (_ = j % g, M = Math.floor(j / g)) : (M = j % f, _ = Math.floor(j / f));
+      } else
+        a.fillDirection === "row" ? (_ = F % g, M = Math.floor(F / g)) : (M = F % f, _ = Math.floor(F / f));
+      let G = O + _ * (x + a.gap) + x / 2, X = k + M * (A + a.gap) + A / 2;
+      if (a.stagger === "row" && M % 2 === 1 ? G += x / 2 : a.stagger === "column" && _ % 2 === 1 && (X += A / 2), W > 0) {
+        const q = (W - 1) % At.length, j = At[q];
+        G += j.x * $, X += j.y * $;
+      }
+      if (a.jitter > 0) {
+        const q = x / 2 * a.jitter, j = A / 2 * a.jitter;
+        G += this.random(-q, q), X += this.random(-j, j);
+      }
+      let B = G, J = X;
+      if (!C && a.fillDirection === "row") {
+        const q = t % g || g;
+        if (M === Math.floor((t - 1) / g) && q < g) {
+          const xt = q * x + (q - 1) * a.gap;
+          let gt = 0;
+          a.alignment === "center" ? gt = (H - xt) / 2 : a.alignment === "end" && (gt = H - xt), B += gt;
+        }
+      }
+      const rt = m ? this.random(l, d) : 1, K = Y * rt, it = K * 1.5 / 2, nt = K / 2, lt = h + it, ht = s - h - it, Ot = h + nt, Dt = r - h - nt;
+      B = Math.max(lt, Math.min(B, ht)), J = Math.max(Ot, Math.min(J, Dt));
+      let dt = 0;
+      if (u === "random") {
+        const q = this.imageConfig.rotation?.range?.min ?? -15, j = this.imageConfig.rotation?.range?.max ?? 15;
+        a.jitter > 0 ? dt = this.random(q * a.jitter, j * a.jitter) : dt = this.random(q, j);
+      }
+      let ut;
+      C && W > 0 ? ut = 50 - W : ut = C ? 100 + F : F + 1, o.push({
+        id: F,
+        x: B,
+        y: J,
+        rotation: dt,
+        scale: rt,
+        baseSize: K,
+        zIndex: ut
+      });
+    }
+    return o;
+  }
+  /**
+   * Calculate optimal grid dimensions based on image count and container
+   */
+  calculateGridDimensions(t, e, i, o, s) {
+    let r, a;
+    if (s.columns !== "auto" && s.rows !== "auto")
+      r = s.columns, a = s.rows;
+    else if (s.columns !== "auto")
+      r = s.columns, a = Math.ceil(t / r);
+    else if (s.rows !== "auto")
+      a = s.rows, r = Math.ceil(t / a);
+    else {
+      const h = e / i;
+      for (r = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), a = Math.ceil(t / r); r > 1 && (r - 1) * a >= t; )
+        r--;
+    }
+    return { columns: Math.max(1, r), rows: Math.max(1, a) };
+  }
+  /**
+   * Utility: Generate random number between min and max
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+const le = Math.PI * (3 - Math.sqrt(5)), he = {
+  spiralType: "golden",
+  direction: "counterclockwise",
+  tightness: 1,
+  scaleDecay: 0,
+  startAngle: 0
+};
+class de {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate spiral layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides (includes fixedHeight)
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = { ...he, ...this.config.spiral }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.config.scaleDecay ?? a.scaleDecay, f = s / 2, E = r / 2, v = Math.min(
+      f - h - c / 2,
+      E - h - c / 2
+    ), w = a.direction === "clockwise" ? -1 : 1;
+    for (let S = 0; S < t; S++) {
+      let x, A;
+      if (a.spiralType === "golden")
+        x = S * le * w + a.startAngle, A = this.calculateGoldenRadius(S, t, v, a.tightness);
+      else if (a.spiralType === "archimedean") {
+        const G = S * 0.5 * a.tightness;
+        x = G * w + a.startAngle, A = this.calculateArchimedeanRadius(G, t, v, a.tightness);
+      } else {
+        const G = S * 0.3 * a.tightness;
+        x = G * w + a.startAngle, A = this.calculateLogarithmicRadius(G, t, v, a.tightness);
+      }
+      const L = f + Math.cos(x) * A, z = E + Math.sin(x) * A, U = A / v, P = g > 0 ? 1 - U * g * 0.5 : 1, Y = p ? this.random(m, b) : 1, H = P * Y, T = c * H, k = T * 1.5 / 2, N = T / 2, R = h + k, C = s - h - k, D = h + N, $ = r - h - N, F = Math.max(R, Math.min(L, C)), _ = Math.max(D, Math.min(z, $));
+      let M = 0;
+      if (u === "random") {
+        const G = x * 180 / Math.PI % 360, X = this.random(l, d);
+        M = a.spiralType === "golden" ? X : G * 0.1 + X * 0.9;
+      } else u === "tangent" && (M = this.calculateSpiralTangent(x, A, a));
+      const W = t - S;
+      o.push({
+        id: S,
+        x: F,
+        y: _,
+        rotation: M,
+        scale: H,
+        baseSize: T,
+        zIndex: W
+      });
+    }
+    return o;
+  }
+  /**
+   * Calculate tangent angle for spiral curve at given position
+   * This aligns the image along the spiral's direction of travel
+   */
+  calculateSpiralTangent(t, e, i) {
+    let o;
+    if (i.spiralType === "golden")
+      o = t + Math.PI / 2;
+    else if (i.spiralType === "archimedean") {
+      const r = 1 / i.tightness, a = Math.atan(e / r);
+      o = t + a;
+    } else {
+      const r = 0.15 / i.tightness, a = Math.atan(1 / r);
+      o = t + a;
+    }
+    return o * 180 / Math.PI % 360 - 90;
+  }
+  /**
+   * Calculate radius for golden spiral (Vogel's model)
+   * Creates even distribution like sunflower seeds
+   */
+  calculateGoldenRadius(t, e, i, o) {
+    const r = i / Math.sqrt(e) * Math.sqrt(t) / o;
+    return Math.min(r, i);
+  }
+  /**
+   * Calculate radius for Archimedean spiral
+   * r = a + b*θ (constant spacing between arms)
+   */
+  calculateArchimedeanRadius(t, e, i, o) {
+    const s = e * 0.5 * o;
+    return t / s * i;
+  }
+  /**
+   * Calculate radius for logarithmic (equiangular) spiral
+   * r = a * e^(b*θ)
+   */
+  calculateLogarithmicRadius(t, e, i, o) {
+    const s = i * 0.05, r = 0.15 / o, a = s * Math.exp(r * t), h = e * 0.3 * o, c = s * Math.exp(r * h);
+    return a / c * i;
+  }
+  /**
+   * Utility: Generate random number between min and max
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+const ue = {
+  clusterCount: "auto",
+  clusterSpread: 150,
+  clusterSpacing: 200,
+  density: "uniform",
+  overlap: 0.3,
+  distribution: "gaussian"
+};
+class ge {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate cluster layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides (includes fixedHeight)
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = { ...ue, ...this.config.cluster }, h = this.config.spacing.padding, c = i.fixedHeight ?? 200, u = this.imageConfig.rotation?.mode ?? "none", l = this.imageConfig.rotation?.range?.min ?? -15, d = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, b = this.imageConfig.sizing?.variance?.max ?? 1, p = m !== 1 || b !== 1, g = this.calculateClusterCount(
+      t,
+      a.clusterCount,
+      s,
+      r,
+      a.clusterSpacing
+    ), f = this.generateClusterCenters(
+      g,
+      s,
+      r,
+      h,
+      a
+    ), E = new Array(g).fill(0);
+    for (let w = 0; w < t; w++)
+      E[w % g]++;
+    let v = 0;
+    for (let w = 0; w < g; w++) {
+      const S = f[w], x = E[w];
+      for (let A = 0; A < x; A++) {
+        let L, z;
+        if (a.distribution === "gaussian")
+          L = this.gaussianRandom() * S.spread, z = this.gaussianRandom() * S.spread;
+        else {
+          const M = this.random(0, Math.PI * 2), W = this.random(0, S.spread);
+          L = Math.cos(M) * W, z = Math.sin(M) * W;
+        }
+        const U = 1 + a.overlap * 0.5, P = 1 + a.overlap * 0.3;
+        L /= U, z /= U;
+        const Y = p ? this.random(m, b) : 1, H = P * Y, T = c * H;
+        let O = S.x + L, k = S.y + z;
+        const R = T * 1.5 / 2, C = T / 2;
+        O = Math.max(h + R, Math.min(O, s - h - R)), k = Math.max(h + C, Math.min(k, r - h - C));
+        const D = u === "random" ? this.random(l, d) : 0, F = Math.sqrt(L * L + z * z) / S.spread, _ = Math.round((1 - F) * 50) + 1;
+        o.push({
+          id: v,
+          x: O,
+          y: k,
+          rotation: D,
+          scale: H,
+          baseSize: T,
+          zIndex: _
+        }), v++;
+      }
+    }
+    return o;
+  }
+  /**
+   * Calculate optimal number of clusters based on image count and container
+   */
+  calculateClusterCount(t, e, i, o, s) {
+    if (e !== "auto")
+      return Math.max(1, Math.min(e, t));
+    const a = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
+      i / s * (o / s) * 0.6
+    );
+    return Math.max(1, Math.min(a, h, 10));
+  }
+  /**
+   * Generate cluster center positions with spacing constraints
+   */
+  generateClusterCenters(t, e, i, o, s) {
+    const r = [], h = o + s.clusterSpread, c = e - o - s.clusterSpread, u = o + s.clusterSpread, l = i - o - s.clusterSpread;
+    for (let d = 0; d < t; d++) {
+      let m = null, b = -1;
+      for (let p = 0; p < 100; p++) {
+        const g = {
+          x: this.random(h, c),
+          y: this.random(u, l),
+          spread: this.calculateClusterSpread(s)
+        };
+        let f = 1 / 0;
+        for (const E of r) {
+          const v = g.x - E.x, w = g.y - E.y, S = Math.sqrt(v * v + w * w);
+          f = Math.min(f, S);
+        }
+        if ((r.length === 0 || f > b) && (m = g, b = f), f >= s.clusterSpacing)
+          break;
+      }
+      m && r.push(m);
+    }
+    return r;
+  }
+  /**
+   * Calculate spread for a cluster (may vary if density='varied')
+   */
+  calculateClusterSpread(t) {
+    return t.density === "uniform" ? t.clusterSpread : t.clusterSpread * this.random(0.5, 1.5);
+  }
+  /**
+   * Generate a random number with approximately Gaussian distribution
+   * Using Box-Muller transform
+   */
+  gaussianRandom() {
+    let t = 0, e = 0;
+    for (; t === 0; ) t = Math.random();
+    for (; e === 0; ) e = Math.random();
+    const i = Math.sqrt(-2 * Math.log(t)) * Math.cos(2 * Math.PI * e);
+    return Math.max(-3, Math.min(3, i)) / 3;
+  }
+  /**
+   * Utility: Generate random number between min and max
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+class me {
+  constructor(t, e = {}) {
+    this.config = t, this.imageConfig = e;
+  }
+  /**
+   * Generate wave layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generate(t, e, i = {}) {
+    const o = [], { width: s, height: r } = e, a = i.fixedHeight ?? 200, h = this.config.spacing.padding ?? 50, c = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, l = this.imageConfig.rotation?.range?.max ?? 15, d = this.imageConfig.sizing?.variance?.min ?? 1, m = this.imageConfig.sizing?.variance?.max ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? a, g = {
+      ...$t,
+      ...this.config.wave
+    }, { rows: f, amplitude: E, frequency: v, phaseShift: w, synchronization: S } = g, x = Math.ceil(t / f), z = p * 1.5 / 2, U = h + z, P = s - h - z, Y = P - U, H = x > 1 ? Y / (x - 1) : 0, T = h + E + p / 2, O = r - h - E - p / 2, k = O - T, N = f > 1 ? k / (f - 1) : 0;
+    let R = 0;
+    for (let C = 0; C < f && R < t; C++) {
+      const D = f === 1 ? (T + O) / 2 : T + C * N;
+      let $ = 0;
+      S === "offset" ? $ = C * w : S === "alternating" && ($ = C * Math.PI);
+      for (let F = 0; F < x && R < t; F++) {
+        const _ = x === 1 ? (U + P) / 2 : U + F * H, M = this.calculateWaveY(_, s, E, v, $), W = _, G = D + M, X = b ? this.random(d, m) : 1, B = p * X;
+        let J = 0;
+        c === "tangent" ? J = this.calculateRotation(_, s, E, v, $) : c === "random" && (J = this.random(u, l));
+        const K = B * 1.5 / 2, ct = B / 2, it = h + K, nt = s - h - K, lt = h + ct, ht = r - h - ct;
+        o.push({
+          id: R,
+          x: Math.max(it, Math.min(W, nt)),
+          y: Math.max(lt, Math.min(G, ht)),
+          rotation: J,
+          scale: X,
+          baseSize: B,
+          zIndex: R + 1
+        }), R++;
+      }
+    }
+    return o;
+  }
+  /**
+   * Calculate Y position displacement on wave curve
+   * @param x - Horizontal position
+   * @param containerWidth - Container width
+   * @param amplitude - Wave amplitude
+   * @param frequency - Wave frequency
+   * @param phase - Phase offset
+   * @returns Y displacement from baseline
+   */
+  calculateWaveY(t, e, i, o, s) {
+    const r = t / e;
+    return i * Math.sin(o * r * 2 * Math.PI + s);
+  }
+  /**
+   * Calculate rotation based on wave tangent
+   * @param x - Horizontal position
+   * @param containerWidth - Container width
+   * @param amplitude - Wave amplitude
+   * @param frequency - Wave frequency
+   * @param phase - Phase offset
+   * @returns Rotation angle in degrees
+   */
+  calculateRotation(t, e, i, o, s) {
+    const r = t / e, a = i * o * 2 * Math.PI * Math.cos(o * r * 2 * Math.PI + s) / e;
+    return Math.atan(a) * (180 / Math.PI);
+  }
+  /**
+   * Estimate image width based on height
+  /**
+   * Utility: Generate random number between min and max
+   * @param min - Minimum value
+   * @param max - Maximum value
+   * @returns Random number in range
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+class fe {
+  constructor(t) {
+    this.config = t.layout, this.imageConfig = t.image, this.layouts = /* @__PURE__ */ new Map(), this.placementLayout = this.initLayout();
+  }
+  /**
+   * Initialize the appropriate placement layout based on config type
+   * @returns Initialized placement layout
+   */
+  initLayout() {
+    switch (this.config.algorithm) {
+      case "radial":
+        return new ae(this.config, this.imageConfig);
+      case "grid":
+        return new ce(this.config, this.imageConfig);
+      case "spiral":
+        return new de(this.config, this.imageConfig);
+      case "cluster":
+        return new ge(this.config, this.imageConfig);
+      case "wave":
+        return new me(this.config, this.imageConfig);
+      default:
+        return new se(this.config, this.imageConfig);
+    }
+  }
+  /**
+   * Generate layout positions for images
+   * @param imageCount - Number of images to layout
+   * @param containerBounds - Container dimensions {width, height}
+   * @param options - Optional overrides for configuration (e.g. fixedHeight)
+   * @returns Array of layout objects with position, rotation, scale
+   */
+  generateLayout(t, e, i = {}) {
+    const o = this.placementLayout.generate(t, e, i);
+    return o.forEach((s) => {
+      this.layouts.set(s.id, s);
+    }), o;
+  }
+  /**
+   * Get the original layout state for an image
+   * @param imageId - The image ID (number or string)
+   * @returns Original layout state or undefined if not found
+   */
+  getOriginalState(t) {
+    return this.layouts.get(Number(t));
+  }
+  /**
+   * Reset all stored layouts
+   */
+  reset() {
+    this.layouts.clear();
+  }
+  /**
+   * Update config dynamically (useful for responsive changes)
+   * @param newConfig - Updated configuration
+   */
+  updateConfig(t) {
+    t.layout && (Object.assign(this.config, t.layout), t.layout.algorithm && t.layout.algorithm !== this.config.algorithm && (this.placementLayout = this.initLayout())), t.image && Object.assign(this.imageConfig, t.image);
+  }
+  /**
+   * Get responsive breakpoints from layout config
+   */
+  getBreakpoints() {
+    return this.config.responsive ?? {
+      mobile: { maxWidth: 767 },
+      tablet: { maxWidth: 1199 }
+    };
+  }
+  /**
+   * Resolve breakpoint name based on viewport width
+   */
+  resolveBreakpoint(t) {
+    const e = this.getBreakpoints();
+    return t <= e.mobile.maxWidth ? "mobile" : t <= e.tablet.maxWidth ? "tablet" : "screen";
+  }
+  /**
+   * Resolve the effective base height based on image config and current viewport
+   * @param viewportWidth - Current viewport width
+   * @returns Resolved base height or undefined if should auto-calculate (adaptive mode)
+   */
+  resolveBaseHeight(t) {
+    const e = this.imageConfig.sizing;
+    if (!e || e.mode === "adaptive")
+      return;
+    const i = e.height;
+    if (i === void 0)
+      return;
+    if (typeof i == "number")
+      return i;
+    const o = i, s = this.resolveBreakpoint(t);
+    return s === "mobile" ? o.mobile ?? o.tablet ?? o.screen : s === "tablet" ? o.tablet ?? o.screen ?? o.mobile : o.screen ?? o.tablet ?? o.mobile;
+  }
+  /**
+   * Calculate adaptive image size based on container dimensions and image count
+   * @param containerBounds - Container dimensions {width, height}
+   * @param imageCount - Number of images to display
+   * @param maxHeight - Maximum height constraint (upper bound)
+   * @param viewportWidth - Current viewport width for baseHeight resolution
+   * @returns Calculated sizing result with height
+   */
+  calculateAdaptiveSize(t, e, i, o) {
+    const s = this.imageConfig.sizing, r = this.resolveBaseHeight(o);
+    if (r !== void 0)
+      return { height: r };
+    const a = s?.minSize ?? 50, h = s?.maxSize ?? 400, c = this.config.targetCoverage ?? 0.6, u = this.config.densityFactor ?? 1, { width: l, height: d } = t, p = l * d * c / e;
+    let f = Math.sqrt(p / 1.4);
+    f *= u, f = Math.min(f, i);
+    let E = this.clamp(f, a, h);
+    if (E === a && f < a) {
+      const v = Math.max(a * 0.05, 20);
+      E = Math.max(v, f);
+    }
+    return { height: E };
+  }
+  /**
+   * Utility: Clamp a value between min and max
+   */
+  clamp(t, e, i) {
+    return Math.max(e, Math.min(i, t));
+  }
+}
+var I = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(I || {});
+function pe(n) {
+  return n in mt;
+}
+function be(n) {
+  return n ? pe(n) ? mt[n] : n : mt.md;
+}
+function ye(n) {
+  if (!n) return "";
+  const t = [];
+  if (n.grayscale !== void 0 && t.push(`grayscale(${n.grayscale})`), n.blur !== void 0 && t.push(`blur(${n.blur}px)`), n.brightness !== void 0 && t.push(`brightness(${n.brightness})`), n.contrast !== void 0 && t.push(`contrast(${n.contrast})`), n.saturate !== void 0 && t.push(`saturate(${n.saturate})`), n.opacity !== void 0 && t.push(`opacity(${n.opacity})`), n.sepia !== void 0 && t.push(`sepia(${n.sepia})`), n.hueRotate !== void 0 && t.push(`hue-rotate(${n.hueRotate}deg)`), n.invert !== void 0 && t.push(`invert(${n.invert})`), n.dropShadow !== void 0)
+    if (typeof n.dropShadow == "string")
+      t.push(`drop-shadow(${n.dropShadow})`);
+    else {
+      const e = n.dropShadow;
+      t.push(`drop-shadow(${e.x}px ${e.y}px ${e.blur}px ${e.color})`);
+    }
+  return t.join(" ");
+}
+function Q(n) {
+  if (!n || n.style === "none" || n.width === 0)
+    return "none";
+  const t = n.width ?? 0, e = n.style ?? "solid", i = n.color ?? "#000000";
+  return `${t}px ${e} ${i}`;
+}
+function st(n) {
+  if (!n) return {};
+  const t = {};
+  if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
+    const s = n.border?.radius ?? 0;
+    n.borderRadiusTopLeft !== void 0 ? t.borderTopLeftRadius = `${n.borderRadiusTopLeft}px` : s && (t.borderTopLeftRadius = `${s}px`), n.borderRadiusTopRight !== void 0 ? t.borderTopRightRadius = `${n.borderRadiusTopRight}px` : s && (t.borderTopRightRadius = `${s}px`), n.borderRadiusBottomRight !== void 0 ? t.borderBottomRightRadius = `${n.borderRadiusBottomRight}px` : s && (t.borderBottomRightRadius = `${s}px`), n.borderRadiusBottomLeft !== void 0 ? t.borderBottomLeftRadius = `${n.borderRadiusBottomLeft}px` : s && (t.borderBottomLeftRadius = `${s}px`);
+  } else n.border?.radius !== void 0 && (t.borderRadius = `${n.border.radius}px`);
+  if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
+    const s = n.border || {}, r = { ...s, ...n.borderTop }, a = { ...s, ...n.borderRight }, h = { ...s, ...n.borderBottom }, c = { ...s, ...n.borderLeft };
+    t.borderTop = Q(r), t.borderRight = Q(a), t.borderBottom = Q(h), t.borderLeft = Q(c);
+  } else n.border && (t.border = Q(n.border));
+  n.shadow !== void 0 && (t.boxShadow = be(n.shadow));
+  const o = ye(n.filter);
+  if (t.filter = o || "none", n.opacity !== void 0 && (t.opacity = String(n.opacity)), n.cursor !== void 0 && (t.cursor = n.cursor), n.outline && n.outline.style !== "none" && (n.outline.width ?? 0) > 0) {
+    const s = n.outline.width ?? 0, r = n.outline.style ?? "solid", a = n.outline.color ?? "#000000";
+    t.outline = `${s}px ${r} ${a}`, n.outline.offset !== void 0 && (t.outlineOffset = `${n.outline.offset}px`);
+  }
+  return n.objectFit !== void 0 && (t.objectFit = n.objectFit), n.aspectRatio !== void 0 && (t.aspectRatio = n.aspectRatio), t;
+}
+function tt(n, t) {
+  t.borderRadius !== void 0 && (n.style.borderRadius = t.borderRadius), t.borderTopLeftRadius !== void 0 && (n.style.borderTopLeftRadius = t.borderTopLeftRadius), t.borderTopRightRadius !== void 0 && (n.style.borderTopRightRadius = t.borderTopRightRadius), t.borderBottomRightRadius !== void 0 && (n.style.borderBottomRightRadius = t.borderBottomRightRadius), t.borderBottomLeftRadius !== void 0 && (n.style.borderBottomLeftRadius = t.borderBottomLeftRadius), t.border !== void 0 && (n.style.border = t.border), t.borderTop !== void 0 && (n.style.borderTop = t.borderTop), t.borderRight !== void 0 && (n.style.borderRight = t.borderRight), t.borderBottom !== void 0 && (n.style.borderBottom = t.borderBottom), t.borderLeft !== void 0 && (n.style.borderLeft = t.borderLeft), t.boxShadow !== void 0 && (n.style.boxShadow = t.boxShadow), t.filter !== void 0 && (n.style.filter = t.filter), t.opacity !== void 0 && (n.style.opacity = t.opacity), t.cursor !== void 0 && (n.style.cursor = t.cursor), t.outline !== void 0 && (n.style.outline = t.outline), t.outlineOffset !== void 0 && (n.style.outlineOffset = t.outlineOffset), t.objectFit !== void 0 && (n.style.objectFit = t.objectFit), t.aspectRatio !== void 0 && (n.style.aspectRatio = t.aspectRatio);
+}
+function zt(n) {
+  return n ? Array.isArray(n) ? n.join(" ") : n : "";
+}
+function et(n, t) {
+  const e = zt(t);
+  e && e.split(" ").forEach((i) => {
+    i.trim() && n.classList.add(i.trim());
+  });
+}
+function Ft(n, t) {
+  const e = zt(t);
+  e && e.split(" ").forEach((i) => {
+    i.trim() && n.classList.remove(i.trim());
+  });
+}
+const Tt = {
+  UNFOCUSING: 999,
+  FOCUSING: 1e3
+};
+class ve {
+  constructor(t, e, i) {
+    this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = st(i?.default), this.focusedStyles = st(i?.focused), this.defaultClassName = i?.default?.className, this.focusedClassName = i?.focused?.className;
+  }
+  /**
+   * Get current state machine state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Check if any animation is in progress
+   */
+  isAnimating() {
+    return this.state !== I.IDLE && this.state !== I.FOCUSED;
+  }
+  /**
+   * Normalize scalePercent value
+   */
+  normalizeScalePercent(t) {
+    return t > 1 ? t / 100 : t;
+  }
+  /**
+   * Calculate target dimensions for focused image
+   * Returns actual pixel dimensions instead of scale factor for sharper rendering
+   */
+  calculateFocusDimensions(t, e, i) {
+    const o = this.normalizeScalePercent(this.config.scalePercent), s = i.height * o, r = t / e;
+    let a = s, h = a * r;
+    const c = i.width * o;
+    return h > c && (h = c, a = h / r), { width: h, height: a };
+  }
+  /**
+   * Calculate the transform needed to center an image (position only, no scale)
+   * Scale is handled by animating actual dimensions for sharper rendering
+   */
+  calculateFocusTransform(t, e) {
+    const i = t.width / 2, o = t.height / 2, s = i - e.x, r = o - e.y;
+    return {
+      x: s,
+      y: r,
+      rotation: 0,
+      scale: 1
+      // No scale transform - dimensions are animated instead
+    };
+  }
+  /**
+   * Build transform string for dimension-based zoom (no scale in transform)
+   */
+  buildDimensionZoomTransform(t) {
+    const e = ["translate(-50%, -50%)"];
+    if (t.x !== void 0 || t.y !== void 0) {
+      const i = t.x ?? 0, o = t.y ?? 0;
+      e.push(`translate(${i}px, ${o}px)`);
+    }
+    return t.rotation !== void 0 && e.push(`rotate(${t.rotation}deg)`), e.join(" ");
+  }
+  /**
+   * Create a Web Animation that animates both transform (position) and dimensions
+   * This provides sharper zoom by re-rendering at target size instead of scaling pixels
+   */
+  animateWithDimensions(t, e, i, o, s, r, a, h) {
+    const c = this.buildDimensionZoomTransform(e), u = this.buildDimensionZoomTransform(i);
+    return t.style.transition = "none", t.animate(
+      [
+        {
+          transform: c,
+          width: `${o}px`,
+          height: `${s}px`
+        },
+        {
+          transform: u,
+          width: `${r}px`,
+          height: `${a}px`
+        }
+      ],
+      {
+        duration: h,
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+        fill: "forwards"
+      }
+    );
+  }
+  /**
+   * Apply focused styling to an element
+   */
+  applyFocusedStyling(t, e) {
+    t.style.zIndex = String(e), t.classList.add("fbn-ic-focused"), tt(t, this.focusedStyles), et(t, this.focusedClassName);
+  }
+  /**
+   * Remove focused styling from an element
+   */
+  removeFocusedStyling(t, e) {
+    t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Ft(t, this.focusedClassName), tt(t, this.defaultStyles), et(t, this.defaultClassName);
+  }
+  /**
+   * Start focus animation for an image using dimension-based zoom
+   * Animates actual width/height for sharper rendering instead of transform scale
+   * @param fromTransform - Optional starting transform (for mid-animation reversals)
+   * @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
+   */
+  startFocusAnimation(t, e, i, o, s) {
+    const r = t.style.zIndex || "", a = t.offsetWidth, h = t.offsetHeight, c = this.calculateFocusDimensions(a, h, e), u = this.calculateFocusTransform(e, i);
+    this.applyFocusedStyling(t, Tt.FOCUSING), this.animationEngine.cancelAllAnimations(t);
+    const l = o ?? {
+      x: 0,
+      y: 0,
+      rotation: i.rotation,
+      scale: 1
+      // No scale - using dimensions
+    }, d = s?.width ?? a, m = s?.height ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
+      t,
+      l,
+      u,
+      d,
+      m,
+      c.width,
+      c.height,
+      b
+    ), g = {
+      id: `focus-${Date.now()}`,
+      element: t,
+      animation: p,
+      fromState: l,
+      toState: u,
+      startTime: performance.now(),
+      duration: b
+    };
+    return this.focusData = {
+      element: t,
+      originalState: i,
+      focusTransform: u,
+      originalZIndex: r,
+      originalWidth: a,
+      originalHeight: h,
+      focusWidth: c.width,
+      focusHeight: c.height
+    }, {
+      element: t,
+      originalState: i,
+      animationHandle: g,
+      direction: "in",
+      originalWidth: a,
+      originalHeight: h
+    };
+  }
+  /**
+   * Start unfocus animation for an image using dimension-based zoom
+   * Animates back to original dimensions for consistent behavior
+   * @param fromDimensions - Optional starting dimensions (for mid-animation reversals)
+   */
+  startUnfocusAnimation(t, e, i, o) {
+    t.style.zIndex = String(Tt.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
+    const s = i ?? this.focusData?.focusTransform ?? { x: 0, y: 0, rotation: 0, scale: 1 }, r = o?.width ?? this.focusData?.focusWidth ?? t.offsetWidth, a = o?.height ?? this.focusData?.focusHeight ?? t.offsetHeight, h = {
+      x: 0,
+      y: 0,
+      rotation: e.rotation,
+      scale: 1
+      // No scale - using dimensions
+    }, c = this.focusData?.originalWidth ?? t.offsetWidth, u = this.focusData?.originalHeight ?? t.offsetHeight, l = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
+      t,
+      s,
+      h,
+      r,
+      a,
+      c,
+      u,
+      l
+    ), m = {
+      id: `unfocus-${Date.now()}`,
+      element: t,
+      animation: d,
+      fromState: s,
+      toState: h,
+      startTime: performance.now(),
+      duration: l
+    };
+    return {
+      element: t,
+      originalState: e,
+      animationHandle: m,
+      direction: "out",
+      originalWidth: c,
+      originalHeight: u
+    };
+  }
+  /**
+   * Capture the current visual state of an element mid-animation, BEFORE cancelling.
+   *
+   * The computed matrix.e/f include the -50%/-50% centering offset resolved to pixels.
+   * buildDimensionZoomTransform prepends its own translate(-50%,-50%), so passing raw
+   * matrix.e/f doubles the centering and produces the wrong starting position.
+   *
+   * This method extracts the PURE positional offset (pureX = matrix.e + 0.5*midWidth)
+   * and commits width/height/transform to inline styles before the animation is cancelled,
+   * preventing any visual snap.
+   *
+   * Must be called while the animation is still running (offsetWidth reflects animated size).
+   * Caller is responsible for calling animationEngine.cancelAllAnimations() afterwards.
+   */
+  captureMidAnimationState(t) {
+    const e = getComputedStyle(t), i = new DOMMatrix(e.transform), o = t.offsetWidth, s = t.offsetHeight, r = i.e + o * 0.5, a = i.f + s * 0.5, h = Math.atan2(i.b, i.a) * (180 / Math.PI);
+    return t.style.width = `${o}px`, t.style.height = `${s}px`, t.style.transform = `translate(-50%, -50%) translate(${r}px, ${a}px) rotate(${h}deg)`, t.style.transition = "none", {
+      transform: { x: r, y: a, rotation: h, scale: 1 },
+      dimensions: { width: o, height: s }
+    };
+  }
+  /**
+   * Handle animation completion
+   */
+  async waitForAnimation(t) {
+    try {
+      await t.animation.finished;
+    } catch {
+    }
+  }
+  /**
+   * Reset an element instantly to its original position and dimensions (no animation)
+   */
+  resetElementInstantly(t, e, i, o, s) {
+    this.animationEngine.cancelAllAnimations(t);
+    const r = ["translate(-50%, -50%)"];
+    r.push("translate(0px, 0px)"), r.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = r.join(" "), o !== void 0 && s !== void 0 && (t.style.width = `${o}px`, t.style.height = `${s}px`), this.removeFocusedStyling(t, i);
+  }
+  /**
+   * Focus (zoom) an image to center of container
+   * Implements cross-animation when swapping focus
+   */
+  async focusImage(t, e, i) {
+    if (this.currentFocus === t && this.state === I.FOCUSED)
+      return this.unfocusImage();
+    if (this.incoming?.element === t && this.state === I.FOCUSING) {
+      const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
+      this.animationEngine.cancelAllAnimations(t), this.outgoing = this.startUnfocusAnimation(
+        t,
+        this.incoming.originalState,
+        s,
+        r
+      ), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
+      return;
+    }
+    const o = ++this.focusGeneration;
+    switch (this.state) {
+      case I.IDLE:
+        if (this.state = I.FOCUSING, this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
+        this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+        break;
+      case I.FOCUSED:
+        if (this.state = I.CROSS_ANIMATING, this.currentFocus && this.focusData && (this.outgoing = this.startUnfocusAnimation(
+          this.currentFocus,
+          this.focusData.originalState
+        )), this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
+          this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+          this.waitForAnimation(this.incoming.animationHandle)
+        ]), this.focusGeneration !== o)
+          return;
+        this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+        break;
+      case I.FOCUSING:
+        if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
+          this.incoming.element,
+          this.incoming.originalState,
+          this.focusData?.originalZIndex || "",
+          this.focusData?.originalWidth,
+          this.focusData?.originalHeight
+        ), this.incoming = null), this.incoming = this.startFocusAnimation(t, e, i), await this.waitForAnimation(this.incoming.animationHandle), this.focusGeneration !== o) return;
+        this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+        break;
+      case I.UNFOCUSING:
+        if (this.state = I.CROSS_ANIMATING, this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
+          this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+          this.waitForAnimation(this.incoming.animationHandle)
+        ]), this.focusGeneration !== o) return;
+        this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+        break;
+      case I.CROSS_ANIMATING:
+        if (this.incoming?.element === t)
+          return;
+        if (this.outgoing?.element === t) {
+          const { transform: s, dimensions: r } = this.captureMidAnimationState(t);
+          if (this.animationEngine.cancelAllAnimations(t), this.incoming) {
+            const { transform: a, dimensions: h } = this.captureMidAnimationState(this.incoming.element);
+            this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
+              this.incoming.element,
+              this.incoming.originalState,
+              a,
+              h
+            );
+          } else
+            this.outgoing = null;
+          if (this.incoming = this.startFocusAnimation(t, e, i, s, r), await Promise.all([
+            this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+            this.waitForAnimation(this.incoming.animationHandle)
+          ]), this.focusGeneration !== o) return;
+          this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+          return;
+        }
+        if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
+          this.outgoing.element,
+          this.outgoing.originalState,
+          this.outgoing.originalState.zIndex?.toString() || "",
+          this.outgoing.originalWidth,
+          this.outgoing.originalHeight
+        ), this.outgoing = null), this.incoming) {
+          const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
+          this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
+            this.incoming.element,
+            this.incoming.originalState,
+            s,
+            r
+          );
+        }
+        if (this.incoming = this.startFocusAnimation(t, e, i), await Promise.all([
+          this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+          this.waitForAnimation(this.incoming.animationHandle)
+        ]), this.focusGeneration !== o) return;
+        this.outgoing && (this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = I.FOCUSED;
+        break;
+    }
+  }
+  /**
+   * Unfocus current image, returning it to original position
+   */
+  async unfocusImage() {
+    if (this.state === I.UNFOCUSING)
+      return;
+    const t = ++this.focusGeneration;
+    if (!this.currentFocus || !this.focusData) {
+      if (this.incoming && this.state === I.FOCUSING) {
+        const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
+        if (this.animationEngine.cancelAllAnimations(this.incoming.element), this.outgoing = this.startUnfocusAnimation(
+          this.incoming.element,
+          this.incoming.originalState,
+          s,
+          r
+        ), this.incoming = null, this.state = I.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
+        this.removeFocusedStyling(this.outgoing.element, this.focusData?.originalZIndex || ""), this.outgoing = null, this.focusData = null, this.state = I.IDLE;
+      }
+      return;
+    }
+    if (this.state === I.CROSS_ANIMATING && this.incoming) {
+      const { transform: s, dimensions: r } = this.captureMidAnimationState(this.incoming.element);
+      this.animationEngine.cancelAllAnimations(this.incoming.element);
+      const a = this.startUnfocusAnimation(
+        this.incoming.element,
+        this.incoming.originalState,
+        s,
+        r
+      );
+      if (await Promise.all([
+        this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+        this.waitForAnimation(a.animationHandle)
+      ]), this.focusGeneration !== t) return;
+      this.outgoing && this.removeFocusedStyling(this.outgoing.element, this.outgoing.originalState.zIndex?.toString() || ""), this.removeFocusedStyling(a.element, this.incoming.originalState.zIndex?.toString() || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE;
+      return;
+    }
+    this.state = I.UNFOCUSING;
+    const e = this.currentFocus, i = this.focusData.originalState, o = this.focusData.originalZIndex;
+    this.outgoing = this.startUnfocusAnimation(e, i), await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration === t && (this.removeFocusedStyling(e, o), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = I.IDLE);
+  }
+  /**
+   * Swap focus from current image to a new one (alias for focusImage with cross-animation)
+   */
+  async swapFocus(t, e, i) {
+    return this.focusImage(t, e, i);
+  }
+  /**
+   * Get currently focused image element
+   */
+  getCurrentFocus() {
+    return this.currentFocus;
+  }
+  /**
+   * Check if an image is currently focused (stable state)
+   */
+  isFocused(t) {
+    return this.currentFocus === t && this.state === I.FOCUSED;
+  }
+  /**
+   * Check if an image is the target of current focus animation
+   */
+  isTargetingFocus(t) {
+    return this.incoming?.element === t;
+  }
+  /**
+   * Check if an image is involved in any focus/animation state
+   * Returns true if the image is focused, animating in, or animating out
+   * Useful for hover state management - don't apply hover to animating images
+   */
+  isInvolved(t) {
+    return this.currentFocus === t || this.incoming?.element === t || this.outgoing?.element === t;
+  }
+  /**
+   * Apply a temporary horizontal drag offset to the focused image
+   * Used during swipe gestures for visual feedback
+   */
+  setDragOffset(t) {
+    if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
+    const e = this.currentFocus, i = this.focusData.focusTransform, o = ["translate(-50%, -50%)"], s = (i.x ?? 0) + t, r = i.y ?? 0;
+    o.push(`translate(${s}px, ${r}px)`), i.rotation !== void 0 && o.push(`rotate(${i.rotation}deg)`), e.style.transition = "none", e.style.transform = o.join(" ");
+  }
+  /**
+   * Clear the drag offset, optionally animating back to center
+   * @param animate - If true, animate back to center; if false, snap instantly
+   * @param duration - Animation duration in ms (default 150)
+   */
+  clearDragOffset(t, e = 150) {
+    if (!this.currentFocus || !this.focusData || this.state !== I.FOCUSED) return;
+    const i = this.currentFocus, o = this.focusData.focusTransform, s = ["translate(-50%, -50%)"], r = o.x ?? 0, a = o.y ?? 0;
+    s.push(`translate(${r}px, ${a}px)`), o.rotation !== void 0 && s.push(`rotate(${o.rotation}deg)`);
+    const h = s.join(" ");
+    t ? (i.style.transition = `transform ${e}ms ease-out`, i.style.transform = h, setTimeout(() => {
+      this.currentFocus === i && (i.style.transition = "none");
+    }, e)) : (i.style.transition = "none", i.style.transform = h);
+  }
+  /**
+   * Reset zoom state (cancels all animations)
+   */
+  reset() {
+    this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
+      this.outgoing.element,
+      this.outgoing.originalState,
+      this.outgoing.originalState.zIndex?.toString() || "",
+      this.outgoing.originalWidth,
+      this.outgoing.originalHeight
+    )), this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
+      this.incoming.element,
+      this.incoming.originalState,
+      this.focusData?.originalZIndex || "",
+      this.focusData?.originalWidth,
+      this.focusData?.originalHeight
+    )), this.currentFocus && this.focusData && this.resetElementInstantly(
+      this.currentFocus,
+      this.focusData.originalState,
+      this.focusData.originalZIndex,
+      this.focusData.originalWidth,
+      this.focusData.originalHeight
+    ), this.state = I.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
+  }
+}
+const we = 50, xe = 0.5, Ee = 20, Se = 0.3, Ie = 150, Ae = 30, at = class at {
+  constructor(t, e) {
+    this.enabled = !1, this.touchState = null, this.recentTouchTimestamp = 0, this.container = t, this.callbacks = e, this.boundTouchStart = this.handleTouchStart.bind(this), this.boundTouchMove = this.handleTouchMove.bind(this), this.boundTouchEnd = this.handleTouchEnd.bind(this), this.boundTouchCancel = this.handleTouchCancel.bind(this);
+  }
+  /**
+   * Start listening for touch events
+   */
+  enable() {
+    this.enabled || (this.enabled = !0, this.container.style.touchAction = "pan-y", this.container.addEventListener("touchstart", this.boundTouchStart, { passive: !1 }), this.container.addEventListener("touchmove", this.boundTouchMove, { passive: !1 }), this.container.addEventListener("touchend", this.boundTouchEnd, { passive: !0 }), this.container.addEventListener("touchcancel", this.boundTouchCancel, { passive: !0 }));
+  }
+  /**
+   * Stop listening for touch events
+   */
+  disable() {
+    this.enabled && (this.enabled = !1, this.container.style.touchAction = "", this.container.removeEventListener("touchstart", this.boundTouchStart), this.container.removeEventListener("touchmove", this.boundTouchMove), this.container.removeEventListener("touchend", this.boundTouchEnd), this.container.removeEventListener("touchcancel", this.boundTouchCancel), this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null);
+  }
+  /**
+   * Clean up all event listeners
+   */
+  destroy() {
+    this.disable();
+  }
+  /**
+   * Check if a touch interaction happened recently
+   * Used to prevent click-outside from unfocusing immediately after touch
+   */
+  hadRecentTouch() {
+    return Date.now() - this.recentTouchTimestamp < at.TOUCH_CLICK_DELAY;
+  }
+  handleTouchStart(t) {
+    if (t.touches.length !== 1) return;
+    this.recentTouchTimestamp = Date.now();
+    const e = t.touches[0];
+    this.touchState = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startTime: performance.now(),
+      currentX: e.clientX,
+      isDragging: !1,
+      isHorizontalSwipe: null
+    };
+  }
+  handleTouchMove(t) {
+    if (!this.touchState || t.touches.length !== 1) return;
+    const e = t.touches[0], i = e.clientX - this.touchState.startX, o = e.clientY - this.touchState.startY;
+    if (this.touchState.isHorizontalSwipe === null && Math.sqrt(i * i + o * o) > 10) {
+      const a = Math.atan2(Math.abs(o), Math.abs(i)) * (180 / Math.PI);
+      this.touchState.isHorizontalSwipe = a <= Ae;
+    }
+    if (this.touchState.isHorizontalSwipe !== !1 && this.touchState.isHorizontalSwipe === !0) {
+      t.preventDefault(), this.touchState.isDragging = !0, this.touchState.currentX = e.clientX;
+      const s = i * Se;
+      this.callbacks.onDragOffset(s);
+    }
+  }
+  handleTouchEnd(t) {
+    if (!this.touchState) return;
+    this.recentTouchTimestamp = Date.now();
+    const e = this.touchState.currentX - this.touchState.startX, i = performance.now() - this.touchState.startTime, o = Math.abs(e) / i, s = Math.abs(e);
+    let r = !1;
+    this.touchState.isHorizontalSwipe === !0 && this.touchState.isDragging && (s >= we || o >= xe && s >= Ee) && (r = !0, e < 0 ? this.callbacks.onNext() : this.callbacks.onPrev()), this.touchState.isDragging && this.callbacks.onDragEnd(r), this.touchState = null;
+  }
+  handleTouchCancel(t) {
+    this.touchState?.isDragging && this.callbacks.onDragEnd(!1), this.touchState = null;
+  }
+};
+at.TOUCH_CLICK_DELAY = 300;
+let ft = at;
+class Te {
+  constructor(t) {
+    if (this._prepared = !1, this._discoveredUrls = [], this.apiKey = t.apiKey ?? "", this.apiEndpoint = t.apiEndpoint ?? "https://www.googleapis.com/drive/v3/files", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
+      throw new Error("GoogleDriveLoader requires at least one source to be configured");
+  }
+  /**
+   * Prepare the loader by discovering all images from configured sources
+   * @param filter - Filter to apply to discovered images
+   */
+  async prepare(t) {
+    this._discoveredUrls = [];
+    for (const e of this.sources)
+      if ("folders" in e)
+        for (const i of e.folders) {
+          const o = e.recursive !== void 0 ? e.recursive : !0, s = await this.loadFromFolder(i, t, o);
+          this._discoveredUrls.push(...s);
+        }
+      else if ("files" in e) {
+        const i = await this.loadFiles(e.files, t);
+        this._discoveredUrls.push(...i);
+      }
+    this._prepared = !0;
+  }
+  /**
+   * Get the number of discovered images
+   * @throws Error if called before prepare()
+   */
+  imagesLength() {
+    if (!this._prepared)
+      throw new Error("GoogleDriveLoader.imagesLength() called before prepare()");
+    return this._discoveredUrls.length;
+  }
+  /**
+   * Get the ordered list of image URLs
+   * @throws Error if called before prepare()
+   */
+  imageURLs() {
+    if (!this._prepared)
+      throw new Error("GoogleDriveLoader.imageURLs() called before prepare()");
+    return [...this._discoveredUrls];
+  }
+  /**
+   * Check if the loader has been prepared
+   */
+  isPrepared() {
+    return this._prepared;
+  }
+  /**
+   * Extract folder ID from various Google Drive URL formats
+   * @param folderUrl - Google Drive folder URL
+   * @returns Folder ID or null if invalid
+   */
+  extractFolderId(t) {
+    const e = [
+      /\/folders\/([a-zA-Z0-9_-]+)/,
+      // Standard format
+      /id=([a-zA-Z0-9_-]+)/
+      // Alternative format
+    ];
+    for (const i of e) {
+      const o = t.match(i);
+      if (o && o[1])
+        return o[1];
+    }
+    return null;
+  }
+  /**
+   * Load images from a Google Drive folder
+   * @param folderUrl - Google Drive folder URL
+   * @param filter - Filter to apply to discovered images
+   * @param recursive - Whether to include images from subfolders
+   * @returns Promise resolving to array of image URLs
+   */
+  async loadFromFolder(t, e, i = !0) {
+    const o = this.extractFolderId(t);
+    if (!o)
+      throw new Error("Invalid Google Drive folder URL. Please check the URL format.");
+    if (!this.apiKey || this.apiKey === "YOUR_API_KEY_HERE")
+      return this.loadImagesDirectly(o, e);
+    try {
+      return i ? await this.loadImagesRecursively(o, e) : await this.loadImagesFromSingleFolder(o, e);
+    } catch (s) {
+      return console.error("Error loading from Google Drive API:", s), this.loadImagesDirectly(o, e);
+    }
+  }
+  /**
+   * Load images from a single folder (non-recursive)
+   * @param folderId - Google Drive folder ID
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of image URLs
+   */
+  async loadImagesFromSingleFolder(t, e) {
+    const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
+    if (!a.ok)
+      throw new Error(`API request failed: ${a.status} ${a.statusText}`);
+    const c = (await a.json()).files.filter(
+      (u) => u.mimeType.startsWith("image/") && e.isAllowed(u.name)
+    );
+    return this.log(`Found ${c.length} images in folder ${t} (non-recursive)`), c.forEach((u) => {
+      i.push(`https://lh3.googleusercontent.com/d/${u.id}=s1600`), this.log(`Added file: ${u.name}`);
+    }), i;
+  }
+  /**
+   * Load specific files by their URLs or IDs
+   * @param fileUrls - Array of Google Drive file URLs or IDs
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of image URLs
+   */
+  async loadFiles(t, e) {
+    const i = [];
+    for (const o of t) {
+      const s = this.extractFileId(o);
+      if (!s) {
+        this.log(`Skipping invalid file URL: ${o}`);
+        continue;
+      }
+      if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
+        try {
+          const r = `${this.apiEndpoint}/${s}?fields=name,mimeType&key=${this.apiKey}`, a = await fetch(r);
+          if (a.ok) {
+            const h = await a.json();
+            h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`), this.log(`Added file: ${h.name}`)) : this.log(`Skipping non-image file: ${h.name} (${h.mimeType})`);
+          } else
+            this.log(`Failed to fetch metadata for file ${s}: ${a.status}`);
+        } catch (r) {
+          this.log(`Error fetching metadata for file ${s}:`, r);
+        }
+      else
+        i.push(`https://lh3.googleusercontent.com/d/${s}=s1600`);
+    }
+    return i;
+  }
+  /**
+   * Extract file ID from Google Drive file URL
+   * @param fileUrl - Google Drive file URL or file ID
+   * @returns File ID or null if invalid
+   */
+  extractFileId(t) {
+    if (!/[/:.]/.test(t))
+      return t;
+    const e = [
+      /\/file\/d\/([a-zA-Z0-9_-]+)/,
+      // Standard file format
+      /\/open\?id=([a-zA-Z0-9_-]+)/,
+      // Alternative format
+      /id=([a-zA-Z0-9_-]+)/
+      // Generic id parameter
+    ];
+    for (const i of e) {
+      const o = t.match(i);
+      if (o && o[1])
+        return o[1];
+    }
+    return null;
+  }
+  /**
+   * Recursively load images from a folder and all its subfolders
+   * @param folderId - Google Drive folder ID
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of image URLs
+   */
+  async loadImagesRecursively(t, e) {
+    const i = [], o = `'${t}' in parents and trashed=false`, r = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, a = await fetch(r);
+    if (!a.ok)
+      throw new Error(`API request failed: ${a.status} ${a.statusText}`);
+    const h = await a.json(), c = h.files.filter(
+      (l) => l.mimeType.startsWith("image/") && e.isAllowed(l.name)
+    ), u = h.files.filter(
+      (l) => l.mimeType === "application/vnd.google-apps.folder"
+    );
+    this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((l) => this.log(` - File: ${l.name} (${l.mimeType})`)), this.log(`- ${c.length} valid files (images only)`), this.log(`- ${u.length} subfolders`), c.forEach((l) => {
+      i.push(`https://lh3.googleusercontent.com/d/${l.id}=s1600`), this.log(`Added file: ${l.name}`);
+    });
+    for (const l of u) {
+      this.log(`Loading images from subfolder: ${l.name}`);
+      const d = await this.loadImagesRecursively(l.id, e);
+      i.push(...d);
+    }
+    return i;
+  }
+  /**
+   * Direct loading method (no API key required, but less reliable)
+   * Uses embedded folder view to scrape image IDs
+   * @param folderId - Google Drive folder ID
+   * @param filter - Filter to apply (not used in fallback mode)
+   * @returns Promise resolving to array of image URLs
+   */
+  async loadImagesDirectly(t, e) {
+    try {
+      const i = `https://drive.google.com/embeddedfolderview?id=${t}`, o = await fetch(i, { mode: "cors" });
+      if (!o.ok)
+        throw new Error("Cannot access folder directly (CORS or permissions issue)");
+      const s = await o.text(), r = /\/file\/d\/([a-zA-Z0-9_-]+)/g, a = [...s.matchAll(r)];
+      return [...new Set(a.map((u) => u[1]))].map(
+        (u) => `https://drive.google.com/uc?export=view&id=${u}`
+      );
+    } catch (i) {
+      throw console.error("Direct loading failed:", i), new Error(
+        `Unable to load images. Please ensure:
+1. The folder is shared publicly (Anyone with the link can view)
+2. The folder contains image files
+3. Consider adding a Google Drive API key in config.js for better reliability`
+      );
+    }
+  }
+  /**
+   * Manually add image URLs (for testing or when auto-loading fails)
+   * @param imageIds - Array of Google Drive file IDs
+   * @returns Array of direct image URLs
+   */
+  manualImageUrls(t) {
+    return t.map((e) => `https://drive.google.com/uc?export=view&id=${e}`);
+  }
+  /**
+   * Debug logging helper
+   * @param args - Arguments to log
+   */
+  log(...t) {
+    this.debugLogging && typeof console < "u" && console.log(...t);
+  }
+}
+class Ce {
+  constructor(t) {
+    if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.debugLogging = t.debugLogging ?? !1, this.sources = t.sources ?? [], !this.sources || this.sources.length === 0)
+      throw new Error("StaticImageLoader requires at least one source to be configured");
+    this.log("StaticImageLoader initialized with config:", t);
+  }
+  /**
+   * Prepare the loader by discovering all images from configured sources
+   * @param filter - Filter to apply to discovered images
+   */
+  async prepare(t) {
+    this._discoveredUrls = [], this.log(`Processing ${this.sources.length} source(s)`);
+    for (const e of this.sources)
+      try {
+        const i = await this.processSource(e, t);
+        this._discoveredUrls.push(...i);
+      } catch (i) {
+        console.warn("Failed to process source:", e, i);
+      }
+    this._prepared = !0, this.log(`Successfully loaded ${this._discoveredUrls.length} image(s)`);
+  }
+  /**
+   * Get the number of discovered images
+   * @throws Error if called before prepare()
+   */
+  imagesLength() {
+    if (!this._prepared)
+      throw new Error("StaticImageLoader.imagesLength() called before prepare()");
+    return this._discoveredUrls.length;
+  }
+  /**
+   * Get the ordered list of image URLs
+   * @throws Error if called before prepare()
+   */
+  imageURLs() {
+    if (!this._prepared)
+      throw new Error("StaticImageLoader.imageURLs() called before prepare()");
+    return [...this._discoveredUrls];
+  }
+  /**
+   * Check if the loader has been prepared
+   */
+  isPrepared() {
+    return this._prepared;
+  }
+  /**
+   * Process a single source object using shape-based detection
+   * @param source - Source configuration detected by key presence
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of valid URLs from this source
+   */
+  async processSource(t, e) {
+    return t ? "urls" in t ? await this.processUrls(t.urls, e) : "path" in t ? await this.processPath(t.path, t.files, e) : "json" in t ? await this.processJson(t.json, e) : (console.warn("Unknown source shape:", t), []) : (console.warn("Invalid source object:", t), []);
+  }
+  /**
+   * Process a list of direct URLs
+   * @param urls - Array of image URLs
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of validated URLs
+   */
+  async processUrls(t, e) {
+    if (!Array.isArray(t))
+      return console.warn("URLs must be an array:", t), [];
+    const i = [];
+    for (const o of t) {
+      const s = o.split("/").pop() || o;
+      if (!e.isAllowed(s)) {
+        this.log(`Skipping filtered URL: ${o}`);
+        continue;
+      }
+      this.validateUrls ? await this.validateUrl(o) ? i.push(o) : console.warn(`Skipping invalid/missing URL: ${o}`) : i.push(o);
+    }
+    return i;
+  }
+  /**
+   * Process a path-based source
+   * @param basePath - Base path (relative or absolute)
+   * @param files - Array of filenames
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of validated URLs
+   */
+  async processPath(t, e, i) {
+    if (!Array.isArray(e))
+      return console.warn("files must be an array:", e), [];
+    const o = [];
+    for (const s of e) {
+      if (!i.isAllowed(s)) {
+        this.log(`Skipping filtered file: ${s}`);
+        continue;
+      }
+      const r = this.constructUrl(t, s);
+      this.validateUrls ? await this.validateUrl(r) ? o.push(r) : console.warn(`Skipping invalid/missing file: ${r}`) : o.push(r);
+    }
+    return o;
+  }
+  /**
+   * Process a JSON endpoint source
+   * Fetches a JSON endpoint that returns { images: string[] }
+   * @param url - JSON endpoint URL
+   * @param filter - Filter to apply to discovered images
+   * @returns Promise resolving to array of validated URLs
+   */
+  async processJson(t, e) {
+    this.log(`Fetching JSON endpoint: ${t}`);
+    const i = new AbortController(), o = setTimeout(() => i.abort(), 1e4);
+    try {
+      const s = await fetch(t, { signal: i.signal });
+      if (clearTimeout(o), !s.ok)
+        throw new Error(`HTTP ${s.status} fetching ${t}`);
+      const r = await s.json();
+      if (!r || !Array.isArray(r.images))
+        throw new Error('JSON source must return JSON with shape { "images": ["url1", "url2", ...] }');
+      return this.log(`JSON endpoint returned ${r.images.length} image(s)`), await this.processUrls(r.images, e);
+    } catch (s) {
+      throw clearTimeout(o), s instanceof Error && s.name === "AbortError" ? new Error(`Timeout fetching JSON endpoint: ${t}`) : s;
+    }
+  }
+  /**
+   * Validate a single URL using HEAD request
+   * @param url - URL to validate
+   * @returns Promise resolving to true if valid and accessible
+   */
+  async validateUrl(t) {
+    if (this.validationMethod === "none")
+      return !0;
+    if (this.validationMethod === "simple")
+      try {
+        return typeof window < "u" ? new URL(t, window.location.origin) : new URL(t), !0;
+      } catch {
+        return !1;
+      }
+    if (typeof window > "u")
+      return !0;
+    if (!(t.startsWith(window.location.origin) || t.startsWith("/")))
+      return this.log(`Skipping validation for cross-origin URL: ${t}`), !0;
+    try {
+      const i = new AbortController(), o = setTimeout(() => i.abort(), this.validationTimeout), s = await fetch(t, {
+        method: "HEAD",
+        signal: i.signal
+      });
+      return clearTimeout(o), s.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${s.status}`), !1);
+    } catch (i) {
+      return i instanceof Error && (i.name === "AbortError" ? this.log(`Validation timeout for ${t}`) : this.log(`Validation failed for ${t}:`, i.message)), !1;
+    }
+  }
+  /**
+   * Construct full URL from basePath and filename
+   * @param basePath - Base path (relative or absolute)
+   * @param filename - Filename to append
+   * @returns Complete URL
+   */
+  constructUrl(t, e) {
+    const i = t.replace(/\/$/, "");
+    if (this.isAbsoluteUrl(t))
+      return `${i}/${e}`;
+    if (typeof window > "u")
+      return `${i}/${e}`;
+    const o = window.location.origin, r = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
+    return `${o}${r}/${e}`;
+  }
+  /**
+   * Check if URL is absolute (contains protocol)
+   * @param url - URL to check
+   * @returns True if absolute URL
+   */
+  isAbsoluteUrl(t) {
+    try {
+      return new URL(t), !0;
+    } catch {
+      return !1;
+    }
+  }
+  /**
+   * Debug logging helper
+   * @param args - Arguments to log
+   */
+  log(...t) {
+    this.debugLogging && typeof console < "u" && console.log(...t);
+  }
+}
+class Re {
+  constructor(t) {
+    if (this._prepared = !1, this._discoveredUrls = [], this.loaders = t.loaders, this.debugLogging = t.debugLogging ?? !1, !this.loaders || this.loaders.length === 0)
+      throw new Error("CompositeLoader requires at least one loader to be configured");
+    this.log(`CompositeLoader initialized with ${this.loaders.length} loader(s)`);
+  }
+  /**
+   * Prepare all loaders in parallel and combine their results
+   * @param filter - Filter to apply to discovered images
+   */
+  async prepare(t) {
+    this._discoveredUrls = [], this.log(`Preparing ${this.loaders.length} loader(s) in parallel`);
+    const e = this.loaders.map((i, o) => i.prepare(t).then(() => {
+      this.log(`Loader ${o} prepared with ${i.imagesLength()} images`);
+    }).catch((s) => {
+      console.warn(`Loader ${o} failed to prepare:`, s);
+    }));
+    await Promise.all(e);
+    for (const i of this.loaders)
+      if (i.isPrepared()) {
+        const o = i.imageURLs();
+        this._discoveredUrls.push(...o);
+      }
+    this._prepared = !0, this.log(`CompositeLoader prepared with ${this._discoveredUrls.length} total images`);
+  }
+  /**
+   * Get the combined number of discovered images
+   * @throws Error if called before prepare()
+   */
+  imagesLength() {
+    if (!this._prepared)
+      throw new Error("CompositeLoader.imagesLength() called before prepare()");
+    return this._discoveredUrls.length;
+  }
+  /**
+   * Get the combined ordered list of image URLs
+   * @throws Error if called before prepare()
+   */
+  imageURLs() {
+    if (!this._prepared)
+      throw new Error("CompositeLoader.imageURLs() called before prepare()");
+    return [...this._discoveredUrls];
+  }
+  /**
+   * Check if the loader has been prepared
+   */
+  isPrepared() {
+    return this._prepared;
+  }
+  /**
+   * Debug logging helper
+   * @param args - Arguments to log
+   */
+  log(...t) {
+    this.debugLogging && typeof console < "u" && console.log("[CompositeLoader]", ...t);
+  }
+}
+class Me {
+  /**
+   * Create a new ImageFilter
+   * @param extensions - Array of allowed file extensions (without dots)
+   *                     Defaults to common image formats if not provided
+   */
+  constructor(t) {
+    this.allowedExtensions = t || [
+      "jpg",
+      "jpeg",
+      "png",
+      "gif",
+      "webp",
+      "bmp"
+    ];
+  }
+  /**
+   * Check if a filename has an allowed extension
+   * @param filename - The filename to check (can include path or query string)
+   * @returns True if the file extension is allowed
+   */
+  isAllowed(t) {
+    const i = t.split("?")[0].split(".").pop()?.toLowerCase();
+    return i ? this.allowedExtensions.includes(i) : !1;
+  }
+  /**
+   * Get the list of allowed extensions
+   * @returns Array of allowed extensions
+   */
+  getAllowedExtensions() {
+    return [...this.allowedExtensions];
+  }
+  // Future expansion methods:
+  // isAllowedSize(sizeBytes: number): boolean
+  // isAllowedDate(date: Date): boolean
+  // isAllowedDimensions(width: number, height: number): boolean
+}
+const Le = `
+.fbn-ic-gallery {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  perspective: 1000px;
+}
+
+.fbn-ic-image {
+  position: absolute;
+  cursor: pointer;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    z-index 0s 0.6s;
+  will-change: transform;
+  user-select: none;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.fbn-ic-image.fbn-ic-focused {
+  z-index: 1000;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
+    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    z-index 0s 0s;
+  will-change: auto;
+}
+
+.fbn-ic-counter {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10001;
+  pointer-events: none;
+}
+
+.fbn-ic-hidden {
+  display: none !important;
+}
+`;
+function ze() {
+  if (typeof document > "u") return;
+  const n = "fbn-ic-functional-styles";
+  if (document.getElementById(n)) return;
+  const t = document.createElement("style");
+  t.id = n, t.textContent = Le, document.head.appendChild(t);
+}
+class Fe {
+  constructor(t = {}) {
+    this.fullConfig = Wt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), 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.animationEngine = new Xt(this.fullConfig.animation), this.layoutEngine = new fe({
+      layout: this.fullConfig.layout,
+      image: this.fullConfig.image
+    }), this.zoomEngine = new ve(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = st(this.fullConfig.styling?.default), this.hoverStyles = st(this.fullConfig.styling?.hover), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
+    const e = this.fullConfig.animation.entry || y.animation.entry;
+    this.entryAnimationEngine = new oe(
+      e,
+      this.fullConfig.layout.algorithm
+    ), this.swipeEngine = null, this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
+  }
+  /**
+   * Create image filter based on shared loader config
+   */
+  createImageFilter() {
+    const t = this.fullConfig.config.loaders?.allowedExtensions;
+    return new Me(t);
+  }
+  /**
+   * Create appropriate image loader based on config
+   * Processes loaders array, merges shared config, wraps in CompositeLoader if needed
+   */
+  createLoader() {
+    const t = this.fullConfig.loaders, e = this.fullConfig.config.loaders ?? {};
+    if (!t || t.length === 0)
+      throw new Error("No loaders configured. Provide `images`, `loaders`, or both.");
+    const i = t.map((o) => this.createLoaderFromEntry(o, e));
+    return i.length === 1 ? i[0] : new Re({
+      loaders: i,
+      debugLogging: this.fullConfig.config.debug?.loaders
+    });
+  }
+  /**
+   * Create a single loader from a LoaderEntry, merging shared config
+   */
+  createLoaderFromEntry(t, e) {
+    if ("static" in t) {
+      const i = t.static, o = {
+        ...i,
+        validateUrls: i.validateUrls ?? e.validateUrls,
+        validationTimeout: i.validationTimeout ?? e.validationTimeout,
+        validationMethod: i.validationMethod ?? e.validationMethod,
+        allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
+        debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
+      };
+      return new Ce(o);
+    } else if ("googleDrive" in t) {
+      const i = t.googleDrive, o = {
+        ...i,
+        allowedExtensions: i.allowedExtensions ?? e.allowedExtensions,
+        debugLogging: i.debugLogging ?? this.fullConfig.config.debug?.loaders
+      };
+      return new Te(o);
+    } else
+      throw new Error(`Unknown loader entry: ${JSON.stringify(t)}`);
+  }
+  /**
+   * Initialize the gallery
+   */
+  async init() {
+    try {
+      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`);
+      this.containerEl.classList.add("fbn-ic-gallery"), this.swipeEngine = new ft(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, Ie);
+        }
+      }), 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);
+    }
+  }
+  setupUI() {
+    const t = this.fullConfig.rendering.ui;
+    t.showLoadingSpinner && (t.loadingElement ? (this.loadingEl = this.resolveElement(t.loadingElement), this.loadingElAutoCreated = !1) : (this.loadingEl = this.createDefaultLoadingElement(), this.loadingElAutoCreated = !0)), t.errorElement ? (this.errorEl = this.resolveElement(t.errorElement), this.errorElAutoCreated = !1) : (this.errorEl = this.createDefaultErrorElement(), this.errorElAutoCreated = !0), t.showImageCounter && (t.counterElement ? (this.counterEl = this.resolveElement(t.counterElement), this.counterElAutoCreated = !1) : (this.counterEl = this.createDefaultCounterElement(), this.counterElAutoCreated = !0));
+  }
+  resolveElement(t) {
+    return t instanceof HTMLElement ? t : document.getElementById(t);
+  }
+  createDefaultLoadingElement() {
+    const t = document.createElement("div");
+    t.className = "fbn-ic-loading fbn-ic-hidden";
+    const e = document.createElement("div");
+    e.className = "fbn-ic-spinner", t.appendChild(e);
+    const i = document.createElement("p");
+    return i.textContent = "Loading images...", t.appendChild(i), this.containerEl.appendChild(t), t;
+  }
+  createDefaultErrorElement() {
+    const t = document.createElement("div");
+    return t.className = "fbn-ic-error fbn-ic-hidden", this.containerEl.appendChild(t), t;
+  }
+  createDefaultCounterElement() {
+    const t = document.createElement("div");
+    return t.className = "fbn-ic-counter fbn-ic-hidden", this.containerEl.appendChild(t), t;
+  }
+  setupEventListeners() {
+    document.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());
+    }), window.addEventListener("resize", () => this.handleResize());
+  }
+  /**
+   * Navigate to the next image (Right arrow)
+   */
+  navigateToNextImage() {
+    if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
+    const t = (this.currentFocusIndex + 1) % this.imageLayouts.length, e = this.imageElements.find(
+      (o) => o.dataset.imageId === String(t)
+    );
+    if (!e) return;
+    const i = this.imageLayouts[t];
+    i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
+  }
+  /**
+   * Navigate to the previous image (Left arrow)
+   */
+  navigateToPreviousImage() {
+    if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
+    const t = (this.currentFocusIndex - 1 + this.imageLayouts.length) % this.imageLayouts.length, e = this.imageElements.find(
+      (o) => o.dataset.imageId === String(t)
+    );
+    if (!e) return;
+    const i = this.imageLayouts[t];
+    i && (this.currentFocusIndex = t, this.handleImageClick(e, i), this.updateCounter(t));
+  }
+  /**
+   * Navigate to a specific image by index
+   */
+  handleResize() {
+    this.imagesLoaded && (this.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.resizeTimeout = window.setTimeout(() => {
+      const t = this.getImageHeight();
+      t !== this.currentImageHeight ? (this.logDebug(`Window resized to new breakpoint (height: ${t}px). Reloading images...`), this.loadImages()) : this.logDebug("Window resized (no breakpoint change)");
+    }, 500));
+  }
+  getImageHeight() {
+    const t = window.innerWidth, e = this.fullConfig.layout.responsive, o = this.fullConfig.image.sizing?.maxSize ?? 400;
+    return e ? t <= e.mobile.maxWidth ? Math.min(100, o) : t <= e.tablet.maxWidth ? Math.min(180, o) : Math.min(225, o) : t <= 767 ? Math.min(100, o) : t <= 1199 ? Math.min(180, o) : Math.min(225, o);
+  }
+  /**
+   * Get container bounds for layout calculations
+   */
+  getContainerBounds() {
+    return this.containerEl ? {
+      width: this.containerEl.offsetWidth,
+      height: this.containerEl.offsetHeight || window.innerHeight * 0.7
+    } : { width: window.innerWidth, height: window.innerHeight * 0.7 };
+  }
+  /**
+   * Load images using the unified loader interface
+   */
+  async loadImages() {
+    try {
+      this.showLoading(!0), this.hideError(), this.clearImageCloud(), await this.imageLoader.prepare(this.imageFilter);
+      const t = this.imageLoader.imagesLength();
+      let e = this.imageLoader.imageURLs();
+      if (t === 0) {
+        this.showError("No images found."), this.showLoading(!1);
+        return;
+      }
+      const i = this.getContainerBounds(), o = this.getImageHeight(), s = window.innerWidth;
+      this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${o}px`);
+      const r = this.layoutEngine.calculateAdaptiveSize(
+        i,
+        t,
+        o,
+        s
+      );
+      this.logDebug(`Adaptive sizing result: height=${r.height}px`), await this.createImageCloud(e, r.height), this.showLoading(!1), this.imagesLoaded = !0;
+    } catch (t) {
+      console.error("Error loading images:", t), t instanceof Error && this.showError(t.message || "Failed to load images."), this.showLoading(!1);
+    }
+  }
+  /**
+   * Helper for debug logging
+   */
+  logDebug(...t) {
+    this.fullConfig.config.debug?.enabled && typeof console < "u" && console.log(...t);
+  }
+  async createImageCloud(t, e) {
+    if (!this.containerEl) return;
+    const i = this.getContainerBounds();
+    this.currentImageHeight = e;
+    const o = this.loadGeneration, s = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
+    this.imageLayouts = s, this.displayQueue = [];
+    let r = 0;
+    const a = (c) => {
+      this.containerEl && (this.containerEl.appendChild(c), this.imageElements.push(c), requestAnimationFrame(() => {
+        if (c.offsetWidth, c.style.opacity = this.defaultStyles.opacity ?? "1", c.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || c.dataset.startRotation !== c.dataset.rotation || c.dataset.startScale !== c.dataset.scale)) {
+          const d = {
+            x: parseFloat(c.dataset.startX),
+            y: parseFloat(c.dataset.startY)
+          }, m = {
+            x: parseFloat(c.dataset.endX),
+            y: parseFloat(c.dataset.endY)
+          }, b = parseFloat(c.dataset.imageWidth), p = parseFloat(c.dataset.imageHeight), g = parseFloat(c.dataset.rotation), f = parseFloat(c.dataset.scale), E = c.dataset.startRotation ? parseFloat(c.dataset.startRotation) : g, v = c.dataset.startScale ? parseFloat(c.dataset.startScale) : f, w = this.entryAnimationEngine.getTiming();
+          ee({
+            element: c,
+            startPosition: d,
+            endPosition: m,
+            pathConfig: this.entryAnimationEngine.getPathConfig(),
+            duration: w.duration,
+            imageWidth: b,
+            imageHeight: p,
+            rotation: g,
+            scale: f,
+            rotationConfig: this.entryAnimationEngine.getRotationConfig(),
+            startRotation: E,
+            scaleConfig: this.entryAnimationEngine.getScaleConfig(),
+            startScale: v
+          });
+        } else {
+          const d = c.dataset.finalTransform || "";
+          c.style.transform = d;
+        }
+        const l = parseInt(c.dataset.imageId || "0");
+        if (this.fullConfig.config.debug?.enabled && l < 3) {
+          const d = c.dataset.finalTransform || "";
+          console.log(`Image ${l} final state:`, {
+            left: c.style.left,
+            top: c.style.top,
+            width: c.style.width,
+            height: c.style.height,
+            computedWidth: c.offsetWidth,
+            computedHeight: c.offsetHeight,
+            transform: d,
+            pathType: this.entryAnimationEngine.getPathType()
+          });
+        }
+      }), r++);
+    }, h = () => {
+      if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
+        for (; this.displayQueue.length > 0; ) {
+          const c = this.displayQueue.shift();
+          c && a(c);
+        }
+        return;
+      }
+      this.queueInterval !== null && clearInterval(this.queueInterval), this.queueInterval = window.setInterval(() => {
+        if (o !== this.loadGeneration) {
+          this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
+          return;
+        }
+        if (this.displayQueue.length > 0) {
+          const c = this.displayQueue.shift();
+          c && a(c);
+        }
+        r >= t.length && this.displayQueue.length === 0 && this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null);
+      }, this.fullConfig.animation.queue.interval);
+    };
+    if ("IntersectionObserver" in window && this.containerEl) {
+      const c = new IntersectionObserver((u) => {
+        u.forEach((l) => {
+          l.isIntersecting && (h(), c.disconnect());
+        });
+      }, { threshold: 0.1, rootMargin: "50px" });
+      c.observe(this.containerEl);
+    } else
+      h();
+    this.fullConfig.config.debug?.centers && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((c) => c.remove()), s.forEach((c, u) => {
+      const l = document.createElement("div");
+      l.className = "fbn-ic-debug-center", l.style.position = "absolute", l.style.width = "12px", l.style.height = "12px", l.style.borderRadius = "50%", l.style.backgroundColor = "red", l.style.border = "2px solid yellow", l.style.zIndex = "9999", l.style.pointerEvents = "none";
+      const d = c.x, m = c.y;
+      l.style.left = `${d - 6}px`, l.style.top = `${m - 6}px`, l.title = `Image ${u}: center (${Math.round(d)}, ${Math.round(m)})`, this.containerEl.appendChild(l);
+    })), t.forEach((c, u) => {
+      const l = document.createElement("img");
+      l.referrerPolicy = "no-referrer", l.classList.add("fbn-ic-image"), l.dataset.imageId = String(u);
+      const d = s[u];
+      l.style.position = "absolute", l.style.width = "auto", l.style.height = `${e}px`, l.style.left = `${d.x}px`, l.style.top = `${d.y}px`, d.zIndex && (l.style.zIndex = String(d.zIndex)), tt(l, this.defaultStyles), et(l, this.defaultClassName), l.addEventListener("mouseenter", () => {
+        this.hoveredImage = { element: l, layout: d }, this.zoomEngine.isInvolved(l) || (tt(l, this.hoverStyles), et(l, this.hoverClassName));
+      }), l.addEventListener("mouseleave", () => {
+        this.hoveredImage = null, this.zoomEngine.isInvolved(l) || (tt(l, this.defaultStyles), Ft(l, this.hoverClassName), et(l, this.defaultClassName));
+      }), l.addEventListener("click", (m) => {
+        m.stopPropagation(), this.handleImageClick(l, d);
+      }), l.style.opacity = "0", l.style.transition = this.entryAnimationEngine.getTransitionCSS(), l.onload = () => {
+        if (o !== this.loadGeneration)
+          return;
+        const m = l.naturalWidth / l.naturalHeight, b = e * m;
+        l.style.width = `${b}px`;
+        const p = { x: d.x, y: d.y }, g = { width: b, height: e }, f = this.entryAnimationEngine.calculateStartPosition(
+          p,
+          g,
+          i,
+          u,
+          t.length
+        ), E = this.entryAnimationEngine.calculateStartRotation(d.rotation), v = this.entryAnimationEngine.calculateStartScale(d.scale), w = this.entryAnimationEngine.buildFinalTransform(
+          d.rotation,
+          d.scale,
+          b,
+          e
+        ), S = this.entryAnimationEngine.buildStartTransform(
+          f,
+          p,
+          d.rotation,
+          d.scale,
+          b,
+          e,
+          E,
+          v
+        );
+        this.fullConfig.config.debug?.enabled && u < 3 && console.log(`Image ${u}:`, {
+          finalPosition: p,
+          imageSize: g,
+          left: d.x,
+          top: d.y,
+          finalTransform: w,
+          renderedWidth: b,
+          renderedHeight: e
+        }), l.style.transform = S, l.dataset.finalTransform = w, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || E !== d.rotation || v !== d.scale) && (l.dataset.startX = String(f.x), l.dataset.startY = String(f.y), l.dataset.endX = String(p.x), l.dataset.endY = String(p.y), l.dataset.imageWidth = String(b), l.dataset.imageHeight = String(e), l.dataset.rotation = String(d.rotation), l.dataset.scale = String(d.scale), l.dataset.startRotation = String(E), l.dataset.startScale = String(v)), this.displayQueue.push(l);
+      }, l.onerror = () => r++, l.src = c;
+    });
+  }
+  async handleImageClick(t, e) {
+    if (!this.containerEl) return;
+    const i = this.zoomEngine.isFocused(t), o = {
+      width: this.containerEl.offsetWidth,
+      height: this.containerEl.offsetHeight
+    };
+    if (i)
+      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter();
+    else {
+      const s = t.dataset.imageId;
+      this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), await this.zoomEngine.focusImage(t, o, e), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex);
+    }
+  }
+  /**
+   * Clear the image cloud and reset state
+   */
+  clearImageCloud() {
+    this.queueInterval !== null && (clearInterval(this.queueInterval), this.queueInterval = null), this.loadGeneration++, this.displayQueue = [], this.containerEl && this.containerEl.querySelectorAll(".fbn-ic-image, .fbn-ic-debug-center").forEach((t) => t.remove()), this.imageElements = [], this.imageLayouts = [], this.currentFocusIndex = null, this.hoveredImage = null, this.layoutEngine.reset(), this.zoomEngine.reset(), this.imagesLoaded = !1;
+  }
+  showLoading(t) {
+    !this.fullConfig.rendering.ui.showLoadingSpinner || !this.loadingEl || (t ? this.loadingEl.classList.remove("fbn-ic-hidden") : this.loadingEl.classList.add("fbn-ic-hidden"));
+  }
+  showError(t) {
+    this.errorEl && (this.errorEl.textContent = t, this.errorEl.classList.remove("fbn-ic-hidden"));
+  }
+  hideError() {
+    this.errorEl && this.errorEl.classList.add("fbn-ic-hidden");
+  }
+  updateCounter(t) {
+    !this.fullConfig.rendering.ui.showImageCounter || !this.counterEl || (this.counterEl.textContent = `${t + 1} of ${this.imageElements.length}`, this.counterEl.classList.remove("fbn-ic-hidden"));
+  }
+  hideCounter() {
+    this.counterEl && this.counterEl.classList.add("fbn-ic-hidden");
+  }
+  /**
+   * Destroy the gallery and clean up resources
+   */
+  destroy() {
+    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.resizeTimeout !== null && clearTimeout(this.resizeTimeout), this.swipeEngine?.destroy();
+  }
+}
+const wt = class wt extends HTMLElement {
+  constructor() {
+    super(...arguments), this._instance = null, this._container = null;
+  }
+  connectedCallback() {
+    this._container = document.createElement("div"), this._container.style.width = "100%", this._container.style.height = "100%", this.appendChild(this._container), this._init();
+  }
+  disconnectedCallback() {
+    this._destroy(), this._container && (this._container.remove(), this._container = null);
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this._container && (this._destroy(), this._init());
+  }
+  getInstance() {
+    return this._instance;
+  }
+  _getOptions() {
+    const t = {}, e = this.getAttribute("config");
+    if (e)
+      try {
+        const s = JSON.parse(e), { container: r, ...a } = s;
+        Object.assign(t, a);
+      } catch (s) {
+        console.error("<image-cloud> invalid config JSON:", s);
+      }
+    const i = this.getAttribute("images");
+    if (i)
+      try {
+        t.images = JSON.parse(i);
+      } catch (s) {
+        console.error("<image-cloud> invalid images JSON:", s);
+      }
+    const o = this.getAttribute("layout");
+    return o && (t.layout = {
+      ...t.layout,
+      algorithm: o
+    }), t;
+  }
+  _init() {
+    if (this._container)
+      try {
+        const t = this._getOptions();
+        this._instance = new Fe({
+          container: this._container,
+          ...t
+        }), this._instance.init().then(() => {
+          this.dispatchEvent(new CustomEvent("initialized", { bubbles: !0 }));
+        }).catch((e) => {
+          console.error("<image-cloud> init failed:", e), this.dispatchEvent(new CustomEvent("error", { detail: e, bubbles: !0 }));
+        });
+      } catch (t) {
+        console.error("<image-cloud> creation failed:", t), this.dispatchEvent(new CustomEvent("error", { detail: t, bubbles: !0 }));
+      }
+  }
+  _destroy() {
+    this._instance?.destroy(), this._instance = null;
+  }
+};
+wt.observedAttributes = ["config", "images", "layout"];
+let pt = wt;
+typeof customElements < "u" && !customElements.get("image-cloud") && customElements.define("image-cloud", pt);
+export {
+  pt as ImageCloudElement
+};
+//# sourceMappingURL=web-component.js.map