@aigne/afs-ui 1.11.0-beta.12

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

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

package/dist/web-page/skeleton.cjs

@@ -0,0 +1,103 @@
+
+//#region src/web-page/skeleton.ts
+const SKELETON = `
+<body>
+  <header style="display:none">
+    <h1>AFS</h1>
+    <span class="dot off" id="dot"></span>
+    <span class="status" id="status">Connecting...</span>
+  </header>
+
+  <div id="desktop-splash">
+    <div class="splash-orbit splash-orbit-1"></div>
+    <div class="splash-orbit splash-orbit-2"></div>
+    <div class="splash-orbit splash-orbit-3"></div>
+    <div class="splash-content">
+      <div class="splash-glyph">
+        <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path class="glyph-outer" d="M40 4 L72 22 V58 L40 76 L8 58 V22 Z" stroke="currentColor" stroke-width="1" fill="none"/>
+          <path class="glyph-inner" d="M40 16 L60 28 V52 L40 64 L20 52 V28 Z" stroke="currentColor" stroke-width="0.75" fill="none"/>
+          <circle class="glyph-core" cx="40" cy="40" r="6" fill="currentColor"/>
+          <line class="glyph-ray" x1="40" y1="34" x2="40" y2="16" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="45.2" y1="37" x2="60" y2="28" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="45.2" y1="43" x2="60" y2="52" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="40" y1="46" x2="40" y2="64" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="34.8" y1="43" x2="20" y2="52" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="34.8" y1="37" x2="20" y2="28" stroke="currentColor" stroke-width="0.5"/>
+        </svg>
+      </div>
+      <div class="splash-wordmark">AFS</div>
+      <div class="splash-sub">Agentic File System</div>
+      <div class="splash-status">
+        <span class="dot off" id="splash-dot"></span>
+        <span id="splash-status">waiting for connection</span>
+      </div>
+    </div>
+  </div>
+
+  <div id="messages" style="display:none"></div>
+
+  <div id="page-view">
+    <div class="page-toolbar">
+      <button id="back-to-chat">Back</button>
+      <span id="page-title"></span>
+    </div>
+    <div id="page-content"></div>
+  </div>
+
+  <div id="aup-display">
+    <div class="aup-toolbar">
+      <button id="aup-back-to-chat">Back</button>
+      <span id="aup-status"></span>
+    </div>
+    <div id="aup-root"></div>
+  </div>
+
+  <div id="chrome-toolbar">
+    <div class="toolbar-group">
+      <span class="toolbar-label">Lang</span>
+      <select id="locale-select" title="Language">
+        <option value="en">EN</option>
+        <option value="zh">中文</option>
+        <option value="ja">日本語</option>
+      </select>
+    </div>
+    <div class="toolbar-group">
+      <span class="toolbar-label">Theme</span>
+      <select id="style-select" title="Style">
+        <option value="midnight">Midnight</option>
+        <option value="clean">Clean</option>
+        <option value="glass">Glass</option>
+        <option value="brutalist">Brutalist</option>
+        <option value="soft">Soft</option>
+        <option value="cyber">Cyber</option>
+        <option value="editorial">Editorial</option>
+        <option value="brutalist-mono">Brutalist Mono</option>
+      </select>
+    </div>
+    <div class="toolbar-group">
+      <span class="toolbar-label">Mode</span>
+      <select id="mode-select" title="Mode">
+        <option value="auto">Auto</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+      </select>
+    </div>
+  </div>
+
+  <div id="prompt-area">
+    <div class="prompt-msg" id="prompt-msg"></div>
+    <div class="prompt-options" id="prompt-options"></div>
+  </div>
+
+  <div id="session-badge"><span id="session-dot"></span><span id="session-id"></span></div>
+
+  <div id="input-bar" style="display:none">
+    <textarea id="input" rows="1" placeholder="Type a message... (Enter to send, Shift+Enter for newline)" disabled></textarea>
+    <button id="btn-send" disabled>Send</button>
+  </div>
+
+`;
+
+//#endregion
+exports.SKELETON = SKELETON;

package/dist/web-page/skeleton.mjs

@@ -0,0 +1,103 @@
+//#region src/web-page/skeleton.ts
+const SKELETON = `
+<body>
+  <header style="display:none">
+    <h1>AFS</h1>
+    <span class="dot off" id="dot"></span>
+    <span class="status" id="status">Connecting...</span>
+  </header>
+
+  <div id="desktop-splash">
+    <div class="splash-orbit splash-orbit-1"></div>
+    <div class="splash-orbit splash-orbit-2"></div>
+    <div class="splash-orbit splash-orbit-3"></div>
+    <div class="splash-content">
+      <div class="splash-glyph">
+        <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path class="glyph-outer" d="M40 4 L72 22 V58 L40 76 L8 58 V22 Z" stroke="currentColor" stroke-width="1" fill="none"/>
+          <path class="glyph-inner" d="M40 16 L60 28 V52 L40 64 L20 52 V28 Z" stroke="currentColor" stroke-width="0.75" fill="none"/>
+          <circle class="glyph-core" cx="40" cy="40" r="6" fill="currentColor"/>
+          <line class="glyph-ray" x1="40" y1="34" x2="40" y2="16" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="45.2" y1="37" x2="60" y2="28" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="45.2" y1="43" x2="60" y2="52" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="40" y1="46" x2="40" y2="64" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="34.8" y1="43" x2="20" y2="52" stroke="currentColor" stroke-width="0.5"/>
+          <line class="glyph-ray" x1="34.8" y1="37" x2="20" y2="28" stroke="currentColor" stroke-width="0.5"/>
+        </svg>
+      </div>
+      <div class="splash-wordmark">AFS</div>
+      <div class="splash-sub">Agentic File System</div>
+      <div class="splash-status">
+        <span class="dot off" id="splash-dot"></span>
+        <span id="splash-status">waiting for connection</span>
+      </div>
+    </div>
+  </div>
+
+  <div id="messages" style="display:none"></div>
+
+  <div id="page-view">
+    <div class="page-toolbar">
+      <button id="back-to-chat">Back</button>
+      <span id="page-title"></span>
+    </div>
+    <div id="page-content"></div>
+  </div>
+
+  <div id="aup-display">
+    <div class="aup-toolbar">
+      <button id="aup-back-to-chat">Back</button>
+      <span id="aup-status"></span>
+    </div>
+    <div id="aup-root"></div>
+  </div>
+
+  <div id="chrome-toolbar">
+    <div class="toolbar-group">
+      <span class="toolbar-label">Lang</span>
+      <select id="locale-select" title="Language">
+        <option value="en">EN</option>
+        <option value="zh">中文</option>
+        <option value="ja">日本語</option>
+      </select>
+    </div>
+    <div class="toolbar-group">
+      <span class="toolbar-label">Theme</span>
+      <select id="style-select" title="Style">
+        <option value="midnight">Midnight</option>
+        <option value="clean">Clean</option>
+        <option value="glass">Glass</option>
+        <option value="brutalist">Brutalist</option>
+        <option value="soft">Soft</option>
+        <option value="cyber">Cyber</option>
+        <option value="editorial">Editorial</option>
+        <option value="brutalist-mono">Brutalist Mono</option>
+      </select>
+    </div>
+    <div class="toolbar-group">
+      <span class="toolbar-label">Mode</span>
+      <select id="mode-select" title="Mode">
+        <option value="auto">Auto</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+      </select>
+    </div>
+  </div>
+
+  <div id="prompt-area">
+    <div class="prompt-msg" id="prompt-msg"></div>
+    <div class="prompt-options" id="prompt-options"></div>
+  </div>
+
+  <div id="session-badge"><span id="session-dot"></span><span id="session-id"></span></div>
+
+  <div id="input-bar" style="display:none">
+    <textarea id="input" rows="1" placeholder="Type a message... (Enter to send, Shift+Enter for newline)" disabled></textarea>
+    <button id="btn-send" disabled>Send</button>
+  </div>
+
+`;
+
+//#endregion
+export { SKELETON };
+//# sourceMappingURL=skeleton.mjs.map

package/dist/web-page/skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.mjs","names":[],"sources":["../../src/web-page/skeleton.ts"],"sourcesContent":["export const SKELETON = `\n<body>\n  <header style=\"display:none\">\n    <h1>AFS</h1>\n    <span class=\"dot off\" id=\"dot\"></span>\n    <span class=\"status\" id=\"status\">Connecting...</span>\n  </header>\n\n  <div id=\"desktop-splash\">\n    <div class=\"splash-orbit splash-orbit-1\"></div>\n    <div class=\"splash-orbit splash-orbit-2\"></div>\n    <div class=\"splash-orbit splash-orbit-3\"></div>\n    <div class=\"splash-content\">\n      <div class=\"splash-glyph\">\n        <svg viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path class=\"glyph-outer\" d=\"M40 4 L72 22 V58 L40 76 L8 58 V22 Z\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\"/>\n          <path class=\"glyph-inner\" d=\"M40 16 L60 28 V52 L40 64 L20 52 V28 Z\" stroke=\"currentColor\" stroke-width=\"0.75\" fill=\"none\"/>\n          <circle class=\"glyph-core\" cx=\"40\" cy=\"40\" r=\"6\" fill=\"currentColor\"/>\n          <line class=\"glyph-ray\" x1=\"40\" y1=\"34\" x2=\"40\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n          <line class=\"glyph-ray\" x1=\"45.2\" y1=\"37\" x2=\"60\" y2=\"28\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n          <line class=\"glyph-ray\" x1=\"45.2\" y1=\"43\" x2=\"60\" y2=\"52\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n          <line class=\"glyph-ray\" x1=\"40\" y1=\"46\" x2=\"40\" y2=\"64\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n          <line class=\"glyph-ray\" x1=\"34.8\" y1=\"43\" x2=\"20\" y2=\"52\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n          <line class=\"glyph-ray\" x1=\"34.8\" y1=\"37\" x2=\"20\" y2=\"28\" stroke=\"currentColor\" stroke-width=\"0.5\"/>\n        </svg>\n      </div>\n      <div class=\"splash-wordmark\">AFS</div>\n      <div class=\"splash-sub\">Agentic File System</div>\n      <div class=\"splash-status\">\n        <span class=\"dot off\" id=\"splash-dot\"></span>\n        <span id=\"splash-status\">waiting for connection</span>\n      </div>\n    </div>\n  </div>\n\n  <div id=\"messages\" style=\"display:none\"></div>\n\n  <div id=\"page-view\">\n    <div class=\"page-toolbar\">\n      <button id=\"back-to-chat\">Back</button>\n      <span id=\"page-title\"></span>\n    </div>\n    <div id=\"page-content\"></div>\n  </div>\n\n  <div id=\"aup-display\">\n    <div class=\"aup-toolbar\">\n      <button id=\"aup-back-to-chat\">Back</button>\n      <span id=\"aup-status\"></span>\n    </div>\n    <div id=\"aup-root\"></div>\n  </div>\n\n  <div id=\"chrome-toolbar\">\n    <div class=\"toolbar-group\">\n      <span class=\"toolbar-label\">Lang</span>\n      <select id=\"locale-select\" title=\"Language\">\n        <option value=\"en\">EN</option>\n        <option value=\"zh\">中文</option>\n        <option value=\"ja\">日本語</option>\n      </select>\n    </div>\n    <div class=\"toolbar-group\">\n      <span class=\"toolbar-label\">Theme</span>\n      <select id=\"style-select\" title=\"Style\">\n        <option value=\"midnight\">Midnight</option>\n        <option value=\"clean\">Clean</option>\n        <option value=\"glass\">Glass</option>\n        <option value=\"brutalist\">Brutalist</option>\n        <option value=\"soft\">Soft</option>\n        <option value=\"cyber\">Cyber</option>\n        <option value=\"editorial\">Editorial</option>\n        <option value=\"brutalist-mono\">Brutalist Mono</option>\n      </select>\n    </div>\n    <div class=\"toolbar-group\">\n      <span class=\"toolbar-label\">Mode</span>\n      <select id=\"mode-select\" title=\"Mode\">\n        <option value=\"auto\">Auto</option>\n        <option value=\"dark\">Dark</option>\n        <option value=\"light\">Light</option>\n      </select>\n    </div>\n  </div>\n\n  <div id=\"prompt-area\">\n    <div class=\"prompt-msg\" id=\"prompt-msg\"></div>\n    <div class=\"prompt-options\" id=\"prompt-options\"></div>\n  </div>\n\n  <div id=\"session-badge\"><span id=\"session-dot\"></span><span id=\"session-id\"></span></div>\n\n  <div id=\"input-bar\" style=\"display:none\">\n    <textarea id=\"input\" rows=\"1\" placeholder=\"Type a message... (Enter to send, Shift+Enter for newline)\" disabled></textarea>\n    <button id=\"btn-send\" disabled>Send</button>\n  </div>\n\n`;\n"],"mappings":";AAAA,MAAa,WAAW"}

package/dist/web-page.cjs

@@ -0,0 +1,114 @@
+const require_core = require('./web-page/core.cjs');
+const require_css = require('./web-page/css.cjs');
+const require_icons = require('./web-page/icons.cjs');
+const require_overlay_themes = require('./web-page/overlay-themes.cjs');
+const require_action = require('./web-page/renderers/action.cjs');
+const require_broadcast = require('./web-page/renderers/broadcast.cjs');
+const require_calendar = require('./web-page/renderers/calendar.cjs');
+const require_canvas = require('./web-page/renderers/canvas.cjs');
+const require_cdn_loader = require('./web-page/renderers/cdn-loader.cjs');
+const require_chart = require('./web-page/renderers/chart.cjs');
+const require_deck = require('./web-page/renderers/deck.cjs');
+const require_device = require('./web-page/renderers/device.cjs');
+const require_editor = require('./web-page/renderers/editor.cjs');
+const require_finance_chart = require('./web-page/renderers/finance-chart.cjs');
+const require_frame = require('./web-page/renderers/frame.cjs');
+const require_globe = require('./web-page/renderers/globe.cjs');
+const require_input = require('./web-page/renderers/input.cjs');
+const require_list = require('./web-page/renderers/list.cjs');
+const require_map = require('./web-page/renderers/map.cjs');
+const require_media = require('./web-page/renderers/media.cjs');
+const require_moonphase = require('./web-page/renderers/moonphase.cjs');
+const require_natal_chart = require('./web-page/renderers/natal-chart.cjs');
+const require_overlay = require('./web-page/renderers/overlay.cjs');
+const require_table = require('./web-page/renderers/table.cjs');
+const require_terminal = require('./web-page/renderers/terminal.cjs');
+const require_text = require('./web-page/renderers/text.cjs');
+const require_ticker = require('./web-page/renderers/ticker.cjs');
+const require_time = require('./web-page/renderers/time.cjs');
+const require_unknown = require('./web-page/renderers/unknown.cjs');
+const require_view = require('./web-page/renderers/view.cjs');
+const require_wm = require('./web-page/renderers/wm.cjs');
+const require_skeleton = require('./web-page/skeleton.cjs');
+let node_module = require("node:module");
+
+//#region src/web-page.ts
+/**
+* Inline HTML template for the AFS UI web client.
+*
+* Self-contained — CDN dependencies for markdown rendering (marked + highlight.js).
+* Provides a chat-style interface with WebSocket communication.
+* Supports text, html, markdown, and component message formats.
+*
+* Ported from AOS chat-ui surface, adapted for AFS WebBackend WS protocol.
+*
+* Structure: assembler that imports CSS, skeleton, core JS, and renderer
+* modules, then concatenates them into a single HTML string.  All pieces
+* share the same IIFE scope — function declarations are hoisted, so
+* renderer order is flexible.
+*/
+const AFS_VERSION = (0, node_module.createRequire)(require("url").pathToFileURL(__filename).href)("../package.json").version || "unknown";
+const AFS_VERSION_LITERAL = JSON.stringify(String(AFS_VERSION)).replace(/</g, "\\u003c");
+const WEB_CLIENT_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AFS</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Noto+Sans+SC:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"><\/script>
+<script src="https://cdn.jsdelivr.net/npm/marked-highlight@2/lib/index.umd.min.js"><\/script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark-dimmed.min.css">
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"><\/script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"><\/script>
+<style>
+${require_css.CSS}
+</style>
+</head>
+${require_skeleton.SKELETON}
+<script>
+(function() {
+var _AFS_VERSION = ${AFS_VERSION_LITERAL};
+${require_core.CORE_HEAD_JS}
+${require_icons.ICONS_JS}
+
+${require_view.VIEW_JS}
+${require_text.TEXT_JS}
+${require_action.ACTION_JS}
+${require_input.INPUT_JS}
+${require_media.MEDIA_JS}
+${require_overlay.OVERLAY_JS}
+${require_table.TABLE_JS}
+${require_terminal.TERMINAL_JS}
+${require_cdn_loader.CDN_LOADER_JS}
+${require_time.TIME_JS}
+${require_chart.CHART_JS}
+${require_finance_chart.FINANCE_CHART_JS}
+${require_map.MAP_JS}
+${require_globe.GLOBE_JS}
+${require_calendar.CALENDAR_JS}
+${require_moonphase.MOONPHASE_JS}
+${require_natal_chart.NATAL_CHART_JS}
+${require_editor.EDITOR_JS}
+${require_frame.FRAME_JS}
+${require_canvas.CANVAS_JS}
+${require_ticker.TICKER_JS}
+${require_broadcast.BROADCAST_JS}
+${require_list.LIST_JS}
+${require_device.DEVICE_JS}
+${require_wm.WM_JS}
+var _OVERLAY_THEMES_CSS = ${JSON.stringify(require_overlay_themes.OVERLAY_THEMES_CSS)};
+${require_overlay_themes.OVERLAY_THEMES_JS}
+var _DECK_SHADOW_CSS = ${JSON.stringify(require_css.DECK_SHADOW_CSS)};
+${require_deck.DECK_JS}
+${require_unknown.UNKNOWN_JS}
+
+${require_core.CORE_TAIL_JS}
+<\/script>
+</body>
+</html>`;
+
+//#endregion
+exports.WEB_CLIENT_HTML = WEB_CLIENT_HTML;

package/dist/web-page.d.cts

@@ -0,0 +1,19 @@
+//#region src/web-page.d.ts
+/**
+ * Inline HTML template for the AFS UI web client.
+ *
+ * Self-contained — CDN dependencies for markdown rendering (marked + highlight.js).
+ * Provides a chat-style interface with WebSocket communication.
+ * Supports text, html, markdown, and component message formats.
+ *
+ * Ported from AOS chat-ui surface, adapted for AFS WebBackend WS protocol.
+ *
+ * Structure: assembler that imports CSS, skeleton, core JS, and renderer
+ * modules, then concatenates them into a single HTML string.  All pieces
+ * share the same IIFE scope — function declarations are hoisted, so
+ * renderer order is flexible.
+ */
+declare const WEB_CLIENT_HTML: string;
+//#endregion
+export { WEB_CLIENT_HTML };
+//# sourceMappingURL=web-page.d.cts.map

package/dist/web-page.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-page.d.cts","names":[],"sources":["../src/web-page.ts"],"mappings":";;AAsDA;;;;;;;;;;;;;cAAa,eAAA"}

package/dist/web-page.d.mts

@@ -0,0 +1,19 @@
+//#region src/web-page.d.ts
+/**
+ * Inline HTML template for the AFS UI web client.
+ *
+ * Self-contained — CDN dependencies for markdown rendering (marked + highlight.js).
+ * Provides a chat-style interface with WebSocket communication.
+ * Supports text, html, markdown, and component message formats.
+ *
+ * Ported from AOS chat-ui surface, adapted for AFS WebBackend WS protocol.
+ *
+ * Structure: assembler that imports CSS, skeleton, core JS, and renderer
+ * modules, then concatenates them into a single HTML string.  All pieces
+ * share the same IIFE scope — function declarations are hoisted, so
+ * renderer order is flexible.
+ */
+declare const WEB_CLIENT_HTML: string;
+//#endregion
+export { WEB_CLIENT_HTML };
+//# sourceMappingURL=web-page.d.mts.map

package/dist/web-page.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-page.d.mts","names":[],"sources":["../src/web-page.ts"],"mappings":";;AAsDA;;;;;;;;;;;;;cAAa,eAAA"}

package/dist/web-page.mjs

@@ -0,0 +1,115 @@
+import { CORE_HEAD_JS, CORE_TAIL_JS } from "./web-page/core.mjs";
+import { CSS, DECK_SHADOW_CSS } from "./web-page/css.mjs";
+import { ICONS_JS } from "./web-page/icons.mjs";
+import { OVERLAY_THEMES_CSS, OVERLAY_THEMES_JS } from "./web-page/overlay-themes.mjs";
+import { ACTION_JS } from "./web-page/renderers/action.mjs";
+import { BROADCAST_JS } from "./web-page/renderers/broadcast.mjs";
+import { CALENDAR_JS } from "./web-page/renderers/calendar.mjs";
+import { CANVAS_JS } from "./web-page/renderers/canvas.mjs";
+import { CDN_LOADER_JS } from "./web-page/renderers/cdn-loader.mjs";
+import { CHART_JS } from "./web-page/renderers/chart.mjs";
+import { DECK_JS } from "./web-page/renderers/deck.mjs";
+import { DEVICE_JS } from "./web-page/renderers/device.mjs";
+import { EDITOR_JS } from "./web-page/renderers/editor.mjs";
+import { FINANCE_CHART_JS } from "./web-page/renderers/finance-chart.mjs";
+import { FRAME_JS } from "./web-page/renderers/frame.mjs";
+import { GLOBE_JS } from "./web-page/renderers/globe.mjs";
+import { INPUT_JS } from "./web-page/renderers/input.mjs";
+import { LIST_JS } from "./web-page/renderers/list.mjs";
+import { MAP_JS } from "./web-page/renderers/map.mjs";
+import { MEDIA_JS } from "./web-page/renderers/media.mjs";
+import { MOONPHASE_JS } from "./web-page/renderers/moonphase.mjs";
+import { NATAL_CHART_JS } from "./web-page/renderers/natal-chart.mjs";
+import { OVERLAY_JS } from "./web-page/renderers/overlay.mjs";
+import { TABLE_JS } from "./web-page/renderers/table.mjs";
+import { TERMINAL_JS } from "./web-page/renderers/terminal.mjs";
+import { TEXT_JS } from "./web-page/renderers/text.mjs";
+import { TICKER_JS } from "./web-page/renderers/ticker.mjs";
+import { TIME_JS } from "./web-page/renderers/time.mjs";
+import { UNKNOWN_JS } from "./web-page/renderers/unknown.mjs";
+import { VIEW_JS } from "./web-page/renderers/view.mjs";
+import { WM_JS } from "./web-page/renderers/wm.mjs";
+import { SKELETON } from "./web-page/skeleton.mjs";
+import { createRequire } from "node:module";
+
+//#region src/web-page.ts
+/**
+* Inline HTML template for the AFS UI web client.
+*
+* Self-contained — CDN dependencies for markdown rendering (marked + highlight.js).
+* Provides a chat-style interface with WebSocket communication.
+* Supports text, html, markdown, and component message formats.
+*
+* Ported from AOS chat-ui surface, adapted for AFS WebBackend WS protocol.
+*
+* Structure: assembler that imports CSS, skeleton, core JS, and renderer
+* modules, then concatenates them into a single HTML string.  All pieces
+* share the same IIFE scope — function declarations are hoisted, so
+* renderer order is flexible.
+*/
+const AFS_VERSION = createRequire(import.meta.url)("../package.json").version || "unknown";
+const AFS_VERSION_LITERAL = JSON.stringify(String(AFS_VERSION)).replace(/</g, "\\u003c");
+const WEB_CLIENT_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AFS</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Noto+Sans+SC:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/marked@15/marked.min.js"><\/script>
+<script src="https://cdn.jsdelivr.net/npm/marked-highlight@2/lib/index.umd.min.js"><\/script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark-dimmed.min.css">
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"><\/script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"><\/script>
+<style>
+${CSS}
+</style>
+</head>
+${SKELETON}
+<script>
+(function() {
+var _AFS_VERSION = ${AFS_VERSION_LITERAL};
+${CORE_HEAD_JS}
+${ICONS_JS}
+
+${VIEW_JS}
+${TEXT_JS}
+${ACTION_JS}
+${INPUT_JS}
+${MEDIA_JS}
+${OVERLAY_JS}
+${TABLE_JS}
+${TERMINAL_JS}
+${CDN_LOADER_JS}
+${TIME_JS}
+${CHART_JS}
+${FINANCE_CHART_JS}
+${MAP_JS}
+${GLOBE_JS}
+${CALENDAR_JS}
+${MOONPHASE_JS}
+${NATAL_CHART_JS}
+${EDITOR_JS}
+${FRAME_JS}
+${CANVAS_JS}
+${TICKER_JS}
+${BROADCAST_JS}
+${LIST_JS}
+${DEVICE_JS}
+${WM_JS}
+var _OVERLAY_THEMES_CSS = ${JSON.stringify(OVERLAY_THEMES_CSS)};
+${OVERLAY_THEMES_JS}
+var _DECK_SHADOW_CSS = ${JSON.stringify(DECK_SHADOW_CSS)};
+${DECK_JS}
+${UNKNOWN_JS}
+
+${CORE_TAIL_JS}
+<\/script>
+</body>
+</html>`;
+
+//#endregion
+export { WEB_CLIENT_HTML };
+//# sourceMappingURL=web-page.mjs.map

package/dist/web-page.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-page.mjs","names":[],"sources":["../src/web-page.ts"],"sourcesContent":["/**\n * Inline HTML template for the AFS UI web client.\n *\n * Self-contained — CDN dependencies for markdown rendering (marked + highlight.js).\n * Provides a chat-style interface with WebSocket communication.\n * Supports text, html, markdown, and component message formats.\n *\n * Ported from AOS chat-ui surface, adapted for AFS WebBackend WS protocol.\n *\n * Structure: assembler that imports CSS, skeleton, core JS, and renderer\n * modules, then concatenates them into a single HTML string.  All pieces\n * share the same IIFE scope — function declarations are hoisted, so\n * renderer order is flexible.\n */\n\nimport { createRequire } from \"node:module\";\nimport { CORE_HEAD_JS, CORE_TAIL_JS } from \"./web-page/core.js\";\nimport { CSS, DECK_SHADOW_CSS } from \"./web-page/css.js\";\nimport { ICONS_JS } from \"./web-page/icons.js\";\nimport { OVERLAY_THEMES_CSS, OVERLAY_THEMES_JS } from \"./web-page/overlay-themes.js\";\nimport { ACTION_JS } from \"./web-page/renderers/action.js\";\nimport { BROADCAST_JS } from \"./web-page/renderers/broadcast.js\";\nimport { CALENDAR_JS } from \"./web-page/renderers/calendar.js\";\nimport { CANVAS_JS } from \"./web-page/renderers/canvas.js\";\nimport { CDN_LOADER_JS } from \"./web-page/renderers/cdn-loader.js\";\nimport { CHART_JS } from \"./web-page/renderers/chart.js\";\nimport { DECK_JS } from \"./web-page/renderers/deck.js\";\nimport { DEVICE_JS } from \"./web-page/renderers/device.js\";\nimport { EDITOR_JS } from \"./web-page/renderers/editor.js\";\nimport { FINANCE_CHART_JS } from \"./web-page/renderers/finance-chart.js\";\nimport { FRAME_JS } from \"./web-page/renderers/frame.js\";\nimport { GLOBE_JS } from \"./web-page/renderers/globe.js\";\nimport { INPUT_JS } from \"./web-page/renderers/input.js\";\nimport { LIST_JS } from \"./web-page/renderers/list.js\";\nimport { MAP_JS } from \"./web-page/renderers/map.js\";\nimport { MEDIA_JS } from \"./web-page/renderers/media.js\";\nimport { MOONPHASE_JS } from \"./web-page/renderers/moonphase.js\";\nimport { NATAL_CHART_JS } from \"./web-page/renderers/natal-chart.js\";\nimport { OVERLAY_JS } from \"./web-page/renderers/overlay.js\";\nimport { TABLE_JS } from \"./web-page/renderers/table.js\";\nimport { TERMINAL_JS } from \"./web-page/renderers/terminal.js\";\nimport { TEXT_JS } from \"./web-page/renderers/text.js\";\nimport { TICKER_JS } from \"./web-page/renderers/ticker.js\";\nimport { TIME_JS } from \"./web-page/renderers/time.js\";\nimport { UNKNOWN_JS } from \"./web-page/renderers/unknown.js\";\nimport { VIEW_JS } from \"./web-page/renderers/view.js\";\nimport { WM_JS } from \"./web-page/renderers/wm.js\";\nimport { SKELETON } from \"./web-page/skeleton.js\";\n\nconst _require = createRequire(import.meta.url);\nconst _pkg = _require(\"../package.json\");\nconst AFS_VERSION: string = _pkg.version || \"unknown\";\nconst AFS_VERSION_LITERAL = JSON.stringify(String(AFS_VERSION)).replace(/</g, \"\\\\u003c\");\n\nexport const WEB_CLIENT_HTML = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>AFS</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&family=Noto+Sans+SC:wght@300;400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Instrument+Serif:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;1,9..144,400&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/npm/marked@15/marked.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/marked-highlight@2/lib/index.umd.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/styles/github-dark-dimmed.min.css\">\n<script src=\"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js\"></script>\n<style>\n${CSS}\n</style>\n</head>\n${SKELETON}\n<script>\n(function() {\nvar _AFS_VERSION = ${AFS_VERSION_LITERAL};\n${CORE_HEAD_JS}\n${ICONS_JS}\n\n${VIEW_JS}\n${TEXT_JS}\n${ACTION_JS}\n${INPUT_JS}\n${MEDIA_JS}\n${OVERLAY_JS}\n${TABLE_JS}\n${TERMINAL_JS}\n${CDN_LOADER_JS}\n${TIME_JS}\n${CHART_JS}\n${FINANCE_CHART_JS}\n${MAP_JS}\n${GLOBE_JS}\n${CALENDAR_JS}\n${MOONPHASE_JS}\n${NATAL_CHART_JS}\n${EDITOR_JS}\n${FRAME_JS}\n${CANVAS_JS}\n${TICKER_JS}\n${BROADCAST_JS}\n${LIST_JS}\n${DEVICE_JS}\n${WM_JS}\nvar _OVERLAY_THEMES_CSS = ${JSON.stringify(OVERLAY_THEMES_CSS)};\n${OVERLAY_THEMES_JS}\nvar _DECK_SHADOW_CSS = ${JSON.stringify(DECK_SHADOW_CSS)};\n${DECK_JS}\n${UNKNOWN_JS}\n\n${CORE_TAIL_JS}\n</script>\n</body>\n</html>`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,cAFW,cAAc,OAAO,KAAK,IAAI,CACzB,kBAAkB,CACP,WAAW;AAC5C,MAAM,sBAAsB,KAAK,UAAU,OAAO,YAAY,CAAC,CAAC,QAAQ,MAAM,UAAU;AAExF,MAAa,kBAAkB;;;;;;;;;;;;;;;EAe7B,IAAI;;;EAGJ,SAAS;;;qBAGU,oBAAoB;EACvC,aAAa;EACb,SAAS;;EAET,QAAQ;EACR,QAAQ;EACR,UAAU;EACV,SAAS;EACT,SAAS;EACT,WAAW;EACX,SAAS;EACT,YAAY;EACZ,cAAc;EACd,QAAQ;EACR,SAAS;EACT,iBAAiB;EACjB,OAAO;EACP,SAAS;EACT,YAAY;EACZ,aAAa;EACb,eAAe;EACf,UAAU;EACV,SAAS;EACT,UAAU;EACV,UAAU;EACV,aAAa;EACb,QAAQ;EACR,UAAU;EACV,MAAM;4BACoB,KAAK,UAAU,mBAAmB,CAAC;EAC7D,kBAAkB;yBACK,KAAK,UAAU,gBAAgB,CAAC;EACvD,QAAQ;EACR,WAAW;;EAEX,aAAa"}