@object-ui/plugin-map 11.3.0 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @object-ui/plugin-map
 
+## 11.5.0
+
+### Patch Changes
+
+- Updated dependencies [6fffd3d]
+- Updated dependencies [9255686]
+- Updated dependencies [fae75e2]
+- Updated dependencies [1072701]
+  - @object-ui/react@11.5.0
+  - @object-ui/components@11.5.0
+  - @object-ui/types@11.5.0
+  - @object-ui/core@11.5.0
+
+## 11.4.0
+
+### Patch Changes
+
+- Updated dependencies [8bf6295]
+- Updated dependencies [1948c5b]
+- Updated dependencies [bce581a]
+- Updated dependencies [c38d107]
+- Updated dependencies [7782698]
+- Updated dependencies [e84d64d]
+  - @object-ui/types@11.4.0
+  - @object-ui/components@11.4.0
+  - @object-ui/core@11.4.0
+  - @object-ui/react@11.4.0
+
 ## 11.3.0
 
 ### Patch Changes

package/dist/ObjectMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAQ/E,OAAO,kCAAkC,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwOD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2c9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ObjectMap.d.ts","sourceRoot":"","sources":["../src/ObjectMap.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAY,MAAM,kBAAkB,CAAC;AAQ/E,OAAO,kCAAkC,CAAC;AAqB1C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAkPD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4d9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/index.js

@@ -1,22 +1,23 @@
 import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
 import { ComponentRegistry as a, buildExpandFields as o, extractRecords as s } from "@object-ui/core";
 import { useNavigationOverlay as ee, useSchemaContext as c } from "@object-ui/react";
-import { NavigationOverlay as te, cn as l, useIsMobile as u } from "@object-ui/components";
-import { z as d } from "zod";
-import ne, { Marker as f, NavigationControl as re, Popup as p } from "react-map-gl/maplibre";
+import { NavigationOverlay as te, cn as l, useIsMobile as ne } from "@object-ui/components";
+import { z as u } from "zod";
+import d, { Marker as f, NavigationControl as re, Popup as ie } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/ObjectMap.tsx
-var g = d.object({
-	latitudeField: d.string().optional(),
-	longitudeField: d.string().optional(),
-	locationField: d.string().optional(),
-	titleField: d.string().optional(),
-	descriptionField: d.string().optional(),
-	zoom: d.number().optional(),
-	center: d.tuple([d.number(), d.number()]).optional()
-});
-function ie(e) {
+var h = u.object({
+	latitudeField: u.string().optional(),
+	longitudeField: u.string().optional(),
+	locationField: u.string().optional(),
+	titleField: u.string().optional(),
+	descriptionField: u.string().optional(),
+	zoom: u.number().optional(),
+	center: u.tuple([u.number(), u.number()]).optional(),
+	style: u.string().optional()
+}), ae = "https://demotiles.maplibre.org/style.json";
+function g(e) {
 	return e.data ? e.data : e.staticData ? {
 		provider: "value",
 		items: e.staticData
@@ -25,7 +26,7 @@ function ie(e) {
 		object: e.objectName
 	} : null;
 }
-function _(e) {
+function oe(e) {
 	if (e) {
 		if (typeof e == "string") {
 			let t = e.split(" "), n = t[0], r = t[1]?.toLowerCase() === "desc" ? "desc" : "asc";
@@ -34,7 +35,8 @@ function _(e) {
 		if (Array.isArray(e)) return e.reduce((e, t) => (t.field && t.order && (e[t.field] = t.order), e), {});
 	}
 }
-function v(e) {
+function _(e) {
+	let t = e.style || e.mapStyle || e.filter?.map?.style || e.map?.style;
 	if (e.locationField || e.latitudeField) return {
 		locationField: e.locationField,
 		latitudeField: e.latitudeField,
@@ -42,12 +44,16 @@ function v(e) {
 		titleField: e.titleField || "name",
 		descriptionField: e.descriptionField,
 		zoom: e.zoom,
-		center: e.center
+		center: e.center,
+		style: t
 	};
-	let t = null;
-	if (e.filter && typeof e.filter == "object" && "map" in e.filter ? t = e.filter.map : e.map && (t = e.map), t) {
-		let e = g.safeParse(t);
-		return e.success || console.warn("[ObjectMap] Invalid map configuration:", e.error.format()), t;
+	let n = null;
+	if (e.filter && typeof e.filter == "object" && "map" in e.filter ? n = e.filter.map : e.map && (n = e.map), n) {
+		let e = h.safeParse(n);
+		return e.success || console.warn("[ObjectMap] Invalid map configuration:", e.error.format()), {
+			...n,
+			style: n.style || t
+		};
 	}
 	return {
 		latitudeField: "latitude",
@@ -56,10 +62,11 @@ function v(e) {
 		titleField: "name",
 		descriptionField: "description",
 		zoom: 10,
-		center: [0, 0]
+		center: [0, 0],
+		style: t
 	};
 }
-function y(e, t) {
+function v(e, t) {
 	if (t.latitudeField && t.longitudeField) {
 		let n = e[t.latitudeField], r = e[t.longitudeField];
 		if (typeof n == "number" && typeof r == "number") return [n, r];
@@ -81,7 +88,7 @@ function y(e, t) {
 	}
 	return null;
 }
-function ae(e, t, n = 50) {
+function se(e, t, n = 50) {
 	if (e.length <= 1 || t >= 15) return e.map((e) => ({
 		id: e.id,
 		coordinates: e.coordinates,
@@ -112,20 +119,22 @@ function ae(e, t, n = 50) {
 		}
 	}), a;
 }
-var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick: b, onEdit: x, onDelete: S, enableClustering: C, clusterRadius: w = 50, ...T }) => {
-	let [E, D] = i([]), [oe, O] = i(!0), [k, A] = i(null), [j, M] = i(null), [N, P] = i(null), [F, se] = i(""), I = u(), L = r(null), [R, ce] = i(null), [z, B] = i(null), [V, H] = i(!1), U = e(() => {
+var y = ({ schema: a, dataSource: c, className: u, onMarkerClick: h, onRowClick: y, onEdit: b, onDelete: x, enableClustering: S, clusterRadius: C = 50, ...w }) => {
+	let [T, E] = i([]), [ce, D] = i(!0), [O, k] = i(null), [A, j] = i(null), [M, N] = i(null), [P, le] = i(""), F = ne(), I = r(null), [L, R] = i(null), [z, B] = i(null), [V, H] = i(!1), [U, ue] = i(null), de = e((e) => {
+		ue(e?.error?.message || "Failed to load the map style/tiles.");
+	}, []), fe = e(() => {
 		if (typeof navigator > "u" || !navigator.geolocation) {
 			B("Geolocation is not available in this browser.");
 			return;
 		}
 		H(!0), B(null), navigator.geolocation.getCurrentPosition((e) => {
 			let { longitude: t, latitude: n } = e.coords;
-			ce({
+			R({
 				lng: t,
 				lat: n
 			}), H(!1);
 			try {
-				L.current?.flyTo({
+				I.current?.flyTo({
 					center: [t, n],
 					zoom: 12,
 					duration: 800
@@ -138,40 +147,40 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 			timeout: 8e3,
 			maximumAge: 6e4
 		});
-	}, []), W = ie(a), G = n(() => W, [JSON.stringify(W)]), K = v(a), q = G?.provider === "value";
+	}, []), W = g(a), G = n(() => W, [JSON.stringify(W)]), K = _(a), q = G?.provider === "value";
 	t(() => {
 		(async () => {
 			try {
-				if (O(!0), T.data) {
-					let e = T.data;
+				if (D(!0), w.data) {
+					let e = w.data;
 					if (Array.isArray(e)) {
-						D(e), O(!1);
+						E(e), D(!1);
 						return;
 					}
 				}
 				if (a.data) {
 					let e = a.data;
 					if (Array.isArray(e)) {
-						D(e), O(!1);
+						E(e), D(!1);
 						return;
 					}
 				}
 				if (q && G?.provider === "value") {
-					D(G.items), O(!1);
+					E(G.items), D(!1);
 					return;
 				}
 				if (!c || typeof c.find != "function") throw Error("DataSource required for object/api providers");
 				if (G?.provider === "object") {
-					let e = G.object, t = o(j?.fields);
-					D(s(await c.find(e, {
+					let e = G.object, t = o(A?.fields);
+					E(s(await c.find(e, {
 						$filter: a.filter,
-						$orderby: _(a.sort),
+						$orderby: oe(a.sort),
 						...t.length > 0 ? { $expand: t } : {}
 					})));
-				} else G?.provider === "api" && (console.warn("API provider not yet implemented for ObjectMap"), D([]));
-				O(!1);
+				} else G?.provider === "api" && (console.warn("API provider not yet implemented for ObjectMap"), E([]));
+				D(!1);
 			} catch (e) {
-				A(e), O(!1);
+				k(e), D(!1);
 			}
 		})();
 	}, [
@@ -180,14 +189,14 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 		q,
 		a.filter,
 		a.sort,
-		j
+		A
 	]), t(() => {
 		!q && c && (async () => {
 			try {
 				if (!c) return;
 				let e = G?.provider === "object" ? G.object : a.objectName;
 				if (!e) return;
-				M(await c.getObjectSchema(e));
+				j(await c.getObjectSchema(e));
 			} catch (e) {
 				console.error("Failed to fetch object schema:", e);
 			}
@@ -201,8 +210,8 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 	let { markers: J, invalidCount: Y } = n(() => {
 		let e = 0;
 		return {
-			markers: E.map((t, n) => {
-				let r = y(t, K);
+			markers: T.map((t, n) => {
+				let r = v(t, K);
 				if (!r) return e++, null;
 				let i = K.titleField ? t[K.titleField] : "Marker", a = K.descriptionField ? t[K.descriptionField] : void 0, [o, s] = r;
 				return !isFinite(o) || !isFinite(s) || o < -90 || o > 90 || s < -180 || s > 180 ? (e++, null) : {
@@ -215,15 +224,15 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 			}).filter((e) => e !== null),
 			invalidCount: e
 		};
-	}, [E, K]), X = n(() => J.find((e) => e.id === N), [J, N]), [Z, le] = i(K.zoom || 3), Q = ee({
+	}, [T, K]), X = n(() => J.find((e) => e.id === M), [J, M]), [Z, pe] = i(K.zoom || 3), Q = ee({
 		navigation: a.navigation,
 		objectName: a.objectName,
-		onRowClick: b
+		onRowClick: y
 	}), $ = n(() => {
-		if (!F.trim()) return J;
-		let e = F.toLowerCase();
+		if (!P.trim()) return J;
+		let e = P.toLowerCase();
 		return J.filter((t) => t.title?.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e));
-	}, [J, F]), ue = n(() => C ?? (a.enableClustering || $.length > 100) ? ae($, Z, w) : $.map((e) => ({
+	}, [J, P]), me = n(() => S ?? (a.enableClustering || $.length > 100) ? se($, Z, C) : $.map((e) => ({
 		id: e.id,
 		coordinates: e.coordinates,
 		markers: [e],
@@ -231,10 +240,10 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 	})), [
 		$,
 		Z,
+		S,
 		C,
-		w,
 		a
-	]), de = n(() => {
+	]), he = n(() => {
 		if (!$.length) return {
 			longitude: K.center?.[1] || 0,
 			latitude: K.center?.[0] || 0,
@@ -247,87 +256,99 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 			zoom: K.zoom || 3
 		};
 	}, [$, K]);
-	return oe ? /* @__PURE__ */ m("div", {
-		className: l("min-w-0 overflow-hidden", d),
-		children: /* @__PURE__ */ m("div", {
+	return ce ? /* @__PURE__ */ p("div", {
+		className: l("min-w-0 overflow-hidden", u),
+		children: /* @__PURE__ */ p("div", {
 			className: "flex items-center justify-center h-96 bg-muted rounded-lg border",
-			children: /* @__PURE__ */ m("div", {
+			children: /* @__PURE__ */ p("div", {
 				className: "text-muted-foreground",
 				children: "Loading map..."
 			})
 		})
-	}) : k ? /* @__PURE__ */ m("div", {
-		className: l("min-w-0 overflow-hidden", d),
-		children: /* @__PURE__ */ m("div", {
+	}) : O ? /* @__PURE__ */ p("div", {
+		className: l("min-w-0 overflow-hidden", u),
+		children: /* @__PURE__ */ p("div", {
 			className: "flex items-center justify-center h-96 bg-muted rounded-lg border",
-			children: /* @__PURE__ */ h("div", {
+			children: /* @__PURE__ */ m("div", {
 				className: "text-destructive",
-				children: ["Error: ", k.message]
+				children: ["Error: ", O.message]
 			})
 		})
-	}) : /* @__PURE__ */ h("div", {
-		className: l("min-w-0 overflow-hidden", d),
+	}) : /* @__PURE__ */ m("div", {
+		className: l("min-w-0 overflow-hidden", u),
 		children: [
-			Y > 0 && /* @__PURE__ */ m("div", {
+			Y > 0 && /* @__PURE__ */ p("div", {
 				className: "mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded",
 				children: `${Y} record${Y === 1 ? "" : "s"} with missing or invalid coordinates excluded from the map.`
 			}),
-			J.length > 0 && /* @__PURE__ */ m("div", {
+			J.length > 0 && /* @__PURE__ */ p("div", {
 				className: "mb-2",
-				children: /* @__PURE__ */ m("input", {
+				children: /* @__PURE__ */ p("input", {
 					type: "text",
-					value: F,
-					onChange: (e) => se(e.target.value),
+					value: P,
+					onChange: (e) => le(e.target.value),
 					placeholder: "Search locations…",
 					className: "w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
 				})
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full",
 				children: [
-					/* @__PURE__ */ h(ne, {
+					/* @__PURE__ */ m(d, {
 						ref: (e) => {
-							L.current = e;
+							I.current = e;
 						},
-						initialViewState: de,
+						initialViewState: he,
 						style: {
 							width: "100%",
 							height: "100%"
 						},
-						mapStyle: "https://demotiles.maplibre.org/style.json",
+						mapStyle: K.style || ae,
 						touchZoomRotate: !0,
 						dragRotate: !0,
 						touchPitch: !0,
-						onZoom: (e) => le(Math.round(e.viewState.zoom)),
+						onZoom: (e) => pe(Math.round(e.viewState.zoom)),
+						onError: de,
 						children: [
-							/* @__PURE__ */ m(re, {
+							U && /* @__PURE__ */ m("div", {
+								role: "alert",
+								className: "absolute inset-x-0 top-0 z-20 p-2 text-sm text-center text-amber-900 bg-amber-50 border-b border-amber-200",
+								children: [
+									"Map failed to load (",
+									U,
+									"). Markers below are still listed in the search box;",
+									" ",
+									K.style ? "check the configured map style URL." : "configure a custom map style for production use."
+								]
+							}),
+							/* @__PURE__ */ p(re, {
 								position: "top-right",
 								showCompass: !0,
 								showZoom: !0
 							}),
-							/* @__PURE__ */ m("button", {
+							/* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: U,
+								onClick: fe,
 								disabled: V,
 								className: "absolute top-2 left-2 z-10 inline-flex items-center justify-center size-9 rounded-md bg-background/95 border shadow-sm hover:bg-background disabled:opacity-50",
 								"aria-label": "Show my location",
 								"data-testid": "map-geolocate",
-								children: /* @__PURE__ */ m("span", {
+								children: /* @__PURE__ */ p("span", {
 									"aria-hidden": "true",
 									children: V ? "⏳" : "🧭"
 								})
 							}),
-							R && /* @__PURE__ */ m(f, {
-								longitude: R.lng,
-								latitude: R.lat,
+							L && /* @__PURE__ */ p(f, {
+								longitude: L.lng,
+								latitude: L.lat,
 								anchor: "center",
-								children: /* @__PURE__ */ m("div", {
+								children: /* @__PURE__ */ p("div", {
 									className: "size-3 rounded-full bg-blue-500 ring-4 ring-blue-500/30 shadow",
 									"aria-label": "Your location",
 									"data-testid": "map-user-location"
 								})
 							}),
-							ue.map((e) => e.isCluster ? /* @__PURE__ */ m(f, {
+							me.map((e) => e.isCluster ? /* @__PURE__ */ p(f, {
 								longitude: e.coordinates[0],
 								latitude: e.coordinates[1],
 								anchor: "center",
@@ -335,14 +356,14 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 									t.originalEvent.stopPropagation();
 									try {
 										let t = Math.min(20, Math.max(Z + 2, 8));
-										L.current?.flyTo({
+										I.current?.flyTo({
 											center: [e.coordinates[0], e.coordinates[1]],
 											zoom: t,
 											duration: 600
 										});
 									} catch {}
 								},
-								children: /* @__PURE__ */ m("div", {
+								children: /* @__PURE__ */ p("div", {
 									className: "flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md",
 									style: {
 										width: Math.min(48, 24 + e.markers.length * 2),
@@ -352,46 +373,46 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 									"data-testid": "map-cluster",
 									children: e.markers.length
 								})
-							}, e.id) : /* @__PURE__ */ m(f, {
+							}, e.id) : /* @__PURE__ */ p(f, {
 								longitude: e.coordinates[0],
 								latitude: e.coordinates[1],
 								anchor: "bottom",
 								onClick: (t) => {
 									t.originalEvent.stopPropagation();
 									let n = e.markers[0];
-									P(n.id), Q.handleClick(n.data), g?.(n.data);
+									N(n.id), Q.handleClick(n.data), h?.(n.data);
 								},
-								children: /* @__PURE__ */ m("div", {
+								children: /* @__PURE__ */ p("div", {
 									className: "text-2xl cursor-pointer hover:scale-110 transition-transform",
 									children: "📍"
 								})
 							}, e.id)),
-							X && !I && /* @__PURE__ */ m(p, {
+							X && !F && /* @__PURE__ */ p(ie, {
 								longitude: X.coordinates[0],
 								latitude: X.coordinates[1],
 								anchor: "top",
-								onClose: () => P(null),
+								onClose: () => N(null),
 								closeOnClick: !1,
-								children: /* @__PURE__ */ h("div", {
+								children: /* @__PURE__ */ m("div", {
 									className: "p-2 min-w-[150px] sm:min-w-[200px]",
 									children: [
-										/* @__PURE__ */ m("h3", {
+										/* @__PURE__ */ p("h3", {
 											className: "font-bold text-sm mb-1",
 											children: X.title
 										}),
-										X.description && /* @__PURE__ */ m("p", {
+										X.description && /* @__PURE__ */ p("p", {
 											className: "text-xs text-muted-foreground",
 											children: X.description
 										}),
-										/* @__PURE__ */ h("div", {
+										/* @__PURE__ */ m("div", {
 											className: "mt-2 text-xs flex gap-2",
-											children: [x && /* @__PURE__ */ m("button", {
+											children: [b && /* @__PURE__ */ p("button", {
 												className: "text-blue-500 hover:underline",
-												onClick: () => x(X.data),
+												onClick: () => b(X.data),
 												children: "Edit"
-											}), S && /* @__PURE__ */ m("button", {
+											}), x && /* @__PURE__ */ p("button", {
 												className: "text-red-500 hover:underline",
-												onClick: () => S(X.data),
+												onClick: () => x(X.data),
 												children: "Delete"
 											})]
 										})
@@ -400,67 +421,67 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 							})
 						]
 					}),
-					X && I && /* @__PURE__ */ h("div", {
+					X && F && /* @__PURE__ */ m("div", {
 						className: "absolute inset-x-0 bottom-0 z-30 bg-background border-t shadow-lg rounded-t-2xl p-4 pb-[max(env(safe-area-inset-bottom),1rem)]",
 						role: "dialog",
 						"aria-label": "Location details",
 						"data-testid": "map-mobile-record-sheet",
 						children: [
-							/* @__PURE__ */ m("div", {
+							/* @__PURE__ */ p("div", {
 								className: "mx-auto mb-2 h-1 w-10 rounded-full bg-muted",
 								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex items-start justify-between gap-3",
-								children: [/* @__PURE__ */ h("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "min-w-0 flex-1",
-									children: [/* @__PURE__ */ m("h3", {
+									children: [/* @__PURE__ */ p("h3", {
 										className: "text-sm font-semibold truncate",
 										children: X.title
-									}), X.description && /* @__PURE__ */ m("p", {
+									}), X.description && /* @__PURE__ */ p("p", {
 										className: "mt-1 text-xs text-muted-foreground line-clamp-3",
 										children: X.description
 									})]
-								}), /* @__PURE__ */ m("button", {
+								}), /* @__PURE__ */ p("button", {
 									type: "button",
-									onClick: () => P(null),
+									onClick: () => N(null),
 									className: "text-muted-foreground hover:text-foreground text-lg leading-none px-2",
 									"aria-label": "Close details",
 									"data-testid": "map-mobile-record-close",
 									children: "×"
 								})]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "mt-3 flex flex-wrap gap-2 text-xs",
-								children: [x && /* @__PURE__ */ m("button", {
+								children: [b && /* @__PURE__ */ p("button", {
 									className: "px-3 py-1.5 rounded-md border bg-card hover:bg-accent",
-									onClick: () => x(X.data),
+									onClick: () => b(X.data),
 									children: "Edit"
-								}), S && /* @__PURE__ */ m("button", {
+								}), x && /* @__PURE__ */ p("button", {
 									className: "px-3 py-1.5 rounded-md border border-destructive/30 text-destructive hover:bg-destructive/10",
-									onClick: () => S(X.data),
+									onClick: () => x(X.data),
 									children: "Delete"
 								})]
 							})
 						]
 					}),
-					z && /* @__PURE__ */ m("div", {
+					z && /* @__PURE__ */ p("div", {
 						className: "absolute top-2 left-14 right-2 z-10 text-xs px-3 py-1.5 rounded-md bg-destructive/10 text-destructive border border-destructive/30",
 						children: z
 					})
 				]
 			}),
-			Q.isOverlay && /* @__PURE__ */ m(te, {
+			Q.isOverlay && /* @__PURE__ */ p(te, {
 				...Q,
 				title: "Location Details",
-				children: (e) => /* @__PURE__ */ m("div", {
+				children: (e) => /* @__PURE__ */ p("div", {
 					className: "space-y-3",
-					children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ h("div", {
+					children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ m("div", {
 						className: "flex flex-col",
-						children: [/* @__PURE__ */ m("span", {
+						children: [/* @__PURE__ */ p("span", {
 							className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
 							children: e.replace(/_/g, " ")
-						}), /* @__PURE__ */ m("span", {
+						}), /* @__PURE__ */ p("span", {
 							className: "text-sm",
 							children: String(t ?? "—")
 						})]
@@ -469,15 +490,15 @@ var b = ({ schema: a, dataSource: c, className: d, onMarkerClick: g, onRowClick:
 			})
 		]
 	});
-}, x = ({ schema: e, ...t }) => {
+}, b = ({ schema: e, ...t }) => {
 	let { dataSource: n } = c() || {};
-	return /* @__PURE__ */ m(b, {
+	return /* @__PURE__ */ p(y, {
 		schema: e,
 		dataSource: n,
 		...t
 	});
 };
-console.log("Registering object-map..."), a.register("object-map", x, {
+console.log("Registering object-map..."), a.register("object-map", b, {
 	namespace: "plugin-map",
 	label: "Object Map",
 	category: "view",
@@ -492,7 +513,7 @@ console.log("Registering object-map..."), a.register("object-map", x, {
 		label: "Map Config",
 		description: "latitudeField, longitudeField, titleField"
 	}]
-}), a.register("map", x, {
+}), a.register("map", b, {
 	namespace: "view",
 	label: "Map View",
 	category: "view",
@@ -509,4 +530,4 @@ console.log("Registering object-map..."), a.register("object-map", x, {
 	}]
 });
 //#endregion
-export { b as ObjectMap, x as ObjectMapRenderer };
+export { y as ObjectMap, b as ObjectMapRenderer };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/components"),require("zod"),require("react-map-gl/maplibre"),require("maplibre-gl/dist/maplibre-gl.css"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/react`,`@object-ui/components`,`zod`,`react-map-gl/maplibre`,`maplibre-gl/dist/maplibre-gl.css`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMap={},e.React,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIComponents,e.zod,e.react_map_gl_maplibre,e.maplibre_gl_dist_maplibre_gl_css,e.react_jsx_runtime))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e},g=(e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule?u(n,`default`,{value:e,enumerable:!0}):n,e));t=g(t,1),o=g(o,1);var _=a.z.object({latitudeField:a.z.string().optional(),longitudeField:a.z.string().optional(),locationField:a.z.string().optional(),titleField:a.z.string().optional(),descriptionField:a.z.string().optional(),zoom:a.z.number().optional(),center:a.z.tuple([a.z.number(),a.z.number()]).optional()});function v(e){return e.data?e.data:e.staticData?{provider:`value`,items:e.staticData}:e.objectName?{provider:`object`,object:e.objectName}:null}function y(e){if(e){if(typeof e==`string`){let t=e.split(` `),n=t[0],r=t[1]?.toLowerCase()===`desc`?`desc`:`asc`;return{[n]:r}}if(Array.isArray(e))return e.reduce((e,t)=>(t.field&&t.order&&(e[t.field]=t.order),e),{})}}function b(e){if(e.locationField||e.latitudeField)return{locationField:e.locationField,latitudeField:e.latitudeField,longitudeField:e.longitudeField,titleField:e.titleField||`name`,descriptionField:e.descriptionField,zoom:e.zoom,center:e.center};let t=null;if(e.filter&&typeof e.filter==`object`&&`map`in e.filter?t=e.filter.map:e.map&&(t=e.map),t){let e=_.safeParse(t);return e.success||console.warn(`[ObjectMap] Invalid map configuration:`,e.error.format()),t}return{latitudeField:`latitude`,longitudeField:`longitude`,locationField:`location`,titleField:`name`,descriptionField:`description`,zoom:10,center:[0,0]}}function x(e,t){if(t.latitudeField&&t.longitudeField){let n=e[t.latitudeField],r=e[t.longitudeField];if(typeof n==`number`&&typeof r==`number`)return[n,r]}if(t.locationField){let n=e[t.locationField];if(typeof n==`object`&&n){let e=n.lat||n.latitude,t=n.lng||n.lon||n.longitude;if(typeof e==`number`&&typeof t==`number`)return[e,t]}if(typeof n==`string`){let e=n.split(`,`).map(e=>parseFloat(e.trim()));if(e.length===2&&!isNaN(e[0])&&!isNaN(e[1]))return[e[0],e[1]]}if(Array.isArray(n)&&n.length===2){let e=parseFloat(n[0]),t=parseFloat(n[1]);if(!isNaN(e)&&!isNaN(t))return[e,t]}}return null}function S(e,t,n=50){if(e.length<=1||t>=15)return e.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1}));let r=n/2**t,i=new Map;e.forEach(e=>{let t=`${Math.floor(e.coordinates[0]/r)}:${Math.floor(e.coordinates[1]/r)}`;i.has(t)||i.set(t,[]),i.get(t).push(e)});let a=[];return i.forEach((e,t)=>{if(e.length===1)a.push({id:e[0].id,coordinates:e[0].coordinates,markers:e,isCluster:!1});else{let n=e.reduce((e,t)=>e+t.coordinates[0],0)/e.length,r=e.reduce((e,t)=>e+t.coordinates[1],0)/e.length;a.push({id:`cluster-${t}`,coordinates:[n,r],markers:e,isCluster:!0})}}),a}var C=({schema:e,dataSource:a,className:s,onMarkerClick:l,onRowClick:u,onEdit:d,onDelete:f,enableClustering:p,clusterRadius:m=50,...h})=>{let[g,_]=(0,t.useState)([]),[C,w]=(0,t.useState)(!0),[T,E]=(0,t.useState)(null),[D,O]=(0,t.useState)(null),[k,A]=(0,t.useState)(null),[j,M]=(0,t.useState)(``),N=(0,i.useIsMobile)(),P=(0,t.useRef)(null),[F,I]=(0,t.useState)(null),[L,R]=(0,t.useState)(null),[z,B]=(0,t.useState)(!1),V=(0,t.useCallback)(()=>{if(typeof navigator>`u`||!navigator.geolocation){R(`Geolocation is not available in this browser.`);return}B(!0),R(null),navigator.geolocation.getCurrentPosition(e=>{let{longitude:t,latitude:n}=e.coords;I({lng:t,lat:n}),B(!1);try{P.current?.flyTo({center:[t,n],zoom:12,duration:800})}catch{}},e=>{B(!1),R(e.message||`Unable to retrieve location.`)},{enableHighAccuracy:!1,timeout:8e3,maximumAge:6e4})},[]),H=v(e),U=(0,t.useMemo)(()=>H,[JSON.stringify(H)]),W=b(e),G=U?.provider===`value`;(0,t.useEffect)(()=>{(async()=>{try{if(w(!0),h.data){let e=h.data;if(Array.isArray(e)){_(e),w(!1);return}}if(e.data){let t=e.data;if(Array.isArray(t)){_(t),w(!1);return}}if(G&&U?.provider===`value`){_(U.items),w(!1);return}if(!a||typeof a.find!=`function`)throw Error(`DataSource required for object/api providers`);if(U?.provider===`object`){let t=U.object,r=(0,n.buildExpandFields)(D?.fields);_((0,n.extractRecords)(await a.find(t,{$filter:e.filter,$orderby:y(e.sort),...r.length>0?{$expand:r}:{}})))}else U?.provider===`api`&&(console.warn(`API provider not yet implemented for ObjectMap`),_([]));w(!1)}catch(e){E(e),w(!1)}})()},[U,a,G,e.filter,e.sort,D]),(0,t.useEffect)(()=>{!G&&a&&(async()=>{try{if(!a)return;let t=U?.provider===`object`?U.object:e.objectName;if(!t)return;O(await a.getObjectSchema(t))}catch(e){console.error(`Failed to fetch object schema:`,e)}})()},[e.objectName,a,G,U]);let{markers:K,invalidCount:q}=(0,t.useMemo)(()=>{let e=0;return{markers:g.map((t,n)=>{let r=x(t,W);if(!r)return e++,null;let i=W.titleField?t[W.titleField]:`Marker`,a=W.descriptionField?t[W.descriptionField]:void 0,[o,s]=r;return!isFinite(o)||!isFinite(s)||o<-90||o>90||s<-180||s>180?(e++,null):{id:t.id||t._id||`marker-${n}`,title:i,description:a,coordinates:[s,o],data:t}}).filter(e=>e!==null),invalidCount:e}},[g,W]),J=(0,t.useMemo)(()=>K.find(e=>e.id===k),[K,k]),[Y,X]=(0,t.useState)(W.zoom||3),Z=(0,r.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:u}),Q=(0,t.useMemo)(()=>{if(!j.trim())return K;let e=j.toLowerCase();return K.filter(t=>t.title?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))},[K,j]),$=(0,t.useMemo)(()=>p??(e.enableClustering||Q.length>100)?S(Q,Y,m):Q.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1})),[Q,Y,p,m,e]),ee=(0,t.useMemo)(()=>{if(!Q.length)return{longitude:W.center?.[1]||0,latitude:W.center?.[0]||0,zoom:W.zoom||2};let e=Q.map(e=>e.coordinates[0]),t=Q.map(e=>e.coordinates[1]),n=Math.min(...e),r=Math.max(...e),i=Math.min(...t),a=Math.max(...t);return{longitude:(n+r)/2,latitude:(i+a)/2,zoom:W.zoom||3}},[Q,W]);return C?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsx)(`div`,{className:`text-muted-foreground`,children:`Loading map...`})})}):T?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsxs)(`div`,{className:`text-destructive`,children:[`Error: `,T.message]})})}):(0,c.jsxs)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:[q>0&&(0,c.jsx)(`div`,{className:`mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded`,children:`${q} record${q===1?``:`s`} with missing or invalid coordinates excluded from the map.`}),K.length>0&&(0,c.jsx)(`div`,{className:`mb-2`,children:(0,c.jsx)(`input`,{type:`text`,value:j,onChange:e=>M(e.target.value),placeholder:`Search locations…`,className:`w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`})}),(0,c.jsxs)(`div`,{className:`relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full`,children:[(0,c.jsxs)(o.default,{ref:e=>{P.current=e},initialViewState:ee,style:{width:`100%`,height:`100%`},mapStyle:`https://demotiles.maplibre.org/style.json`,touchZoomRotate:!0,dragRotate:!0,touchPitch:!0,onZoom:e=>X(Math.round(e.viewState.zoom)),children:[(0,c.jsx)(o.NavigationControl,{position:`top-right`,showCompass:!0,showZoom:!0}),(0,c.jsx)(`button`,{type:`button`,onClick:V,disabled:z,className:`absolute top-2 left-2 z-10 inline-flex items-center justify-center size-9 rounded-md bg-background/95 border shadow-sm hover:bg-background disabled:opacity-50`,"aria-label":`Show my location`,"data-testid":`map-geolocate`,children:(0,c.jsx)(`span`,{"aria-hidden":`true`,children:z?`⏳`:`🧭`})}),F&&(0,c.jsx)(o.Marker,{longitude:F.lng,latitude:F.lat,anchor:`center`,children:(0,c.jsx)(`div`,{className:`size-3 rounded-full bg-blue-500 ring-4 ring-blue-500/30 shadow`,"aria-label":`Your location`,"data-testid":`map-user-location`})}),$.map(e=>e.isCluster?(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`center`,onClick:t=>{t.originalEvent.stopPropagation();try{let t=Math.min(20,Math.max(Y+2,8));P.current?.flyTo({center:[e.coordinates[0],e.coordinates[1]],zoom:t,duration:600})}catch{}},children:(0,c.jsx)(`div`,{className:`flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md`,style:{width:Math.min(48,24+e.markers.length*2),height:Math.min(48,24+e.markers.length*2)},title:`${e.markers.length} markers`,"data-testid":`map-cluster`,children:e.markers.length})},e.id):(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`bottom`,onClick:t=>{t.originalEvent.stopPropagation();let n=e.markers[0];A(n.id),Z.handleClick(n.data),l?.(n.data)},children:(0,c.jsx)(`div`,{className:`text-2xl cursor-pointer hover:scale-110 transition-transform`,children:`📍`})},e.id)),J&&!N&&(0,c.jsx)(o.Popup,{longitude:J.coordinates[0],latitude:J.coordinates[1],anchor:`top`,onClose:()=>A(null),closeOnClick:!1,children:(0,c.jsxs)(`div`,{className:`p-2 min-w-[150px] sm:min-w-[200px]`,children:[(0,c.jsx)(`h3`,{className:`font-bold text-sm mb-1`,children:J.title}),J.description&&(0,c.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:J.description}),(0,c.jsxs)(`div`,{className:`mt-2 text-xs flex gap-2`,children:[d&&(0,c.jsx)(`button`,{className:`text-blue-500 hover:underline`,onClick:()=>d(J.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{className:`text-red-500 hover:underline`,onClick:()=>f(J.data),children:`Delete`})]})]})})]}),J&&N&&(0,c.jsxs)(`div`,{className:`absolute inset-x-0 bottom-0 z-30 bg-background border-t shadow-lg rounded-t-2xl p-4 pb-[max(env(safe-area-inset-bottom),1rem)]`,role:`dialog`,"aria-label":`Location details`,"data-testid":`map-mobile-record-sheet`,children:[(0,c.jsx)(`div`,{className:`mx-auto mb-2 h-1 w-10 rounded-full bg-muted`,"aria-hidden":`true`}),(0,c.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`h3`,{className:`text-sm font-semibold truncate`,children:J.title}),J.description&&(0,c.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground line-clamp-3`,children:J.description})]}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>A(null),className:`text-muted-foreground hover:text-foreground text-lg leading-none px-2`,"aria-label":`Close details`,"data-testid":`map-mobile-record-close`,children:`×`})]}),(0,c.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2 text-xs`,children:[d&&(0,c.jsx)(`button`,{className:`px-3 py-1.5 rounded-md border bg-card hover:bg-accent`,onClick:()=>d(J.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{className:`px-3 py-1.5 rounded-md border border-destructive/30 text-destructive hover:bg-destructive/10`,onClick:()=>f(J.data),children:`Delete`})]})]}),L&&(0,c.jsx)(`div`,{className:`absolute top-2 left-14 right-2 z-10 text-xs px-3 py-1.5 rounded-md bg-destructive/10 text-destructive border border-destructive/30`,children:L})]}),Z.isOverlay&&(0,c.jsx)(i.NavigationOverlay,{...Z,title:`Location Details`,children:e=>(0,c.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,c.jsxs)(`div`,{className:`flex flex-col`,children:[(0,c.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,c.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},w=({schema:e,...t})=>{let{dataSource:n}=(0,r.useSchemaContext)()||{};return(0,c.jsx)(C,{schema:e,dataSource:n,...t})};console.log(`Registering object-map...`),n.ComponentRegistry.register(`object-map`,w,{namespace:`plugin-map`,label:`Object Map`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),n.ComponentRegistry.register(`map`,w,{namespace:`view`,label:`Map View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),e.ObjectMap=C,e.ObjectMapRenderer=w});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/components"),require("zod"),require("react-map-gl/maplibre"),require("maplibre-gl/dist/maplibre-gl.css"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/core`,`@object-ui/react`,`@object-ui/components`,`zod`,`react-map-gl/maplibre`,`maplibre-gl/dist/maplibre-gl.css`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginMap={},e.React,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIComponents,e.zod,e.react_map_gl_maplibre,e.maplibre_gl_dist_maplibre_gl_css,e.react_jsx_runtime))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e},g=(e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule?u(n,`default`,{value:e,enumerable:!0}):n,e));t=g(t,1),o=g(o,1);var _=a.z.object({latitudeField:a.z.string().optional(),longitudeField:a.z.string().optional(),locationField:a.z.string().optional(),titleField:a.z.string().optional(),descriptionField:a.z.string().optional(),zoom:a.z.number().optional(),center:a.z.tuple([a.z.number(),a.z.number()]).optional(),style:a.z.string().optional()}),ee=`https://demotiles.maplibre.org/style.json`;function te(e){return e.data?e.data:e.staticData?{provider:`value`,items:e.staticData}:e.objectName?{provider:`object`,object:e.objectName}:null}function v(e){if(e){if(typeof e==`string`){let t=e.split(` `),n=t[0],r=t[1]?.toLowerCase()===`desc`?`desc`:`asc`;return{[n]:r}}if(Array.isArray(e))return e.reduce((e,t)=>(t.field&&t.order&&(e[t.field]=t.order),e),{})}}function y(e){let t=e.style||e.mapStyle||e.filter?.map?.style||e.map?.style;if(e.locationField||e.latitudeField)return{locationField:e.locationField,latitudeField:e.latitudeField,longitudeField:e.longitudeField,titleField:e.titleField||`name`,descriptionField:e.descriptionField,zoom:e.zoom,center:e.center,style:t};let n=null;if(e.filter&&typeof e.filter==`object`&&`map`in e.filter?n=e.filter.map:e.map&&(n=e.map),n){let e=_.safeParse(n);return e.success||console.warn(`[ObjectMap] Invalid map configuration:`,e.error.format()),{...n,style:n.style||t}}return{latitudeField:`latitude`,longitudeField:`longitude`,locationField:`location`,titleField:`name`,descriptionField:`description`,zoom:10,center:[0,0],style:t}}function b(e,t){if(t.latitudeField&&t.longitudeField){let n=e[t.latitudeField],r=e[t.longitudeField];if(typeof n==`number`&&typeof r==`number`)return[n,r]}if(t.locationField){let n=e[t.locationField];if(typeof n==`object`&&n){let e=n.lat||n.latitude,t=n.lng||n.lon||n.longitude;if(typeof e==`number`&&typeof t==`number`)return[e,t]}if(typeof n==`string`){let e=n.split(`,`).map(e=>parseFloat(e.trim()));if(e.length===2&&!isNaN(e[0])&&!isNaN(e[1]))return[e[0],e[1]]}if(Array.isArray(n)&&n.length===2){let e=parseFloat(n[0]),t=parseFloat(n[1]);if(!isNaN(e)&&!isNaN(t))return[e,t]}}return null}function x(e,t,n=50){if(e.length<=1||t>=15)return e.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1}));let r=n/2**t,i=new Map;e.forEach(e=>{let t=`${Math.floor(e.coordinates[0]/r)}:${Math.floor(e.coordinates[1]/r)}`;i.has(t)||i.set(t,[]),i.get(t).push(e)});let a=[];return i.forEach((e,t)=>{if(e.length===1)a.push({id:e[0].id,coordinates:e[0].coordinates,markers:e,isCluster:!1});else{let n=e.reduce((e,t)=>e+t.coordinates[0],0)/e.length,r=e.reduce((e,t)=>e+t.coordinates[1],0)/e.length;a.push({id:`cluster-${t}`,coordinates:[n,r],markers:e,isCluster:!0})}}),a}var S=({schema:e,dataSource:a,className:s,onMarkerClick:l,onRowClick:u,onEdit:d,onDelete:f,enableClustering:p,clusterRadius:m=50,...h})=>{let[g,_]=(0,t.useState)([]),[S,C]=(0,t.useState)(!0),[w,T]=(0,t.useState)(null),[E,D]=(0,t.useState)(null),[O,k]=(0,t.useState)(null),[A,j]=(0,t.useState)(``),M=(0,i.useIsMobile)(),N=(0,t.useRef)(null),[P,F]=(0,t.useState)(null),[I,L]=(0,t.useState)(null),[R,z]=(0,t.useState)(!1),[B,V]=(0,t.useState)(null),ne=(0,t.useCallback)(e=>{V(e?.error?.message||`Failed to load the map style/tiles.`)},[]),H=(0,t.useCallback)(()=>{if(typeof navigator>`u`||!navigator.geolocation){L(`Geolocation is not available in this browser.`);return}z(!0),L(null),navigator.geolocation.getCurrentPosition(e=>{let{longitude:t,latitude:n}=e.coords;F({lng:t,lat:n}),z(!1);try{N.current?.flyTo({center:[t,n],zoom:12,duration:800})}catch{}},e=>{z(!1),L(e.message||`Unable to retrieve location.`)},{enableHighAccuracy:!1,timeout:8e3,maximumAge:6e4})},[]),U=te(e),W=(0,t.useMemo)(()=>U,[JSON.stringify(U)]),G=y(e),K=W?.provider===`value`;(0,t.useEffect)(()=>{(async()=>{try{if(C(!0),h.data){let e=h.data;if(Array.isArray(e)){_(e),C(!1);return}}if(e.data){let t=e.data;if(Array.isArray(t)){_(t),C(!1);return}}if(K&&W?.provider===`value`){_(W.items),C(!1);return}if(!a||typeof a.find!=`function`)throw Error(`DataSource required for object/api providers`);if(W?.provider===`object`){let t=W.object,r=(0,n.buildExpandFields)(E?.fields);_((0,n.extractRecords)(await a.find(t,{$filter:e.filter,$orderby:v(e.sort),...r.length>0?{$expand:r}:{}})))}else W?.provider===`api`&&(console.warn(`API provider not yet implemented for ObjectMap`),_([]));C(!1)}catch(e){T(e),C(!1)}})()},[W,a,K,e.filter,e.sort,E]),(0,t.useEffect)(()=>{!K&&a&&(async()=>{try{if(!a)return;let t=W?.provider===`object`?W.object:e.objectName;if(!t)return;D(await a.getObjectSchema(t))}catch(e){console.error(`Failed to fetch object schema:`,e)}})()},[e.objectName,a,K,W]);let{markers:q,invalidCount:J}=(0,t.useMemo)(()=>{let e=0;return{markers:g.map((t,n)=>{let r=b(t,G);if(!r)return e++,null;let i=G.titleField?t[G.titleField]:`Marker`,a=G.descriptionField?t[G.descriptionField]:void 0,[o,s]=r;return!isFinite(o)||!isFinite(s)||o<-90||o>90||s<-180||s>180?(e++,null):{id:t.id||t._id||`marker-${n}`,title:i,description:a,coordinates:[s,o],data:t}}).filter(e=>e!==null),invalidCount:e}},[g,G]),Y=(0,t.useMemo)(()=>q.find(e=>e.id===O),[q,O]),[X,Z]=(0,t.useState)(G.zoom||3),Q=(0,r.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:u}),$=(0,t.useMemo)(()=>{if(!A.trim())return q;let e=A.toLowerCase();return q.filter(t=>t.title?.toLowerCase().includes(e)||t.description?.toLowerCase().includes(e))},[q,A]),re=(0,t.useMemo)(()=>p??(e.enableClustering||$.length>100)?x($,X,m):$.map(e=>({id:e.id,coordinates:e.coordinates,markers:[e],isCluster:!1})),[$,X,p,m,e]),ie=(0,t.useMemo)(()=>{if(!$.length)return{longitude:G.center?.[1]||0,latitude:G.center?.[0]||0,zoom:G.zoom||2};let e=$.map(e=>e.coordinates[0]),t=$.map(e=>e.coordinates[1]),n=Math.min(...e),r=Math.max(...e),i=Math.min(...t),a=Math.max(...t);return{longitude:(n+r)/2,latitude:(i+a)/2,zoom:G.zoom||3}},[$,G]);return S?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsx)(`div`,{className:`text-muted-foreground`,children:`Loading map...`})})}):w?(0,c.jsx)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:(0,c.jsx)(`div`,{className:`flex items-center justify-center h-96 bg-muted rounded-lg border`,children:(0,c.jsxs)(`div`,{className:`text-destructive`,children:[`Error: `,w.message]})})}):(0,c.jsxs)(`div`,{className:(0,i.cn)(`min-w-0 overflow-hidden`,s),children:[J>0&&(0,c.jsx)(`div`,{className:`mb-2 p-2 text-sm text-yellow-800 bg-yellow-50 border border-yellow-200 rounded`,children:`${J} record${J===1?``:`s`} with missing or invalid coordinates excluded from the map.`}),q.length>0&&(0,c.jsx)(`div`,{className:`mb-2`,children:(0,c.jsx)(`input`,{type:`text`,value:A,onChange:e=>j(e.target.value),placeholder:`Search locations…`,className:`w-full px-3 py-2 text-sm border rounded-md bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring`})}),(0,c.jsxs)(`div`,{className:`relative border rounded-lg overflow-hidden bg-muted h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] w-full`,children:[(0,c.jsxs)(o.default,{ref:e=>{N.current=e},initialViewState:ie,style:{width:`100%`,height:`100%`},mapStyle:G.style||ee,touchZoomRotate:!0,dragRotate:!0,touchPitch:!0,onZoom:e=>Z(Math.round(e.viewState.zoom)),onError:ne,children:[B&&(0,c.jsxs)(`div`,{role:`alert`,className:`absolute inset-x-0 top-0 z-20 p-2 text-sm text-center text-amber-900 bg-amber-50 border-b border-amber-200`,children:[`Map failed to load (`,B,`). Markers below are still listed in the search box;`,` `,G.style?`check the configured map style URL.`:`configure a custom map style for production use.`]}),(0,c.jsx)(o.NavigationControl,{position:`top-right`,showCompass:!0,showZoom:!0}),(0,c.jsx)(`button`,{type:`button`,onClick:H,disabled:R,className:`absolute top-2 left-2 z-10 inline-flex items-center justify-center size-9 rounded-md bg-background/95 border shadow-sm hover:bg-background disabled:opacity-50`,"aria-label":`Show my location`,"data-testid":`map-geolocate`,children:(0,c.jsx)(`span`,{"aria-hidden":`true`,children:R?`⏳`:`🧭`})}),P&&(0,c.jsx)(o.Marker,{longitude:P.lng,latitude:P.lat,anchor:`center`,children:(0,c.jsx)(`div`,{className:`size-3 rounded-full bg-blue-500 ring-4 ring-blue-500/30 shadow`,"aria-label":`Your location`,"data-testid":`map-user-location`})}),re.map(e=>e.isCluster?(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`center`,onClick:t=>{t.originalEvent.stopPropagation();try{let t=Math.min(20,Math.max(X+2,8));N.current?.flyTo({center:[e.coordinates[0],e.coordinates[1]],zoom:t,duration:600})}catch{}},children:(0,c.jsx)(`div`,{className:`flex items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xs cursor-pointer hover:scale-110 transition-transform shadow-md`,style:{width:Math.min(48,24+e.markers.length*2),height:Math.min(48,24+e.markers.length*2)},title:`${e.markers.length} markers`,"data-testid":`map-cluster`,children:e.markers.length})},e.id):(0,c.jsx)(o.Marker,{longitude:e.coordinates[0],latitude:e.coordinates[1],anchor:`bottom`,onClick:t=>{t.originalEvent.stopPropagation();let n=e.markers[0];k(n.id),Q.handleClick(n.data),l?.(n.data)},children:(0,c.jsx)(`div`,{className:`text-2xl cursor-pointer hover:scale-110 transition-transform`,children:`📍`})},e.id)),Y&&!M&&(0,c.jsx)(o.Popup,{longitude:Y.coordinates[0],latitude:Y.coordinates[1],anchor:`top`,onClose:()=>k(null),closeOnClick:!1,children:(0,c.jsxs)(`div`,{className:`p-2 min-w-[150px] sm:min-w-[200px]`,children:[(0,c.jsx)(`h3`,{className:`font-bold text-sm mb-1`,children:Y.title}),Y.description&&(0,c.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:Y.description}),(0,c.jsxs)(`div`,{className:`mt-2 text-xs flex gap-2`,children:[d&&(0,c.jsx)(`button`,{className:`text-blue-500 hover:underline`,onClick:()=>d(Y.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{className:`text-red-500 hover:underline`,onClick:()=>f(Y.data),children:`Delete`})]})]})})]}),Y&&M&&(0,c.jsxs)(`div`,{className:`absolute inset-x-0 bottom-0 z-30 bg-background border-t shadow-lg rounded-t-2xl p-4 pb-[max(env(safe-area-inset-bottom),1rem)]`,role:`dialog`,"aria-label":`Location details`,"data-testid":`map-mobile-record-sheet`,children:[(0,c.jsx)(`div`,{className:`mx-auto mb-2 h-1 w-10 rounded-full bg-muted`,"aria-hidden":`true`}),(0,c.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,c.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,c.jsx)(`h3`,{className:`text-sm font-semibold truncate`,children:Y.title}),Y.description&&(0,c.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground line-clamp-3`,children:Y.description})]}),(0,c.jsx)(`button`,{type:`button`,onClick:()=>k(null),className:`text-muted-foreground hover:text-foreground text-lg leading-none px-2`,"aria-label":`Close details`,"data-testid":`map-mobile-record-close`,children:`×`})]}),(0,c.jsxs)(`div`,{className:`mt-3 flex flex-wrap gap-2 text-xs`,children:[d&&(0,c.jsx)(`button`,{className:`px-3 py-1.5 rounded-md border bg-card hover:bg-accent`,onClick:()=>d(Y.data),children:`Edit`}),f&&(0,c.jsx)(`button`,{className:`px-3 py-1.5 rounded-md border border-destructive/30 text-destructive hover:bg-destructive/10`,onClick:()=>f(Y.data),children:`Delete`})]})]}),I&&(0,c.jsx)(`div`,{className:`absolute top-2 left-14 right-2 z-10 text-xs px-3 py-1.5 rounded-md bg-destructive/10 text-destructive border border-destructive/30`,children:I})]}),Q.isOverlay&&(0,c.jsx)(i.NavigationOverlay,{...Q,title:`Location Details`,children:e=>(0,c.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,c.jsxs)(`div`,{className:`flex flex-col`,children:[(0,c.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,c.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},C=({schema:e,...t})=>{let{dataSource:n}=(0,r.useSchemaContext)()||{};return(0,c.jsx)(S,{schema:e,dataSource:n,...t})};console.log(`Registering object-map...`),n.ComponentRegistry.register(`object-map`,C,{namespace:`plugin-map`,label:`Object Map`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),n.ComponentRegistry.register(`map`,C,{namespace:`view`,label:`Map View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`map`,type:`object`,label:`Map Config`,description:`latitudeField, longitudeField, titleField`}]}),e.ObjectMap=S,e.ObjectMapRenderer=C});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-map",
-  "version": "11.3.0",
+  "version": "11.5.0",
   "type": "module",
   "license": "MIT",
   "description": "Map visualization plugin for Object UI",
@@ -24,15 +24,15 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^11.2.0",
+    "@objectstack/spec": "^11.7.0",
     "lucide-react": "^1.22.0",
     "maplibre-gl": "^5.24.0",
     "react-map-gl": "^8.1.1",
     "zod": "^4.4.3",
-    "@object-ui/components": "11.3.0",
-    "@object-ui/core": "11.3.0",
-    "@object-ui/react": "11.3.0",
-    "@object-ui/types": "11.3.0"
+    "@object-ui/components": "11.5.0",
+    "@object-ui/core": "11.5.0",
+    "@object-ui/react": "11.5.0",
+    "@object-ui/types": "11.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",