@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1,69 @@
+
+//#region src/web-page/renderers/time.ts
+const TIME_JS = `
+  // ── Time Primitive ──
+  var _timeIntervals = [];
+  function renderAupTime(node) {
+    var el = document.createElement("div");
+    el.className = "aup-time";
+    var p = node.props || {};
+    var mode = p.mode || "display";
+
+    if (mode === "display") {
+      el.classList.add("aup-time-display");
+      var val = p.value || new Date().toISOString();
+      try {
+        var d = new Date(val);
+        var fmt = p.format || {};
+        el.textContent = new Intl.DateTimeFormat(p.locale || undefined, Object.keys(fmt).length ? fmt : { dateStyle: "medium", timeStyle: "short" }).format(d);
+      } catch(e) { el.textContent = String(val); }
+    } else if (mode === "clock") {
+      el.classList.add("aup-time-clock");
+      function updateClock() {
+        var now = new Date();
+        el.textContent = now.toLocaleTimeString(p.locale || undefined);
+      }
+      updateClock();
+      var intv = setInterval(updateClock, 1000);
+      _timeIntervals.push(intv);
+    } else if (mode === "timer") {
+      el.classList.add("aup-time-timer");
+      var startTime = Date.now();
+      function updateTimer() {
+        var elapsed = Math.floor((Date.now() - startTime) / 1000);
+        var h = Math.floor(elapsed / 3600);
+        var m = Math.floor((elapsed % 3600) / 60);
+        var s = elapsed % 60;
+        el.textContent = (h ? h + ":" : "") + String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+      }
+      updateTimer();
+      var tIntv = setInterval(updateTimer, 1000);
+      _timeIntervals.push(tIntv);
+    } else if (mode === "countdown") {
+      el.classList.add("aup-time-countdown");
+      var target = p.target ? new Date(p.target).getTime() : Date.now();
+      function updateCountdown() {
+        var remaining = Math.max(0, Math.floor((target - Date.now()) / 1000));
+        var h = Math.floor(remaining / 3600);
+        var m = Math.floor((remaining % 3600) / 60);
+        var s = remaining % 60;
+        el.textContent = (h ? h + ":" : "") + String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+        if (remaining <= 0) el.textContent = p.expiredLabel || "00:00";
+      }
+      updateCountdown();
+      var cdIntv = setInterval(updateCountdown, 1000);
+      _timeIntervals.push(cdIntv);
+    } else if (mode === "picker") {
+      el.classList.add("aup-time-picker");
+      var inp = document.createElement("input");
+      inp.type = "datetime-local";
+      if (p.value) inp.value = p.value;
+      el.appendChild(inp);
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.TIME_JS = TIME_JS;

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

@@ -0,0 +1,69 @@
+//#region src/web-page/renderers/time.ts
+const TIME_JS = `
+  // ── Time Primitive ──
+  var _timeIntervals = [];
+  function renderAupTime(node) {
+    var el = document.createElement("div");
+    el.className = "aup-time";
+    var p = node.props || {};
+    var mode = p.mode || "display";
+
+    if (mode === "display") {
+      el.classList.add("aup-time-display");
+      var val = p.value || new Date().toISOString();
+      try {
+        var d = new Date(val);
+        var fmt = p.format || {};
+        el.textContent = new Intl.DateTimeFormat(p.locale || undefined, Object.keys(fmt).length ? fmt : { dateStyle: "medium", timeStyle: "short" }).format(d);
+      } catch(e) { el.textContent = String(val); }
+    } else if (mode === "clock") {
+      el.classList.add("aup-time-clock");
+      function updateClock() {
+        var now = new Date();
+        el.textContent = now.toLocaleTimeString(p.locale || undefined);
+      }
+      updateClock();
+      var intv = setInterval(updateClock, 1000);
+      _timeIntervals.push(intv);
+    } else if (mode === "timer") {
+      el.classList.add("aup-time-timer");
+      var startTime = Date.now();
+      function updateTimer() {
+        var elapsed = Math.floor((Date.now() - startTime) / 1000);
+        var h = Math.floor(elapsed / 3600);
+        var m = Math.floor((elapsed % 3600) / 60);
+        var s = elapsed % 60;
+        el.textContent = (h ? h + ":" : "") + String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+      }
+      updateTimer();
+      var tIntv = setInterval(updateTimer, 1000);
+      _timeIntervals.push(tIntv);
+    } else if (mode === "countdown") {
+      el.classList.add("aup-time-countdown");
+      var target = p.target ? new Date(p.target).getTime() : Date.now();
+      function updateCountdown() {
+        var remaining = Math.max(0, Math.floor((target - Date.now()) / 1000));
+        var h = Math.floor(remaining / 3600);
+        var m = Math.floor((remaining % 3600) / 60);
+        var s = remaining % 60;
+        el.textContent = (h ? h + ":" : "") + String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
+        if (remaining <= 0) el.textContent = p.expiredLabel || "00:00";
+      }
+      updateCountdown();
+      var cdIntv = setInterval(updateCountdown, 1000);
+      _timeIntervals.push(cdIntv);
+    } else if (mode === "picker") {
+      el.classList.add("aup-time-picker");
+      var inp = document.createElement("input");
+      inp.type = "datetime-local";
+      if (p.value) inp.value = p.value;
+      el.appendChild(inp);
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+export { TIME_JS };
+//# sourceMappingURL=time.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time.mjs","names":[],"sources":["../../../src/web-page/renderers/time.ts"],"sourcesContent":["export const TIME_JS = `\n  // ── Time Primitive ──\n  var _timeIntervals = [];\n  function renderAupTime(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-time\";\n    var p = node.props || {};\n    var mode = p.mode || \"display\";\n\n    if (mode === \"display\") {\n      el.classList.add(\"aup-time-display\");\n      var val = p.value || new Date().toISOString();\n      try {\n        var d = new Date(val);\n        var fmt = p.format || {};\n        el.textContent = new Intl.DateTimeFormat(p.locale || undefined, Object.keys(fmt).length ? fmt : { dateStyle: \"medium\", timeStyle: \"short\" }).format(d);\n      } catch(e) { el.textContent = String(val); }\n    } else if (mode === \"clock\") {\n      el.classList.add(\"aup-time-clock\");\n      function updateClock() {\n        var now = new Date();\n        el.textContent = now.toLocaleTimeString(p.locale || undefined);\n      }\n      updateClock();\n      var intv = setInterval(updateClock, 1000);\n      _timeIntervals.push(intv);\n    } else if (mode === \"timer\") {\n      el.classList.add(\"aup-time-timer\");\n      var startTime = Date.now();\n      function updateTimer() {\n        var elapsed = Math.floor((Date.now() - startTime) / 1000);\n        var h = Math.floor(elapsed / 3600);\n        var m = Math.floor((elapsed % 3600) / 60);\n        var s = elapsed % 60;\n        el.textContent = (h ? h + \":\" : \"\") + String(m).padStart(2, \"0\") + \":\" + String(s).padStart(2, \"0\");\n      }\n      updateTimer();\n      var tIntv = setInterval(updateTimer, 1000);\n      _timeIntervals.push(tIntv);\n    } else if (mode === \"countdown\") {\n      el.classList.add(\"aup-time-countdown\");\n      var target = p.target ? new Date(p.target).getTime() : Date.now();\n      function updateCountdown() {\n        var remaining = Math.max(0, Math.floor((target - Date.now()) / 1000));\n        var h = Math.floor(remaining / 3600);\n        var m = Math.floor((remaining % 3600) / 60);\n        var s = remaining % 60;\n        el.textContent = (h ? h + \":\" : \"\") + String(m).padStart(2, \"0\") + \":\" + String(s).padStart(2, \"0\");\n        if (remaining <= 0) el.textContent = p.expiredLabel || \"00:00\";\n      }\n      updateCountdown();\n      var cdIntv = setInterval(updateCountdown, 1000);\n      _timeIntervals.push(cdIntv);\n    } else if (mode === \"picker\") {\n      el.classList.add(\"aup-time-picker\");\n      var inp = document.createElement(\"input\");\n      inp.type = \"datetime-local\";\n      if (p.value) inp.value = p.value;\n      el.appendChild(inp);\n    }\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,UAAU"}

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

@@ -0,0 +1,20 @@
+
+//#region src/web-page/renderers/unknown.ts
+const UNKNOWN_JS = `
+  function renderAupUnknown(node) {
+    var el = document.createElement("div");
+    el.className = "aup-unknown";
+    el.textContent = "Unknown: " + _escapeHtml(String(node.type));
+    // Still render children (graceful degradation)
+    if (node.children) {
+      node.children.forEach(function(child) {
+        var childEl = renderAupNode(child);
+        if (childEl) el.appendChild(childEl);
+      });
+    }
+    return el;
+  }
+`;
+
+//#endregion
+exports.UNKNOWN_JS = UNKNOWN_JS;

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

@@ -0,0 +1,20 @@
+//#region src/web-page/renderers/unknown.ts
+const UNKNOWN_JS = `
+  function renderAupUnknown(node) {
+    var el = document.createElement("div");
+    el.className = "aup-unknown";
+    el.textContent = "Unknown: " + _escapeHtml(String(node.type));
+    // Still render children (graceful degradation)
+    if (node.children) {
+      node.children.forEach(function(child) {
+        var childEl = renderAupNode(child);
+        if (childEl) el.appendChild(childEl);
+      });
+    }
+    return el;
+  }
+`;
+
+//#endregion
+export { UNKNOWN_JS };
+//# sourceMappingURL=unknown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unknown.mjs","names":[],"sources":["../../../src/web-page/renderers/unknown.ts"],"sourcesContent":["export const UNKNOWN_JS = `\n  function renderAupUnknown(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-unknown\";\n    el.textContent = \"Unknown: \" + _escapeHtml(String(node.type));\n    // Still render children (graceful degradation)\n    if (node.children) {\n      node.children.forEach(function(child) {\n        var childEl = renderAupNode(child);\n        if (childEl) el.appendChild(childEl);\n      });\n    }\n    return el;\n  }\n`;\n"],"mappings":";AAAA,MAAa,aAAa"}

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

@@ -0,0 +1,161 @@
+
+//#region src/web-page/renderers/view.ts
+const VIEW_JS = `
+  function renderAupView(node) {
+    var el = document.createElement("div");
+    el.className = "aup-view";
+    var p = node.props || {};
+    // Layout: string (backward compat) or object (Spatial Intent v0.3)
+    var layout = p.layout;
+    var _layoutAliases = { horizontal: "row", vertical: "column" };
+    var layoutDir = typeof layout === "string" ? (_layoutAliases[layout] || layout) : (layout && (_layoutAliases[layout.direction] || layout.direction) || "");
+    if (typeof layout === "string") {
+      el.setAttribute("data-layout", layoutDir);
+    } else if (layout && typeof layout === "object") {
+      if (layoutDir) el.setAttribute("data-layout", layoutDir);
+      if (layout.align) el.setAttribute("data-align", layout.align);
+      if (layout.crossAlign) el.setAttribute("data-cross-align", layout.crossAlign);
+      if (layout.gap) el.setAttribute("data-gap", layout.gap);
+      if (layout.wrap) el.setAttribute("data-wrap", String(layout.wrap));
+      if (layout.gridMinWidth) el.style.setProperty("--grid-min-width", layout.gridMinWidth);
+      if (layout.overflow) el.setAttribute("data-overflow", layout.overflow);
+    }
+    if (p.mode) el.setAttribute("data-mode", p.mode);
+    if (p.role) el.setAttribute("data-role", p.role);
+    if (p.variant) el.setAttribute("data-variant", p.variant);
+    // Spatial Intent: sizing
+    var size = p.size;
+    if (size && typeof size === "object") {
+      if (size.width) el.setAttribute("data-width", size.width);
+      if (size.maxWidth) el.setAttribute("data-max-width", size.maxWidth);
+      if (size.height) el.setAttribute("data-height", size.height);
+      if (typeof size.flex === "number") el.style.flex = String(size.flex);
+    }
+    // ── Animate ──
+    if (p.animate && p.animate !== "none") {
+      el.setAttribute("data-animate", p.animate);
+      if (p.animateDelay) el.style.animationDelay = p.animateDelay + "ms";
+      if (p.animateDuration) el.style.animationDuration = p.animateDuration + "ms";
+    }
+    // ── Background ──
+    if (p.background) {
+      var bg = p.background;
+      if (typeof bg === "string") {
+        // Heuristic: URL if starts with http//, / or data:
+        if (/^(https?:\\/\\/|data:|\\/)/.test(bg)) {
+          el.style.backgroundImage = "url(" + bg + ")";
+          el.style.backgroundSize = "cover";
+          el.style.backgroundPosition = "center";
+        } else {
+          el.style.background = bg;
+        }
+      } else if (bg && typeof bg === "object") {
+        el.style.position = el.style.position || "relative";
+        if (bg.type === "gradient") {
+          el.style.background = bg.value;
+        } else if (bg.type === "image") {
+          el.style.backgroundImage = "url(" + (bg.src || bg.value || "") + ")";
+          el.style.backgroundSize = "cover";
+          el.style.backgroundPosition = "center";
+          if (typeof bg.opacity === "number") el.style.setProperty("--bg-opacity", String(bg.opacity));
+          if (bg.blur) el.style.setProperty("--bg-blur", bg.blur + "px");
+        } else if (bg.type === "video") {
+          var bgVid = document.createElement("video");
+          bgVid.className = "aup-bg-video";
+          var bgSrc = String(bg.src || bg.value || "");
+          if (bgSrc && !bgSrc.toLowerCase().startsWith("javascript:")) bgVid.src = bgSrc;
+          bgVid.autoplay = true;
+          bgVid.loop = bg.loop !== false;
+          bgVid.muted = bg.muted !== false;
+          bgVid.playsInline = true;
+          el.appendChild(bgVid);
+        }
+      }
+    }
+    // Stack layout: CSS grid with all children in same cell
+    if (layoutDir === "stack") {
+      el.style.display = "grid";
+    }
+    // Overlay theme: apply when overlay-grid has a theme prop
+    if (layoutDir === "overlay-grid" && p.theme) {
+      _applyOverlayTheme(el, p.theme);
+    }
+    // ── Tabs mode ──
+    if (p.mode === "tabs" && node.children && node.children.length > 0) {
+      var activeTab = (node.state && node.state.activeTab) || (node.children[0] && node.children[0].id) || "";
+      var tabBar = document.createElement("div");
+      tabBar.className = "aup-tab-bar";
+      var panels = [];
+      node.children.forEach(function(child, idx) {
+        var isActive = child.id === activeTab || (!activeTab && idx === 0);
+        var tab = document.createElement("button");
+        tab.className = "aup-tab";
+        tab.textContent = (child.props && child.props.label) || child.id || ("Tab " + idx);
+        tab.setAttribute("data-active", String(isActive));
+        tab.setAttribute("data-tab-id", child.id || "");
+        tab.onclick = function() {
+          tabBar.querySelectorAll(".aup-tab").forEach(function(t) { t.setAttribute("data-active", "false"); });
+          tab.setAttribute("data-active", "true");
+          panels.forEach(function(pnl) { pnl.setAttribute("data-active", String(pnl.getAttribute("data-tab-id") === (child.id || ""))); });
+          _fireAupEvent(node.id, "tab-change", { activeTab: child.id });
+        };
+        tabBar.appendChild(tab);
+        var panel = document.createElement("div");
+        panel.className = "aup-tab-panel";
+        panel.setAttribute("data-active", String(isActive));
+        panel.setAttribute("data-tab-id", child.id || "");
+        var childEl = renderAupNode(child);
+        if (childEl) panel.appendChild(childEl);
+        panels.push(panel);
+      });
+      el.appendChild(tabBar);
+      panels.forEach(function(pnl) { el.appendChild(pnl); });
+      return el;
+    }
+    // ── Collapsible panels (shell sidebar/inspector) ──
+    var isCollapsible = p.role === "sidebar" || p.role === "inspector" || p.collapsible;
+    if (node.state && node.state.collapsed != null) {
+      el.setAttribute("data-collapsed", String(!!node.state.collapsed));
+    }
+    if (isCollapsible) {
+      var toggleBtn = document.createElement("button");
+      toggleBtn.className = "aup-collapse-toggle";
+      toggleBtn.textContent = (node.state && node.state.collapsed) ? "\u25B6" : "\u25C0";
+      toggleBtn.onclick = function() {
+        var nowCollapsed = el.getAttribute("data-collapsed") === "true";
+        var next = !nowCollapsed;
+        el.setAttribute("data-collapsed", String(next));
+        toggleBtn.textContent = next ? "\u25B6" : "\u25C0";
+        _fireAupEvent(node.id, "toggle", { collapsed: next });
+      };
+      el.appendChild(toggleBtn);
+      var bodyWrap = document.createElement("div");
+      bodyWrap.className = "aup-view-body";
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) {
+            if (layoutDir === "stack") childEl.style.gridArea = "1 / 1";
+            bodyWrap.appendChild(childEl);
+          }
+        });
+      }
+      el.appendChild(bodyWrap);
+    } else if (node.children) {
+      var staggerMs = (layout && typeof layout === "object" && layout.stagger) ? (typeof layout.stagger === "number" ? layout.stagger : 60) : 0;
+      node.children.forEach(function(child, idx) {
+        var childEl = renderAupNode(child);
+        if (childEl) {
+          if (layoutDir === "stack") childEl.style.gridArea = "1 / 1";
+          if (staggerMs && idx > 0) childEl.style.animationDelay = (staggerMs * idx) + "ms";
+          el.appendChild(childEl);
+        }
+      });
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.VIEW_JS = VIEW_JS;

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

@@ -0,0 +1,161 @@
+//#region src/web-page/renderers/view.ts
+const VIEW_JS = `
+  function renderAupView(node) {
+    var el = document.createElement("div");
+    el.className = "aup-view";
+    var p = node.props || {};
+    // Layout: string (backward compat) or object (Spatial Intent v0.3)
+    var layout = p.layout;
+    var _layoutAliases = { horizontal: "row", vertical: "column" };
+    var layoutDir = typeof layout === "string" ? (_layoutAliases[layout] || layout) : (layout && (_layoutAliases[layout.direction] || layout.direction) || "");
+    if (typeof layout === "string") {
+      el.setAttribute("data-layout", layoutDir);
+    } else if (layout && typeof layout === "object") {
+      if (layoutDir) el.setAttribute("data-layout", layoutDir);
+      if (layout.align) el.setAttribute("data-align", layout.align);
+      if (layout.crossAlign) el.setAttribute("data-cross-align", layout.crossAlign);
+      if (layout.gap) el.setAttribute("data-gap", layout.gap);
+      if (layout.wrap) el.setAttribute("data-wrap", String(layout.wrap));
+      if (layout.gridMinWidth) el.style.setProperty("--grid-min-width", layout.gridMinWidth);
+      if (layout.overflow) el.setAttribute("data-overflow", layout.overflow);
+    }
+    if (p.mode) el.setAttribute("data-mode", p.mode);
+    if (p.role) el.setAttribute("data-role", p.role);
+    if (p.variant) el.setAttribute("data-variant", p.variant);
+    // Spatial Intent: sizing
+    var size = p.size;
+    if (size && typeof size === "object") {
+      if (size.width) el.setAttribute("data-width", size.width);
+      if (size.maxWidth) el.setAttribute("data-max-width", size.maxWidth);
+      if (size.height) el.setAttribute("data-height", size.height);
+      if (typeof size.flex === "number") el.style.flex = String(size.flex);
+    }
+    // ── Animate ──
+    if (p.animate && p.animate !== "none") {
+      el.setAttribute("data-animate", p.animate);
+      if (p.animateDelay) el.style.animationDelay = p.animateDelay + "ms";
+      if (p.animateDuration) el.style.animationDuration = p.animateDuration + "ms";
+    }
+    // ── Background ──
+    if (p.background) {
+      var bg = p.background;
+      if (typeof bg === "string") {
+        // Heuristic: URL if starts with http//, / or data:
+        if (/^(https?:\\/\\/|data:|\\/)/.test(bg)) {
+          el.style.backgroundImage = "url(" + bg + ")";
+          el.style.backgroundSize = "cover";
+          el.style.backgroundPosition = "center";
+        } else {
+          el.style.background = bg;
+        }
+      } else if (bg && typeof bg === "object") {
+        el.style.position = el.style.position || "relative";
+        if (bg.type === "gradient") {
+          el.style.background = bg.value;
+        } else if (bg.type === "image") {
+          el.style.backgroundImage = "url(" + (bg.src || bg.value || "") + ")";
+          el.style.backgroundSize = "cover";
+          el.style.backgroundPosition = "center";
+          if (typeof bg.opacity === "number") el.style.setProperty("--bg-opacity", String(bg.opacity));
+          if (bg.blur) el.style.setProperty("--bg-blur", bg.blur + "px");
+        } else if (bg.type === "video") {
+          var bgVid = document.createElement("video");
+          bgVid.className = "aup-bg-video";
+          var bgSrc = String(bg.src || bg.value || "");
+          if (bgSrc && !bgSrc.toLowerCase().startsWith("javascript:")) bgVid.src = bgSrc;
+          bgVid.autoplay = true;
+          bgVid.loop = bg.loop !== false;
+          bgVid.muted = bg.muted !== false;
+          bgVid.playsInline = true;
+          el.appendChild(bgVid);
+        }
+      }
+    }
+    // Stack layout: CSS grid with all children in same cell
+    if (layoutDir === "stack") {
+      el.style.display = "grid";
+    }
+    // Overlay theme: apply when overlay-grid has a theme prop
+    if (layoutDir === "overlay-grid" && p.theme) {
+      _applyOverlayTheme(el, p.theme);
+    }
+    // ── Tabs mode ──
+    if (p.mode === "tabs" && node.children && node.children.length > 0) {
+      var activeTab = (node.state && node.state.activeTab) || (node.children[0] && node.children[0].id) || "";
+      var tabBar = document.createElement("div");
+      tabBar.className = "aup-tab-bar";
+      var panels = [];
+      node.children.forEach(function(child, idx) {
+        var isActive = child.id === activeTab || (!activeTab && idx === 0);
+        var tab = document.createElement("button");
+        tab.className = "aup-tab";
+        tab.textContent = (child.props && child.props.label) || child.id || ("Tab " + idx);
+        tab.setAttribute("data-active", String(isActive));
+        tab.setAttribute("data-tab-id", child.id || "");
+        tab.onclick = function() {
+          tabBar.querySelectorAll(".aup-tab").forEach(function(t) { t.setAttribute("data-active", "false"); });
+          tab.setAttribute("data-active", "true");
+          panels.forEach(function(pnl) { pnl.setAttribute("data-active", String(pnl.getAttribute("data-tab-id") === (child.id || ""))); });
+          _fireAupEvent(node.id, "tab-change", { activeTab: child.id });
+        };
+        tabBar.appendChild(tab);
+        var panel = document.createElement("div");
+        panel.className = "aup-tab-panel";
+        panel.setAttribute("data-active", String(isActive));
+        panel.setAttribute("data-tab-id", child.id || "");
+        var childEl = renderAupNode(child);
+        if (childEl) panel.appendChild(childEl);
+        panels.push(panel);
+      });
+      el.appendChild(tabBar);
+      panels.forEach(function(pnl) { el.appendChild(pnl); });
+      return el;
+    }
+    // ── Collapsible panels (shell sidebar/inspector) ──
+    var isCollapsible = p.role === "sidebar" || p.role === "inspector" || p.collapsible;
+    if (node.state && node.state.collapsed != null) {
+      el.setAttribute("data-collapsed", String(!!node.state.collapsed));
+    }
+    if (isCollapsible) {
+      var toggleBtn = document.createElement("button");
+      toggleBtn.className = "aup-collapse-toggle";
+      toggleBtn.textContent = (node.state && node.state.collapsed) ? "\u25B6" : "\u25C0";
+      toggleBtn.onclick = function() {
+        var nowCollapsed = el.getAttribute("data-collapsed") === "true";
+        var next = !nowCollapsed;
+        el.setAttribute("data-collapsed", String(next));
+        toggleBtn.textContent = next ? "\u25B6" : "\u25C0";
+        _fireAupEvent(node.id, "toggle", { collapsed: next });
+      };
+      el.appendChild(toggleBtn);
+      var bodyWrap = document.createElement("div");
+      bodyWrap.className = "aup-view-body";
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) {
+            if (layoutDir === "stack") childEl.style.gridArea = "1 / 1";
+            bodyWrap.appendChild(childEl);
+          }
+        });
+      }
+      el.appendChild(bodyWrap);
+    } else if (node.children) {
+      var staggerMs = (layout && typeof layout === "object" && layout.stagger) ? (typeof layout.stagger === "number" ? layout.stagger : 60) : 0;
+      node.children.forEach(function(child, idx) {
+        var childEl = renderAupNode(child);
+        if (childEl) {
+          if (layoutDir === "stack") childEl.style.gridArea = "1 / 1";
+          if (staggerMs && idx > 0) childEl.style.animationDelay = (staggerMs * idx) + "ms";
+          el.appendChild(childEl);
+        }
+      });
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+export { VIEW_JS };
+//# sourceMappingURL=view.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.mjs","names":[],"sources":["../../../src/web-page/renderers/view.ts"],"sourcesContent":["export const VIEW_JS = `\n  function renderAupView(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-view\";\n    var p = node.props || {};\n    // Layout: string (backward compat) or object (Spatial Intent v0.3)\n    var layout = p.layout;\n    var _layoutAliases = { horizontal: \"row\", vertical: \"column\" };\n    var layoutDir = typeof layout === \"string\" ? (_layoutAliases[layout] || layout) : (layout && (_layoutAliases[layout.direction] || layout.direction) || \"\");\n    if (typeof layout === \"string\") {\n      el.setAttribute(\"data-layout\", layoutDir);\n    } else if (layout && typeof layout === \"object\") {\n      if (layoutDir) el.setAttribute(\"data-layout\", layoutDir);\n      if (layout.align) el.setAttribute(\"data-align\", layout.align);\n      if (layout.crossAlign) el.setAttribute(\"data-cross-align\", layout.crossAlign);\n      if (layout.gap) el.setAttribute(\"data-gap\", layout.gap);\n      if (layout.wrap) el.setAttribute(\"data-wrap\", String(layout.wrap));\n      if (layout.gridMinWidth) el.style.setProperty(\"--grid-min-width\", layout.gridMinWidth);\n      if (layout.overflow) el.setAttribute(\"data-overflow\", layout.overflow);\n    }\n    if (p.mode) el.setAttribute(\"data-mode\", p.mode);\n    if (p.role) el.setAttribute(\"data-role\", p.role);\n    if (p.variant) el.setAttribute(\"data-variant\", p.variant);\n    // Spatial Intent: sizing\n    var size = p.size;\n    if (size && typeof size === \"object\") {\n      if (size.width) el.setAttribute(\"data-width\", size.width);\n      if (size.maxWidth) el.setAttribute(\"data-max-width\", size.maxWidth);\n      if (size.height) el.setAttribute(\"data-height\", size.height);\n      if (typeof size.flex === \"number\") el.style.flex = String(size.flex);\n    }\n    // ── Animate ──\n    if (p.animate && p.animate !== \"none\") {\n      el.setAttribute(\"data-animate\", p.animate);\n      if (p.animateDelay) el.style.animationDelay = p.animateDelay + \"ms\";\n      if (p.animateDuration) el.style.animationDuration = p.animateDuration + \"ms\";\n    }\n    // ── Background ──\n    if (p.background) {\n      var bg = p.background;\n      if (typeof bg === \"string\") {\n        // Heuristic: URL if starts with http//, / or data:\n        if (/^(https?:\\\\/\\\\/|data:|\\\\/)/.test(bg)) {\n          el.style.backgroundImage = \"url(\" + bg + \")\";\n          el.style.backgroundSize = \"cover\";\n          el.style.backgroundPosition = \"center\";\n        } else {\n          el.style.background = bg;\n        }\n      } else if (bg && typeof bg === \"object\") {\n        el.style.position = el.style.position || \"relative\";\n        if (bg.type === \"gradient\") {\n          el.style.background = bg.value;\n        } else if (bg.type === \"image\") {\n          el.style.backgroundImage = \"url(\" + (bg.src || bg.value || \"\") + \")\";\n          el.style.backgroundSize = \"cover\";\n          el.style.backgroundPosition = \"center\";\n          if (typeof bg.opacity === \"number\") el.style.setProperty(\"--bg-opacity\", String(bg.opacity));\n          if (bg.blur) el.style.setProperty(\"--bg-blur\", bg.blur + \"px\");\n        } else if (bg.type === \"video\") {\n          var bgVid = document.createElement(\"video\");\n          bgVid.className = \"aup-bg-video\";\n          var bgSrc = String(bg.src || bg.value || \"\");\n          if (bgSrc && !bgSrc.toLowerCase().startsWith(\"javascript:\")) bgVid.src = bgSrc;\n          bgVid.autoplay = true;\n          bgVid.loop = bg.loop !== false;\n          bgVid.muted = bg.muted !== false;\n          bgVid.playsInline = true;\n          el.appendChild(bgVid);\n        }\n      }\n    }\n    // Stack layout: CSS grid with all children in same cell\n    if (layoutDir === \"stack\") {\n      el.style.display = \"grid\";\n    }\n    // Overlay theme: apply when overlay-grid has a theme prop\n    if (layoutDir === \"overlay-grid\" && p.theme) {\n      _applyOverlayTheme(el, p.theme);\n    }\n    // ── Tabs mode ──\n    if (p.mode === \"tabs\" && node.children && node.children.length > 0) {\n      var activeTab = (node.state && node.state.activeTab) || (node.children[0] && node.children[0].id) || \"\";\n      var tabBar = document.createElement(\"div\");\n      tabBar.className = \"aup-tab-bar\";\n      var panels = [];\n      node.children.forEach(function(child, idx) {\n        var isActive = child.id === activeTab || (!activeTab && idx === 0);\n        var tab = document.createElement(\"button\");\n        tab.className = \"aup-tab\";\n        tab.textContent = (child.props && child.props.label) || child.id || (\"Tab \" + idx);\n        tab.setAttribute(\"data-active\", String(isActive));\n        tab.setAttribute(\"data-tab-id\", child.id || \"\");\n        tab.onclick = function() {\n          tabBar.querySelectorAll(\".aup-tab\").forEach(function(t) { t.setAttribute(\"data-active\", \"false\"); });\n          tab.setAttribute(\"data-active\", \"true\");\n          panels.forEach(function(pnl) { pnl.setAttribute(\"data-active\", String(pnl.getAttribute(\"data-tab-id\") === (child.id || \"\"))); });\n          _fireAupEvent(node.id, \"tab-change\", { activeTab: child.id });\n        };\n        tabBar.appendChild(tab);\n        var panel = document.createElement(\"div\");\n        panel.className = \"aup-tab-panel\";\n        panel.setAttribute(\"data-active\", String(isActive));\n        panel.setAttribute(\"data-tab-id\", child.id || \"\");\n        var childEl = renderAupNode(child);\n        if (childEl) panel.appendChild(childEl);\n        panels.push(panel);\n      });\n      el.appendChild(tabBar);\n      panels.forEach(function(pnl) { el.appendChild(pnl); });\n      return el;\n    }\n    // ── Collapsible panels (shell sidebar/inspector) ──\n    var isCollapsible = p.role === \"sidebar\" || p.role === \"inspector\" || p.collapsible;\n    if (node.state && node.state.collapsed != null) {\n      el.setAttribute(\"data-collapsed\", String(!!node.state.collapsed));\n    }\n    if (isCollapsible) {\n      var toggleBtn = document.createElement(\"button\");\n      toggleBtn.className = \"aup-collapse-toggle\";\n      toggleBtn.textContent = (node.state && node.state.collapsed) ? \"\\u25B6\" : \"\\u25C0\";\n      toggleBtn.onclick = function() {\n        var nowCollapsed = el.getAttribute(\"data-collapsed\") === \"true\";\n        var next = !nowCollapsed;\n        el.setAttribute(\"data-collapsed\", String(next));\n        toggleBtn.textContent = next ? \"\\u25B6\" : \"\\u25C0\";\n        _fireAupEvent(node.id, \"toggle\", { collapsed: next });\n      };\n      el.appendChild(toggleBtn);\n      var bodyWrap = document.createElement(\"div\");\n      bodyWrap.className = \"aup-view-body\";\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) {\n            if (layoutDir === \"stack\") childEl.style.gridArea = \"1 / 1\";\n            bodyWrap.appendChild(childEl);\n          }\n        });\n      }\n      el.appendChild(bodyWrap);\n    } else if (node.children) {\n      var staggerMs = (layout && typeof layout === \"object\" && layout.stagger) ? (typeof layout.stagger === \"number\" ? layout.stagger : 60) : 0;\n      node.children.forEach(function(child, idx) {\n        var childEl = renderAupNode(child);\n        if (childEl) {\n          if (layoutDir === \"stack\") childEl.style.gridArea = \"1 / 1\";\n          if (staggerMs && idx > 0) childEl.style.animationDelay = (staggerMs * idx) + \"ms\";\n          el.appendChild(childEl);\n        }\n      });\n    }\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,UAAU"}