diff --git a/modules/rmaps/components/folk-map-viewer.ts b/modules/rmaps/components/folk-map-viewer.ts
index 2197d5b..36a9eb9 100644
--- a/modules/rmaps/components/folk-map-viewer.ts
+++ b/modules/rmaps/components/folk-map-viewer.ts
@@ -18,6 +18,7 @@ import { TourEngine } from "../../../shared/tour-engine";
import { ViewHistory } from "../../../shared/view-history.js";
import { requireAuth } from "../../../shared/auth-fetch";
import { getUsername } from "../../../shared/components/rstack-identity";
+import { MapsLocalFirstClient } from "../local-first-client";
// MapLibre loaded via CDN — use window access with type assertion
@@ -114,6 +115,16 @@ class FolkMapViewer extends HTMLElement {
private _themeObserver: MutationObserver | null = null;
private _history = new ViewHistory<"lobby" | "map">("lobby");
+ // Chat + Local-first state
+ private lfClient: MapsLocalFirstClient | null = null;
+ private sidebarTab: "participants" | "chat" = "participants";
+ private unreadCount = 0;
+
+ // Indoor/outdoor mode
+ private mapMode: "outdoor" | "indoor" = "outdoor";
+ private indoorEvent: string | null = null;
+ private indoorView: any = null;
+
// Guided tour
private _tour!: TourEngine;
private static readonly TOUR_STEPS = [
@@ -1062,10 +1073,24 @@ class FolkMapViewer extends HTMLElement {
this.render();
this.initMapView();
this.initRoomSync();
+ this.initLocalFirstClient();
// Periodically refresh staleness indicators
this.stalenessTimer = setInterval(() => this.refreshStaleness(), 15000);
}
+ private async initLocalFirstClient() {
+ this.lfClient = new MapsLocalFirstClient(this.space);
+ await this.lfClient.init();
+ await this.lfClient.subscribe();
+ // Track unread chat messages
+ this.lfClient.onChange((doc) => {
+ const msgs = Object.values(doc.messages || {});
+ const lastSeen = parseInt(localStorage.getItem(`rmaps_chat_seen_${this.room}`) || "0", 10);
+ this.unreadCount = msgs.filter(m => m.createdAt > lastSeen).length;
+ this.updateChatBadge();
+ });
+ }
+
private createRoom() {
if (!requireAuth("create map room")) return;
const name = prompt("Room name (slug):");
@@ -1093,6 +1118,18 @@ class FolkMapViewer extends HTMLElement {
this.map.remove();
this.map = null;
}
+ if (this.indoorView) {
+ this.indoorView.remove();
+ this.indoorView = null;
+ }
+ this.mapMode = "outdoor";
+ this.indoorEvent = null;
+ if (this.lfClient) {
+ this.lfClient.disconnect();
+ this.lfClient = null;
+ }
+ this.sidebarTab = "participants";
+ this.unreadCount = 0;
if (this._themeObserver) {
this._themeObserver.disconnect();
this._themeObserver = null;
@@ -1185,6 +1222,8 @@ class FolkMapViewer extends HTMLElement {
dot.className = `status-dot ${connected ? "status-connected" : "status-disconnected"}`;
}
},
+ undefined, // onLocationRequest (default)
+ (fromId, fromName, fromEmoji) => this.onRouteRequest(fromId, fromName, fromEmoji),
);
this.sync.connect(this.syncUrl || undefined);
@@ -1412,6 +1451,11 @@ class FolkMapViewer extends HTMLElement {
}
}
+ // Forward to indoor view if in indoor mode
+ if (this.mapMode === "indoor" && this.indoorView) {
+ this.indoorView.updateParticipants(state.participants);
+ }
+
// Update participant list sidebar
this.updateParticipantList(state);
}
@@ -1949,6 +1993,132 @@ class FolkMapViewer extends HTMLElement {
routePanel.querySelector("#close-route")?.addEventListener("click", () => this.clearRoute());
}
+ // ─── Route request handler ──────────────────────────────────
+
+ private onRouteRequest(fromId: string, fromName: string, fromEmoji: string) {
+ // Show toast notification
+ const state = this.sync?.getState();
+ const requester = state?.participants[fromId];
+ if (!requester?.location) return;
+
+ const toast = document.createElement("div");
+ toast.style.cssText = `
+ position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
+ background:var(--rs-bg-surface);border:1px solid var(--rs-border-strong);
+ border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,0.4);
+ display:flex;align-items:center;gap:10px;max-width:340px;
+ animation:toastIn 0.3s ease;
+ `;
+ toast.innerHTML = `
+ ${fromEmoji}
+
+
${this.esc(fromName)} wants you to navigate to them
+
${targetEmoji}
@@ -2047,7 +2218,10 @@ class FolkMapViewer extends HTMLElement {
-
+
+
+ ${isParticipant ? `` : ""}
+
`;
navPanel.querySelector("#close-nav")?.addEventListener("click", () => {
@@ -2058,6 +2232,11 @@ class FolkMapViewer extends HTMLElement {
navPanel.querySelector("#navigate-btn")?.addEventListener("click", () => {
this.requestRoute(targetLat, targetLng, targetName);
});
+ navPanel.querySelector("#route-request-btn")?.addEventListener("click", () => {
+ this.sync?.sendRouteRequest(this.participantId, this.userName, this.userEmoji);
+ const btn = navPanel?.querySelector("#route-request-btn") as HTMLElement;
+ if (btn) { btn.textContent = "✓ Sent"; btn.style.color = "#22c55e"; btn.style.borderColor = "#22c55e"; }
+ });
}
// ─── Thumbnail capture ───────────────────────────────────────
@@ -2225,6 +2404,8 @@ class FolkMapViewer extends HTMLElement {
.fab-mini-list.open .fab-mini:nth-child(3) .fab-mini-btn { transition-delay: 0.08s; }
.fab-mini-list.open .fab-mini:nth-child(4) .fab-mini-btn { transition-delay: 0.12s; }
.fab-mini-list.open .fab-mini:nth-child(5) .fab-mini-btn { transition-delay: 0.16s; }
+ .fab-mini-list.open .fab-mini:nth-child(6) .fab-mini-btn { transition-delay: 0.20s; }
+ .fab-mini-list.open .fab-mini:nth-child(7) .fab-mini-btn { transition-delay: 0.24s; }
.fab-mini-label {
font-size: 11px; background: var(--rs-bg-surface); color: var(--rs-text-secondary);
padding: 4px 8px; border-radius: 6px; white-space: nowrap;
@@ -2402,10 +2583,14 @@ class FolkMapViewer extends HTMLElement {
@@ -2420,6 +2605,7 @@ class FolkMapViewer extends HTMLElement {
+
@@ -2450,6 +2636,14 @@ class FolkMapViewer extends HTMLElement {
Emoji
+
+
+ Chat
+
+
+
+ ${this.mapMode === "indoor" ? "Outdoor" : "Indoor"}
+
@@ -2523,6 +2717,46 @@ class FolkMapViewer extends HTMLElement {
});
});
+ // Indoor toggle
+ this.shadow.getElementById("indoor-toggle")?.addEventListener("click", () => {
+ if (this.mapMode === "outdoor") {
+ const event = prompt("c3nav event code (e.g. 39c3):", "39c3");
+ if (event?.trim()) this.switchToIndoor(event.trim());
+ } else {
+ this.switchToOutdoor();
+ }
+ });
+
+ // Sidebar tab switching
+ this.shadow.querySelectorAll("[data-sidebar-tab]").forEach((btn) => {
+ btn.addEventListener("click", () => {
+ this.sidebarTab = (btn as HTMLElement).dataset.sidebarTab as "participants" | "chat";
+ const pList = this.shadow.getElementById("participant-list");
+ const cPanel = this.shadow.getElementById("chat-panel-container");
+ if (pList) pList.style.display = this.sidebarTab === "participants" ? "block" : "none";
+ if (cPanel) cPanel.style.display = this.sidebarTab === "chat" ? "block" : "none";
+
+ // Update tab button styles
+ this.shadow.querySelectorAll("[data-sidebar-tab]").forEach(b => {
+ const isActive = (b as HTMLElement).dataset.sidebarTab === this.sidebarTab;
+ (b as HTMLElement).style.borderColor = isActive ? "#4f46e5" : "var(--rs-border)";
+ (b as HTMLElement).style.background = isActive ? "#4f46e520" : "transparent";
+ (b as HTMLElement).style.color = isActive ? "#818cf8" : "var(--rs-text-muted)";
+ });
+
+ // Mount chat panel if switching to chat
+ if (this.sidebarTab === "chat" && cPanel && !cPanel.querySelector("map-chat-panel")) {
+ this.mountChatPanel(cPanel);
+ }
+
+ // Clear unread when viewing chat
+ if (this.sidebarTab === "chat") {
+ this.unreadCount = 0;
+ this.updateChatBadge();
+ }
+ });
+ });
+
this.shadow.getElementById("bell-toggle")?.addEventListener("click", () => {
this.pushManager?.toggle(this.room, this.participantId).then(subscribed => {
const bell = this.shadow.getElementById("bell-toggle");
@@ -2581,6 +2815,31 @@ class FolkMapViewer extends HTMLElement {
this.updateEmojiButton();
});
+ this.shadow.getElementById("fab-chat")?.addEventListener("click", () => {
+ this.closeMobileFab();
+ // Toggle mobile bottom sheet to chat view
+ const sheet = this.shadow.getElementById("mobile-bottom-sheet");
+ if (sheet) {
+ sheet.classList.add("expanded");
+ const content = this.shadow.getElementById("participant-list-mobile");
+ if (content && !content.querySelector("map-chat-panel")) {
+ this.mountChatPanel(content);
+ }
+ }
+ this.unreadCount = 0;
+ this.updateChatBadge();
+ });
+
+ this.shadow.getElementById("fab-indoor")?.addEventListener("click", () => {
+ this.closeMobileFab();
+ if (this.mapMode === "outdoor") {
+ const event = prompt("c3nav event code (e.g. 39c3):", "39c3");
+ if (event?.trim()) this.switchToIndoor(event.trim());
+ } else {
+ this.switchToOutdoor();
+ }
+ });
+
// Mobile bottom sheet
const sheet = this.shadow.getElementById("mobile-bottom-sheet");
const sheetHandle = this.shadow.getElementById("sheet-handle");
diff --git a/modules/rmaps/components/map-chat-panel.ts b/modules/rmaps/components/map-chat-panel.ts
new file mode 100644
index 0000000..903aa43
--- /dev/null
+++ b/modules/rmaps/components/map-chat-panel.ts
@@ -0,0 +1,191 @@
+/**
+ * — Automerge-backed persistent chat for rMaps rooms.
+ * Subscribes to MapsLocalFirstClient changes and renders a scrollable message list + input.
+ */
+
+import type { MapsLocalFirstClient } from "../local-first-client";
+import type { MapChatMessage } from "../schemas";
+
+class MapChatPanel extends HTMLElement {
+ client: MapsLocalFirstClient | null = null;
+ participantId = "";
+ participantName = "";
+ participantEmoji = "";
+
+ private _unsub: (() => void) | null = null;
+ private _messages: MapChatMessage[] = [];
+
+ connectedCallback() {
+ this.render();
+ if (this.client) {
+ this._unsub = this.client.onChange((doc) => {
+ this._messages = Object.values(doc.messages || {}).sort((a, b) => a.createdAt - b.createdAt);
+ this.renderMessages();
+ });
+ // Initial load
+ const doc = this.client.getDoc();
+ if (doc) {
+ this._messages = Object.values(doc.messages || {}).sort((a, b) => a.createdAt - b.createdAt);
+ this.renderMessages();
+ }
+ }
+ }
+
+ disconnectedCallback() {
+ this._unsub?.();
+ this._unsub = null;
+ }
+
+ private esc(s: string): string {
+ const d = document.createElement("div");
+ d.textContent = s || "";
+ return d.innerHTML;
+ }
+
+ private relativeTime(ts: number): string {
+ const s = Math.floor((Date.now() - ts) / 1000);
+ if (s < 60) return "now";
+ const m = Math.floor(s / 60);
+ if (m < 60) return `${m}m`;
+ const h = Math.floor(m / 60);
+ if (h < 24) return `${h}h`;
+ return `${Math.floor(h / 24)}d`;
+ }
+
+ private render() {
+ this.innerHTML = `
+
+
+ `;
+
+ const input = this.querySelector("#chat-input") as HTMLInputElement;
+ const sendBtn = this.querySelector("#chat-send") as HTMLButtonElement;
+
+ const send = () => {
+ const text = input.value.trim();
+ if (!text || !this.client) return;
+ const msg: MapChatMessage = {
+ id: crypto.randomUUID(),
+ authorId: this.participantId,
+ authorName: this.participantName,
+ authorEmoji: this.participantEmoji,
+ text,
+ createdAt: Date.now(),
+ };
+ this.client.addMessage(msg);
+ input.value = "";
+ input.focus();
+ };
+
+ sendBtn.addEventListener("click", send);
+ input.addEventListener("keydown", (e) => {
+ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
+ });
+ }
+
+ private renderMessages() {
+ const container = this.querySelector("#chat-msgs");
+ if (!container) return;
+
+ if (this._messages.length === 0) {
+ container.innerHTML = 'No messages yet.
Start the conversation!
';
+ return;
+ }
+
+ let html = "";
+ let lastTs = 0;
+
+ for (const msg of this._messages) {
+ // Time gap separator (>5 min)
+ if (lastTs && msg.createdAt - lastTs > 5 * 60 * 1000) {
+ const d = new Date(msg.createdAt);
+ const timeStr = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+ html += `${timeStr}
`;
+ }
+ lastTs = msg.createdAt;
+
+ html += `
+
+
${this.esc(msg.authorEmoji)}
+
+
+
${this.esc(msg.text)}
+
+
\u{1F4C2}
-
Drop a GeoJSON file here
-
or click to browse (.json, .geojson)
-
+
Drop a GeoJSON or Google Takeout ZIP here
+
or click to browse (.json, .geojson, .zip)
+
`;
+ const processJson = (jsonStr: string) => {
+ const result = parseGoogleMapsGeoJSON(jsonStr);
+ if (!result.success) {
+ const err = this.querySelector("#i-err") as HTMLElement;
+ err.style.display = "block"; err.textContent = result.error || "No places found"; return;
+ }
+ this._places = result.places.map(p => ({ ...p, selected: true }));
+ this._step = "preview";
+ this.render();
+ };
+
const handleFile = (file: File) => {
if (file.size > 50 * 1024 * 1024) {
const err = this.querySelector("#i-err") as HTMLElement;
err.style.display = "block"; err.textContent = "File too large (max 50 MB)"; return;
}
- const reader = new FileReader();
- reader.onload = () => {
- const result = parseGoogleMapsGeoJSON(reader.result as string);
- if (!result.success) {
+
+ if (file.name.endsWith(".zip") || file.type === "application/zip") {
+ this.handleZip(file).then((jsonStr) => {
+ if (!jsonStr) {
+ const err = this.querySelector("#i-err") as HTMLElement;
+ err.style.display = "block"; err.textContent = "No GeoJSON FeatureCollection found in ZIP"; return;
+ }
+ processJson(jsonStr);
+ }).catch(() => {
const err = this.querySelector("#i-err") as HTMLElement;
- err.style.display = "block"; err.textContent = result.error || "No places found"; return;
- }
- this._places = result.places.map(p => ({ ...p, selected: true }));
- this._step = "preview";
- this.render();
- };
+ err.style.display = "block"; err.textContent = "Failed to read ZIP file";
+ });
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = () => processJson(reader.result as string);
reader.readAsText(file);
};
diff --git a/modules/rmaps/components/map-indoor-view.ts b/modules/rmaps/components/map-indoor-view.ts
new file mode 100644
index 0000000..48c699b
--- /dev/null
+++ b/modules/rmaps/components/map-indoor-view.ts
@@ -0,0 +1,353 @@
+/**
+ * — c3nav indoor map viewer using MapLibre GL raster tiles.
+ * Level selector, participant markers, and Easter egg on Level 0 triple-click.
+ */
+
+import type { ParticipantState } from "./map-sync";
+
+interface IndoorConfig {
+ event: string;
+ apiBase: string;
+}
+
+const MAPLIBRE_CSS = "https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.css";
+const MAPLIBRE_JS = "https://unpkg.com/maplibre-gl@4.1.2/dist/maplibre-gl.js";
+
+class MapIndoorView extends HTMLElement {
+ private shadow: ShadowRoot;
+ private map: any = null;
+ private config: IndoorConfig | null = null;
+ private levels: { id: number; name: string }[] = [];
+ private currentLevel = 0;
+ private bounds: { west: number; south: number; east: number; north: number } | null = null;
+ private participantMarkers: Map = new Map();
+ private loading = true;
+ private error = "";
+ private level0ClickCount = 0;
+ private level0ClickTimer: ReturnType | null = null;
+
+ constructor() {
+ super();
+ this.shadow = this.attachShadow({ mode: "open" });
+ }
+
+ set cfg(val: IndoorConfig) {
+ this.config = val;
+ if (this.isConnected) this.init();
+ }
+
+ connectedCallback() {
+ this.renderShell();
+ if (this.config) this.init();
+ }
+
+ disconnectedCallback() {
+ if (this.map) { this.map.remove(); this.map = null; }
+ this.participantMarkers.clear();
+ }
+
+ private renderShell() {
+ this.shadow.innerHTML = `
+
+
+
+
+
+
Loading indoor map...
+