@aigne/afs-ui 1.11.0-beta.12

package/dist/web-page/renderers/frame.mjs

@@ -0,0 +1,274 @@
+//#region src/web-page/renderers/frame.ts
+const FRAME_JS = `
+  // ── Frame Renderer (sandboxed iframe for page isolation) ──
+
+  // Track known iframe contentWindows for origin validation
+  var _aupFrameWindows = new Set();
+  var _aupBridgeWindows = new Set();
+  var _aupBridgeOriginByWindow = new Map();
+
+  function _isHttpUrl(src) {
+    try {
+      var u = new URL(src, location.href);
+      return u.protocol === "http:" || u.protocol === "https:";
+    } catch (_ex) {
+      return false;
+    }
+  }
+
+  function _isSameOriginUrl(src) {
+    try {
+      return new URL(src, location.href).origin === location.origin;
+    } catch (_ex) {
+      return false;
+    }
+  }
+
+  function _resolveFrameSrc(rawSrc, bridgeRequested) {
+    var src = typeof rawSrc === "string" ? rawSrc.trim() : "";
+    if (!src) return null;
+
+    if (src.indexOf("/pages/") === 0) {
+      var pageId = src.replace(/^\\/pages\\//, "");
+      if (!pageId) return null;
+      var query = [];
+      if (_afsSessionId) query.push("sid=" + encodeURIComponent(_afsSessionId));
+      if (_afsSessionToken) query.push("st=" + encodeURIComponent(_afsSessionToken));
+      if (bridgeRequested) query.push("bridge=1");
+      var localUrl = location.origin + "/p/" + encodeURIComponent(pageId);
+      if (query.length) localUrl += "?" + query.join("&");
+      return { url: localUrl, bridgeEnabled: !!bridgeRequested };
+    }
+
+    if (_isHttpUrl(src)) {
+      return {
+        url: src,
+        bridgeEnabled: !!bridgeRequested && _isSameOriginUrl(src),
+      };
+    }
+
+    return null;
+  }
+
+  function _normalizeSandbox(rawSandbox, bridgeEnabled) {
+    var base = ["allow-scripts", "allow-forms", "allow-popups"];
+    var allowed = {
+      "allow-downloads": 1,
+      "allow-forms": 1,
+      "allow-modals": 1,
+      "allow-orientation-lock": 1,
+      "allow-pointer-lock": 1,
+      "allow-popups": 1,
+      "allow-popups-to-escape-sandbox": 1,
+      "allow-presentation": 1,
+      "allow-same-origin": 1,
+      "allow-scripts": 1,
+      "allow-storage-access-by-user-activation": 1,
+      "allow-top-navigation": 1,
+      "allow-top-navigation-by-user-activation": 1,
+    };
+
+    var seen = {};
+    var out = [];
+    var tokens = String(rawSandbox || "").split(/\\s+/);
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+      if (!token || !allowed[token] || seen[token]) continue;
+      seen[token] = 1;
+      out.push(token);
+    }
+    for (var j = 0; j < base.length; j++) {
+      if (!seen[base[j]]) out.push(base[j]);
+    }
+    if (!bridgeEnabled) {
+      out = out.filter(function(token) { return token !== "allow-same-origin"; });
+    }
+    return out.join(" ");
+  }
+
+  function _unregisterFrameWindow(iframe) {
+    var prev = iframe && iframe._aupTrackedWindow;
+    if (!prev) return;
+    _aupFrameWindows.delete(prev);
+    _aupBridgeWindows.delete(prev);
+    _aupBridgeOriginByWindow.delete(prev);
+    // Clean up bridge subscriptions owned by this window
+    if (window._aupBridgeSubsByWindow) {
+      var subIds = window._aupBridgeSubsByWindow.get(prev);
+      if (subIds) {
+        subIds.forEach(function(sid) {
+          if (window._aupBridgeSubs && window._aupBridgeSubs[sid]) {
+            try { window._aupBridgeSubs[sid](); } catch(_ex) {}
+            delete window._aupBridgeSubs[sid];
+          }
+        });
+        window._aupBridgeSubsByWindow.delete(prev);
+      }
+    }
+    iframe._aupTrackedWindow = null;
+  }
+
+  function _registerFrameWindow(iframe, bridgeEnabled, srcUrl) {
+    _unregisterFrameWindow(iframe);
+    try {
+      var win = iframe.contentWindow;
+      if (!win) return;
+      iframe._aupTrackedWindow = win;
+      _aupFrameWindows.add(win);
+      if (bridgeEnabled) {
+        _aupBridgeWindows.add(win);
+        try {
+          _aupBridgeOriginByWindow.set(win, new URL(srcUrl, location.href).origin);
+        } catch (_ex) {}
+      }
+    } catch (_ex) {}
+  }
+
+  function renderAupFrame(node) {
+    var el = document.createElement("div");
+    el.className = "aup-frame";
+    var p = node.props || {};
+    var src = typeof p.src === "string" ? p.src : "";
+    var bridge = !!p.bridge;
+    var loading = p.loading || "lazy";
+    var size = p.size || {};
+    var fallback = p.fallback || "";
+
+    if (size.width) el.setAttribute("data-size-width", "1");
+    if (size.height) el.setAttribute("data-size-height", "1");
+
+    if (!src) {
+      var placeholder = document.createElement("div");
+      placeholder.className = "aup-frame-error";
+      placeholder.innerHTML = '<span class="aup-frame-error-icon">\\u26a0</span>'
+        + '<span class="aup-frame-error-msg">Frame: set src prop to embed a page</span>';
+      el.appendChild(placeholder);
+      return el;
+    }
+
+    var resolved = _resolveFrameSrc(src, bridge);
+    if (!resolved) {
+      var invalid = document.createElement("div");
+      invalid.className = "aup-frame-error";
+      invalid.innerHTML = '<span class="aup-frame-error-icon">\\u26a0</span>'
+        + '<span class="aup-frame-error-msg">Frame: src must be http(s) URL or /pages/*</span>';
+      el.appendChild(invalid);
+      return el;
+    }
+    var resolvedSrc = resolved.url;
+    var bridgeEnabled = !!resolved.bridgeEnabled;
+    var sandbox = _normalizeSandbox(p.sandbox, bridgeEnabled);
+
+    // Create iframe
+    var iframe = document.createElement("iframe");
+    iframe.setAttribute("sandbox", sandbox);
+    iframe.setAttribute("loading", loading === "eager" ? "eager" : "lazy");
+    iframe.setAttribute("referrerpolicy", "no-referrer");
+    if (p.transparent) { iframe.setAttribute("allowtransparency", "true"); iframe.style.background = "transparent"; el.style.background = "transparent"; }
+    if (p.overlay) {
+      // Override .aup-frame class styles that break overlay
+      el.className = "aup-frame-overlay";
+      el.style.cssText = "position:fixed;inset:0;z-index:99999;pointer-events:none;background:transparent;border:none;overflow:visible;margin:0;padding:0;min-height:0;";
+      iframe.style.cssText = "pointer-events:none;background:transparent;width:100%;height:100%;border:none;display:block;min-height:0;";
+      iframe.setAttribute("allowtransparency", "true");
+      el.setAttribute("data-aup-overlay", node.id || "");
+      iframe.onload = function() {
+        _registerFrameWindow(iframe, bridgeEnabled, resolvedSrc);
+      };
+      iframe.src = resolvedSrc;
+      el.appendChild(iframe);
+      setTimeout(function() { document.body.appendChild(el); }, 0);
+      return document.createElement("div");
+    }
+
+    // Loading skeleton (non-overlay frames only)
+    var skeleton = document.createElement("div");
+    skeleton.className = "aup-frame-loading";
+    skeleton.innerHTML = '<div class="aup-frame-loading-bar"></div>';
+    el.appendChild(skeleton);
+    if (size.width) iframe.style.width = size.width;
+    if (size.height) { iframe.style.height = size.height; el.style.minHeight = "0"; }
+
+    iframe.onload = function() {
+      skeleton.remove();
+      _registerFrameWindow(iframe, bridgeEnabled, resolvedSrc);
+      // Fire AUP load event
+      if (node.events && node.events.load) {
+        _fireAupEvent(node.id, "load", {});
+      }
+    };
+
+    iframe.onerror = function() {
+      _showFrameError(el, skeleton, iframe, resolvedSrc, fallback, bridge, node);
+    };
+
+    // Also handle load errors via timeout — iframes don't reliably fire onerror
+    var errorTimer = setTimeout(function() {
+      if (skeleton.parentNode) {
+        // Still loading after 30s — likely broken
+        _showFrameError(el, skeleton, iframe, resolvedSrc, fallback, bridge, node);
+      }
+    }, 30000);
+
+    iframe.addEventListener("load", function() { clearTimeout(errorTimer); }, { once: true });
+
+    iframe.src = resolvedSrc;
+    el.appendChild(iframe);
+
+    return el;
+  }
+
+  function _showFrameError(wrapper, skeleton, iframe, src, fallback, bridge, node) {
+    if (skeleton.parentNode) skeleton.remove();
+    iframe.style.display = "none";
+    _unregisterFrameWindow(iframe);
+
+    // Remove existing error if retrying
+    var old = wrapper.querySelector(".aup-frame-error");
+    if (old) old.remove();
+
+    var errorEl = document.createElement("div");
+    errorEl.className = "aup-frame-error";
+    errorEl.innerHTML = '<span class="aup-frame-error-icon">\\u26a0</span>'
+      + '<span class="aup-frame-error-msg">Failed to load page</span>';
+
+    var retryBtn = document.createElement("button");
+    retryBtn.className = "aup-frame-retry";
+    retryBtn.textContent = "Retry";
+    retryBtn.onclick = function() {
+      errorEl.remove();
+      iframe.style.display = "";
+      var retry = _resolveFrameSrc(fallback || src, bridge);
+      iframe.src = retry ? retry.url : src;
+    };
+    errorEl.appendChild(retryBtn);
+    wrapper.appendChild(errorEl);
+
+    // Fire AUP error event
+    if (node.events && node.events.error) {
+      _fireAupEvent(node.id, "error", { src: src });
+    }
+  }
+
+  function _fireAupEvent(nodeId, event, data) {
+    // Check if this node lives inside a device container — route to device WS
+    var nodeEl = document.querySelector('[data-aup-id="' + nodeId + '"]');
+    if (nodeEl) {
+      var deviceEl = nodeEl.closest('[data-aup-device-id]');
+      if (deviceEl && deviceEl._aupDeviceWs && deviceEl._aupDeviceWs.readyState === 1) {
+        deviceEl._aupDeviceWs.send(JSON.stringify({
+          type: "aup_event", nodeId: nodeId, event: event, data: data
+        }));
+        return;
+      }
+    }
+    // Default: send to parent WS
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "aup_event", nodeId: nodeId, event: event, data: data }));
+    }
+  }
+`;
+
+//#endregion
+export { FRAME_JS };
+//# sourceMappingURL=frame.mjs.map

package/dist/web-page/renderers/frame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.mjs","names":[],"sources":["../../../src/web-page/renderers/frame.ts"],"sourcesContent":["export const FRAME_JS = `\n  // ── Frame Renderer (sandboxed iframe for page isolation) ──\n\n  // Track known iframe contentWindows for origin validation\n  var _aupFrameWindows = new Set();\n  var _aupBridgeWindows = new Set();\n  var _aupBridgeOriginByWindow = new Map();\n\n  function _isHttpUrl(src) {\n    try {\n      var u = new URL(src, location.href);\n      return u.protocol === \"http:\" || u.protocol === \"https:\";\n    } catch (_ex) {\n      return false;\n    }\n  }\n\n  function _isSameOriginUrl(src) {\n    try {\n      return new URL(src, location.href).origin === location.origin;\n    } catch (_ex) {\n      return false;\n    }\n  }\n\n  function _resolveFrameSrc(rawSrc, bridgeRequested) {\n    var src = typeof rawSrc === \"string\" ? rawSrc.trim() : \"\";\n    if (!src) return null;\n\n    if (src.indexOf(\"/pages/\") === 0) {\n      var pageId = src.replace(/^\\\\/pages\\\\//, \"\");\n      if (!pageId) return null;\n      var query = [];\n      if (_afsSessionId) query.push(\"sid=\" + encodeURIComponent(_afsSessionId));\n      if (_afsSessionToken) query.push(\"st=\" + encodeURIComponent(_afsSessionToken));\n      if (bridgeRequested) query.push(\"bridge=1\");\n      var localUrl = location.origin + \"/p/\" + encodeURIComponent(pageId);\n      if (query.length) localUrl += \"?\" + query.join(\"&\");\n      return { url: localUrl, bridgeEnabled: !!bridgeRequested };\n    }\n\n    if (_isHttpUrl(src)) {\n      return {\n        url: src,\n        bridgeEnabled: !!bridgeRequested && _isSameOriginUrl(src),\n      };\n    }\n\n    return null;\n  }\n\n  function _normalizeSandbox(rawSandbox, bridgeEnabled) {\n    var base = [\"allow-scripts\", \"allow-forms\", \"allow-popups\"];\n    var allowed = {\n      \"allow-downloads\": 1,\n      \"allow-forms\": 1,\n      \"allow-modals\": 1,\n      \"allow-orientation-lock\": 1,\n      \"allow-pointer-lock\": 1,\n      \"allow-popups\": 1,\n      \"allow-popups-to-escape-sandbox\": 1,\n      \"allow-presentation\": 1,\n      \"allow-same-origin\": 1,\n      \"allow-scripts\": 1,\n      \"allow-storage-access-by-user-activation\": 1,\n      \"allow-top-navigation\": 1,\n      \"allow-top-navigation-by-user-activation\": 1,\n    };\n\n    var seen = {};\n    var out = [];\n    var tokens = String(rawSandbox || \"\").split(/\\\\s+/);\n    for (var i = 0; i < tokens.length; i++) {\n      var token = tokens[i];\n      if (!token || !allowed[token] || seen[token]) continue;\n      seen[token] = 1;\n      out.push(token);\n    }\n    for (var j = 0; j < base.length; j++) {\n      if (!seen[base[j]]) out.push(base[j]);\n    }\n    if (!bridgeEnabled) {\n      out = out.filter(function(token) { return token !== \"allow-same-origin\"; });\n    }\n    return out.join(\" \");\n  }\n\n  function _unregisterFrameWindow(iframe) {\n    var prev = iframe && iframe._aupTrackedWindow;\n    if (!prev) return;\n    _aupFrameWindows.delete(prev);\n    _aupBridgeWindows.delete(prev);\n    _aupBridgeOriginByWindow.delete(prev);\n    // Clean up bridge subscriptions owned by this window\n    if (window._aupBridgeSubsByWindow) {\n      var subIds = window._aupBridgeSubsByWindow.get(prev);\n      if (subIds) {\n        subIds.forEach(function(sid) {\n          if (window._aupBridgeSubs && window._aupBridgeSubs[sid]) {\n            try { window._aupBridgeSubs[sid](); } catch(_ex) {}\n            delete window._aupBridgeSubs[sid];\n          }\n        });\n        window._aupBridgeSubsByWindow.delete(prev);\n      }\n    }\n    iframe._aupTrackedWindow = null;\n  }\n\n  function _registerFrameWindow(iframe, bridgeEnabled, srcUrl) {\n    _unregisterFrameWindow(iframe);\n    try {\n      var win = iframe.contentWindow;\n      if (!win) return;\n      iframe._aupTrackedWindow = win;\n      _aupFrameWindows.add(win);\n      if (bridgeEnabled) {\n        _aupBridgeWindows.add(win);\n        try {\n          _aupBridgeOriginByWindow.set(win, new URL(srcUrl, location.href).origin);\n        } catch (_ex) {}\n      }\n    } catch (_ex) {}\n  }\n\n  function renderAupFrame(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-frame\";\n    var p = node.props || {};\n    var src = typeof p.src === \"string\" ? p.src : \"\";\n    var bridge = !!p.bridge;\n    var loading = p.loading || \"lazy\";\n    var size = p.size || {};\n    var fallback = p.fallback || \"\";\n\n    if (size.width) el.setAttribute(\"data-size-width\", \"1\");\n    if (size.height) el.setAttribute(\"data-size-height\", \"1\");\n\n    if (!src) {\n      var placeholder = document.createElement(\"div\");\n      placeholder.className = \"aup-frame-error\";\n      placeholder.innerHTML = '<span class=\"aup-frame-error-icon\">\\\\u26a0</span>'\n        + '<span class=\"aup-frame-error-msg\">Frame: set src prop to embed a page</span>';\n      el.appendChild(placeholder);\n      return el;\n    }\n\n    var resolved = _resolveFrameSrc(src, bridge);\n    if (!resolved) {\n      var invalid = document.createElement(\"div\");\n      invalid.className = \"aup-frame-error\";\n      invalid.innerHTML = '<span class=\"aup-frame-error-icon\">\\\\u26a0</span>'\n        + '<span class=\"aup-frame-error-msg\">Frame: src must be http(s) URL or /pages/*</span>';\n      el.appendChild(invalid);\n      return el;\n    }\n    var resolvedSrc = resolved.url;\n    var bridgeEnabled = !!resolved.bridgeEnabled;\n    var sandbox = _normalizeSandbox(p.sandbox, bridgeEnabled);\n\n    // Create iframe\n    var iframe = document.createElement(\"iframe\");\n    iframe.setAttribute(\"sandbox\", sandbox);\n    iframe.setAttribute(\"loading\", loading === \"eager\" ? \"eager\" : \"lazy\");\n    iframe.setAttribute(\"referrerpolicy\", \"no-referrer\");\n    if (p.transparent) { iframe.setAttribute(\"allowtransparency\", \"true\"); iframe.style.background = \"transparent\"; el.style.background = \"transparent\"; }\n    if (p.overlay) {\n      // Override .aup-frame class styles that break overlay\n      el.className = \"aup-frame-overlay\";\n      el.style.cssText = \"position:fixed;inset:0;z-index:99999;pointer-events:none;background:transparent;border:none;overflow:visible;margin:0;padding:0;min-height:0;\";\n      iframe.style.cssText = \"pointer-events:none;background:transparent;width:100%;height:100%;border:none;display:block;min-height:0;\";\n      iframe.setAttribute(\"allowtransparency\", \"true\");\n      el.setAttribute(\"data-aup-overlay\", node.id || \"\");\n      iframe.onload = function() {\n        _registerFrameWindow(iframe, bridgeEnabled, resolvedSrc);\n      };\n      iframe.src = resolvedSrc;\n      el.appendChild(iframe);\n      setTimeout(function() { document.body.appendChild(el); }, 0);\n      return document.createElement(\"div\");\n    }\n\n    // Loading skeleton (non-overlay frames only)\n    var skeleton = document.createElement(\"div\");\n    skeleton.className = \"aup-frame-loading\";\n    skeleton.innerHTML = '<div class=\"aup-frame-loading-bar\"></div>';\n    el.appendChild(skeleton);\n    if (size.width) iframe.style.width = size.width;\n    if (size.height) { iframe.style.height = size.height; el.style.minHeight = \"0\"; }\n\n    iframe.onload = function() {\n      skeleton.remove();\n      _registerFrameWindow(iframe, bridgeEnabled, resolvedSrc);\n      // Fire AUP load event\n      if (node.events && node.events.load) {\n        _fireAupEvent(node.id, \"load\", {});\n      }\n    };\n\n    iframe.onerror = function() {\n      _showFrameError(el, skeleton, iframe, resolvedSrc, fallback, bridge, node);\n    };\n\n    // Also handle load errors via timeout — iframes don't reliably fire onerror\n    var errorTimer = setTimeout(function() {\n      if (skeleton.parentNode) {\n        // Still loading after 30s — likely broken\n        _showFrameError(el, skeleton, iframe, resolvedSrc, fallback, bridge, node);\n      }\n    }, 30000);\n\n    iframe.addEventListener(\"load\", function() { clearTimeout(errorTimer); }, { once: true });\n\n    iframe.src = resolvedSrc;\n    el.appendChild(iframe);\n\n    return el;\n  }\n\n  function _showFrameError(wrapper, skeleton, iframe, src, fallback, bridge, node) {\n    if (skeleton.parentNode) skeleton.remove();\n    iframe.style.display = \"none\";\n    _unregisterFrameWindow(iframe);\n\n    // Remove existing error if retrying\n    var old = wrapper.querySelector(\".aup-frame-error\");\n    if (old) old.remove();\n\n    var errorEl = document.createElement(\"div\");\n    errorEl.className = \"aup-frame-error\";\n    errorEl.innerHTML = '<span class=\"aup-frame-error-icon\">\\\\u26a0</span>'\n      + '<span class=\"aup-frame-error-msg\">Failed to load page</span>';\n\n    var retryBtn = document.createElement(\"button\");\n    retryBtn.className = \"aup-frame-retry\";\n    retryBtn.textContent = \"Retry\";\n    retryBtn.onclick = function() {\n      errorEl.remove();\n      iframe.style.display = \"\";\n      var retry = _resolveFrameSrc(fallback || src, bridge);\n      iframe.src = retry ? retry.url : src;\n    };\n    errorEl.appendChild(retryBtn);\n    wrapper.appendChild(errorEl);\n\n    // Fire AUP error event\n    if (node.events && node.events.error) {\n      _fireAupEvent(node.id, \"error\", { src: src });\n    }\n  }\n\n  function _fireAupEvent(nodeId, event, data) {\n    // Check if this node lives inside a device container — route to device WS\n    var nodeEl = document.querySelector('[data-aup-id=\"' + nodeId + '\"]');\n    if (nodeEl) {\n      var deviceEl = nodeEl.closest('[data-aup-device-id]');\n      if (deviceEl && deviceEl._aupDeviceWs && deviceEl._aupDeviceWs.readyState === 1) {\n        deviceEl._aupDeviceWs.send(JSON.stringify({\n          type: \"aup_event\", nodeId: nodeId, event: event, data: data\n        }));\n        return;\n      }\n    }\n    // Default: send to parent WS\n    if (ws && ws.readyState === 1) {\n      ws.send(JSON.stringify({ type: \"aup_event\", nodeId: nodeId, event: event, data: data }));\n    }\n  }\n`;\n"],"mappings":";AAAA,MAAa,WAAW"}

package/dist/web-page/renderers/globe.cjs

@@ -0,0 +1,119 @@
+
+//#region src/web-page/renderers/globe.ts
+const GLOBE_JS = `
+  // ── Globe Map (MapLibre GL — 3D globe with flyTo) ──
+  function renderAupGlobe(node) {
+    var el = document.createElement("div");
+    el.className = "aup-map";
+    var p = node.props || {};
+    var center = p.center || [0, 20];
+    var zoom = p.zoom || 1.5;
+    var tileStyle = p.tileStyle || "carto-voyager";
+    if (p.height) el.style.height = p.height;
+    var mapDiv = document.createElement("div");
+    mapDiv.style.width = "100%";
+    mapDiv.style.height = "100%";
+    el.appendChild(mapDiv);
+
+    function tileUrl(style) {
+      var t = _mapTileStyles[style] || _mapTileStyles["carto-voyager"];
+      // MapLibre needs explicit subdomain — replace {s} with "a", {r} with @2x for retina
+      return t.url.replace("{s}", "a").replace("{r}", "@2x");
+    }
+
+    function initGlobe() {
+      if (typeof maplibregl === "undefined") {
+        loadCSS("https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css");
+        var loading = document.createElement("div");
+        loading.className = "aup-map-loading";
+        loading.textContent = "Loading globe...";
+        el.insertBefore(loading, mapDiv);
+        loadScript("https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createGlobe();
+        });
+      } else {
+        createGlobe();
+      }
+    }
+
+    function createGlobe() {
+      try {
+        var tile = _mapTileStyles[tileStyle] || _mapTileStyles["carto-voyager"];
+        var map = new maplibregl.Map({
+          container: mapDiv,
+          style: {
+            version: 8,
+            sources: { basemap: { type: "raster", tiles: [tileUrl(tileStyle)], tileSize: 256, attribution: tile.attr } },
+            layers: [{ id: "basemap", type: "raster", source: "basemap" }],
+            glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf"
+          },
+          center: [center[1], center[0]], // MapLibre uses [lng, lat]
+          zoom: zoom,
+          projection: "globe",
+          attributionControl: false
+        });
+        map.addControl(new maplibregl.AttributionControl({ compact: true }), "bottom-right");
+        map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "bottom-right");
+
+        // Add markers
+        var markers = p.markers || [];
+        for (var i = 0; i < markers.length; i++) {
+          addGlobeMarker(map, markers[i]);
+        }
+
+        // flyTo sequence
+        var flyMarkers = p.flyTo || markers;
+        if (flyMarkers.length > 0 && p.autoFly !== false) {
+          var flyIdx = 0;
+          var flyDelay = p.flyInterval || 4000;
+          var flyZoom = p.flyZoom || 5;
+          map.once("load", function() {
+            setTimeout(function flyNext() {
+              if (!el.isConnected) return; // stop if removed from DOM
+              var target = flyMarkers[flyIdx % flyMarkers.length];
+              map.flyTo({
+                center: [target.lng, target.lat],
+                zoom: target.zoom || flyZoom,
+                duration: p.flyDuration || 3000,
+                essential: true
+              });
+              flyIdx++;
+              setTimeout(flyNext, flyDelay);
+            }, 1500);
+          });
+        }
+
+        // Support tileStyle switching via custom event
+        el._globeMap = map;
+        el._setTileStyle = function(newStyle) {
+          var t = _mapTileStyles[newStyle] || _mapTileStyles["carto-voyager"];
+          var src = map.getSource("basemap");
+          if (src && src.setTiles) {
+            src.setTiles([tileUrl(newStyle)]);
+          }
+        };
+      } catch(e) { mapDiv.textContent = "Globe error: " + e.message; }
+    }
+
+    function addGlobeMarker(map, m) {
+      var color = m.color || _markerIntentColors[m.intent || "primary"] || "#6366f1";
+      var size = (m.radius || m.size || 7) * 2;
+      var dot = document.createElement("div");
+      dot.style.cssText = "width:" + size + "px;height:" + size + "px;border-radius:50%;background:" + color + ";border:2px solid rgba(255,255,255,0.9);box-shadow:0 2px 8px rgba(0,0,0,0.3);cursor:pointer;";
+      var marker = new maplibregl.Marker({ element: dot }).setLngLat([m.lng, m.lat]).addTo(map);
+      if (m.label) {
+        var popup = new maplibregl.Popup({ offset: size / 2 + 4, closeButton: false })
+          .setHTML('<div style="font-family:var(--font-body);font-size:0.85em;padding:2px 4px;">' + _escapeHtml(String(m.label)) + "</div>");
+        marker.setPopup(popup);
+      }
+    }
+
+    setTimeout(initGlobe, 0);
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.GLOBE_JS = GLOBE_JS;

package/dist/web-page/renderers/globe.mjs

@@ -0,0 +1,119 @@
+//#region src/web-page/renderers/globe.ts
+const GLOBE_JS = `
+  // ── Globe Map (MapLibre GL — 3D globe with flyTo) ──
+  function renderAupGlobe(node) {
+    var el = document.createElement("div");
+    el.className = "aup-map";
+    var p = node.props || {};
+    var center = p.center || [0, 20];
+    var zoom = p.zoom || 1.5;
+    var tileStyle = p.tileStyle || "carto-voyager";
+    if (p.height) el.style.height = p.height;
+    var mapDiv = document.createElement("div");
+    mapDiv.style.width = "100%";
+    mapDiv.style.height = "100%";
+    el.appendChild(mapDiv);
+
+    function tileUrl(style) {
+      var t = _mapTileStyles[style] || _mapTileStyles["carto-voyager"];
+      // MapLibre needs explicit subdomain — replace {s} with "a", {r} with @2x for retina
+      return t.url.replace("{s}", "a").replace("{r}", "@2x");
+    }
+
+    function initGlobe() {
+      if (typeof maplibregl === "undefined") {
+        loadCSS("https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css");
+        var loading = document.createElement("div");
+        loading.className = "aup-map-loading";
+        loading.textContent = "Loading globe...";
+        el.insertBefore(loading, mapDiv);
+        loadScript("https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createGlobe();
+        });
+      } else {
+        createGlobe();
+      }
+    }
+
+    function createGlobe() {
+      try {
+        var tile = _mapTileStyles[tileStyle] || _mapTileStyles["carto-voyager"];
+        var map = new maplibregl.Map({
+          container: mapDiv,
+          style: {
+            version: 8,
+            sources: { basemap: { type: "raster", tiles: [tileUrl(tileStyle)], tileSize: 256, attribution: tile.attr } },
+            layers: [{ id: "basemap", type: "raster", source: "basemap" }],
+            glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf"
+          },
+          center: [center[1], center[0]], // MapLibre uses [lng, lat]
+          zoom: zoom,
+          projection: "globe",
+          attributionControl: false
+        });
+        map.addControl(new maplibregl.AttributionControl({ compact: true }), "bottom-right");
+        map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "bottom-right");
+
+        // Add markers
+        var markers = p.markers || [];
+        for (var i = 0; i < markers.length; i++) {
+          addGlobeMarker(map, markers[i]);
+        }
+
+        // flyTo sequence
+        var flyMarkers = p.flyTo || markers;
+        if (flyMarkers.length > 0 && p.autoFly !== false) {
+          var flyIdx = 0;
+          var flyDelay = p.flyInterval || 4000;
+          var flyZoom = p.flyZoom || 5;
+          map.once("load", function() {
+            setTimeout(function flyNext() {
+              if (!el.isConnected) return; // stop if removed from DOM
+              var target = flyMarkers[flyIdx % flyMarkers.length];
+              map.flyTo({
+                center: [target.lng, target.lat],
+                zoom: target.zoom || flyZoom,
+                duration: p.flyDuration || 3000,
+                essential: true
+              });
+              flyIdx++;
+              setTimeout(flyNext, flyDelay);
+            }, 1500);
+          });
+        }
+
+        // Support tileStyle switching via custom event
+        el._globeMap = map;
+        el._setTileStyle = function(newStyle) {
+          var t = _mapTileStyles[newStyle] || _mapTileStyles["carto-voyager"];
+          var src = map.getSource("basemap");
+          if (src && src.setTiles) {
+            src.setTiles([tileUrl(newStyle)]);
+          }
+        };
+      } catch(e) { mapDiv.textContent = "Globe error: " + e.message; }
+    }
+
+    function addGlobeMarker(map, m) {
+      var color = m.color || _markerIntentColors[m.intent || "primary"] || "#6366f1";
+      var size = (m.radius || m.size || 7) * 2;
+      var dot = document.createElement("div");
+      dot.style.cssText = "width:" + size + "px;height:" + size + "px;border-radius:50%;background:" + color + ";border:2px solid rgba(255,255,255,0.9);box-shadow:0 2px 8px rgba(0,0,0,0.3);cursor:pointer;";
+      var marker = new maplibregl.Marker({ element: dot }).setLngLat([m.lng, m.lat]).addTo(map);
+      if (m.label) {
+        var popup = new maplibregl.Popup({ offset: size / 2 + 4, closeButton: false })
+          .setHTML('<div style="font-family:var(--font-body);font-size:0.85em;padding:2px 4px;">' + _escapeHtml(String(m.label)) + "</div>");
+        marker.setPopup(popup);
+      }
+    }
+
+    setTimeout(initGlobe, 0);
+    return el;
+  }
+
+`;
+
+//#endregion
+export { GLOBE_JS };
+//# sourceMappingURL=globe.mjs.map

package/dist/web-page/renderers/globe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"globe.mjs","names":[],"sources":["../../../src/web-page/renderers/globe.ts"],"sourcesContent":["export const GLOBE_JS = `\n  // ── Globe Map (MapLibre GL — 3D globe with flyTo) ──\n  function renderAupGlobe(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-map\";\n    var p = node.props || {};\n    var center = p.center || [0, 20];\n    var zoom = p.zoom || 1.5;\n    var tileStyle = p.tileStyle || \"carto-voyager\";\n    if (p.height) el.style.height = p.height;\n    var mapDiv = document.createElement(\"div\");\n    mapDiv.style.width = \"100%\";\n    mapDiv.style.height = \"100%\";\n    el.appendChild(mapDiv);\n\n    function tileUrl(style) {\n      var t = _mapTileStyles[style] || _mapTileStyles[\"carto-voyager\"];\n      // MapLibre needs explicit subdomain — replace {s} with \"a\", {r} with @2x for retina\n      return t.url.replace(\"{s}\", \"a\").replace(\"{r}\", \"@2x\");\n    }\n\n    function initGlobe() {\n      if (typeof maplibregl === \"undefined\") {\n        loadCSS(\"https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css\");\n        var loading = document.createElement(\"div\");\n        loading.className = \"aup-map-loading\";\n        loading.textContent = \"Loading globe...\";\n        el.insertBefore(loading, mapDiv);\n        loadScript(\"https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js\", function() {\n          if (loading.parentNode) loading.parentNode.removeChild(loading);\n          createGlobe();\n        });\n      } else {\n        createGlobe();\n      }\n    }\n\n    function createGlobe() {\n      try {\n        var tile = _mapTileStyles[tileStyle] || _mapTileStyles[\"carto-voyager\"];\n        var map = new maplibregl.Map({\n          container: mapDiv,\n          style: {\n            version: 8,\n            sources: { basemap: { type: \"raster\", tiles: [tileUrl(tileStyle)], tileSize: 256, attribution: tile.attr } },\n            layers: [{ id: \"basemap\", type: \"raster\", source: \"basemap\" }],\n            glyphs: \"https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf\"\n          },\n          center: [center[1], center[0]], // MapLibre uses [lng, lat]\n          zoom: zoom,\n          projection: \"globe\",\n          attributionControl: false\n        });\n        map.addControl(new maplibregl.AttributionControl({ compact: true }), \"bottom-right\");\n        map.addControl(new maplibregl.NavigationControl({ showCompass: false }), \"bottom-right\");\n\n        // Add markers\n        var markers = p.markers || [];\n        for (var i = 0; i < markers.length; i++) {\n          addGlobeMarker(map, markers[i]);\n        }\n\n        // flyTo sequence\n        var flyMarkers = p.flyTo || markers;\n        if (flyMarkers.length > 0 && p.autoFly !== false) {\n          var flyIdx = 0;\n          var flyDelay = p.flyInterval || 4000;\n          var flyZoom = p.flyZoom || 5;\n          map.once(\"load\", function() {\n            setTimeout(function flyNext() {\n              if (!el.isConnected) return; // stop if removed from DOM\n              var target = flyMarkers[flyIdx % flyMarkers.length];\n              map.flyTo({\n                center: [target.lng, target.lat],\n                zoom: target.zoom || flyZoom,\n                duration: p.flyDuration || 3000,\n                essential: true\n              });\n              flyIdx++;\n              setTimeout(flyNext, flyDelay);\n            }, 1500);\n          });\n        }\n\n        // Support tileStyle switching via custom event\n        el._globeMap = map;\n        el._setTileStyle = function(newStyle) {\n          var t = _mapTileStyles[newStyle] || _mapTileStyles[\"carto-voyager\"];\n          var src = map.getSource(\"basemap\");\n          if (src && src.setTiles) {\n            src.setTiles([tileUrl(newStyle)]);\n          }\n        };\n      } catch(e) { mapDiv.textContent = \"Globe error: \" + e.message; }\n    }\n\n    function addGlobeMarker(map, m) {\n      var color = m.color || _markerIntentColors[m.intent || \"primary\"] || \"#6366f1\";\n      var size = (m.radius || m.size || 7) * 2;\n      var dot = document.createElement(\"div\");\n      dot.style.cssText = \"width:\" + size + \"px;height:\" + size + \"px;border-radius:50%;background:\" + color + \";border:2px solid rgba(255,255,255,0.9);box-shadow:0 2px 8px rgba(0,0,0,0.3);cursor:pointer;\";\n      var marker = new maplibregl.Marker({ element: dot }).setLngLat([m.lng, m.lat]).addTo(map);\n      if (m.label) {\n        var popup = new maplibregl.Popup({ offset: size / 2 + 4, closeButton: false })\n          .setHTML('<div style=\"font-family:var(--font-body);font-size:0.85em;padding:2px 4px;\">' + _escapeHtml(String(m.label)) + \"</div>\");\n        marker.setPopup(popup);\n      }\n    }\n\n    setTimeout(initGlobe, 0);\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,WAAW"}