@abraca/nuxt 0.2.0 → 0.3.0

package/dist/runtime/components/renderers/AMapRenderer.vue

@@ -0,0 +1,1622 @@
+<script setup>
+import { ref, computed, watch, shallowRef, onMounted, onBeforeUnmount, onUnmounted, defineAsyncComponent } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { DEFAULT_LOCALE } from "../../locale";
+const AEditor = defineAsyncComponent(
+  () => import("../AEditor.vue")
+);
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.map,
+  ...config.public?.abracadabra?.locale?.renderers?.map ?? {},
+  ...props.labels ?? {}
+}));
+const { childProviderRef, tree, connectedUsers, states, setLocalState } = useRendererBase(props);
+const { userName, userColor: userColorName } = useAbracadabra();
+const localClientId = computed(
+  () => childProviderRef.value?.awareness?.clientID ?? 0
+);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  isLoading: _nodePanelLoading,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+let mapboxgl = null;
+const mapboxLoaded = ref(false);
+const mapboxError = ref(null);
+const allEntries = computed(() => tree.childrenOf(null));
+function getEntryLocation(entry) {
+  if (entry.meta?.geoLat !== void 0 && entry.meta?.geoLng !== void 0) {
+    return { lat: entry.meta.geoLat, lng: entry.meta.geoLng };
+  }
+  const meta = entry.meta;
+  if (meta) {
+    for (const key of Object.keys(meta)) {
+      if (key.startsWith("_lat_")) {
+        const lat = meta[key];
+        const lng = meta["_lng_" + key.slice(5)];
+        if (typeof lat === "number" && typeof lng === "number") {
+          return { lat, lng };
+        }
+      }
+    }
+  }
+  return null;
+}
+const markers = computed(
+  () => allEntries.value.filter((e) => {
+    if (e.meta?.geoType === "line" || e.meta?.geoType === "measure")
+      return false;
+    return e.meta?.geoType === "marker" || getEntryLocation(e) !== null;
+  })
+);
+const lines = computed(
+  () => allEntries.value.filter((e) => e.meta?.geoType === "line")
+);
+const measures = computed(
+  () => allEntries.value.filter((e) => e.meta?.geoType === "measure")
+);
+const markerInstances = /* @__PURE__ */ new Map();
+const linePointInstances = /* @__PURE__ */ new Map();
+function entryToMarkerData(entry) {
+  const loc = getEntryLocation(entry);
+  return {
+    lng: loc?.lng ?? 0,
+    lat: loc?.lat ?? 0,
+    label: entry.label,
+    icon: entry.meta?.icon ?? "map-pin",
+    color: entry.meta?.color ?? "#3b82f6",
+    addedByName: "",
+    createdAt: entry.order
+  };
+}
+const MARKER_ICON_SVG = {
+  "map-pin": `<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>`,
+  "star": `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+  "flag": `<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/>`,
+  "home": `<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>`,
+  "building-2": `<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/>`,
+  "coffee": `<path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" y1="2" x2="6" y2="4"/><line x1="10" y1="2" x2="10" y2="4"/><line x1="14" y1="2" x2="14" y2="4"/>`,
+  "utensils": `<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>`,
+  "camera": `<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>`,
+  "heart": `<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
+  "zap": `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+  "triangle-alert": `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>`,
+  "car": `<path d="M19 17H5a2 2 0 0 1-2-2V9l2-4h14l2 4v6a2 2 0 0 1-2 2Z"/><path d="M9 17v2"/><path d="M15 17v2"/><circle cx="7.5" cy="13.5" r="1.5"/><circle cx="16.5" cy="13.5" r="1.5"/>`,
+  "plane": `<path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/>`,
+  "anchor": `<circle cx="12" cy="5" r="3"/><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/>`,
+  "tree-pine": `<path d="m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14"/><path d="m14 10 3 3.3a1 1 0 0 1-.7 1.7H7.7a1 1 0 0 1-.7-1.7L10 10"/><path d="M12 2 7 7.7a1 1 0 0 0 .7 1.7h8.6a1 1 0 0 0 .7-1.7L12 2Z"/><path d="M12 22v-3"/>`,
+  "mountain": `<path d="m8 3 4 8 5-5 5 15H2L8 3z"/>`,
+  "waves": `<path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>`,
+  "shield": `<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>`,
+  "crosshair": `<circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/>`,
+  "circle-dot": `<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>`,
+  "bookmark": `<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>`,
+  "gem": `<path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/>`,
+  "radio": `<circle cx="12" cy="12" r="2"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/><path d="M7.76 7.76a6 6 0 0 0 0 8.48"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M16.24 7.76a6 6 0 0 1 0 8.48"/>`,
+  "compass": `<circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>`
+};
+const MARKER_COLORS = [
+  { key: "blue", hex: "#3b82f6", border: "#1d4ed8" },
+  { key: "orange", hex: "#f97316", border: "#c2410c" },
+  { key: "green", hex: "#22c55e", border: "#15803d" },
+  { key: "red", hex: "#ef4444", border: "#b91c1c" },
+  { key: "purple", hex: "#a855f7", border: "#7e22ce" }
+];
+const COLOR_HEX = {
+  primary: "#6366f1",
+  blue: "#3b82f6",
+  sky: "#0ea5e9",
+  indigo: "#6366f1",
+  cyan: "#06b6d4",
+  green: "#22c55e",
+  emerald: "#10b981",
+  teal: "#14b8a6",
+  orange: "#f97316",
+  amber: "#f59e0b",
+  yellow: "#eab308",
+  red: "#ef4444",
+  rose: "#f43f5e",
+  pink: "#ec4899",
+  purple: "#a855f7",
+  violet: "#8b5cf6",
+  neutral: "#6b7280",
+  slate: "#64748b"
+};
+const mapContainer = ref();
+let map = null;
+let mapResizeObserver = null;
+const mapReady = ref(false);
+const mapFadedIn = ref(false);
+const colorMode = useColorMode();
+const isDark = computed(() => colorMode.value === "dark");
+const activeMode = ref("pan");
+const showLabels = ref(true);
+const popupProvider = shallowRef(null);
+const popupDocId = ref(null);
+const popupDocLabel = ref("");
+async function loadPopupProvider(nodeId, label) {
+  popupProvider.value = null;
+  popupDocId.value = nodeId;
+  popupDocLabel.value = label;
+  if (!childProviderRef.value) return;
+  try {
+    const childProv = await childProviderRef.value.loadChild(nodeId);
+    if (!childProv.isSynced) {
+      await new Promise((resolve) => {
+        const done = () => {
+          childProv.off("synced", done);
+          resolve();
+        };
+        childProv.on("synced", done);
+        setTimeout(resolve, 4e3);
+      });
+    }
+    const doc = childProv.document;
+    const frag = doc.getXmlFragment("default");
+    if (!frag._item) {
+      doc.transact(() => {
+        void frag.length;
+      });
+    }
+    if (popupDocId.value === nodeId) {
+      popupProvider.value = childProv;
+    }
+  } catch (e) {
+    console.error("Failed to load popup provider:", e);
+  }
+}
+function clearPopupProvider() {
+  popupProvider.value = null;
+  popupDocId.value = null;
+  popupDocLabel.value = "";
+}
+const selectedMarkerKey = ref(null);
+const markerPopupScreenPos = ref({ x: 0, y: 0 });
+const selectedMarker = computed(
+  () => selectedMarkerKey.value ? markers.value.find((e) => e.id === selectedMarkerKey.value) ?? null : null
+);
+const selectedLineKey = ref(null);
+const linePopupScreenPos = ref({ x: 0, y: 0 });
+const linePopupGeoPos = ref(null);
+const selectedLine = computed(
+  () => selectedLineKey.value ? lines.value.find((e) => e.id === selectedLineKey.value) ?? null : null
+);
+watch([selectedMarkerKey, selectedLineKey], ([mk, lk]) => {
+  if (!mk && !lk) clearPopupProvider();
+});
+const selectedMeasureKey = ref(null);
+const measurePopupScreenPos = ref({ x: 0, y: 0 });
+const measurePopupGeoPos = ref(null);
+const selectedMeasureInfo = computed(() => {
+  if (!selectedMeasureKey.value) return null;
+  const entry = measures.value.find((e) => e.id === selectedMeasureKey.value);
+  if (!entry) return null;
+  const pts = tree.childrenOf(entry.id).filter(
+    (p) => p.meta?.geoLat !== void 0 && p.meta?.geoLng !== void 0
+  );
+  if (pts.length < 2) return null;
+  let dist = 0;
+  for (let i = 1; i < pts.length; i++) {
+    dist += haversine(
+      [pts[i - 1].meta.geoLng, pts[i - 1].meta.geoLat],
+      [pts[i].meta.geoLng, pts[i].meta.geoLat]
+    );
+  }
+  return { entry, dist };
+});
+const drawPoints = ref([]);
+const drawMouseLngLat = ref(null);
+const measurePoints = ref([]);
+const measurePreviewScreenPos = ref({ x: 0, y: 0 });
+const measurePreviewTotal = computed(() => {
+  let d = 0;
+  for (let i = 1; i < measurePoints.value.length; i++)
+    d += haversine(measurePoints.value[i - 1], measurePoints.value[i]);
+  return d;
+});
+function haversine(a, b) {
+  const R = 6371e3;
+  const \u03C61 = a[1] * Math.PI / 180, \u03C62 = b[1] * Math.PI / 180;
+  const \u0394\u03C6 = (b[1] - a[1]) * Math.PI / 180, \u0394\u03BB = (b[0] - a[0]) * Math.PI / 180;
+  const x = Math.sin(\u0394\u03C6 / 2) ** 2 + Math.cos(\u03C61) * Math.cos(\u03C62) * Math.sin(\u0394\u03BB / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(x), Math.sqrt(1 - x));
+}
+function formatDist(m) {
+  return m >= 1e3 ? `${(m / 1e3).toFixed(1)} km` : `${Math.round(m)} m`;
+}
+const pingElements = /* @__PURE__ */ new Map();
+const measureLabelEls = /* @__PURE__ */ new Map();
+const followingClientId = ref(null);
+let lastAppliedFollowTime = 0;
+let followEaseInProgress = false;
+let rafId = 0;
+let broadcastFrame = 0;
+const CURSOR_LERP = 0.25;
+const CAMERA_LERP = 0.08;
+const myColorHex = computed(() => COLOR_HEX[userColorName.value] ?? "#6366f1");
+const mapCursorClass = computed(
+  () => activeMode.value !== "pan" && followingClientId.value === null ? "cursor-crosshair" : ""
+);
+const modeHint = computed(() => {
+  switch (activeMode.value) {
+    case "marker":
+      return locale.value.hintMarker ?? "Click to place marker";
+    case "ping":
+      return locale.value.hintPing ?? "Click to send ping";
+    case "line":
+      return drawPoints.value.length >= 2 ? `${drawPoints.value.length} ${locale.value.points ?? "points"}` : locale.value.hintLine ?? "Click to start drawing a line";
+    case "measure":
+      return measurePoints.value.length >= 1 ? measurePoints.value.length >= 2 ? `${formatDist(measurePreviewTotal.value)}` : locale.value.hintMeasureAdd ?? "Click to add points" : locale.value.hintMeasure ?? "Click to start measuring";
+    default:
+      return null;
+  }
+});
+const modeHintIcon = computed(() => {
+  switch (activeMode.value) {
+    case "marker":
+      return "i-lucide-map-pin";
+    case "ping":
+      return "i-lucide-radio";
+    case "line":
+      return "i-lucide-route";
+    case "measure":
+      return "i-lucide-ruler";
+    default:
+      return "i-lucide-hand";
+  }
+});
+function toolBtn(mode) {
+  const active = activeMode.value === mode;
+  return {
+    color: active ? "primary" : "neutral",
+    variant: active ? "solid" : "ghost",
+    size: "sm"
+  };
+}
+function setMode(mode) {
+  if (!props.editable) return;
+  if (activeMode.value === mode) {
+    activeMode.value = "pan";
+    return;
+  }
+  activeMode.value = mode;
+  if (mode !== "line") {
+    drawPoints.value = [];
+    drawMouseLngLat.value = null;
+    updateDrawPreview();
+  }
+  if (mode !== "measure") {
+    measurePoints.value = [];
+    clearMeasurePreview();
+  }
+  selectedMarkerKey.value = null;
+  selectedLineKey.value = null;
+  selectedMeasureKey.value = null;
+}
+const remoteUsers = computed(
+  () => states.value.filter((s) => s.clientId !== localClientId.value).map((s) => ({
+    clientId: s.clientId,
+    name: s.user?.name ?? "User",
+    color: s.user?.color ?? "blue",
+    colorHex: s.user?.color || "#6366f1",
+    camera: s.mapCamera,
+    cursor: s.mapCursor,
+    mapPing: s.mapPing
+  }))
+);
+const allPingStates = computed(
+  () => states.value.map((s) => ({
+    clientId: s.clientId,
+    colorHex: s.user?.color || "#6366f1",
+    mapPing: s.mapPing
+  })).filter((s) => s.mapPing && Date.now() - s.mapPing.t < 3e3)
+);
+const followingUser = computed(
+  () => remoteUsers.value.find((u) => u.clientId === followingClientId.value) ?? null
+);
+const getLightPreset = () => isDark.value ? "night" : "day";
+function broadcastCamera() {
+  if (!map || followingClientId.value !== null) return;
+  const c = map.getCenter();
+  setLocalState({
+    mapCamera: {
+      center: [c.lng, c.lat],
+      zoom: map.getZoom(),
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      t: Date.now()
+    }
+  });
+}
+function breakFollow() {
+  if (followEaseInProgress) return;
+  if (followingClientId.value !== null) followingClientId.value = null;
+}
+function followUser(clientId) {
+  if (clientId === localClientId.value) return;
+  followingClientId.value = clientId;
+  lastAppliedFollowTime = 0;
+}
+function emptyFC() {
+  return { type: "FeatureCollection", features: [] };
+}
+const presenceLerpMap = /* @__PURE__ */ new Map();
+function createPresenceEl(name, colorHex) {
+  const el = document.createElement("div");
+  el.className = "presence-marker";
+  const initials = name.split(" ").map((w) => w[0] ?? "").join("").substring(0, 2).toUpperCase();
+  el.innerHTML = `<div class="presence-avatar" style="background:${colorHex}">${initials}</div><div class="presence-label">${name}</div>`;
+  return el;
+}
+function tickPresenceMarkers() {
+  if (!map || !mapReady.value || !mapboxgl) return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const user of remoteUsers.value) {
+    if (!user.camera) continue;
+    seen.add(user.clientId);
+    const [tLng, tLat] = user.camera.center;
+    const p = presenceLerpMap.get(user.clientId);
+    if (p) {
+      p.tgtLng = tLng;
+      p.tgtLat = tLat;
+      p.curLng += (p.tgtLng - p.curLng) * CAMERA_LERP;
+      p.curLat += (p.tgtLat - p.curLat) * CAMERA_LERP;
+      p.marker.setLngLat([p.curLng, p.curLat]);
+    } else {
+      const m = new mapboxgl.Marker({
+        element: createPresenceEl(user.name, user.colorHex),
+        anchor: "bottom"
+      }).setLngLat([tLng, tLat]).addTo(map);
+      presenceLerpMap.set(user.clientId, {
+        marker: m,
+        curLng: tLng,
+        curLat: tLat,
+        tgtLng: tLng,
+        tgtLat: tLat
+      });
+    }
+  }
+  for (const [id, p] of presenceLerpMap) {
+    if (!seen.has(id)) {
+      p.marker.remove();
+      presenceLerpMap.delete(id);
+    }
+  }
+}
+const cursorLerpMap = /* @__PURE__ */ new Map();
+function createCursorEl(name, colorHex) {
+  const el = document.createElement("div");
+  el.className = "map-cursor-el";
+  el.innerHTML = `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="display:block">
+      <path d="M2 2L7 14L9 9L14 7L2 2Z" fill="${colorHex}" stroke="rgba(0,0,0,.25)" stroke-width="1" stroke-linejoin="round"/>
+    </svg>
+    <span class="map-cursor-name" style="background:${colorHex}">${name}</span>
+  `;
+  return el;
+}
+function tickCursors() {
+  if (!map || !mapContainer.value) return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const user of remoteUsers.value) {
+    if (!user.cursor) continue;
+    seen.add(user.clientId);
+    const proj = map.project([user.cursor.lng, user.cursor.lat]);
+    const c = cursorLerpMap.get(user.clientId);
+    if (c) {
+      c.screenX += (proj.x - c.screenX) * CURSOR_LERP;
+      c.screenY += (proj.y - c.screenY) * CURSOR_LERP;
+      c.el.style.transform = `translate(${c.screenX}px,${c.screenY}px)`;
+    } else {
+      const el = createCursorEl(user.name, user.colorHex);
+      mapContainer.value.appendChild(el);
+      el.style.transform = `translate(${proj.x}px,${proj.y}px)`;
+      cursorLerpMap.set(user.clientId, {
+        el,
+        screenX: proj.x,
+        screenY: proj.y
+      });
+    }
+  }
+  for (const [id, c] of cursorLerpMap) {
+    if (!seen.has(id)) {
+      c.el.remove();
+      cursorLerpMap.delete(id);
+    }
+  }
+}
+let cursorBroadcastFrame = 0;
+function onMapPointerMove(e) {
+  if (!map || !mapContainer.value) return;
+  cursorBroadcastFrame++;
+  if (cursorBroadcastFrame % 2 !== 0) return;
+  const rect = mapContainer.value.getBoundingClientRect();
+  const x = e.clientX - rect.left, y = e.clientY - rect.top;
+  try {
+    const { lng, lat } = map.unproject([x, y]);
+    setLocalState({ mapCursor: { lng, lat } });
+    if (activeMode.value === "line" && drawPoints.value.length > 0) {
+      drawMouseLngLat.value = [lng, lat];
+      updateDrawPreview();
+    }
+  } catch {
+  }
+}
+function onMapPointerLeave() {
+  setLocalState({ mapCursor: null });
+  drawMouseLngLat.value = null;
+  if (activeMode.value === "line") updateDrawPreview();
+}
+function getIconSVG(name) {
+  if (MARKER_ICON_SVG[name]) return MARKER_ICON_SVG[name];
+  return MARKER_ICON_SVG["map-pin"];
+}
+function buildPinHTML(data) {
+  const colorEntry = MARKER_COLORS.find((c) => c.hex === data.color);
+  const hex = data.color || "#3b82f6";
+  const border = colorEntry?.border ?? "#333";
+  const svg = getIconSVG(data.icon ?? "map-pin");
+  return { hex, border, svg };
+}
+function createMarkerEl(data, key) {
+  const { hex, border, svg } = buildPinHTML(data);
+  const container = document.createElement("div");
+  container.className = "collab-marker-container";
+  const pin = document.createElement("div");
+  pin.className = "collab-marker-pin";
+  pin.style.cssText = `background:${hex};box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 2px ${border};`;
+  pin.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="13" height="13">${svg}</svg>`;
+  const labelEl = document.createElement("div");
+  labelEl.className = "collab-marker-label";
+  labelEl.textContent = data.label;
+  pin.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    openMarkerPopup(key);
+  });
+  if (props.editable) {
+    container.addEventListener("contextmenu", (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (selectedMarkerKey.value === key) closeMarkerPopup();
+      tree.deleteEntry(key);
+    });
+  }
+  container.appendChild(pin);
+  container.appendChild(labelEl);
+  return container;
+}
+function updateMarkerEl(el, data) {
+  const pin = el.querySelector(".collab-marker-pin");
+  const label = el.querySelector(".collab-marker-label");
+  if (pin) {
+    const { hex, border, svg } = buildPinHTML(data);
+    pin.style.cssText = `background:${hex};box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 2px ${border};`;
+    pin.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="13" height="13">${svg}</svg>`;
+  }
+  if (label) label.textContent = data.label;
+}
+function syncMarkers() {
+  if (!map || !mapReady.value || !mapboxgl) return;
+  const currentKeys = new Set(markers.value.map((e) => e.id));
+  for (const [key, m] of markerInstances) {
+    if (!currentKeys.has(key)) {
+      m.remove();
+      markerInstances.delete(key);
+    }
+  }
+  for (const entry of markers.value) {
+    const data = entryToMarkerData(entry);
+    if (markerInstances.has(entry.id)) {
+      updateMarkerEl(markerInstances.get(entry.id).getElement(), data);
+    } else {
+      const el = createMarkerEl(data, entry.id);
+      const m = new mapboxgl.Marker({ element: el, anchor: "bottom", draggable: props.editable }).setLngLat([data.lng, data.lat]).addTo(map);
+      if (props.editable) {
+        m.on("dragend", () => {
+          const lngLat = m.getLngLat();
+          tree.updateMeta(entry.id, { geoLng: lngLat.lng, geoLat: lngLat.lat });
+        });
+      }
+      markerInstances.set(entry.id, m);
+    }
+    const inst = markerInstances.get(entry.id);
+    const cur = inst.getLngLat();
+    if (cur.lng !== data.lng || cur.lat !== data.lat) {
+      inst.setLngLat([data.lng, data.lat]);
+    }
+  }
+}
+watch(markers, () => syncMarkers(), { deep: true });
+watch(
+  () => tree.treeMap.yMap.value,
+  (ymap, oldYmap) => {
+    if (oldYmap) oldYmap.unobserve(onTreeYMapChange);
+    if (ymap) ymap.observe(onTreeYMapChange);
+  },
+  { immediate: true }
+);
+function onTreeYMapChange() {
+  syncMarkers();
+  syncLineSource();
+  syncLinePoints();
+}
+onBeforeUnmount(() => {
+  tree.treeMap.yMap.value?.unobserve(onTreeYMapChange);
+});
+function openMarkerPopup(key) {
+  const entry = markers.value.find((e) => e.id === key);
+  if (!entry) return;
+  selectedMarkerKey.value = key;
+  selectedLineKey.value = null;
+  selectedMeasureKey.value = null;
+  updateAllPopupPositions();
+  loadPopupProvider(key, entry.label);
+}
+function closeMarkerPopup() {
+  selectedMarkerKey.value = null;
+}
+function deleteSelectedMarker() {
+  if (!selectedMarkerKey.value || !props.editable) return;
+  tree.deleteEntry(selectedMarkerKey.value);
+  closeMarkerPopup();
+}
+function openLinePopup(key, geoPos) {
+  selectedLineKey.value = key;
+  linePopupGeoPos.value = geoPos;
+  selectedMarkerKey.value = null;
+  selectedMeasureKey.value = null;
+  updateAllPopupPositions();
+  const entry = lines.value.find((e) => e.id === key);
+  if (entry) loadPopupProvider(key, entry.label);
+}
+function deleteSelectedLine() {
+  if (!selectedLineKey.value || !props.editable) return;
+  tree.deleteEntry(selectedLineKey.value);
+  selectedLineKey.value = null;
+}
+function openMeasurePopup(key, geoPos) {
+  selectedMeasureKey.value = key;
+  measurePopupGeoPos.value = geoPos;
+  selectedMarkerKey.value = null;
+  selectedLineKey.value = null;
+  updateAllPopupPositions();
+}
+function deleteSelectedMeasure() {
+  if (!selectedMeasureKey.value || !props.editable) return;
+  tree.deleteEntry(selectedMeasureKey.value);
+  selectedMeasureKey.value = null;
+}
+function sendPing(lng, lat) {
+  setLocalState({ mapPing: { lng, lat, t: Date.now() } });
+  setTimeout(() => setLocalState({ mapPing: null }), 3500);
+}
+function createPingEl(colorHex) {
+  const root = document.createElement("div");
+  root.className = "map-ping-root";
+  root.style.setProperty("--ping-color", colorHex);
+  root.innerHTML = `
+    <div class="map-ping-ring" style="animation-delay:0s"></div>
+    <div class="map-ping-ring" style="animation-delay:0.5s"></div>
+    <div class="map-ping-ring" style="animation-delay:1s"></div>
+    <div class="map-ping-dot"></div>
+  `;
+  return root;
+}
+function tickPings() {
+  if (!map || !mapContainer.value) return;
+  const seenIds = /* @__PURE__ */ new Set();
+  for (const ps of allPingStates.value) {
+    if (!ps.mapPing) continue;
+    if (Date.now() - ps.mapPing.t >= 3e3) continue;
+    seenIds.add(ps.clientId);
+    const proj = map.project([ps.mapPing.lng, ps.mapPing.lat]);
+    let el = pingElements.get(ps.clientId);
+    if (!el) {
+      el = createPingEl(ps.colorHex);
+      mapContainer.value.appendChild(el);
+      pingElements.set(ps.clientId, el);
+    }
+    el.style.left = `${proj.x}px`;
+    el.style.top = `${proj.y}px`;
+  }
+  for (const [id, el] of pingElements) {
+    if (!seenIds.has(id)) {
+      el.remove();
+      pingElements.delete(id);
+    }
+  }
+}
+function updateDrawPreview() {
+  if (!map || !map.getSource("draw-preview")) return;
+  const pts = drawPoints.value;
+  const mouse = drawMouseLngLat.value;
+  const coords = mouse && pts.length > 0 ? [...pts, mouse] : [...pts];
+  map.getSource("draw-preview")?.setData({
+    type: "FeatureCollection",
+    features: coords.length >= 2 ? [
+      {
+        type: "Feature",
+        geometry: { type: "LineString", coordinates: coords },
+        properties: {}
+      }
+    ] : []
+  });
+  map.getSource("draw-points")?.setData({
+    type: "FeatureCollection",
+    features: pts.map((p) => ({
+      type: "Feature",
+      geometry: { type: "Point", coordinates: p },
+      properties: {}
+    }))
+  });
+}
+function finishLine() {
+  if (drawPoints.value.length < 2 || !props.editable) return;
+  const lineId = tree.createChild(null, "Line");
+  tree.updateMeta(lineId, { geoType: "line", color: myColorHex.value });
+  drawPoints.value.forEach((pt, i) => {
+    const ptId = tree.createChild(lineId, `Point ${i + 1}`);
+    tree.updateMeta(ptId, { geoType: "marker", geoLng: pt[0], geoLat: pt[1] });
+  });
+  drawPoints.value = [];
+  drawMouseLngLat.value = null;
+  activeMode.value = "pan";
+  updateDrawPreview();
+}
+function cancelDrawing() {
+  drawPoints.value = [];
+  drawMouseLngLat.value = null;
+  updateDrawPreview();
+}
+function syncLineSource() {
+  if (!map || !map.getSource("collab-lines")) return;
+  const features = lines.value.map((line) => {
+    const pts = tree.childrenOf(line.id).filter(
+      (p) => p.meta?.geoLat !== void 0 && p.meta?.geoLng !== void 0
+    );
+    const coords = pts.map(
+      (p) => [p.meta.geoLng, p.meta.geoLat]
+    );
+    return {
+      type: "Feature",
+      geometry: { type: "LineString", coordinates: coords },
+      properties: {
+        color: line.meta?.color ?? "#3b82f6",
+        label: line.label ?? "",
+        key: line.id
+      }
+    };
+  });
+  map.getSource("collab-lines")?.setData({
+    type: "FeatureCollection",
+    features
+  });
+}
+function createLinePointEl() {
+  const el = document.createElement("div");
+  el.className = "collab-line-point";
+  return el;
+}
+function syncLinePoints() {
+  if (!map || !mapboxgl) return;
+  const activePointKeys = /* @__PURE__ */ new Set();
+  for (const line of lines.value) {
+    const lineColor = line.meta?.color ?? "#3b82f6";
+    const pts = tree.childrenOf(line.id).filter(
+      (p) => p.meta?.geoLat !== void 0 && p.meta?.geoLng !== void 0
+    );
+    for (const pt of pts) {
+      activePointKeys.add(pt.id);
+      const lng = pt.meta.geoLng;
+      const lat = pt.meta.geoLat;
+      if (linePointInstances.has(pt.id)) {
+        const inst = linePointInstances.get(pt.id);
+        const cur = inst.getLngLat();
+        if (cur.lng !== lng || cur.lat !== lat) inst.setLngLat([lng, lat]);
+        const el = inst.getElement();
+        el.style.background = lineColor;
+      } else {
+        const el = createLinePointEl();
+        el.style.background = lineColor;
+        el.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          openNode(pt.id, pt.label);
+        });
+        const m = new mapboxgl.Marker({ element: el, anchor: "center", draggable: props.editable }).setLngLat([lng, lat]).addTo(map);
+        if (props.editable) {
+          m.on("dragend", () => {
+            const lngLat = m.getLngLat();
+            tree.updateMeta(pt.id, { geoLng: lngLat.lng, geoLat: lngLat.lat });
+          });
+        }
+        linePointInstances.set(pt.id, m);
+      }
+    }
+  }
+  for (const [key, m] of linePointInstances) {
+    if (!activePointKeys.has(key)) {
+      m.remove();
+      linePointInstances.delete(key);
+    }
+  }
+}
+watch(
+  tree.entries,
+  () => {
+    if (selectedLineKey.value && !lines.value.find((e) => e.id === selectedLineKey.value))
+      selectedLineKey.value = null;
+    syncMeasureSource();
+    if (selectedMeasureKey.value && !measures.value.find((e) => e.id === selectedMeasureKey.value))
+      selectedMeasureKey.value = null;
+  },
+  { deep: true }
+);
+function updateMeasurePreview() {
+  if (!map || !map.getSource("measure-preview-lines")) return;
+  const pts = measurePoints.value;
+  map.getSource("measure-preview-lines")?.setData({
+    type: "FeatureCollection",
+    features: pts.length >= 2 ? [
+      {
+        type: "Feature",
+        geometry: { type: "LineString", coordinates: pts },
+        properties: {}
+      }
+    ] : []
+  });
+  map.getSource("measure-preview-points")?.setData({
+    type: "FeatureCollection",
+    features: pts.map((p) => ({
+      type: "Feature",
+      geometry: { type: "Point", coordinates: p },
+      properties: {}
+    }))
+  });
+  if (pts.length >= 1 && map) {
+    const last = pts[pts.length - 1];
+    const proj = map.project(last);
+    measurePreviewScreenPos.value = { x: proj.x + 10, y: proj.y - 10 };
+  }
+}
+function clearMeasurePreview() {
+  if (!map) return;
+  map.getSource("measure-preview-lines")?.setData(emptyFC());
+  map.getSource("measure-preview-points")?.setData(emptyFC());
+}
+function finishMeasure() {
+  if (measurePoints.value.length < 2 || !props.editable) return;
+  const measureId = tree.createChild(null, "Measure");
+  tree.updateMeta(measureId, { geoType: "measure" });
+  measurePoints.value.forEach((pt, i) => {
+    const ptId = tree.createChild(measureId, `Point ${i + 1}`);
+    tree.updateMeta(ptId, { geoType: "marker", geoLng: pt[0], geoLat: pt[1] });
+  });
+  measurePoints.value = [];
+  clearMeasurePreview();
+}
+function syncMeasureSource() {
+  if (!map || !map.getSource("measure-collab-lines")) return;
+  const lineFeatures = measures.value.map((entry) => {
+    const pts = tree.childrenOf(entry.id).filter((p) => p.meta?.geoLat !== void 0);
+    const coords = pts.map(
+      (p) => [p.meta.geoLng, p.meta.geoLat]
+    );
+    return {
+      type: "Feature",
+      geometry: { type: "LineString", coordinates: coords },
+      properties: { key: entry.id }
+    };
+  });
+  map.getSource("measure-collab-lines")?.setData({
+    type: "FeatureCollection",
+    features: lineFeatures
+  });
+  const pointFeatures = measures.value.flatMap(
+    (entry) => tree.childrenOf(entry.id).filter((p) => p.meta?.geoLat !== void 0).map((p, i) => ({
+      type: "Feature",
+      id: `${entry.id}-${i}`,
+      geometry: {
+        type: "Point",
+        coordinates: [p.meta.geoLng, p.meta.geoLat]
+      },
+      properties: { measureId: entry.id }
+    }))
+  );
+  map.getSource("measure-collab-points")?.setData({
+    type: "FeatureCollection",
+    features: pointFeatures
+  });
+}
+function tickMeasureLabels() {
+  if (!map || !mapContainer.value || !mapReady.value) return;
+  const seen = /* @__PURE__ */ new Set();
+  for (const entry of measures.value) {
+    const pts = tree.childrenOf(entry.id).filter((p) => p.meta?.geoLat !== void 0);
+    if (pts.length < 2) continue;
+    seen.add(entry.id);
+    const midPt = pts[Math.floor((pts.length - 1) / 2)];
+    const proj = map.project([midPt.meta.geoLng, midPt.meta.geoLat]);
+    let dist = 0;
+    for (let i = 1; i < pts.length; i++) {
+      dist += haversine(
+        [pts[i - 1].meta.geoLng, pts[i - 1].meta.geoLat],
+        [pts[i].meta.geoLng, pts[i].meta.geoLat]
+      );
+    }
+    let el = measureLabelEls.get(entry.id);
+    if (!el) {
+      el = document.createElement("div");
+      el.className = "measure-label-el";
+      mapContainer.value.appendChild(el);
+      measureLabelEls.set(entry.id, el);
+    }
+    el.textContent = formatDist(dist);
+    el.style.left = `${proj.x}px`;
+    el.style.top = `${proj.y}px`;
+  }
+  for (const [id, el] of measureLabelEls) {
+    if (!seen.has(id)) {
+      el.remove();
+      measureLabelEls.delete(id);
+    }
+  }
+}
+function updateAllPopupPositions() {
+  if (!map) return;
+  if (selectedMarkerKey.value) {
+    const entry = markers.value.find((e) => e.id === selectedMarkerKey.value);
+    if (entry) {
+      const loc = getEntryLocation(entry);
+      const pt = map.project([loc?.lng ?? 0, loc?.lat ?? 0]);
+      markerPopupScreenPos.value = { x: pt.x + 16, y: pt.y - 80 };
+    }
+  }
+  if (linePopupGeoPos.value) {
+    const pt = map.project(linePopupGeoPos.value);
+    linePopupScreenPos.value = { x: pt.x + 8, y: pt.y - 50 };
+  }
+  if (measurePopupGeoPos.value) {
+    const pt = map.project(measurePopupGeoPos.value);
+    measurePopupScreenPos.value = { x: pt.x + 8, y: pt.y - 50 };
+  }
+  if (measurePoints.value.length >= 1) {
+    const last = measurePoints.value[measurePoints.value.length - 1];
+    const proj = map.project(last);
+    measurePreviewScreenPos.value = { x: proj.x + 10, y: proj.y - 10 };
+  }
+}
+function handleMapClick(e) {
+  if (followingClientId.value !== null) return;
+  const target = e.originalEvent.target;
+  if (target.closest(".collab-marker-pin") || target.closest(".collab-line-point")) return;
+  if (selectedMarkerKey.value) {
+    closeMarkerPopup();
+    return;
+  }
+  switch (activeMode.value) {
+    case "pan": {
+      const bbox = [
+        [e.point.x - 8, e.point.y - 8],
+        [e.point.x + 8, e.point.y + 8]
+      ];
+      const lineFeats = map.queryRenderedFeatures(bbox, {
+        layers: ["collab-lines-layer"]
+      });
+      if (lineFeats.length > 0) {
+        const id = lineFeats[0].properties?.key;
+        if (id && lines.value.find((e2) => e2.id === id)) {
+          openLinePopup(id, [e.lngLat.lng, e.lngLat.lat]);
+          return;
+        }
+      }
+      const measureFeats = map.queryRenderedFeatures(bbox, {
+        layers: ["measure-collab-lines-layer"]
+      });
+      if (measureFeats.length > 0) {
+        const id = measureFeats[0].properties?.key;
+        if (id && measures.value.find((e2) => e2.id === id)) {
+          openMeasurePopup(id, [e.lngLat.lng, e.lngLat.lat]);
+          return;
+        }
+      }
+      selectedLineKey.value = null;
+      selectedMeasureKey.value = null;
+      break;
+    }
+    case "marker":
+      if (!props.editable) break;
+      if (target.closest(".map-ping-root,.presence-marker,.map-cursor-el"))
+        return;
+      {
+        const id = tree.createChild(null, userName.value);
+        tree.updateMeta(id, {
+          geoType: "marker",
+          geoLat: e.lngLat.lat,
+          geoLng: e.lngLat.lng,
+          icon: "map-pin",
+          color: myColorHex.value
+        });
+      }
+      break;
+    case "ping":
+      sendPing(e.lngLat.lng, e.lngLat.lat);
+      activeMode.value = "pan";
+      break;
+    case "line":
+      if (!props.editable) break;
+      drawPoints.value.push([e.lngLat.lng, e.lngLat.lat]);
+      updateDrawPreview();
+      break;
+    case "measure": {
+      if (!props.editable) break;
+      if (measurePoints.value.length >= 2) {
+        const last = measurePoints.value[measurePoints.value.length - 1];
+        const proj = map.project(last);
+        const dx = e.point.x - proj.x, dy = e.point.y - proj.y;
+        if (Math.sqrt(dx * dx + dy * dy) < 15) {
+          finishMeasure();
+          break;
+        }
+      }
+      measurePoints.value.push([e.lngLat.lng, e.lngLat.lat]);
+      updateMeasurePreview();
+      break;
+    }
+  }
+}
+function handleMapDblClick(e) {
+  if (activeMode.value === "line" && drawPoints.value.length >= 2) {
+    e.preventDefault();
+    finishLine();
+  }
+}
+function handleMapContextMenu(e) {
+  if (!map || !props.editable) return;
+  e.originalEvent.preventDefault();
+  const bbox = [
+    [e.point.x - 8, e.point.y - 8],
+    [e.point.x + 8, e.point.y + 8]
+  ];
+  const lineFeats = map.queryRenderedFeatures(bbox, {
+    layers: ["collab-lines-layer"]
+  });
+  if (lineFeats.length > 0) {
+    const id = lineFeats[0].properties?.key;
+    if (id) {
+      tree.deleteEntry(id);
+      if (selectedLineKey.value === id) selectedLineKey.value = null;
+    }
+    return;
+  }
+  const measureFeats = map.queryRenderedFeatures(bbox, {
+    layers: ["measure-collab-lines-layer"]
+  });
+  if (measureFeats.length > 0) {
+    const id = measureFeats[0].properties?.key;
+    if (id) {
+      tree.deleteEntry(id);
+      if (selectedMeasureKey.value === id) selectedMeasureKey.value = null;
+    }
+    return;
+  }
+}
+function onKeyDown(e) {
+  if (e.key === "Escape") {
+    if (activeMode.value === "line") cancelDrawing();
+    if (activeMode.value === "measure") {
+      measurePoints.value = [];
+      clearMeasurePreview();
+    }
+    closeMarkerPopup();
+    selectedLineKey.value = null;
+    selectedMeasureKey.value = null;
+    activeMode.value = "pan";
+  }
+}
+function applyFollowCamera() {
+  const user = followingUser.value;
+  if (!user?.camera || !map) return;
+  if (user.camera.t <= lastAppliedFollowTime) return;
+  lastAppliedFollowTime = user.camera.t;
+  followEaseInProgress = true;
+  map.easeTo({
+    center: user.camera.center,
+    zoom: user.camera.zoom,
+    pitch: user.camera.pitch,
+    bearing: user.camera.bearing,
+    duration: 200,
+    easing: (t) => t
+  });
+  setTimeout(() => {
+    followEaseInProgress = false;
+  }, 250);
+}
+function startLoop() {
+  const loop = () => {
+    broadcastFrame++;
+    if (followingClientId.value !== null) applyFollowCamera();
+    if (mapReady.value) {
+      tickCursors();
+      tickPings();
+      tickMeasureLabels();
+      updateAllPopupPositions();
+    }
+    if (broadcastFrame % 2 === 0 && mapReady.value) tickPresenceMarkers();
+    if (followingClientId.value === null && broadcastFrame % 4 === 0 && map)
+      broadcastCamera();
+    rafId = requestAnimationFrame(loop);
+  };
+  rafId = requestAnimationFrame(loop);
+}
+function applyLabels() {
+  if (!map?.isStyleLoaded()) return;
+  const v = showLabels.value;
+  map.setConfigProperty("basemap", "showPlaceLabels", v);
+  map.setConfigProperty("basemap", "showPointOfInterestLabels", v);
+  map.setConfigProperty("basemap", "showRoadLabels", v);
+  map.setConfigProperty("basemap", "showTransitLabels", v);
+}
+watch(showLabels, applyLabels);
+watch(activeMode, (mode) => {
+  if (!map) return;
+  if (mode === "line") map.doubleClickZoom.disable();
+  else map.doubleClickZoom.enable();
+});
+onMounted(async () => {
+  try {
+    const mod = await import("mapbox-gl");
+    mapboxgl = mod.default || mod;
+    await import("mapbox-gl/dist/mapbox-gl.css");
+    mapboxLoaded.value = true;
+  } catch {
+    mapboxError.value = "Map renderer requires mapbox-gl. Install it with: pnpm add mapbox-gl";
+    return;
+  }
+  if (!mapContainer.value) return;
+  window.addEventListener("keydown", onKeyDown);
+  const token = config.public?.abracadabra?.mapboxToken;
+  if (!token) {
+    mapboxError.value = "Mapbox access token not configured. Set abracadabra.mapboxToken in runtimeConfig.public.";
+    return;
+  }
+  mapboxgl.accessToken = token;
+  map = new mapboxgl.Map({
+    container: mapContainer.value,
+    style: "mapbox://styles/mapbox/standard",
+    projection: "globe",
+    center: [0, 20],
+    zoom: 2,
+    pitch: 0,
+    bearing: 0,
+    antialias: true,
+    attributionControl: false
+  });
+  map.on("style.load", () => {
+    map.setConfigProperty("basemap", "lightPreset", getLightPreset());
+    applyLabels();
+  });
+  map.on("load", () => {
+    try {
+      map.addSource("mapbox-dem", {
+        type: "raster-dem",
+        url: "mapbox://mapbox.mapbox-terrain-dem-v1",
+        tileSize: 512,
+        maxzoom: 14
+      });
+      map.setTerrain({ source: "mapbox-dem", exaggeration: 1 });
+    } catch {
+    }
+    map.addControl(
+      new mapboxgl.AttributionControl({ compact: true }),
+      "bottom-right"
+    );
+    map.addSource("collab-lines", { type: "geojson", data: emptyFC() });
+    map.addLayer({
+      id: "collab-lines-layer",
+      type: "line",
+      source: "collab-lines",
+      paint: {
+        "line-color": ["get", "color"],
+        "line-width": 4,
+        "line-opacity": 0.85
+      }
+    });
+    map.addSource("draw-preview", { type: "geojson", data: emptyFC() });
+    map.addLayer({
+      id: "draw-preview-layer",
+      type: "line",
+      source: "draw-preview",
+      paint: {
+        "line-color": myColorHex.value,
+        "line-width": 2,
+        "line-dasharray": [4, 3],
+        "line-opacity": 0.7
+      }
+    });
+    map.addSource("draw-points", { type: "geojson", data: emptyFC() });
+    map.addLayer({
+      id: "draw-points-layer",
+      type: "circle",
+      source: "draw-points",
+      paint: {
+        "circle-radius": 5,
+        "circle-color": myColorHex.value,
+        "circle-stroke-color": "white",
+        "circle-stroke-width": 2
+      }
+    });
+    map.addSource("measure-preview-lines", {
+      type: "geojson",
+      data: emptyFC()
+    });
+    map.addLayer({
+      id: "measure-preview-lines-layer",
+      type: "line",
+      source: "measure-preview-lines",
+      paint: {
+        "line-color": "#facc15",
+        "line-width": 2,
+        "line-dasharray": [3, 2]
+      }
+    });
+    map.addSource("measure-preview-points", {
+      type: "geojson",
+      data: emptyFC()
+    });
+    map.addLayer({
+      id: "measure-preview-points-layer",
+      type: "circle",
+      source: "measure-preview-points",
+      paint: {
+        "circle-radius": 6,
+        "circle-color": "#facc15",
+        "circle-stroke-color": "white",
+        "circle-stroke-width": 2
+      }
+    });
+    map.addSource("measure-collab-lines", {
+      type: "geojson",
+      data: emptyFC()
+    });
+    map.addLayer({
+      id: "measure-collab-lines-layer",
+      type: "line",
+      source: "measure-collab-lines",
+      paint: {
+        "line-color": "#facc15",
+        "line-width": 3,
+        "line-dasharray": [3, 2],
+        "line-opacity": 0.85
+      }
+    });
+    map.addSource("measure-collab-points", {
+      type: "geojson",
+      data: emptyFC()
+    });
+    map.addLayer({
+      id: "measure-collab-points-layer",
+      type: "circle",
+      source: "measure-collab-points",
+      paint: {
+        "circle-radius": 4,
+        "circle-color": "#facc15",
+        "circle-stroke-color": "white",
+        "circle-stroke-width": 1.5,
+        "circle-opacity": 0.85
+      }
+    });
+    mapReady.value = true;
+    setTimeout(() => mapFadedIn.value = true, 100);
+    map.on("moveend", () => {
+      if (followingClientId.value === null) broadcastCamera();
+    });
+    for (const ev of ["dragstart", "zoomstart", "pitchstart", "rotatestart"]) {
+      map.on(ev, breakFollow);
+    }
+    map.on("click", handleMapClick);
+    map.on("dblclick", handleMapDblClick);
+    map.on("contextmenu", handleMapContextMenu);
+    syncMarkers();
+    syncLineSource();
+    syncLinePoints();
+    syncMeasureSource();
+    startLoop();
+    broadcastCamera();
+  });
+  map.on("error", (e) => console.warn("Map error:", e));
+  const ro = new ResizeObserver(() => map?.resize());
+  ro.observe(mapContainer.value);
+  mapResizeObserver = ro;
+});
+watch(isDark, () => {
+  if (map?.isStyleLoaded())
+    map.setConfigProperty("basemap", "lightPreset", getLightPreset());
+});
+onUnmounted(() => {
+  mapResizeObserver?.disconnect();
+  mapResizeObserver = null;
+  window.removeEventListener("keydown", onKeyDown);
+  cancelAnimationFrame(rafId);
+  setLocalState({ mapCamera: void 0, mapCursor: null, mapPing: null });
+  for (const m of markerInstances.values()) m.remove();
+  for (const m of linePointInstances.values()) m.remove();
+  for (const p of presenceLerpMap.values()) p.marker.remove();
+  for (const c of cursorLerpMap.values()) c.el.remove();
+  for (const e of pingElements.values()) e.remove();
+  for (const e of measureLabelEls.values()) e.remove();
+  markerInstances.clear();
+  linePointInstances.clear();
+  presenceLerpMap.clear();
+  cursorLerpMap.clear();
+  pingElements.clear();
+  measureLabelEls.clear();
+  map?.remove();
+  map = null;
+});
+function userInitials(name) {
+  return name.split(" ").map((w) => w[0] ?? "").join("").substring(0, 2).toUpperCase();
+}
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="a-map-renderer-root">
+    <!-- Mapbox not installed fallback -->
+    <div
+      v-if="mapboxError"
+      class="flex flex-col items-center justify-center flex-1 gap-3"
+    >
+      <UIcon
+        name="i-lucide-map"
+        class="size-12 text-(--ui-text-dimmed)"
+      />
+      <p class="text-sm text-(--ui-text-muted) text-center max-w-xs">
+        {{ mapboxError }}
+      </p>
+    </div>
+
+    <template v-else>
+      <!-- Map canvas -->
+      <div
+        ref="mapContainer"
+        class="absolute inset-0 transition-opacity duration-1000"
+        :class="[mapFadedIn ? 'opacity-100' : 'opacity-0', mapCursorClass]"
+        @pointermove="onMapPointerMove"
+        @pointerleave="onMapPointerLeave"
+      />
+
+      <!-- Toolbar (bottom-center) -->
+      <div
+        v-if="editable"
+        class="a-map-toolbar-bar"
+      >
+        <div class="toolbar-group">
+          <UButton
+            icon="i-lucide-hand"
+            v-bind="toolBtn('pan')"
+            :title="locale.pan"
+            @click="setMode('pan')"
+          />
+          <UButton
+            icon="i-lucide-map-pin"
+            v-bind="toolBtn('marker')"
+            :title="locale.addMarker"
+            @click="setMode('marker')"
+          />
+          <UButton
+            icon="i-lucide-radio"
+            v-bind="toolBtn('ping')"
+            :title="locale.ping"
+            @click="setMode('ping')"
+          />
+          <UButton
+            icon="i-lucide-route"
+            v-bind="toolBtn('line')"
+            :title="locale.addLine"
+            @click="setMode('line')"
+          />
+          <UButton
+            icon="i-lucide-ruler"
+            v-bind="toolBtn('measure')"
+            :title="locale.addMeasure"
+            @click="setMode('measure')"
+          />
+        </div>
+        <div class="toolbar-divider" />
+        <UButton
+          icon="i-lucide-type"
+          size="sm"
+          :color="showLabels ? 'primary' : 'neutral'"
+          :variant="showLabels ? 'soft' : 'ghost'"
+          :title="showLabels ? locale.hideLabels : locale.showLabels"
+          :class="{ 'opacity-40': !showLabels }"
+          @click="showLabels = !showLabels"
+        />
+      </div>
+
+      <!-- Follow badge -->
+      <Transition name="badge-fade">
+        <div
+          v-if="followingUser"
+          class="follow-badge"
+        >
+          <UIcon
+            name="i-lucide-eye"
+            class="badge-icon"
+          />
+          <span>{{ locale.following }} {{ followingUser.name }}</span>
+          <button
+            class="badge-close"
+            @click="followingClientId = null"
+          >
+            <UIcon name="i-lucide-x" />
+          </button>
+        </div>
+      </Transition>
+
+      <!-- Mode hint bar -->
+      <Transition name="badge-fade">
+        <div
+          v-if="modeHint"
+          class="place-hint"
+        >
+          <UIcon :name="modeHintIcon" />
+          <span>{{ modeHint }}</span>
+          <template v-if="activeMode === 'line' && drawPoints.length >= 2">
+            <span class="ml-1 opacity-50">&middot;</span>
+            <button
+              class="underline opacity-80 ml-1 pointer-events-auto"
+              @click="finishLine"
+            >
+              {{ locale.finish }}
+            </button>
+          </template>
+          <template v-if="activeMode === 'measure' && measurePoints.length >= 2">
+            <span class="ml-1 opacity-50">&middot;</span>
+            <button
+              class="underline opacity-80 ml-1 pointer-events-auto"
+              @click="finishMeasure"
+            >
+              {{ locale.save }}
+            </button>
+          </template>
+        </div>
+      </Transition>
+
+      <!-- In-progress measure distance badge -->
+      <Transition name="badge-fade">
+        <div
+          v-if="activeMode === 'measure' && measurePoints.length >= 2"
+          class="measure-preview-badge"
+          :style="{
+  left: measurePreviewScreenPos.x + 'px',
+  top: measurePreviewScreenPos.y + 'px'
+}"
+        >
+          {{ formatDist(measurePreviewTotal) }}
+        </div>
+      </Transition>
+
+      <!-- Marker popup overlay -->
+      <Transition name="popup-fade">
+        <div
+          v-if="selectedMarker"
+          class="map-popup-overlay map-popup-editor"
+          :style="{
+  left: markerPopupScreenPos.x + 'px',
+  top: markerPopupScreenPos.y + 'px'
+}"
+        >
+          <div class="popup-row popup-header">
+            <UIcon
+              :name="`i-lucide-${selectedMarker.meta?.icon ?? 'map-pin'}`"
+              class="popup-icon"
+            />
+            <span class="popup-label">{{ selectedMarker.label }}</span>
+            <UButton
+              icon="i-lucide-external-link"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              :title="locale.openInPanel"
+              @click="openNode(selectedMarkerKey, selectedMarker.label);
+  closeMarkerPopup()"
+            />
+            <UButton
+              v-if="editable"
+              icon="i-lucide-trash-2"
+              size="xs"
+              color="error"
+              variant="ghost"
+              @click="deleteSelectedMarker"
+            />
+            <UButton
+              icon="i-lucide-x"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              @click="closeMarkerPopup"
+            />
+          </div>
+          <div class="popup-editor-body">
+            <div
+              v-if="!popupProvider"
+              class="popup-editor-loading"
+            >
+              <UIcon
+                name="i-lucide-loader-circle"
+                class="size-4 animate-spin text-(--ui-text-dimmed)"
+              />
+            </div>
+            <AEditor
+              v-else
+              :doc-id="selectedMarkerKey"
+              :child-provider="popupProvider"
+              :doc-label="selectedMarker.label"
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Line selection popup -->
+      <Transition name="popup-fade">
+        <div
+          v-if="selectedLine"
+          class="map-popup-overlay map-popup-editor"
+          :style="{
+  left: linePopupScreenPos.x + 'px',
+  top: linePopupScreenPos.y + 'px'
+}"
+        >
+          <div class="popup-row popup-header">
+            <UIcon
+              name="i-lucide-route"
+              class="popup-icon"
+            />
+            <span class="popup-label">{{ selectedLine.label }}</span>
+            <UButton
+              icon="i-lucide-external-link"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              :title="locale.openInPanel"
+              @click="openNode(selectedLineKey, selectedLine.label);
+  selectedLineKey = null"
+            />
+            <UButton
+              v-if="editable"
+              icon="i-lucide-trash-2"
+              size="xs"
+              color="error"
+              variant="ghost"
+              @click="deleteSelectedLine"
+            />
+            <UButton
+              icon="i-lucide-x"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              @click="selectedLineKey = null"
+            />
+          </div>
+          <div class="popup-editor-body">
+            <div
+              v-if="!popupProvider"
+              class="popup-editor-loading"
+            >
+              <UIcon
+                name="i-lucide-loader-circle"
+                class="size-4 animate-spin text-(--ui-text-dimmed)"
+              />
+            </div>
+            <AEditor
+              v-else
+              :doc-id="selectedLineKey"
+              :child-provider="popupProvider"
+              :doc-label="selectedLine.label"
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Measure selection popup -->
+      <Transition name="popup-fade">
+        <div
+          v-if="selectedMeasureInfo"
+          class="map-popup-overlay"
+          :style="{
+  left: measurePopupScreenPos.x + 'px',
+  top: measurePopupScreenPos.y + 'px'
+}"
+        >
+          <div class="popup-row">
+            <UIcon
+              name="i-lucide-ruler"
+              class="popup-icon"
+            />
+            <span class="popup-dist">{{
+              formatDist(selectedMeasureInfo.dist)
+            }}</span>
+            <UButton
+              icon="i-lucide-x"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              @click="selectedMeasureKey = null"
+            />
+          </div>
+          <div class="popup-row popup-meta">
+            <UButton
+              v-if="editable"
+              icon="i-lucide-trash-2"
+              size="xs"
+              color="error"
+              variant="ghost"
+              @click="deleteSelectedMeasure"
+            />
+          </div>
+        </div>
+      </Transition>
+
+      <!-- Presence HUD -->
+      <div
+        v-if="remoteUsers.length > 0"
+        class="presence-hud"
+      >
+        <div
+          v-for="user in remoteUsers"
+          :key="user.clientId"
+          class="presence-pill"
+          :class="{ 'is-following': followingClientId === user.clientId }"
+          :title="
+  followingClientId === user.clientId ? `${locale.unfollow} ${user.name}` : `${locale.follow} ${user.name}`
+"
+          @click="
+  followingClientId === user.clientId ? followingClientId = null : followUser(user.clientId)
+"
+        >
+          <div
+            class="hud-avatar"
+            :style="{ background: user.colorHex }"
+          >
+            {{ userInitials(user.name) }}
+          </div>
+          <span class="hud-name">{{ user.name }}</span>
+          <UIcon
+            v-if="followingClientId === user.clientId"
+            name="i-lucide-eye"
+            class="hud-follow-icon"
+          />
+        </div>
+      </div>
+    </template>
+
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.a-map-renderer-root{display:flex;flex:1;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative}.a-map-toolbar-bar{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;bottom:2rem;display:flex;gap:3px;left:50%;padding:3px;position:absolute;transform:translateX(-50%);z-index:20}.toolbar-group{align-items:center;display:flex;gap:1px}.toolbar-divider{background:var(--ui-border);flex-shrink:0;height:20px;margin:0 2px;width:1px}.follow-badge{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text);display:flex;font-family:ui-monospace,SF Mono,monospace;font-size:.72rem;gap:.375rem;left:50%;padding:.3rem .5rem .3rem .75rem;position:absolute;top:1rem;transform:translateX(-50%);white-space:nowrap;z-index:20}.badge-icon{color:var(--ui-primary);font-size:.8rem}.badge-close{align-items:center;background:var(--ui-bg-elevated);border:none;border-radius:50%;color:var(--ui-text-dimmed);cursor:pointer;display:flex;font-size:.65rem;height:1.2rem;justify-content:center;margin-left:.2rem;transition:background .15s;width:1.2rem}.badge-close:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.place-hint{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;bottom:5.5rem;color:var(--ui-text);display:flex;font-family:ui-monospace,SF Mono,monospace;font-size:.7rem;gap:.375rem;left:50%;padding:.3rem .75rem;pointer-events:none;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:20}.place-hint button{pointer-events:auto}.measure-preview-badge{background:rgba(250,204,21,.9);border-radius:4px;color:#000;font-size:.65rem;font-weight:700;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:35}.map-popup-overlay{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:7px;box-shadow:0 4px 20px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:4px;max-width:240px;min-width:180px;padding:5px;pointer-events:auto;position:absolute;z-index:40}.popup-row{align-items:center;display:flex;gap:4px}.popup-meta{justify-content:space-between;padding:0 2px}.popup-meta>span{color:var(--ui-text-muted);font-size:.65rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup-icon{color:var(--ui-text-muted);flex-shrink:0;font-size:.8rem}.popup-dist{flex:1;font-size:.8rem;font-weight:700}.popup-label{color:var(--ui-text);flex:1;font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.map-popup-editor{display:flex;flex-direction:column;max-height:400px;max-width:480px;min-width:400px}.popup-header{border-bottom:1px solid var(--ui-border);flex-shrink:0;padding-bottom:4px}.popup-editor-body{flex:1;max-height:340px;min-height:0;overflow-y:auto}.popup-editor-body :deep(.tiptap){font-size:.8rem;min-height:60px;padding:4px 8px}.popup-editor-body :deep(h1.document-header){font-size:.9rem;padding-top:4px}.popup-editor-body :deep([data-type=document-meta]){font-size:.75rem;padding:0 8px}.popup-editor-loading{align-items:center;display:flex;justify-content:center;padding:20px}.presence-hud{display:flex;flex-direction:column;gap:.375rem;position:absolute;right:.75rem;top:.75rem;z-index:20}.presence-pill{align-items:center;backdrop-filter:blur(8px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:999px;cursor:pointer;display:flex;gap:.5rem;padding:.25rem .6rem .25rem .25rem;transition:background .15s,border-color .15s}.presence-pill:hover{background:var(--ui-bg-elevated)}.presence-pill.is-following{background:var(--ui-bg-accented);border-color:var(--ui-primary)}.hud-avatar{align-items:center;border:1.5px solid var(--ui-border);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.6rem;font-weight:700;height:1.5rem;justify-content:center;width:1.5rem}.hud-name{color:var(--ui-text);font-family:ui-monospace,SF Mono,monospace;font-size:.72rem;white-space:nowrap}.hud-follow-icon{color:var(--ui-primary);flex-shrink:0;font-size:.7rem}.badge-fade-enter-active,.badge-fade-leave-active{transition:opacity .25s ease}.badge-fade-enter-from,.badge-fade-leave-to{opacity:0}.popup-fade-enter-active,.popup-fade-leave-active{transition:opacity .15s ease,transform .15s ease}.popup-fade-enter-from,.popup-fade-leave-to{opacity:0;transform:scale(.95) translateY(4px)}
+</style>
+
+<style>
+.mapboxgl-map{height:100%!important;width:100%!important}.collab-marker-container{align-items:center;cursor:pointer;display:flex;flex-direction:column}.collab-marker-pin{align-items:center;border-radius:50%;display:flex;height:28px;justify-content:center;transition:transform .2s ease;width:28px;z-index:30}.collab-marker-pin:hover{transform:scale(1.15)}.collab-marker-label{background:rgba(0,0,0,.5);border-radius:3px;color:#fff;font-size:11px;font-weight:700;margin-top:3px;padding:1px 5px;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap}.collab-line-point{border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;height:10px;width:10px}.collab-line-point:hover{height:14px;width:14px}.presence-marker{align-items:center;display:flex;flex-direction:column;gap:2px;pointer-events:none}.presence-avatar{align-items:center;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4);color:#fff;display:flex;font-size:.65rem;font-weight:700;height:1.75rem;justify-content:center;width:1.75rem}.presence-label{color:#fff;font-size:.6rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap}.map-cursor-el{left:0;pointer-events:none;position:absolute;top:0;will-change:transform;z-index:50}.map-cursor-name{font-size:.6rem;font-weight:600;left:14px;top:8px}.map-cursor-name,.measure-label-el{border-radius:3px;color:#000;padding:1px 5px;position:absolute;white-space:nowrap}.measure-label-el{background:rgba(250,204,21,.92);box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:.62rem;font-weight:700;left:0;pointer-events:none;top:0;transform:translate(-50%,calc(-100% - 5px));z-index:35}@keyframes ping-ring{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(3)}}.map-ping-root{height:12px;left:0;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-50%);width:12px;z-index:45}.map-ping-ring{animation:ping-ring 1.5s ease-out forwards;border:3px solid var(--ping-color);border-radius:50%;inset:-16px;position:absolute}.map-ping-dot{background:var(--ping-color);border:2px solid #fff;border-radius:50%;height:12px;left:0;position:absolute;top:0;width:12px}
+</style>