@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1 @@
+{"version":3,"file":"device.mjs","names":[],"sources":["../../../src/web-page/renderers/device.ts"],"sourcesContent":["export const DEVICE_JS = `\n  // ── Device Renderer (universal surface — AFS path or remote WebSocket) ──\n\n  function _resolveDeviceUrl(url) {\n    if (!url || typeof url !== \"string\") return null;\n    url = url.trim();\n    if (url.indexOf(\"ws://\") === 0 || url.indexOf(\"wss://\") === 0) return url;\n    if (url.indexOf(\"https://\") === 0) return \"wss://\" + url.slice(8);\n    if (url.indexOf(\"http://\") === 0) return \"ws://\" + url.slice(7);\n    // Shorthand: \":3300\" or \"localhost:3300\"\n    if (/^:\\\\\\\\d+/.test(url)) return \"ws://localhost\" + url;\n    if (/^localhost:\\\\\\\\d+/.test(url)) return \"ws://\" + url;\n    return null;\n  }\n\n  function renderDeviceFallback(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-device-fallback\";\n    el.innerHTML = '<span style=\"font-size:1.2em\">\\\\\\\\u26a0</span> '\n      + '<strong>' + _escapeHtml(String(node.type)) + '</strong>'\n      + ' (not supported on this device)';\n    return el;\n  }\n\n  function renderAupDevice(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-device\";\n    var p = node.props || {};\n    var src = node.src || p.url || p.src || \"\";\n    var showStatus = p.showStatus !== false;\n\n    // Sizing modes: \"fixed\" (default if height set) — scroll internally;\n    // \"fit\" — auto-size to content within min/maxHeight range\n    var sizing = p.sizing || (p.height ? \"fixed\" : \"fit\");\n    if (sizing === \"fixed\") {\n      if (p.height) el.style.height = p.height;\n      el.style.overflow = \"hidden\";\n      el.setAttribute(\"data-aup-device-sizing\", \"fixed\");\n    } else {\n      // \"fit\" mode — content determines height, constrained by min/maxHeight\n      el.style.height = \"auto\";\n      el.style.overflow = \"visible\";\n      if (p.minHeight) el.style.minHeight = p.minHeight;\n      if (p.maxHeight) { el.style.maxHeight = p.maxHeight; el.style.overflow = \"auto\"; }\n      el.setAttribute(\"data-aup-device-sizing\", \"fit\");\n    }\n    if (p.capabilities && p.capabilities.maxWidth) el.style.maxWidth = p.capabilities.maxWidth;\n\n    // Route 1: WebSocket URL → remote AUP connection\n    var wsUrl = _resolveDeviceUrl(src);\n    if (wsUrl) {\n      return _renderDeviceWs(el, node, p, wsUrl, showStatus);\n    }\n\n    // Route 2: AFS path → introspect and auto-render\n    if (src && src.indexOf(\"/\") === 0 && window.afs) {\n      return _renderDeviceAfs(el, node, p, src, showStatus);\n    }\n\n    // No valid source\n    var placeholder = document.createElement(\"div\");\n    placeholder.className = \"aup-device-fallback\";\n    placeholder.innerHTML = '<span style=\"font-size:1.2em\">\\\\\\\\u26a0</span> '\n      + '<span>Device: set <code>src</code> (AFS path) or <code>url</code> (ws://)</span>';\n    el.appendChild(placeholder);\n    return el;\n  }\n\n  // ── Route 1: Remote AUP via WebSocket (existing behavior) ──\n\n  function _renderDeviceWs(el, node, p, wsUrl, showStatus) {\n    // Status indicator\n    var statusEl = document.createElement(\"div\");\n    statusEl.className = \"aup-device-status\";\n    if (showStatus) el.appendChild(statusEl);\n\n    // Content container\n    var contentEl = document.createElement(\"div\");\n    contentEl.className = \"aup-device-content\";\n    el.appendChild(contentEl);\n\n    // Disconnected message\n    var disconnectEl = document.createElement(\"div\");\n    disconnectEl.className = \"aup-device-fallback\";\n    disconnectEl.style.display = \"none\";\n    disconnectEl.textContent = \"Device disconnected\";\n    el.appendChild(disconnectEl);\n\n    // Capability filter — recursively replaces unsupported nodes before rendering\n    var allowedPrimitives = p.capabilities && p.capabilities.primitives;\n    function _filterTree(n) {\n      if (!n) return n;\n      if (allowedPrimitives && n.type && allowedPrimitives.indexOf(n.type) < 0) {\n        return {\n          id: n.id, type: \"view\", props: {},\n          children: [{ id: (n.id || \"x\") + \"-fb\", type: \"text\",\n            props: { content: \"\\\\\\\\u26a0 \" + n.type + \" (not supported on this device)\", intent: \"info\", scale: \"sm\" } }]\n        };\n      }\n      if (n.children) {\n        var fc = [];\n        for (var ci = 0; ci < n.children.length; ci++) fc.push(_filterTree(n.children[ci]));\n        var copy = {}; for (var k in n) copy[k] = n[k];\n        copy.children = fc;\n        return copy;\n      }\n      return n;\n    }\n    function renderFiltered(n) {\n      if (!n || !n.type) return null;\n      if (allowedPrimitives) n = _filterTree(n);\n      return renderAupNode(n);\n    }\n\n    // Store device WS on the element for event routing\n    el.setAttribute(\"data-aup-device-id\", node.id || (\"device-\" + Math.random().toString(36).slice(2)));\n    var deviceWs = null;\n    var reconnectTimer = null;\n    var reconnectDelay = 1000;\n    var destroyed = false;\n    var deviceNodeTree = null;\n\n    function connectDevice() {\n      if (destroyed) return;\n      try {\n        deviceWs = new WebSocket(wsUrl);\n      } catch (ex) {\n        statusEl.className = \"aup-device-status error\";\n        return;\n      }\n      el._aupDeviceWs = deviceWs;\n\n      deviceWs.onopen = function() {\n        statusEl.className = \"aup-device-status connected\";\n        disconnectEl.style.display = \"none\";\n        reconnectDelay = 1000;\n        // Handshake\n        var handshake = { type: \"join_session\" };\n        if (allowedPrimitives) {\n          handshake.caps = { primitives: allowedPrimitives };\n        }\n        deviceWs.send(JSON.stringify(handshake));\n        // Fire connect event\n        if (node.events && node.events.connect) {\n          _fireAupEvent(node.id, \"connect\", {});\n        }\n      };\n\n      deviceWs.onmessage = function(e) {\n        var msg;\n        try { msg = JSON.parse(e.data); } catch (_ex) { return; }\n\n        if (msg.type === \"aup\" && msg.action === \"render\") {\n          deviceNodeTree = msg.root;\n          contentEl.innerHTML = \"\";\n          var rendered = renderFiltered(msg.root);\n          if (rendered) {\n            contentEl.appendChild(rendered);\n            // Trigger animations for device-rendered content immediately\n            var anims = contentEl.querySelectorAll(\"[data-animate]\");\n            for (var ai = 0; ai < anims.length; ai++) anims[ai].classList.add(\"aup-animated\");\n          }\n        } else if (msg.type === \"aup\" && msg.action === \"patch\") {\n          // Apply patches to device node tree and re-render affected nodes\n          if (deviceNodeTree && msg.ops) {\n            _applyDevicePatches(contentEl, deviceNodeTree, msg.ops, renderFiltered);\n          }\n        }\n        // Ignore other message types (session, etc.)\n      };\n\n      deviceWs.onclose = function() {\n        statusEl.className = \"aup-device-status\";\n        el._aupDeviceWs = null;\n        deviceWs = null;\n        if (!destroyed) {\n          disconnectEl.style.display = \"\";\n          // Fire disconnect event\n          if (node.events && node.events.disconnect) {\n            _fireAupEvent(node.id, \"disconnect\", {});\n          }\n          // Auto-reconnect with exponential backoff\n          reconnectTimer = setTimeout(function() {\n            reconnectDelay = Math.min(reconnectDelay * 2, 30000);\n            connectDevice();\n          }, reconnectDelay);\n        }\n      };\n\n      deviceWs.onerror = function() {\n        statusEl.className = \"aup-device-status error\";\n        if (node.events && node.events.error) {\n          _fireAupEvent(node.id, \"error\", { url: wsUrl });\n        }\n      };\n    }\n\n    connectDevice();\n\n    // Cleanup on DOM removal\n    var observer = new MutationObserver(function(mutations) {\n      for (var i = 0; i < mutations.length; i++) {\n        for (var j = 0; j < mutations[i].removedNodes.length; j++) {\n          if (mutations[i].removedNodes[j] === el || mutations[i].removedNodes[j].contains(el)) {\n            destroyed = true;\n            if (reconnectTimer) clearTimeout(reconnectTimer);\n            if (deviceWs) { try { deviceWs.close(); } catch (_ex) {} }\n            el._aupDeviceWs = null;\n            observer.disconnect();\n            return;\n          }\n        }\n      }\n    });\n    if (el.parentNode) {\n      observer.observe(el.parentNode, { childList: true, subtree: true });\n    } else {\n      // Defer until appended\n      setTimeout(function() {\n        if (el.parentNode) observer.observe(el.parentNode, { childList: true, subtree: true });\n      }, 0);\n    }\n\n    return el;\n  }\n\n  // ── Route 2: AFS path → introspect and auto-render ──\n\n  function _renderDeviceAfs(el, node, p, src, showStatus) {\n    el.setAttribute(\"data-aup-id\", node.id || \"\");\n    el.setAttribute(\"data-aup-device-src\", src);\n\n    // Status dot\n    var statusEl = document.createElement(\"div\");\n    statusEl.className = \"aup-device-status\";\n    if (showStatus) el.appendChild(statusEl);\n\n    // Navigation breadcrumb (device-level, above content)\n    var breadcrumbEl = document.createElement(\"div\");\n    breadcrumbEl.className = \"aup-device-breadcrumb\";\n    breadcrumbEl.style.display = \"none\";\n    el.appendChild(breadcrumbEl);\n\n    // View selector container (tabs or dropdown for multi-view .aup/)\n    var viewSelectorEl = document.createElement(\"div\");\n    viewSelectorEl.className = \"aup-device-view-selector\";\n    viewSelectorEl.style.display = \"none\";\n    el.appendChild(viewSelectorEl);\n\n    // Content container\n    var contentEl = document.createElement(\"div\");\n    contentEl.className = \"aup-device-content\";\n    el.appendChild(contentEl);\n\n    var prefix = node.id || \"dev\";\n    var rootSrc = src;\n    var currentSrc = src;\n    // Navigation stack: [{path, isLeaf}]\n    var navStack = [{ path: src, isLeaf: false }];\n    // Track current active view name and all discovered views\n    var activeViewName = (node.state && node.state.activeView) || \"default\";\n    var discoveredViews = null;\n    // Track in-flight view switch to prevent races\n    var viewSwitchSeq = 0;\n\n    function updateBreadcrumb() {\n      breadcrumbEl.innerHTML = \"\";\n      if (navStack.length <= 1) {\n        breadcrumbEl.style.display = \"none\";\n        return;\n      }\n      breadcrumbEl.style.display = \"\";\n      for (var i = 0; i < navStack.length; i++) {\n        if (i > 0) {\n          var sep = document.createElement(\"span\");\n          sep.className = \"aup-device-breadcrumb-sep\";\n          sep.textContent = \"/\";\n          breadcrumbEl.appendChild(sep);\n        }\n        var seg = document.createElement(\"span\");\n        var segPath = navStack[i].path;\n        var segName = segPath === rootSrc ? (rootSrc.split(\"/\").filter(Boolean).pop() || \"/\") : segPath.split(\"/\").filter(Boolean).pop() || \"/\";\n        if (i < navStack.length - 1) {\n          seg.className = \"aup-device-breadcrumb-seg\";\n          seg.textContent = segName;\n          (function(targetIdx) {\n            seg.onclick = function() { navigateToStack(targetIdx); };\n          })(i);\n        } else {\n          seg.className = \"aup-device-breadcrumb-cur\";\n          seg.textContent = segName;\n        }\n        breadcrumbEl.appendChild(seg);\n      }\n    }\n\n    function navigateToStack(idx) {\n      navStack = navStack.slice(0, idx + 1);\n      currentSrc = navStack[navStack.length - 1].path;\n      resolveAndRender(currentSrc);\n      updateBreadcrumb();\n    }\n\n    function navigateToPath(path, isLeaf) {\n      // Don't navigate above root\n      if (path.indexOf(rootSrc) !== 0 && rootSrc.indexOf(path) !== 0) return;\n      currentSrc = path;\n      navStack.push({ path: path, isLeaf: !!isLeaf });\n      resolveAndRender(path);\n      updateBreadcrumb();\n    }\n\n    function resolveAndRender(targetSrc) {\n      contentEl.innerHTML = \"\";\n      var loader = document.createElement(\"div\");\n      loader.className = \"aup-src-loading\";\n      loader.innerHTML = '<div class=\"aup-src-loading-bar\"></div>';\n      contentEl.appendChild(loader);\n\n      window.afs.stat(targetSrc).then(function(statResult) {\n        loader.remove();\n        statusEl.className = \"aup-device-status connected\";\n        var entry = statResult || {};\n        var meta = entry.meta || {};\n        var kind = meta.kind || \"\";\n        var childrenCount = meta.childrenCount;\n        var isDir = childrenCount != null && childrenCount >= 0;\n\n        // Priority 1: Check for .aup/ recipe (with multi-view discovery)\n        _tryAupRecipe(targetSrc, p).then(function(recipe) {\n          if (recipe) {\n            // Check for multi-view metadata attached by _discoverAupViews\n            var views = recipe._aupViews;\n            if (views && views.length > 1) {\n              discoveredViews = views;\n              _renderViewSelector(viewSelectorEl, views, activeViewName, function(viewName) {\n                _switchToView(targetSrc, viewName);\n              });\n            } else {\n              discoveredViews = null;\n              viewSelectorEl.style.display = \"none\";\n              viewSelectorEl.innerHTML = \"\";\n            }\n            // Clean up internal metadata before rendering\n            delete recipe._aupViews;\n            var rendered = renderAupNode(recipe);\n            if (rendered) contentEl.appendChild(rendered);\n          } else if (isDir) {\n            discoveredViews = null;\n            viewSelectorEl.style.display = \"none\";\n            viewSelectorEl.innerHTML = \"\";\n            _renderDeviceAsDir(contentEl, el, prefix, targetSrc, p, kind, navigateToPath);\n          } else {\n            discoveredViews = null;\n            viewSelectorEl.style.display = \"none\";\n            viewSelectorEl.innerHTML = \"\";\n            _renderDeviceAsLeaf(contentEl, prefix, targetSrc, meta);\n          }\n        });\n\n        // Fire connect event on initial load\n        if (targetSrc === rootSrc && node.events && node.events.connect) {\n          _fireAupEvent(node.id, \"connect\", { src: targetSrc, kind: kind });\n        }\n      }).catch(function(err) {\n        loader.remove();\n        statusEl.className = \"aup-device-status error\";\n        var errEl = document.createElement(\"div\");\n        errEl.className = \"aup-device-fallback\";\n        errEl.textContent = \"Failed to resolve: \" + targetSrc + \" (\" + (err.message || \"error\") + \")\";\n        contentEl.appendChild(errEl);\n\n        if (node.events && node.events.error) {\n          _fireAupEvent(node.id, \"error\", { src: targetSrc, message: err.message });\n        }\n      });\n    }\n\n    /**\n     * Switch to a different .aup/ view by name.\n     * Loads the recipe from the selected view and re-renders content.\n     */\n    function _switchToView(targetSrc, viewName) {\n      if (!discoveredViews) return;\n      var seq = ++viewSwitchSeq;\n      activeViewName = viewName;\n      // Persist selection in node.state\n      if (node.state) node.state.activeView = viewName;\n      else node.state = { activeView: viewName };\n\n      // Find the view entry\n      var view = null;\n      for (var i = 0; i < discoveredViews.length; i++) {\n        if (discoveredViews[i].name === viewName) {\n          view = discoveredViews[i];\n          break;\n        }\n      }\n      if (!view) return;\n\n      // Determine preferred variant\n      var preferCompact = false;\n      if (p && p.capabilities) {\n        var caps = p.capabilities;\n        if (caps.maxWidth || (caps.primitives && caps.primitives.length <= 4)) {\n          preferCompact = true;\n        }\n      }\n      var variants = preferCompact ? [\"compact.json\", \"default.json\"] : [\"default.json\"];\n\n      contentEl.innerHTML = \"\";\n      var loader = document.createElement(\"div\");\n      loader.className = \"aup-src-loading\";\n      loader.innerHTML = '<div class=\"aup-src-loading-bar\"></div>';\n      contentEl.appendChild(loader);\n\n      _tryViewVariants(view, variants, 0).then(function(recipe) {\n        // Check if a newer switch has been initiated\n        if (seq !== viewSwitchSeq) return;\n        loader.remove();\n        if (recipe) {\n          var rendered = renderAupNode(recipe);\n          if (rendered) contentEl.appendChild(rendered);\n        } else {\n          var errEl = document.createElement(\"div\");\n          errEl.className = \"aup-device-fallback\";\n          errEl.textContent = \"No recipe found for view: \" + viewName;\n          contentEl.appendChild(errEl);\n        }\n      }).catch(function(err) {\n        if (seq !== viewSwitchSeq) return;\n        loader.remove();\n        var errEl = document.createElement(\"div\");\n        errEl.className = \"aup-device-fallback\";\n        errEl.textContent = \"Failed to load view: \" + viewName + \" (\" + (err.message || \"error\") + \")\";\n        contentEl.appendChild(errEl);\n      });\n\n      // Update selector UI (mark active)\n      _updateViewSelectorActive(viewSelectorEl, viewName);\n    }\n\n    // Initial resolve\n    resolveAndRender(src);\n\n    // Live subscription — re-resolve when data changes\n    if (window.afs.subscribe) {\n      window.afs.subscribe({ type: \"afs:write\", path: src }, function() {\n        resolveAndRender(currentSrc);\n      });\n    }\n\n    return el;\n  }\n\n  // ── AFS rendering strategies ──\n\n  function _renderDeviceAsDir(contentEl, deviceEl, prefix, src, props, kind, onNavigate) {\n    // Generate an afs-list node and render it inline\n    var listNode = {\n      id: prefix + \"-list\",\n      type: \"afs-list\",\n      src: src,\n      props: {\n        layout: \"list\",\n        itemStyle: \"row\",\n        showBreadcrumb: false,\n        clickMode: \"both\"\n      }\n    };\n    // Kind-aware layout hints\n    if (kind === \"gallery\" || kind === \"media\") {\n      listNode.props.layout = \"masonry\";\n      listNode.props.itemStyle = \"media\";\n    } else if (kind === \"themes-directory\" || kind === \"overlay-themes-directory\") {\n      listNode.props.layout = \"grid\";\n      listNode.props.itemStyle = \"card\";\n    }\n    var rendered = renderAupNode(listNode);\n    if (rendered) {\n      contentEl.appendChild(rendered);\n      // Listen for select events on files — navigate device to show leaf detail\n      if (onNavigate) {\n        rendered.addEventListener(\"aup-list:select\", function(e) {\n          var d = e.detail;\n          if (d && d.path) onNavigate(d.path, true);\n        });\n      }\n    }\n  }\n\n  function _renderDeviceAsLeaf(contentEl, prefix, src, meta) {\n    window.afs.read(src).then(function(result) {\n      var content = result;\n      var tree;\n\n      if (typeof content === \"string\") {\n        tree = {\n          id: prefix + \"-text\",\n          type: \"text\",\n          props: { content: content, format: \"markdown\" }\n        };\n      } else if (content && typeof content === \"object\") {\n        tree = _buildDeviceDetailView(prefix, content, meta);\n      } else {\n        tree = {\n          id: prefix + \"-empty\",\n          type: \"text\",\n          props: { content: \"(empty)\", intent: \"info\" }\n        };\n      }\n\n      var rendered = renderAupNode(tree);\n      if (rendered) contentEl.appendChild(rendered);\n    }).catch(function(err) {\n      var errEl = document.createElement(\"div\");\n      errEl.className = \"aup-device-fallback\";\n      errEl.textContent = \"Read failed: \" + (err.message || \"error\");\n      contentEl.appendChild(errEl);\n    });\n  }\n\n  function _buildDeviceDetailView(prefix, obj, meta) {\n    var children = [];\n    // Title from meta if available\n    if (meta && meta.description) {\n      children.push({\n        id: prefix + \"-desc\",\n        type: \"text\",\n        props: { content: String(meta.description), intent: \"info\", scale: \"sm\" }\n      });\n    }\n    var keys = Object.keys(obj);\n    for (var i = 0; i < keys.length; i++) {\n      var k = keys[i];\n      var v = obj[k];\n      var valStr = v === null ? \"null\" : typeof v === \"object\" ? JSON.stringify(v) : String(v);\n      children.push({\n        id: prefix + \"-kv-\" + i,\n        type: \"view\",\n        props: { layout: { direction: \"row\", gap: \"sm\" }, mode: \"inline\" },\n        children: [\n          { id: prefix + \"-k-\" + i, type: \"text\", props: { content: k + \":\", intent: \"info\", scale: \"sm\" } },\n          { id: prefix + \"-v-\" + i, type: \"text\", props: { content: valStr, scale: \"sm\" } }\n        ]\n      });\n    }\n    return {\n      id: prefix + \"-detail\",\n      type: \"view\",\n      props: { layout: { gap: \"xs\" }, mode: \"card\" },\n      children: children\n    };\n  }\n\n  // ── Device patch helpers ──\n  function _applyDevicePatches(contentEl, tree, ops, renderFn) {\n    for (var i = 0; i < ops.length; i++) {\n      var op = ops[i];\n      if (op.op === \"update\") {\n        var target = _findDeviceNode(tree, op.id);\n        if (target) {\n          if (op.props) target.props = Object.assign(target.props || {}, op.props);\n          if (op.state) target.state = Object.assign(target.state || {}, op.state);\n          if (op.events !== undefined) target.events = op.events;\n        }\n        // Re-render the specific node in the DOM\n        var domEl = contentEl.querySelector('[data-aup-id=\"' + op.id + '\"]');\n        if (domEl && target) {\n          var newEl = renderFn(target);\n          if (newEl) domEl.replaceWith(newEl);\n        }\n      } else if (op.op === \"create\") {\n        var parent = _findDeviceNode(tree, op.parentId);\n        if (parent) {\n          if (!parent.children) parent.children = [];\n          var newNode = Object.assign({}, op.node, { id: op.id });\n          if (typeof op.index === \"number\") parent.children.splice(op.index, 0, newNode);\n          else parent.children.push(newNode);\n        }\n        var parentDom = contentEl.querySelector('[data-aup-id=\"' + op.parentId + '\"]');\n        var createdNode = _findDeviceNode(tree, op.id);\n        if (parentDom && createdNode) {\n          var createdEl = renderFn(createdNode);\n          if (createdEl) {\n            if (typeof op.index === \"number\" && parentDom.children[op.index]) {\n              parentDom.insertBefore(createdEl, parentDom.children[op.index]);\n            } else {\n              parentDom.appendChild(createdEl);\n            }\n          }\n        }\n      } else if (op.op === \"remove\") {\n        _removeDeviceNode(tree, op.id);\n        var removeDom = contentEl.querySelector('[data-aup-id=\"' + op.id + '\"]');\n        if (removeDom) removeDom.remove();\n      }\n    }\n  }\n\n  function _findDeviceNode(node, id) {\n    if (!node) return null;\n    if (node.id === id) return node;\n    if (node.children) {\n      for (var i = 0; i < node.children.length; i++) {\n        var found = _findDeviceNode(node.children[i], id);\n        if (found) return found;\n      }\n    }\n    return null;\n  }\n\n  function _removeDeviceNode(root, id) {\n    if (!root.children) return;\n    for (var i = 0; i < root.children.length; i++) {\n      if (root.children[i].id === id) { root.children.splice(i, 1); return; }\n      _removeDeviceNode(root.children[i], id);\n    }\n  }\n\n  // ── .aup/ view selector ──\n\n  /**\n   * Render the view selector (tabs for <=5 views, dropdown for >5).\n   * @param container - The view selector container element\n   * @param views - Array of { name, path } view entries\n   * @param activeView - Currently active view name\n   * @param onSwitch - Callback when user selects a different view\n   */\n  function _renderViewSelector(container, views, activeView, onSwitch) {\n    container.innerHTML = \"\";\n    if (!views || views.length <= 1) {\n      container.style.display = \"none\";\n      return;\n    }\n    container.style.display = \"\";\n\n    // Resolve display labels: try meta.json for each view, fall back to name\n    // For now, use directory name directly (meta.json loading is async, done lazily)\n    var labels = {};\n    for (var i = 0; i < views.length; i++) {\n      labels[views[i].name] = _viewDisplayLabel(views[i].name);\n    }\n\n    // Determine if the active view exists; if not, pick \"default\" or first\n    var found = false;\n    for (var j = 0; j < views.length; j++) {\n      if (views[j].name === activeView) { found = true; break; }\n    }\n    if (!found) {\n      // Try \"default\", then first alphabetically\n      activeView = \"default\";\n      found = false;\n      for (var k = 0; k < views.length; k++) {\n        if (views[k].name === activeView) { found = true; break; }\n      }\n      if (!found) activeView = views[0].name;\n    }\n\n    if (views.length <= 5) {\n      // Tab bar mode\n      for (var ti = 0; ti < views.length; ti++) {\n        var tab = document.createElement(\"span\");\n        tab.className = \"aup-device-view-tab\" + (views[ti].name === activeView ? \" active\" : \"\");\n        tab.textContent = labels[views[ti].name] || views[ti].name;\n        tab.setAttribute(\"data-view-name\", views[ti].name);\n        (function(viewName) {\n          tab.onclick = function() {\n            if (!tab.classList.contains(\"active\")) onSwitch(viewName);\n          };\n        })(views[ti].name);\n        container.appendChild(tab);\n      }\n    } else {\n      // Dropdown mode\n      var select = document.createElement(\"select\");\n      select.className = \"aup-device-view-dropdown\";\n      for (var di = 0; di < views.length; di++) {\n        var option = document.createElement(\"option\");\n        option.value = views[di].name;\n        option.textContent = labels[views[di].name] || views[di].name;\n        if (views[di].name === activeView) option.selected = true;\n        select.appendChild(option);\n      }\n      select.onchange = function() {\n        onSwitch(select.value);\n      };\n      container.appendChild(select);\n    }\n\n    // Async: try loading meta.json for each view to get better labels\n    _loadViewMetaLabels(views, function(updatedLabels) {\n      if (!updatedLabels) return;\n      var changed = false;\n      for (var m in updatedLabels) {\n        if (updatedLabels[m] && updatedLabels[m] !== labels[m]) {\n          labels[m] = updatedLabels[m];\n          changed = true;\n        }\n      }\n      if (changed) {\n        // Update displayed labels\n        if (views.length <= 5) {\n          var tabs = container.querySelectorAll(\".aup-device-view-tab\");\n          for (var t = 0; t < tabs.length; t++) {\n            var vn = tabs[t].getAttribute(\"data-view-name\");\n            if (vn && labels[vn]) tabs[t].textContent = labels[vn];\n          }\n        } else {\n          var options = container.querySelectorAll(\"option\");\n          for (var o = 0; o < options.length; o++) {\n            var ov = options[o].value;\n            if (ov && labels[ov]) options[o].textContent = labels[ov];\n          }\n        }\n      }\n    });\n  }\n\n  /**\n   * Generate a human-readable display label from a view directory name.\n   */\n  function _viewDisplayLabel(name) {\n    if (!name) return \"\";\n    // Capitalize first letter, replace hyphens/underscores with spaces\n    var label = name.replace(/[-_]/g, \" \");\n    return label.charAt(0).toUpperCase() + label.slice(1);\n  }\n\n  /**\n   * Load meta.json from each view to get display labels.\n   * Calls callback with { viewName: label } map, or null if nothing found.\n   */\n  function _loadViewMetaLabels(views, callback) {\n    if (!window.afs || !window.afs.read) { callback(null); return; }\n    var results = {};\n    var pending = views.length;\n    var anyFound = false;\n\n    for (var i = 0; i < views.length; i++) {\n      (function(view) {\n        var metaPath = view.path + \"/meta.json\";\n        window.afs.read(metaPath).then(function(result) {\n          var meta = result;\n          if (meta && meta.content !== undefined) meta = meta.content;\n          if (typeof meta === \"string\") {\n            try { meta = JSON.parse(meta); } catch(_e) { meta = null; }\n          }\n          if (meta && typeof meta === \"object\" && meta.label) {\n            results[view.name] = meta.label;\n            anyFound = true;\n          }\n          if (--pending === 0) callback(anyFound ? results : null);\n        }).catch(function() {\n          if (--pending === 0) callback(anyFound ? results : null);\n        });\n      })(views[i]);\n    }\n  }\n\n  /**\n   * Update the active state on the view selector (tab bar or dropdown).\n   */\n  function _updateViewSelectorActive(container, activeViewName) {\n    // Tab mode\n    var tabs = container.querySelectorAll(\".aup-device-view-tab\");\n    for (var i = 0; i < tabs.length; i++) {\n      var vn = tabs[i].getAttribute(\"data-view-name\");\n      if (vn === activeViewName) {\n        tabs[i].className = \"aup-device-view-tab active\";\n      } else {\n        tabs[i].className = \"aup-device-view-tab\";\n      }\n    }\n    // Dropdown mode\n    var select = container.querySelector(\".aup-device-view-dropdown\");\n    if (select) {\n      select.value = activeViewName;\n    }\n  }\n\n  // ── .aup/ recipe discovery ──\n\n  /**\n   * Discover all .aup/ views via list(), then load the best recipe.\n   * Returns { recipe, views } where views is the full list of discovered entries.\n   * Falls back to probing hardcoded variant filenames if list is unavailable.\n   */\n  function _tryAupRecipe(src, props) {\n    if (!window.afs || !window.afs.read) {\n      return Promise.resolve(null);\n    }\n\n    // Determine preferred variants based on capabilities\n    var preferCompact = false;\n    if (props && props.capabilities) {\n      var caps = props.capabilities;\n      if (caps.maxWidth || (caps.primitives && caps.primitives.length <= 4)) {\n        preferCompact = true;\n      }\n    }\n\n    // Strategy 1: list-based discovery (supports supplementary providers)\n    if (window.afs.list) {\n      return _discoverAupViews(src, preferCompact);\n    }\n\n    // Strategy 2: fallback to probing hardcoded variant filenames\n    var variants = preferCompact ? [\"compact\", \"default\"] : [\"default\"];\n    return _tryAupVariants(src, variants, 0);\n  }\n\n  /**\n   * List .aup/ directory to discover all available view entries.\n   * Returns the recipe for the best matching view, or null if none found.\n   * Stores discovered views on the result for Phase 1 view switching.\n   */\n  function _discoverAupViews(src, preferCompact) {\n    var aupPath = src + \"/.aup\";\n    return window.afs.list(aupPath).then(function(result) {\n      // list() returns {data: [...]} — unwrap\n      var entries = result && result.data ? result.data : (Array.isArray(result) ? result : null);\n      if (!entries || !Array.isArray(entries) || entries.length === 0) {\n        // No .aup/ entries — fall back to probe-based\n        var variants = preferCompact ? [\"compact\", \"default\"] : [\"default\"];\n        return _tryAupVariants(src, variants, 0);\n      }\n\n      // Separate flat recipe files (.json leaves) from view directories.\n      // AFSJSON stores recipes as stringified JSON leaves — they appear as\n      // \".aup/default.json\" (a file), not \".aup/default/\" (a directory).\n      var views = [];\n      var flatRecipes = []; // { name, path, content? }\n      for (var i = 0; i < entries.length; i++) {\n        var entry = entries[i];\n        var entryPath = entry.path || \"\";\n        var name = entryPath.split(\"/\").filter(Boolean).pop() || \"\";\n        if (!name) continue;\n        var isLeaf = name.indexOf(\".json\") === name.length - 5;\n        var meta = entry.meta || {};\n        // Also detect leaves by childrenCount (directories have childrenCount >= 0)\n        if (isLeaf || (meta.childrenCount == null && entry.content != null)) {\n          flatRecipes.push({ name: name.replace(/\\\\.json$/, \"\"), path: entryPath, content: entry.content });\n        } else {\n          views.push({ name: name, path: entryPath });\n        }\n      }\n\n      // If we found flat recipe files, try reading them directly\n      if (flatRecipes.length > 0 && views.length === 0) {\n        // Pure flat structure — pick best recipe by preference order\n        var preferred = preferCompact ? [\"compact\", \"default\"] : [\"default\"];\n        return _tryFlatRecipes(flatRecipes, preferred, 0);\n      }\n\n      if (views.length === 0 && flatRecipes.length === 0) {\n        var fallbackVariants = preferCompact ? [\"compact\", \"default\"] : [\"default\"];\n        return _tryAupVariants(src, fallbackVariants, 0);\n      }\n\n      // Sort views: \"default\" first, then \"compact\", then alphabetical\n      views.sort(function(a, b) {\n        if (a.name === \"default\") return -1;\n        if (b.name === \"default\") return 1;\n        if (a.name === \"compact\") return preferCompact ? -1 : 1;\n        if (b.name === \"compact\") return preferCompact ? 1 : -1;\n        return a.name < b.name ? -1 : 1;\n      });\n\n      // Try loading recipe from the best view\n      // For each view, try reading {viewPath}/default.json\n      return _tryViewRecipes(views, preferCompact ? \"compact\" : \"default\", 0).then(function(result) {\n        if (result && result.recipe) {\n          // Attach views metadata to the recipe for Phase 1 view switching\n          result.recipe._aupViews = views;\n          return result.recipe;\n        }\n        return null;\n      });\n    }).catch(function() {\n      // List failed — fall back to probe-based discovery\n      var variants = preferCompact ? [\"compact\", \"default\"] : [\"default\"];\n      return _tryAupVariants(src, variants, 0);\n    });\n  }\n\n  /**\n   * Try loading a recipe from each discovered view in order.\n   * For each view, tries {viewPath}/default.json (and compact.json if preferred).\n   */\n  function _tryViewRecipes(views, preferredVariant, idx) {\n    if (idx >= views.length) return Promise.resolve(null);\n    var view = views[idx];\n\n    // For the selected view, try variant files\n    var variants = preferredVariant === \"compact\"\n      ? [\"compact.json\", \"default.json\"]\n      : [\"default.json\"];\n\n    return _tryViewVariants(view, variants, 0).then(function(recipe) {\n      if (recipe) {\n        return { recipe: recipe, viewName: view.name };\n      }\n      return _tryViewRecipes(views, preferredVariant, idx + 1);\n    });\n  }\n\n  /**\n   * Try reading recipe variant files from a specific view directory.\n   */\n  function _tryViewVariants(view, variants, idx) {\n    if (idx >= variants.length) return Promise.resolve(null);\n    var recipePath = view.path + \"/\" + variants[idx];\n    return window.afs.read(recipePath).then(function(result) {\n      var recipe = result;\n      if (recipe && recipe.content !== undefined) {\n        recipe = recipe.content;\n      }\n      if (typeof recipe === \"string\") {\n        try { recipe = JSON.parse(recipe); } catch(_e) { recipe = null; }\n      }\n      if (recipe && typeof recipe === \"object\" && recipe.type) {\n        return recipe;\n      }\n      return _tryViewVariants(view, variants, idx + 1);\n    }).catch(function() {\n      return _tryViewVariants(view, variants, idx + 1);\n    });\n  }\n\n  /**\n   * Legacy fallback: probe specific variant filenames without list().\n   */\n  function _tryAupVariants(src, variants, idx) {\n    if (idx >= variants.length) return Promise.resolve(null);\n    var recipePath = src + \"/.aup/\" + variants[idx] + \".json\";\n    return window.afs.read(recipePath).then(function(result) {\n      var recipe = result;\n      // If read returns an entry wrapper, unwrap content\n      if (recipe && recipe.content !== undefined) {\n        recipe = recipe.content;\n      }\n      // If content is a JSON string (e.g. from AFSJSON leaf), parse it\n      if (typeof recipe === \"string\") {\n        try { recipe = JSON.parse(recipe); } catch(_e) { recipe = null; }\n      }\n      // Validate: must be an AUP node (has type field)\n      if (recipe && typeof recipe === \"object\" && recipe.type) {\n        return recipe;\n      }\n      // Invalid recipe — try next variant\n      return _tryAupVariants(src, variants, idx + 1);\n    }).catch(function() {\n      // Recipe doesn't exist — try next variant\n      return _tryAupVariants(src, variants, idx + 1);\n    });\n  }\n\n  /**\n   * Try flat recipe files from .aup/ list results.\n   * These are leaf entries (e.g. default.json) rather than view directories.\n   * Picks the best match from the preferred order, then falls back to first available.\n   */\n  function _tryFlatRecipes(flatRecipes, preferred, idx) {\n    // First try preferred names in order\n    if (idx < preferred.length) {\n      var target = preferred[idx];\n      for (var i = 0; i < flatRecipes.length; i++) {\n        if (flatRecipes[i].name === target) {\n          return _parseFlatRecipe(flatRecipes[i]).then(function(recipe) {\n            if (recipe) return recipe;\n            return _tryFlatRecipes(flatRecipes, preferred, idx + 1);\n          });\n        }\n      }\n      return _tryFlatRecipes(flatRecipes, preferred, idx + 1);\n    }\n    // No preferred match — try first available\n    if (flatRecipes.length > 0) {\n      return _parseFlatRecipe(flatRecipes[0]);\n    }\n    return Promise.resolve(null);\n  }\n\n  /**\n   * Parse a flat recipe entry — may have inline content or need a read().\n   */\n  function _parseFlatRecipe(entry) {\n    // If content was included in the list result, use it directly\n    if (entry.content != null) {\n      var recipe = entry.content;\n      if (typeof recipe === \"string\") {\n        try { recipe = JSON.parse(recipe); } catch(_e) { return Promise.resolve(null); }\n      }\n      if (recipe && typeof recipe === \"object\" && recipe.type) {\n        return Promise.resolve(recipe);\n      }\n    }\n    // Otherwise read the file\n    return window.afs.read(entry.path).then(function(result) {\n      var r = result;\n      if (r && r.content !== undefined) r = r.content;\n      if (typeof r === \"string\") {\n        try { r = JSON.parse(r); } catch(_e) { r = null; }\n      }\n      if (r && typeof r === \"object\" && r.type) return r;\n      return null;\n    }).catch(function() { return null; });\n  }\n`;\n"],"mappings":";AAAA,MAAa,YAAY"}

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

@@ -0,0 +1,127 @@
+
+//#region src/web-page/renderers/editor.ts
+const EDITOR_JS = `
+  // ── Editor Subsystem (CodeMirror 6 from CDN) ──
+  function renderAupEditor(node) {
+    var el = document.createElement("div");
+    el.className = "aup-editor";
+    var p = node.props || {};
+    var language = p.language || "text";
+    var readOnly = p.readOnly === true;
+    var showLineNumbers = p.lineNumbers !== false;
+    var content = p.content || "";
+
+    // Toolbar
+    var toolbar = document.createElement("div");
+    toolbar.className = "aup-editor-toolbar";
+    var langLabel = document.createElement("span");
+    langLabel.style.cssText = "font-size: 0.78em; color: var(--dim); margin-right: auto;";
+    langLabel.textContent = language.toUpperCase();
+    toolbar.appendChild(langLabel);
+    if (!readOnly) {
+      var wrapBtn = document.createElement("button");
+      wrapBtn.textContent = "Wrap";
+      wrapBtn.onclick = function() {
+        var ta = el.querySelector("textarea");
+        if (ta) {
+          var isWrapped = ta.style.whiteSpace !== "pre";
+          ta.style.whiteSpace = isWrapped ? "pre" : "pre-wrap";
+          wrapBtn.classList.toggle("active", !isWrapped);
+        }
+      };
+      toolbar.appendChild(wrapBtn);
+    }
+    el.appendChild(toolbar);
+
+    // Editor area
+    var area = document.createElement("div");
+    area.className = "aup-editor-area";
+    if (showLineNumbers) area.classList.add("has-gutter");
+
+    // Syntax highlight overlay (behind textarea)
+    var highlight = document.createElement("pre");
+    highlight.className = "aup-editor-highlight";
+    var hCode = document.createElement("code");
+    highlight.appendChild(hCode);
+    area.appendChild(highlight);
+
+    function updateHighlight(text) {
+      if (typeof hljs !== "undefined" && language !== "text") {
+        try {
+          var lang = language === "typescript" ? "typescript" : language;
+          var result = hljs.getLanguage(lang) ? hljs.highlight(text, { language: lang }) : hljs.highlightAuto(text);
+          hCode.innerHTML = result.value;
+        } catch(e) {
+          hCode.textContent = text;
+        }
+      } else {
+        hCode.textContent = text;
+      }
+    }
+    updateHighlight(content);
+
+    var ta = document.createElement("textarea");
+    ta.value = content;
+    ta.readOnly = readOnly;
+    ta.spellcheck = false;
+    ta.autocomplete = "off";
+    ta.setAttribute("autocapitalize", "off");
+    area.appendChild(ta);
+
+    // Sync scroll between textarea and highlight overlay
+    ta.addEventListener("scroll", function() { highlight.scrollTop = ta.scrollTop; highlight.scrollLeft = ta.scrollLeft; });
+
+    // Line numbers gutter
+    if (showLineNumbers) {
+      var gutter = document.createElement("div");
+      gutter.className = "aup-editor-gutter";
+      function updateGutter() {
+        var lines = ta.value.split("\\n").length;
+        var nums = [];
+        for (var i = 1; i <= lines; i++) nums.push(String(i));
+        gutter.textContent = nums.join("\\n");
+      }
+      updateGutter();
+      ta.addEventListener("input", updateGutter);
+      ta.addEventListener("scroll", function() { gutter.scrollTop = ta.scrollTop; });
+      area.appendChild(gutter);
+    }
+
+    el.appendChild(area);
+
+    // Status bar
+    var statusbar = document.createElement("div");
+    statusbar.className = "aup-editor-statusbar";
+    var lineInfo = document.createElement("span");
+    lineInfo.textContent = "Ln 1, Col 1";
+    var charInfo = document.createElement("span");
+    charInfo.textContent = content.length + " chars";
+    statusbar.appendChild(lineInfo);
+    statusbar.appendChild(charInfo);
+    ta.addEventListener("input", function() {
+      charInfo.textContent = ta.value.length + " chars";
+      updateHighlight(ta.value);
+    });
+    ta.addEventListener("click", function() {
+      var val = ta.value.substring(0, ta.selectionStart);
+      var ln = val.split("\\n").length;
+      var col = ta.selectionStart - val.lastIndexOf("\\n");
+      lineInfo.textContent = "Ln " + ln + ", Col " + col;
+    });
+    ta.addEventListener("keyup", ta.onclick);
+    el.appendChild(statusbar);
+
+    // Event: content change
+    if (node.events && node.events.change) {
+      ta.addEventListener("input", function() {
+        _fireAupEvent(node.id, "change", { content: ta.value });
+      });
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.EDITOR_JS = EDITOR_JS;

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

@@ -0,0 +1,127 @@
+//#region src/web-page/renderers/editor.ts
+const EDITOR_JS = `
+  // ── Editor Subsystem (CodeMirror 6 from CDN) ──
+  function renderAupEditor(node) {
+    var el = document.createElement("div");
+    el.className = "aup-editor";
+    var p = node.props || {};
+    var language = p.language || "text";
+    var readOnly = p.readOnly === true;
+    var showLineNumbers = p.lineNumbers !== false;
+    var content = p.content || "";
+
+    // Toolbar
+    var toolbar = document.createElement("div");
+    toolbar.className = "aup-editor-toolbar";
+    var langLabel = document.createElement("span");
+    langLabel.style.cssText = "font-size: 0.78em; color: var(--dim); margin-right: auto;";
+    langLabel.textContent = language.toUpperCase();
+    toolbar.appendChild(langLabel);
+    if (!readOnly) {
+      var wrapBtn = document.createElement("button");
+      wrapBtn.textContent = "Wrap";
+      wrapBtn.onclick = function() {
+        var ta = el.querySelector("textarea");
+        if (ta) {
+          var isWrapped = ta.style.whiteSpace !== "pre";
+          ta.style.whiteSpace = isWrapped ? "pre" : "pre-wrap";
+          wrapBtn.classList.toggle("active", !isWrapped);
+        }
+      };
+      toolbar.appendChild(wrapBtn);
+    }
+    el.appendChild(toolbar);
+
+    // Editor area
+    var area = document.createElement("div");
+    area.className = "aup-editor-area";
+    if (showLineNumbers) area.classList.add("has-gutter");
+
+    // Syntax highlight overlay (behind textarea)
+    var highlight = document.createElement("pre");
+    highlight.className = "aup-editor-highlight";
+    var hCode = document.createElement("code");
+    highlight.appendChild(hCode);
+    area.appendChild(highlight);
+
+    function updateHighlight(text) {
+      if (typeof hljs !== "undefined" && language !== "text") {
+        try {
+          var lang = language === "typescript" ? "typescript" : language;
+          var result = hljs.getLanguage(lang) ? hljs.highlight(text, { language: lang }) : hljs.highlightAuto(text);
+          hCode.innerHTML = result.value;
+        } catch(e) {
+          hCode.textContent = text;
+        }
+      } else {
+        hCode.textContent = text;
+      }
+    }
+    updateHighlight(content);
+
+    var ta = document.createElement("textarea");
+    ta.value = content;
+    ta.readOnly = readOnly;
+    ta.spellcheck = false;
+    ta.autocomplete = "off";
+    ta.setAttribute("autocapitalize", "off");
+    area.appendChild(ta);
+
+    // Sync scroll between textarea and highlight overlay
+    ta.addEventListener("scroll", function() { highlight.scrollTop = ta.scrollTop; highlight.scrollLeft = ta.scrollLeft; });
+
+    // Line numbers gutter
+    if (showLineNumbers) {
+      var gutter = document.createElement("div");
+      gutter.className = "aup-editor-gutter";
+      function updateGutter() {
+        var lines = ta.value.split("\\n").length;
+        var nums = [];
+        for (var i = 1; i <= lines; i++) nums.push(String(i));
+        gutter.textContent = nums.join("\\n");
+      }
+      updateGutter();
+      ta.addEventListener("input", updateGutter);
+      ta.addEventListener("scroll", function() { gutter.scrollTop = ta.scrollTop; });
+      area.appendChild(gutter);
+    }
+
+    el.appendChild(area);
+
+    // Status bar
+    var statusbar = document.createElement("div");
+    statusbar.className = "aup-editor-statusbar";
+    var lineInfo = document.createElement("span");
+    lineInfo.textContent = "Ln 1, Col 1";
+    var charInfo = document.createElement("span");
+    charInfo.textContent = content.length + " chars";
+    statusbar.appendChild(lineInfo);
+    statusbar.appendChild(charInfo);
+    ta.addEventListener("input", function() {
+      charInfo.textContent = ta.value.length + " chars";
+      updateHighlight(ta.value);
+    });
+    ta.addEventListener("click", function() {
+      var val = ta.value.substring(0, ta.selectionStart);
+      var ln = val.split("\\n").length;
+      var col = ta.selectionStart - val.lastIndexOf("\\n");
+      lineInfo.textContent = "Ln " + ln + ", Col " + col;
+    });
+    ta.addEventListener("keyup", ta.onclick);
+    el.appendChild(statusbar);
+
+    // Event: content change
+    if (node.events && node.events.change) {
+      ta.addEventListener("input", function() {
+        _fireAupEvent(node.id, "change", { content: ta.value });
+      });
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { EDITOR_JS };
+//# sourceMappingURL=editor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor.mjs","names":[],"sources":["../../../src/web-page/renderers/editor.ts"],"sourcesContent":["export const EDITOR_JS = `\n  // ── Editor Subsystem (CodeMirror 6 from CDN) ──\n  function renderAupEditor(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-editor\";\n    var p = node.props || {};\n    var language = p.language || \"text\";\n    var readOnly = p.readOnly === true;\n    var showLineNumbers = p.lineNumbers !== false;\n    var content = p.content || \"\";\n\n    // Toolbar\n    var toolbar = document.createElement(\"div\");\n    toolbar.className = \"aup-editor-toolbar\";\n    var langLabel = document.createElement(\"span\");\n    langLabel.style.cssText = \"font-size: 0.78em; color: var(--dim); margin-right: auto;\";\n    langLabel.textContent = language.toUpperCase();\n    toolbar.appendChild(langLabel);\n    if (!readOnly) {\n      var wrapBtn = document.createElement(\"button\");\n      wrapBtn.textContent = \"Wrap\";\n      wrapBtn.onclick = function() {\n        var ta = el.querySelector(\"textarea\");\n        if (ta) {\n          var isWrapped = ta.style.whiteSpace !== \"pre\";\n          ta.style.whiteSpace = isWrapped ? \"pre\" : \"pre-wrap\";\n          wrapBtn.classList.toggle(\"active\", !isWrapped);\n        }\n      };\n      toolbar.appendChild(wrapBtn);\n    }\n    el.appendChild(toolbar);\n\n    // Editor area\n    var area = document.createElement(\"div\");\n    area.className = \"aup-editor-area\";\n    if (showLineNumbers) area.classList.add(\"has-gutter\");\n\n    // Syntax highlight overlay (behind textarea)\n    var highlight = document.createElement(\"pre\");\n    highlight.className = \"aup-editor-highlight\";\n    var hCode = document.createElement(\"code\");\n    highlight.appendChild(hCode);\n    area.appendChild(highlight);\n\n    function updateHighlight(text) {\n      if (typeof hljs !== \"undefined\" && language !== \"text\") {\n        try {\n          var lang = language === \"typescript\" ? \"typescript\" : language;\n          var result = hljs.getLanguage(lang) ? hljs.highlight(text, { language: lang }) : hljs.highlightAuto(text);\n          hCode.innerHTML = result.value;\n        } catch(e) {\n          hCode.textContent = text;\n        }\n      } else {\n        hCode.textContent = text;\n      }\n    }\n    updateHighlight(content);\n\n    var ta = document.createElement(\"textarea\");\n    ta.value = content;\n    ta.readOnly = readOnly;\n    ta.spellcheck = false;\n    ta.autocomplete = \"off\";\n    ta.setAttribute(\"autocapitalize\", \"off\");\n    area.appendChild(ta);\n\n    // Sync scroll between textarea and highlight overlay\n    ta.addEventListener(\"scroll\", function() { highlight.scrollTop = ta.scrollTop; highlight.scrollLeft = ta.scrollLeft; });\n\n    // Line numbers gutter\n    if (showLineNumbers) {\n      var gutter = document.createElement(\"div\");\n      gutter.className = \"aup-editor-gutter\";\n      function updateGutter() {\n        var lines = ta.value.split(\"\\\\n\").length;\n        var nums = [];\n        for (var i = 1; i <= lines; i++) nums.push(String(i));\n        gutter.textContent = nums.join(\"\\\\n\");\n      }\n      updateGutter();\n      ta.addEventListener(\"input\", updateGutter);\n      ta.addEventListener(\"scroll\", function() { gutter.scrollTop = ta.scrollTop; });\n      area.appendChild(gutter);\n    }\n\n    el.appendChild(area);\n\n    // Status bar\n    var statusbar = document.createElement(\"div\");\n    statusbar.className = \"aup-editor-statusbar\";\n    var lineInfo = document.createElement(\"span\");\n    lineInfo.textContent = \"Ln 1, Col 1\";\n    var charInfo = document.createElement(\"span\");\n    charInfo.textContent = content.length + \" chars\";\n    statusbar.appendChild(lineInfo);\n    statusbar.appendChild(charInfo);\n    ta.addEventListener(\"input\", function() {\n      charInfo.textContent = ta.value.length + \" chars\";\n      updateHighlight(ta.value);\n    });\n    ta.addEventListener(\"click\", function() {\n      var val = ta.value.substring(0, ta.selectionStart);\n      var ln = val.split(\"\\\\n\").length;\n      var col = ta.selectionStart - val.lastIndexOf(\"\\\\n\");\n      lineInfo.textContent = \"Ln \" + ln + \", Col \" + col;\n    });\n    ta.addEventListener(\"keyup\", ta.onclick);\n    el.appendChild(statusbar);\n\n    // Event: content change\n    if (node.events && node.events.change) {\n      ta.addEventListener(\"input\", function() {\n        _fireAupEvent(node.id, \"change\", { content: ta.value });\n      });\n    }\n\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,YAAY"}

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

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