@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1,669 @@
+
+//#region src/web-page/renderers/wm.ts
+/**
+* WM Renderer — Client-side window manager as AUP node types.
+*
+* WM is no longer a separate message protocol. It's two AUP node types:
+*   - "wm": container node, props.strategy = "single" | "floating" | "panels"
+*   - "wm-surface": child of wm, src = session URL, props = { title, position, size, ... }
+*
+* State lives in the AUP tree. Reconnect replays the tree → WM restores for free.
+* Patches on WM nodes trigger re-render via the standard AUP DOM patching pipeline.
+*/
+const WM_JS = `
+  // ── WM Node Renderer ──
+  // Renders a "wm" AUP node as a window manager container.
+  // Reads strategy from node.props.strategy, surfaces from node.children (type="wm-surface").
+
+  var _wmMaxZ = 10;
+
+  function renderAupWm(node) {
+    var p = node.props || {};
+    var strategy = p.strategy || "single";
+    var children = node.children || [];
+
+    var container = document.createElement("div");
+    container.className = "wm-container";
+    container.setAttribute("data-wm-strategy", strategy);
+
+    // Collect surface data from children
+    var surfaces = [];
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      if (child.type === "wm-surface") {
+        var cp = child.props || {};
+        surfaces.push({
+          id: child.id,
+          name: cp.surfaceName || child.id,
+          src: child.src || "",
+          title: cp.title || cp.surfaceName || child.id,
+          position: cp.position || null,
+          size: cp.size || null,
+          zIndex: cp.zIndex || 0,
+          docked: !!cp.docked,
+          panel: cp.panel || null,
+          originalPanel: cp.originalPanel || null,
+          node: child
+        });
+      }
+    }
+
+    // Determine active surface (from WM node state or first non-docked)
+    var wmState = node.state || {};
+    var activeName = wmState.active || null;
+    if (!activeName && surfaces.length > 0) {
+      for (var ai = 0; ai < surfaces.length; ai++) {
+        if (!surfaces[ai].docked) { activeName = surfaces[ai].name; break; }
+      }
+    }
+
+    switch (strategy) {
+      case "floating":
+        _wmRenderFloatingFromNode(container, surfaces, activeName, node);
+        break;
+      case "panels":
+        _wmRenderPanelsFromNode(container, surfaces, activeName, node);
+        break;
+      case "single":
+      default:
+        _wmRenderSingleFromNode(container, surfaces, activeName);
+        break;
+    }
+
+    return container;
+  }
+
+  // ── Single Strategy ──
+  function _wmRenderSingleFromNode(container, surfaces, activeName) {
+    if (surfaces.length === 0) {
+      container.innerHTML = '<div class="wm-empty">No surfaces</div>';
+      return;
+    }
+    for (var i = 0; i < surfaces.length; i++) {
+      var s = surfaces[i];
+      var el = _wmCreateSurfaceElFromNode(s);
+      if (s.name === activeName) {
+        el.style.display = "block";
+        el.setAttribute("data-active", "true");
+        el.style.position = "relative";
+        el.style.width = "100%";
+        el.style.height = "100%";
+      } else {
+        el.style.display = "none";
+      }
+      container.appendChild(el);
+    }
+  }
+
+  // ── Floating Strategy ──
+  function _wmRenderFloatingFromNode(container, surfaces, activeName, wmNode) {
+    container.style.position = "relative";
+    container.style.overflow = "hidden";
+    if (surfaces.length === 0) {
+      container.innerHTML = '<div class="wm-empty">No surfaces</div>';
+      return;
+    }
+
+    var hasDocked = false;
+    var cascadeOffset = 30;
+    var floatingIdx = 0;
+
+    for (var i = 0; i < surfaces.length; i++) {
+      var s = surfaces[i];
+      if (s.docked) { hasDocked = true; continue; }
+
+      var el = _wmCreateSurfaceElFromNode(s);
+
+      // Floating: absolute position
+      el.style.position = "absolute";
+      if (s.position) {
+        el.style.left = s.position.x + "px";
+        el.style.top = s.position.y + "px";
+      } else {
+        el.style.left = (cascadeOffset * floatingIdx) + "px";
+        el.style.top = (cascadeOffset * floatingIdx) + "px";
+      }
+      if (s.size) {
+        el.style.width = s.size.width + "px";
+        el.style.height = s.size.height + "px";
+      } else {
+        el.style.width = "400px";
+        el.style.height = "300px";
+      }
+      var z = s.zIndex || (++_wmMaxZ);
+      el.style.zIndex = String(z);
+
+      // Decorator: title bar + close + resize
+      _wmApplyDecoratorFromNode(el, s, wmNode);
+
+      // Click-to-front
+      (function(surfEl, surfData, wmN) {
+        surfEl.addEventListener("pointerdown", function() {
+          _wmBringToFrontFromNode(surfEl, surfData, wmN);
+        });
+      })(el, s, wmNode);
+
+      // Active state
+      if (s.name === activeName) {
+        el.setAttribute("data-active", "true");
+      }
+
+      container.appendChild(el);
+      floatingIdx++;
+    }
+
+    // Dock
+    if (hasDocked) {
+      var dockEl = document.createElement("div");
+      dockEl.className = "wm-dock";
+      dockEl.style.display = "flex";
+      for (var di = 0; di < surfaces.length; di++) {
+        var ds = surfaces[di];
+        if (!ds.docked) continue;
+        var item = document.createElement("div");
+        item.className = "wm-dock-item";
+        item.textContent = _escapeHtml(ds.title);
+        item.setAttribute("data-surface-id", ds.name);
+        // Undock on click — fire AUP event
+        (function(surfData, wmN) {
+          item.addEventListener("click", function() {
+            _fireAupEvent(surfData.id, "undock", {});
+          });
+        })(ds, wmNode);
+        dockEl.appendChild(item);
+      }
+      container.appendChild(dockEl);
+    }
+  }
+
+  function _wmBringToFrontFromNode(el, surfData, wmNode) {
+    surfData.zIndex = ++_wmMaxZ;
+    el.style.zIndex = String(surfData.zIndex);
+    // Update active on all siblings
+    var container = el.parentNode;
+    if (!container) return;
+    var siblings = container.querySelectorAll(".wm-surface");
+    for (var i = 0; i < siblings.length; i++) {
+      siblings[i].removeAttribute("data-active");
+    }
+    el.setAttribute("data-active", "true");
+  }
+
+  // ── Panels Strategy ──
+  // Positions that span full width (rows, not columns)
+  var _wmRowPositions = { header: 1, footer: 1, statusbar: 1, dock: 1 };
+
+  function _wmRenderPanelsFromNode(container, surfaces, activeName, wmNode) {
+    var p = wmNode.props || {};
+    var panels = p.panels || [];
+    var panelActives = (wmNode.state || {}).panelActives || {};
+
+    if (panels.length === 0) {
+      container.innerHTML = '<div class="wm-empty">No panel layout configured</div>';
+      return;
+    }
+
+    container.className = "wm-container wm-panels";
+
+    // Separate panels into rows (header/footer/statusbar/dock) and columns
+    var topRows = [];   // header
+    var columns = [];   // sidebar, primary, inspector, col1, col2, col3, etc.
+    var bottomRows = []; // footer, statusbar, dock
+    for (var pi = 0; pi < panels.length; pi++) {
+      var pos = panels[pi].position;
+      if (pos === "header") topRows.push(panels[pi]);
+      else if (_wmRowPositions[pos]) bottomRows.push(panels[pi]);
+      else columns.push(panels[pi]);
+    }
+
+    // Build grid-template-columns from columns, with 4px dividers between
+    var colSizes = [];
+    var visibleCols = [];
+    for (var ci = 0; ci < columns.length; ci++) {
+      var col = columns[ci];
+      colSizes.push(col.defaultSize || "1fr");
+      visibleCols.push(col);
+    }
+    // Interleave divider gaps: "220px 4px 1fr 4px 280px"
+    var gridCols = [];
+    for (var gi = 0; gi < colSizes.length; gi++) {
+      if (gi > 0) gridCols.push("4px"); // divider
+      gridCols.push(colSizes[gi]);
+    }
+    if (gridCols.length === 0) gridCols.push("1fr");
+
+    // Compute grid-template-rows
+    var gridRows = [];
+    if (topRows.length > 0) gridRows.push("auto");
+    gridRows.push("1fr"); // main column area
+    for (var br = 0; br < bottomRows.length; br++) gridRows.push("auto");
+
+    container.style.gridTemplateColumns = gridCols.join(" ");
+    container.style.gridTemplateRows = gridRows.join(" ");
+
+    // Responsive tab bar (hidden by default, shown < 768px)
+    var responsiveTabBar = document.createElement("div");
+    responsiveTabBar.className = "wm-responsive-tabs";
+    var responsiveActivePanel = null;
+
+    // ── Render top rows (header) ──
+    for (var tri = 0; tri < topRows.length; tri++) {
+      _wmRenderPanelEl(container, topRows[tri], surfaces, panelActives, wmNode);
+    }
+
+    // ── Render columns with dividers ──
+    var colRow = topRows.length > 0 ? 2 : 1;
+    for (var cii = 0; cii < visibleCols.length; cii++) {
+      // Insert divider before this column (except first)
+      if (cii > 0) {
+        var divider = document.createElement("div");
+        divider.className = "wm-divider";
+        divider.style.gridRow = String(colRow);
+        // Divider resize: between visibleCols[cii-1] and visibleCols[cii]
+        (function(div, leftPanel, rightPanel, containerEl) {
+          _wmEnableDividerResize(div, leftPanel, rightPanel, containerEl, wmNode);
+        })(divider, visibleCols[cii - 1], visibleCols[cii], container);
+        container.appendChild(divider);
+      }
+
+      var colPanel = visibleCols[cii];
+      var panelEl = _wmRenderPanelEl(container, colPanel, surfaces, panelActives, wmNode);
+      panelEl.style.gridRow = String(colRow);
+      // Tag panels that have flexible size so divider resize preserves "1fr"
+      if (colPanel.defaultSize === "1fr" || !colPanel.defaultSize) {
+        panelEl.setAttribute("data-wm-flex", "true");
+      }
+
+      // Add to responsive tab bar
+      var rTab = document.createElement("div");
+      rTab.className = "wm-responsive-tab";
+      rTab.textContent = colPanel.id;
+      rTab.setAttribute("data-panel-id", colPanel.id);
+      if (!responsiveActivePanel) {
+        responsiveActivePanel = colPanel.id;
+        rTab.setAttribute("data-active", "true");
+      } else {
+        panelEl.setAttribute("data-wm-responsive-hidden", "true");
+      }
+      (function(tab, pid, panelElement, allTabs) {
+        tab.addEventListener("click", function() {
+          // Show this panel, hide others
+          var allPanels = container.querySelectorAll(".wm-panel");
+          var allRTabs = container.querySelectorAll(".wm-responsive-tab");
+          for (var ri = 0; ri < allPanels.length; ri++) {
+            var rp = allPanels[ri];
+            var rpPos = rp.getAttribute("data-wm-position");
+            if (_wmRowPositions[rpPos]) continue;
+            rp.setAttribute("data-wm-responsive-hidden", rp.getAttribute("data-wm-panel") !== pid ? "true" : "false");
+          }
+          for (var rti = 0; rti < allRTabs.length; rti++) {
+            allRTabs[rti].setAttribute("data-active", allRTabs[rti].getAttribute("data-panel-id") === pid ? "true" : "false");
+          }
+        });
+      })(rTab, colPanel.id, panelEl, responsiveTabBar);
+      responsiveTabBar.appendChild(rTab);
+    }
+
+    // Insert responsive tab bar after top rows
+    if (visibleCols.length > 1) {
+      container.appendChild(responsiveTabBar);
+    }
+
+    // ── Render bottom rows (footer, statusbar, dock) ──
+    for (var bri = 0; bri < bottomRows.length; bri++) {
+      _wmRenderPanelEl(container, bottomRows[bri], surfaces, panelActives, wmNode);
+    }
+
+    // ── Floating overlay for surfaces with no panel assignment ──
+    var overlays = [];
+    for (var oi = 0; oi < surfaces.length; oi++) {
+      if (!surfaces[oi].panel && !surfaces[oi].docked) overlays.push(surfaces[oi]);
+    }
+    if (overlays.length > 0) {
+      var overlayEl = document.createElement("div");
+      overlayEl.className = "wm-overlay";
+      var cascadeOff = 30;
+      for (var oii = 0; oii < overlays.length; oii++) {
+        var oSurf = overlays[oii];
+        var oEl = _wmCreateSurfaceElFromNode(oSurf);
+        oEl.style.position = "absolute";
+        if (oSurf.position) {
+          oEl.style.left = oSurf.position.x + "px";
+          oEl.style.top = oSurf.position.y + "px";
+        } else {
+          oEl.style.left = (80 + cascadeOff * oii) + "px";
+          oEl.style.top = (80 + cascadeOff * oii) + "px";
+        }
+        if (oSurf.size) {
+          oEl.style.width = oSurf.size.width + "px";
+          oEl.style.height = oSurf.size.height + "px";
+        } else {
+          oEl.style.width = "400px";
+          oEl.style.height = "300px";
+        }
+        oEl.style.zIndex = String(oSurf.zIndex || (++_wmMaxZ));
+        _wmApplyDecoratorFromNode(oEl, oSurf, wmNode);
+        (function(sEl, sd, wn) {
+          sEl.addEventListener("pointerdown", function() {
+            _wmBringToFrontFromNode(sEl, sd, wn);
+          });
+        })(oEl, oSurf, wmNode);
+        overlayEl.appendChild(oEl);
+      }
+      container.appendChild(overlayEl);
+    }
+  }
+
+  // ── Render a single panel element with its surfaces/tabs ──
+  function _wmRenderPanelEl(container, panel, surfaces, panelActives, wmNode) {
+    var panelEl = document.createElement("div");
+    panelEl.className = "wm-panel";
+    panelEl.setAttribute("data-wm-panel", panel.id);
+    panelEl.setAttribute("data-wm-position", panel.position);
+
+    // Find surfaces assigned to this panel
+    var panelSurfaces = [];
+    for (var k = 0; k < surfaces.length; k++) {
+      if (surfaces[k].panel === panel.id) {
+        panelSurfaces.push(surfaces[k]);
+      }
+    }
+
+    if (panelSurfaces.length === 0) {
+      var placeholder = document.createElement("div");
+      placeholder.className = "wm-empty";
+      placeholder.textContent = panel.id;
+      panelEl.appendChild(placeholder);
+    } else if (panelSurfaces.length === 1) {
+      var sEl = _wmCreateSurfaceElFromNode(panelSurfaces[0]);
+      sEl.style.position = "relative";
+      sEl.style.width = "100%";
+      sEl.style.height = "100%";
+      sEl.style.display = "block";
+      panelEl.appendChild(sEl);
+    } else {
+      // Multiple surfaces — tab bar
+      var panelActive = panelActives[panel.id] || panelSurfaces[0].name;
+      var tabBar = document.createElement("div");
+      tabBar.className = "wm-tabs";
+
+      for (var t = 0; t < panelSurfaces.length; t++) {
+        var tabSurf = panelSurfaces[t];
+        var tab = document.createElement("div");
+        tab.className = "wm-tab" + (tabSurf.name === panelActive ? " wm-tab-active" : "");
+        tab.setAttribute("data-surface-id", tabSurf.name);
+
+        var tabLabel = document.createElement("span");
+        tabLabel.className = "wm-tab-label";
+        tabLabel.textContent = _escapeHtml(tabSurf.title);
+        tab.appendChild(tabLabel);
+
+        // Tab close
+        var tabClose = document.createElement("button");
+        tabClose.className = "wm-tab-close";
+        tabClose.textContent = "\\u2715";
+        tabClose.title = "Close tab";
+        (function(sd) {
+          tabClose.addEventListener("click", function(e) {
+            e.stopPropagation();
+            _fireAupEvent(sd.id, "close", {});
+          });
+        })(tabSurf);
+        tab.appendChild(tabClose);
+
+        // Tab click to switch
+        (function(sd, pid) {
+          tab.addEventListener("click", function() {
+            _fireAupEvent(wmNode.id, "panel-active", { panel: pid, surface: sd.name });
+          });
+        })(tabSurf, panel.id);
+
+        tabBar.appendChild(tab);
+      }
+      panelEl.appendChild(tabBar);
+
+      // Render tab contents
+      for (var m = 0; m < panelSurfaces.length; m++) {
+        var surfEl = _wmCreateSurfaceElFromNode(panelSurfaces[m]);
+        surfEl.style.position = "relative";
+        surfEl.style.width = "100%";
+        surfEl.style.flex = "1";
+        surfEl.style.display = panelSurfaces[m].name === panelActive ? "block" : "none";
+        panelEl.appendChild(surfEl);
+      }
+    }
+
+    container.appendChild(panelEl);
+    return panelEl;
+  }
+
+  // ── Divider Drag Resize (between two column panels) ──
+  // If the left panel is flex (1fr), resize the right panel instead.
+  function _wmEnableDividerResize(divider, leftPanel, rightPanel, containerEl, wmNode) {
+    var startX, targetStartW;
+    var dragging = false;
+    var targetEl = null;
+    var leftIsFlex = (leftPanel.defaultSize === "1fr" || !leftPanel.defaultSize);
+    var direction = leftIsFlex ? -1 : 1; // -1 means resize right panel (inverse drag)
+
+    function findPanelEl(panelId) {
+      return containerEl.querySelector('[data-wm-panel="' + panelId + '"]');
+    }
+
+    divider.addEventListener("pointerdown", function(e) {
+      dragging = true;
+      startX = e.clientX;
+      var targetPanel = leftIsFlex ? rightPanel : leftPanel;
+      targetEl = findPanelEl(targetPanel.id);
+      if (targetEl) targetStartW = targetEl.offsetWidth;
+      divider.setPointerCapture(e.pointerId);
+      divider.classList.add("wm-divider-active");
+      e.preventDefault();
+    });
+
+    divider.addEventListener("pointermove", function(e) {
+      if (!dragging || !targetEl) return;
+      var dx = e.clientX - startX;
+      var targetPanel = leftIsFlex ? rightPanel : leftPanel;
+      var minW = parseInt(targetPanel.minSize) || 80;
+      var newW = Math.max(minW, targetStartW + dx * direction);
+      targetEl.style.width = newW + "px";
+      targetEl.style.flex = "0 0 " + newW + "px";
+      _wmRecomputeGridCols(containerEl, wmNode);
+    });
+
+    divider.addEventListener("pointerup", function(e) {
+      if (!dragging) return;
+      dragging = false;
+      divider.classList.remove("wm-divider-active");
+      try { divider.releasePointerCapture(e.pointerId); } catch(_) {}
+      if (targetEl) {
+        var targetPanel = leftIsFlex ? rightPanel : leftPanel;
+        _fireAupEvent(wmNode.id, "panel-resize", { panelId: targetPanel.id, size: targetEl.offsetWidth + "px" });
+      }
+    });
+
+    divider.addEventListener("lostpointercapture", function() {
+      dragging = false;
+      divider.classList.remove("wm-divider-active");
+    });
+  }
+
+  // Recompute grid-template-columns from actual panel widths
+  // Panels tagged data-wm-flex="true" keep "1fr" so they absorb remaining space.
+  function _wmRecomputeGridCols(containerEl, wmNode) {
+    var cols = containerEl.querySelectorAll(".wm-panel:not([data-wm-position='header']):not([data-wm-position='footer']):not([data-wm-position='statusbar']):not([data-wm-position='dock'])");
+    var sizes = [];
+    for (var i = 0; i < cols.length; i++) {
+      if (i > 0) sizes.push("4px");
+      if (cols[i].getAttribute("data-wm-flex") === "true") {
+        sizes.push("1fr");
+      } else {
+        var w = cols[i].style.width;
+        if (w && w !== "") sizes.push(w);
+        else sizes.push(cols[i].offsetWidth + "px");
+      }
+    }
+    if (sizes.length > 0) containerEl.style.gridTemplateColumns = sizes.join(" ");
+  }
+
+  // ── Decorator (title bar + close + resize) ──
+  function _wmApplyDecoratorFromNode(el, surfData, wmNode) {
+    var titleBar = document.createElement("div");
+    titleBar.className = "wm-titlebar";
+
+    var titleText = document.createElement("span");
+    titleText.className = "wm-title-text";
+    titleText.textContent = _escapeHtml(surfData.title);
+    titleBar.appendChild(titleText);
+
+    var closeBtn = document.createElement("button");
+    closeBtn.className = "wm-close-btn";
+    closeBtn.textContent = "\\u2715";
+    closeBtn.title = "Close";
+    closeBtn.addEventListener("click", function(e) {
+      e.stopPropagation();
+      _fireAupEvent(surfData.id, "close", {});
+    });
+    titleBar.appendChild(closeBtn);
+
+    el.insertBefore(titleBar, el.firstChild);
+
+    // Drag via title bar
+    _wmEnableDragFromNode(el, titleBar, surfData);
+
+    // Resize handle
+    var resizeHandle = document.createElement("div");
+    resizeHandle.className = "wm-resize-handle";
+    el.appendChild(resizeHandle);
+    _wmEnableResizeFromNode(el, resizeHandle, surfData);
+  }
+
+  // ── Drag ──
+  function _wmEnableDragFromNode(el, handle, surfData) {
+    var startX, startY, origLeft, origTop;
+    var dragging = false;
+
+    function onPointerDown(e) {
+      if (e.target.tagName === "BUTTON") return;
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      origLeft = parseInt(el.style.left) || 0;
+      origTop = parseInt(el.style.top) || 0;
+      handle.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    }
+
+    function onPointerMove(e) {
+      if (!dragging) return;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var container = el.parentNode;
+      var newX = Math.max(0, Math.min(origLeft + dx, container.clientWidth - 40));
+      var newY = Math.max(0, Math.min(origTop + dy, container.clientHeight - 40));
+      el.style.left = newX + "px";
+      el.style.top = newY + "px";
+    }
+
+    function onPointerUp(e) {
+      if (!dragging) return;
+      dragging = false;
+      try { handle.releasePointerCapture(e.pointerId); } catch(_) {}
+      // Sync final position back via AUP event
+      var finalX = parseInt(el.style.left) || 0;
+      var finalY = parseInt(el.style.top) || 0;
+      _fireAupEvent(surfData.id, "move", { position: { x: finalX, y: finalY } });
+    }
+
+    handle.addEventListener("pointerdown", onPointerDown);
+    handle.addEventListener("pointermove", onPointerMove);
+    handle.addEventListener("pointerup", onPointerUp);
+    handle.addEventListener("lostpointercapture", function() { dragging = false; });
+  }
+
+  // ── Resize ──
+  function _wmEnableResizeFromNode(el, handle, surfData) {
+    var startX, startY, origW, origH;
+    var resizing = false;
+    var MIN_W = 120, MIN_H = 80;
+
+    function onPointerDown(e) {
+      resizing = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      origW = el.offsetWidth;
+      origH = el.offsetHeight;
+      handle.setPointerCapture(e.pointerId);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    function onPointerMove(e) {
+      if (!resizing) return;
+      var dx = e.clientX - startX;
+      var dy = e.clientY - startY;
+      var w = Math.max(MIN_W, origW + dx);
+      var h = Math.max(MIN_H, origH + dy);
+      el.style.width = w + "px";
+      el.style.height = h + "px";
+    }
+
+    function onPointerUp(e) {
+      if (!resizing) return;
+      resizing = false;
+      try { handle.releasePointerCapture(e.pointerId); } catch(_) {}
+      // Sync final size back via AUP event
+      var finalW = el.offsetWidth;
+      var finalH = el.offsetHeight;
+      _fireAupEvent(surfData.id, "resize", { size: { width: finalW, height: finalH } });
+    }
+
+    handle.addEventListener("pointerdown", onPointerDown);
+    handle.addEventListener("pointermove", onPointerMove);
+    handle.addEventListener("pointerup", onPointerUp);
+    handle.addEventListener("lostpointercapture", function() { resizing = false; });
+  }
+
+  // ── Surface Element Factory ──
+  function _wmCreateSurfaceElFromNode(surfData) {
+    var el = document.createElement("div");
+    el.className = "wm-surface";
+    el.setAttribute("data-surface-id", surfData.name);
+    el.setAttribute("data-aup-id", surfData.id);
+
+    var content = document.createElement("div");
+    content.className = "wm-surface-content";
+    el.appendChild(content);
+
+    // Universal surface: 3 modes
+    // 1. Inline AUP children → render directly (no device)
+    var children = surfData.node.children || [];
+    if (children.length > 0) {
+      for (var ci = 0; ci < children.length; ci++) {
+        var rendered = renderAupNode(children[ci]);
+        if (rendered) content.appendChild(rendered);
+      }
+      return el;
+    }
+
+    // 2. src = ws:// or http:// URL → device connects to remote AUP server
+    // 3. src = /afs/path → device introspects via window.afs
+    if (surfData.src && typeof renderAupDevice === "function") {
+      var deviceNode = {
+        id: "wm-device-" + surfData.name,
+        type: "device",
+        src: surfData.src,
+        props: { sizing: "fit", showStatus: false }
+      };
+      var deviceEl = renderAupDevice(deviceNode);
+      if (deviceEl) content.appendChild(deviceEl);
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.WM_JS = WM_JS;