@aigne/afs-ui 1.11.0-beta.12

package/dist/web-page/renderers/finance-chart.mjs

@@ -0,0 +1,178 @@
+//#region src/web-page/renderers/finance-chart.ts
+const FINANCE_CHART_JS = `
+  // ── Finance Chart Primitive (TradingView Lightweight Charts v5) ──
+
+  function renderAupFinanceChart(node) {
+    var el = document.createElement("div");
+    el.className = "aup-finance-chart";
+    var p = node.props || {};
+    var variant = p.variant || "candlestick";
+    if (p.height) el.style.height = p.height;
+    else el.style.height = "400px";
+
+    var chartDiv = document.createElement("div");
+    chartDiv.style.width = "100%";
+    chartDiv.style.height = "100%";
+    el.appendChild(chartDiv);
+
+    function isDarkMode() {
+      var bg = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
+      if (!bg) return true;
+      // Simple heuristic: dark if bg starts with # and first hex digit < 8
+      if (bg.charAt(0) === "#") {
+        var r = parseInt(bg.substring(1, 3), 16);
+        return r < 128;
+      }
+      return true;
+    }
+
+    function chartColors() {
+      var dark = isDarkMode();
+      return {
+        bg: "transparent",
+        text: dark ? "#d1d5db" : "#374151",
+        grid: dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+        crosshair: dark ? "#6b7280" : "#9ca3af",
+        upColor: p.upColor || "#26a69a",
+        downColor: p.downColor || "#ef5350",
+        lineColor: p.lineColor || "#2962FF",
+        areaTop: p.areaTopColor || "rgba(41,98,255,0.4)",
+        areaBottom: p.areaBottomColor || "rgba(41,98,255,0)",
+      };
+    }
+
+    function initFinanceChart() {
+      if (typeof LightweightCharts === "undefined") {
+        var loading = document.createElement("div");
+        loading.className = "aup-finance-chart-loading";
+        loading.textContent = "Loading chart...";
+        el.insertBefore(loading, chartDiv);
+        loadScript("https://cdn.jsdelivr.net/npm/lightweight-charts@5/dist/lightweight-charts.standalone.production.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createFinanceChart();
+        });
+      } else {
+        createFinanceChart();
+      }
+    }
+
+    var chartInstance = null;
+    var primarySeries = null;
+    var volumeSeries = null;
+
+    function createFinanceChart() {
+      try {
+        var c = chartColors();
+        chartInstance = LightweightCharts.createChart(chartDiv, {
+          layout: { background: { type: "solid", color: c.bg }, textColor: c.text, fontFamily: "inherit" },
+          grid: { vertLines: { color: c.grid }, horzLines: { color: c.grid } },
+          crosshair: { vertLine: { color: c.crosshair, labelBackgroundColor: c.crosshair }, horzLine: { color: c.crosshair, labelBackgroundColor: c.crosshair } },
+          rightPriceScale: { borderColor: c.grid },
+          timeScale: { borderColor: c.grid, timeVisible: true },
+          autoSize: true,
+        });
+
+        // Add primary series based on variant
+        if (variant === "candlestick") {
+          primarySeries = chartInstance.addSeries(LightweightCharts.CandlestickSeries, {
+            upColor: c.upColor, downColor: c.downColor, borderVisible: false,
+            wickUpColor: c.upColor, wickDownColor: c.downColor,
+          });
+        } else if (variant === "ohlc") {
+          primarySeries = chartInstance.addSeries(LightweightCharts.BarSeries, {
+            upColor: c.upColor, downColor: c.downColor,
+          });
+        } else if (variant === "trading-line") {
+          primarySeries = chartInstance.addSeries(LightweightCharts.LineSeries, {
+            color: c.lineColor, lineWidth: 2,
+          });
+        } else if (variant === "trading-area") {
+          primarySeries = chartInstance.addSeries(LightweightCharts.AreaSeries, {
+            lineColor: c.lineColor, topColor: c.areaTop, bottomColor: c.areaBottom, lineWidth: 2,
+          });
+        } else if (variant === "baseline") {
+          var bv = p.baseValue || 0;
+          primarySeries = chartInstance.addSeries(LightweightCharts.BaselineSeries, {
+            baseValue: { type: "price", price: bv },
+            topLineColor: c.upColor, topFillColor1: "rgba(38,166,154,0.28)", topFillColor2: "rgba(38,166,154,0)",
+            bottomLineColor: c.downColor, bottomFillColor1: "rgba(239,83,80,0)", bottomFillColor2: "rgba(239,83,80,0.28)",
+          });
+        } else if (variant === "volume") {
+          primarySeries = chartInstance.addSeries(LightweightCharts.HistogramSeries, {
+            priceFormat: { type: "volume" },
+            priceScaleId: "",
+          });
+        }
+
+        // Optional volume overlay (for candlestick/ohlc)
+        if (p.volumeData || p.showVolume) {
+          volumeSeries = chartInstance.addSeries(LightweightCharts.HistogramSeries, {
+            priceFormat: { type: "volume" },
+            priceScaleId: "volume",
+          });
+          chartInstance.priceScale("volume").applyOptions({
+            scaleMargins: { top: 0.8, bottom: 0 },
+          });
+        }
+
+        // Set data
+        var data = p.data || [];
+        if (data.length) {
+          primarySeries.setData(data);
+          if (volumeSeries && p.volumeData) volumeSeries.setData(p.volumeData);
+          chartInstance.timeScale().fitContent();
+        }
+      } catch(e) {
+        chartDiv.textContent = "Chart error: " + e.message;
+      }
+    }
+
+    function updateFinanceData(raw) {
+      var d = (typeof raw === "object" && raw !== null) ? raw : {};
+      if (d.content && typeof d.content === "object") d = d.content;
+      if (primarySeries && d.data) {
+        primarySeries.setData(d.data);
+        if (volumeSeries && d.volumeData) volumeSeries.setData(d.volumeData);
+        if (chartInstance) chartInstance.timeScale().fitContent();
+      }
+    }
+
+    // src binding
+    if (node.src && window.afs) {
+      var loading = document.createElement("div");
+      loading.className = "aup-finance-chart-loading";
+      loading.textContent = "Loading data...";
+      el.insertBefore(loading, chartDiv);
+
+      function applyFinanceData(raw) {
+        if (loading.parentNode) loading.parentNode.removeChild(loading);
+        if (!chartInstance) {
+          // Chart not created yet — store data and init
+          var d = (typeof raw === "object" && raw !== null) ? raw : {};
+          if (d.content && typeof d.content === "object") d = d.content;
+          if (d.data) p.data = d.data;
+          if (d.volumeData) { p.volumeData = d.volumeData; p.showVolume = true; }
+          initFinanceChart();
+        } else {
+          updateFinanceData(raw);
+        }
+      }
+
+      window.afs.read(node.src).then(applyFinanceData).catch(function(e) {
+        loading.textContent = "Data error: " + e.message;
+      });
+      window.afs.subscribe({ type: "afs:write", path: node.src }, function(event) {
+        if (event && event.data) applyFinanceData(event.data);
+      });
+    } else {
+      setTimeout(initFinanceChart, 0);
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { FINANCE_CHART_JS };
+//# sourceMappingURL=finance-chart.mjs.map

package/dist/web-page/renderers/finance-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"finance-chart.mjs","names":[],"sources":["../../../src/web-page/renderers/finance-chart.ts"],"sourcesContent":["export const FINANCE_CHART_JS = `\n  // ── Finance Chart Primitive (TradingView Lightweight Charts v5) ──\n\n  function renderAupFinanceChart(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-finance-chart\";\n    var p = node.props || {};\n    var variant = p.variant || \"candlestick\";\n    if (p.height) el.style.height = p.height;\n    else el.style.height = \"400px\";\n\n    var chartDiv = document.createElement(\"div\");\n    chartDiv.style.width = \"100%\";\n    chartDiv.style.height = \"100%\";\n    el.appendChild(chartDiv);\n\n    function isDarkMode() {\n      var bg = getComputedStyle(document.documentElement).getPropertyValue(\"--bg\").trim();\n      if (!bg) return true;\n      // Simple heuristic: dark if bg starts with # and first hex digit < 8\n      if (bg.charAt(0) === \"#\") {\n        var r = parseInt(bg.substring(1, 3), 16);\n        return r < 128;\n      }\n      return true;\n    }\n\n    function chartColors() {\n      var dark = isDarkMode();\n      return {\n        bg: \"transparent\",\n        text: dark ? \"#d1d5db\" : \"#374151\",\n        grid: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\",\n        crosshair: dark ? \"#6b7280\" : \"#9ca3af\",\n        upColor: p.upColor || \"#26a69a\",\n        downColor: p.downColor || \"#ef5350\",\n        lineColor: p.lineColor || \"#2962FF\",\n        areaTop: p.areaTopColor || \"rgba(41,98,255,0.4)\",\n        areaBottom: p.areaBottomColor || \"rgba(41,98,255,0)\",\n      };\n    }\n\n    function initFinanceChart() {\n      if (typeof LightweightCharts === \"undefined\") {\n        var loading = document.createElement(\"div\");\n        loading.className = \"aup-finance-chart-loading\";\n        loading.textContent = \"Loading chart...\";\n        el.insertBefore(loading, chartDiv);\n        loadScript(\"https://cdn.jsdelivr.net/npm/lightweight-charts@5/dist/lightweight-charts.standalone.production.js\", function() {\n          if (loading.parentNode) loading.parentNode.removeChild(loading);\n          createFinanceChart();\n        });\n      } else {\n        createFinanceChart();\n      }\n    }\n\n    var chartInstance = null;\n    var primarySeries = null;\n    var volumeSeries = null;\n\n    function createFinanceChart() {\n      try {\n        var c = chartColors();\n        chartInstance = LightweightCharts.createChart(chartDiv, {\n          layout: { background: { type: \"solid\", color: c.bg }, textColor: c.text, fontFamily: \"inherit\" },\n          grid: { vertLines: { color: c.grid }, horzLines: { color: c.grid } },\n          crosshair: { vertLine: { color: c.crosshair, labelBackgroundColor: c.crosshair }, horzLine: { color: c.crosshair, labelBackgroundColor: c.crosshair } },\n          rightPriceScale: { borderColor: c.grid },\n          timeScale: { borderColor: c.grid, timeVisible: true },\n          autoSize: true,\n        });\n\n        // Add primary series based on variant\n        if (variant === \"candlestick\") {\n          primarySeries = chartInstance.addSeries(LightweightCharts.CandlestickSeries, {\n            upColor: c.upColor, downColor: c.downColor, borderVisible: false,\n            wickUpColor: c.upColor, wickDownColor: c.downColor,\n          });\n        } else if (variant === \"ohlc\") {\n          primarySeries = chartInstance.addSeries(LightweightCharts.BarSeries, {\n            upColor: c.upColor, downColor: c.downColor,\n          });\n        } else if (variant === \"trading-line\") {\n          primarySeries = chartInstance.addSeries(LightweightCharts.LineSeries, {\n            color: c.lineColor, lineWidth: 2,\n          });\n        } else if (variant === \"trading-area\") {\n          primarySeries = chartInstance.addSeries(LightweightCharts.AreaSeries, {\n            lineColor: c.lineColor, topColor: c.areaTop, bottomColor: c.areaBottom, lineWidth: 2,\n          });\n        } else if (variant === \"baseline\") {\n          var bv = p.baseValue || 0;\n          primarySeries = chartInstance.addSeries(LightweightCharts.BaselineSeries, {\n            baseValue: { type: \"price\", price: bv },\n            topLineColor: c.upColor, topFillColor1: \"rgba(38,166,154,0.28)\", topFillColor2: \"rgba(38,166,154,0)\",\n            bottomLineColor: c.downColor, bottomFillColor1: \"rgba(239,83,80,0)\", bottomFillColor2: \"rgba(239,83,80,0.28)\",\n          });\n        } else if (variant === \"volume\") {\n          primarySeries = chartInstance.addSeries(LightweightCharts.HistogramSeries, {\n            priceFormat: { type: \"volume\" },\n            priceScaleId: \"\",\n          });\n        }\n\n        // Optional volume overlay (for candlestick/ohlc)\n        if (p.volumeData || p.showVolume) {\n          volumeSeries = chartInstance.addSeries(LightweightCharts.HistogramSeries, {\n            priceFormat: { type: \"volume\" },\n            priceScaleId: \"volume\",\n          });\n          chartInstance.priceScale(\"volume\").applyOptions({\n            scaleMargins: { top: 0.8, bottom: 0 },\n          });\n        }\n\n        // Set data\n        var data = p.data || [];\n        if (data.length) {\n          primarySeries.setData(data);\n          if (volumeSeries && p.volumeData) volumeSeries.setData(p.volumeData);\n          chartInstance.timeScale().fitContent();\n        }\n      } catch(e) {\n        chartDiv.textContent = \"Chart error: \" + e.message;\n      }\n    }\n\n    function updateFinanceData(raw) {\n      var d = (typeof raw === \"object\" && raw !== null) ? raw : {};\n      if (d.content && typeof d.content === \"object\") d = d.content;\n      if (primarySeries && d.data) {\n        primarySeries.setData(d.data);\n        if (volumeSeries && d.volumeData) volumeSeries.setData(d.volumeData);\n        if (chartInstance) chartInstance.timeScale().fitContent();\n      }\n    }\n\n    // src binding\n    if (node.src && window.afs) {\n      var loading = document.createElement(\"div\");\n      loading.className = \"aup-finance-chart-loading\";\n      loading.textContent = \"Loading data...\";\n      el.insertBefore(loading, chartDiv);\n\n      function applyFinanceData(raw) {\n        if (loading.parentNode) loading.parentNode.removeChild(loading);\n        if (!chartInstance) {\n          // Chart not created yet — store data and init\n          var d = (typeof raw === \"object\" && raw !== null) ? raw : {};\n          if (d.content && typeof d.content === \"object\") d = d.content;\n          if (d.data) p.data = d.data;\n          if (d.volumeData) { p.volumeData = d.volumeData; p.showVolume = true; }\n          initFinanceChart();\n        } else {\n          updateFinanceData(raw);\n        }\n      }\n\n      window.afs.read(node.src).then(applyFinanceData).catch(function(e) {\n        loading.textContent = \"Data error: \" + e.message;\n      });\n      window.afs.subscribe({ type: \"afs:write\", path: node.src }, function(event) {\n        if (event && event.data) applyFinanceData(event.data);\n      });\n    } else {\n      setTimeout(initFinanceChart, 0);\n    }\n\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,mBAAmB"}

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

@@ -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
+exports.FRAME_JS = FRAME_JS;