@forgebuild/sidon-booking-widget 4.1.3 → 4.1.4

package/dist/sidon-berth-map.js

@@ -2402,59 +2402,69 @@ var Ii = /* @__PURE__ */ kr("<div class=\"sbm-map svelte-yb07tk\"></div>"), Li =
 };
 function Ri(e, t) {
 	Ke(t, !0), Gr(e, Li);
-	let n = Y(t, "mapsApiKey", 7), r = Y(t, "mapStyle", 7), i = Y(t, "center", 7), a = Y(t, "navy", 7), o = Y(t, "gold", 7), s = Y(t, "logoMark", 7, null), c = Y(t, "marinaName", 7, ""), l = Y(t, "otherMarinas", 7), u = Y(t, "berths", 7), d = Y(t, "overlays", 7), f = Y(t, "layout", 7), p = Y(t, "loa", 7), m = Y(t, "selectedBerth", 7), h = Y(t, "onBerthClick", 7), g = Y(t, "staff", 7, !1), _, v = /* @__PURE__ */ H(null), y = /* @__PURE__ */ new Map(), b = [], ee = [], x = !1, te = /* @__PURE__ */ z(() => ({
+	let n = Y(t, "mapsApiKey", 7), r = Y(t, "mapStyle", 7), i = Y(t, "center", 7), a = Y(t, "navy", 7), o = Y(t, "gold", 7), s = Y(t, "logoMark", 7, null), c = Y(t, "marinaName", 7, ""), l = Y(t, "otherMarinas", 7), u = Y(t, "berths", 7), d = Y(t, "overlays", 7), f = Y(t, "layout", 7), p = Y(t, "loa", 7), m = Y(t, "selectedBerth", 7), h = Y(t, "onBerthClick", 7), g = Y(t, "staff", 7, !1), _ = Y(t, "fitInset", 7), v, y = /* @__PURE__ */ H(null), b = /* @__PURE__ */ new Map(), ee = [], x = [], te = !1;
+	function ne() {
+		let e = _()?.() ?? 0;
+		return e > 0 ? {
+			top: 60,
+			right: 60,
+			bottom: 60,
+			left: e + 60
+		} : 60;
+	}
+	let re = /* @__PURE__ */ z(() => ({
 		fillColor: o(),
 		fillOpacity: .38,
 		strokeColor: o(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), ne = /* @__PURE__ */ z(() => ({
+	})), ie = /* @__PURE__ */ z(() => ({
 		fillColor: o(),
 		fillOpacity: .62,
 		strokeColor: o(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), re = /* @__PURE__ */ z(() => ({
+	})), ae = /* @__PURE__ */ z(() => ({
 		fillColor: o(),
 		fillOpacity: .72,
 		strokeColor: "#252525",
 		strokeOpacity: 1,
 		strokeWeight: 2
-	})), ie = {
+	})), oe = {
 		fillColor: "#b8b8b8",
 		fillOpacity: .08,
 		strokeColor: "#b8b8b8",
 		strokeOpacity: .5,
 		strokeWeight: 1
-	}, ae = {
+	}, se = {
 		fillColor: "#888888",
 		fillOpacity: .15,
 		strokeColor: "#888888",
 		strokeOpacity: .4,
 		strokeWeight: 1
-	}, oe = /* @__PURE__ */ z(() => ({
+	}, ce = /* @__PURE__ */ z(() => ({
 		fillColor: a(),
 		fillOpacity: .85,
 		strokeColor: a(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), se = (e) => Math.max(5, e.lengthM || 15), ce = (e, t) => e.angle == null ? e.circle.setRadius(se(e.berth) * t) : e.circle.setPaths(Fi(e.berth, e.angle, Mi, t)), S = /* @__PURE__ */ new WeakMap();
-	function C(e) {
+	})), S = (e) => Math.max(5, e.lengthM || 15), C = (e, t) => e.angle == null ? e.circle.setRadius(S(e.berth) * t) : e.circle.setPaths(Fi(e.berth, e.angle, Mi, t)), w = /* @__PURE__ */ new WeakMap();
+	function T(e) {
 		let t = e.circle, n = Symbol();
-		S.set(t, n);
+		w.set(t, n);
 		let r = performance.now(), i = (a) => {
-			if (S.get(t) !== n) return;
+			if (w.get(t) !== n) return;
 			let o = a - r;
 			if (o >= 260) {
-				ce(e, 1);
+				C(e, 1);
 				return;
 			}
 			let s = o < 90 ? o / 90 : 1 - (o - 90) / 170, c = s * (2 - s);
-			ce(e, 1 + .18 * c), requestAnimationFrame(i);
+			C(e, 1 + .18 * c), requestAnimationFrame(i);
 		};
 		requestAnimationFrame(i);
 	}
-	let w = [
+	let E = [
 		{
 			elementType: "geometry",
 			stylers: [{ color: "#ffffff" }]
@@ -2512,7 +2522,7 @@ function Ri(e, t) {
 			elementType: "labels.text.fill",
 			stylers: [{ color: "#aab0b4" }]
 		}
-	], T = /* @__PURE__ */ z(() => [
+	], D = /* @__PURE__ */ z(() => [
 		{
 			elementType: "geometry",
 			stylers: [{ color: "#f5efe4" }]
@@ -2594,7 +2604,7 @@ function Ri(e, t) {
 			stylers: [{ color: a() }]
 		}
 	]);
-	class E {
+	class le {
 		position;
 		href;
 		img;
@@ -2629,7 +2639,7 @@ function Ri(e, t) {
 			this.overlayView.setMap(e);
 		}
 	}
-	let D = {
+	let O = {
 		available: {
 			fill: "rgba(16,185,129,0.3)",
 			stroke: "#10b981"
@@ -2647,7 +2657,7 @@ function Ri(e, t) {
 			stroke: "rgba(136,136,136,0.4)"
 		}
 	};
-	function le(e) {
+	function ue(e) {
 		let t = {};
 		for (let e of u()) e.berthId && (t[e.berthId] = {
 			price: e.pricePerNight,
@@ -2660,7 +2670,7 @@ function Ri(e, t) {
 				r?.price != null && e.setAttribute("data-price", String(r.price));
 				let i = r?.status ?? "occupied";
 				e.setAttribute("data-status", i), g() && r && e.setAttribute("data-pick", "1");
-				let a = D[i] ?? D.occupied, o = e.querySelector("rect:not([data-role]), circle");
+				let a = O[i] ?? O.occupied, o = e.querySelector("rect:not([data-role]), circle");
 				o && (o.setAttribute("fill", a.fill), o.setAttribute("stroke", a.stroke));
 				let s = e.querySelector("[data-role=\"entrance\"]");
 				s && s.setAttribute("fill", a.stroke);
@@ -2696,7 +2706,7 @@ function Ri(e, t) {
 			return e;
 		}
 	}
-	class O {
+	class de {
 		bounds;
 		svgData;
 		rotation;
@@ -2713,7 +2723,7 @@ function Ri(e, t) {
 					lat: e.neLat,
 					lng: e.neLng
 				}
-			}, this.svgData = le(e.svgData), this.rotation = e.rotation ?? 0, this.overlayView.onAdd = () => {
+			}, this.svgData = ue(e.svgData), this.rotation = e.rotation ?? 0, this.overlayView.onAdd = () => {
 				this.div = document.createElement("div"), this.div.style.cssText = "position:absolute;pointer-events:none;transform-origin:center center;", this.div.innerHTML = this.svgData;
 				let e = this.div.querySelector("svg");
 				e && (e.style.width = "100%", e.style.height = "100%"), this.div.addEventListener("click", (e) => {
@@ -2721,7 +2731,7 @@ function Ri(e, t) {
 					if (!t || !(g() ? t.getAttribute("data-pick") === "1" : t.getAttribute("data-status") === "available" && !t.hasAttribute("data-fit"))) return;
 					let n = t.getAttribute("data-berth-id");
 					h()(m() === n ? null : n);
-				}), this.overlayView.getPanes().overlayMouseTarget.appendChild(this.div), ue();
+				}), this.overlayView.getPanes().overlayMouseTarget.appendChild(this.div), k();
 			}, this.overlayView.draw = () => {
 				if (!this.div) return;
 				let e = this.overlayView.getProjection();
@@ -2736,8 +2746,8 @@ function Ri(e, t) {
 			this.overlayView.setMap(e);
 		}
 	}
-	function ue() {
-		let e = _?.getRootNode();
+	function k() {
+		let e = v?.getRootNode();
 		if (!e) return;
 		let t = new Map(u().map((e) => [e.berthId, e]));
 		e.querySelectorAll("[data-berth-id]").forEach((e) => {
@@ -2745,61 +2755,61 @@ function Ri(e, t) {
 			!g() && r && !Di(r, p()) ? e.setAttribute("data-fit", "small") : e.removeAttribute("data-fit"), n === m() ? e.setAttribute("data-selected", "1") : e.removeAttribute("data-selected");
 		});
 	}
-	function de(e, t) {
+	function fe(e, t) {
 		let n = e.berth.status !== "available";
 		e.pickable = Oi(e.berth, p(), g());
-		let r = t === m() ? J(re) : n ? g() ? J(oe) : ae : e.pickable ? J(te) : ie;
+		let r = t === m() ? J(ae) : n ? g() ? J(ce) : se : e.pickable ? J(re) : oe;
 		e.circle.setOptions({
 			...r,
 			clickable: e.pickable
-		}), e.hull?.setOptions({ fillOpacity: r === ie || r === ae ? .2 : .85 });
+		}), e.hull?.setOptions({ fillOpacity: r === oe || r === se ? .2 : .85 });
 	}
 	Hr(() => {
 		let e = !1;
 		return bi(n()).then(() => {
-			if (e || !_) return;
-			let t = window.google.maps, n = new t.Map(_, {
+			if (e || !v) return;
+			let t = window.google.maps, n = new t.Map(v, {
 				center: i(),
 				zoom: 15,
 				disableDefaultUI: !0,
 				zoomControl: !0,
-				styles: r() === "coastal" ? J(T) : w,
+				styles: r() === "coastal" ? J(D) : E,
 				backgroundColor: r() === "coastal" ? "#f5efe4" : "#ffffff"
 			});
 			t.event.addListenerOnce(n, "idle", () => {
-				e || U(v, n);
+				e || U(y, n);
 			});
 		}), () => {
 			e = !0;
 		};
 	});
-	let k = null, fe = null;
+	let pe = null, A = null;
 	xn(() => {
-		!J(v) || i().lat === k && i().lng === fe || (k = i().lat, fe = i().lng, J(v).setCenter(i()));
+		!J(y) || i().lat === pe && i().lng === A || (pe = i().lat, A = i().lng, J(y).setCenter(i()));
 	}), xn(() => {
-		m(), p(), u(), g(), ue();
+		m(), p(), u(), g(), k();
 	});
-	function pe() {
-		if (!J(v) || r() !== "chart") return;
+	function j() {
+		if (!J(y) || r() !== "chart") return;
 		let e = new window.google.maps.LatLngBounds();
 		for (let t of u()) {
 			if (t.lat == null || t.lng == null || !t.berthId) continue;
 			let n = window.google.maps, r = Pi(t, d()), i = r == null ? new n.Circle({
-				map: J(v),
+				map: J(y),
 				center: {
 					lat: t.lat,
 					lng: t.lng
 				},
-				radius: se(t),
-				...J(te)
+				radius: S(t),
+				...J(re)
 			}) : new n.Polygon({
-				map: J(v),
+				map: J(y),
 				paths: Fi(t, r, Mi),
-				...J(te)
+				...J(re)
 			}), o = {
 				circle: i,
 				hull: r == null ? null : new n.Polygon({
-					map: J(v),
+					map: J(y),
 					paths: Fi(t, r, Ni, .8),
 					clickable: !1,
 					zIndex: 1,
@@ -2811,42 +2821,42 @@ function Ri(e, t) {
 				berth: t,
 				pickable: !1
 			};
-			y.set(t.berthId, o), hr(() => de(o, t.berthId)), i.addListener("click", () => h()(t.berthId === m() ? null : t.berthId)), i.addListener("mouseover", () => {
-				o.pickable && t.berthId !== m() && i.setOptions(J(ne));
+			b.set(t.berthId, o), hr(() => fe(o, t.berthId)), i.addListener("click", () => h()(t.berthId === m() ? null : t.berthId)), i.addListener("mouseover", () => {
+				o.pickable && t.berthId !== m() && i.setOptions(J(ie));
 			}), i.addListener("mouseout", () => {
-				t.berthId !== m() && de(o, t.berthId);
+				t.berthId !== m() && fe(o, t.berthId);
 			}), e.extend({
 				lat: t.lat,
 				lng: t.lng
 			});
 		}
-		y.size && !x && (x = !0, e.extend(i()), J(v).fitBounds(e, 60));
+		b.size && !te && (te = !0, e.extend(i()), J(y).fitBounds(e, ne()));
 	}
 	xn(() => {
-		if (!(!J(v) || r() !== "chart")) {
-			for (let e of y.values()) e.circle.setMap(null), e.hull?.setMap(null);
-			y.clear(), pe();
+		if (!(!J(y) || r() !== "chart")) {
+			for (let e of b.values()) e.circle.setMap(null), e.hull?.setMap(null);
+			b.clear(), j();
 		}
 	}), xn(() => {
-		if (!J(v)) return;
-		for (let e of b) e.setMap(null);
+		if (!J(y)) return;
+		for (let e of ee) e.setMap(null);
 		let e = [];
-		s() && e.push(new E(i(), s(), c(), null));
-		for (let t of l()) t.logoMark && e.push(new E({
+		s() && e.push(new le(i(), s(), c(), null));
+		for (let t of l()) t.logoMark && e.push(new le({
 			lat: t.lat,
 			lng: t.lng
 		}, t.logoMark, t.name, t.href));
-		for (let t of e) t.setMap(J(v));
-		b = e;
+		for (let t of e) t.setMap(J(y));
+		ee = e;
 	}), xn(() => {
-		if (!J(v) || r() !== "coastal") return;
-		for (let e of ee) e.setMap(null);
+		if (!J(y) || r() !== "coastal") return;
+		for (let e of x) e.setMap(null);
 		let e = d().length ? d() : f() ? [f()] : [];
-		if (ee = e.map((e) => {
-			let t = new O(e);
-			return t.setMap(J(v)), t;
-		}), e.length && !x) {
-			x = !0;
+		if (x = e.map((e) => {
+			let t = new de(e);
+			return t.setMap(J(y)), t;
+		}), e.length && !te) {
+			te = !0;
 			let t = new window.google.maps.LatLngBounds();
 			for (let n of e) t.extend({
 				lat: n.swLat,
@@ -2855,17 +2865,17 @@ function Ri(e, t) {
 				lat: n.neLat,
 				lng: n.neLng
 			});
-			J(v).fitBounds(t, 60);
+			J(y).fitBounds(t, ne());
 		}
 	});
-	let A = null;
+	let me = null;
 	xn(() => {
 		p();
-		let e = m() != null && m() !== A;
-		for (let [t, n] of y) de(n, t), e && t === m() && C(n);
-		A = m();
+		let e = m() != null && m() !== me;
+		for (let [t, n] of b) fe(n, t), e && t === m() && T(n);
+		me = m();
 	});
-	var j = {
+	var he = {
 		get mapsApiKey() {
 			return n();
 		},
@@ -2955,9 +2965,15 @@ function Ri(e, t) {
 		},
 		set staff(e = !1) {
 			g(e), V();
+		},
+		get fitInset() {
+			return _();
+		},
+		set fitInset(e) {
+			_(e), V();
 		}
-	}, me = Ii();
-	return fi(me, (e) => _ = e, () => _), jr(e, me), qe(j);
+	}, ge = Ii();
+	return fi(ge, (e) => v = e, () => v), jr(e, ge), qe(he);
 }
 vi(Ri, {
 	mapsApiKey: {},
@@ -2974,7 +2990,8 @@ vi(Ri, {
 	loa: {},
 	selectedBerth: {},
 	onBerthClick: {},
-	staff: {}
+	staff: {},
+	fitInset: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region node_modules/flatpickr/dist/esm/types/options.js

package/dist/sidon-booking-widget.js

@@ -4438,59 +4438,69 @@ var go = /* @__PURE__ */ Y("<div class=\"sbm-map svelte-yb07tk\"></div>"), _o =
 };
 function vo(e, t) {
 	Xe(t, !0), ai(e, _o);
-	let n = $(t, "mapsApiKey", 7), r = $(t, "mapStyle", 7), i = $(t, "center", 7), a = $(t, "navy", 7), o = $(t, "gold", 7), s = $(t, "logoMark", 7, null), c = $(t, "marinaName", 7, ""), l = $(t, "otherMarinas", 7), u = $(t, "berths", 7), d = $(t, "overlays", 7), f = $(t, "layout", 7), p = $(t, "loa", 7), m = $(t, "selectedBerth", 7), h = $(t, "onBerthClick", 7), g = $(t, "staff", 7, !1), _, v = /* @__PURE__ */ B(null), y = /* @__PURE__ */ new Map(), b = [], x = [], S = !1, ee = /* @__PURE__ */ I(() => ({
+	let n = $(t, "mapsApiKey", 7), r = $(t, "mapStyle", 7), i = $(t, "center", 7), a = $(t, "navy", 7), o = $(t, "gold", 7), s = $(t, "logoMark", 7, null), c = $(t, "marinaName", 7, ""), l = $(t, "otherMarinas", 7), u = $(t, "berths", 7), d = $(t, "overlays", 7), f = $(t, "layout", 7), p = $(t, "loa", 7), m = $(t, "selectedBerth", 7), h = $(t, "onBerthClick", 7), g = $(t, "staff", 7, !1), _ = $(t, "fitInset", 7), v, y = /* @__PURE__ */ B(null), b = /* @__PURE__ */ new Map(), x = [], S = [], ee = !1;
+	function C() {
+		let e = _()?.() ?? 0;
+		return e > 0 ? {
+			top: 60,
+			right: 60,
+			bottom: 60,
+			left: e + 60
+		} : 60;
+	}
+	let w = /* @__PURE__ */ I(() => ({
 		fillColor: o(),
 		fillOpacity: .38,
 		strokeColor: o(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), C = /* @__PURE__ */ I(() => ({
+	})), T = /* @__PURE__ */ I(() => ({
 		fillColor: o(),
 		fillOpacity: .62,
 		strokeColor: o(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), w = /* @__PURE__ */ I(() => ({
+	})), te = /* @__PURE__ */ I(() => ({
 		fillColor: o(),
 		fillOpacity: .72,
 		strokeColor: "#252525",
 		strokeOpacity: 1,
 		strokeWeight: 2
-	})), T = {
+	})), ne = {
 		fillColor: "#b8b8b8",
 		fillOpacity: .08,
 		strokeColor: "#b8b8b8",
 		strokeOpacity: .5,
 		strokeWeight: 1
-	}, te = {
+	}, E = {
 		fillColor: "#888888",
 		fillOpacity: .15,
 		strokeColor: "#888888",
 		strokeOpacity: .4,
 		strokeWeight: 1
-	}, ne = /* @__PURE__ */ I(() => ({
+	}, D = /* @__PURE__ */ I(() => ({
 		fillColor: a(),
 		fillOpacity: .85,
 		strokeColor: a(),
 		strokeOpacity: 1,
 		strokeWeight: 1.6
-	})), E = (e) => Math.max(5, e.lengthM || 15), D = (e, t) => e.angle == null ? e.circle.setRadius(E(e.berth) * t) : e.circle.setPaths(ho(e.berth, e.angle, fo, t)), O = /* @__PURE__ */ new WeakMap();
-	function k(e) {
+	})), O = (e) => Math.max(5, e.lengthM || 15), k = (e, t) => e.angle == null ? e.circle.setRadius(O(e.berth) * t) : e.circle.setPaths(ho(e.berth, e.angle, fo, t)), re = /* @__PURE__ */ new WeakMap();
+	function ie(e) {
 		let t = e.circle, n = Symbol();
-		O.set(t, n);
+		re.set(t, n);
 		let r = performance.now(), i = (a) => {
-			if (O.get(t) !== n) return;
+			if (re.get(t) !== n) return;
 			let o = a - r;
 			if (o >= 260) {
-				D(e, 1);
+				k(e, 1);
 				return;
 			}
 			let s = o < 90 ? o / 90 : 1 - (o - 90) / 170, c = s * (2 - s);
-			D(e, 1 + .18 * c), requestAnimationFrame(i);
+			k(e, 1 + .18 * c), requestAnimationFrame(i);
 		};
 		requestAnimationFrame(i);
 	}
-	let re = [
+	let A = [
 		{
 			elementType: "geometry",
 			stylers: [{ color: "#ffffff" }]
@@ -4548,7 +4558,7 @@ function vo(e, t) {
 			elementType: "labels.text.fill",
 			stylers: [{ color: "#aab0b4" }]
 		}
-	], ie = /* @__PURE__ */ I(() => [
+	], ae = /* @__PURE__ */ I(() => [
 		{
 			elementType: "geometry",
 			stylers: [{ color: "#f5efe4" }]
@@ -4630,7 +4640,7 @@ function vo(e, t) {
 			stylers: [{ color: a() }]
 		}
 	]);
-	class A {
+	class oe {
 		position;
 		href;
 		img;
@@ -4665,7 +4675,7 @@ function vo(e, t) {
 			this.overlayView.setMap(e);
 		}
 	}
-	let ae = {
+	let se = {
 		available: {
 			fill: "rgba(16,185,129,0.3)",
 			stroke: "#10b981"
@@ -4683,7 +4693,7 @@ function vo(e, t) {
 			stroke: "rgba(136,136,136,0.4)"
 		}
 	};
-	function oe(e) {
+	function ce(e) {
 		let t = {};
 		for (let e of u()) e.berthId && (t[e.berthId] = {
 			price: e.pricePerNight,
@@ -4696,7 +4706,7 @@ function vo(e, t) {
 				r?.price != null && e.setAttribute("data-price", String(r.price));
 				let i = r?.status ?? "occupied";
 				e.setAttribute("data-status", i), g() && r && e.setAttribute("data-pick", "1");
-				let a = ae[i] ?? ae.occupied, o = e.querySelector("rect:not([data-role]), circle");
+				let a = se[i] ?? se.occupied, o = e.querySelector("rect:not([data-role]), circle");
 				o && (o.setAttribute("fill", a.fill), o.setAttribute("stroke", a.stroke));
 				let s = e.querySelector("[data-role=\"entrance\"]");
 				s && s.setAttribute("fill", a.stroke);
@@ -4732,7 +4742,7 @@ function vo(e, t) {
 			return e;
 		}
 	}
-	class se {
+	class le {
 		bounds;
 		svgData;
 		rotation;
@@ -4749,7 +4759,7 @@ function vo(e, t) {
 					lat: e.neLat,
 					lng: e.neLng
 				}
-			}, this.svgData = oe(e.svgData), this.rotation = e.rotation ?? 0, this.overlayView.onAdd = () => {
+			}, this.svgData = ce(e.svgData), this.rotation = e.rotation ?? 0, this.overlayView.onAdd = () => {
 				this.div = document.createElement("div"), this.div.style.cssText = "position:absolute;pointer-events:none;transform-origin:center center;", this.div.innerHTML = this.svgData;
 				let e = this.div.querySelector("svg");
 				e && (e.style.width = "100%", e.style.height = "100%"), this.div.addEventListener("click", (e) => {
@@ -4757,7 +4767,7 @@ function vo(e, t) {
 					if (!t || !(g() ? t.getAttribute("data-pick") === "1" : t.getAttribute("data-status") === "available" && !t.hasAttribute("data-fit"))) return;
 					let n = t.getAttribute("data-berth-id");
 					h()(m() === n ? null : n);
-				}), this.overlayView.getPanes().overlayMouseTarget.appendChild(this.div), ce();
+				}), this.overlayView.getPanes().overlayMouseTarget.appendChild(this.div), ue();
 			}, this.overlayView.draw = () => {
 				if (!this.div) return;
 				let e = this.overlayView.getProjection();
@@ -4772,8 +4782,8 @@ function vo(e, t) {
 			this.overlayView.setMap(e);
 		}
 	}
-	function ce() {
-		let e = _?.getRootNode();
+	function ue() {
+		let e = v?.getRootNode();
 		if (!e) return;
 		let t = new Map(u().map((e) => [e.berthId, e]));
 		e.querySelectorAll("[data-berth-id]").forEach((e) => {
@@ -4781,61 +4791,61 @@ function vo(e, t) {
 			!g() && r && !ro(r, p()) ? e.setAttribute("data-fit", "small") : e.removeAttribute("data-fit"), n === m() ? e.setAttribute("data-selected", "1") : e.removeAttribute("data-selected");
 		});
 	}
-	function le(e, t) {
+	function de(e, t) {
 		let n = e.berth.status !== "available";
 		e.pickable = io(e.berth, p(), g());
-		let r = t === m() ? q(w) : n ? g() ? q(ne) : te : e.pickable ? q(ee) : T;
+		let r = t === m() ? q(te) : n ? g() ? q(D) : E : e.pickable ? q(w) : ne;
 		e.circle.setOptions({
 			...r,
 			clickable: e.pickable
-		}), e.hull?.setOptions({ fillOpacity: r === T || r === te ? .2 : .85 });
+		}), e.hull?.setOptions({ fillOpacity: r === ne || r === E ? .2 : .85 });
 	}
 	qr(() => {
 		let e = !1;
 		return Ra(n()).then(() => {
-			if (e || !_) return;
-			let t = window.google.maps, n = new t.Map(_, {
+			if (e || !v) return;
+			let t = window.google.maps, n = new t.Map(v, {
 				center: i(),
 				zoom: 15,
 				disableDefaultUI: !0,
 				zoomControl: !0,
-				styles: r() === "coastal" ? q(ie) : re,
+				styles: r() === "coastal" ? q(ae) : A,
 				backgroundColor: r() === "coastal" ? "#f5efe4" : "#ffffff"
 			});
 			t.event.addListenerOnce(n, "idle", () => {
-				e || V(v, n);
+				e || V(y, n);
 			});
 		}), () => {
 			e = !0;
 		};
 	});
-	let ue = null, de = null;
+	let fe = null, pe = null;
 	Tn(() => {
-		!q(v) || i().lat === ue && i().lng === de || (ue = i().lat, de = i().lng, q(v).setCenter(i()));
+		!q(y) || i().lat === fe && i().lng === pe || (fe = i().lat, pe = i().lng, q(y).setCenter(i()));
 	}), Tn(() => {
-		m(), p(), u(), g(), ce();
+		m(), p(), u(), g(), ue();
 	});
-	function fe() {
-		if (!q(v) || r() !== "chart") return;
+	function me() {
+		if (!q(y) || r() !== "chart") return;
 		let e = new window.google.maps.LatLngBounds();
 		for (let t of u()) {
 			if (t.lat == null || t.lng == null || !t.berthId) continue;
 			let n = window.google.maps, r = mo(t, d()), i = r == null ? new n.Circle({
-				map: q(v),
+				map: q(y),
 				center: {
 					lat: t.lat,
 					lng: t.lng
 				},
-				radius: E(t),
-				...q(ee)
+				radius: O(t),
+				...q(w)
 			}) : new n.Polygon({
-				map: q(v),
+				map: q(y),
 				paths: ho(t, r, fo),
-				...q(ee)
+				...q(w)
 			}), o = {
 				circle: i,
 				hull: r == null ? null : new n.Polygon({
-					map: q(v),
+					map: q(y),
 					paths: ho(t, r, po, .8),
 					clickable: !1,
 					zIndex: 1,
@@ -4847,42 +4857,42 @@ function vo(e, t) {
 				berth: t,
 				pickable: !1
 			};
-			y.set(t.berthId, o), J(() => le(o, t.berthId)), i.addListener("click", () => h()(t.berthId === m() ? null : t.berthId)), i.addListener("mouseover", () => {
-				o.pickable && t.berthId !== m() && i.setOptions(q(C));
+			b.set(t.berthId, o), J(() => de(o, t.berthId)), i.addListener("click", () => h()(t.berthId === m() ? null : t.berthId)), i.addListener("mouseover", () => {
+				o.pickable && t.berthId !== m() && i.setOptions(q(T));
 			}), i.addListener("mouseout", () => {
-				t.berthId !== m() && le(o, t.berthId);
+				t.berthId !== m() && de(o, t.berthId);
 			}), e.extend({
 				lat: t.lat,
 				lng: t.lng
 			});
 		}
-		y.size && !S && (S = !0, e.extend(i()), q(v).fitBounds(e, 60));
+		b.size && !ee && (ee = !0, e.extend(i()), q(y).fitBounds(e, C()));
 	}
 	Tn(() => {
-		if (!(!q(v) || r() !== "chart")) {
-			for (let e of y.values()) e.circle.setMap(null), e.hull?.setMap(null);
-			y.clear(), fe();
+		if (!(!q(y) || r() !== "chart")) {
+			for (let e of b.values()) e.circle.setMap(null), e.hull?.setMap(null);
+			b.clear(), me();
 		}
 	}), Tn(() => {
-		if (!q(v)) return;
-		for (let e of b) e.setMap(null);
+		if (!q(y)) return;
+		for (let e of x) e.setMap(null);
 		let e = [];
-		s() && e.push(new A(i(), s(), c(), null));
-		for (let t of l()) t.logoMark && e.push(new A({
+		s() && e.push(new oe(i(), s(), c(), null));
+		for (let t of l()) t.logoMark && e.push(new oe({
 			lat: t.lat,
 			lng: t.lng
 		}, t.logoMark, t.name, t.href));
-		for (let t of e) t.setMap(q(v));
-		b = e;
+		for (let t of e) t.setMap(q(y));
+		x = e;
 	}), Tn(() => {
-		if (!q(v) || r() !== "coastal") return;
-		for (let e of x) e.setMap(null);
+		if (!q(y) || r() !== "coastal") return;
+		for (let e of S) e.setMap(null);
 		let e = d().length ? d() : f() ? [f()] : [];
-		if (x = e.map((e) => {
-			let t = new se(e);
-			return t.setMap(q(v)), t;
-		}), e.length && !S) {
-			S = !0;
+		if (S = e.map((e) => {
+			let t = new le(e);
+			return t.setMap(q(y)), t;
+		}), e.length && !ee) {
+			ee = !0;
 			let t = new window.google.maps.LatLngBounds();
 			for (let n of e) t.extend({
 				lat: n.swLat,
@@ -4891,17 +4901,17 @@ function vo(e, t) {
 				lat: n.neLat,
 				lng: n.neLng
 			});
-			q(v).fitBounds(t, 60);
+			q(y).fitBounds(t, C());
 		}
 	});
-	let pe = null;
+	let he = null;
 	Tn(() => {
 		p();
-		let e = m() != null && m() !== pe;
-		for (let [t, n] of y) le(n, t), e && t === m() && k(n);
-		pe = m();
+		let e = m() != null && m() !== he;
+		for (let [t, n] of b) de(n, t), e && t === m() && ie(n);
+		he = m();
 	});
-	var me = {
+	var ge = {
 		get mapsApiKey() {
 			return n();
 		},
@@ -4991,9 +5001,15 @@ function vo(e, t) {
 		},
 		set staff(e = !1) {
 			g(e), z();
+		},
+		get fitInset() {
+			return _();
+		},
+		set fitInset(e) {
+			_(e), z();
 		}
-	}, he = go();
-	return Ai(he, (e) => _ = e, () => _), X(e, he), Ze(me);
+	}, _e = go();
+	return Ai(_e, (e) => v = e, () => v), X(e, _e), Ze(ge);
 }
 Ii(vo, {
 	mapsApiKey: {},
@@ -5010,7 +5026,8 @@ Ii(vo, {
 	loa: {},
 	selectedBerth: {},
 	onBerthClick: {},
-	staff: {}
+	staff: {},
+	fitInset: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/components/Stepper.svelte
@@ -13158,28 +13175,32 @@ function Lc(e, t) {
 	}), qr(() => {
 		_() === "overlay" ? (T.style.maxWidth = "none", T.style.setProperty("--sbw-card-width", g())) : T.style.maxWidth = g();
 	});
-	let Oe = /* @__PURE__ */ I(() => !!d() && !D && !q(he)), ke = /* @__PURE__ */ I(() => q(de) != null && q(de) > 0 ? q(de) : null), Ae = /* @__PURE__ */ I(() => (q(pe)?.berths ?? []).filter((e) => e.status === "available")), je = /* @__PURE__ */ I(() => !q(Ae).length || q(Ae).some((e) => e.lengthM == null) ? 200 : Math.max(...q(Ae).map((e) => e.lengthM ?? 0))), Me = /* @__PURE__ */ I(() => q(oe) && q(me).some((e) => e.label === q(oe)) ? q(oe) : ao(q(me))), Ne = /* @__PURE__ */ I(() => q(me).find((e) => e.label === q(Me)) ?? null), Pe = /* @__PURE__ */ I(() => q(Ne)?.totalPrice == null ? null : co(q(Ne).totalPrice, q(pe)?.currency ?? null, l(), q(ne))), Fe = !1;
+	let Oe = /* @__PURE__ */ B(void 0), ke = /* @__PURE__ */ B(void 0);
+	function Ae() {
+		return _() !== "overlay" || !q(Oe) || !q(ke) || !matchMedia("(min-width: 768px)").matches ? 0 : q(ke).getBoundingClientRect().right - q(Oe).getBoundingClientRect().left;
+	}
+	let je = /* @__PURE__ */ I(() => !!d() && !D && !q(he)), Me = /* @__PURE__ */ I(() => q(de) != null && q(de) > 0 ? q(de) : null), Ne = /* @__PURE__ */ I(() => (q(pe)?.berths ?? []).filter((e) => e.status === "available")), Pe = /* @__PURE__ */ I(() => !q(Ne).length || q(Ne).some((e) => e.lengthM == null) ? 200 : Math.max(...q(Ne).map((e) => e.lengthM ?? 0))), Fe = /* @__PURE__ */ I(() => q(oe) && q(me).some((e) => e.label === q(oe)) ? q(oe) : ao(q(me))), Ie = /* @__PURE__ */ I(() => q(me).find((e) => e.label === q(Fe)) ?? null), Le = /* @__PURE__ */ I(() => q(Ie)?.totalPrice == null ? null : co(q(Ie).totalPrice, q(pe)?.currency ?? null, l(), q(ne))), Re = !1;
 	Tn(() => {
-		Fe || !q(Ae).length || (Fe = !0, q(ie) > q(je) && V(ie, q(je), !0));
+		Re || !q(Ne).length || (Re = !0, q(ie) > q(Pe) && V(ie, q(Pe), !0));
 	}), Tn(() => {
 		let e = s();
 		J(() => {
 			q(k) <= 2 && V(oe, e || null, !0);
 		});
 	});
-	let Ie = {
+	let M = {
 		arrival: "",
 		departure: ""
-	}, Le = /* @__PURE__ */ I(() => q(A) && q(ae) && +q(ae) > +q(A) ? Ie = {
+	}, ze = /* @__PURE__ */ I(() => q(A) && q(ae) && +q(ae) > +q(A) ? M = {
 		arrival: Aa(q(A)),
 		departure: Aa(q(ae))
-	} : Ie), Re = /* @__PURE__ */ B(1);
+	} : M), N = /* @__PURE__ */ B(1);
 	qr(() => {
-		D || Io(r(), n(), J(() => q(Le)), null).then((e) => {
-			e.requirements.length || (V(Re, 2), q(k) === 1 && (V(_e, !0), V(k, 2)));
+		D || Io(r(), n(), J(() => q(ze)), null).then((e) => {
+			e.requirements.length || (V(N, 2), q(k) === 1 && (V(_e, !0), V(k, 2)));
 		}, () => {});
 	});
-	let M = {
+	let Be = {
 		email: "",
 		name: ""
 	};
@@ -13187,10 +13208,10 @@ function Lc(e, t) {
 		let e = q(ve);
 		J(() => {
 			if (e) {
-				V(ce, M.email = e.email, !0), !q(se).trim() && e.name && V(se, M.name = e.name, !0);
+				V(ce, Be.email = e.email, !0), !q(se).trim() && e.name && V(se, Be.name = e.name, !0);
 				return;
 			}
-			M.email && q(ce) === M.email && V(ce, ""), M.name && q(se) === M.name && V(se, ""), M = {
+			Be.email && q(ce) === Be.email && V(ce, ""), Be.name && q(se) === Be.name && V(se, ""), Be = {
 				email: "",
 				name: ""
 			};
@@ -13201,11 +13222,11 @@ function Lc(e, t) {
 			V(ie, e, !0);
 		});
 	});
-	let ze = "";
+	let Ve = "";
 	Tn(() => {
 		let e = q(ye);
 		J(() => {
-			e && !q(ue).trim() ? V(ue, ze = e, !0) : !e && ze && q(ue) === ze && V(ue, ze = "", !0);
+			e && !q(ue).trim() ? V(ue, Ve = e, !0) : !e && Ve && q(ue) === Ve && V(ue, Ve = "", !0);
 		});
 	}), Tn(() => {
 		if (D) return;
@@ -13230,7 +13251,7 @@ function Lc(e, t) {
 			arrival: Aa(q(A)),
 			departure: Aa(q(ae)),
 			boatLengthM: q(ie),
-			boatBeamM: q(ke)
+			boatBeamM: q(Me)
 		};
 		q(ge);
 		let t = !1, i = setTimeout(() => {
@@ -13248,30 +13269,30 @@ function Lc(e, t) {
 	}), Tn(() => {
 		D || te("sidon-loa-change", { loa: q(ie) });
 	});
-	function N(e) {
+	function He(e) {
 		q(k) <= 2 && V(oe, e, !0);
 	}
-	function Be(e) {
-		e < q(k) && Ye();
+	function Ue(e) {
+		e < q(k) && et();
 	}
-	function Ve() {
-		q(we) || (V(Te, null), q(k) === 1 ? q(_e) && V(k, 2) : q(k) === 2 ? Ge() : q(k) === 3 && qe());
+	function We() {
+		q(we) || (V(Te, null), q(k) === 1 ? q(_e) && V(k, 2) : q(k) === 2 ? Je() : q(k) === 3 && Qe());
 	}
-	let He = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-	function Ue() {
+	let Ge = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+	function Ke() {
 		let e = q(E).wizard;
-		return !q(A) || !q(ae) || +q(ae) <= +q(A) ? e.errDates : q(ie) > 0 ? q(Me) ? q(se).trim() ? q(ue).trim() ? He.test(q(ce).trim()) ? null : e.errEmail : e.errBoatName : e.errName : e.errNoBerth : e.errLength;
+		return !q(A) || !q(ae) || +q(ae) <= +q(A) ? e.errDates : q(ie) > 0 ? q(Fe) ? q(se).trim() ? q(ue).trim() ? Ge.test(q(ce).trim()) ? null : e.errEmail : e.errBoatName : e.errName : e.errNoBerth : e.errLength;
 	}
-	function We() {
+	function qe() {
 		return q(ve) ? Do(S())?.token ?? null : null;
 	}
-	async function Ge() {
-		let e = Ue();
+	async function Je() {
+		let e = Ke();
 		if (e) return void V(Te, e, !0);
 		V(we, !0);
 		try {
 			let e = await Ro(r(), n(), {
-				berthLabel: q(Me),
+				berthLabel: q(Fe),
 				arrival: Aa(q(A)),
 				departure: Aa(q(ae)),
 				contactName: q(se).trim(),
@@ -13279,25 +13300,25 @@ function Lc(e, t) {
 				contactPhone: q(le).trim() || void 0,
 				boatName: q(ue).trim(),
 				boatLengthM: q(ie),
-				boatBeamM: q(ke),
+				boatBeamM: q(Me),
 				notes: q(fe).trim() || void 0,
 				locale: q(ne)
-			}, We()), t = {
+			}, qe()), t = {
 				id: e.booking.id,
 				token: e.token
 			};
-			V(O, t, !0), kc(n(), t), e.payment ? (V(xe, e, !0), V(k, 3)) : Je(t.id);
+			V(O, t, !0), kc(n(), t), e.payment ? (V(xe, e, !0), V(k, 3)) : $e(t.id);
 		} catch (e) {
-			Ke(e);
+			Ye(e);
 		} finally {
 			V(we, !1);
 		}
 	}
-	function Ke(e) {
+	function Ye(e) {
 		let t = q(E).wizard;
 		if (!(e instanceof Ao) || e.status === 0) return void V(Te, t.errNetwork, !0);
 		if (Ja(e.status, e.message)) {
-			V(Re, 1), V(k, 1), V(Te, q(E).docsStep.missingNow, !0);
+			V(N, 1), V(k, 1), V(Te, q(E).docsStep.missingNow, !0);
 			return;
 		}
 		(e.status === 409 || e.status === 404) && nn(ge);
@@ -13310,7 +13331,7 @@ function Lc(e, t) {
 		};
 		V(Te, n[e.status] ?? (e.status >= 500 ? t.errUnavailable : e.message), !0);
 	}
-	async function qe() {
+	async function Qe() {
 		let e = q(O);
 		if (!(!e || !q(Ce))) {
 			V(we, !0);
@@ -13320,20 +13341,20 @@ function Lc(e, t) {
 				V(Te, e instanceof Error ? e.message : q(E).wizard.errNetwork, !0), V(we, !1);
 				return;
 			}
-			await Bo(r(), n(), e).catch(() => {}), V(we, !1), Je(e.id);
+			await Bo(r(), n(), e).catch(() => {}), V(we, !1), $e(e.id);
 		}
 	}
-	function Je(e) {
+	function $e(e) {
 		V(xe, null), V(k, 4), te("sidon-booked", {
 			bookingId: e,
 			marina: n()
 		});
 	}
-	async function Ye() {
+	async function et() {
 		let e = q(O);
 		if (q(we)) return;
 		if (q(k) === 2) {
-			V(Te, null), V(k, q(Re), !0);
+			V(Te, null), V(k, q(N), !0);
 			return;
 		}
 		if (q(k) !== 3 || !e) return;
@@ -13342,16 +13363,16 @@ function Lc(e, t) {
 		if (V(we, !1), !t) return void V(Te, q(E).wizard.errNetwork, !0);
 		Ac(n()), V(O, null), V(xe, null), V(k, 2);
 	}
-	function Qe() {
-		Ac(n()), V(O, null), V(Te, null), V(k, q(Re), !0);
+	function tt() {
+		Ac(n()), V(O, null), V(Te, null), V(k, q(N), !0);
 	}
-	function $e(e, t) {
+	function nt(e, t) {
 		t !== null && q(O) && te("sidon-booking-status", {
 			bookingId: q(O).id,
 			status: e
 		});
 	}
-	var et = {
+	var rt = {
 		get marina() {
 			return n();
 		},
@@ -13496,7 +13517,7 @@ function Lc(e, t) {
 		set sailorApiOrigin(e = "") {
 			w(e), z();
 		}
-	}, tt = Fc(), nt = hn(tt), rt = (e) => {
+	}, it = Fc(), at = hn(it), ot = (e) => {
 		var t = Mc();
 		let n;
 		var r = H(t);
@@ -13543,24 +13564,25 @@ function Lc(e, t) {
 					return q(ie);
 				},
 				get selectedBerth() {
-					return q(Me);
+					return q(Fe);
 				},
-				onBerthClick: N
+				onBerthClick: He,
+				fitInset: Ae
 			});
 		}
-		P(t), W(() => {
+		P(t), Ai(t, (e) => V(Oe, e), () => q(Oe)), W(() => {
 			n = fi(t, 1, "sbw-map-slot svelte-h0br6q", null, n, {
 				"sbw-map-slot--full-bleed": m() === "100vw",
 				"sbw-map-slot--overlay": _() === "overlay"
 			}), mi(t, `height: ${p() ?? ""}; width: ${m() ?? ""}; margin-bottom: ${h() ?? ""};`);
 		}), X(e, t);
 	};
-	Q(nt, (e) => {
-		q(Oe) && e(rt);
+	Q(at, (e) => {
+		q(je) && e(ot);
 	});
-	var it = U(nt, 2);
-	let at;
-	var ot = H(it), st = (e) => {
+	var st = U(at, 2);
+	let ct;
+	var lt = H(st), ut = (e) => {
 		var t = Fr(), i = hn(t), a = (e) => {
 			{
 				let t = /* @__PURE__ */ I(() => c() ? q(ne) : null);
@@ -13586,7 +13608,7 @@ function Lc(e, t) {
 					get host() {
 						return T;
 					},
-					onstatus: $e
+					onstatus: nt
 				});
 			}
 		}, o = (e) => {
@@ -13596,19 +13618,19 @@ function Lc(e, t) {
 		Q(i, (e) => {
 			q(O) ? e(a) : e(o, -1);
 		}), X(e, t);
-	}, ct = (e) => {
+	}, dt = (e) => {
 		var t = Pc(), i = hn(t);
 		{
-			let e = /* @__PURE__ */ I(() => q(Me) ?? "—"), t = /* @__PURE__ */ I(() => c() || "en"), n = /* @__PURE__ */ I(() => q(k) > 2);
+			let e = /* @__PURE__ */ I(() => q(Fe) ?? "—"), t = /* @__PURE__ */ I(() => c() || "en"), n = /* @__PURE__ */ I(() => q(k) > 2);
 			Ia(i, {
 				get berthLabel() {
 					return q(e);
 				},
 				get priceLabel() {
-					return q(Pe);
+					return q(Le);
 				},
 				get maxLoa() {
-					return q(je);
+					return q(Pe);
 				},
 				get locale() {
 					return q(t);
@@ -13644,7 +13666,7 @@ function Lc(e, t) {
 					return q(k);
 				},
 				get first() {
-					return q(Re);
+					return q(N);
 				},
 				get skip() {
 					return q(e);
@@ -13652,7 +13674,7 @@ function Lc(e, t) {
 				get labels() {
 					return q(E).steps;
 				},
-				onStepClick: Be
+				onStepClick: Ue
 			});
 		}
 		var o = U(a, 2), s = (e) => {
@@ -13694,10 +13716,10 @@ function Lc(e, t) {
 						return q(t);
 					},
 					get arrival() {
-						return q(Le).arrival;
+						return q(ze).arrival;
 					},
 					get departure() {
-						return q(Le).departure;
+						return q(ze).departure;
 					},
 					get lang() {
 						return q(ne);
@@ -13828,8 +13850,8 @@ function Lc(e, t) {
 					get host() {
 						return T;
 					},
-					onstatus: $e,
-					onstartover: Qe
+					onstatus: nt,
+					onstartover: tt
 				});
 			}
 		};
@@ -13844,7 +13866,7 @@ function Lc(e, t) {
 					return q(k);
 				},
 				get firstStep() {
-					return q(Re);
+					return q(N);
 				},
 				get sending() {
 					return q(we);
@@ -13861,17 +13883,17 @@ function Lc(e, t) {
 				get variant() {
 					return u();
 				},
-				onBack: Ye,
-				onNext: Ve
+				onBack: et,
+				onNext: We
 			});
 		}
 		X(e, t);
 	};
-	return Q(ot, (e) => {
-		D ? e(st) : e(ct, -1);
-	}), P(it), W(() => {
-		at = fi(it, 1, "sbw-root svelte-h0br6q", null, at, { "sbw-root--overlay": _() === "overlay" }), mi(it, `--sbw-map-h: ${(q(Oe) ? p() : "0px") ?? ""}; --sbw-map-gap: ${(q(Oe) ? h() : "0px") ?? ""};`);
-	}), X(e, tt), Ze(et);
+	return Q(lt, (e) => {
+		D ? e(ut) : e(dt, -1);
+	}), P(st), Ai(st, (e) => V(ke, e), () => q(ke)), W(() => {
+		ct = fi(st, 1, "sbw-root svelte-h0br6q", null, ct, { "sbw-root--overlay": _() === "overlay" }), mi(st, `--sbw-map-h: ${(q(je) ? p() : "0px") ?? ""}; --sbw-map-gap: ${(q(je) ? h() : "0px") ?? ""};`);
+	}), X(e, it), Ze(rt);
 }
 customElements.define("sidon-booking-widget", Ii(Lc, {
 	marina: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgebuild/sidon-booking-widget",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "Berth booking and berth map custom elements for marinas on OTA, plus an Astro forwarder route and server client.",
   "type": "module",
   "license": "UNLICENSED",