@mhmo91/schmancy 0.9.4 → 0.9.6

package/dist/lightbox-C0OEHns9.js

@@ -0,0 +1,679 @@
+import { p as e } from "./tailwind.mixin-DufHBjmb.js";
+import { t } from "./decorate-D_utPUsC.js";
+import { t as n } from "./litElement.mixin-CncaUoxz.js";
+import "./mixins.js";
+import { t as r } from "./overlay-stack-Ca4EK2Mu.js";
+import { Subject as i, filter as a, fromEvent as o, map as s, switchMap as c, takeUntil as l, tap as u } from "rxjs";
+import { filter as d, first as f, map as p, switchMap as m, takeUntil as h, tap as g } from "rxjs/operators";
+import { styleMap as _ } from "lit/directives/style-map.js";
+import { customElement as v, property as y, state as b } from "lit/decorators.js";
+import { css as x, html as S, noChange as C, render as w } from "lit";
+import { createRef as T, ref as E } from "lit/directives/ref.js";
+import { when as D } from "lit/directives/when.js";
+import { AsyncDirective as O } from "lit/async-directive.js";
+import { PartType as k, directive as A } from "lit/directive.js";
+var j = class extends n(x`
+	:host {
+		display: contents;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.src = "", this.images = [], this.initialIndex = 0, this.open = !1, this.currentIndex = 0, this.isLoading = !1, this.zIndex = 1e4, this.swipeThreshold = 50, this.overlayRef = T(), this.contentRef = T(), this.imageRef = T(), this.handleClose = () => {
+			this.open = !1;
+		}, this.handlePrevious = () => {
+			this.isGalleryMode && this.images.length > 1 && (this.isLoading = !0, this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length, this.dispatchEvent(new CustomEvent("change", {
+				detail: { index: this.currentIndex },
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.handleNext = () => {
+			this.isGalleryMode && this.images.length > 1 && (this.isLoading = !0, this.currentIndex = (this.currentIndex + 1) % this.images.length, this.dispatchEvent(new CustomEvent("change", {
+				detail: { index: this.currentIndex },
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this.handleImageLoad = () => {
+			this.isLoading = !1;
+		}, this.handleOverlayClick = (e) => {
+			e.target === e.currentTarget && this.handleClose();
+		};
+	}
+	get isGalleryMode() {
+		return this.images.length > 0;
+	}
+	get currentImageSrc() {
+		return this.isGalleryMode ? this.images[this.currentIndex] || "" : this.src;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.currentIndex = this.initialIndex;
+	}
+	updated(e) {
+		super.updated(e), e.has("open") && (this.open ? (this.zIndex = r.getNextZIndex(), document.body.style.overflow = "hidden", this.animateIn(), this.setupEventListeners()) : (document.body.style.overflow = "", this.animateOut())), e.has("initialIndex") && (this.currentIndex = this.initialIndex), e.has("currentIndex") && this.open && this.animateImageChange();
+	}
+	animateIn() {
+		let e = this.overlayRef.value, t = this.contentRef.value, n = this.imageRef.value;
+		e && (e.style.backgroundColor = "rgba(0, 0, 0, 0)", e.style.opacity = "0", e.animate([{ opacity: 0 }, { opacity: 1 }], {
+			duration: 300,
+			easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+			fill: "forwards"
+		}), requestAnimationFrame(() => {
+			e.style.backgroundColor = "rgba(0, 0, 0, 0.95)";
+		})), t && t.animate([{
+			transform: "scale(0.95)",
+			opacity: 0
+		}, {
+			transform: "scale(1)",
+			opacity: 1
+		}], {
+			duration: 400,
+			delay: 100,
+			easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+			fill: "forwards"
+		}), n && n.animate([{
+			opacity: 0,
+			transform: "scale(0.98)"
+		}, {
+			opacity: 1,
+			transform: "scale(1)"
+		}], {
+			duration: 350,
+			delay: 150,
+			easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+			fill: "forwards"
+		});
+	}
+	animateOut() {
+		let e = this.overlayRef.value, t = this.contentRef.value, n = this.imageRef.value;
+		n && n.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: "scale(0.95)",
+			opacity: 0
+		}], {
+			duration: 200,
+			easing: "ease-out",
+			fill: "forwards"
+		}), t && t.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: "scale(0.95)",
+			opacity: 0
+		}], {
+			duration: 250,
+			easing: "ease-out",
+			fill: "forwards"
+		}), e && (e.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: 250,
+			delay: 50,
+			easing: "ease-out",
+			fill: "forwards"
+		}).onfinish = () => {
+			e.style.backgroundColor = "rgba(0, 0, 0, 0)", r.release(), this.dispatchEvent(new CustomEvent("close", {
+				bubbles: !0,
+				composed: !0
+			}));
+		});
+	}
+	animateImageChange() {
+		let e = this.imageRef.value;
+		e && (e.animate([{
+			opacity: 1,
+			transform: "scale(1)"
+		}, {
+			opacity: 0,
+			transform: "scale(0.98)"
+		}], {
+			duration: 150,
+			easing: "ease-out",
+			fill: "forwards"
+		}).onfinish = () => {
+			e.animate([{
+				opacity: 0,
+				transform: "scale(0.98)"
+			}, {
+				opacity: 1,
+				transform: "scale(1)"
+			}], {
+				duration: 200,
+				easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+				fill: "forwards"
+			});
+		});
+	}
+	setupEventListeners() {
+		if (o(document, "keydown").pipe(d(() => this.open), g((e) => {
+			switch (e.key) {
+				case "Escape":
+					this.handleClose();
+					break;
+				case "ArrowLeft":
+					this.handlePrevious();
+					break;
+				case "ArrowRight": this.handleNext();
+			}
+		}), h(this.disconnecting)).subscribe(), !this.isGalleryMode || this.images.length <= 1) return;
+		let e = this.contentRef.value;
+		if (!e) return;
+		let t = o(e, "touchstart"), n = o(e, "touchend");
+		t.pipe(m((e) => {
+			let t = e.touches[0].clientX;
+			return n.pipe(f(), p((e) => e.changedTouches[0].clientX - t));
+		}), d((e) => Math.abs(e) > this.swipeThreshold), g((e) => e > 0 ? this.handlePrevious() : this.handleNext()), h(this.disconnecting)).subscribe();
+	}
+	render() {
+		return this.open ? S`
+			<div
+				${E(this.overlayRef)}
+				class="fixed inset-0 flex items-center justify-center backdrop-blur-sm"
+				style="z-index: ${this.zIndex}"
+				@click=${this.handleOverlayClick}
+			>
+				<div
+					${E(this.contentRef)}
+					class="relative max-w-[90vw] max-h-[90vh]"
+					@click=${(e) => e.stopPropagation()}
+				>
+					<!-- Close Button -->
+					<button
+						class="absolute top-4 right-4 md:top-4 md:right-4 sm:top-2 sm:right-2 bg-white/15 backdrop-blur-md border border-white/20 text-white w-11 h-11 rounded-full flex items-center justify-center cursor-pointer z-10 transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+						@click=${this.handleClose}
+						aria-label="Close lightbox"
+						title="Close (Esc)"
+					>
+						<schmancy-icon>close</schmancy-icon>
+					</button>
+
+					<!-- Touch Zones for Gallery Navigation -->
+					${D(this.isGalleryMode && this.images.length > 1, () => S`
+							<div
+								class="absolute top-0 bottom-0 left-0 w-1/3 cursor-pointer z-5"
+								@click=${this.handlePrevious}
+							></div>
+							<div
+								class="absolute top-0 bottom-0 right-0 w-1/3 cursor-pointer z-5"
+								@click=${this.handleNext}
+							></div>
+						`)}
+
+					<!-- Loading Spinner -->
+					${D(this.isLoading, () => S`
+							<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+								<schmancy-progress indeterminate></schmancy-progress>
+							</div>
+						`)}
+
+					<!-- Main Image -->
+					<img
+						${E(this.imageRef)}
+						class="max-w-[90vw] max-h-[90vh] object-contain rounded select-none touch-pinch-zoom ${this.isGalleryMode ? "cursor-default" : "cursor-pointer"}"
+						.src=${this.currentImageSrc}
+						alt="Full size image"
+						@load=${this.handleImageLoad}
+						@click=${() => this.isGalleryMode ? null : this.handleClose()}
+					/>
+
+					<!-- Navigation Controls (Gallery Mode Only) -->
+					${D(this.isGalleryMode && this.images.length > 1, () => S`
+							<div
+								class="absolute bottom-[-3.5rem] md:bottom-[-3.5rem] sm:bottom-[-3rem] left-1/2 -translate-x-1/2 flex items-center gap-4 z-10"
+							>
+								<button
+									class="bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+									@click=${this.handlePrevious}
+									aria-label="Previous image"
+									title="Previous (←)"
+								>
+									<schmancy-icon>arrow_back</schmancy-icon>
+								</button>
+
+								<div class="text-white text-base font-medium min-w-16 text-center" aria-live="polite">
+									${this.currentIndex + 1} / ${this.images.length}
+								</div>
+
+								<button
+									class="bg-white/15 backdrop-blur-md border border-white/20 text-white w-10 h-10 rounded-full flex items-center justify-center cursor-pointer transition-all duration-200 hover:bg-white/25 hover:scale-105 active:scale-95"
+									@click=${this.handleNext}
+									aria-label="Next image"
+									title="Next (→)"
+								>
+									<schmancy-icon>arrow_forward</schmancy-icon>
+								</button>
+							</div>
+						`)}
+				</div>
+			</div>
+		` : S``;
+	}
+};
+function M(e, t, n = "up", r = .3) {
+	let i = (e.x + t.x) / 2, a = (e.y + t.y) / 2, o = Math.sqrt((t.x - e.x) ** 2 + (t.y - e.y) ** 2), s = Math.min(o * r, 150);
+	return {
+		x: i,
+		y: n === "up" ? a - s : a + s
+	};
+}
+t([y({ type: String })], j.prototype, "src", void 0), t([y({ type: Array })], j.prototype, "images", void 0), t([y({ type: Number })], j.prototype, "initialIndex", void 0), t([y({ type: Boolean })], j.prototype, "open", void 0), t([b()], j.prototype, "currentIndex", void 0), t([b()], j.prototype, "isLoading", void 0), t([b()], j.prototype, "zIndex", void 0), j = t([v("schmancy-lightbox")], j);
+var N = A(class extends O {
+	constructor(e) {
+		if (super(e), this.hasAnimated = !1, e.type !== k.ELEMENT) throw Error("flip directive can only be used on elements");
+	}
+	render(e) {
+		return C;
+	}
+	update(e, [t]) {
+		this.element = e.element;
+		let n = t?.sourceElement || t?.position;
+		return !this.hasAnimated && n && (this.hasAnimated = !0, this.animateIn(t)), C;
+	}
+	animateIn(e) {
+		if (!this.element || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let t = e?.duration ?? 600, n = !1 !== e?.scale, r = !1 !== e?.blackbird, i = (a = e?.position, a ? "clientX" in a ? {
+			x: a.clientX,
+			y: a.clientY
+		} : "touches" in a && a.touches.length ? {
+			x: a.touches[0].clientX,
+			y: a.touches[0].clientY
+		} : "x" in a && "y" in a ? {
+			x: a.x,
+			y: a.y
+		} : null : null);
+		var a;
+		let o = e?.sourceElement?.getBoundingClientRect(), s = () => {
+			let a = this.element.getBoundingClientRect(), s = {
+				x: a.left + a.width / 2,
+				y: a.top + a.height / 2
+			}, c, l = {
+				x: .1,
+				y: .1
+			};
+			o ? (c = {
+				x: o.left + o.width / 2,
+				y: o.top + o.height / 2
+			}, n && (l = {
+				x: o.width / a.width,
+				y: o.height / a.height
+			})) : c = i || {
+				x: window.innerWidth / 2,
+				y: window.innerHeight / 2
+			};
+			let u = c.x - s.x, d = c.y - s.y;
+			if (r && i && o) {
+				let e = {
+					x: i.x - s.x,
+					y: i.y - s.y
+				}, n = M(c, i, "up", .4), r = M(i, s, "down", .3), a = {
+					x: n.x - s.x,
+					y: n.y - s.y
+				}, o = {
+					x: r.x - s.x,
+					y: r.y - s.y
+				}, f = .3;
+				this.element.animate([
+					{
+						transform: `translate(${u}px, ${d}px) scale(${l.x}, ${l.y})`,
+						opacity: .6,
+						offset: 0
+					},
+					{
+						transform: `translate(${a.x}px, ${a.y}px) scale(${.7 * f})`,
+						opacity: .8,
+						offset: .25
+					},
+					{
+						transform: `translate(${e.x}px, ${e.y}px) scale(${f})`,
+						opacity: .9,
+						offset: .5
+					},
+					{
+						transform: `translate(${o.x}px, ${o.y}px) scale(0.6)`,
+						opacity: .95,
+						offset: .75
+					},
+					{
+						transform: "translate(0, 0) scale(1)",
+						opacity: 1,
+						offset: 1
+					}
+				], {
+					duration: t,
+					easing: "cubic-bezier(0.34, 1.2, 0.64, 1)",
+					fill: "forwards"
+				});
+			} else if (r && i) {
+				let e = M(i, s, "down", .35), n = {
+					x: e.x - s.x,
+					y: e.y - s.y
+				};
+				this.element.animate([
+					{
+						transform: `translate(${u}px, ${d}px) scale(0.1)`,
+						opacity: 0,
+						offset: 0
+					},
+					{
+						transform: `translate(${n.x}px, ${n.y}px) scale(0.5)`,
+						opacity: .8,
+						offset: .5
+					},
+					{
+						transform: "translate(0, 0) scale(1)",
+						opacity: 1,
+						offset: 1
+					}
+				], {
+					duration: t,
+					easing: "cubic-bezier(0.34, 1.2, 0.64, 1)",
+					fill: "forwards"
+				});
+			} else this.element.animate([{
+				transform: `translate(${u}px, ${d}px) scale(${l.x}, ${l.y})`,
+				opacity: 0
+			}, {
+				transform: "translate(0, 0) scale(1, 1)",
+				opacity: 1
+			}], {
+				duration: t,
+				easing: e?.easing ?? "cubic-bezier(0.34, 1.56, 0.64, 1)",
+				fill: "forwards"
+			});
+		};
+		this.element instanceof HTMLImageElement ? this.element.complete ? requestAnimationFrame(s) : this.element.onload = () => requestAnimationFrame(s) : requestAnimationFrame(s);
+	}
+}), P = A(class extends O {
+	constructor(e) {
+		if (super(e), this.currentIndex = 0, this.images = [], e.type !== k.ELEMENT) throw Error("lightbox directive can only be used on elements");
+	}
+	render(e) {
+		return C;
+	}
+	update(e, [t]) {
+		return this.element = e.element, this.clickHandler || (this.clickHandler = (e) => {
+			if (e.preventDefault(), e.stopPropagation(), "clientX" in e) this.clickPosition = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			else if ("touches" in e && e.touches.length) {
+				let t = e.touches[0];
+				this.clickPosition = {
+					x: t.clientX,
+					y: t.clientY
+				};
+			}
+			t?.images && t.images.length > 0 ? (this.images = t.images, this.currentIndex = t.index || 0) : (this.images = [this.element.src], this.currentIndex = 0), this.overlay = t?.overlay, this.open();
+		}, this.element.addEventListener("click", this.clickHandler), this.element.style.cursor = "pointer", this.element.classList.add("hover:opacity-80", "transition-opacity")), C;
+	}
+	open() {
+		this.overlayElement = document.createElement("div"), this.overlayElement.className = "fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm", this.overlayElement.style.zIndex = "1000", w(this.renderLightbox(), this.overlayElement), document.body.appendChild(this.overlayElement), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
+			this.overlayElement.animate([{ opacity: 0 }, { opacity: 1 }], {
+				duration: 300,
+				easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+				fill: "forwards"
+			});
+		}), this.keyHandler = (e) => {
+			e.key === "Escape" && this.close(), e.key === "ArrowLeft" && this.images.length > 1 && this.prev(), e.key === "ArrowRight" && this.images.length > 1 && this.next();
+		}, document.addEventListener("keydown", this.keyHandler), this.overlayElement.addEventListener("click", (e) => {
+			e.target === this.overlayElement && this.close();
+		});
+	}
+	close() {
+		if (!this.overlayElement) return;
+		let e = this.overlayElement.querySelector("[data-lightbox-content]");
+		if (e && this.clickPosition) {
+			let t = e.getBoundingClientRect(), n = this.clickPosition.x - (t.left + t.width / 2), r = this.clickPosition.y - (t.top + t.height / 2), i = e.animate([{
+				transform: "translate(0, 0) scale(1)",
+				opacity: 1
+			}, {
+				transform: `translate(${n}px, ${r}px) scale(0.1)`,
+				opacity: 0
+			}], {
+				duration: 300,
+				easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+				fill: "forwards"
+			});
+			this.overlayElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+				duration: 250,
+				easing: "ease-out",
+				fill: "forwards"
+			}), i.onfinish = () => {
+				this.overlayElement?.remove(), this.overlayElement = void 0, document.body.style.overflow = "";
+			};
+		} else this.overlayElement.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: 250,
+			easing: "ease-out",
+			fill: "forwards"
+		}).onfinish = () => {
+			this.overlayElement?.remove(), this.overlayElement = void 0, document.body.style.overflow = "";
+		};
+		this.keyHandler &&= (document.removeEventListener("keydown", this.keyHandler), void 0);
+	}
+	prev() {
+		this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length, this.updateImage();
+	}
+	next() {
+		this.currentIndex = (this.currentIndex + 1) % this.images.length, this.updateImage();
+	}
+	updateImage() {
+		this.overlayElement && w(this.renderLightbox(), this.overlayElement);
+	}
+	renderLightbox() {
+		let e = this.images[this.currentIndex], t = this.images.length > 1;
+		return S`
+			<div
+				data-lightbox-content
+				class="relative"
+				style=${_({ transformOrigin: "center center" })}
+				@click=${(e) => e.stopPropagation()}
+			>
+				<!-- Close button -->
+				<button
+					class="absolute top-2 right-2 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${() => this.close()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Image container with optional overlay -->
+				<div class="relative">
+					<img
+						src=${e}
+						${N({
+			sourceElement: this.element,
+			position: this.clickPosition,
+			duration: 600,
+			scale: !0,
+			blackbird: !0
+		})}
+						class="object-contain rounded-lg"
+						style="max-height: calc(100vh - 40px); max-width: 90vw;"
+						@click=${() => !t && this.close()}
+					/>
+					${this.overlay ? this.overlay : ""}
+				</div>
+
+				<!-- Gallery controls -->
+				${t ? S`
+							<div class="flex items-center justify-center gap-4 text-white mt-4">
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${() => this.prev()}
+									aria-label="Previous"
+								>
+									←
+								</button>
+
+								<div class="text-lg">${this.currentIndex + 1} / ${this.images.length}</div>
+
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${() => this.next()}
+									aria-label="Next"
+								>
+									→
+								</button>
+							</div>
+						` : ""}
+			</div>
+		`;
+	}
+	disconnected() {
+		this.element && this.clickHandler && this.element.removeEventListener("click", this.clickHandler), this.close();
+	}
+}), F = class t {
+	constructor() {
+		this.pushSubject = new i(), this.dismissSubject = new i(), this.setupLightboxOpeningLogic(), this.setupLightboxDismissLogic();
+	}
+	static getInstance() {
+		return t.instance ||= new t(), t.instance;
+	}
+	setupLightboxOpeningLogic() {
+		this.pushSubject.pipe(c((t) => e("schmancy-theme").pipe(s((e) => {
+			let n = e || document.body, i = document.createElement("div");
+			return i.className = "fixed inset-0 flex items-center justify-center opacity-0 bg-black/95 backdrop-blur-sm", i.style.zIndex = String(r.getNextZIndex()), n.appendChild(i), document.body.style.overflow = "hidden", {
+				overlay: i,
+				config: t,
+				container: n
+			};
+		}))), u(({ overlay: e, config: t }) => {
+			let n = [], r = 0;
+			t.images && t.images.length > 0 ? (n = t.images, r = t.index || 0) : t.image && (n = [t.image], r = 0), this.activeLightbox = {
+				element: e,
+				config: t,
+				currentIndex: r,
+				images: n
+			}, o(document, "keydown").pipe(l(this.dismissSubject), a(() => !!this.activeLightbox), u((e) => {
+				e.key === "Escape" && this.dismiss(), e.key === "ArrowLeft" && this.activeLightbox.images.length > 1 && this.navigatePrev(), e.key === "ArrowRight" && this.activeLightbox.images.length > 1 && this.navigateNext();
+			})).subscribe(), o(e, "click").pipe(l(this.dismissSubject), a((t) => t.target === e), u(() => this.dismiss())).subscribe(), t.component ? this.renderComponent(e, t) : this.renderLightbox(e, t, n, r), requestAnimationFrame(() => {
+				e.animate([{ opacity: 0 }, { opacity: 1 }], {
+					duration: 300,
+					easing: "cubic-bezier(0.25, 1, 0.5, 1)",
+					fill: "forwards"
+				});
+			});
+		})).subscribe();
+	}
+	setupLightboxDismissLogic() {
+		this.dismissSubject.pipe(u(() => {
+			if (!this.activeLightbox) return;
+			let { element: e } = this.activeLightbox;
+			e.animate([{ opacity: 1 }, { opacity: 0 }], {
+				duration: 250,
+				easing: "ease-out",
+				fill: "forwards"
+			}).onfinish = () => {
+				e.remove(), document.body.style.overflow = "", r.release();
+			}, this.activeLightbox = void 0;
+		})).subscribe();
+	}
+	push(e) {
+		this.activeLightbox && this.dismiss(), this.pushSubject.next(e);
+	}
+	dismiss() {
+		this.dismissSubject.next();
+	}
+	navigatePrev() {
+		if (!this.activeLightbox || this.activeLightbox.images.length <= 1) return;
+		let { images: e, config: t, element: n } = this.activeLightbox;
+		this.activeLightbox.currentIndex = (this.activeLightbox.currentIndex - 1 + e.length) % e.length, this.renderLightbox(n, t, e, this.activeLightbox.currentIndex);
+	}
+	navigateNext() {
+		if (!this.activeLightbox || this.activeLightbox.images.length <= 1) return;
+		let { images: e, config: t, element: n } = this.activeLightbox;
+		this.activeLightbox.currentIndex = (this.activeLightbox.currentIndex + 1) % e.length, this.renderLightbox(n, t, e, this.activeLightbox.currentIndex);
+	}
+	renderComponent(e, t) {
+		if (!t.component) return;
+		let n;
+		n = typeof t.component == "string" ? document.createElement(t.component) : new t.component(), t.props && Object.entries(t.props).forEach(([e, t]) => {
+			n[e] = t;
+		}), w(S`
+			<div class="relative" @click=${(e) => e.stopPropagation()}>
+				<!-- Close button -->
+				<button
+					class="absolute -top-12 right-0 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${() => this.dismiss()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Component container -->
+				<div id="lightbox-component-container"></div>
+			</div>
+		`, e);
+		let r = e.querySelector("#lightbox-component-container");
+		r && r.appendChild(n);
+	}
+	renderLightbox(e, t, n, r) {
+		let i = n[r], a = n.length > 1, o = null;
+		if (t.overlay && (typeof t.overlay == "string" ? o = document.createElement(t.overlay) : typeof t.overlay == "function" && (o = new t.overlay()), t.props && o && Object.entries(t.props).forEach(([e, t]) => {
+			o[e] = t;
+		})), w(S`
+			<div
+				class="relative"
+				style=${_({
+			maxWidth: "90vw",
+			maxHeight: "90vh"
+		})}
+				@click=${(e) => e.stopPropagation()}
+			>
+				<!-- Close button -->
+				<button
+					class="absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+					@click=${() => this.dismiss()}
+					aria-label="Close"
+				>
+					<span class="text-2xl">×</span>
+				</button>
+
+				<!-- Image container with optional overlay -->
+				<div class="relative" id="lightbox-image-container">
+					<img
+						src=${i}
+						class="max-w-full object-contain rounded-lg"
+						style=${_({ maxHeight: "85vh" })}
+						@click=${() => !a && this.dismiss()}
+					/>
+				</div>
+
+				<!-- Gallery controls -->
+				${a ? S`
+							<div
+								class="absolute left-1/2 -translate-x-1/2 flex items-center gap-4 text-white"
+								style=${_({ bottom: "-60px" })}
+							>
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${() => this.navigatePrev()}
+									aria-label="Previous"
+								>
+									←
+								</button>
+
+								<div class="text-lg">${r + 1} / ${n.length}</div>
+
+								<button
+									class="w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors"
+									@click=${() => this.navigateNext()}
+									aria-label="Next"
+								>
+									→
+								</button>
+							</div>
+						` : ""}
+			</div>
+		`, e), o) {
+			let t = e.querySelector("#lightbox-image-container");
+			if (t) {
+				let e = t.querySelector("[data-lightbox-overlay]");
+				e && e.remove(), o.setAttribute("data-lightbox-overlay", ""), t.appendChild(o);
+			}
+		}
+	}
+}, I = Object.assign((e) => P(e), {
+	push: (e) => F.getInstance().push(e),
+	dismiss: () => F.getInstance().dismiss()
+});
+export { j as i, P as n, N as r, I as t };