@frybynite/image-cloud 0.1.0

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

@@ -0,0 +1,3106 @@
+const Ht = ".fbn-ic-gallery{--fbn-ic-bg-primary: #05060F;--fbn-ic-bg-secondary: #1a1a2e;--fbn-ic-bg-glass: rgba(255, 255, 255, .05);--fbn-ic-border-glass: rgba(255, 255, 255, .1);--fbn-ic-text-primary: #ffffff;--fbn-ic-text-secondary: #b8b8d1;--fbn-ic-text-muted: #6b6b8f;--fbn-ic-accent-primary: #6366f1;--fbn-ic-accent-secondary: #8b5cf6;--fbn-ic-accent-glow: rgba(99, 102, 241, .4);--fbn-ic-transition-smooth: cubic-bezier(.4, 0, .2, 1);--fbn-ic-transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--fbn-ic-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--fbn-ic-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--fbn-ic-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--fbn-ic-shadow-glow: 0 0 20px var(--fbn-ic-accent-glow)}.fbn-ic-gallery{position:relative;width:100%;height:100%;overflow:hidden;perspective:1000px}.fbn-ic-image{position:absolute;border-radius:8px;box-shadow:var(--fbn-ic-shadow-md);cursor:pointer;transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s .6s;will-change:transform;-webkit-user-select:none;user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}.fbn-ic-image:hover{box-shadow:var(--fbn-ic-shadow-lg)}.fbn-ic-image.fbn-ic-focused{z-index:1000;box-shadow:0 20px 60px #000000b3,var(--fbn-ic-shadow-glow);transition:transform .6s var(--fbn-ic-transition-smooth),box-shadow .6s var(--fbn-ic-transition-smooth),filter .3s var(--fbn-ic-transition-smooth),opacity .3s var(--fbn-ic-transition-smooth),border .3s var(--fbn-ic-transition-smooth),outline .3s var(--fbn-ic-transition-smooth),z-index 0s 0s;will-change:auto}.fbn-ic-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--fbn-ic-text-secondary);z-index:100;pointer-events:none}.fbn-ic-spinner{width:50px;height:50px;margin:0 auto 1rem;border:4px solid var(--fbn-ic-border-glass);border-top:4px solid var(--fbn-ic-accent-primary);border-radius:50%;animation:fbn-ic-spin 1s linear infinite}@keyframes fbn-ic-spin{to{transform:rotate(360deg)}}.fbn-ic-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:600px;padding:1.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.fbn-ic-hidden{display:none!important}", St = 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)"
+}), zt = 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 })
+}), Mt = 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 })
+}), Tt = 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 })
+}), It = Object.freeze({
+  type: "linear"
+}), Et = Object.freeze({
+  mode: "none"
+}), Rt = Object.freeze({
+  mode: "none"
+}), Lt = 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"
+  })
+}), kt = 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'
+}), jt = Object.freeze({
+  // baseHeight not set - layouts will auto-calculate based on targetCoverage
+  variance: Object.freeze({
+    min: 1,
+    // No variance by default
+    max: 1
+  }),
+  scaleDecay: 0
+  // No decay by default
+}), _t = Object.freeze({
+  mode: "none",
+  range: Object.freeze({
+    min: -15,
+    max: 15
+  })
+}), $t = Object.freeze({
+  sizing: jt,
+  rotation: _t
+}), y = Object.freeze({
+  // Unified loader configuration
+  loader: Object.freeze({
+    type: "googleDrive",
+    googleDrive: Object.freeze({
+      apiKey: "",
+      // Must be provided by user
+      sources: [],
+      // Must be provided by user
+      apiEndpoint: "https://www.googleapis.com/drive/v3/files",
+      allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
+      debugLogging: !1
+    }),
+    static: Object.freeze({
+      sources: [],
+      // Must be provided by user
+      validateUrls: !0,
+      validationTimeout: 5e3,
+      validationMethod: "head",
+      failOnAllMissing: !0,
+      allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp", "bmp"],
+      debugLogging: !1
+    })
+  }),
+  // Image sizing and rotation configuration
+  image: $t,
+  // Pattern-based layout configuration
+  layout: Object.freeze({
+    algorithm: "radial",
+    sizing: Object.freeze({
+      base: 200,
+      // pixels - fallback when image.sizing.baseHeight not set
+      responsive: [
+        { minWidth: 1200, height: 225 },
+        // Large screens
+        { minWidth: 768, height: 180 },
+        // Tablet / Small desktop
+        { minWidth: 0, height: 100 }
+        // Mobile / Default
+      ],
+      adaptive: Object.freeze({
+        enabled: !0,
+        // Enable adaptive sizing by default
+        minSize: 50,
+        // Minimum 50px image height
+        maxSize: 400
+        // Maximum 400px image height
+      })
+    }),
+    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
+    }),
+    debugRadials: !1,
+    debugCenters: !1
+  }),
+  // 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
+        stagger: 150
+        // ms between images
+      }),
+      easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+      // smooth deceleration
+      path: It,
+      rotation: Et,
+      scale: Rt
+    })
+  }),
+  // 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: void 0,
+      // STUB: Not implemented yet
+      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: Lt,
+  // Debug mode
+  debug: !1
+});
+function rt(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 Gt(n, t) {
+  if (!t) return { ...n };
+  const e = rt(n.default, t.default), i = rt(
+    rt(e, n.hover),
+    t.hover
+  ), o = rt(
+    rt(e, n.focused),
+    t.focused
+  );
+  return {
+    default: e,
+    hover: i,
+    focused: o
+  };
+}
+function Wt(n, t) {
+  var i, o, a, c, s, h, l, g;
+  if (!t) return { ...n };
+  const e = { ...n };
+  if (t.sizing !== void 0 && (e.sizing = {
+    ...n.sizing,
+    ...t.sizing
+  }, t.sizing.variance)) {
+    const r = t.sizing.variance, d = r.min !== void 0 && r.min > 0.1 && r.min < 1 ? r.min : ((o = (i = n.sizing) == null ? void 0 : i.variance) == null ? void 0 : o.min) ?? 1, m = r.max !== void 0 && r.max > 1 && r.max < 2 ? r.max : ((c = (a = n.sizing) == null ? void 0 : a.variance) == null ? void 0 : c.max) ?? 1;
+    e.sizing.variance = { min: d, max: m };
+  }
+  if (t.rotation !== void 0 && (e.rotation = {
+    ...n.rotation,
+    ...t.rotation
+  }, t.rotation.range)) {
+    const r = t.rotation.range, d = r.min !== void 0 && r.min >= -180 && r.min <= 0 ? r.min : ((h = (s = n.rotation) == null ? void 0 : s.range) == null ? void 0 : h.min) ?? -15, m = r.max !== void 0 && r.max >= 0 && r.max <= 180 ? r.max : ((g = (l = n.rotation) == null ? void 0 : l.range) == null ? void 0 : g.max) ?? 15;
+    e.rotation.range = { min: d, max: m };
+  }
+  return e;
+}
+function Nt(n) {
+  var e;
+  const t = (e = n.layout) == null ? void 0 : e.rotation;
+  if (t && "enabled" in t)
+    return {
+      rotation: {
+        mode: t.enabled ? "random" : "none",
+        range: t.range
+      }
+    };
+}
+function qt(n) {
+  var e, i;
+  const t = (i = (e = n.layout) == null ? void 0 : e.sizing) == null ? void 0 : i.variance;
+  if (t)
+    return {
+      sizing: {
+        variance: t
+      }
+    };
+}
+function Yt(n = {}) {
+  var a;
+  const t = Nt(n), e = qt(n);
+  let i = n.image;
+  (t || e) && (i = {
+    ...e || {},
+    ...t || {},
+    ...i
+  }, i.rotation && (t != null && t.rotation) && ((a = n.image) != null && a.rotation) && (i.rotation = {
+    ...t.rotation,
+    ...n.image.rotation
+  }));
+  const o = {
+    loader: { ...y.loader },
+    image: Wt($t, i),
+    layout: { ...y.layout },
+    animation: { ...y.animation },
+    interaction: { ...y.interaction },
+    rendering: { ...y.rendering },
+    styling: Gt(Lt, n.styling),
+    debug: y.debug
+  };
+  return n.loader && (o.loader = {
+    ...y.loader,
+    ...n.loader
+  }, n.loader.googleDrive && (o.loader.googleDrive = {
+    ...y.loader.googleDrive,
+    ...n.loader.googleDrive,
+    sources: n.loader.googleDrive.sources || y.loader.googleDrive.sources,
+    allowedExtensions: n.loader.googleDrive.allowedExtensions || y.loader.googleDrive.allowedExtensions
+  }), n.loader.static && (o.loader.static = {
+    ...y.loader.static,
+    ...n.loader.static,
+    sources: n.loader.static.sources || y.loader.static.sources,
+    allowedExtensions: n.loader.static.allowedExtensions || y.loader.static.allowedExtensions
+  })), n.layout && (o.layout = {
+    ...y.layout,
+    ...n.layout
+  }, n.layout.sizing && (o.layout.sizing = {
+    ...y.layout.sizing,
+    ...n.layout.sizing,
+    responsive: n.layout.sizing.responsive || y.layout.sizing.responsive,
+    adaptive: n.layout.sizing.adaptive ? { ...y.layout.sizing.adaptive, ...n.layout.sizing.adaptive } : y.layout.sizing.adaptive
+  }), n.layout.spacing && (o.layout.spacing = {
+    ...y.layout.spacing,
+    ...n.layout.spacing
+  })), n.animation && (o.animation = {
+    ...y.animation,
+    ...n.animation
+  }, n.animation.easing && (o.animation.easing = {
+    ...y.animation.easing,
+    ...n.animation.easing
+  }), n.animation.queue && (o.animation.queue = {
+    ...y.animation.queue,
+    ...n.animation.queue
+  }), n.animation.performance && (o.animation.performance = {
+    ...y.animation.performance,
+    ...n.animation.performance
+  }), n.animation.entry && (o.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 ? { ...It, ...n.animation.entry.path } : y.animation.entry.path,
+    rotation: n.animation.entry.rotation ? { ...Et, ...n.animation.entry.rotation } : y.animation.entry.rotation,
+    scale: n.animation.entry.scale ? { ...Rt, ...n.animation.entry.scale } : y.animation.entry.scale
+  })), n.interaction && (o.interaction = {
+    ...y.interaction,
+    ...n.interaction
+  }, n.interaction.focus && (o.interaction.focus = {
+    ...y.interaction.focus,
+    ...n.interaction.focus
+  }), n.interaction.navigation && (o.interaction.navigation = {
+    ...y.interaction.navigation,
+    ...n.interaction.navigation
+  }), n.interaction.gestures && (o.interaction.gestures = {
+    ...y.interaction.gestures,
+    ...n.interaction.gestures
+  })), n.rendering && (o.rendering = {
+    ...y.rendering,
+    ...n.rendering
+  }, n.rendering.responsive && (o.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 && (o.rendering.ui = {
+    ...y.rendering.ui,
+    ...n.rendering.ui
+  }), n.rendering.performance && (o.rendering.performance = {
+    ...y.rendering.performance,
+    ...n.rendering.performance
+  })), n.debug !== void 0 && (o.debug = n.debug), o;
+}
+function Xt(n, t) {
+  return { ...n ? zt[n] : zt.playful, ...t };
+}
+function Bt(n, t) {
+  return { ...n ? Mt[n] : Mt.gentle, ...t };
+}
+function Vt(n, t) {
+  return { ...n ? Tt[n] : Tt.gentle, ...t };
+}
+class Jt {
+  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, a = null) {
+    this.cancelAllAnimations(t);
+    const c = o ?? this.config.duration, s = a ?? this.config.easing.default, h = this.buildTransformString(e), l = this.buildTransformString(i);
+    t.style.transition = "none";
+    const g = t.animate(
+      [
+        { transform: h },
+        { transform: l }
+      ],
+      {
+        duration: c,
+        easing: s,
+        fill: "forwards"
+        // Keep final state after animation
+      }
+    ), r = {
+      id: `anim-${++this.animationIdCounter}`,
+      element: t,
+      animation: g,
+      fromState: e,
+      toState: i,
+      startTime: performance.now(),
+      duration: c
+    };
+    return this.activeAnimations.set(t, r), g.finished.then(() => {
+      t.style.transform = l, this.activeAnimations.delete(t);
+    }).catch(() => {
+      this.activeAnimations.delete(t);
+    }), r;
+  }
+  /**
+   * 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), a = Math.sqrt(o.a * o.a + o.b * o.b), c = Math.atan2(o.b, o.a) * (180 / Math.PI), s = o.e, h = o.f;
+    return { x: s, y: h, rotation: c, scale: a };
+  }
+  /**
+   * 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((a) => {
+      const c = i ?? this.config.duration, s = o ?? this.config.easing.default;
+      t.style.transition = `transform ${c}ms ${s}, box-shadow ${c}ms ${s}`, t.style.transform = this.buildTransformString(e), setTimeout(() => {
+        a();
+      }, c);
+    });
+  }
+  /**
+   * 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 st(n, t, e) {
+  return n + (t - n) * e;
+}
+function Zt(n, t, e, i) {
+  const { overshoot: o, bounces: a, decayRatio: c } = i, s = e.x - t.x, h = e.y - t.y, l = Qt(a, c);
+  let g = 0, r = 0, d = 1, m = o, b = !1;
+  for (let u = 0; u < l.length; u++)
+    if (n <= l[u].time) {
+      r = u === 0 ? 0 : l[u - 1].time, d = l[u].time, m = l[u].overshoot, b = l[u].isOvershoot;
+      break;
+    }
+  const p = (n - r) / (d - r);
+  if (b)
+    g = 1 + m * ut(p);
+  else if (r === 0)
+    g = ut(p);
+  else {
+    const u = l.find(
+      (w, v) => w.time > r && v > 0 && l[v - 1].isOvershoot
+    ), f = 1 + ((u == null ? void 0 : u.overshoot) || m);
+    g = st(f, 1, ut(p));
+  }
+  return {
+    x: t.x + s * g,
+    y: t.y + h * g
+  };
+}
+function Qt(n, t) {
+  const e = [];
+  let i = 0.6;
+  e.push({ time: i, overshoot: 0, isOvershoot: !1 });
+  let o = 0.15;
+  const c = 0.4 / (n * 2);
+  for (let s = 0; s < n; s++)
+    i += c, e.push({ time: i, overshoot: o, isOvershoot: !0 }), i += c, e.push({ time: i, overshoot: o * t, isOvershoot: !1 }), o *= t;
+  return e.push({ time: 1, overshoot: 0, isOvershoot: !1 }), e;
+}
+function Kt(n, t, e, i) {
+  const { stiffness: o, damping: a, mass: c, oscillations: s } = i, h = e.x - t.x, l = e.y - t.y, g = Math.sqrt(o / c), r = a / (2 * Math.sqrt(o * c));
+  let d;
+  if (r < 1) {
+    const m = g * Math.sqrt(1 - r * r), b = Math.exp(-r * g * n * 3), p = Math.cos(m * n * s * Math.PI);
+    d = 1 - b * p;
+  } else
+    d = 1 - Math.exp(-g * n * 3);
+  return d = Math.max(0, Math.min(d, 1.3)), {
+    x: t.x + h * d,
+    y: t.y + l * d
+  };
+}
+function te(n, t, e, i) {
+  const { amplitude: o, frequency: a, decay: c, decayRate: s, phase: h } = i, l = e.x - t.x, g = e.y - t.y, r = Math.sqrt(l * l + g * g), d = r > 0 ? -g / r : 0, m = r > 0 ? l / r : 1, b = a * Math.PI * 2 * n + h, p = c ? Math.pow(1 - n, s) : 1, u = o * Math.sin(b) * p, f = ee(n);
+  return {
+    x: st(t.x, e.x, f) + u * d,
+    y: st(t.y, e.y, f) + u * m
+  };
+}
+function ut(n) {
+  return 1 - (1 - n) * (1 - n);
+}
+function ee(n) {
+  return 1 - Math.pow(1 - n, 3);
+}
+function ie(n, t, e) {
+  const { amplitude: i, frequency: o, decay: a } = e, c = Math.sin(n * o * Math.PI * 2), s = a ? Math.pow(1 - n, 2) : 1, h = i * c * s;
+  return t + h;
+}
+function ne(n, t, e) {
+  const { overshoot: i, bounces: o } = e, a = [];
+  a.push({ time: 0.5, scale: i });
+  let c = i;
+  const s = 0.5, l = 0.5 / (o * 2);
+  let g = 0.5;
+  for (let d = 0; d < o; d++) {
+    const m = 1 - (c - 1) * s;
+    g += l, a.push({ time: g, scale: m }), c = 1 + (c - 1) * s * s, g += l, d < o - 1 && a.push({ time: g, scale: c });
+  }
+  a.push({ time: 1, scale: 1 });
+  let r = 1;
+  for (let d = 0; d < a.length; d++)
+    if (n <= a[d].time) {
+      const m = d === 0 ? 0 : a[d - 1].time, b = d === 0 ? 1 : a[d - 1].scale, p = (n - m) / (a[d].time - m), u = ut(p);
+      r = b + (a[d].scale - b) * u;
+      break;
+    }
+  return r * t;
+}
+function oe(n) {
+  const {
+    element: t,
+    startPosition: e,
+    endPosition: i,
+    pathConfig: o,
+    duration: a,
+    imageWidth: c,
+    imageHeight: s,
+    rotation: h,
+    scale: l,
+    onComplete: g,
+    rotationConfig: r,
+    startRotation: d,
+    scaleConfig: m,
+    startScale: b
+  } = n, p = o.type, u = d !== void 0 && d !== h, f = (r == null ? void 0 : r.mode) === "wobble", w = (r == null ? void 0 : r.wobble) || { amplitude: 15, frequency: 3, decay: !0 }, v = u || f, R = b !== void 0 && b !== l, T = (m == null ? void 0 : m.mode) === "pop", x = (m == null ? void 0 : m.pop) || { overshoot: 1.2, bounces: 1 };
+  if ((p === "linear" || p === "arc") && !v && !(R || T)) {
+    g && g();
+    return;
+  }
+  const _ = performance.now(), j = -c / 2, P = -s / 2;
+  function U(G) {
+    const F = G - _, I = Math.min(F / a, 1);
+    let A;
+    switch (p) {
+      case "bounce": {
+        const D = Xt(
+          o.bouncePreset,
+          o.bounce
+        );
+        A = Zt(I, e, i, D);
+        break;
+      }
+      case "elastic": {
+        const D = Bt(
+          o.elasticPreset,
+          o.elastic
+        );
+        A = Kt(I, e, i, D);
+        break;
+      }
+      case "wave": {
+        const D = Vt(
+          o.wavePreset,
+          o.wave
+        );
+        A = te(I, e, i, D);
+        break;
+      }
+      default:
+        A = {
+          x: st(e.x, i.x, I),
+          y: st(e.y, i.y, I)
+        };
+    }
+    const O = A.x - i.x, S = A.y - i.y;
+    let z;
+    f ? z = ie(I, h, w) : u ? z = st(d, h, I) : z = h;
+    let M;
+    T ? M = ne(I, l, x) : R ? M = st(b, l, I) : M = l, t.style.transform = `translate(${j}px, ${P}px) translate(${O}px, ${S}px) rotate(${z}deg) scale(${M})`, I < 1 ? requestAnimationFrame(U) : (t.style.transform = `translate(${j}px, ${P}px) rotate(${h}deg) scale(${l})`, g && g());
+  }
+  requestAnimationFrame(U);
+}
+function se(n) {
+  return n === "bounce" || n === "elastic" || n === "wave";
+}
+const ae = {
+  radial: "center",
+  spiral: "center",
+  grid: "top",
+  cluster: "nearest-edge",
+  random: "nearest-edge",
+  wave: "left"
+};
+class re {
+  constructor(t, e) {
+    this.config = t, this.layoutAlgorithm = e, this.resolvedStartPosition = this.resolveStartPosition(), this.pathConfig = t.path || It, this.rotationConfig = t.rotation || Et, this.scaleConfig = t.scale || Rt;
+  }
+  /**
+   * Get the effective start position, considering layout-aware defaults
+   */
+  resolveStartPosition() {
+    return this.config.start.position ? this.config.start.position : ae[this.layoutAlgorithm] || "nearest-edge";
+  }
+  /**
+   * Calculate the starting position for an image's entry animation
+   */
+  calculateStartPosition(t, e, i, o, a) {
+    const c = this.resolvedStartPosition, s = this.config.start.offset ?? 100;
+    switch (c) {
+      case "nearest-edge":
+        return this.calculateNearestEdge(t, e, i, s);
+      case "top":
+        return this.calculateEdgePosition("top", t, e, i, s);
+      case "bottom":
+        return this.calculateEdgePosition("bottom", t, e, i, s);
+      case "left":
+        return this.calculateEdgePosition("left", t, e, i, s);
+      case "right":
+        return this.calculateEdgePosition("right", t, e, i, s);
+      case "center":
+        return this.calculateCenterPosition(i, t, e);
+      case "random-edge":
+        return this.calculateRandomEdge(t, e, i, s);
+      case "circular":
+        return this.calculateCircularPosition(
+          t,
+          e,
+          i,
+          o,
+          a
+        );
+      default:
+        return this.calculateNearestEdge(t, e, i, s);
+    }
+  }
+  /**
+   * Calculate start position from the nearest edge (current default behavior)
+   */
+  calculateNearestEdge(t, e, i, o) {
+    const a = t.x, c = t.y, s = a, h = i.width - a, l = c, g = i.height - c, r = Math.min(s, h, l, g);
+    let d = t.x, m = t.y;
+    return r === s ? d = -(e.width + o) : r === h ? d = i.width + o : r === l ? m = -(e.height + o) : m = i.height + o, { x: d, y: m };
+  }
+  /**
+   * Calculate start position from a specific edge
+   */
+  calculateEdgePosition(t, e, i, o, a) {
+    let c = e.x, s = e.y;
+    switch (t) {
+      case "top":
+        s = -(i.height + a);
+        break;
+      case "bottom":
+        s = o.height + a;
+        break;
+      case "left":
+        c = -(i.width + a);
+        break;
+      case "right":
+        c = o.width + a;
+        break;
+    }
+    return { x: c, y: s };
+  }
+  /**
+   * Calculate start position from center with scale animation
+   */
+  calculateCenterPosition(t, e, i) {
+    const o = t.width / 2, a = t.height / 2;
+    return {
+      x: o,
+      y: a,
+      useScale: !0
+      // Signal to use scale animation from 0
+    };
+  }
+  /**
+   * Calculate start position from a random edge
+   */
+  calculateRandomEdge(t, e, i, o) {
+    const a = ["top", "bottom", "left", "right"], c = a[Math.floor(Math.random() * a.length)];
+    return this.calculateEdgePosition(c, t, e, i, o);
+  }
+  /**
+   * Calculate start position on a circle around the container
+   */
+  calculateCircularPosition(t, e, i, o, a) {
+    const c = this.config.start.circular || {}, s = c.distribution || "even";
+    let h;
+    const l = c.radius || "120%";
+    if (typeof l == "string" && l.endsWith("%")) {
+      const p = parseFloat(l) / 100;
+      h = Math.sqrt(
+        i.width ** 2 + i.height ** 2
+      ) * p / 2;
+    } else
+      h = typeof l == "number" ? l : 500;
+    let g;
+    s === "even" ? g = o / a * 2 * Math.PI : g = Math.random() * 2 * Math.PI;
+    const r = i.width / 2, d = i.height / 2, m = r + Math.cos(g) * h, b = d + Math.sin(g) * h;
+    return { x: m, y: b };
+  }
+  /**
+   * Get animation parameters for an image
+   */
+  getAnimationParams(t) {
+    const e = this.config.timing.duration, i = this.config.timing.stagger, o = this.config.easing;
+    return {
+      startTransform: "",
+      // Will be computed by caller based on start position
+      duration: e,
+      delay: t * i,
+      easing: o
+    };
+  }
+  /**
+   * Build a CSS transform string for the start position
+   * Uses pixel-based centering offset for reliable cross-browser behavior
+   */
+  buildStartTransform(t, e, i, o, a, c, s, h) {
+    const l = t.x - e.x, g = t.y - e.y, r = s !== void 0 ? s : i, d = h !== void 0 ? h : o, m = a !== void 0 ? -a / 2 : 0, b = c !== void 0 ? -c / 2 : 0, p = a !== void 0 ? `translate(${m}px, ${b}px)` : "translate(-50%, -50%)";
+    return t.useScale ? `${p} translate(${l}px, ${g}px) rotate(${r}deg) scale(0)` : `${p} translate(${l}px, ${g}px) rotate(${r}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 a = -i / 2, c = -o / 2;
+      return `translate(${a}px, ${c}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 se(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,
+      stagger: this.config.timing.stagger
+    };
+  }
+  /**
+   * 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;
+      case "counterclockwise":
+        return 1;
+      case "random":
+        return Math.random() < 0.5 ? 1 : -1;
+      case "auto":
+      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: a, decay: c } = i, s = Math.sin(t * a * Math.PI * 2), h = c ? Math.pow(1 - t, 2) : 1, l = o * s * h;
+    return e + l;
+  }
+  /**
+   * 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: a } = i, c = this.generateScaleBounceKeyframes(a, o);
+    let s = e;
+    for (let h = 0; h < c.length; h++)
+      if (t <= c[h].time) {
+        const l = h === 0 ? 0 : c[h - 1].time, g = h === 0 ? e : c[h - 1].scale, r = (t - l) / (c[h].time - l), d = this.easeOutQuad(r);
+        s = g + (c[h].scale - g) * d;
+        break;
+      }
+    return s * e;
+  }
+  /**
+   * Generate keyframes for scale bounce animation
+   */
+  generateScaleBounceKeyframes(t, e) {
+    const i = [];
+    i.push({ time: 0.5, scale: e });
+    let o = e;
+    const a = 0.5, s = 0.5 / (t * 2);
+    let h = 0.5;
+    for (let l = 0; l < t; l++) {
+      const g = 1 - (o - 1) * a;
+      h += s, i.push({ time: h, scale: g }), o = 1 + (o - 1) * a * a, h += s, l < 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 ce {
+  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 = {}) {
+    var x, L, _, j, P, U, G, F, I;
+    const o = [], { width: a, height: c } = e, s = this.config.spacing.padding, h = i.fixedHeight ?? this.config.sizing.base, l = ((x = this.imageConfig.rotation) == null ? void 0 : x.mode) ?? "none", g = ((_ = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : _.min) ?? -15, r = ((P = (j = this.imageConfig.rotation) == null ? void 0 : j.range) == null ? void 0 : P.max) ?? 15, d = ((G = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : G.min) ?? 1, m = ((I = (F = this.imageConfig.sizing) == null ? void 0 : F.variance) == null ? void 0 : I.max) ?? 1, b = d !== 1 || m !== 1, u = h * 1.5 / 2, f = h / 2, w = a - s - u, v = c - s - f, R = s + u, T = s + f;
+    for (let A = 0; A < t; A++) {
+      const O = this.random(R, w), S = this.random(T, v), z = l === "random" ? this.random(g, r) : 0, M = b ? this.random(d, m) : 1, D = h * M, Z = {
+        id: A,
+        x: O,
+        y: S,
+        rotation: z,
+        scale: M,
+        baseSize: D
+      };
+      o.push(Z);
+    }
+    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 le {
+  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 = {}) {
+    var L, _, j, P, U, G, F, I, A, O;
+    const o = [], { width: a, height: c } = e, { debugRadials: s } = this.config, h = this.config.sizing.base, l = ((L = this.imageConfig.rotation) == null ? void 0 : L.mode) ?? "none", g = ((j = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : j.min) ?? -15, r = ((U = (P = this.imageConfig.rotation) == null ? void 0 : P.range) == null ? void 0 : U.max) ?? 15, d = ((F = (G = this.imageConfig.sizing) == null ? void 0 : G.variance) == null ? void 0 : F.min) ?? 1, m = ((A = (I = this.imageConfig.sizing) == null ? void 0 : I.variance) == null ? void 0 : A.max) ?? 1, b = d !== 1 || m !== 1, p = ((O = this.imageConfig.sizing) == null ? void 0 : O.scaleDecay) ?? 0, u = ["green", "blue", "red", "yellow", "orange", "purple"], f = i.fixedHeight ?? h, w = a / 2, v = c / 2, R = Math.ceil(Math.sqrt(t));
+    if (t > 0) {
+      const S = b ? this.random(d, m) : 1, z = f * S;
+      o.push({
+        id: 0,
+        x: w,
+        y: v,
+        rotation: l === "random" ? this.random(g * 0.33, r * 0.33) : 0,
+        // Less rotation for center
+        scale: S,
+        baseSize: z,
+        zIndex: 100,
+        // Center image is highest
+        borderColor: s ? "cyan" : void 0
+      });
+    }
+    let T = 1, x = 1;
+    for (; T < t; ) {
+      const S = x / R, z = p > 0 ? 1 - S * p * 0.5 : 1, M = x * (f * 0.8), D = M * 1.5, Z = Math.PI * (3 * (D + M) - Math.sqrt((3 * D + M) * (D + 3 * M))), et = this.estimateWidth(f), W = Math.floor(Z / (et * 0.7));
+      if (W === 0) {
+        x++;
+        continue;
+      }
+      const N = 2 * Math.PI / W, it = x * (20 * Math.PI / 180);
+      for (let Q = 0; Q < W && T < t; Q++) {
+        const B = Q * N + it, q = b ? this.random(d, m) : 1, nt = z * q, V = f * nt;
+        let C = w + Math.cos(B) * D, H = v + Math.sin(B) * M;
+        const $ = this.config.spacing.padding ?? 50, K = V * 1.5 / 2, k = V / 2;
+        C - K < $ ? C = $ + K : C + K > a - $ && (C = a - $ - K), H - k < $ ? H = $ + k : H + k > c - $ && (H = c - $ - k);
+        const tt = l === "random" ? this.random(g, r) : 0;
+        o.push({
+          id: T,
+          x: C,
+          y: H,
+          rotation: tt,
+          scale: nt,
+          baseSize: V,
+          zIndex: Math.max(1, 100 - x),
+          // Outer rings have lower z-index
+          borderColor: s ? u[(x - 1) % u.length] : void 0
+        }), T++;
+      }
+      x++;
+    }
+    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;
+  }
+}
+console.log("[GridPlacementGenerator] Module loaded");
+const he = {
+  columns: "auto",
+  rows: "auto",
+  stagger: "none",
+  jitter: 0,
+  overlap: 0,
+  fillDirection: "row",
+  alignment: "center",
+  gap: 10,
+  overflowOffset: 0.25
+}, Ft = [
+  { 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 de {
+  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 = {}) {
+    var et, W, N, it, Q, B, q, nt, V;
+    const o = [], { width: a, height: c } = e, s = { ...he, ...this.config.grid }, h = this.config.spacing.padding, l = i.fixedHeight ?? this.config.sizing.base, g = ((et = this.imageConfig.rotation) == null ? void 0 : et.mode) ?? "none", r = ((N = (W = this.imageConfig.sizing) == null ? void 0 : W.variance) == null ? void 0 : N.min) ?? 1, d = ((Q = (it = this.imageConfig.sizing) == null ? void 0 : it.variance) == null ? void 0 : Q.max) ?? 1, m = r !== 1 || d !== 1, b = a - 2 * h, p = c - 2 * h, { columns: u, rows: f } = this.calculateGridDimensions(
+      t,
+      b,
+      p,
+      l,
+      s
+    ), w = s.stagger === "row", v = s.stagger === "column", R = w ? u + 0.5 : u, T = v ? f + 0.5 : f, x = (b - s.gap * (u - 1)) / R, L = (p - s.gap * (f - 1)) / T, _ = w ? x / 2 : 0, j = v ? L / 2 : 0, P = 1 + s.overlap, U = Math.min(x, L) * P, G = i.fixedHeight ? Math.min(i.fixedHeight, U) : U, F = u * x + (u - 1) * s.gap + _, I = f * L + (f - 1) * s.gap + j, A = h + (b - F) / 2, O = h + (p - I) / 2, S = u * f, z = s.columns !== "auto" && s.rows !== "auto", M = z && t > S;
+    console.log("[GridGen] generate called, imageCount:", t, "gridConfig:", JSON.stringify({ columns: s.columns, rows: s.rows })), console.log("[GridGen] cellCount:", S, "hasFixedGrid:", z, "isOverflowMode:", M), typeof window < "u" && (window.__gridOverflowDebug = {
+      gridConfigColumns: s.columns,
+      gridConfigRows: s.rows,
+      columns: u,
+      rows: f,
+      cellCount: S,
+      hasFixedGrid: z,
+      imageCount: t,
+      isOverflowMode: M
+    });
+    const D = M ? new Array(S).fill(0) : [], Z = Math.min(x, L) * s.overflowOffset;
+    for (let C = 0; C < t; C++) {
+      let H, $, Y = 0;
+      if (M && C >= S) {
+        const J = C - S, X = J % S;
+        Y = Math.floor(J / S) + 1, D[X]++, s.fillDirection === "row" ? (H = X % u, $ = Math.floor(X / u)) : ($ = X % f, H = Math.floor(X / f));
+      } else
+        s.fillDirection === "row" ? (H = C % u, $ = Math.floor(C / u)) : ($ = C % f, H = Math.floor(C / f));
+      let K = A + H * (x + s.gap) + x / 2, k = O + $ * (L + s.gap) + L / 2;
+      if (s.stagger === "row" && $ % 2 === 1 ? K += x / 2 : s.stagger === "column" && H % 2 === 1 && (k += L / 2), Y > 0) {
+        const J = (Y - 1) % Ft.length, X = Ft[J];
+        K += X.x * Z, k += X.y * Z;
+      }
+      if (s.jitter > 0) {
+        const J = x / 2 * s.jitter, X = L / 2 * s.jitter;
+        K += this.random(-J, J), k += this.random(-X, X);
+      }
+      let tt = K, ot = k;
+      if (!M && s.fillDirection === "row") {
+        const J = t % u || u;
+        if ($ === Math.floor((t - 1) / u) && J < u) {
+          const At = J * x + (J - 1) * s.gap;
+          let xt = 0;
+          s.alignment === "center" ? xt = (F - At) / 2 : s.alignment === "end" && (xt = F - At), tt += xt;
+        }
+      }
+      const mt = m ? this.random(r, d) : 1, at = G * mt, dt = at * 1.5 / 2, gt = at / 2, bt = h + dt, yt = a - h - dt, Pt = h + gt, Ut = c - h - gt;
+      tt = Math.max(bt, Math.min(tt, yt)), ot = Math.max(Pt, Math.min(ot, Ut));
+      let vt = 0;
+      if (g === "random") {
+        const J = ((q = (B = this.imageConfig.rotation) == null ? void 0 : B.range) == null ? void 0 : q.min) ?? -15, X = ((V = (nt = this.imageConfig.rotation) == null ? void 0 : nt.range) == null ? void 0 : V.max) ?? 15;
+        s.jitter > 0 ? vt = this.random(J * s.jitter, X * s.jitter) : vt = this.random(J, X);
+      }
+      let wt;
+      M && Y > 0 ? wt = 50 - Y : wt = M ? 100 + C : C + 1, o.push({
+        id: C,
+        x: tt,
+        y: ot,
+        rotation: vt,
+        scale: mt,
+        baseSize: at,
+        zIndex: wt
+      });
+    }
+    return o;
+  }
+  /**
+   * Calculate optimal grid dimensions based on image count and container
+   */
+  calculateGridDimensions(t, e, i, o, a) {
+    let c, s;
+    if (a.columns !== "auto" && a.rows !== "auto")
+      c = a.columns, s = a.rows;
+    else if (a.columns !== "auto")
+      c = a.columns, s = Math.ceil(t / c);
+    else if (a.rows !== "auto")
+      s = a.rows, c = Math.ceil(t / s);
+    else {
+      const h = e / i;
+      for (c = Math.max(1, Math.round(Math.sqrt(t * h / 1.4))), s = Math.ceil(t / c); c > 1 && (c - 1) * s >= t; )
+        c--;
+    }
+    return { columns: Math.max(1, c), rows: Math.max(1, s) };
+  }
+  /**
+   * Utility: Generate random number between min and max
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+const ge = Math.PI * (3 - Math.sqrt(5)), ue = {
+  spiralType: "golden",
+  direction: "counterclockwise",
+  tightness: 1,
+  scaleDecay: 0,
+  startAngle: 0
+};
+class fe {
+  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 = {}) {
+    var T, x, L, _, j, P, U, G, F, I;
+    const o = [], { width: a, height: c } = e, s = { ...ue, ...this.config.spiral }, h = this.config.spacing.padding, l = i.fixedHeight ?? this.config.sizing.base, g = ((T = this.imageConfig.rotation) == null ? void 0 : T.mode) ?? "none", r = ((L = (x = this.imageConfig.rotation) == null ? void 0 : x.range) == null ? void 0 : L.min) ?? -15, d = ((j = (_ = this.imageConfig.rotation) == null ? void 0 : _.range) == null ? void 0 : j.max) ?? 15, m = ((U = (P = this.imageConfig.sizing) == null ? void 0 : P.variance) == null ? void 0 : U.min) ?? 1, b = ((F = (G = this.imageConfig.sizing) == null ? void 0 : G.variance) == null ? void 0 : F.max) ?? 1, p = m !== 1 || b !== 1, u = ((I = this.imageConfig.sizing) == null ? void 0 : I.scaleDecay) ?? s.scaleDecay, f = a / 2, w = c / 2, v = Math.min(
+      f - h - l / 2,
+      w - h - l / 2
+    ), R = s.direction === "clockwise" ? -1 : 1;
+    for (let A = 0; A < t; A++) {
+      let O, S;
+      if (s.spiralType === "golden")
+        O = A * ge * R + s.startAngle, S = this.calculateGoldenRadius(A, t, v, s.tightness);
+      else if (s.spiralType === "archimedean") {
+        const k = A * 0.5 * s.tightness;
+        O = k * R + s.startAngle, S = this.calculateArchimedeanRadius(k, t, v, s.tightness);
+      } else {
+        const k = A * 0.3 * s.tightness;
+        O = k * R + s.startAngle, S = this.calculateLogarithmicRadius(k, t, v, s.tightness);
+      }
+      const z = f + Math.cos(O) * S, M = w + Math.sin(O) * S, D = S / v, Z = u > 0 ? 1 - D * u * 0.5 : 1, et = p ? this.random(m, b) : 1, W = Z * et, N = l * W, Q = N * 1.5 / 2, B = N / 2, q = h + Q, nt = a - h - Q, V = h + B, C = c - h - B, H = Math.max(q, Math.min(z, nt)), $ = Math.max(V, Math.min(M, C));
+      let Y = 0;
+      if (g === "random") {
+        const k = O * 180 / Math.PI % 360, tt = this.random(r, d);
+        Y = s.spiralType === "golden" ? tt : k * 0.1 + tt * 0.9;
+      } else g === "tangent" && (Y = this.calculateSpiralTangent(O, S, s));
+      const K = t - A;
+      o.push({
+        id: A,
+        x: H,
+        y: $,
+        rotation: Y,
+        scale: W,
+        baseSize: N,
+        zIndex: K
+      });
+    }
+    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 c = 1 / i.tightness, s = Math.atan(e / c);
+      o = t + s;
+    } else {
+      const c = 0.15 / i.tightness, s = Math.atan(1 / c);
+      o = t + s;
+    }
+    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 c = i / Math.sqrt(e) * Math.sqrt(t) / o;
+    return Math.min(c, i);
+  }
+  /**
+   * Calculate radius for Archimedean spiral
+   * r = a + b*θ (constant spacing between arms)
+   */
+  calculateArchimedeanRadius(t, e, i, o) {
+    const a = e * 0.5 * o;
+    return t / a * i;
+  }
+  /**
+   * Calculate radius for logarithmic (equiangular) spiral
+   * r = a * e^(b*θ)
+   */
+  calculateLogarithmicRadius(t, e, i, o) {
+    const a = i * 0.05, c = 0.15 / o, s = a * Math.exp(c * t), h = e * 0.3 * o, l = a * Math.exp(c * h);
+    return s / l * i;
+  }
+  /**
+   * Utility: Generate random number between min and max
+   */
+  random(t, e) {
+    return Math.random() * (e - t) + t;
+  }
+}
+const me = {
+  clusterCount: "auto",
+  clusterSpread: 150,
+  clusterSpacing: 200,
+  density: "uniform",
+  overlap: 0.3,
+  distribution: "gaussian"
+};
+class pe {
+  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 = {}) {
+    var R, T, x, L, _, j, P, U, G;
+    const o = [], { width: a, height: c } = e, s = { ...me, ...this.config.cluster }, h = this.config.spacing.padding, l = i.fixedHeight ?? this.config.sizing.base, g = ((R = this.imageConfig.rotation) == null ? void 0 : R.mode) ?? "none", r = ((x = (T = this.imageConfig.rotation) == null ? void 0 : T.range) == null ? void 0 : x.min) ?? -15, d = ((_ = (L = this.imageConfig.rotation) == null ? void 0 : L.range) == null ? void 0 : _.max) ?? 15, m = ((P = (j = this.imageConfig.sizing) == null ? void 0 : j.variance) == null ? void 0 : P.min) ?? 1, b = ((G = (U = this.imageConfig.sizing) == null ? void 0 : U.variance) == null ? void 0 : G.max) ?? 1, p = m !== 1 || b !== 1, u = this.calculateClusterCount(
+      t,
+      s.clusterCount,
+      a,
+      c,
+      s.clusterSpacing
+    ), f = this.generateClusterCenters(
+      u,
+      a,
+      c,
+      h,
+      s
+    ), w = new Array(u).fill(0);
+    for (let F = 0; F < t; F++)
+      w[F % u]++;
+    let v = 0;
+    for (let F = 0; F < u; F++) {
+      const I = f[F], A = w[F];
+      for (let O = 0; O < A; O++) {
+        let S, z;
+        if (s.distribution === "gaussian")
+          S = this.gaussianRandom() * I.spread, z = this.gaussianRandom() * I.spread;
+        else {
+          const $ = this.random(0, Math.PI * 2), Y = this.random(0, I.spread);
+          S = Math.cos($) * Y, z = Math.sin($) * Y;
+        }
+        const M = 1 + s.overlap * 0.5, D = 1 + s.overlap * 0.3;
+        S /= M, z /= M;
+        const Z = p ? this.random(m, b) : 1, et = D * Z, W = l * et;
+        let N = I.x + S, it = I.y + z;
+        const B = W * 1.5 / 2, q = W / 2;
+        N = Math.max(h + B, Math.min(N, a - h - B)), it = Math.max(h + q, Math.min(it, c - h - q));
+        const nt = g === "random" ? this.random(r, d) : 0, C = Math.sqrt(S * S + z * z) / I.spread, H = Math.round((1 - C) * 50) + 1;
+        o.push({
+          id: v,
+          x: N,
+          y: it,
+          rotation: nt,
+          scale: et,
+          baseSize: W,
+          zIndex: H
+        }), v++;
+      }
+    }
+    return o;
+  }
+  /**
+   * Calculate optimal number of clusters based on image count and container
+   */
+  calculateClusterCount(t, e, i, o, a) {
+    if (e !== "auto")
+      return Math.max(1, Math.min(e, t));
+    const s = Math.max(1, Math.ceil(t / 8)), h = Math.floor(
+      i / a * (o / a) * 0.6
+    );
+    return Math.max(1, Math.min(s, h, 10));
+  }
+  /**
+   * Generate cluster center positions with spacing constraints
+   */
+  generateClusterCenters(t, e, i, o, a) {
+    const c = [], h = o + a.clusterSpread, l = e - o - a.clusterSpread, g = o + a.clusterSpread, r = i - o - a.clusterSpread;
+    for (let d = 0; d < t; d++) {
+      let m = null, b = -1;
+      for (let p = 0; p < 100; p++) {
+        const u = {
+          x: this.random(h, l),
+          y: this.random(g, r),
+          spread: this.calculateClusterSpread(a)
+        };
+        let f = 1 / 0;
+        for (const w of c) {
+          const v = u.x - w.x, R = u.y - w.y, T = Math.sqrt(v * v + R * R);
+          f = Math.min(f, T);
+        }
+        if ((c.length === 0 || f > b) && (m = u, b = f), f >= a.clusterSpacing)
+          break;
+      }
+      m && c.push(m);
+    }
+    return c;
+  }
+  /**
+   * 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 be {
+  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 = {}) {
+    var M, D, Z, et, W, N, it, Q, B;
+    const o = [], { width: a, height: c } = e, s = this.config.sizing.base, h = this.config.spacing.padding ?? 50, l = ((M = this.imageConfig.rotation) == null ? void 0 : M.mode) ?? "none", g = ((Z = (D = this.imageConfig.rotation) == null ? void 0 : D.range) == null ? void 0 : Z.min) ?? -15, r = ((W = (et = this.imageConfig.rotation) == null ? void 0 : et.range) == null ? void 0 : W.max) ?? 15, d = ((it = (N = this.imageConfig.sizing) == null ? void 0 : N.variance) == null ? void 0 : it.min) ?? 1, m = ((B = (Q = this.imageConfig.sizing) == null ? void 0 : Q.variance) == null ? void 0 : B.max) ?? 1, b = d !== 1 || m !== 1, p = i.fixedHeight ?? s, u = {
+      ...kt,
+      ...this.config.wave
+    }, { rows: f, amplitude: w, frequency: v, phaseShift: R, synchronization: T } = u, x = Math.ceil(t / f), j = p * 1.5 / 2, P = h + j, U = a - h - j, G = U - P, F = x > 1 ? G / (x - 1) : 0, I = h + w + p / 2, A = c - h - w - p / 2, O = A - I, S = f > 1 ? O / (f - 1) : 0;
+    let z = 0;
+    for (let q = 0; q < f && z < t; q++) {
+      const nt = f === 1 ? (I + A) / 2 : I + q * S;
+      let V = 0;
+      T === "offset" ? V = q * R : T === "alternating" && (V = q * Math.PI);
+      for (let C = 0; C < x && z < t; C++) {
+        const H = x === 1 ? (P + U) / 2 : P + C * F, $ = this.calculateWaveY(H, a, w, v, V), Y = H, K = nt + $, k = b ? this.random(d, m) : 1, tt = p * k;
+        let ot = 0;
+        l === "tangent" ? ot = this.calculateRotation(H, a, w, v, V) : l === "random" && (ot = this.random(g, r));
+        const at = tt * 1.5 / 2, pt = tt / 2, dt = h + at, gt = a - h - at, bt = h + pt, yt = c - h - pt;
+        o.push({
+          id: z,
+          x: Math.max(dt, Math.min(Y, gt)),
+          y: Math.max(bt, Math.min(K, yt)),
+          rotation: ot,
+          scale: k,
+          baseSize: tt,
+          zIndex: z + 1
+        }), z++;
+      }
+    }
+    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, a) {
+    const c = t / e;
+    return i * Math.sin(o * c * 2 * Math.PI + a);
+  }
+  /**
+   * 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, a) {
+    const c = t / e, s = i * o * 2 * Math.PI * Math.cos(o * c * 2 * Math.PI + a) / e;
+    return Math.atan(s) * (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 ye {
+  constructor(t) {
+    this.config = t.layout, this.imageConfig = t.image, this.breakpoints = t.breakpoints ?? { mobile: 768 }, this.layouts = /* @__PURE__ */ new Map(), this.generator = this.initGenerator();
+  }
+  /**
+   * Initialize the appropriate generator based on config type
+   * @returns Initialized placement generator
+   */
+  initGenerator() {
+    switch (this.config.algorithm) {
+      case "radial":
+        return new le(this.config, this.imageConfig);
+      case "grid":
+        return new de(this.config, this.imageConfig);
+      case "spiral":
+        return new fe(this.config, this.imageConfig);
+      case "cluster":
+        return new pe(this.config, this.imageConfig);
+      case "wave":
+        return new be(this.config, this.imageConfig);
+      case "random":
+      default:
+        return new ce(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.generator.generate(t, e, i);
+    return o.forEach((a) => {
+      this.layouts.set(a.id, a);
+    }), 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.generator = this.initGenerator())), t.image && Object.assign(this.imageConfig, t.image), t.breakpoints && (this.breakpoints = t.breakpoints);
+  }
+  /**
+   * 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
+   */
+  resolveBaseHeight(t) {
+    var o;
+    const e = (o = this.imageConfig.sizing) == null ? void 0 : o.baseHeight;
+    if (e === void 0)
+      return;
+    if (typeof e == "number")
+      return e;
+    const i = e;
+    return t <= this.breakpoints.mobile ? i.mobile ?? i.tablet ?? i.default : this.breakpoints.tablet && t <= this.breakpoints.tablet ? i.tablet ?? i.default : i.default;
+  }
+  /**
+   * 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 responsiveHeight - Current responsive breakpoint height (upper bound)
+   * @param viewportWidth - Current viewport width for baseHeight resolution
+   * @returns Calculated sizing result with height
+   */
+  calculateAdaptiveSize(t, e, i, o) {
+    const a = this.config.sizing.adaptive, c = this.resolveBaseHeight(o);
+    if (c !== void 0) {
+      let v = Math.min(c, i);
+      return a && (v = this.clamp(v, a.minSize, a.maxSize)), { height: v };
+    }
+    if (!a || !a.enabled)
+      return { height: i };
+    const { width: s, height: h } = t, { minSize: l, maxSize: g } = a, r = this.config.targetCoverage ?? 0.6, d = this.config.densityFactor ?? 1, p = s * h * r / e;
+    let f = Math.sqrt(p / 1.4);
+    f *= d, f = Math.min(f, i);
+    let w = this.clamp(f, l, g);
+    if (w === l && f < l) {
+      const v = Math.max(l * 0.05, 20);
+      w = Math.max(v, f);
+    }
+    return { height: w };
+  }
+  /**
+   * Utility: Clamp a value between min and max
+   */
+  clamp(t, e, i) {
+    return Math.max(e, Math.min(i, t));
+  }
+}
+var E = /* @__PURE__ */ ((n) => (n.IDLE = "idle", n.FOCUSING = "focusing", n.FOCUSED = "focused", n.UNFOCUSING = "unfocusing", n.CROSS_ANIMATING = "cross_animating", n))(E || {});
+function ve(n) {
+  return n in St;
+}
+function we(n) {
+  return n ? ve(n) ? St[n] : n : St.md;
+}
+function xe(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 ct(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 ft(n) {
+  var a, c;
+  if (!n) return {};
+  const t = {};
+  if (n.borderRadiusTopLeft !== void 0 || n.borderRadiusTopRight !== void 0 || n.borderRadiusBottomRight !== void 0 || n.borderRadiusBottomLeft !== void 0) {
+    const s = ((a = n.border) == null ? void 0 : a.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 ((c = n.border) == null ? void 0 : c.radius) !== void 0 && (t.borderRadius = `${n.border.radius}px`);
+  if (n.borderTop || n.borderRight || n.borderBottom || n.borderLeft) {
+    const s = n.border || {}, h = { ...s, ...n.borderTop }, l = { ...s, ...n.borderRight }, g = { ...s, ...n.borderBottom }, r = { ...s, ...n.borderLeft };
+    t.borderTop = ct(h), t.borderRight = ct(l), t.borderBottom = ct(g), t.borderLeft = ct(r);
+  } else n.border && (t.border = ct(n.border));
+  n.shadow !== void 0 && (t.boxShadow = we(n.shadow));
+  const o = xe(n.filter);
+  if (o && (t.filter = o), 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, h = n.outline.style ?? "solid", l = n.outline.color ?? "#000000";
+    t.outline = `${s}px ${h} ${l}`, 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 lt(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 Ot(n) {
+  return n ? Array.isArray(n) ? n.join(" ") : n : "";
+}
+function ht(n, t) {
+  const e = Ot(t);
+  e && e.split(" ").forEach((i) => {
+    i.trim() && n.classList.add(i.trim());
+  });
+}
+function Dt(n, t) {
+  const e = Ot(t);
+  e && e.split(" ").forEach((i) => {
+    i.trim() && n.classList.remove(i.trim());
+  });
+}
+const Ct = {
+  UNFOCUSING: 999,
+  FOCUSING: 1e3
+};
+class Se {
+  constructor(t, e, i) {
+    var o, a;
+    this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null, this.focusGeneration = 0, this.config = t, this.animationEngine = e, this.defaultStyles = ft(i == null ? void 0 : i.default), this.focusedStyles = ft(i == null ? void 0 : i.focused), this.defaultClassName = (o = i == null ? void 0 : i.default) == null ? void 0 : o.className, this.focusedClassName = (a = i == null ? void 0 : i.focused) == null ? void 0 : a.className;
+  }
+  /**
+   * Get current state machine state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Check if any animation is in progress
+   */
+  isAnimating() {
+    return this.state !== E.IDLE && this.state !== E.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), a = i.height * o, c = t / e;
+    let s = a, h = s * c;
+    const l = i.width * o;
+    return h > l && (h = l, s = h / c), { width: h, height: s };
+  }
+  /**
+   * 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, a = i - e.x, c = o - e.y;
+    return {
+      x: a,
+      y: c,
+      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, a, c, s, h) {
+    const l = this.buildDimensionZoomTransform(e), g = this.buildDimensionZoomTransform(i);
+    return t.style.transition = "none", t.animate(
+      [
+        {
+          transform: l,
+          width: `${o}px`,
+          height: `${a}px`
+        },
+        {
+          transform: g,
+          width: `${c}px`,
+          height: `${s}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"), lt(t, this.focusedStyles), ht(t, this.focusedClassName);
+  }
+  /**
+   * Remove focused styling from an element
+   */
+  removeFocusedStyling(t, e) {
+    t.style.zIndex = e, t.classList.remove("fbn-ic-focused"), Dt(t, this.focusedClassName), lt(t, this.defaultStyles), ht(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, a) {
+    const c = t.style.zIndex || "", s = t.offsetWidth, h = t.offsetHeight, l = this.calculateFocusDimensions(s, h, e), g = this.calculateFocusTransform(e, i);
+    this.applyFocusedStyling(t, Ct.FOCUSING), this.animationEngine.cancelAllAnimations(t);
+    const r = o ?? {
+      x: 0,
+      y: 0,
+      rotation: i.rotation,
+      scale: 1
+      // No scale - using dimensions
+    }, d = (a == null ? void 0 : a.width) ?? s, m = (a == null ? void 0 : a.height) ?? h, b = this.config.animationDuration ?? 600, p = this.animateWithDimensions(
+      t,
+      r,
+      g,
+      d,
+      m,
+      l.width,
+      l.height,
+      b
+    ), u = {
+      id: `focus-${Date.now()}`,
+      element: t,
+      animation: p,
+      fromState: r,
+      toState: g,
+      startTime: performance.now(),
+      duration: b
+    };
+    return this.focusData = {
+      element: t,
+      originalState: i,
+      focusTransform: g,
+      originalZIndex: c,
+      originalWidth: s,
+      originalHeight: h,
+      focusWidth: l.width,
+      focusHeight: l.height
+    }, {
+      element: t,
+      originalState: i,
+      animationHandle: u,
+      direction: "in",
+      originalWidth: s,
+      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) {
+    var b, p, u, f, w;
+    t.style.zIndex = String(Ct.UNFOCUSING), this.animationEngine.cancelAllAnimations(t);
+    const a = i ?? ((b = this.focusData) == null ? void 0 : b.focusTransform) ?? { x: 0, y: 0, rotation: 0, scale: 1 }, c = (o == null ? void 0 : o.width) ?? ((p = this.focusData) == null ? void 0 : p.focusWidth) ?? t.offsetWidth, s = (o == null ? void 0 : o.height) ?? ((u = this.focusData) == null ? void 0 : u.focusHeight) ?? t.offsetHeight, h = {
+      x: 0,
+      y: 0,
+      rotation: e.rotation,
+      scale: 1
+      // No scale - using dimensions
+    }, l = ((f = this.focusData) == null ? void 0 : f.originalWidth) ?? t.offsetWidth, g = ((w = this.focusData) == null ? void 0 : w.originalHeight) ?? t.offsetHeight, r = this.config.animationDuration ?? 600, d = this.animateWithDimensions(
+      t,
+      a,
+      h,
+      c,
+      s,
+      l,
+      g,
+      r
+    ), m = {
+      id: `unfocus-${Date.now()}`,
+      element: t,
+      animation: d,
+      fromState: a,
+      toState: h,
+      startTime: performance.now(),
+      duration: r
+    };
+    return {
+      element: t,
+      originalState: e,
+      animationHandle: m,
+      direction: "out",
+      originalWidth: l,
+      originalHeight: g
+    };
+  }
+  /**
+   * 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, a) {
+    this.animationEngine.cancelAllAnimations(t);
+    const c = ["translate(-50%, -50%)"];
+    c.push("translate(0px, 0px)"), c.push(`rotate(${e.rotation}deg)`), t.style.transition = "none", t.style.transform = c.join(" "), o !== void 0 && a !== void 0 && (t.style.width = `${o}px`, t.style.height = `${a}px`), this.removeFocusedStyling(t, i);
+  }
+  /**
+   * Focus (zoom) an image to center of container
+   * Implements cross-animation when swapping focus
+   */
+  async focusImage(t, e, i) {
+    var a, c, s, h, l, g, r, d, m, b, p, u;
+    if (this.currentFocus === t && this.state === E.FOCUSED)
+      return this.unfocusImage();
+    if (((a = this.incoming) == null ? void 0 : a.element) === t && this.state === E.FOCUSING) {
+      const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), w = {
+        x: f.x,
+        y: f.y,
+        rotation: f.rotation,
+        scale: 1
+        // No scale transform - using dimensions
+      }, v = {
+        width: t.offsetWidth,
+        height: t.offsetHeight
+      };
+      this.outgoing = this.startUnfocusAnimation(
+        t,
+        this.incoming.originalState,
+        w,
+        v
+      ), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.removeFocusedStyling(this.outgoing.element, ((c = this.focusData) == null ? void 0 : c.originalZIndex) || ""), this.outgoing = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
+      return;
+    }
+    const o = ++this.focusGeneration;
+    switch (this.state) {
+      case E.IDLE:
+        if (this.state = E.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 = E.FOCUSED;
+        break;
+      case E.FOCUSED:
+        if (this.state = E.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, ((s = this.outgoing.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
+        break;
+      case E.FOCUSING:
+        if (this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
+          this.incoming.element,
+          this.incoming.originalState,
+          ((h = this.focusData) == null ? void 0 : h.originalZIndex) || "",
+          (l = this.focusData) == null ? void 0 : l.originalWidth,
+          (g = this.focusData) == null ? void 0 : g.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 = E.FOCUSED;
+        break;
+      case E.UNFOCUSING:
+        if (this.state = E.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, ((r = this.outgoing.originalState.zIndex) == null ? void 0 : r.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
+        break;
+      case E.CROSS_ANIMATING:
+        if (((d = this.incoming) == null ? void 0 : d.element) === t)
+          return;
+        if (((m = this.outgoing) == null ? void 0 : m.element) === t) {
+          const f = this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !0), w = {
+            x: f.x,
+            y: f.y,
+            rotation: f.rotation,
+            scale: 1
+            // No scale - using dimensions
+          }, v = {
+            width: t.offsetWidth,
+            height: t.offsetHeight
+          };
+          if (this.incoming) {
+            const R = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), T = {
+              x: R.x,
+              y: R.y,
+              rotation: R.rotation,
+              scale: 1
+              // No scale - using dimensions
+            }, x = {
+              width: this.incoming.element.offsetWidth,
+              height: this.incoming.element.offsetHeight
+            };
+            this.outgoing = this.startUnfocusAnimation(
+              this.incoming.element,
+              this.incoming.originalState,
+              T,
+              x
+            );
+          } else
+            this.outgoing = null;
+          if (this.incoming = this.startFocusAnimation(t, e, i, w, v), 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, ((b = this.outgoing.originalState.zIndex) == null ? void 0 : b.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
+          return;
+        }
+        if (this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
+          this.outgoing.element,
+          this.outgoing.originalState,
+          ((p = this.outgoing.originalState.zIndex) == null ? void 0 : p.toString()) || "",
+          this.outgoing.originalWidth,
+          this.outgoing.originalHeight
+        ), this.outgoing = null), this.incoming) {
+          const f = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), w = {
+            x: f.x,
+            y: f.y,
+            rotation: f.rotation,
+            scale: 1
+            // No scale - using dimensions
+          }, v = {
+            width: this.incoming.element.offsetWidth,
+            height: this.incoming.element.offsetHeight
+          };
+          this.outgoing = this.startUnfocusAnimation(
+            this.incoming.element,
+            this.incoming.originalState,
+            w,
+            v
+          );
+        }
+        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, ((u = this.outgoing.originalState.zIndex) == null ? void 0 : u.toString()) || ""), this.outgoing = null), this.currentFocus = t, this.incoming = null, this.state = E.FOCUSED;
+        break;
+    }
+  }
+  /**
+   * Unfocus current image, returning it to original position
+   */
+  async unfocusImage() {
+    var a, c, s;
+    const t = ++this.focusGeneration;
+    if (!this.currentFocus || !this.focusData) {
+      if (this.incoming && this.state === E.FOCUSING) {
+        const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
+          x: h.x,
+          y: h.y,
+          rotation: h.rotation,
+          scale: 1
+          // No scale - using dimensions
+        }, g = {
+          width: this.incoming.element.offsetWidth,
+          height: this.incoming.element.offsetHeight
+        };
+        if (this.outgoing = this.startUnfocusAnimation(
+          this.incoming.element,
+          this.incoming.originalState,
+          l,
+          g
+        ), this.incoming = null, this.state = E.UNFOCUSING, await this.waitForAnimation(this.outgoing.animationHandle), this.focusGeneration !== t) return;
+        this.removeFocusedStyling(this.outgoing.element, ((a = this.focusData) == null ? void 0 : a.originalZIndex) || ""), this.outgoing = null, this.focusData = null, this.state = E.IDLE;
+      }
+      return;
+    }
+    if (this.state === E.CROSS_ANIMATING && this.incoming) {
+      const h = this.animationEngine.cancelAnimation(this.incoming.animationHandle, !0), l = {
+        x: h.x,
+        y: h.y,
+        rotation: h.rotation,
+        scale: 1
+        // No scale - using dimensions
+      }, g = {
+        width: this.incoming.element.offsetWidth,
+        height: this.incoming.element.offsetHeight
+      }, r = this.startUnfocusAnimation(
+        this.incoming.element,
+        this.incoming.originalState,
+        l,
+        g
+      );
+      if (await Promise.all([
+        this.outgoing ? this.waitForAnimation(this.outgoing.animationHandle) : Promise.resolve(),
+        this.waitForAnimation(r.animationHandle)
+      ]), this.focusGeneration !== t) return;
+      this.outgoing && this.removeFocusedStyling(this.outgoing.element, ((c = this.outgoing.originalState.zIndex) == null ? void 0 : c.toString()) || ""), this.removeFocusedStyling(r.element, ((s = this.incoming.originalState.zIndex) == null ? void 0 : s.toString()) || ""), this.outgoing = null, this.incoming = null, this.currentFocus = null, this.focusData = null, this.state = E.IDLE;
+      return;
+    }
+    this.state = E.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 = E.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 === E.FOCUSED;
+  }
+  /**
+   * Check if an image is the target of current focus animation
+   */
+  isTargetingFocus(t) {
+    var e;
+    return ((e = this.incoming) == null ? void 0 : e.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) {
+    var e, i;
+    return this.currentFocus === t || ((e = this.incoming) == null ? void 0 : e.element) === t || ((i = this.outgoing) == null ? void 0 : i.element) === t;
+  }
+  /**
+   * Reset zoom state (cancels all animations)
+   */
+  reset() {
+    var t, e, i, o;
+    this.outgoing && (this.animationEngine.cancelAnimation(this.outgoing.animationHandle, !1), this.resetElementInstantly(
+      this.outgoing.element,
+      this.outgoing.originalState,
+      ((t = this.outgoing.originalState.zIndex) == null ? void 0 : t.toString()) || "",
+      this.outgoing.originalWidth,
+      this.outgoing.originalHeight
+    )), this.incoming && (this.animationEngine.cancelAnimation(this.incoming.animationHandle, !1), this.resetElementInstantly(
+      this.incoming.element,
+      this.incoming.originalState,
+      ((e = this.focusData) == null ? void 0 : e.originalZIndex) || "",
+      (i = this.focusData) == null ? void 0 : i.originalWidth,
+      (o = this.focusData) == null ? void 0 : o.originalHeight
+    )), this.currentFocus && this.focusData && this.resetElementInstantly(
+      this.currentFocus,
+      this.focusData.originalState,
+      this.focusData.originalZIndex,
+      this.focusData.originalWidth,
+      this.focusData.originalHeight
+    ), this.state = E.IDLE, this.currentFocus = null, this.focusData = null, this.outgoing = null, this.incoming = null;
+  }
+}
+class Ie {
+  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 (e.type === "folder")
+        for (const i of e.folders) {
+          const o = e.recursive !== void 0 ? e.recursive : !0, a = await this.loadFromFolder(i, t, o);
+          this._discoveredUrls.push(...a);
+        }
+      else if (e.type === "files") {
+        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 (a) {
+      return console.error("Error loading from Google Drive API:", a), 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`, c = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(c);
+    if (!s.ok)
+      throw new Error(`API request failed: ${s.status} ${s.statusText}`);
+    const l = (await s.json()).files.filter(
+      (g) => g.mimeType.startsWith("image/") && e.isAllowed(g.name)
+    );
+    return this.log(`Found ${l.length} images in folder ${t} (non-recursive)`), l.forEach((g) => {
+      i.push(`https://lh3.googleusercontent.com/d/${g.id}=s1600`), this.log(`Added file: ${g.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 a = this.extractFileId(o);
+      if (!a) {
+        this.log(`Skipping invalid file URL: ${o}`);
+        continue;
+      }
+      if (this.apiKey && this.apiKey !== "YOUR_API_KEY_HERE")
+        try {
+          const c = `${this.apiEndpoint}/${a}?fields=name,mimeType&key=${this.apiKey}`, s = await fetch(c);
+          if (s.ok) {
+            const h = await s.json();
+            h.mimeType.startsWith("image/") && e.isAllowed(h.name) ? (i.push(`https://lh3.googleusercontent.com/d/${a}=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 ${a}: ${s.status}`);
+        } catch (c) {
+          this.log(`Error fetching metadata for file ${a}:`, c);
+        }
+      else
+        i.push(`https://lh3.googleusercontent.com/d/${a}=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`, c = `${this.apiEndpoint}?q=${encodeURIComponent(o)}&fields=files(id,name,mimeType,thumbnailLink)&key=${this.apiKey}`, s = await fetch(c);
+    if (!s.ok)
+      throw new Error(`API request failed: ${s.status} ${s.statusText}`);
+    const h = await s.json(), l = h.files.filter(
+      (r) => r.mimeType.startsWith("image/") && e.isAllowed(r.name)
+    ), g = h.files.filter(
+      (r) => r.mimeType === "application/vnd.google-apps.folder"
+    );
+    this.log(`Found ${h.files.length} total items in folder ${t}`), h.files.forEach((r) => this.log(` - File: ${r.name} (${r.mimeType})`)), this.log(`- ${l.length} valid files (images only)`), this.log(`- ${g.length} subfolders`), l.forEach((r) => {
+      i.push(`https://lh3.googleusercontent.com/d/${r.id}=s1600`), this.log(`Added file: ${r.name}`);
+    });
+    for (const r of g) {
+      this.log(`Loading images from subfolder: ${r.name}`);
+      const d = await this.loadImagesRecursively(r.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 a = await o.text(), c = /\/file\/d\/([a-zA-Z0-9_-]+)/g, s = [...a.matchAll(c)];
+      return [...new Set(s.map((g) => g[1]))].map(
+        (g) => `https://drive.google.com/uc?export=view&id=${g}`
+      );
+    } 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 Ee {
+  constructor(t = {}) {
+    if (this._prepared = !1, this._discoveredUrls = [], this.validateUrls = t.validateUrls !== !1, this.validationTimeout = t.validationTimeout ?? 5e3, this.validationMethod = t.validationMethod ?? "head", this.sources = t.sources ?? [], this.debugLogging = t.debugLogging ?? !1, !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
+   * @param source - Source configuration with type, urls, basePath, files
+   * @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 || !t.type ? (console.warn("Invalid source object (missing type):", t), []) : t.type === "urls" ? await this.processUrls(t.urls || [], e) : t.type === "path" ? await this.processPath(t.basePath, t.files || [], e) : (console.warn(`Unknown source type: ${t.type}`), []);
+  }
+  /**
+   * 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 a = o.split("/").pop() || o;
+      if (!e.isAllowed(a)) {
+        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 (!t)
+      return console.warn("basePath is required for path-type sources"), [];
+    if (!Array.isArray(e))
+      return console.warn("files must be an array:", e), [];
+    const o = [];
+    for (const a of e) {
+      if (!i.isAllowed(a)) {
+        this.log(`Skipping filtered file: ${a}`);
+        continue;
+      }
+      const c = this.constructUrl(t, a);
+      this.validateUrls ? await this.validateUrl(c) ? o.push(c) : console.warn(`Skipping invalid/missing file: ${c}`) : o.push(c);
+    }
+    return o;
+  }
+  /**
+   * 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), a = await fetch(t, {
+        method: "HEAD",
+        signal: i.signal
+      });
+      return clearTimeout(o), a.ok ? !0 : (this.log(`Validation failed for ${t}: HTTP ${a.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, c = (t.startsWith("/") ? t : "/" + t).replace(/\/$/, "");
+    return `${o}${c}/${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((a) => {
+      console.warn(`Loader ${o} failed to prepare:`, a);
+    }));
+    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 Ae {
+  /**
+   * 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) {
+    var o;
+    const i = (o = t.split("?")[0].split(".").pop()) == null ? void 0 : o.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
+}
+class ze {
+  constructor(t = {}) {
+    var i, o, a, c, s, h;
+    this.fullConfig = Yt(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.animationEngine = new Jt(this.fullConfig.animation), this.layoutEngine = new ye({
+      layout: this.fullConfig.layout,
+      image: this.fullConfig.image,
+      breakpoints: this.fullConfig.rendering.responsive.breakpoints
+    }), this.zoomEngine = new Se(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = ft((i = this.fullConfig.styling) == null ? void 0 : i.default), this.hoverStyles = ft((o = this.fullConfig.styling) == null ? void 0 : o.hover), this.defaultClassName = (c = (a = this.fullConfig.styling) == null ? void 0 : a.default) == null ? void 0 : c.className, this.hoverClassName = (h = (s = this.fullConfig.styling) == null ? void 0 : s.hover) == null ? void 0 : h.className;
+    const e = this.fullConfig.animation.entry || y.animation.entry;
+    this.entryAnimationEngine = new re(
+      e,
+      this.fullConfig.layout.algorithm
+    ), this.imageFilter = this.createImageFilter(), this.imageLoader = this.createLoader(), this.containerEl = null, this.loadingEl = null, this.errorEl = null;
+  }
+  /**
+   * Create image filter based on config
+   */
+  createImageFilter() {
+    var i, o;
+    const t = this.fullConfig.loader.type;
+    let e;
+    return t === "googleDrive" ? e = (i = this.fullConfig.loader.googleDrive) == null ? void 0 : i.allowedExtensions : e = (o = this.fullConfig.loader.static) == null ? void 0 : o.allowedExtensions, new Ae(e);
+  }
+  /**
+   * Create appropriate image loader based on config
+   */
+  createLoader() {
+    return this.createLoaderFromConfig(this.fullConfig.loader);
+  }
+  /**
+   * Create a loader from a LoaderConfig object (supports recursive composite loaders)
+   */
+  createLoaderFromConfig(t) {
+    const e = t.type;
+    if (e === "static") {
+      const i = t.static;
+      return new Ee(i);
+    } else if (e === "composite") {
+      const i = t.composite, o = i.loaders.map(
+        (a) => this.createLoaderFromConfig(a)
+      );
+      return new Re({
+        loaders: o,
+        debugLogging: i.debugLogging
+      });
+    } else {
+      const i = t.googleDrive;
+      return new Ie(i);
+    }
+  }
+  /**
+   * Initialize the gallery
+   */
+  async init() {
+    try {
+      if (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.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() {
+    this.loadingEl = document.getElementById("loading"), this.errorEl = document.getElementById("error");
+  }
+  setupEventListeners() {
+    document.addEventListener("keydown", (t) => {
+      t.key === "Escape" ? (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null) : 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) => {
+      t.target.closest(".fbn-ic-image") || (this.zoomEngine.unfocusImage(), this.currentFocusIndex = null);
+    }), 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.imageElements.length;
+    this.navigateToImage(t);
+  }
+  /**
+   * Navigate to the previous image (Left arrow)
+   */
+  navigateToPreviousImage() {
+    if (this.currentFocusIndex === null || this.imageElements.length === 0) return;
+    const t = (this.currentFocusIndex - 1 + this.imageElements.length) % this.imageElements.length;
+    this.navigateToImage(t);
+  }
+  /**
+   * Navigate to a specific image by index
+   */
+  async navigateToImage(t) {
+    if (t < 0 || t >= this.imageElements.length) return;
+    const e = this.imageElements[t], i = this.imageLayouts[t];
+    !e || !i || await this.handleImageClick(e, i);
+  }
+  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.sizing.responsive || [];
+    for (const i of e)
+      if (t >= i.minWidth)
+        return i.height;
+    return 120;
+  }
+  /**
+   * 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(), a = window.innerWidth;
+      this.logDebug(`Adaptive sizing input: container=${i.width}x${i.height}px, images=${t}, responsiveMax=${o}px`);
+      const c = this.layoutEngine.calculateAdaptiveSize(
+        i,
+        t,
+        o,
+        a
+      );
+      this.logDebug(`Adaptive sizing result: height=${c.height}px`), await this.createImageCloud(e, c.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.debug && 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, a = this.layoutEngine.generateLayout(t.length, i, { fixedHeight: e });
+    this.imageLayouts = a, this.displayQueue = [];
+    let c = 0;
+    const s = (l) => {
+      this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(() => {
+        if (l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1", l.dataset.startX && (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || l.dataset.startRotation !== l.dataset.rotation || l.dataset.startScale !== l.dataset.scale)) {
+          const d = {
+            x: parseFloat(l.dataset.startX),
+            y: parseFloat(l.dataset.startY)
+          }, m = {
+            x: parseFloat(l.dataset.endX),
+            y: parseFloat(l.dataset.endY)
+          }, b = parseFloat(l.dataset.imageWidth), p = parseFloat(l.dataset.imageHeight), u = parseFloat(l.dataset.rotation), f = parseFloat(l.dataset.scale), w = l.dataset.startRotation ? parseFloat(l.dataset.startRotation) : u, v = l.dataset.startScale ? parseFloat(l.dataset.startScale) : f, R = this.entryAnimationEngine.getTiming();
+          oe({
+            element: l,
+            startPosition: d,
+            endPosition: m,
+            pathConfig: this.entryAnimationEngine.getPathConfig(),
+            duration: R.duration,
+            imageWidth: b,
+            imageHeight: p,
+            rotation: u,
+            scale: f,
+            rotationConfig: this.entryAnimationEngine.getRotationConfig(),
+            startRotation: w,
+            scaleConfig: this.entryAnimationEngine.getScaleConfig(),
+            startScale: v
+          });
+        } else {
+          const d = l.dataset.finalTransform || "";
+          l.style.transform = d;
+        }
+        const r = parseInt(l.dataset.imageId || "0");
+        if (this.fullConfig.debug && r < 3) {
+          const d = l.dataset.finalTransform || "";
+          console.log(`Image ${r} final state:`, {
+            left: l.style.left,
+            top: l.style.top,
+            width: l.style.width,
+            height: l.style.height,
+            computedWidth: l.offsetWidth,
+            computedHeight: l.offsetHeight,
+            transform: d,
+            pathType: this.entryAnimationEngine.getPathType()
+          });
+        }
+      }), c++);
+    }, h = () => {
+      if (this.logDebug("Starting queue processing, enabled:", this.fullConfig.animation.queue.enabled), !this.fullConfig.animation.queue.enabled) {
+        for (; this.displayQueue.length > 0; ) {
+          const l = this.displayQueue.shift();
+          l && s(l);
+        }
+        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 l = this.displayQueue.shift();
+          l && s(l);
+        }
+        c >= 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 l = new IntersectionObserver((g) => {
+        g.forEach((r) => {
+          r.isIntersecting && (h(), l.disconnect());
+        });
+      }, { threshold: 0.1, rootMargin: "50px" });
+      l.observe(this.containerEl);
+    } else
+      h();
+    this.fullConfig.layout.debugCenters && this.containerEl && (this.containerEl.querySelectorAll(".fbn-ic-debug-center").forEach((l) => l.remove()), a.forEach((l, g) => {
+      const r = document.createElement("div");
+      r.className = "fbn-ic-debug-center", r.style.position = "absolute", r.style.width = "12px", r.style.height = "12px", r.style.borderRadius = "50%", r.style.backgroundColor = "red", r.style.border = "2px solid yellow", r.style.zIndex = "9999", r.style.pointerEvents = "none";
+      const d = l.x, m = l.y;
+      r.style.left = `${d - 6}px`, r.style.top = `${m - 6}px`, r.title = `Image ${g}: center (${Math.round(d)}, ${Math.round(m)})`, this.containerEl.appendChild(r);
+    })), t.forEach((l, g) => {
+      var m, b;
+      const r = document.createElement("img");
+      r.referrerPolicy = "no-referrer", r.classList.add("fbn-ic-image"), r.dataset.imageId = String(g);
+      const d = a[g];
+      r.style.position = "absolute", r.style.width = "auto", r.style.height = `${e}px`, r.style.left = `${d.x}px`, r.style.top = `${d.y}px`, d.borderColor && !((b = (m = this.fullConfig.styling) == null ? void 0 : m.default) != null && b.border) && (r.style.border = `5px solid ${d.borderColor}`, r.style.boxSizing = "border-box"), d.zIndex && (r.style.zIndex = String(d.zIndex)), lt(r, this.defaultStyles), ht(r, this.defaultClassName), r.addEventListener("mouseenter", () => {
+        this.hoveredImage = { element: r, layout: d }, this.zoomEngine.isInvolved(r) || (lt(r, this.hoverStyles), ht(r, this.hoverClassName));
+      }), r.addEventListener("mouseleave", () => {
+        this.hoveredImage = null, this.zoomEngine.isInvolved(r) || (lt(r, this.defaultStyles), Dt(r, this.hoverClassName), ht(r, this.defaultClassName));
+      }), r.addEventListener("click", (p) => {
+        p.stopPropagation(), this.handleImageClick(r, d);
+      }), r.style.opacity = "0", r.style.transition = this.entryAnimationEngine.getTransitionCSS(), r.onload = () => {
+        if (o !== this.loadGeneration)
+          return;
+        const p = r.naturalWidth / r.naturalHeight, u = e * p;
+        r.style.width = `${u}px`;
+        const f = { x: d.x, y: d.y }, w = { width: u, height: e }, v = this.entryAnimationEngine.calculateStartPosition(
+          f,
+          w,
+          i,
+          g,
+          t.length
+        ), R = this.entryAnimationEngine.calculateStartRotation(d.rotation), T = this.entryAnimationEngine.calculateStartScale(d.scale), x = this.entryAnimationEngine.buildFinalTransform(
+          d.rotation,
+          d.scale,
+          u,
+          e
+        ), L = this.entryAnimationEngine.buildStartTransform(
+          v,
+          f,
+          d.rotation,
+          d.scale,
+          u,
+          e,
+          R,
+          T
+        );
+        this.fullConfig.debug && g < 3 && console.log(`Image ${g}:`, {
+          finalPosition: f,
+          imageSize: w,
+          left: d.x,
+          top: d.y,
+          finalTransform: x,
+          renderedWidth: u,
+          renderedHeight: e
+        }), r.style.transform = L, r.dataset.finalTransform = x, (this.entryAnimationEngine.requiresJSAnimation() || this.entryAnimationEngine.requiresJSRotation() || this.entryAnimationEngine.requiresJSScale() || R !== d.rotation || T !== d.scale) && (r.dataset.startX = String(v.x), r.dataset.startY = String(v.y), r.dataset.endX = String(f.x), r.dataset.endY = String(f.y), r.dataset.imageWidth = String(u), r.dataset.imageHeight = String(e), r.dataset.rotation = String(d.rotation), r.dataset.scale = String(d.scale), r.dataset.startRotation = String(R), r.dataset.startScale = String(T)), this.displayQueue.push(r);
+      }, r.onerror = () => c++, r.src = l;
+    });
+  }
+  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;
+    else {
+      const a = t.dataset.imageId;
+      this.currentFocusIndex = a !== void 0 ? parseInt(a, 10) : null, await this.zoomEngine.focusImage(t, o, e);
+    }
+  }
+  /**
+   * 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.innerHTML = ""), 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");
+  }
+  /**
+   * Destroy the gallery and clean up resources
+   */
+  destroy() {
+    this.clearImageCloud(), this.resizeTimeout !== null && clearTimeout(this.resizeTimeout);
+  }
+}
+function Me() {
+  if (typeof document > "u") return;
+  const n = "fbn-ic-styles";
+  if (document.getElementById(n)) return;
+  const t = document.createElement("style");
+  t.id = n, t.textContent = Ht, document.head.appendChild(t);
+}
+Me();
+function Te() {
+  if (typeof document > "u") {
+    console.warn("ImageCloud: Document not available (not in browser environment)");
+    return;
+  }
+  const n = () => {
+    const t = document.querySelectorAll("[data-image-cloud], [data-image-gallery]");
+    t.length !== 0 && t.forEach((e) => {
+      const i = e;
+      if (!i.id) {
+        console.error("ImageCloud: Container with data-image-cloud must have an id attribute");
+        return;
+      }
+      const o = i.dataset.config || i.dataset.galleryConfig;
+      let a;
+      if (o)
+        try {
+          const s = JSON.parse(o);
+          a = {
+            container: i.id,
+            ...s
+          };
+        } catch (s) {
+          console.error(`ImageCloud: Failed to parse configuration JSON for #${i.id}:`, s);
+          return;
+        }
+      else {
+        console.error(`ImageCloud: Missing configuration for #${i.id}. Add data-config='{...}' attribute.`);
+        return;
+      }
+      new ze(a).init().catch((s) => {
+        console.error("ImageCloud initialization failed:", s);
+      });
+    });
+  };
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n();
+}
+Te();
+export {
+  ze as ImageCloud,
+  ze as ImageGallery,
+  Te as autoInitialize
+};
+//# sourceMappingURL=image-cloud-auto-init.js.map