@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.mjs","names":[],"sources":["../../../src/web-page/renderers/list.ts"],"sourcesContent":["export const LIST_JS = `\n  // ── AFS List Primitive ──\n  // Universal data view bound to AFS paths.\n  // Two orthogonal dimensions: layout (how items arrange) × itemStyle (how each renders).\n  // Pipeline: fetch → filter → sort → transform → render.\n\n  // ── Kind Rendering Strategies ──\n  var _listKindStrategies = {\n    \"fs:directory\": function(entry) {\n      var name = (entry.path || entry.id || \"\").split(\"/\").filter(Boolean).pop() || entry.id || \"\";\n      return {\n        icon: \"folder\",\n        label: name,\n        badge: entry.meta && entry.meta.childrenCount >= 0 ? String(entry.meta.childrenCount) : null,\n        description: null,\n        image: null,\n        cssClass: \"aup-list-dir\"\n      };\n    },\n    \"fs:file\": function(entry) {\n      var name = (entry.path || entry.id || \"\").split(\"/\").filter(Boolean).pop() || entry.id || \"\";\n      var ext = name.split(\".\").pop() || \"\";\n      var iconMap = { ts: \"code\", js: \"code\", tsx: \"code\", jsx: \"code\", md: \"scroll\", json: \"code\", yaml: \"code\", yml: \"code\", png: \"image\", jpg: \"image\", svg: \"image\", css: \"code\", html: \"code\" };\n      return {\n        icon: iconMap[ext] || \"edit\",\n        label: name,\n        badge: entry.meta && entry.meta.size ? _listFormatSize(entry.meta.size) : null,\n        description: entry.meta && entry.meta.mimeType ? entry.meta.mimeType : null,\n        image: null,\n        cssClass: \"aup-list-file\"\n      };\n    },\n    \"ts:task-group\": function(entry) {\n      var count = entry.meta && entry.meta.childrenCount;\n      return {\n        icon: \"grid\",\n        label: entry.id,\n        badge: count != null && count >= 0 ? String(count) : null,\n        description: null,\n        image: null,\n        cssClass: \"aup-list-group aup-list-group--\" + (entry.id || \"\").replace(/[^a-z0-9]/gi, \"-\")\n      };\n    },\n    \"ts:task\": function(entry) {\n      var c = entry.content || {};\n      var status = c.status || \"\";\n      var parts = [];\n      if (c.phase) parts.push(c.phase);\n      if (c.assignee && c.assignee !== \"null\") parts.push(c.assignee);\n      return {\n        icon: status === \"done\" ? \"check\" : status === \"in_progress\" ? \"play\" : status === \"review\" ? \"search\" : status === \"blocked\" ? \"x\" : \"clock\",\n        label: entry.id,\n        badge: status || null,\n        description: parts.length > 0 ? parts.join(\" \\\\u00b7 \") : null,\n        image: null,\n        cssClass: \"aup-list-task aup-list-task--\" + (status || \"unknown\")\n      };\n    },\n    \"ts:queue-item\": function(entry) {\n      var c = entry.content || {};\n      return {\n        icon: \"clock\",\n        label: c.taskPath || entry.id,\n        badge: c.role || null,\n        description: c.addedAt ? \"Added \" + c.addedAt : null,\n        image: null,\n        cssClass: \"aup-list-queue\"\n      };\n    },\n    \"ts:intent-group\": function(entry) {\n      var count = entry.meta && entry.meta.childrenCount;\n      return {\n        icon: \"layers\",\n        label: entry.id,\n        badge: count != null && count >= 0 ? String(count) : null,\n        description: null,\n        image: null,\n        cssClass: \"aup-list-group\"\n      };\n    },\n    \"ts:daemon\": function(entry) {\n      var c = entry.content || {};\n      return {\n        icon: \"cpu\",\n        label: \"Daemon\",\n        badge: c.version || null,\n        description: c.pid ? \"PID \" + c.pid + \" \\\\u00b7 port \" + c.port : null,\n        image: null,\n        cssClass: \"aup-list-daemon\"\n      };\n    },\n    \"_default\": function(entry) {\n      var isDir = _listIsDirectory(entry);\n      var desc = entry.meta && entry.meta.description;\n      var name = (entry.path || entry.id || \"\").split(\"/\").filter(Boolean).pop() || entry.id || \"\";\n      return {\n        icon: isDir ? \"folder\" : \"edit\",\n        label: name,\n        badge: isDir && entry.meta.childrenCount >= 0 ? String(entry.meta.childrenCount) : null,\n        description: desc ? String(desc).slice(0, 100) : null,\n        image: null,\n        cssClass: isDir ? \"aup-list-dir\" : \"aup-list-item\"\n      };\n    }\n  };\n\n  function _listResolveStrategy(entry) {\n    var kind = (entry.meta && entry.meta.kind) || \"\";\n    if (_listKindStrategies[kind]) return _listKindStrategies[kind](entry);\n    var parts = kind.split(\":\");\n    if (parts.length > 1) {\n      var withSeg = parts[0] + \":\" + kind.split(\":\")[1].split(\"-\")[0];\n      if (_listKindStrategies[withSeg]) return _listKindStrategies[withSeg](entry);\n    }\n    return _listKindStrategies._default(entry);\n  }\n\n  function _listResolveField(obj, dotPath) {\n    if (!dotPath) return null;\n    var parts = dotPath.split(\".\");\n    var val = obj;\n    for (var i = 0; i < parts.length; i++) {\n      if (val == null) return null;\n      val = val[parts[i]];\n    }\n    return val != null ? String(val) : null;\n  }\n\n  function _listIsDirectory(entry) {\n    if (!entry.meta) return false;\n    var cc = entry.meta.childrenCount;\n    return cc != null;\n  }\n\n  function _listFormatSize(bytes) {\n    if (bytes == null) return \"\";\n    if (bytes < 1024) return bytes + \" B\";\n    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + \" KB\";\n    return (bytes / 1048576).toFixed(1) + \" MB\";\n  }\n\n  function _listMakeIcon(name) {\n    if (!name || !_ICON_PATHS[name]) return null;\n    var svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n    svg.setAttribute(\"viewBox\", \"0 0 24 24\");\n    svg.setAttribute(\"fill\", \"none\");\n    svg.setAttribute(\"stroke\", \"currentColor\");\n    svg.setAttribute(\"stroke-width\", \"2\");\n    svg.setAttribute(\"stroke-linecap\", \"round\");\n    svg.setAttribute(\"stroke-linejoin\", \"round\");\n    svg.classList.add(\"aup-icon-svg\");\n    svg.innerHTML = _ICON_PATHS[name];\n    return svg;\n  }\n\n  // ── Filter/Sort/Transform helpers ──\n  function _listApplyFilter(entries, filter) {\n    if (!filter) return entries;\n    if (typeof filter === \"string\") {\n      var q = filter.toLowerCase();\n      return entries.filter(function(e) {\n        return (e.id || \"\").toLowerCase().indexOf(q) >= 0;\n      });\n    }\n    if (filter.kind) {\n      var kindFilter = filter.kind;\n      return entries.filter(function(e) {\n        var k = (e.meta && e.meta.kind) || \"\";\n        return k === kindFilter || k.indexOf(kindFilter) === 0;\n      });\n    }\n    if (filter.field && filter.match != null) {\n      return entries.filter(function(e) {\n        var val = _listResolveField(e, filter.field);\n        if (typeof filter.match === \"string\") return val === filter.match;\n        return val != null;\n      });\n    }\n    if (filter.exclude) {\n      var excl = Array.isArray(filter.exclude) ? filter.exclude : [filter.exclude];\n      return entries.filter(function(e) {\n        return excl.indexOf(e.id) < 0;\n      });\n    }\n    return entries;\n  }\n\n  function _listApplySort(entries, sort) {\n    if (!sort) return entries;\n    var field = typeof sort === \"string\" ? sort : sort.field || \"id\";\n    var desc = sort.desc === true;\n    return entries.slice().sort(function(a, b) {\n      var va = _listResolveField(a, field) || \"\";\n      var vb = _listResolveField(b, field) || \"\";\n      var cmp = va < vb ? -1 : va > vb ? 1 : 0;\n      return desc ? -cmp : cmp;\n    });\n  }\n\n  function _listApplyTransform(entries, transform) {\n    if (!transform) return entries;\n    return entries.map(function(e) {\n      var t = Object.assign({}, e);\n      if (!t._transform) t._transform = {};\n      if (transform.label) t._transform.label = _listResolveField(e, transform.label);\n      if (transform.description) t._transform.description = _listResolveField(e, transform.description);\n      if (transform.badge) t._transform.badge = _listResolveField(e, transform.badge);\n      if (transform.icon) t._transform.icon = transform.icon;\n      if (transform.image) t._transform.image = _listResolveField(e, transform.image);\n      return t;\n    });\n  }\n\n  function renderAupList(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-list\";\n    var p = node.props || {};\n\n    // ── Two orthogonal dimensions ──\n    // layout: how items are arranged in space\n    // itemStyle: how each individual item renders\n    var layout = p.layout || p.variant || \"list\";\n    // Backward compat: variant \"flat\" → layout \"list\", \"grouped\" → \"list\" with grouped behavior\n    if (layout === \"flat\") layout = \"list\";\n    var isGrouped = layout === \"grouped\" || (p.variant === \"grouped\");\n    if (isGrouped) layout = \"list\";\n\n    var itemStyle = p.itemStyle || \"row\";\n    var clickMode = p.clickMode || \"select\";\n    var labelField = p.labelField || \"id\";\n    var descField = p.descriptionField != null ? p.descriptionField : \"meta.description\";\n    var emptyText = p.emptyText || \"No items\";\n    var showBreadcrumb = p.showBreadcrumb !== false;\n    var kindIconOverrides = p.kindIcons || {};\n    var maxDepth = typeof p.maxDepth === \"number\" ? p.maxDepth : 3;\n    var fields = p.fields || null;\n    var filter = p.filter || null;\n    var sort = p.sort || null;\n    var transform = p.transform || null;\n    var columns = p.columns || null;\n    var gridCols = p.gridCols || null;\n    var minItemWidth = p.minItemWidth || null;\n    var imageFit = p.imageFit || \"cover\";      // cover (aspect-fill) | contain (aspect-fit) | fill\n    var imageHeight = p.imageHeight || null;    // e.g. \"200px\", \"50%\", number (px)\n    var imageShape = p.imageShape || \"rect\";   // rect (default) | circle (avatar-friendly)\n    var pageSize = typeof p.pageSize === \"number\" && p.pageSize > 0 ? p.pageSize : 0;\n    var _virtual = !!p.virtual;\n    var _estimatedHeight = typeof p.estimatedItemHeight === \"number\" ? p.estimatedItemHeight : 48;\n    var _bufferItems = typeof p.bufferItems === \"number\" ? p.bufferItems : 5;\n\n    el.setAttribute(\"data-layout\", layout);\n    el.setAttribute(\"data-item-style\", itemStyle);\n    if (isGrouped) el.setAttribute(\"data-grouped\", \"true\");\n\n    // Self-sizing grid: set CSS variables for grid-template-columns\n    if (layout === \"grid\" || layout === \"masonry\") {\n      if (gridCols) {\n        el.style.setProperty(\"--list-cols\", String(gridCols));\n      } else if (minItemWidth) {\n        el.style.setProperty(\"--list-min-width\", minItemWidth);\n        el.setAttribute(\"data-auto-fill\", \"true\");\n      }\n    }\n\n    // ── Internal State ──\n    var _currentPath = node.src || \"\";\n    var _pathStack = [_currentPath];\n    var _entries = [];\n    var _expanded = {};\n    var _childCache = {};\n    var _selectedId = (node.state && node.state.selected) || null;\n    var _unsubscribe = null;\n    var _total = 0;\n    var _loadedCount = 0;\n    var _loadingMore = false;\n    var _filterQuery = \"\";\n    var _slideIndex = 0;\n    var _itemHeights = [];\n    var _virtualRenderedRange = null;\n    var _srcRoot = node.src || \"\";\n\n    // Build the full AFS path for an entry.\n    // Prefer entry.path (full mount-aware path from AFS core) when available.\n    // Fall back to constructing from entry.id + parent for legacy providers.\n    function _buildEntryPath(entry, parentPath) {\n      if (entry.path) return entry.path;\n      var eid = entry.id || \"\";\n      if (eid.charAt(0) === \"/\") {\n        // Absolute provider path — join with src root\n        return _srcRoot + eid;\n      }\n      // Relative id — join with parent\n      return parentPath + (parentPath.endsWith(\"/\") ? \"\" : \"/\") + eid;\n    }\n\n    // ── Template Detection ──\n    var _itemTemplate = null;\n    var _headerTemplate = null;\n    var _emptyTemplate = null;\n    if (node.children && node.children.length) {\n      for (var ci = 0; ci < node.children.length; ci++) {\n        var ch = node.children[ci];\n        var chRole = ch.props && ch.props.role;\n        if (chRole === \"item\") _itemTemplate = ch;\n        else if (chRole === \"header\") _headerTemplate = ch;\n        else if (chRole === \"empty\") _emptyTemplate = ch;\n      }\n    }\n\n    // ── Template Binding ──\n    function _bindFieldPath(entry, dotPath) {\n      var parts = dotPath.split(\".\");\n      var val = entry;\n      for (var bi = 0; bi < parts.length; bi++) {\n        if (val == null) return null;\n        // Auto-parse JSON strings when more path parts remain\n        if (typeof val === \"string\" && bi < parts.length) {\n          try { val = JSON.parse(val); } catch(_) { return null; }\n        }\n        val = val[parts[bi]];\n      }\n      return val != null ? String(val) : null;\n    }\n\n    function _bindStringsDeep(obj, entry) {\n      for (var bk in obj) {\n        var bv = obj[bk];\n        if (typeof bv === \"string\") {\n          obj[bk] = bv.replace(/\\\\$\\\\{entry\\\\.([^}]+)\\\\}/g, function(_, fp) {\n            return _bindFieldPath(entry, fp) || \"\";\n          });\n        } else if (Array.isArray(bv)) {\n          for (var ai = 0; ai < bv.length; ai++) {\n            if (bv[ai] && typeof bv[ai] === \"object\") {\n              _bindStringsDeep(bv[ai], entry);\n            }\n          }\n        } else if (bv && typeof bv === \"object\") {\n          _bindStringsDeep(bv, entry);\n        }\n      }\n    }\n\n    function _bindTemplate(tplNode, entry) {\n      var bound = JSON.parse(JSON.stringify(tplNode));\n      _bindStringsDeep(bound, entry);\n      bound.id = tplNode.id + \"--\" + entry.id;\n      return bound;\n    }\n\n    // ── DOM Structure ──\n\n    // Search bar\n    var searchEl = null;\n    if (p.searchable) {\n      searchEl = document.createElement(\"div\");\n      searchEl.className = \"aup-list-search\";\n      var searchInput = document.createElement(\"input\");\n      searchInput.type = \"text\";\n      searchInput.placeholder = p.searchPlaceholder || \"Search...\";\n      searchInput.className = \"aup-list-search-input\";\n      searchInput.oninput = function() {\n        _filterQuery = searchInput.value;\n        renderEntries();\n      };\n      searchEl.appendChild(searchInput);\n      el.appendChild(searchEl);\n    }\n\n    // Breadcrumb\n    var breadcrumbEl = null;\n    if (showBreadcrumb && (clickMode === \"navigate\" || clickMode === \"both\")) {\n      breadcrumbEl = document.createElement(\"div\");\n      breadcrumbEl.className = \"aup-list-breadcrumb\";\n      el.appendChild(breadcrumbEl);\n    }\n\n    var loadingEl = document.createElement(\"div\");\n    loadingEl.className = \"aup-list-loading\";\n    loadingEl.textContent = \"Loading...\";\n    el.appendChild(loadingEl);\n\n    var bodyEl = document.createElement(\"div\");\n    bodyEl.className = \"aup-list-body\";\n    if (gridCols) bodyEl.style.setProperty(\"--list-cols\", String(gridCols));\n    el.appendChild(bodyEl);\n\n    // Slideshow controls\n    var slideshowNav = null;\n    if (layout === \"slideshow\") {\n      slideshowNav = document.createElement(\"div\");\n      slideshowNav.className = \"aup-list-slideshow-nav\";\n      var prevBtn = document.createElement(\"button\");\n      prevBtn.className = \"aup-list-slide-btn\";\n      prevBtn.textContent = \"\\\\u25C0\";\n      prevBtn.onclick = function() { slideTo(_slideIndex - 1); };\n      var nextBtn = document.createElement(\"button\");\n      nextBtn.className = \"aup-list-slide-btn\";\n      nextBtn.textContent = \"\\\\u25B6\";\n      nextBtn.onclick = function() { slideTo(_slideIndex + 1); };\n      var slideCounter = document.createElement(\"span\");\n      slideCounter.className = \"aup-list-slide-counter\";\n      slideshowNav.appendChild(prevBtn);\n      slideshowNav.appendChild(slideCounter);\n      slideshowNav.appendChild(nextBtn);\n      el.appendChild(slideshowNav);\n    }\n\n    // ── Fields → Transform mapping ──\n    // Semantic slot names → internal _transform keys\n    // Agent writes: fields: { title: \"content.name\", image: \"content.src\" }\n    // Internally: _transform.label = resolve(\"content.name\"), _transform.image = resolve(\"content.src\")\n    var _fieldsSlotMap = {\n      title: \"label\",\n      subtitle: \"description\",\n      image: \"image\",\n      badge: \"badge\",\n      icon: \"icon\",\n      alt: \"alt\",\n      footer: \"footer\"\n    };\n\n    function _listApplyFields(entries, fieldsSpec) {\n      if (!fieldsSpec) return entries;\n      return entries.map(function(e) {\n        var t = Object.assign({}, e);\n        if (!t._transform) t._transform = {};\n        for (var slot in fieldsSpec) {\n          var internalKey = _fieldsSlotMap[slot] || slot;\n          var dotPath = fieldsSpec[slot];\n          if (internalKey === \"icon\") {\n            // Resolve dot-path to get icon name from entry data\n            var iconVal = _bindFieldPath(e, dotPath);\n            if (iconVal != null) t._transform.icon = iconVal;\n          } else {\n            // Use _bindFieldPath which auto-parses JSON strings in content\n            var resolved = _bindFieldPath(e, dotPath);\n            if (resolved != null) t._transform[internalKey] = resolved;\n          }\n        }\n        return t;\n      });\n    }\n\n    // ── Pipeline ──\n    function processPipeline(entries) {\n      var result = entries;\n      result = _listApplyFilter(result, filter);\n      if (_filterQuery) result = _listApplyFilter(result, _filterQuery);\n      result = _listApplySort(result, sort);\n      result = _listApplyTransform(result, transform);\n      // fields overrides transform (more specific, agent-friendly API)\n      result = _listApplyFields(result, fields);\n      return result;\n    }\n\n    // ── Breadcrumb ──\n    function renderBreadcrumb() {\n      if (!breadcrumbEl) return;\n      breadcrumbEl.innerHTML = \"\";\n      for (var i = 0; i < _pathStack.length; i++) {\n        if (i > 0) {\n          var sep = document.createElement(\"span\");\n          sep.className = \"aup-list-breadcrumb-sep\";\n          sep.textContent = \" / \";\n          breadcrumbEl.appendChild(sep);\n        }\n        var seg = document.createElement(\"span\");\n        var segPath = _pathStack[i];\n        var segName = segPath.split(\"/\").filter(Boolean).pop() || \"/\";\n        if (i < _pathStack.length - 1) {\n          seg.className = \"aup-list-breadcrumb-seg\";\n          seg.textContent = segName;\n          (function(targetPath, targetIdx) {\n            seg.onclick = function() { navigateTo(targetPath, targetIdx); };\n          })(segPath, i);\n        } else {\n          seg.className = \"aup-list-breadcrumb-cur\";\n          seg.textContent = segName;\n        }\n        breadcrumbEl.appendChild(seg);\n      }\n    }\n\n    // ── Item Style Renderers ──\n    // Each returns a DOM element for one entry.\n\n    function renderItemRow(entry, strategy, t) {\n      var row = document.createElement(\"div\");\n      row.className = \"aup-list-row \" + (strategy.cssClass || \"\");\n\n      var iconName = t.icon || kindIconOverrides[(entry.meta && entry.meta.kind) || \"\"] || strategy.icon;\n      var iconWrap = document.createElement(\"span\");\n      iconWrap.className = \"aup-list-icon\";\n      var svgIcon = _listMakeIcon(iconName);\n      if (svgIcon) iconWrap.appendChild(svgIcon);\n      row.appendChild(iconWrap);\n\n      var textWrap = document.createElement(\"div\");\n      textWrap.className = \"aup-list-text\";\n      var labelText = t.label || strategy.label || _listResolveField(entry, labelField) || entry.id || \"\";\n      var label = document.createElement(\"div\");\n      label.className = \"aup-list-label\";\n      label.textContent = labelText;\n      textWrap.appendChild(label);\n      var desc = t.description || (descField ? _listResolveField(entry, descField) : null) || strategy.description || null;\n      if (desc) {\n        var descEl = document.createElement(\"div\");\n        descEl.className = \"aup-list-desc\";\n        descEl.textContent = desc;\n        textWrap.appendChild(descEl);\n      }\n      row.appendChild(textWrap);\n\n      var badgeText = t.badge || strategy.badge;\n      if (badgeText) {\n        var badge = document.createElement(\"span\");\n        badge.className = \"aup-list-badge\";\n        badge.textContent = badgeText;\n        row.appendChild(badge);\n      }\n      return row;\n    }\n\n    function renderItemCard(entry, strategy, t) {\n      var card = document.createElement(\"div\");\n      card.className = \"aup-list-card \" + (strategy.cssClass || \"\");\n\n      var imgSrc = t.image || strategy.image;\n      if (imgSrc) {\n        if (imageShape === \"circle\") {\n          var imgWrap = document.createElement(\"div\");\n          imgWrap.className = \"aup-list-card-avatar-area\";\n          var imgEl = document.createElement(\"div\");\n          imgEl.className = \"aup-list-card-avatar\";\n          imgEl.style.backgroundImage = \"url(\" + _escapeHtml(imgSrc) + \")\";\n          if (t.alt) imgEl.setAttribute(\"role\", \"img\");\n          if (t.alt) imgEl.setAttribute(\"aria-label\", t.alt);\n          imgWrap.appendChild(imgEl);\n          card.appendChild(imgWrap);\n        } else {\n          var img = document.createElement(\"div\");\n          img.className = \"aup-list-card-image\";\n          img.style.backgroundImage = \"url(\" + _escapeHtml(imgSrc) + \")\";\n          img.style.backgroundSize = imageFit;\n          if (imageHeight) img.style.height = typeof imageHeight === \"number\" ? imageHeight + \"px\" : imageHeight;\n          if (t.alt) img.setAttribute(\"role\", \"img\");\n          if (t.alt) img.setAttribute(\"aria-label\", t.alt);\n          card.appendChild(img);\n        }\n      } else {\n        var iconName = t.icon || kindIconOverrides[(entry.meta && entry.meta.kind) || \"\"] || strategy.icon;\n        var iconArea = document.createElement(\"div\");\n        iconArea.className = \"aup-list-card-icon-area\";\n        var svgIcon = _listMakeIcon(iconName);\n        if (svgIcon) iconArea.appendChild(svgIcon);\n        card.appendChild(iconArea);\n      }\n\n      var body = document.createElement(\"div\");\n      body.className = \"aup-list-card-body\";\n      var labelText = t.label || strategy.label || _listResolveField(entry, labelField) || entry.id || \"\";\n      var label = document.createElement(\"div\");\n      label.className = \"aup-list-card-title\";\n      label.textContent = labelText;\n      body.appendChild(label);\n      var desc = t.description || (descField ? _listResolveField(entry, descField) : null) || strategy.description || null;\n      if (desc) {\n        var descEl = document.createElement(\"div\");\n        descEl.className = \"aup-list-card-desc\";\n        descEl.textContent = desc;\n        body.appendChild(descEl);\n      }\n      var badgeText = t.badge || strategy.badge;\n      if (badgeText) {\n        var badge = document.createElement(\"span\");\n        badge.className = \"aup-list-badge\";\n        badge.textContent = badgeText;\n        body.appendChild(badge);\n      }\n      var footerText = t.footer || null;\n      if (footerText) {\n        var footerEl = document.createElement(\"div\");\n        footerEl.className = \"aup-list-card-footer\";\n        footerEl.textContent = footerText;\n        body.appendChild(footerEl);\n      }\n      card.appendChild(body);\n      return card;\n    }\n\n    function renderItemCompact(entry, strategy, t) {\n      var row = document.createElement(\"div\");\n      row.className = \"aup-list-compact \" + (strategy.cssClass || \"\");\n      var iconName = t.icon || kindIconOverrides[(entry.meta && entry.meta.kind) || \"\"] || strategy.icon;\n      var svgIcon = _listMakeIcon(iconName);\n      if (svgIcon) {\n        var iconWrap = document.createElement(\"span\");\n        iconWrap.className = \"aup-list-icon\";\n        iconWrap.appendChild(svgIcon);\n        row.appendChild(iconWrap);\n      }\n      var label = document.createElement(\"span\");\n      label.className = \"aup-list-label\";\n      label.textContent = t.label || strategy.label || _listResolveField(entry, labelField) || entry.id || \"\";\n      row.appendChild(label);\n      return row;\n    }\n\n    function renderItemMedia(entry, strategy, t) {\n      var card = document.createElement(\"div\");\n      card.className = \"aup-list-media \" + (strategy.cssClass || \"\");\n\n      var imgSrc = t.image || strategy.image;\n      if (imgSrc) {\n        var img = document.createElement(\"img\");\n        img.className = \"aup-list-media-img\";\n        img.src = imgSrc;\n        img.alt = t.alt || entry.id || \"\";\n        img.loading = \"lazy\";\n        img.style.objectFit = imageFit;\n        card.appendChild(img);\n      } else {\n        var placeholder = document.createElement(\"div\");\n        placeholder.className = \"aup-list-media-placeholder\";\n        var svgIcon = _listMakeIcon(t.icon || strategy.icon || \"image\");\n        if (svgIcon) placeholder.appendChild(svgIcon);\n        card.appendChild(placeholder);\n      }\n\n      var overlay = document.createElement(\"div\");\n      overlay.className = \"aup-list-media-overlay\";\n      var labelText = t.label || strategy.label || _listResolveField(entry, labelField) || entry.id || \"\";\n      if (labelText) {\n        var label = document.createElement(\"div\");\n        label.className = \"aup-list-media-title\";\n        label.textContent = labelText;\n        overlay.appendChild(label);\n      }\n      var subtitleText = t.description || (descField ? _listResolveField(entry, descField) : null) || strategy.description || null;\n      if (subtitleText) {\n        var subtitle = document.createElement(\"div\");\n        subtitle.className = \"aup-list-media-subtitle\";\n        subtitle.textContent = subtitleText;\n        overlay.appendChild(subtitle);\n      }\n      var footerText = t.footer || null;\n      if (footerText) {\n        var footer = document.createElement(\"div\");\n        footer.className = \"aup-list-media-footer\";\n        footer.textContent = footerText;\n        overlay.appendChild(footer);\n      }\n      card.appendChild(overlay);\n      return card;\n    }\n\n    function renderItemHero(entry, strategy, t) {\n      var hero = document.createElement(\"div\");\n      hero.className = \"aup-list-hero \" + (strategy.cssClass || \"\");\n\n      var imgSrc = t.image || strategy.image;\n      if (imgSrc) {\n        hero.style.backgroundImage = \"url(\" + _escapeHtml(imgSrc) + \")\";\n        hero.style.backgroundSize = imageFit;\n      }\n\n      var content = document.createElement(\"div\");\n      content.className = \"aup-list-hero-content\";\n      var label = document.createElement(\"div\");\n      label.className = \"aup-list-hero-title\";\n      label.textContent = t.label || strategy.label || _listResolveField(entry, labelField) || entry.id || \"\";\n      content.appendChild(label);\n      var desc = t.description || (descField ? _listResolveField(entry, descField) : null) || strategy.description || null;\n      if (desc) {\n        var descEl = document.createElement(\"div\");\n        descEl.className = \"aup-list-hero-desc\";\n        descEl.textContent = desc;\n        content.appendChild(descEl);\n      }\n      var footerText = t.footer || null;\n      if (footerText) {\n        var footerEl = document.createElement(\"div\");\n        footerEl.className = \"aup-list-hero-footer\";\n        footerEl.textContent = footerText;\n        content.appendChild(footerEl);\n      }\n      hero.appendChild(content);\n      return hero;\n    }\n\n    function renderStyledItem(entry, strategy, t) {\n      switch (itemStyle) {\n        case \"card\": return renderItemCard(entry, strategy, t);\n        case \"compact\": return renderItemCompact(entry, strategy, t);\n        case \"media\": return renderItemMedia(entry, strategy, t);\n        case \"hero\": return renderItemHero(entry, strategy, t);\n        default: return renderItemRow(entry, strategy, t);\n      }\n    }\n\n    // ── Table Rendering ──\n    function renderTable(entries, expandable) {\n      var table = document.createElement(\"table\");\n      table.className = \"aup-list-table\";\n      var thead = document.createElement(\"thead\");\n      var headerRow = document.createElement(\"tr\");\n      var cols = columns || [{ key: \"id\", label: \"Name\" }];\n      if (expandable) {\n        var thExpand = document.createElement(\"th\");\n        thExpand.style.width = \"28px\";\n        headerRow.appendChild(thExpand);\n      }\n      for (var ci = 0; ci < cols.length; ci++) {\n        var th = document.createElement(\"th\");\n        th.textContent = cols[ci].label || cols[ci].key;\n        if (cols[ci].width) th.style.width = cols[ci].width;\n        if (cols[ci].align) th.style.textAlign = cols[ci].align;\n        headerRow.appendChild(th);\n      }\n      thead.appendChild(headerRow);\n      table.appendChild(thead);\n      var tbody = document.createElement(\"tbody\");\n      renderTableRows(entries, tbody, cols, 0, expandable);\n      table.appendChild(tbody);\n      return table;\n    }\n\n    function renderTableRows(entries, tbody, cols, depth, expandable) {\n      for (var ri = 0; ri < entries.length; ri++) {\n        var entry = entries[ri];\n        var tr = document.createElement(\"tr\");\n        tr.className = \"aup-list-table-row\";\n        tr.setAttribute(\"data-depth\", String(depth));\n        var entryPath = _buildEntryPath(entry, _currentPath);\n        var isDir = _listIsDirectory(entry);\n        if (_selectedId === entry.id) tr.setAttribute(\"data-selected\", \"true\");\n\n        if (expandable) {\n          var tdExp = document.createElement(\"td\");\n          tdExp.className = \"aup-list-table-expand\";\n          tdExp.style.paddingLeft = (8 + depth * 16) + \"px\";\n          if (isDir && depth < maxDepth) {\n            var chevron = document.createElement(\"span\");\n            chevron.className = \"aup-list-chevron\";\n            chevron.textContent = _expanded[entryPath] ? \"\\\\u25BC\" : \"\\\\u25B6\";\n            tdExp.appendChild(chevron);\n            (function(ent, ep, d) {\n              tdExp.onclick = function(e) {\n                e.stopPropagation();\n                toggleGroup(ent, ep, d);\n              };\n            })(entry, entryPath, depth);\n          }\n          tr.appendChild(tdExp);\n        }\n\n        for (var cj = 0; cj < cols.length; cj++) {\n          var td = document.createElement(\"td\");\n          var cellVal = _listResolveField(entry, cols[cj].key) || \"\";\n          td.textContent = cellVal;\n          if (cols[cj].align) td.style.textAlign = cols[cj].align;\n          tr.appendChild(td);\n        }\n\n        (function(ent, ep) {\n          tr.onclick = function(e) {\n            if (e.target.closest && e.target.closest(\".aup-list-table-expand\")) return;\n            _selectedId = ent.id;\n            renderEntries();\n            emitEvent(\"select\", { path: ep, id: ent.id, meta: ent.meta || {}, content: ent.content || {} });\n          };\n        })(entry, entryPath);\n\n        tbody.appendChild(tr);\n\n        // Expanded children rows (tree-table)\n        if (expandable && isDir && _expanded[entryPath] && _childCache[entryPath]) {\n          var childEntries = processPipeline(_childCache[entryPath]);\n          renderTableRows(childEntries, tbody, cols, depth + 1, expandable);\n        }\n      }\n    }\n\n    // ── Grouped Item Rendering ──\n    function renderGroupedItem(entry, parentPath, parentEl, depth) {\n      var strategy = _listResolveStrategy(entry);\n      var t = entry._transform || {};\n      var isDir = _listIsDirectory(entry);\n      var canExpand = isDir && depth < maxDepth;\n      var entryPath = _buildEntryPath(entry, parentPath);\n\n      var wrap = document.createElement(\"div\");\n      wrap.className = \"aup-list-grouped-item\";\n      wrap.setAttribute(\"data-depth\", String(depth));\n\n      var header = document.createElement(\"div\");\n      header.className = \"aup-list-row \" + (strategy.cssClass || \"\");\n      header.setAttribute(\"data-kind\", (entry.meta && entry.meta.kind) || \"\");\n\n      if (canExpand) {\n        var chevron = document.createElement(\"span\");\n        chevron.className = \"aup-list-chevron\";\n        chevron.textContent = _expanded[entryPath] ? \"\\\\u25BC\" : \"\\\\u25B6\";\n        header.appendChild(chevron);\n      }\n\n      // Reuse the chosen item style but within the grouped row\n      var styledEl = renderStyledItem(entry, strategy, t);\n      // Extract inner content from styled element to flatten into header\n      while (styledEl.firstChild) header.appendChild(styledEl.firstChild);\n\n      if (_selectedId === entry.id) header.setAttribute(\"data-selected\", \"true\");\n\n      header.onclick = function(e) {\n        e.stopPropagation();\n        if (canExpand) {\n          toggleGroup(entry, entryPath, depth);\n        } else {\n          var shouldNavigate = (clickMode === \"navigate\" && isDir) || (clickMode === \"both\" && isDir);\n          var shouldSelect = (clickMode === \"select\") || (clickMode === \"both\" && !isDir);\n          if (shouldNavigate) {\n            navigateTo(entryPath + \"/\", _pathStack.length);\n            emitEvent(\"navigate\", { path: entryPath, id: entry.id, meta: entry.meta || {}, previousPath: _currentPath });\n          }\n          if (shouldSelect || (!shouldNavigate && clickMode !== \"navigate\")) {\n            _selectedId = entry.id;\n            renderEntries();\n            emitEvent(\"select\", { path: entryPath, id: entry.id, meta: entry.meta || {}, content: entry.content || {} });\n          }\n        }\n      };\n\n      wrap.appendChild(header);\n\n      if (canExpand) {\n        var childrenEl = document.createElement(\"div\");\n        childrenEl.className = \"aup-list-children\";\n        childrenEl.setAttribute(\"data-expanded\", String(!!_expanded[entryPath]));\n        if (_expanded[entryPath] && _childCache[entryPath]) {\n          var childEntries = processPipeline(_childCache[entryPath]);\n          for (var ci = 0; ci < childEntries.length; ci++) {\n            renderGroupedItem(childEntries[ci], entryPath, childrenEl, depth + 1);\n          }\n        }\n        wrap.appendChild(childrenEl);\n      }\n\n      parentEl.appendChild(wrap);\n    }\n\n    // ── Flat Item Rendering ──\n    function renderFlatItem(entry, parentPath, parentEl) {\n      var strategy = _listResolveStrategy(entry);\n      var t = entry._transform || {};\n      var kind = (entry.meta && entry.meta.kind) || \"\";\n      var isDir = _listIsDirectory(entry);\n      var entryPath = _buildEntryPath(entry, parentPath);\n\n      var item = renderStyledItem(entry, strategy, t);\n      item.setAttribute(\"data-kind\", kind);\n      item.style.cursor = \"pointer\";\n      if (_selectedId === entry.id) item.setAttribute(\"data-selected\", \"true\");\n\n      item.onclick = function(e) {\n        e.stopPropagation();\n        var shouldNavigate = (clickMode === \"navigate\" && isDir) || (clickMode === \"both\" && isDir);\n        var shouldSelect = (clickMode === \"select\") || (clickMode === \"both\" && !isDir);\n        if (shouldNavigate) {\n          navigateTo(entryPath + \"/\", _pathStack.length);\n          emitEvent(\"navigate\", { path: entryPath, id: entry.id, meta: entry.meta || {}, previousPath: _currentPath });\n        }\n        if (shouldSelect || (!shouldNavigate && clickMode !== \"navigate\")) {\n          _selectedId = entry.id;\n          renderEntries();\n          emitEvent(\"select\", { path: entryPath, id: entry.id, meta: entry.meta || {}, content: entry.content || {} });\n        }\n      };\n\n      parentEl.appendChild(item);\n    }\n\n    // ── Slideshow ──\n    function slideTo(idx) {\n      var items = bodyEl.children;\n      if (!items.length) return;\n      _slideIndex = Math.max(0, Math.min(idx, items.length - 1));\n      for (var i = 0; i < items.length; i++) {\n        items[i].style.display = i === _slideIndex ? \"\" : \"none\";\n      }\n      if (slideshowNav) {\n        var counter = slideshowNav.querySelector(\".aup-list-slide-counter\");\n        if (counter) counter.textContent = (_slideIndex + 1) + \" / \" + items.length;\n      }\n    }\n\n    // ── Virtual Scroll Math ──\n    function _vsFindStartIndex(scrollTop) {\n      var acc = 0;\n      for (var i = 0; i < _entries.length; i++) {\n        var h = _itemHeights[i] || _estimatedHeight;\n        if (acc + h > scrollTop) return i;\n        acc += h;\n      }\n      return Math.max(0, _entries.length - 1);\n    }\n\n    function _vsSumHeights(from, to) {\n      var sum = 0;\n      for (var i = from; i < to; i++) {\n        sum += _itemHeights[i] || _estimatedHeight;\n      }\n      return sum;\n    }\n\n    var _vsTopSpacer = null;\n    var _vsBottomSpacer = null;\n    var _vsContentEl = null;\n    var _vsScrollHandler = null;\n\n    if (_virtual) {\n      bodyEl.style.overflow = \"auto\";\n      bodyEl.style.position = \"relative\";\n      _vsTopSpacer = document.createElement(\"div\");\n      _vsTopSpacer.className = \"aup-list-virtual-spacer\";\n      _vsBottomSpacer = document.createElement(\"div\");\n      _vsBottomSpacer.className = \"aup-list-virtual-spacer\";\n      _vsContentEl = document.createElement(\"div\");\n      _vsContentEl.className = \"aup-list-virtual-content\";\n\n      _vsScrollHandler = function() {\n        _renderVirtualRange();\n      };\n      bodyEl.addEventListener(\"scroll\", _vsScrollHandler);\n    }\n\n    function _renderVirtualRange() {\n      if (!_virtual || !_vsContentEl) return;\n      var processed = processPipeline(_entries);\n      if (processed.length === 0) return;\n\n      var scrollTop = bodyEl.scrollTop;\n      var viewportH = bodyEl.clientHeight;\n\n      var rawStart = _vsFindStartIndex(scrollTop);\n      var rawEnd = rawStart;\n      var acc = 0;\n      for (var i = rawStart; i < processed.length; i++) {\n        acc += _itemHeights[i] || _estimatedHeight;\n        rawEnd = i;\n        if (acc >= viewportH) break;\n      }\n\n      var startIdx = Math.max(0, rawStart - _bufferItems);\n      var endIdx = Math.min(processed.length - 1, rawEnd + _bufferItems);\n\n      // Check if range changed\n      if (_virtualRenderedRange &&\n          _virtualRenderedRange[0] === startIdx &&\n          _virtualRenderedRange[1] === endIdx) {\n        return;\n      }\n      _virtualRenderedRange = [startIdx, endIdx];\n\n      // Update spacers\n      _vsTopSpacer.style.height = _vsSumHeights(0, startIdx) + \"px\";\n      _vsBottomSpacer.style.height = _vsSumHeights(endIdx + 1, processed.length) + \"px\";\n\n      // Render visible items\n      _vsContentEl.innerHTML = \"\";\n      for (var vi = startIdx; vi <= endIdx; vi++) {\n        var vEntry = processed[vi];\n        renderFlatItem(vEntry, _currentPath, _vsContentEl);\n        // Measure item height after render\n        var lastChild = _vsContentEl.lastElementChild;\n        if (lastChild) {\n          _itemHeights[vi] = lastChild.offsetHeight || _estimatedHeight;\n        }\n      }\n\n      // Pagination: trigger fetch when near end\n      if (pageSize > 0 && endIdx >= _loadedCount - _bufferItems && _loadedCount < _total && !_loadingMore) {\n        fetchPage(_currentPath, _loadedCount, false);\n      }\n    }\n\n    // ── Main Render ──\n    function renderEntries() {\n      bodyEl.innerHTML = \"\";\n\n      // Header template\n      if (_headerTemplate && typeof renderAupNode === \"function\") {\n        var headerBound = JSON.parse(JSON.stringify(_headerTemplate));\n        headerBound.id = (_headerTemplate.id || \"header\") + \"--header\";\n        var headerEl = renderAupNode(headerBound);\n        if (headerEl) {\n          headerEl.classList.add(\"aup-list-template-header\");\n          bodyEl.appendChild(headerEl);\n        }\n      }\n\n      var processed = processPipeline(_entries);\n      if (processed.length === 0) {\n        // Empty template or default\n        if (_emptyTemplate && typeof renderAupNode === \"function\") {\n          var emptyBound = JSON.parse(JSON.stringify(_emptyTemplate));\n          emptyBound.id = (_emptyTemplate.id || \"empty\") + \"--empty\";\n          var emptyNodeEl = renderAupNode(emptyBound);\n          if (emptyNodeEl) {\n            emptyNodeEl.classList.add(\"aup-list-template-empty\");\n            bodyEl.appendChild(emptyNodeEl);\n          }\n        } else {\n          var empty = document.createElement(\"div\");\n          empty.className = \"aup-list-empty\";\n          empty.textContent = _filterQuery ? \"No matches\" : emptyText;\n          bodyEl.appendChild(empty);\n        }\n        if (slideshowNav) slideshowNav.style.display = \"none\";\n        return;\n      }\n\n      // Virtual scroll mode\n      if (_virtual && _vsTopSpacer && _vsBottomSpacer && _vsContentEl) {\n        bodyEl.appendChild(_vsTopSpacer);\n        bodyEl.appendChild(_vsContentEl);\n        bodyEl.appendChild(_vsBottomSpacer);\n        _virtualRenderedRange = null;\n        _renderVirtualRange();\n        return;\n      }\n\n      // Three-layer template resolution: role=\"item\" > kind registry > built-in\n      // _resolveTemplate returns a template node or null (null = use built-in)\n      function _resolveTemplate(entry) {\n        // Priority 1: explicit role=\"item\" child\n        if (_itemTemplate) return _itemTemplate;\n        // Priority 2: kind registry\n        if (window.aup && window.aup.getKindTemplate) {\n          var entryKind = (entry.meta && entry.meta.kind) || \"\";\n          var kindTpl = window.aup.getKindTemplate(entryKind);\n          if (kindTpl) return kindTpl;\n        }\n        // Priority 3: built-in\n        return null;\n      }\n\n      // Check if ANY entry has a template (to decide render path)\n      var _useTemplateMode = false;\n      if (typeof renderAupNode === \"function\") {\n        if (_itemTemplate) {\n          _useTemplateMode = true;\n        } else if (window.aup && window.aup.getKindTemplate) {\n          for (var ci = 0; ci < processed.length; ci++) {\n            if (_resolveTemplate(processed[ci])) { _useTemplateMode = true; break; }\n          }\n        }\n      }\n\n      if (_useTemplateMode) {\n        for (var ti = 0; ti < processed.length; ti++) {\n          var tEntry = processed[ti];\n          var tpl = _resolveTemplate(tEntry);\n          if (tpl) {\n            var boundNode = _bindTemplate(tpl, tEntry);\n            var tplEl = renderAupNode(boundNode);\n            if (tplEl) {\n              tplEl.classList.add(\"aup-list-template-item\");\n              (function(entry) {\n                tplEl.addEventListener(\"click\", function() {\n                  _selectedId = entry.id;\n                  emitEvent(\"select\", { path: entry.path, id: entry.id, meta: entry.meta, content: entry.content });\n                });\n              })(tEntry);\n              bodyEl.appendChild(tplEl);\n            }\n          } else {\n            // Fallback to built-in for entries without template\n            renderFlatItem(tEntry, _currentPath, bodyEl);\n          }\n        }\n      } else if (layout === \"table\") {\n        bodyEl.appendChild(renderTable(processed, isGrouped));\n      } else if (isGrouped) {\n        for (var i = 0; i < processed.length; i++) {\n          renderGroupedItem(processed[i], _currentPath, bodyEl, 0);\n        }\n      } else {\n        for (var i = 0; i < processed.length; i++) {\n          renderFlatItem(processed[i], _currentPath, bodyEl);\n        }\n      }\n\n      if (layout === \"slideshow\") {\n        slideTo(_slideIndex);\n        if (slideshowNav) slideshowNav.style.display = \"\";\n      }\n\n      // Pagination: \"Load more\" button\n      if (pageSize > 0 && _loadedCount < _total) {\n        var moreEl = document.createElement(\"div\");\n        moreEl.className = \"aup-list-load-more\";\n        moreEl.textContent = \"Load more (\" + _loadedCount + \" of \" + _total + \")\";\n        moreEl.addEventListener(\"click\", function() {\n          if (!_loadingMore) {\n            moreEl.textContent = \"Loading...\";\n            fetchPage(_currentPath, _loadedCount, false);\n          }\n        });\n        bodyEl.appendChild(moreEl);\n      }\n    }\n\n    // ── Navigation ──\n    function navigateTo(path, stackIdx) {\n      _currentPath = path;\n      if (stackIdx != null && stackIdx < _pathStack.length) {\n        _pathStack = _pathStack.slice(0, stackIdx);\n      }\n      _pathStack.push(path);\n      _selectedId = null;\n      _expanded = {};\n      _childCache = {};\n      _slideIndex = 0;\n      fetchAndRender(path);\n      subscribePath(path);\n      renderBreadcrumb();\n    }\n\n    // ── Group Toggle ──\n    function toggleGroup(entry, entryPath, depth) {\n      var wasExpanded = !!_expanded[entryPath];\n      _expanded[entryPath] = !wasExpanded;\n\n      if (!wasExpanded && !_childCache[entryPath]) {\n        window.afs.list(entryPath + \"/\").then(function(result) {\n          var data = result && result.data ? result.data : (Array.isArray(result) ? result : []);\n          _childCache[entryPath] = Array.isArray(data) ? data : [];\n          renderEntries();\n        }).catch(function() {\n          _childCache[entryPath] = [];\n          renderEntries();\n        });\n        emitEvent(\"expand\", { path: entryPath, id: entry.id, childrenCount: entry.meta && entry.meta.childrenCount });\n      } else {\n        renderEntries();\n        emitEvent(wasExpanded ? \"collapse\" : \"expand\", { path: entryPath, id: entry.id });\n      }\n    }\n\n    // ── Data Fetching ──\n    function fetchAndRender(path) {\n      _entries = [];\n      _total = 0;\n      _loadedCount = 0;\n      fetchPage(path, 0, true);\n    }\n\n    function fetchPage(path, offset, isInitial) {\n      if (isInitial) {\n        loadingEl.style.display = \"block\";\n        bodyEl.style.display = \"none\";\n      }\n      _loadingMore = true;\n      var opts = pageSize > 0 ? { offset: offset, limit: pageSize } : {};\n      window.afs.list(path, opts).then(function(result) {\n        // Handle both new { data, total } format and legacy array format\n        var data = result && result.data ? result.data : (Array.isArray(result) ? result : []);\n        var newEntries = Array.isArray(data) ? data : [];\n        if (offset === 0) {\n          _entries = newEntries;\n        } else {\n          _entries = _entries.concat(newEntries);\n        }\n        _total = result && result.total != null ? result.total : _entries.length;\n        _loadedCount = _entries.length;\n        _loadingMore = false;\n        if (isInitial) {\n          loadingEl.style.display = \"none\";\n          bodyEl.style.display = \"\";\n        }\n        renderEntries();\n      }).catch(function(e) {\n        _loadingMore = false;\n        if (isInitial) {\n          var errStr = String(e && e.message || e || \"\");\n          if (errStr.indexOf(\"not found\") >= 0 || errStr.indexOf(\"Not found\") >= 0 || errStr.indexOf(\"Path not found\") >= 0) {\n            loadingEl.textContent = \"This entry cannot be browsed as a directory\";\n          } else {\n            loadingEl.textContent = \"Unable to list: \" + (errStr || \"unknown error\");\n          }\n          bodyEl.style.display = \"none\";\n        }\n      });\n    }\n\n    // ── Live Subscription ──\n    function subscribePath(path) {\n      if (_unsubscribe) _unsubscribe();\n      if (window.afs && window.afs.subscribe) {\n        _unsubscribe = window.afs.subscribe(\n          { type: \"afs:write\", path: path },\n          function() { fetchAndRender(_currentPath); }\n        );\n      }\n    }\n\n    // ── Event Emission ──\n    function emitEvent(eventName, data) {\n      if (ws && ws.readyState === 1) {\n        ws.send(JSON.stringify({\n          type: \"aup_event\",\n          nodeId: node.id,\n          event: eventName,\n          data: data\n        }));\n      }\n      // Also dispatch DOM CustomEvent for client-side listeners (e.g., device surface)\n      el.dispatchEvent(new CustomEvent(\"aup-list:\" + eventName, { detail: data, bubbles: true }));\n    }\n\n    // ── Initial Load ──\n    if (node.src && window.afs) {\n      fetchAndRender(_currentPath);\n      subscribePath(_currentPath);\n      renderBreadcrumb();\n    } else {\n      loadingEl.style.display = \"none\";\n      bodyEl.style.display = \"\";\n      var empty = document.createElement(\"div\");\n      empty.className = \"aup-list-empty\";\n      empty.textContent = node.src ? \"Connecting...\" : emptyText;\n      bodyEl.appendChild(empty);\n    }\n\n    return el;\n  }\n`;\n"],"mappings":";AAAA,MAAa,UAAU"}

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

@@ -0,0 +1,126 @@
+
+//#region src/web-page/renderers/map.ts
+const MAP_JS = `
+  // ── Map Primitive (Leaflet v1) ──
+  // ── Map tile style presets ──
+  var _mapTileStyles = {
+    "carto-light": { url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "carto-dark": { url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "carto-voyager": { url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "osm": { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attr: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>' },
+    "stamen-toner": { url: "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "stamen-watercolor": { url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "alidade-smooth": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "alidade-dark": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' }
+  };
+
+  var _markerIntentColors = {
+    primary: "#6366f1",
+    success: "#10b981",
+    warning: "#f59e0b",
+    danger: "#ef4444",
+    info: "#06b6d4",
+    accent: "#8b5cf6",
+    neutral: "#64748b"
+  };
+
+  function renderAupMap(node) {
+    var el = document.createElement("div");
+    el.className = "aup-map";
+    var p = node.props || {};
+    var center = p.center || [0, 0];
+    var zoom = p.zoom || 2;
+    var tileStyle = p.tileStyle || "carto-voyager";
+    var mapDiv = document.createElement("div");
+    mapDiv.style.width = "100%";
+    if (p.height) el.style.height = p.height;
+    mapDiv.style.height = "100%";
+    el.appendChild(mapDiv);
+
+    function initMap() {
+      if (typeof L === "undefined") {
+        loadCSS("https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css");
+        var loading = document.createElement("div");
+        loading.className = "aup-map-loading";
+        loading.textContent = "Loading map...";
+        el.insertBefore(loading, mapDiv);
+        loadScript("https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createMap();
+        });
+      } else {
+        createMap();
+      }
+    }
+
+    function createMap() {
+      try {
+        var map = L.map(mapDiv, { zoomControl: false }).setView(center, zoom);
+
+        // Add zoom control to bottom-right for cleaner look
+        L.control.zoom({ position: "bottomright" }).addTo(map);
+
+        // Apply tile style
+        var tile = _mapTileStyles[tileStyle] || _mapTileStyles["carto-voyager"];
+        L.tileLayer(tile.url, { attribution: tile.attr, maxZoom: 19 }).addTo(map);
+
+        // Add markers
+        var markers = p.markers || [];
+        var markerLayer = L.featureGroup();
+        for (var i = 0; i < markers.length; i++) {
+          var m = markers[i];
+          var color = m.color || _markerIntentColors[m.intent || "primary"] || m.intent || "#6366f1";
+          var radius = m.radius || m.size || 7;
+          var cm = L.circleMarker([m.lat, m.lng], {
+            radius: radius,
+            fillColor: color,
+            color: "rgba(255,255,255,0.9)",
+            weight: 2,
+            opacity: 1,
+            fillOpacity: 0.85
+          }).addTo(markerLayer);
+          if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));
+        }
+        markerLayer.addTo(map);
+
+        // Auto-fit if requested
+        if (p.fitMarkers && markers.length > 1) {
+          map.fitBounds(markerLayer.getBounds().pad(0.1));
+        }
+
+        // src binding for live marker updates
+        if (node.src && window.afs) {
+          window.afs.read(node.src).then(function(res) {
+            if (res && res.content) updateMarkers(map, markerLayer, res.content);
+          }).catch(function() {});
+          window.afs.subscribe({ type: "afs:write", path: node.src }, function(event) {
+            if (event && event.data) updateMarkers(map, markerLayer, event.data.content || event.data);
+          });
+        }
+      } catch(e) { mapDiv.textContent = "Map error: " + e.message; }
+    }
+
+    function updateMarkers(map, layer, data) {
+      layer.clearLayers();
+      var markers = data.markers || data || [];
+      if (!Array.isArray(markers)) return;
+      for (var i = 0; i < markers.length; i++) {
+        var m = markers[i];
+        var color = m.color || _markerIntentColors[m.intent || "primary"] || "#6366f1";
+        var radius = m.radius || m.size || 7;
+        var cm = L.circleMarker([m.lat, m.lng], {
+          radius: radius, fillColor: color, color: "rgba(255,255,255,0.9)",
+          weight: 2, opacity: 1, fillOpacity: 0.85
+        }).addTo(layer);
+        if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));
+      }
+    }
+
+    setTimeout(initMap, 0);
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.MAP_JS = MAP_JS;

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

@@ -0,0 +1,126 @@
+//#region src/web-page/renderers/map.ts
+const MAP_JS = `
+  // ── Map Primitive (Leaflet v1) ──
+  // ── Map tile style presets ──
+  var _mapTileStyles = {
+    "carto-light": { url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "carto-dark": { url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "carto-voyager": { url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://carto.com">CARTO</a>' },
+    "osm": { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attr: '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a>' },
+    "stamen-toner": { url: "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "stamen-watercolor": { url: "https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "alidade-smooth": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' },
+    "alidade-dark": { url: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png", attr: '&copy; <a href="https://openstreetmap.org">OSM</a> &copy; <a href="https://stadiamaps.com">Stadia</a>' }
+  };
+
+  var _markerIntentColors = {
+    primary: "#6366f1",
+    success: "#10b981",
+    warning: "#f59e0b",
+    danger: "#ef4444",
+    info: "#06b6d4",
+    accent: "#8b5cf6",
+    neutral: "#64748b"
+  };
+
+  function renderAupMap(node) {
+    var el = document.createElement("div");
+    el.className = "aup-map";
+    var p = node.props || {};
+    var center = p.center || [0, 0];
+    var zoom = p.zoom || 2;
+    var tileStyle = p.tileStyle || "carto-voyager";
+    var mapDiv = document.createElement("div");
+    mapDiv.style.width = "100%";
+    if (p.height) el.style.height = p.height;
+    mapDiv.style.height = "100%";
+    el.appendChild(mapDiv);
+
+    function initMap() {
+      if (typeof L === "undefined") {
+        loadCSS("https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css");
+        var loading = document.createElement("div");
+        loading.className = "aup-map-loading";
+        loading.textContent = "Loading map...";
+        el.insertBefore(loading, mapDiv);
+        loadScript("https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createMap();
+        });
+      } else {
+        createMap();
+      }
+    }
+
+    function createMap() {
+      try {
+        var map = L.map(mapDiv, { zoomControl: false }).setView(center, zoom);
+
+        // Add zoom control to bottom-right for cleaner look
+        L.control.zoom({ position: "bottomright" }).addTo(map);
+
+        // Apply tile style
+        var tile = _mapTileStyles[tileStyle] || _mapTileStyles["carto-voyager"];
+        L.tileLayer(tile.url, { attribution: tile.attr, maxZoom: 19 }).addTo(map);
+
+        // Add markers
+        var markers = p.markers || [];
+        var markerLayer = L.featureGroup();
+        for (var i = 0; i < markers.length; i++) {
+          var m = markers[i];
+          var color = m.color || _markerIntentColors[m.intent || "primary"] || m.intent || "#6366f1";
+          var radius = m.radius || m.size || 7;
+          var cm = L.circleMarker([m.lat, m.lng], {
+            radius: radius,
+            fillColor: color,
+            color: "rgba(255,255,255,0.9)",
+            weight: 2,
+            opacity: 1,
+            fillOpacity: 0.85
+          }).addTo(markerLayer);
+          if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));
+        }
+        markerLayer.addTo(map);
+
+        // Auto-fit if requested
+        if (p.fitMarkers && markers.length > 1) {
+          map.fitBounds(markerLayer.getBounds().pad(0.1));
+        }
+
+        // src binding for live marker updates
+        if (node.src && window.afs) {
+          window.afs.read(node.src).then(function(res) {
+            if (res && res.content) updateMarkers(map, markerLayer, res.content);
+          }).catch(function() {});
+          window.afs.subscribe({ type: "afs:write", path: node.src }, function(event) {
+            if (event && event.data) updateMarkers(map, markerLayer, event.data.content || event.data);
+          });
+        }
+      } catch(e) { mapDiv.textContent = "Map error: " + e.message; }
+    }
+
+    function updateMarkers(map, layer, data) {
+      layer.clearLayers();
+      var markers = data.markers || data || [];
+      if (!Array.isArray(markers)) return;
+      for (var i = 0; i < markers.length; i++) {
+        var m = markers[i];
+        var color = m.color || _markerIntentColors[m.intent || "primary"] || "#6366f1";
+        var radius = m.radius || m.size || 7;
+        var cm = L.circleMarker([m.lat, m.lng], {
+          radius: radius, fillColor: color, color: "rgba(255,255,255,0.9)",
+          weight: 2, opacity: 1, fillOpacity: 0.85
+        }).addTo(layer);
+        if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));
+      }
+    }
+
+    setTimeout(initMap, 0);
+    return el;
+  }
+
+`;
+
+//#endregion
+export { MAP_JS };
+//# sourceMappingURL=map.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"map.mjs","names":[],"sources":["../../../src/web-page/renderers/map.ts"],"sourcesContent":["export const MAP_JS = `\n  // ── Map Primitive (Leaflet v1) ──\n  // ── Map tile style presets ──\n  var _mapTileStyles = {\n    \"carto-light\": { url: \"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://carto.com\">CARTO</a>' },\n    \"carto-dark\": { url: \"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://carto.com\">CARTO</a>' },\n    \"carto-voyager\": { url: \"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://carto.com\">CARTO</a>' },\n    \"osm\": { url: \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OpenStreetMap</a>' },\n    \"stamen-toner\": { url: \"https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://stadiamaps.com\">Stadia</a>' },\n    \"stamen-watercolor\": { url: \"https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://stadiamaps.com\">Stadia</a>' },\n    \"alidade-smooth\": { url: \"https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://stadiamaps.com\">Stadia</a>' },\n    \"alidade-dark\": { url: \"https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png\", attr: '&copy; <a href=\"https://openstreetmap.org\">OSM</a> &copy; <a href=\"https://stadiamaps.com\">Stadia</a>' }\n  };\n\n  var _markerIntentColors = {\n    primary: \"#6366f1\",\n    success: \"#10b981\",\n    warning: \"#f59e0b\",\n    danger: \"#ef4444\",\n    info: \"#06b6d4\",\n    accent: \"#8b5cf6\",\n    neutral: \"#64748b\"\n  };\n\n  function renderAupMap(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-map\";\n    var p = node.props || {};\n    var center = p.center || [0, 0];\n    var zoom = p.zoom || 2;\n    var tileStyle = p.tileStyle || \"carto-voyager\";\n    var mapDiv = document.createElement(\"div\");\n    mapDiv.style.width = \"100%\";\n    if (p.height) el.style.height = p.height;\n    mapDiv.style.height = \"100%\";\n    el.appendChild(mapDiv);\n\n    function initMap() {\n      if (typeof L === \"undefined\") {\n        loadCSS(\"https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css\");\n        var loading = document.createElement(\"div\");\n        loading.className = \"aup-map-loading\";\n        loading.textContent = \"Loading map...\";\n        el.insertBefore(loading, mapDiv);\n        loadScript(\"https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.js\", function() {\n          if (loading.parentNode) loading.parentNode.removeChild(loading);\n          createMap();\n        });\n      } else {\n        createMap();\n      }\n    }\n\n    function createMap() {\n      try {\n        var map = L.map(mapDiv, { zoomControl: false }).setView(center, zoom);\n\n        // Add zoom control to bottom-right for cleaner look\n        L.control.zoom({ position: \"bottomright\" }).addTo(map);\n\n        // Apply tile style\n        var tile = _mapTileStyles[tileStyle] || _mapTileStyles[\"carto-voyager\"];\n        L.tileLayer(tile.url, { attribution: tile.attr, maxZoom: 19 }).addTo(map);\n\n        // Add markers\n        var markers = p.markers || [];\n        var markerLayer = L.featureGroup();\n        for (var i = 0; i < markers.length; i++) {\n          var m = markers[i];\n          var color = m.color || _markerIntentColors[m.intent || \"primary\"] || m.intent || \"#6366f1\";\n          var radius = m.radius || m.size || 7;\n          var cm = L.circleMarker([m.lat, m.lng], {\n            radius: radius,\n            fillColor: color,\n            color: \"rgba(255,255,255,0.9)\",\n            weight: 2,\n            opacity: 1,\n            fillOpacity: 0.85\n          }).addTo(markerLayer);\n          if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));\n        }\n        markerLayer.addTo(map);\n\n        // Auto-fit if requested\n        if (p.fitMarkers && markers.length > 1) {\n          map.fitBounds(markerLayer.getBounds().pad(0.1));\n        }\n\n        // src binding for live marker updates\n        if (node.src && window.afs) {\n          window.afs.read(node.src).then(function(res) {\n            if (res && res.content) updateMarkers(map, markerLayer, res.content);\n          }).catch(function() {});\n          window.afs.subscribe({ type: \"afs:write\", path: node.src }, function(event) {\n            if (event && event.data) updateMarkers(map, markerLayer, event.data.content || event.data);\n          });\n        }\n      } catch(e) { mapDiv.textContent = \"Map error: \" + e.message; }\n    }\n\n    function updateMarkers(map, layer, data) {\n      layer.clearLayers();\n      var markers = data.markers || data || [];\n      if (!Array.isArray(markers)) return;\n      for (var i = 0; i < markers.length; i++) {\n        var m = markers[i];\n        var color = m.color || _markerIntentColors[m.intent || \"primary\"] || \"#6366f1\";\n        var radius = m.radius || m.size || 7;\n        var cm = L.circleMarker([m.lat, m.lng], {\n          radius: radius, fillColor: color, color: \"rgba(255,255,255,0.9)\",\n          weight: 2, opacity: 1, fillOpacity: 0.85\n        }).addTo(layer);\n        if (m.label) cm.bindPopup(_escapeHtml(String(m.label)));\n      }\n    }\n\n    setTimeout(initMap, 0);\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,SAAS"}

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

@@ -0,0 +1,106 @@
+
+//#region src/web-page/renderers/media.ts
+const MEDIA_JS = `
+  function renderAupMedia(node) {
+    var el = document.createElement("div");
+    el.className = "aup-media";
+    var p = node.props || {};
+    var mediaType = p.type || "image";
+
+    if (mediaType === "avatar") {
+      var avatar = document.createElement("div");
+      avatar.className = "aup-avatar";
+      if (p.size) avatar.setAttribute("data-size", p.size);
+      var avatarSrc = String(p.src || "");
+      if (avatarSrc && !avatarSrc.toLowerCase().startsWith("javascript:")) {
+        var avatarImg = document.createElement("img");
+        avatarImg.src = avatarSrc;
+        avatarImg.alt = _escapeHtml(String(p.alt || p.name || ""));
+        avatar.appendChild(avatarImg);
+      } else {
+        // Initials fallback
+        var name = String(p.name || p.alt || "?");
+        var initials = name.split(/\\s+/).map(function(w) { return w[0]; }).join("").slice(0, 2).toUpperCase();
+        avatar.textContent = initials;
+      }
+      el.appendChild(avatar);
+    } else if (mediaType === "icon") {
+      var iconName = p.name || p.content || "";
+      var svgPath = _ICON_PATHS[iconName];
+      if (svgPath) {
+        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("stroke", "currentColor");
+        svg.setAttribute("stroke-width", "2");
+        svg.setAttribute("stroke-linecap", "round");
+        svg.setAttribute("stroke-linejoin", "round");
+        svg.classList.add("aup-icon-svg");
+        svg.innerHTML = svgPath;
+        el.appendChild(svg);
+      } else {
+        // Fallback: single letter/emoji avatar
+        var icon = document.createElement("span");
+        icon.className = "aup-icon";
+        icon.textContent = String(iconName).slice(0, 2);
+        el.appendChild(icon);
+      }
+    } else if (mediaType === "video") {
+      var video = document.createElement("video");
+      var src = String(p.src || "");
+      if (src && !src.toLowerCase().startsWith("javascript:")) {
+        video.src = src;
+      }
+      video.controls = p.controls !== false;
+      if (p.autoPlay) { video.autoplay = true; video.muted = true; } // autoplay requires muted
+      if (p.loop) video.loop = true;
+      if (p.muted) video.muted = true;
+      if (p.poster) video.poster = String(p.poster);
+      if (p.fit) video.style.objectFit = p.fit;
+      if (typeof p.volume === "number") video.volume = Math.max(0, Math.min(1, p.volume));
+      video.playsInline = true;
+      var svw = (p.size && p.size.width) || p.width;
+      var svh = (p.size && p.size.height) || p.height;
+      if (svw) video.style.width = typeof svw === "number" ? svw + "px" : svw;
+      if (svh) video.style.height = typeof svh === "number" ? svh + "px" : svh;
+      if ((svw || svh) && !p.fit) video.style.objectFit = "contain";
+      el.appendChild(video);
+    } else if (mediaType === "audio") {
+      var audio = document.createElement("audio");
+      var audioSrc = String(p.src || "");
+      if (audioSrc && !audioSrc.toLowerCase().startsWith("javascript:")) {
+        audio.src = audioSrc;
+      }
+      audio.controls = p.controls !== false;
+      if (p.autoPlay) audio.autoplay = true;
+      if (p.loop) audio.loop = true;
+      if (p.muted) audio.muted = true;
+      if (typeof p.volume === "number") audio.volume = Math.max(0, Math.min(1, p.volume));
+      el.appendChild(audio);
+    } else {
+      // image
+      var src = String(p.src || "");
+      if (src && !src.toLowerCase().startsWith("javascript:")) {
+        var img = document.createElement("img");
+        img.src = src;
+        img.alt = _escapeHtml(String(p.alt || ""));
+        var sw = (p.size && p.size.width) || p.width;
+        var sh = (p.size && p.size.height) || p.height;
+        if (sw) img.style.width = typeof sw === "number" ? sw + "px" : sw;
+        if (sh) img.style.height = typeof sh === "number" ? sh + "px" : sh;
+        if (sw || sh) img.style.objectFit = "contain";
+        el.appendChild(img);
+      } else {
+        var ph = document.createElement("div");
+        ph.className = "aup-placeholder";
+        ph.textContent = p.alt ? _escapeHtml(String(p.alt)) : "No image";
+        el.appendChild(ph);
+      }
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.MEDIA_JS = MEDIA_JS;

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

@@ -0,0 +1,106 @@
+//#region src/web-page/renderers/media.ts
+const MEDIA_JS = `
+  function renderAupMedia(node) {
+    var el = document.createElement("div");
+    el.className = "aup-media";
+    var p = node.props || {};
+    var mediaType = p.type || "image";
+
+    if (mediaType === "avatar") {
+      var avatar = document.createElement("div");
+      avatar.className = "aup-avatar";
+      if (p.size) avatar.setAttribute("data-size", p.size);
+      var avatarSrc = String(p.src || "");
+      if (avatarSrc && !avatarSrc.toLowerCase().startsWith("javascript:")) {
+        var avatarImg = document.createElement("img");
+        avatarImg.src = avatarSrc;
+        avatarImg.alt = _escapeHtml(String(p.alt || p.name || ""));
+        avatar.appendChild(avatarImg);
+      } else {
+        // Initials fallback
+        var name = String(p.name || p.alt || "?");
+        var initials = name.split(/\\s+/).map(function(w) { return w[0]; }).join("").slice(0, 2).toUpperCase();
+        avatar.textContent = initials;
+      }
+      el.appendChild(avatar);
+    } else if (mediaType === "icon") {
+      var iconName = p.name || p.content || "";
+      var svgPath = _ICON_PATHS[iconName];
+      if (svgPath) {
+        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("viewBox", "0 0 24 24");
+        svg.setAttribute("fill", "none");
+        svg.setAttribute("stroke", "currentColor");
+        svg.setAttribute("stroke-width", "2");
+        svg.setAttribute("stroke-linecap", "round");
+        svg.setAttribute("stroke-linejoin", "round");
+        svg.classList.add("aup-icon-svg");
+        svg.innerHTML = svgPath;
+        el.appendChild(svg);
+      } else {
+        // Fallback: single letter/emoji avatar
+        var icon = document.createElement("span");
+        icon.className = "aup-icon";
+        icon.textContent = String(iconName).slice(0, 2);
+        el.appendChild(icon);
+      }
+    } else if (mediaType === "video") {
+      var video = document.createElement("video");
+      var src = String(p.src || "");
+      if (src && !src.toLowerCase().startsWith("javascript:")) {
+        video.src = src;
+      }
+      video.controls = p.controls !== false;
+      if (p.autoPlay) { video.autoplay = true; video.muted = true; } // autoplay requires muted
+      if (p.loop) video.loop = true;
+      if (p.muted) video.muted = true;
+      if (p.poster) video.poster = String(p.poster);
+      if (p.fit) video.style.objectFit = p.fit;
+      if (typeof p.volume === "number") video.volume = Math.max(0, Math.min(1, p.volume));
+      video.playsInline = true;
+      var svw = (p.size && p.size.width) || p.width;
+      var svh = (p.size && p.size.height) || p.height;
+      if (svw) video.style.width = typeof svw === "number" ? svw + "px" : svw;
+      if (svh) video.style.height = typeof svh === "number" ? svh + "px" : svh;
+      if ((svw || svh) && !p.fit) video.style.objectFit = "contain";
+      el.appendChild(video);
+    } else if (mediaType === "audio") {
+      var audio = document.createElement("audio");
+      var audioSrc = String(p.src || "");
+      if (audioSrc && !audioSrc.toLowerCase().startsWith("javascript:")) {
+        audio.src = audioSrc;
+      }
+      audio.controls = p.controls !== false;
+      if (p.autoPlay) audio.autoplay = true;
+      if (p.loop) audio.loop = true;
+      if (p.muted) audio.muted = true;
+      if (typeof p.volume === "number") audio.volume = Math.max(0, Math.min(1, p.volume));
+      el.appendChild(audio);
+    } else {
+      // image
+      var src = String(p.src || "");
+      if (src && !src.toLowerCase().startsWith("javascript:")) {
+        var img = document.createElement("img");
+        img.src = src;
+        img.alt = _escapeHtml(String(p.alt || ""));
+        var sw = (p.size && p.size.width) || p.width;
+        var sh = (p.size && p.size.height) || p.height;
+        if (sw) img.style.width = typeof sw === "number" ? sw + "px" : sw;
+        if (sh) img.style.height = typeof sh === "number" ? sh + "px" : sh;
+        if (sw || sh) img.style.objectFit = "contain";
+        el.appendChild(img);
+      } else {
+        var ph = document.createElement("div");
+        ph.className = "aup-placeholder";
+        ph.textContent = p.alt ? _escapeHtml(String(p.alt)) : "No image";
+        el.appendChild(ph);
+      }
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+export { MEDIA_JS };
+//# sourceMappingURL=media.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media.mjs","names":[],"sources":["../../../src/web-page/renderers/media.ts"],"sourcesContent":["export const MEDIA_JS = `\n  function renderAupMedia(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-media\";\n    var p = node.props || {};\n    var mediaType = p.type || \"image\";\n\n    if (mediaType === \"avatar\") {\n      var avatar = document.createElement(\"div\");\n      avatar.className = \"aup-avatar\";\n      if (p.size) avatar.setAttribute(\"data-size\", p.size);\n      var avatarSrc = String(p.src || \"\");\n      if (avatarSrc && !avatarSrc.toLowerCase().startsWith(\"javascript:\")) {\n        var avatarImg = document.createElement(\"img\");\n        avatarImg.src = avatarSrc;\n        avatarImg.alt = _escapeHtml(String(p.alt || p.name || \"\"));\n        avatar.appendChild(avatarImg);\n      } else {\n        // Initials fallback\n        var name = String(p.name || p.alt || \"?\");\n        var initials = name.split(/\\\\s+/).map(function(w) { return w[0]; }).join(\"\").slice(0, 2).toUpperCase();\n        avatar.textContent = initials;\n      }\n      el.appendChild(avatar);\n    } else if (mediaType === \"icon\") {\n      var iconName = p.name || p.content || \"\";\n      var svgPath = _ICON_PATHS[iconName];\n      if (svgPath) {\n        var svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n        svg.setAttribute(\"viewBox\", \"0 0 24 24\");\n        svg.setAttribute(\"fill\", \"none\");\n        svg.setAttribute(\"stroke\", \"currentColor\");\n        svg.setAttribute(\"stroke-width\", \"2\");\n        svg.setAttribute(\"stroke-linecap\", \"round\");\n        svg.setAttribute(\"stroke-linejoin\", \"round\");\n        svg.classList.add(\"aup-icon-svg\");\n        svg.innerHTML = svgPath;\n        el.appendChild(svg);\n      } else {\n        // Fallback: single letter/emoji avatar\n        var icon = document.createElement(\"span\");\n        icon.className = \"aup-icon\";\n        icon.textContent = String(iconName).slice(0, 2);\n        el.appendChild(icon);\n      }\n    } else if (mediaType === \"video\") {\n      var video = document.createElement(\"video\");\n      var src = String(p.src || \"\");\n      if (src && !src.toLowerCase().startsWith(\"javascript:\")) {\n        video.src = src;\n      }\n      video.controls = p.controls !== false;\n      if (p.autoPlay) { video.autoplay = true; video.muted = true; } // autoplay requires muted\n      if (p.loop) video.loop = true;\n      if (p.muted) video.muted = true;\n      if (p.poster) video.poster = String(p.poster);\n      if (p.fit) video.style.objectFit = p.fit;\n      if (typeof p.volume === \"number\") video.volume = Math.max(0, Math.min(1, p.volume));\n      video.playsInline = true;\n      var svw = (p.size && p.size.width) || p.width;\n      var svh = (p.size && p.size.height) || p.height;\n      if (svw) video.style.width = typeof svw === \"number\" ? svw + \"px\" : svw;\n      if (svh) video.style.height = typeof svh === \"number\" ? svh + \"px\" : svh;\n      if ((svw || svh) && !p.fit) video.style.objectFit = \"contain\";\n      el.appendChild(video);\n    } else if (mediaType === \"audio\") {\n      var audio = document.createElement(\"audio\");\n      var audioSrc = String(p.src || \"\");\n      if (audioSrc && !audioSrc.toLowerCase().startsWith(\"javascript:\")) {\n        audio.src = audioSrc;\n      }\n      audio.controls = p.controls !== false;\n      if (p.autoPlay) audio.autoplay = true;\n      if (p.loop) audio.loop = true;\n      if (p.muted) audio.muted = true;\n      if (typeof p.volume === \"number\") audio.volume = Math.max(0, Math.min(1, p.volume));\n      el.appendChild(audio);\n    } else {\n      // image\n      var src = String(p.src || \"\");\n      if (src && !src.toLowerCase().startsWith(\"javascript:\")) {\n        var img = document.createElement(\"img\");\n        img.src = src;\n        img.alt = _escapeHtml(String(p.alt || \"\"));\n        var sw = (p.size && p.size.width) || p.width;\n        var sh = (p.size && p.size.height) || p.height;\n        if (sw) img.style.width = typeof sw === \"number\" ? sw + \"px\" : sw;\n        if (sh) img.style.height = typeof sh === \"number\" ? sh + \"px\" : sh;\n        if (sw || sh) img.style.objectFit = \"contain\";\n        el.appendChild(img);\n      } else {\n        var ph = document.createElement(\"div\");\n        ph.className = \"aup-placeholder\";\n        ph.textContent = p.alt ? _escapeHtml(String(p.alt)) : \"No image\";\n        el.appendChild(ph);\n      }\n    }\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,WAAW"}