@protobase/ui 0.12.17 → 0.12.19

package/dist/app/map/map-section.js

@@ -0,0 +1,38 @@
+import { useAdminMeta } from "../meta-gate.js";
+import { Section } from "../../record-view/section.js";
+import { SidebarCard } from "../../record-view/record-sidebar.js";
+import { recordPosition } from "./record-position.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/app/map/map-section.tsx
+const RecordMap = lazy(() => import("./record-map.js").then((module) => ({ default: module.RecordMap })));
+const defaultZoom = 15;
+/**
+* A map of the record's position (`l.map`), in a section or a sidebar card under its title, drawn with the map style
+* `/meta` names. Without a style, or for a record without a position, there is nothing to draw and no section.
+*/
+const MapSection = ({ item, record }) => {
+	const style = useAdminMeta().maps?.style;
+	const position = recordPosition(record, item);
+	if (!style || !position) return null;
+	const map = /* @__PURE__ */ jsx("div", {
+		className: `overflow-hidden rounded-lg border border-border bg-muted ${item.sidebar ? "h-48" : "h-64 md:h-80"}`,
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(RecordMap, {
+				style,
+				position,
+				zoom: item.zoom ?? defaultZoom
+			}, `${position.latitude},${position.longitude}`)
+		})
+	});
+	return item.sidebar ? /* @__PURE__ */ jsx(SidebarCard, {
+		title: item.title,
+		children: map
+	}) : /* @__PURE__ */ jsx(Section, {
+		title: item.title,
+		children: map
+	});
+};
+//#endregion
+export { MapSection };

package/dist/app/map/record-map.js

@@ -0,0 +1,39 @@
+import { MapPin } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as maplibre from "maplibre-gl";
+import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { Protocol } from "pmtiles";
+import { Map, Marker, NavigationControl } from "react-map-gl/maplibre";
+//#region src/app/map/record-map.tsx
+maplibre.setWorkerUrl(workerUrl);
+maplibre.addProtocol("pmtiles", new Protocol().tile);
+/**
+* A map of `style` centred on `position` at `zoom`, with a pin on it. It pans and zooms with two fingers on a phone and
+* with Ctrl or Cmd and the wheel, so scrolling the page past it does not move it.
+*/
+const RecordMap = ({ style, position, zoom }) => /* @__PURE__ */ jsxs(Map, {
+	mapLib: maplibre,
+	mapStyle: style,
+	initialViewState: {
+		...position,
+		zoom
+	},
+	cooperativeGestures: true,
+	style: {
+		width: "100%",
+		height: "100%"
+	},
+	children: [/* @__PURE__ */ jsx(NavigationControl, { showCompass: false }), /* @__PURE__ */ jsx(Marker, {
+		latitude: position.latitude,
+		longitude: position.longitude,
+		anchor: "bottom",
+		children: /* @__PURE__ */ jsx(MapPin, {
+			"aria-hidden": true,
+			className: "size-8 fill-primary text-primary-foreground drop-shadow",
+			strokeWidth: 1.5
+		})
+	})]
+});
+//#endregion
+export { RecordMap };

package/dist/app/map/record-position.js

@@ -0,0 +1,19 @@
+//#region src/app/map/record-position.ts
+const degrees = (value) => {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string" || value.trim() === "") return void 0;
+	return Number(value);
+};
+/** The record's position from its two fields, when both hold degrees on the globe; none otherwise, so no map is drawn. */
+const recordPosition = (record, fields) => {
+	const latitude = degrees(record[fields.latitude]);
+	const longitude = degrees(record[fields.longitude]);
+	if (latitude === void 0 || longitude === void 0) return void 0;
+	if (!(Math.abs(latitude) <= 90 && Math.abs(longitude) <= 180)) return void 0;
+	return {
+		latitude,
+		longitude
+	};
+};
+//#endregion
+export { recordPosition };

package/dist/app/record-page.js

@@ -26,6 +26,7 @@ import { useRestore } from "./delete/use-restore.js";
 import { ValueBadge } from "./value-badge.js";
 import { auditField } from "../live/audit-fields.js";
 import { CustomSection } from "./custom-section.js";
+import { MapSection } from "./map/map-section.js";
 import { RecordActions } from "./pages/record-actions.js";
 import { RecordLines, findLinesResource } from "./record-lines.js";
 import { draftStorageKey } from "./draft-storage.js";
@@ -297,6 +298,10 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										item,
 										scope
 									}, `custom:${index}`)];
+									if (item.kind === "map") return item.sidebar ? [] : [/* @__PURE__ */ jsx(MapSection, {
+										item,
+										record: stored.record
+									}, `map:${index}`)];
 									if (item.kind !== "section") return [];
 									const fields = item.fields.filter((name) => model.fields[name] && visible(name));
 									if (fields.length === 0) return [];
@@ -323,10 +328,17 @@ const LoadedRecord = ({ model, recordKey, stored }) => {
 										recordKey
 									}),
 									firstSidebar === -1 && summary,
-									layout.map((item, index) => item.kind === "custom" && item.sidebar ? /* @__PURE__ */ jsx(CustomSection, {
-										item,
-										scope
-									}, `custom:${index}`) : index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null),
+									layout.map((item, index) => {
+										if (item.kind === "custom" && item.sidebar) return /* @__PURE__ */ jsx(CustomSection, {
+											item,
+											scope
+										}, `custom:${index}`);
+										if (item.kind === "map" && item.sidebar) return /* @__PURE__ */ jsx(MapSection, {
+											item,
+											record: stored.record
+										}, `map:${index}`);
+										return index === firstSidebar ? /* @__PURE__ */ jsx(Fragment, { children: summary }, "summary") : null;
+									}),
 									/* @__PURE__ */ jsx(MetadataCard, {
 										title: "Details",
 										rows: [auditField(model, "created"), updatedAt].flatMap((name) => {

package/dist/data/meta-data.d.ts

@@ -25,6 +25,10 @@ export type MetaData = {
     dsn: string;
     environment?: string;
   };
+  /** The map style the record page's maps are drawn with, when the app has one (see `MapSection`). */
+  maps?: {
+    style: string;
+  };
   /** The plugins the app loads for the user (see `PluginGate`). */
   plugins?: PluginRef[];
   /** The other APIs the app draws resources from for the user, and how far their `/meta` has loaded (see `withSources`). */

package/dist/data/use-meta.js

@@ -35,6 +35,7 @@ const useMeta = () => {
 				...result.meta.assistant && { assistant: result.meta.assistant },
 				...result.meta.runtime && { runtime: result.meta.runtime },
 				...result.meta.errorReporting && { errorReporting: result.meta.errorReporting },
+				...result.meta.maps && { maps: result.meta.maps },
 				...result.meta.plugins && { plugins: result.meta.plugins },
 				...result.meta.sources && { sources: result.meta.sources.map((source) => ({
 					source,

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.12.17";
+var version = "0.12.19";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };