- ${this.esc(p.emoji)}
+
+ // Dedup by name (keep most recent)
+ const byName = new Map();
+ for (const p of Object.values(state.participants)) {
+ const existing = byName.get(p.name);
+ if (!existing || new Date(p.lastSeen) > new Date(existing.lastSeen)) {
+ byName.set(p.name, p);
+ }
+ }
+ const entries = Array.from(byName.values());
+
+ const myLoc = state.participants[this.participantId]?.location;
+
+ const statusColors: Record = { online: "#22c55e", away: "#f59e0b", ghost: "#64748b", offline: "#ef4444" };
+
+ list.innerHTML = entries.map((p) => {
+ let distLabel = "";
+ if (myLoc && p.location && p.id !== this.participantId) {
+ distLabel = formatDistance(haversineDistance(myLoc.latitude, myLoc.longitude, p.location.latitude, p.location.longitude));
+ }
+ const statusColor = statusColors[p.status] || "#64748b";
+ return `
+
`;
+ }).join("");
- // Attach ping listeners
+ // Footer actions
+ list.insertAdjacentHTML("beforeend", `
+
+
- `).join("");
+ ${p.id !== this.participantId && p.location ? `` : ""}
+ ${p.id !== this.participantId ? `` : ""}
+
+ ${this.esc(p.emoji)}
+
+
-
- ${p.id !== this.participantId ? `` : ""}
- ${p.location ? "sharing location" : "no location"}
+
+ ${p.status === "ghost" ? "ghost mode" : p.location ? "sharing" : "no location"}
+ ${distLabel ? ` \u2022 ${distLabel}` : ""}
+
+
+
+
+ `);
+
+ // Attach listeners
list.querySelectorAll("[data-ping]").forEach((btn) => {
btn.addEventListener("click", () => {
const pid = (btn as HTMLElement).dataset.ping!;
@@ -1205,6 +1276,22 @@ class FolkMapViewer extends HTMLElement {
setTimeout(() => { (btn as HTMLElement).textContent = "\u{1F514}"; }, 2000);
});
});
+ list.querySelectorAll("[data-nav-participant]").forEach((btn) => {
+ btn.addEventListener("click", () => {
+ this.selectedParticipant = (btn as HTMLElement).dataset.navParticipant!;
+ this.selectedWaypoint = null;
+ this.renderNavigationPanel();
+ });
+ });
+ list.querySelector("#sidebar-meeting-btn")?.addEventListener("click", () => {
+ this.showMeetingModal = true;
+ this.renderMeetingPointModal();
+ });
+ list.querySelector("#sidebar-import-btn")?.addEventListener("click", () => {
+ this.showImportModal = true;
+ this.importStep = "upload";
+ this.renderImportModal();
+ });
}
private updateMarkerTheme() {
@@ -1220,16 +1307,41 @@ class FolkMapViewer extends HTMLElement {
}
}
+ private applyDarkFilter() {
+ const container = this.shadow.getElementById("map-container");
+ if (!container) return;
+ const canvas = container.querySelector("canvas");
+ if (canvas) {
+ canvas.style.filter = this.isDarkTheme() ? "invert(1) hue-rotate(180deg)" : "none";
+ } else {
+ // Canvas may not be ready yet — retry after tiles load
+ this.map?.once("load", () => {
+ const c = container.querySelector("canvas");
+ if (c) c.style.filter = this.isDarkTheme() ? "invert(1) hue-rotate(180deg)" : "none";
+ });
+ }
+ }
+
// ─── Location sharing ────────────────────────────────────────
+ private async checkGeoPermission() {
+ try {
+ const result = await navigator.permissions.query({ name: "geolocation" });
+ this.geoPermissionState = result.state;
+ result.addEventListener("change", () => { this.geoPermissionState = result.state; });
+ } catch { /* permissions API not available */ }
+ }
+
private toggleLocationSharing() {
+ if (this.privacySettings.ghostMode) return; // Ghost mode prevents sharing
+
if (this.sharingLocation) {
- // Stop sharing
if (this.watchId !== null) {
navigator.geolocation.clearWatch(this.watchId);
this.watchId = null;
}
this.sharingLocation = false;
+ this.geoTimeoutCount = 0;
this.sync?.clearLocation();
this.updateShareButton();
return;
@@ -1240,14 +1352,29 @@ class FolkMapViewer extends HTMLElement {
return;
}
+ this.checkGeoPermission();
let firstFix = true;
+ const useHighAccuracy = this.geoTimeoutCount < 2;
+
this.watchId = navigator.geolocation.watchPosition(
(pos) => {
this.sharingLocation = true;
+ this.geoTimeoutCount = 0;
this.updateShareButton();
+
+ let lat = pos.coords.latitude;
+ let lng = pos.coords.longitude;
+
+ // Apply privacy fuzzing
+ if (this.privacySettings.precision !== "exact") {
+ const fuzzed = fuzzLocation(lat, lng, this.privacySettings.precision);
+ lat = fuzzed.latitude;
+ lng = fuzzed.longitude;
+ }
+
const loc: LocationState = {
- latitude: pos.coords.latitude,
- longitude: pos.coords.longitude,
+ latitude: lat,
+ longitude: lng,
accuracy: pos.coords.accuracy,
altitude: pos.coords.altitude ?? undefined,
heading: pos.coords.heading ?? undefined,
@@ -1258,47 +1385,752 @@ class FolkMapViewer extends HTMLElement {
this.sync?.updateLocation(loc);
if (firstFix && this.map) {
- this.map.flyTo({ center: [loc.longitude, loc.latitude], zoom: 14 });
+ this.map.flyTo({ center: [pos.coords.longitude, pos.coords.latitude], zoom: 14 });
firstFix = false;
}
},
(err) => {
- this.error = `Location error: ${err.message}`;
- this.sharingLocation = false;
- this.updateShareButton();
+ if (err.code === err.TIMEOUT) {
+ this.geoTimeoutCount++;
+ if (this.geoTimeoutCount >= 2 && this.watchId !== null) {
+ // Restart with low accuracy
+ navigator.geolocation.clearWatch(this.watchId);
+ this.watchId = navigator.geolocation.watchPosition(
+ (pos) => {
+ this.sharingLocation = true;
+ this.updateShareButton();
+ let lat = pos.coords.latitude;
+ let lng = pos.coords.longitude;
+ if (this.privacySettings.precision !== "exact") {
+ const fuzzed = fuzzLocation(lat, lng, this.privacySettings.precision);
+ lat = fuzzed.latitude;
+ lng = fuzzed.longitude;
+ }
+ this.sync?.updateLocation({
+ latitude: lat, longitude: lng,
+ accuracy: pos.coords.accuracy,
+ altitude: pos.coords.altitude ?? undefined,
+ heading: pos.coords.heading ?? undefined,
+ speed: pos.coords.speed ?? undefined,
+ timestamp: new Date().toISOString(),
+ source: "network",
+ });
+ },
+ () => { this.sharingLocation = false; this.updateShareButton(); },
+ { enableHighAccuracy: false, maximumAge: 10000, timeout: 30000 },
+ );
+ }
+ } else {
+ this.error = `Location error: ${err.message}`;
+ this.sharingLocation = false;
+ this.updateShareButton();
+ }
},
- { enableHighAccuracy: true, maximumAge: 5000, timeout: 15000 },
+ { enableHighAccuracy: useHighAccuracy, maximumAge: 5000, timeout: 15000 },
);
}
+ private toggleGhostMode() {
+ this.privacySettings.ghostMode = !this.privacySettings.ghostMode;
+ if (this.privacySettings.ghostMode) {
+ if (this.watchId !== null) {
+ navigator.geolocation.clearWatch(this.watchId);
+ this.watchId = null;
+ }
+ this.sharingLocation = false;
+ this.sync?.updateStatus("ghost");
+ this.sync?.clearLocation();
+ } else {
+ this.sync?.updateStatus("online");
+ }
+ this.renderPrivacyPanel();
+ this.updateShareButton();
+ }
+
private updateShareButton() {
const btn = this.shadow.getElementById("share-location");
if (!btn) return;
- if (this.sharingLocation) {
+ if (this.privacySettings.ghostMode) {
+ btn.textContent = "\u{1F47B} Ghost Mode";
+ btn.classList.remove("sharing");
+ btn.classList.add("ghost");
+ } else if (this.sharingLocation) {
btn.textContent = "\u{1F4CD} Stop Sharing";
btn.classList.add("sharing");
+ btn.classList.remove("ghost");
} else {
btn.textContent = "\u{1F4CD} Share Location";
btn.classList.remove("sharing");
+ btn.classList.remove("ghost");
+ }
+ // Update permission indicator
+ const permIndicator = this.shadow.getElementById("geo-perm-indicator");
+ if (permIndicator) {
+ const colors: RecordPrivacy Settings
+
+
+
+
+ Ghost mode hides your location from all participants and stops GPS tracking.
+
+ `;
+ panel.querySelector("#precision-select")?.addEventListener("change", (e) => {
+ this.privacySettings.precision = (e.target as HTMLSelectElement).value as PrecisionLevel;
+ });
+ panel.querySelector("#ghost-toggle")?.addEventListener("change", () => {
+ this.toggleGhostMode();
+ });
+ }
+
+ // ─── Waypoint drop / Meeting point modal ────────────────────
private dropWaypoint() {
+ this.showMeetingModal = true;
+ this.meetingSearchQuery = "";
+ this.meetingSearchResults = [];
+ this.renderMeetingPointModal();
+ }
+
+ private renderMeetingPointModal() {
+ let modal = this.shadow.getElementById("meeting-modal");
+ if (!this.showMeetingModal) {
+ modal?.remove();
+ return;
+ }
+ if (!modal) {
+ modal = document.createElement("div");
+ modal.id = "meeting-modal";
+ modal.style.cssText = `
+ position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
+ background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
+ `;
+ this.shadow.appendChild(modal);
+ }
+
+ const center = this.map?.getCenter();
+ const myLoc = this.sync?.getState().participants[this.participantId]?.location;
+ const meetingEmojis = ["\u{1F4CD}", "\u{2B50}", "\u{1F3E0}", "\u{1F37D}", "\u{26FA}", "\u{1F3AF}", "\u{1F680}", "\u{1F33F}", "\u{26A1}", "\u{1F48E}"];
+
+ modal.innerHTML = `
+
+
+ `;
+
+ // Listeners
+ modal.querySelector("#meeting-close")?.addEventListener("click", () => {
+ this.showMeetingModal = false;
+ modal?.remove();
+ });
+ modal.addEventListener("click", (e) => {
+ if (e.target === modal) { this.showMeetingModal = false; modal?.remove(); }
+ });
+
+ // Emoji picker
+ let selectedEmoji = "\u{1F4CD}";
+ modal.querySelectorAll(".emoji-opt").forEach(btn => {
+ btn.addEventListener("click", () => {
+ selectedEmoji = (btn as HTMLElement).dataset.emoji!;
+ (modal!.querySelector("#meeting-emoji") as HTMLInputElement).value = selectedEmoji;
+ modal!.querySelectorAll(".emoji-opt").forEach(b => (b as HTMLElement).style.borderColor = "var(--rs-border)");
+ (btn as HTMLElement).style.borderColor = "#4f46e5";
+ });
+ });
+
+ // GPS mode
+ modal.querySelector("#loc-gps")?.addEventListener("click", () => {
+ if (myLoc) {
+ (modal!.querySelector("#meeting-lat") as HTMLInputElement).value = String(myLoc.latitude);
+ (modal!.querySelector("#meeting-lng") as HTMLInputElement).value = String(myLoc.longitude);
+ modal!.querySelector("#loc-mode-content")!.innerHTML = `
+
+
+
+
+
+
+ \u{1F4CD} Set Meeting Point
+
+
+ ${meetingEmojis.map((e, i) => ``).join("")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${center ? `Map center: ${center.lat.toFixed(5)}, ${center.lng.toFixed(5)}` : "Select a location mode"}
+
+ \u2713 Using your current GPS: ${myLoc.latitude.toFixed(5)}, ${myLoc.longitude.toFixed(5)}
`;
+ } else {
+ modal!.querySelector("#loc-mode-content")!.innerHTML = `Share your location first
`;
+ }
+ });
+
+ // Search mode
+ modal.querySelector("#loc-search")?.addEventListener("click", () => {
+ modal!.querySelector("#loc-mode-content")!.innerHTML = `
+
+
+
+
+
+ `;
+ modal!.querySelector("#address-search-btn")?.addEventListener("click", async () => {
+ const q = (modal!.querySelector("#address-search") as HTMLInputElement).value.trim();
+ if (!q) return;
+ const resultsDiv = modal!.querySelector("#search-results")!;
+ resultsDiv.innerHTML = 'Searching...
';
+ try {
+ const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(q)}&limit=5`, {
+ headers: { "User-Agent": "rMaps/1.0" },
+ signal: AbortSignal.timeout(5000),
+ });
+ const data = await res.json();
+ this.meetingSearchResults = data;
+ resultsDiv.innerHTML = data.length ? data.map((r: any, i: number) => `
+
+ ${this.esc(r.display_name?.substring(0, 80))}
+
+ `).join("") : 'No results found
';
+ resultsDiv.querySelectorAll("[data-sr]").forEach(el => {
+ el.addEventListener("click", () => {
+ const idx = parseInt((el as HTMLElement).dataset.sr!, 10);
+ const r = this.meetingSearchResults[idx];
+ (modal!.querySelector("#meeting-lat") as HTMLInputElement).value = r.lat;
+ (modal!.querySelector("#meeting-lng") as HTMLInputElement).value = r.lon;
+ resultsDiv.querySelectorAll("[data-sr]").forEach(e => (e as HTMLElement).style.borderColor = "transparent");
+ (el as HTMLElement).style.borderColor = "#4f46e5";
+ });
+ });
+ } catch {
+ resultsDiv.innerHTML = 'Search failed
';
+ }
+ });
+ });
+
+ // Manual mode
+ modal.querySelector("#loc-manual")?.addEventListener("click", () => {
+ modal!.querySelector("#loc-mode-content")!.innerHTML = `
+
+
+ `;
+ modal!.querySelector("#manual-lat")?.addEventListener("input", (e) => {
+ (modal!.querySelector("#meeting-lat") as HTMLInputElement).value = (e.target as HTMLInputElement).value;
+ });
+ modal!.querySelector("#manual-lng")?.addEventListener("input", (e) => {
+ (modal!.querySelector("#meeting-lng") as HTMLInputElement).value = (e.target as HTMLInputElement).value;
+ });
+ });
+
+ // Create
+ modal.querySelector("#meeting-create")?.addEventListener("click", () => {
+ const name = (modal!.querySelector("#meeting-name") as HTMLInputElement).value.trim() || "Meeting point";
+ const lat = parseFloat((modal!.querySelector("#meeting-lat") as HTMLInputElement).value);
+ const lng = parseFloat((modal!.querySelector("#meeting-lng") as HTMLInputElement).value);
+ const emoji = (modal!.querySelector("#meeting-emoji") as HTMLInputElement).value || "\u{1F4CD}";
+
+ if (isNaN(lat) || isNaN(lng)) return;
+
+ this.sync?.addWaypoint({
+ id: crypto.randomUUID(),
+ name,
+ emoji,
+ latitude: lat,
+ longitude: lng,
+ createdBy: this.participantId,
+ createdAt: new Date().toISOString(),
+ type: "meeting",
+ });
+ this.showMeetingModal = false;
+ modal?.remove();
+ });
+ }
+
+ // ─── Share modal with QR code ───────────────────────────────
+
+ private async renderShareModal() {
+ let modal = this.shadow.getElementById("share-modal");
+ if (!this.showShareModal) {
+ modal?.remove();
+ return;
+ }
+ if (!modal) {
+ modal = document.createElement("div");
+ modal.id = "share-modal";
+ modal.style.cssText = `
+ position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
+ background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
+ `;
+ this.shadow.appendChild(modal);
+ }
+
+ const shareUrl = `${window.location.origin}/${this.space}/rmaps/${this.room}`;
+
+ modal.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ // Generate QR code
+ try {
+ const QRCode = await import("qrcode");
+ const dataUrl = await QRCode.toDataURL(shareUrl, { width: 200, margin: 2, color: { dark: "#000000", light: "#ffffff" } });
+ const qrContainer = modal.querySelector("#qr-container");
+ if (qrContainer) {
+ qrContainer.innerHTML = `
+
+
+ Share Room
+
+
+
+
+ Generating QR code...
+
+ ${this.esc(shareUrl)}
+
+
+
+
+
+
+ QR code unavailable
`;
+ }
+
+ // Listeners
+ modal.querySelector("#share-close")?.addEventListener("click", () => {
+ this.showShareModal = false;
+ modal?.remove();
+ });
+ modal.addEventListener("click", (e) => {
+ if (e.target === modal) { this.showShareModal = false; modal?.remove(); }
+ });
+ modal.querySelector("#share-copy")?.addEventListener("click", () => {
+ navigator.clipboard.writeText(shareUrl).then(() => {
+ const btn = modal!.querySelector("#share-copy");
+ if (btn) { btn.textContent = "\u2713 Copied!"; setTimeout(() => { btn.textContent = "\u{1F4CB} Copy Link"; }, 2000); }
+ });
+ });
+ modal.querySelector("#share-native")?.addEventListener("click", () => {
+ if (navigator.share) {
+ navigator.share({ title: `rMaps: ${this.room}`, url: shareUrl }).catch(() => {});
+ } else {
+ navigator.clipboard.writeText(shareUrl).then(() => {
+ const btn = modal!.querySelector("#share-native");
+ if (btn) { btn.textContent = "\u2713 Copied!"; setTimeout(() => { btn.textContent = "\u{1F4E4} Share"; }, 2000); }
+ });
+ }
+ });
+ }
+
+ // ─── Import modal ───────────────────────────────────────────
+
+ private renderImportModal() {
+ let modal = this.shadow.getElementById("import-modal");
+ if (!this.showImportModal) {
+ modal?.remove();
+ return;
+ }
+ if (!modal) {
+ modal = document.createElement("div");
+ modal.id = "import-modal";
+ modal.style.cssText = `
+ position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
+ background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
+ `;
+ this.shadow.appendChild(modal);
+ }
+
+ if (this.importStep === "upload") {
+ modal.innerHTML = `
+
+
+ `;
+
+ const handleFile = (file: File) => {
+ if (file.size > 50 * 1024 * 1024) {
+ const errDiv = modal!.querySelector("#import-error") as HTMLElement;
+ errDiv.style.display = "block";
+ errDiv.textContent = "File too large (max 50 MB)";
+ return;
+ }
+ const reader = new FileReader();
+ reader.onload = () => {
+ const result = parseGoogleMapsGeoJSON(reader.result as string);
+ if (!result.success) {
+ const errDiv = modal!.querySelector("#import-error") as HTMLElement;
+ errDiv.style.display = "block";
+ errDiv.textContent = result.error || "No places found";
+ return;
+ }
+ this.importParsedPlaces = result.places.map(p => ({ ...p, selected: true }));
+ this.importStep = "preview";
+ this.renderImportModal();
+ };
+ reader.readAsText(file);
+ };
+
+ const dropZone = modal.querySelector("#drop-zone")!;
+ const fileInput = modal.querySelector("#file-input") as HTMLInputElement;
+
+ dropZone.addEventListener("click", () => fileInput.click());
+ dropZone.addEventListener("dragover", (e) => { e.preventDefault(); (dropZone as HTMLElement).style.borderColor = "#4f46e5"; });
+ dropZone.addEventListener("dragleave", () => { (dropZone as HTMLElement).style.borderColor = "var(--rs-border)"; });
+ dropZone.addEventListener("drop", (e) => {
+ e.preventDefault();
+ (dropZone as HTMLElement).style.borderColor = "var(--rs-border)";
+ const file = (e as DragEvent).dataTransfer?.files[0];
+ if (file) handleFile(file);
+ });
+ fileInput.addEventListener("change", () => {
+ if (fileInput.files?.[0]) handleFile(fileInput.files[0]);
+ });
+ } else if (this.importStep === "preview") {
+ const selectedCount = this.importParsedPlaces.filter(p => p.selected).length;
+ modal.innerHTML = `
+
+
+
+ \u{1F4E5} Import Places
+
+
+
+
+
+ \u{1F4C2}
+ Drop a GeoJSON file here
+ or click to browse (.json, .geojson)
+
+
+
+ `;
+
+ modal.querySelectorAll("[data-place-idx]").forEach(cb => {
+ cb.addEventListener("change", (e) => {
+ const idx = parseInt((cb as HTMLElement).dataset.placeIdx!, 10);
+ this.importParsedPlaces[idx].selected = (e.target as HTMLInputElement).checked;
+ const btn = modal!.querySelector("#import-confirm");
+ const count = this.importParsedPlaces.filter(p => p.selected).length;
+ if (btn) btn.textContent = `Import ${count} Places as Waypoints`;
+ });
+ });
+
+ modal.querySelector("#import-confirm")?.addEventListener("click", () => {
+ for (const p of this.importParsedPlaces) {
+ if (!p.selected) continue;
+ this.sync?.addWaypoint({
+ id: crypto.randomUUID(),
+ name: p.name,
+ emoji: "\u{1F4CD}",
+ latitude: p.lat,
+ longitude: p.lng,
+ createdBy: this.participantId,
+ createdAt: new Date().toISOString(),
+ type: "poi",
+ });
+ }
+ this.importStep = "done";
+ this.renderImportModal();
+ });
+ } else if (this.importStep === "done") {
+ const count = this.importParsedPlaces.filter(p => p.selected).length;
+ modal.innerHTML = `
+
+
+
+ Preview (${this.importParsedPlaces.length} places)
+
+
+ ${this.importParsedPlaces.map((p, i) => `
+
+ `).join("")}
+
+
+
+
+
+ `;
+ modal.querySelector("#import-done-btn")?.addEventListener("click", () => {
+ this.showImportModal = false;
+ modal?.remove();
+ });
+ }
+
+ // Close handlers (shared)
+ modal.querySelector("#import-close")?.addEventListener("click", () => {
+ this.showImportModal = false;
+ modal?.remove();
+ });
+ modal.addEventListener("click", (e) => {
+ if (e.target === modal) { this.showImportModal = false; modal?.remove(); }
+ });
+ }
+
+ // ─── Route display ──────────────────────────────────────────
+
+ private showRoute(route: { segments: any[]; totalDistance: number; estimatedTime: number }, destination: string) {
if (!this.map) return;
- const center = this.map.getCenter();
- const name = prompt("Waypoint name:", "Meeting point");
- if (!name?.trim()) return;
- this.sync?.addWaypoint({
- id: crypto.randomUUID(),
- name: name.trim(),
- emoji: "\u{1F4CD}",
- latitude: center.lat,
- longitude: center.lng,
- createdBy: this.participantId,
- createdAt: new Date().toISOString(),
- type: "meeting",
+ this.clearRoute();
+ this.activeRoute = { ...route, destination };
+
+ const segmentColors: Record\u2705
+ Imported ${count} places!
+ They've been added as waypoints to this room.
+
+
+
+
+ Route to ${this.esc(this.activeRoute.destination)}
+
+
+
+ \u{1F4CF} ${formatDistance(this.activeRoute.totalDistance)}
+ \u{23F1} ${formatTime(this.activeRoute.estimatedTime)}
+
+
+ ${this.activeRoute.segments.map(seg => `
+
+ ${segTypeLabels[seg.type] || seg.type}: ${formatDistance(seg.distance)}
+
+ `).join("")}
+
+ `;
+ routePanel.querySelector("#close-route")?.addEventListener("click", () => this.clearRoute());
+ }
+
+ // ─── Navigation panel (participant/waypoint selection) ───────
+
+ private async requestRoute(targetLat: number, targetLng: number, targetName: string) {
+ // Get user's current location
+ const myState = this.sync?.getState().participants[this.participantId];
+ if (!myState?.location) {
+ this.error = "Share your location first to get directions";
+ return;
+ }
+
+ const base = this.getApiBase();
+ try {
+ const res = await fetch(`${base}/api/routing`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ from: { lat: myState.location.latitude, lng: myState.location.longitude },
+ to: { lat: targetLat, lng: targetLng },
+ mode: "walking",
+ }),
+ signal: AbortSignal.timeout(12000),
+ });
+ if (res.ok) {
+ const data = await res.json();
+ if (data.success && data.route) {
+ this.showRoute(data.route, targetName);
+ } else {
+ this.error = "No route found";
+ }
+ }
+ } catch {
+ this.error = "Routing request failed";
+ }
+ }
+
+ private renderNavigationPanel() {
+ let navPanel = this.shadow.getElementById("nav-panel");
+
+ // Get target details
+ const state = this.sync?.getState();
+ let targetName = "";
+ let targetLat = 0;
+ let targetLng = 0;
+ let targetEmoji = "";
+ let targetDetail = "";
+
+ if (this.selectedParticipant && state) {
+ const p = state.participants[this.selectedParticipant];
+ if (p?.location) {
+ targetName = p.name;
+ targetEmoji = p.emoji;
+ targetLat = p.location.latitude;
+ targetLng = p.location.longitude;
+ const myLoc = state.participants[this.participantId]?.location;
+ if (myLoc) {
+ targetDetail = formatDistance(haversineDistance(myLoc.latitude, myLoc.longitude, targetLat, targetLng)) + " away";
+ }
+ }
+ } else if (this.selectedWaypoint && state) {
+ const wp = state.waypoints.find(w => w.id === this.selectedWaypoint);
+ if (wp) {
+ targetName = wp.name;
+ targetEmoji = wp.emoji || "\u{1F4CD}";
+ targetLat = wp.latitude;
+ targetLng = wp.longitude;
+ const myLoc = state.participants[this.participantId]?.location;
+ if (myLoc) {
+ targetDetail = formatDistance(haversineDistance(myLoc.latitude, myLoc.longitude, targetLat, targetLng)) + " away";
+ }
+ }
+ }
+
+ if (!targetName) {
+ if (navPanel) navPanel.remove();
+ return;
+ }
+
+ if (!navPanel) {
+ navPanel = document.createElement("div");
+ navPanel.id = "nav-panel";
+ navPanel.style.cssText = `
+ position:absolute;top:12px;left:12px;z-index:5;
+ background:var(--rs-bg-surface);border:1px solid var(--rs-border-strong);
+ border-radius:10px;padding:12px;box-shadow:0 4px 16px rgba(0,0,0,0.3);
+ min-width:180px;
+ `;
+ this.shadow.getElementById("map-container")?.appendChild(navPanel);
+ }
+
+ navPanel.innerHTML = `
+
+ ${targetEmoji}
+
+
+ `;
+
+ navPanel.querySelector("#close-nav")?.addEventListener("click", () => {
+ this.selectedParticipant = null;
+ this.selectedWaypoint = null;
+ navPanel?.remove();
+ });
+ navPanel.querySelector("#navigate-btn")?.addEventListener("click", () => {
+ this.requestRoute(targetLat, targetLng, targetName);
});
}
@@ -1396,6 +2228,9 @@ class FolkMapViewer extends HTMLElement {
.ctrl-btn.sharing {
border-color: #22c55e; color: #22c55e; animation: pulse 2s infinite;
}
+ .ctrl-btn.ghost {
+ border-color: #8b5cf6; color: #8b5cf6;
+ }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
@@ -1528,12 +2363,13 @@ class FolkMapViewer extends HTMLElement {
}
private renderMap(): string {
- const shareUrl = `${window.location.origin}/${this.space}/maps/${this.room}`;
return `
+
+
+ ${this.esc(targetName)}
+ ${targetDetail ? `${targetDetail}
` : ""}
+
${this._history.canGoBack ? '' : ''}
- 🗺 ${this.esc(this.room)}
+ \u{1F5FA} ${this.esc(this.room)}
+
+
@@ -1543,21 +2379,19 @@ class FolkMapViewer extends HTMLElement {
-
-
-
+
+
+
+
-
+
`;
}
@@ -1588,12 +2422,24 @@ class FolkMapViewer extends HTMLElement {
this.dropWaypoint();
});
- const copyUrl = this.shadow.getElementById("copy-url") || this.shadow.getElementById("copy-link");
- copyUrl?.addEventListener("click", () => {
- const url = `${window.location.origin}/${this.space}/maps/${this.room}`;
- navigator.clipboard.writeText(url).then(() => {
- if (copyUrl) copyUrl.textContent = "Copied!";
- setTimeout(() => { if (copyUrl) copyUrl.textContent = "Copy"; }, 2000);
+ this.shadow.getElementById("share-room-btn")?.addEventListener("click", () => {
+ this.showShareModal = true;
+ this.renderShareModal();
+ });
+
+ this.shadow.getElementById("privacy-toggle")?.addEventListener("click", () => {
+ this.showPrivacyPanel = !this.showPrivacyPanel;
+ const panel = this.shadow.getElementById("privacy-panel");
+ if (panel) {
+ panel.style.display = this.showPrivacyPanel ? "block" : "none";
+ if (this.showPrivacyPanel) this.renderPrivacyPanel();
+ }
+ });
+
+ this.shadow.getElementById("bell-toggle")?.addEventListener("click", () => {
+ this.pushManager?.toggle(this.room, this.participantId).then(subscribed => {
+ const bell = this.shadow.getElementById("bell-toggle");
+ if (bell) bell.textContent = subscribed ? "\u{1F514}" : "\u{1F515}";
});
});
diff --git a/modules/rmaps/components/map-sync.ts b/modules/rmaps/components/map-sync.ts
index 7294bf9..d669231 100644
--- a/modules/rmaps/components/map-sync.ts
+++ b/modules/rmaps/components/map-sync.ts
@@ -3,6 +3,20 @@
* Ported from rmaps-online/src/lib/sync.ts (simplified — no @/types dependency).
*/
+// ── Typed unions ──────────────────────────────────────────────
+
+export type ParticipantStatus = "online" | "away" | "ghost" | "offline";
+export type WaypointType = "meeting" | "poi" | "parking" | "food" | "danger" | "custom";
+export type LocationSource = "gps" | "network" | "manual" | "ip" | "indoor";
+export type PrecisionLevel = "exact" | "building" | "area" | "approximate";
+
+export interface PrivacySettings {
+ precision: PrecisionLevel;
+ ghostMode: boolean;
+}
+
+// ── State interfaces ──────────────────────────────────────────
+
export interface RoomState {
id: string;
slug: string;
@@ -19,7 +33,7 @@ export interface ParticipantState {
color: string;
joinedAt: string;
lastSeen: string;
- status: string;
+ status: ParticipantStatus;
location?: LocationState;
}
@@ -31,7 +45,7 @@ export interface LocationState {
heading?: number;
speed?: number;
timestamp: string;
- source: string;
+ source: LocationSource;
indoor?: { level: number; x: number; y: number; spaceName?: string };
}
@@ -44,14 +58,14 @@ export interface WaypointState {
indoor?: { level: number; x: number; y: number };
createdBy: string;
createdAt: string;
- type: string;
+ type: WaypointType;
}
export type SyncMessage =
| { type: "join"; participant: ParticipantState }
| { type: "leave"; participantId: string }
| { type: "location"; participantId: string; location: LocationState }
- | { type: "status"; participantId: string; status: string }
+ | { type: "status"; participantId: string; status: ParticipantStatus }
| { type: "waypoint_add"; waypoint: WaypointState }
| { type: "waypoint_remove"; waypointId: string }
| { type: "full_state"; state: RoomState }
@@ -263,7 +277,7 @@ export class RoomSync {
}
}
- updateStatus(status: string): void {
+ updateStatus(status: ParticipantStatus): void {
if (this.state.participants[this.participantId]) {
this.state.participants[this.participantId].status = status;
this.state.participants[this.participantId].lastSeen = new Date().toISOString();
diff --git a/modules/rmaps/mod.ts b/modules/rmaps/mod.ts
index de0c5fe..f0b16f9 100644
--- a/modules/rmaps/mod.ts
+++ b/modules/rmaps/mod.ts
@@ -86,22 +86,111 @@ routes.post("/api/push/request-location", async (c) => {
// ── Proxy: routing (OSRM + c3nav) ──
routes.post("/api/routing", async (c) => {
const body = await c.req.json();
- const { from, to, mode = "walking" } = body;
+ const { from, to, mode = "walking", accessibility, indoor } = body;
if (!from?.lat || !from?.lng || !to?.lat || !to?.lng) {
return c.json({ error: "from and to with lat/lng required" }, 400);
}
- // Use OSRM for outdoor routing
+ const segments: { type: string; coordinates: [number, number][]; distance: number; duration: number; steps?: any[] }[] = [];
+ let totalDistance = 0;
+ let estimatedTime = 0;
+
+ // ── Indoor routing via c3nav ──
+ if (indoor?.event && (from.indoor || to.indoor)) {
+ try {
+ // If both are indoor, route fully indoors
+ if (from.indoor && to.indoor) {
+ const c3navRes = await fetch(`https://${indoor.event}.c3nav.de/api/v2/routing/route/`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json", "X-API-Key": "anonymous", Accept: "application/json", "User-Agent": "rMaps/1.0" },
+ body: JSON.stringify({
+ origin: { level: from.indoor.level, x: from.indoor.x, y: from.indoor.y },
+ destination: { level: to.indoor.level, x: to.indoor.x, y: to.indoor.y },
+ ...(accessibility?.avoidStairs ? { options: { avoid_stairs: true } } : {}),
+ ...(accessibility?.wheelchair ? { options: { wheelchair: true } } : {}),
+ }),
+ signal: AbortSignal.timeout(8000),
+ });
+ if (c3navRes.ok) {
+ const data = await c3navRes.json();
+ const coords: [number, number][] = data.path?.map((p: any) => [p.lng || p.x, p.lat || p.y]) || [];
+ const dist = data.distance || 0;
+ const dur = data.duration || Math.round(dist / 1.2);
+ segments.push({ type: "indoor", coordinates: coords, distance: dist, duration: dur });
+ totalDistance += dist;
+ estimatedTime += dur;
+ }
+ } else {
+ // Mixed indoor/outdoor: transition segment + outdoor OSRM
+ const outdoorPoint = from.indoor ? to : from;
+ const indoorPoint = from.indoor ? from : to;
+ const transitionCoords: [number, number][] = [
+ [indoorPoint.lng, indoorPoint.lat],
+ [outdoorPoint.lng, outdoorPoint.lat],
+ ];
+ segments.push({ type: "transition", coordinates: transitionCoords, distance: 50, duration: 30 });
+ totalDistance += 50;
+ estimatedTime += 30;
+
+ // OSRM for the outdoor portion
+ const profile = mode === "driving" ? "car" : "foot";
+ const osrmRes = await fetch(
+ `https://router.project-osrm.org/route/v1/${profile}/${outdoorPoint.lng},${outdoorPoint.lat};${(from.indoor ? to : from).lng},${(from.indoor ? to : from).lat}?overview=full&geometries=geojson&steps=true`,
+ { signal: AbortSignal.timeout(10000) },
+ );
+ if (osrmRes.ok) {
+ const osrmData = await osrmRes.json();
+ const route = osrmData.routes?.[0];
+ if (route) {
+ segments.push({
+ type: "outdoor",
+ coordinates: route.geometry?.coordinates || [],
+ distance: route.distance || 0,
+ duration: route.duration || 0,
+ steps: route.legs?.[0]?.steps,
+ });
+ totalDistance += route.distance || 0;
+ estimatedTime += route.duration || 0;
+ }
+ }
+ }
+
+ if (segments.length > 0) {
+ return c.json({
+ success: true,
+ route: { segments, totalDistance, estimatedTime: Math.round(estimatedTime) },
+ });
+ }
+ } catch { /* fall through to outdoor-only routing */ }
+ }
+
+ // ── Outdoor-only routing via OSRM ──
const profile = mode === "driving" ? "car" : "foot";
try {
const res = await fetch(
`https://router.project-osrm.org/route/v1/${profile}/${from.lng},${from.lat};${to.lng},${to.lat}?overview=full&geometries=geojson&steps=true`,
- { signal: AbortSignal.timeout(10000) }
+ { signal: AbortSignal.timeout(10000) },
);
if (res.ok) {
const data = await res.json();
- return c.json(data);
+ const route = data.routes?.[0];
+ if (route) {
+ return c.json({
+ success: true,
+ route: {
+ segments: [{
+ type: "outdoor",
+ coordinates: route.geometry?.coordinates || [],
+ distance: route.distance || 0,
+ duration: route.duration || 0,
+ steps: route.legs?.[0]?.steps,
+ }],
+ totalDistance: route.distance || 0,
+ estimatedTime: Math.round(route.duration || 0),
+ },
+ });
+ }
}
} catch {}
return c.json({ error: "Routing failed" }, 502);
@@ -134,7 +223,7 @@ routes.get("/api/c3nav/:event", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
return c.html(renderShell({
title: `${space} — Maps | rSpace`,
moduleId: "rmaps",
@@ -149,7 +238,7 @@ routes.get("/", (c) => {
// Room-specific page
routes.get("/:room", (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const room = c.req.param("room");
return c.html(renderShell({
title: `${room} — Maps | rSpace`,
diff --git a/modules/rnetwork/mod.ts b/modules/rnetwork/mod.ts
index 5e6c7ed..8f4013a 100644
--- a/modules/rnetwork/mod.ts
+++ b/modules/rnetwork/mod.ts
@@ -67,7 +67,7 @@ const CACHE_TTL = 60_000;
// ── API: Health ──
routes.get("/api/health", (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
return c.json({ ok: true, module: "network", space, twentyConfigured: !!token });
});
@@ -75,7 +75,7 @@ routes.get("/api/health", (c) => {
// ── API: Info ──
routes.get("/api/info", (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
return c.json({
module: "network",
@@ -90,7 +90,7 @@ routes.get("/api/info", (c) => {
// ── API: People ──
routes.get("/api/people", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
const data = await twentyQuery(`{
people(first: 200) {
@@ -116,7 +116,7 @@ routes.get("/api/people", async (c) => {
// ── API: Companies ──
routes.get("/api/companies", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
const data = await twentyQuery(`{
companies(first: 200) {
@@ -194,7 +194,7 @@ routes.get("/api/delegations", async (c) => {
// ── API: Graph — transform entities to node/edge format ──
routes.get("/api/graph", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
// Check per-space cache (keyed by space + trust params)
@@ -540,7 +540,7 @@ routes.get("/api/workspaces", (c) => {
// ── API: Opportunities ──
routes.get("/api/opportunities", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = getTokenForSpace(dataSpace);
const data = await twentyQuery(`{
opportunities(first: 200) {
diff --git a/modules/rnotes/mod.ts b/modules/rnotes/mod.ts
index 003a319..0b9869d 100644
--- a/modules/rnotes/mod.ts
+++ b/modules/rnotes/mod.ts
@@ -250,7 +250,7 @@ function extractPlainText(content: string, format?: string): string {
// GET /api/notebooks — list notebooks
routes.get("/api/notebooks", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const notebooks = listNotebooks(dataSpace).map(({ doc }) => notebookToRest(doc));
notebooks.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
@@ -260,7 +260,7 @@ routes.get("/api/notebooks", async (c) => {
// POST /api/notebooks — create notebook
routes.post("/api/notebooks", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = extractToken(c.req.raw.headers);
if (!token) return c.json({ error: "Authentication required" }, 401);
let claims;
@@ -292,7 +292,7 @@ routes.post("/api/notebooks", async (c) => {
// GET /api/notebooks/:id — notebook detail with notes
routes.get("/api/notebooks/:id", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const id = c.req.param("id");
const docId = notebookDocId(dataSpace, id);
@@ -314,7 +314,7 @@ routes.get("/api/notebooks/:id", async (c) => {
// PUT /api/notebooks/:id — update notebook
routes.put("/api/notebooks/:id", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const token = extractToken(c.req.raw.headers);
if (!token) return c.json({ error: "Authentication required" }, 401);
let claims;
@@ -349,7 +349,7 @@ routes.put("/api/notebooks/:id", async (c) => {
// DELETE /api/notebooks/:id
routes.delete("/api/notebooks/:id", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const id = c.req.param("id");
const docId = notebookDocId(dataSpace, id);
@@ -376,7 +376,7 @@ routes.delete("/api/notebooks/:id", async (c) => {
// GET /api/notes — list all notes
routes.get("/api/notes", async (c) => {
const space = c.req.param("space") || "demo";
- const dataSpace = (c.get("effectiveSpace" as any) as string) || space;
+ const dataSpace = c.get("effectiveSpace") || space;
const { notebook_id, type, q, limit = "50", offset = "0" } = c.req.query();
let allNotes: ReturnType