@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1,531 @@
+//#region src/web-page/renderers/overlay.ts
+const OVERLAY_JS = `
+  function renderAupOverlay(node) {
+    var el = document.createElement("div");
+    el.className = "aup-overlay";
+    var p = node.props || {};
+    var s = node.state || {};
+    var mode = p.mode || "dialog";
+
+    if (s.open) el.classList.add("open");
+
+    var _intentIcons = { info: "\u2139\uFE0F", success: "\u2705", error: "\u274C", warning: "\u26A0\uFE0F" };
+
+    if (mode === "toast") {
+      var toast = document.createElement("div");
+      toast.className = "aup-overlay-toast";
+      var intent = p.intent || "";
+      if (intent) toast.setAttribute("data-intent", intent);
+      // Position: top-right, top-center, top-left, bottom-right (default), bottom-center, bottom-left
+      var position = p.position || "bottom-right";
+      toast.setAttribute("data-position", position);
+
+      // Body row: icon + content + close
+      var body = document.createElement("div");
+      body.className = "aup-toast-body";
+
+      // Icon: intent-based default, custom emoji/name, or image URL
+      var _toastIcons = { info: "\u2139\uFE0F", success: "\u2705", error: "\u274C", warning: "\u26A0\uFE0F" };
+      var iconVal = p.icon !== undefined ? (_toastIcons[p.icon] || p.icon) : (intent ? _toastIcons[intent] || _toastIcons.info : null);
+      if (iconVal && iconVal !== "false" && iconVal !== false) {
+        var iconEl = document.createElement("div");
+        iconEl.className = "aup-toast-icon";
+        if (typeof iconVal === "string" && (iconVal.startsWith("http") || iconVal.startsWith("/"))) {
+          var img = document.createElement("img");
+          img.src = iconVal;
+          img.alt = "";
+          iconEl.appendChild(img);
+        } else {
+          iconEl.textContent = String(iconVal);
+        }
+        body.appendChild(iconEl);
+      }
+
+      // Content: title + message, or children
+      var contentEl = document.createElement("div");
+      contentEl.className = "aup-toast-content";
+      if (p.title) {
+        var titleEl = document.createElement("div");
+        titleEl.className = "aup-toast-title";
+        titleEl.textContent = _escapeHtml(String(p.title));
+        contentEl.appendChild(titleEl);
+      }
+      if (p.message) {
+        var msgEl = document.createElement("div");
+        msgEl.className = "aup-toast-message";
+        msgEl.textContent = _escapeHtml(String(p.message));
+        contentEl.appendChild(msgEl);
+      }
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) contentEl.appendChild(childEl);
+        });
+      }
+      body.appendChild(contentEl);
+
+      // Close button (always present unless dismissible: false AND duration > 0)
+      var dismissible = p.dismissible !== false && p.dismissible !== "false";
+      var duration = p.duration !== undefined ? parseInt(String(p.duration)) : 5000;
+      if (dismissible) {
+        var closeBtn = document.createElement("button");
+        closeBtn.className = "aup-toast-close";
+        closeBtn.textContent = "\u2715";
+        closeBtn.title = "Dismiss";
+        closeBtn.onclick = function() {
+          toast.classList.add("exiting");
+          setTimeout(function() { el.classList.remove("open"); }, 250);
+          _fireAupEvent(node.id, "dismiss", {});
+        };
+        body.appendChild(closeBtn);
+      }
+      toast.appendChild(body);
+
+      // Timer bar (auto-dismiss)
+      if (duration > 0 && s.open) {
+        var timerTrack = document.createElement("div");
+        timerTrack.className = "aup-toast-timer";
+        var timerBar = document.createElement("div");
+        timerBar.className = "aup-toast-timer-bar";
+        timerBar.style.width = "100%";
+        timerTrack.appendChild(timerBar);
+        toast.appendChild(timerTrack);
+        // Animate bar from 100% to 0%
+        requestAnimationFrame(function() {
+          timerBar.style.transitionDuration = duration + "ms";
+          timerBar.style.width = "0%";
+        });
+        setTimeout(function() {
+          toast.classList.add("exiting");
+          setTimeout(function() { el.classList.remove("open"); }, 250);
+        }, duration);
+      }
+      el.appendChild(toast);
+
+    } else if (mode === "drawer") {
+      var backdrop = document.createElement("div");
+      backdrop.className = "aup-overlay-backdrop";
+      el.appendChild(backdrop);
+      var drawer = document.createElement("div");
+      drawer.className = "aup-overlay-drawer " + (p.side === "left" ? "left" : "right");
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) drawer.appendChild(childEl);
+        });
+      }
+      el.appendChild(drawer);
+
+    } else if (mode === "alert" || mode === "confirm") {
+      var backdrop = document.createElement("div");
+      backdrop.className = "aup-overlay-backdrop";
+      el.appendChild(backdrop);
+      var box = document.createElement("div");
+      box.className = "aup-overlay-alert";
+      var intent = p.intent || "info";
+      // Icon
+      if (p.icon !== false) {
+        var icon = document.createElement("div");
+        icon.className = "aup-alert-icon";
+        icon.setAttribute("data-intent", intent);
+        icon.textContent = p.icon || _intentIcons[intent] || _intentIcons.info;
+        box.appendChild(icon);
+      }
+      if (p.title) {
+        var t = document.createElement("div");
+        t.className = "aup-alert-title";
+        t.textContent = _escapeHtml(String(p.title));
+        box.appendChild(t);
+      }
+      if (p.message) {
+        var m = document.createElement("div");
+        m.className = "aup-alert-message";
+        m.textContent = _escapeHtml(String(p.message));
+        box.appendChild(m);
+      }
+      // Children (optional extra content)
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) box.appendChild(childEl);
+        });
+      }
+      var acts = document.createElement("div");
+      acts.className = "aup-alert-actions";
+      if (mode === "confirm") {
+        var cancelBtn = document.createElement("button");
+        cancelBtn.className = "aup-alert-btn secondary";
+        cancelBtn.textContent = p.cancelLabel || "Cancel";
+        cancelBtn.onclick = function() {
+          el.classList.remove("open");
+          _fireAupEvent(node.id, "cancel", {});
+        };
+        acts.appendChild(cancelBtn);
+      }
+      var okBtn = document.createElement("button");
+      okBtn.className = "aup-alert-btn " + (intent === "error" && mode === "confirm" ? "danger" : "primary");
+      okBtn.textContent = p.confirmLabel || (mode === "confirm" ? "Confirm" : "OK");
+      okBtn.onclick = function() {
+        el.classList.remove("open");
+        _fireAupEvent(node.id, "confirm", {});
+      };
+      acts.appendChild(okBtn);
+      box.appendChild(acts);
+      el.appendChild(box);
+
+    } else if (mode === "hud") {
+      var backdrop = document.createElement("div");
+      backdrop.className = "aup-overlay-backdrop";
+      backdrop.style.background = "rgba(0,0,0,0.3)";
+      el.appendChild(backdrop);
+      var hud = document.createElement("div");
+      hud.className = "aup-overlay-hud";
+      // Icon or spinner
+      if (p.icon === "spinner" || !p.icon) {
+        var spinner = document.createElement("div");
+        spinner.className = "aup-hud-spinner";
+        hud.appendChild(spinner);
+      } else {
+        var ic = document.createElement("div");
+        ic.className = "aup-hud-icon";
+        ic.textContent = p.icon;
+        hud.appendChild(ic);
+      }
+      if (p.message) {
+        var msg = document.createElement("div");
+        msg.className = "aup-hud-message";
+        msg.textContent = _escapeHtml(String(p.message));
+        hud.appendChild(msg);
+      }
+      if (p.subtitle) {
+        var sub = document.createElement("div");
+        sub.className = "aup-hud-sub";
+        sub.textContent = _escapeHtml(String(p.subtitle));
+        hud.appendChild(sub);
+      }
+      if (typeof p.progress === "number") {
+        var bar = document.createElement("div");
+        bar.className = "aup-hud-progress";
+        var fill = document.createElement("div");
+        fill.className = "aup-hud-progress-bar";
+        fill.style.width = Math.max(0, Math.min(100, p.progress)) + "%";
+        bar.appendChild(fill);
+        hud.appendChild(bar);
+      }
+      el.appendChild(hud);
+
+    } else if (mode === "choice") {
+      var backdrop = document.createElement("div");
+      backdrop.className = "aup-overlay-backdrop";
+      el.appendChild(backdrop);
+      var box = document.createElement("div");
+      box.className = "aup-overlay-choice";
+
+      // Normalize steps: single-question → steps[0], multi-step → steps array
+      var steps = Array.isArray(p.steps) ? p.steps : [p];
+      var totalSteps = steps.length;
+      var currentStep = 0;
+      // Per-step answers: [ { selected: {idx: true}, other: "" }, ... ]
+      var answers = steps.map(function() { return { selected: {}, other: "" }; });
+
+      // Stepper dots (only for multi-step)
+      var stepperEl = null;
+      if (totalSteps > 1) {
+        stepperEl = document.createElement("div");
+        stepperEl.className = "aup-choice-stepper";
+        box.appendChild(stepperEl);
+      }
+
+      // Content container (swapped per step)
+      var bodyEl = document.createElement("div");
+      bodyEl.className = "aup-choice-step-body";
+      box.appendChild(bodyEl);
+
+      // Footer
+      var footer = document.createElement("div");
+      footer.className = "aup-choice-footer";
+      box.appendChild(footer);
+
+      function renderStep(stepIdx) {
+        var step = steps[stepIdx];
+        var multi = !!step.multiSelect;
+        var options = Array.isArray(step.options) ? step.options : [];
+        var ans = answers[stepIdx];
+
+        // Update stepper dots
+        if (stepperEl) {
+          stepperEl.innerHTML = "";
+          for (var di = 0; di < totalSteps; di++) {
+            var dot = document.createElement("div");
+            dot.className = "aup-choice-dot" + (di === stepIdx ? " active" : di < stepIdx ? " done" : "");
+            stepperEl.appendChild(dot);
+          }
+          var stepLabel = document.createElement("span");
+          stepLabel.className = "aup-choice-step-label";
+          stepLabel.textContent = (stepIdx + 1) + " / " + totalSteps;
+          stepperEl.appendChild(stepLabel);
+        }
+
+        // Rebuild body
+        bodyEl.innerHTML = "";
+        bodyEl.className = "aup-choice-step-body";
+        // Force re-trigger animation
+        void bodyEl.offsetWidth;
+        bodyEl.className = "aup-choice-step-body";
+
+        // Header
+        var hdr = document.createElement("div");
+        hdr.className = "aup-choice-header";
+        if (step.header) {
+          var tag = document.createElement("span");
+          tag.className = "aup-choice-tag";
+          tag.textContent = _escapeHtml(String(step.header));
+          hdr.appendChild(tag);
+        }
+        if (step.question || step.title) {
+          var q = document.createElement("div");
+          q.className = "aup-choice-question";
+          q.textContent = _escapeHtml(String(step.question || step.title));
+          hdr.appendChild(q);
+        }
+        if (step.hint) {
+          var h = document.createElement("div");
+          h.className = "aup-choice-hint";
+          h.textContent = _escapeHtml(String(step.hint));
+          hdr.appendChild(h);
+        }
+        bodyEl.appendChild(hdr);
+
+        // Options
+        var optionsDiv = document.createElement("div");
+        optionsDiv.className = "aup-choice-options";
+        options.forEach(function(opt, idx) {
+          var btn = document.createElement("button");
+          btn.className = "aup-choice-option" + (ans.selected[idx] ? " selected" : "");
+          var indicator = document.createElement("div");
+          indicator.className = multi ? "aup-choice-check" : "aup-choice-radio";
+          btn.appendChild(indicator);
+          var content = document.createElement("div");
+          var lbl = document.createElement("div");
+          lbl.className = "aup-choice-label";
+          lbl.textContent = _escapeHtml(String(opt.label || opt));
+          content.appendChild(lbl);
+          if (opt.description) {
+            var desc = document.createElement("div");
+            desc.className = "aup-choice-desc";
+            desc.textContent = _escapeHtml(String(opt.description));
+            content.appendChild(desc);
+          }
+          btn.appendChild(content);
+          btn.onclick = function() {
+            if (multi) {
+              ans.selected[idx] = !ans.selected[idx];
+              btn.classList.toggle("selected", !!ans.selected[idx]);
+            } else {
+              ans.selected = {};
+              ans.selected[idx] = true;
+              optionsDiv.querySelectorAll(".aup-choice-option").forEach(function(b) { b.classList.remove("selected"); });
+              btn.classList.add("selected");
+            }
+          };
+          optionsDiv.appendChild(btn);
+        });
+        bodyEl.appendChild(optionsDiv);
+
+        // "Other" free text
+        if (step.allowOther !== false) {
+          var otherDiv = document.createElement("div");
+          otherDiv.className = "aup-choice-other";
+          var otherInput = document.createElement("input");
+          otherInput.placeholder = step.otherPlaceholder || "Other...";
+          otherInput.value = ans.other || "";
+          otherInput.oninput = function() { ans.other = otherInput.value; };
+          otherDiv.appendChild(otherInput);
+          bodyEl.appendChild(otherDiv);
+        }
+
+        // Footer
+        footer.innerHTML = "";
+        if (p.cancelLabel !== false) {
+          var cancelBtn = document.createElement("button");
+          cancelBtn.className = "aup-alert-btn secondary";
+          cancelBtn.textContent = p.cancelLabel || "Skip";
+          cancelBtn.onclick = function() {
+            el.classList.remove("open");
+            _fireAupEvent(node.id, "cancel", {});
+          };
+          footer.appendChild(cancelBtn);
+        }
+        // Spacer pushes nav buttons to right
+        var spacer = document.createElement("div");
+        spacer.className = "spacer";
+        footer.appendChild(spacer);
+        // Back button (step > 0)
+        if (stepIdx > 0) {
+          var backBtn = document.createElement("button");
+          backBtn.className = "aup-alert-btn secondary";
+          backBtn.textContent = "Back";
+          backBtn.onclick = function() { currentStep--; renderStep(currentStep); };
+          footer.appendChild(backBtn);
+        }
+        // Next or Submit
+        var isLast = stepIdx === totalSteps - 1;
+        var nextBtn = document.createElement("button");
+        nextBtn.className = "aup-alert-btn primary";
+        nextBtn.textContent = isLast ? (p.submitLabel || "Submit") : "Next";
+        nextBtn.onclick = function() {
+          if (!isLast) {
+            currentStep++;
+            renderStep(currentStep);
+          } else {
+            // Collect all answers
+            var result = answers.map(function(a, si) {
+              var stepOpts = Array.isArray(steps[si].options) ? steps[si].options : [];
+              var picks = [];
+              stepOpts.forEach(function(opt, idx) {
+                if (a.selected[idx]) picks.push(opt.value || opt.label || opt);
+              });
+              return { selected: picks, other: a.other || null };
+            });
+            el.classList.remove("open");
+            // Single-step: send flat result, multi-step: send answers array
+            var data = totalSteps === 1 ? result[0] : { answers: result };
+            _fireAupEvent(node.id, "select", data);
+          }
+        };
+        footer.appendChild(nextBtn);
+      }
+
+      // Multi-step: measure all steps offscreen, lock body to tallest
+      if (totalSteps > 1) {
+        // Render into a hidden clone to measure without flicker
+        var measurer = document.createElement("div");
+        measurer.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;left:-9999px;top:0;";
+        measurer.className = "aup-overlay-choice";
+        document.body.appendChild(measurer);
+        var measureBody = document.createElement("div");
+        measureBody.className = "aup-choice-step-body";
+        measurer.appendChild(measureBody);
+        var maxH = 0;
+        for (var si = 0; si < totalSteps; si++) {
+          var mStep = steps[si];
+          measureBody.innerHTML = "";
+          // Header
+          var mHdr = document.createElement("div");
+          mHdr.className = "aup-choice-header";
+          if (mStep.header) { var mt = document.createElement("span"); mt.className = "aup-choice-tag"; mt.textContent = String(mStep.header); mHdr.appendChild(mt); }
+          if (mStep.question || mStep.title) { var mq = document.createElement("div"); mq.className = "aup-choice-question"; mq.textContent = String(mStep.question || mStep.title); mHdr.appendChild(mq); }
+          if (mStep.hint) { var mh = document.createElement("div"); mh.className = "aup-choice-hint"; mh.textContent = String(mStep.hint); mHdr.appendChild(mh); }
+          measureBody.appendChild(mHdr);
+          // Options
+          var mOpts = document.createElement("div"); mOpts.className = "aup-choice-options";
+          (Array.isArray(mStep.options) ? mStep.options : []).forEach(function(opt) {
+            var mb = document.createElement("button"); mb.className = "aup-choice-option";
+            var mi = document.createElement("div"); mi.className = "aup-choice-radio"; mb.appendChild(mi);
+            var mc = document.createElement("div");
+            var ml = document.createElement("div"); ml.className = "aup-choice-label"; ml.textContent = String(opt.label || opt); mc.appendChild(ml);
+            if (opt.description) { var md = document.createElement("div"); md.className = "aup-choice-desc"; md.textContent = String(opt.description); mc.appendChild(md); }
+            mb.appendChild(mc); mOpts.appendChild(mb);
+          });
+          measureBody.appendChild(mOpts);
+          // Other
+          if (mStep.allowOther !== false) { var mo = document.createElement("div"); mo.className = "aup-choice-other"; var moI = document.createElement("input"); mo.appendChild(moI); measureBody.appendChild(mo); }
+          var h = measureBody.offsetHeight;
+          if (h > maxH) maxH = h;
+        }
+        document.body.removeChild(measurer);
+        bodyEl.style.minHeight = maxH + "px";
+      }
+      renderStep(0);
+      el.appendChild(box);
+
+    } else if (mode === "popover") {
+      var popover = document.createElement("div");
+      popover.className = "aup-overlay-popover";
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) popover.appendChild(childEl);
+        });
+      }
+      el.appendChild(popover);
+      // Position relative to anchor after DOM insertion
+      if (s.open && p.anchor) {
+        requestAnimationFrame(function() {
+          var anchor = document.querySelector('[data-aup-id="' + p.anchor + '"]');
+          if (!anchor) return;
+          var r = anchor.getBoundingClientRect();
+          var pos = p.position || "bottom";
+          popover.style.position = "fixed";
+          popover.style.zIndex = "9999";
+          if (pos === "bottom" || pos === "bottom-start") {
+            popover.style.left = r.left + "px";
+            popover.style.top = (r.bottom + 4) + "px";
+          } else if (pos === "top" || pos === "top-start") {
+            popover.style.left = r.left + "px";
+            popover.style.bottom = (window.innerHeight - r.top + 4) + "px";
+          } else if (pos === "right") {
+            popover.style.left = (r.right + 4) + "px";
+            popover.style.top = r.top + "px";
+          } else if (pos === "left") {
+            popover.style.right = (window.innerWidth - r.left + 4) + "px";
+            popover.style.top = r.top + "px";
+          } else {
+            popover.style.left = r.left + "px";
+            popover.style.top = (r.bottom + 4) + "px";
+          }
+        });
+      }
+      // Light dismiss: click outside or Escape
+      if (s.open) {
+        var _popDismiss = function(e) {
+          if (!popover.contains(e.target)) {
+            el.classList.remove("open");
+            document.removeEventListener("mousedown", _popDismiss);
+            document.removeEventListener("keydown", _popEsc);
+            _fireAupEvent(node.id, "dismiss", {});
+          }
+        };
+        var _popEsc = function(e) {
+          if (e.key === "Escape") {
+            el.classList.remove("open");
+            document.removeEventListener("mousedown", _popDismiss);
+            document.removeEventListener("keydown", _popEsc);
+            _fireAupEvent(node.id, "dismiss", {});
+          }
+        };
+        setTimeout(function() {
+          document.addEventListener("mousedown", _popDismiss);
+          document.addEventListener("keydown", _popEsc);
+        }, 0);
+      }
+
+    } else {
+      // dialog (default)
+      var backdrop = document.createElement("div");
+      backdrop.className = "aup-overlay-backdrop";
+      el.appendChild(backdrop);
+      var dialog = document.createElement("div");
+      dialog.className = "aup-overlay-dialog";
+      if (p.title) {
+        var title = document.createElement("div");
+        title.className = "aup-overlay-dialog-title";
+        title.textContent = _escapeHtml(String(p.title));
+        dialog.appendChild(title);
+      }
+      if (node.children) {
+        node.children.forEach(function(child) {
+          var childEl = renderAupNode(child);
+          if (childEl) dialog.appendChild(childEl);
+        });
+      }
+      el.appendChild(dialog);
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+export { OVERLAY_JS };
+//# sourceMappingURL=overlay.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.mjs","names":[],"sources":["../../../src/web-page/renderers/overlay.ts"],"sourcesContent":["export const OVERLAY_JS = `\n  function renderAupOverlay(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-overlay\";\n    var p = node.props || {};\n    var s = node.state || {};\n    var mode = p.mode || \"dialog\";\n\n    if (s.open) el.classList.add(\"open\");\n\n    var _intentIcons = { info: \"\\u2139\\uFE0F\", success: \"\\u2705\", error: \"\\u274C\", warning: \"\\u26A0\\uFE0F\" };\n\n    if (mode === \"toast\") {\n      var toast = document.createElement(\"div\");\n      toast.className = \"aup-overlay-toast\";\n      var intent = p.intent || \"\";\n      if (intent) toast.setAttribute(\"data-intent\", intent);\n      // Position: top-right, top-center, top-left, bottom-right (default), bottom-center, bottom-left\n      var position = p.position || \"bottom-right\";\n      toast.setAttribute(\"data-position\", position);\n\n      // Body row: icon + content + close\n      var body = document.createElement(\"div\");\n      body.className = \"aup-toast-body\";\n\n      // Icon: intent-based default, custom emoji/name, or image URL\n      var _toastIcons = { info: \"\\u2139\\uFE0F\", success: \"\\u2705\", error: \"\\u274C\", warning: \"\\u26A0\\uFE0F\" };\n      var iconVal = p.icon !== undefined ? (_toastIcons[p.icon] || p.icon) : (intent ? _toastIcons[intent] || _toastIcons.info : null);\n      if (iconVal && iconVal !== \"false\" && iconVal !== false) {\n        var iconEl = document.createElement(\"div\");\n        iconEl.className = \"aup-toast-icon\";\n        if (typeof iconVal === \"string\" && (iconVal.startsWith(\"http\") || iconVal.startsWith(\"/\"))) {\n          var img = document.createElement(\"img\");\n          img.src = iconVal;\n          img.alt = \"\";\n          iconEl.appendChild(img);\n        } else {\n          iconEl.textContent = String(iconVal);\n        }\n        body.appendChild(iconEl);\n      }\n\n      // Content: title + message, or children\n      var contentEl = document.createElement(\"div\");\n      contentEl.className = \"aup-toast-content\";\n      if (p.title) {\n        var titleEl = document.createElement(\"div\");\n        titleEl.className = \"aup-toast-title\";\n        titleEl.textContent = _escapeHtml(String(p.title));\n        contentEl.appendChild(titleEl);\n      }\n      if (p.message) {\n        var msgEl = document.createElement(\"div\");\n        msgEl.className = \"aup-toast-message\";\n        msgEl.textContent = _escapeHtml(String(p.message));\n        contentEl.appendChild(msgEl);\n      }\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) contentEl.appendChild(childEl);\n        });\n      }\n      body.appendChild(contentEl);\n\n      // Close button (always present unless dismissible: false AND duration > 0)\n      var dismissible = p.dismissible !== false && p.dismissible !== \"false\";\n      var duration = p.duration !== undefined ? parseInt(String(p.duration)) : 5000;\n      if (dismissible) {\n        var closeBtn = document.createElement(\"button\");\n        closeBtn.className = \"aup-toast-close\";\n        closeBtn.textContent = \"\\u2715\";\n        closeBtn.title = \"Dismiss\";\n        closeBtn.onclick = function() {\n          toast.classList.add(\"exiting\");\n          setTimeout(function() { el.classList.remove(\"open\"); }, 250);\n          _fireAupEvent(node.id, \"dismiss\", {});\n        };\n        body.appendChild(closeBtn);\n      }\n      toast.appendChild(body);\n\n      // Timer bar (auto-dismiss)\n      if (duration > 0 && s.open) {\n        var timerTrack = document.createElement(\"div\");\n        timerTrack.className = \"aup-toast-timer\";\n        var timerBar = document.createElement(\"div\");\n        timerBar.className = \"aup-toast-timer-bar\";\n        timerBar.style.width = \"100%\";\n        timerTrack.appendChild(timerBar);\n        toast.appendChild(timerTrack);\n        // Animate bar from 100% to 0%\n        requestAnimationFrame(function() {\n          timerBar.style.transitionDuration = duration + \"ms\";\n          timerBar.style.width = \"0%\";\n        });\n        setTimeout(function() {\n          toast.classList.add(\"exiting\");\n          setTimeout(function() { el.classList.remove(\"open\"); }, 250);\n        }, duration);\n      }\n      el.appendChild(toast);\n\n    } else if (mode === \"drawer\") {\n      var backdrop = document.createElement(\"div\");\n      backdrop.className = \"aup-overlay-backdrop\";\n      el.appendChild(backdrop);\n      var drawer = document.createElement(\"div\");\n      drawer.className = \"aup-overlay-drawer \" + (p.side === \"left\" ? \"left\" : \"right\");\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) drawer.appendChild(childEl);\n        });\n      }\n      el.appendChild(drawer);\n\n    } else if (mode === \"alert\" || mode === \"confirm\") {\n      var backdrop = document.createElement(\"div\");\n      backdrop.className = \"aup-overlay-backdrop\";\n      el.appendChild(backdrop);\n      var box = document.createElement(\"div\");\n      box.className = \"aup-overlay-alert\";\n      var intent = p.intent || \"info\";\n      // Icon\n      if (p.icon !== false) {\n        var icon = document.createElement(\"div\");\n        icon.className = \"aup-alert-icon\";\n        icon.setAttribute(\"data-intent\", intent);\n        icon.textContent = p.icon || _intentIcons[intent] || _intentIcons.info;\n        box.appendChild(icon);\n      }\n      if (p.title) {\n        var t = document.createElement(\"div\");\n        t.className = \"aup-alert-title\";\n        t.textContent = _escapeHtml(String(p.title));\n        box.appendChild(t);\n      }\n      if (p.message) {\n        var m = document.createElement(\"div\");\n        m.className = \"aup-alert-message\";\n        m.textContent = _escapeHtml(String(p.message));\n        box.appendChild(m);\n      }\n      // Children (optional extra content)\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) box.appendChild(childEl);\n        });\n      }\n      var acts = document.createElement(\"div\");\n      acts.className = \"aup-alert-actions\";\n      if (mode === \"confirm\") {\n        var cancelBtn = document.createElement(\"button\");\n        cancelBtn.className = \"aup-alert-btn secondary\";\n        cancelBtn.textContent = p.cancelLabel || \"Cancel\";\n        cancelBtn.onclick = function() {\n          el.classList.remove(\"open\");\n          _fireAupEvent(node.id, \"cancel\", {});\n        };\n        acts.appendChild(cancelBtn);\n      }\n      var okBtn = document.createElement(\"button\");\n      okBtn.className = \"aup-alert-btn \" + (intent === \"error\" && mode === \"confirm\" ? \"danger\" : \"primary\");\n      okBtn.textContent = p.confirmLabel || (mode === \"confirm\" ? \"Confirm\" : \"OK\");\n      okBtn.onclick = function() {\n        el.classList.remove(\"open\");\n        _fireAupEvent(node.id, \"confirm\", {});\n      };\n      acts.appendChild(okBtn);\n      box.appendChild(acts);\n      el.appendChild(box);\n\n    } else if (mode === \"hud\") {\n      var backdrop = document.createElement(\"div\");\n      backdrop.className = \"aup-overlay-backdrop\";\n      backdrop.style.background = \"rgba(0,0,0,0.3)\";\n      el.appendChild(backdrop);\n      var hud = document.createElement(\"div\");\n      hud.className = \"aup-overlay-hud\";\n      // Icon or spinner\n      if (p.icon === \"spinner\" || !p.icon) {\n        var spinner = document.createElement(\"div\");\n        spinner.className = \"aup-hud-spinner\";\n        hud.appendChild(spinner);\n      } else {\n        var ic = document.createElement(\"div\");\n        ic.className = \"aup-hud-icon\";\n        ic.textContent = p.icon;\n        hud.appendChild(ic);\n      }\n      if (p.message) {\n        var msg = document.createElement(\"div\");\n        msg.className = \"aup-hud-message\";\n        msg.textContent = _escapeHtml(String(p.message));\n        hud.appendChild(msg);\n      }\n      if (p.subtitle) {\n        var sub = document.createElement(\"div\");\n        sub.className = \"aup-hud-sub\";\n        sub.textContent = _escapeHtml(String(p.subtitle));\n        hud.appendChild(sub);\n      }\n      if (typeof p.progress === \"number\") {\n        var bar = document.createElement(\"div\");\n        bar.className = \"aup-hud-progress\";\n        var fill = document.createElement(\"div\");\n        fill.className = \"aup-hud-progress-bar\";\n        fill.style.width = Math.max(0, Math.min(100, p.progress)) + \"%\";\n        bar.appendChild(fill);\n        hud.appendChild(bar);\n      }\n      el.appendChild(hud);\n\n    } else if (mode === \"choice\") {\n      var backdrop = document.createElement(\"div\");\n      backdrop.className = \"aup-overlay-backdrop\";\n      el.appendChild(backdrop);\n      var box = document.createElement(\"div\");\n      box.className = \"aup-overlay-choice\";\n\n      // Normalize steps: single-question → steps[0], multi-step → steps array\n      var steps = Array.isArray(p.steps) ? p.steps : [p];\n      var totalSteps = steps.length;\n      var currentStep = 0;\n      // Per-step answers: [ { selected: {idx: true}, other: \"\" }, ... ]\n      var answers = steps.map(function() { return { selected: {}, other: \"\" }; });\n\n      // Stepper dots (only for multi-step)\n      var stepperEl = null;\n      if (totalSteps > 1) {\n        stepperEl = document.createElement(\"div\");\n        stepperEl.className = \"aup-choice-stepper\";\n        box.appendChild(stepperEl);\n      }\n\n      // Content container (swapped per step)\n      var bodyEl = document.createElement(\"div\");\n      bodyEl.className = \"aup-choice-step-body\";\n      box.appendChild(bodyEl);\n\n      // Footer\n      var footer = document.createElement(\"div\");\n      footer.className = \"aup-choice-footer\";\n      box.appendChild(footer);\n\n      function renderStep(stepIdx) {\n        var step = steps[stepIdx];\n        var multi = !!step.multiSelect;\n        var options = Array.isArray(step.options) ? step.options : [];\n        var ans = answers[stepIdx];\n\n        // Update stepper dots\n        if (stepperEl) {\n          stepperEl.innerHTML = \"\";\n          for (var di = 0; di < totalSteps; di++) {\n            var dot = document.createElement(\"div\");\n            dot.className = \"aup-choice-dot\" + (di === stepIdx ? \" active\" : di < stepIdx ? \" done\" : \"\");\n            stepperEl.appendChild(dot);\n          }\n          var stepLabel = document.createElement(\"span\");\n          stepLabel.className = \"aup-choice-step-label\";\n          stepLabel.textContent = (stepIdx + 1) + \" / \" + totalSteps;\n          stepperEl.appendChild(stepLabel);\n        }\n\n        // Rebuild body\n        bodyEl.innerHTML = \"\";\n        bodyEl.className = \"aup-choice-step-body\";\n        // Force re-trigger animation\n        void bodyEl.offsetWidth;\n        bodyEl.className = \"aup-choice-step-body\";\n\n        // Header\n        var hdr = document.createElement(\"div\");\n        hdr.className = \"aup-choice-header\";\n        if (step.header) {\n          var tag = document.createElement(\"span\");\n          tag.className = \"aup-choice-tag\";\n          tag.textContent = _escapeHtml(String(step.header));\n          hdr.appendChild(tag);\n        }\n        if (step.question || step.title) {\n          var q = document.createElement(\"div\");\n          q.className = \"aup-choice-question\";\n          q.textContent = _escapeHtml(String(step.question || step.title));\n          hdr.appendChild(q);\n        }\n        if (step.hint) {\n          var h = document.createElement(\"div\");\n          h.className = \"aup-choice-hint\";\n          h.textContent = _escapeHtml(String(step.hint));\n          hdr.appendChild(h);\n        }\n        bodyEl.appendChild(hdr);\n\n        // Options\n        var optionsDiv = document.createElement(\"div\");\n        optionsDiv.className = \"aup-choice-options\";\n        options.forEach(function(opt, idx) {\n          var btn = document.createElement(\"button\");\n          btn.className = \"aup-choice-option\" + (ans.selected[idx] ? \" selected\" : \"\");\n          var indicator = document.createElement(\"div\");\n          indicator.className = multi ? \"aup-choice-check\" : \"aup-choice-radio\";\n          btn.appendChild(indicator);\n          var content = document.createElement(\"div\");\n          var lbl = document.createElement(\"div\");\n          lbl.className = \"aup-choice-label\";\n          lbl.textContent = _escapeHtml(String(opt.label || opt));\n          content.appendChild(lbl);\n          if (opt.description) {\n            var desc = document.createElement(\"div\");\n            desc.className = \"aup-choice-desc\";\n            desc.textContent = _escapeHtml(String(opt.description));\n            content.appendChild(desc);\n          }\n          btn.appendChild(content);\n          btn.onclick = function() {\n            if (multi) {\n              ans.selected[idx] = !ans.selected[idx];\n              btn.classList.toggle(\"selected\", !!ans.selected[idx]);\n            } else {\n              ans.selected = {};\n              ans.selected[idx] = true;\n              optionsDiv.querySelectorAll(\".aup-choice-option\").forEach(function(b) { b.classList.remove(\"selected\"); });\n              btn.classList.add(\"selected\");\n            }\n          };\n          optionsDiv.appendChild(btn);\n        });\n        bodyEl.appendChild(optionsDiv);\n\n        // \"Other\" free text\n        if (step.allowOther !== false) {\n          var otherDiv = document.createElement(\"div\");\n          otherDiv.className = \"aup-choice-other\";\n          var otherInput = document.createElement(\"input\");\n          otherInput.placeholder = step.otherPlaceholder || \"Other...\";\n          otherInput.value = ans.other || \"\";\n          otherInput.oninput = function() { ans.other = otherInput.value; };\n          otherDiv.appendChild(otherInput);\n          bodyEl.appendChild(otherDiv);\n        }\n\n        // Footer\n        footer.innerHTML = \"\";\n        if (p.cancelLabel !== false) {\n          var cancelBtn = document.createElement(\"button\");\n          cancelBtn.className = \"aup-alert-btn secondary\";\n          cancelBtn.textContent = p.cancelLabel || \"Skip\";\n          cancelBtn.onclick = function() {\n            el.classList.remove(\"open\");\n            _fireAupEvent(node.id, \"cancel\", {});\n          };\n          footer.appendChild(cancelBtn);\n        }\n        // Spacer pushes nav buttons to right\n        var spacer = document.createElement(\"div\");\n        spacer.className = \"spacer\";\n        footer.appendChild(spacer);\n        // Back button (step > 0)\n        if (stepIdx > 0) {\n          var backBtn = document.createElement(\"button\");\n          backBtn.className = \"aup-alert-btn secondary\";\n          backBtn.textContent = \"Back\";\n          backBtn.onclick = function() { currentStep--; renderStep(currentStep); };\n          footer.appendChild(backBtn);\n        }\n        // Next or Submit\n        var isLast = stepIdx === totalSteps - 1;\n        var nextBtn = document.createElement(\"button\");\n        nextBtn.className = \"aup-alert-btn primary\";\n        nextBtn.textContent = isLast ? (p.submitLabel || \"Submit\") : \"Next\";\n        nextBtn.onclick = function() {\n          if (!isLast) {\n            currentStep++;\n            renderStep(currentStep);\n          } else {\n            // Collect all answers\n            var result = answers.map(function(a, si) {\n              var stepOpts = Array.isArray(steps[si].options) ? steps[si].options : [];\n              var picks = [];\n              stepOpts.forEach(function(opt, idx) {\n                if (a.selected[idx]) picks.push(opt.value || opt.label || opt);\n              });\n              return { selected: picks, other: a.other || null };\n            });\n            el.classList.remove(\"open\");\n            // Single-step: send flat result, multi-step: send answers array\n            var data = totalSteps === 1 ? result[0] : { answers: result };\n            _fireAupEvent(node.id, \"select\", data);\n          }\n        };\n        footer.appendChild(nextBtn);\n      }\n\n      // Multi-step: measure all steps offscreen, lock body to tallest\n      if (totalSteps > 1) {\n        // Render into a hidden clone to measure without flicker\n        var measurer = document.createElement(\"div\");\n        measurer.style.cssText = \"position:absolute;visibility:hidden;pointer-events:none;left:-9999px;top:0;\";\n        measurer.className = \"aup-overlay-choice\";\n        document.body.appendChild(measurer);\n        var measureBody = document.createElement(\"div\");\n        measureBody.className = \"aup-choice-step-body\";\n        measurer.appendChild(measureBody);\n        var maxH = 0;\n        for (var si = 0; si < totalSteps; si++) {\n          var mStep = steps[si];\n          measureBody.innerHTML = \"\";\n          // Header\n          var mHdr = document.createElement(\"div\");\n          mHdr.className = \"aup-choice-header\";\n          if (mStep.header) { var mt = document.createElement(\"span\"); mt.className = \"aup-choice-tag\"; mt.textContent = String(mStep.header); mHdr.appendChild(mt); }\n          if (mStep.question || mStep.title) { var mq = document.createElement(\"div\"); mq.className = \"aup-choice-question\"; mq.textContent = String(mStep.question || mStep.title); mHdr.appendChild(mq); }\n          if (mStep.hint) { var mh = document.createElement(\"div\"); mh.className = \"aup-choice-hint\"; mh.textContent = String(mStep.hint); mHdr.appendChild(mh); }\n          measureBody.appendChild(mHdr);\n          // Options\n          var mOpts = document.createElement(\"div\"); mOpts.className = \"aup-choice-options\";\n          (Array.isArray(mStep.options) ? mStep.options : []).forEach(function(opt) {\n            var mb = document.createElement(\"button\"); mb.className = \"aup-choice-option\";\n            var mi = document.createElement(\"div\"); mi.className = \"aup-choice-radio\"; mb.appendChild(mi);\n            var mc = document.createElement(\"div\");\n            var ml = document.createElement(\"div\"); ml.className = \"aup-choice-label\"; ml.textContent = String(opt.label || opt); mc.appendChild(ml);\n            if (opt.description) { var md = document.createElement(\"div\"); md.className = \"aup-choice-desc\"; md.textContent = String(opt.description); mc.appendChild(md); }\n            mb.appendChild(mc); mOpts.appendChild(mb);\n          });\n          measureBody.appendChild(mOpts);\n          // Other\n          if (mStep.allowOther !== false) { var mo = document.createElement(\"div\"); mo.className = \"aup-choice-other\"; var moI = document.createElement(\"input\"); mo.appendChild(moI); measureBody.appendChild(mo); }\n          var h = measureBody.offsetHeight;\n          if (h > maxH) maxH = h;\n        }\n        document.body.removeChild(measurer);\n        bodyEl.style.minHeight = maxH + \"px\";\n      }\n      renderStep(0);\n      el.appendChild(box);\n\n    } else if (mode === \"popover\") {\n      var popover = document.createElement(\"div\");\n      popover.className = \"aup-overlay-popover\";\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) popover.appendChild(childEl);\n        });\n      }\n      el.appendChild(popover);\n      // Position relative to anchor after DOM insertion\n      if (s.open && p.anchor) {\n        requestAnimationFrame(function() {\n          var anchor = document.querySelector('[data-aup-id=\"' + p.anchor + '\"]');\n          if (!anchor) return;\n          var r = anchor.getBoundingClientRect();\n          var pos = p.position || \"bottom\";\n          popover.style.position = \"fixed\";\n          popover.style.zIndex = \"9999\";\n          if (pos === \"bottom\" || pos === \"bottom-start\") {\n            popover.style.left = r.left + \"px\";\n            popover.style.top = (r.bottom + 4) + \"px\";\n          } else if (pos === \"top\" || pos === \"top-start\") {\n            popover.style.left = r.left + \"px\";\n            popover.style.bottom = (window.innerHeight - r.top + 4) + \"px\";\n          } else if (pos === \"right\") {\n            popover.style.left = (r.right + 4) + \"px\";\n            popover.style.top = r.top + \"px\";\n          } else if (pos === \"left\") {\n            popover.style.right = (window.innerWidth - r.left + 4) + \"px\";\n            popover.style.top = r.top + \"px\";\n          } else {\n            popover.style.left = r.left + \"px\";\n            popover.style.top = (r.bottom + 4) + \"px\";\n          }\n        });\n      }\n      // Light dismiss: click outside or Escape\n      if (s.open) {\n        var _popDismiss = function(e) {\n          if (!popover.contains(e.target)) {\n            el.classList.remove(\"open\");\n            document.removeEventListener(\"mousedown\", _popDismiss);\n            document.removeEventListener(\"keydown\", _popEsc);\n            _fireAupEvent(node.id, \"dismiss\", {});\n          }\n        };\n        var _popEsc = function(e) {\n          if (e.key === \"Escape\") {\n            el.classList.remove(\"open\");\n            document.removeEventListener(\"mousedown\", _popDismiss);\n            document.removeEventListener(\"keydown\", _popEsc);\n            _fireAupEvent(node.id, \"dismiss\", {});\n          }\n        };\n        setTimeout(function() {\n          document.addEventListener(\"mousedown\", _popDismiss);\n          document.addEventListener(\"keydown\", _popEsc);\n        }, 0);\n      }\n\n    } else {\n      // dialog (default)\n      var backdrop = document.createElement(\"div\");\n      backdrop.className = \"aup-overlay-backdrop\";\n      el.appendChild(backdrop);\n      var dialog = document.createElement(\"div\");\n      dialog.className = \"aup-overlay-dialog\";\n      if (p.title) {\n        var title = document.createElement(\"div\");\n        title.className = \"aup-overlay-dialog-title\";\n        title.textContent = _escapeHtml(String(p.title));\n        dialog.appendChild(title);\n      }\n      if (node.children) {\n        node.children.forEach(function(child) {\n          var childEl = renderAupNode(child);\n          if (childEl) dialog.appendChild(childEl);\n        });\n      }\n      el.appendChild(dialog);\n    }\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,aAAa"}

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

@@ -0,0 +1,74 @@
+
+//#region src/web-page/renderers/table.ts
+const TABLE_JS = `
+  function renderAupTable(node) {
+    var p = node.props || {};
+    var columns = Array.isArray(p.columns) ? p.columns : [];
+    var rows = Array.isArray(p.rows) ? p.rows : [];
+
+    var table = document.createElement("table");
+    table.className = "aup-table";
+
+    // Header
+    var thead = document.createElement("thead");
+    var headerRow = document.createElement("tr");
+    for (var c = 0; c < columns.length; c++) {
+      var th = document.createElement("th");
+      var col = columns[c];
+      th.textContent = _escapeHtml(String(col.label || col.key || ""));
+      if (col.align) th.setAttribute("data-align", col.align);
+      // Sort click event
+      (function(colKey) {
+        th.onclick = function() {
+          if (node.events && node.events.sort) {
+            _fireAupEvent(node.id, "sort", {});
+          }
+        };
+      })(col.key);
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Body
+    var tbody = document.createElement("tbody");
+    if (rows.length === 0) {
+      var emptyRow = document.createElement("tr");
+      var emptyCell = document.createElement("td");
+      emptyCell.className = "aup-table-empty";
+      emptyCell.colSpan = columns.length || 1;
+      emptyCell.textContent = "No data";
+      emptyRow.appendChild(emptyCell);
+      tbody.appendChild(emptyRow);
+    } else {
+      for (var r = 0; r < rows.length; r++) {
+        var tr = document.createElement("tr");
+        var row = rows[r];
+        for (var ci = 0; ci < columns.length; ci++) {
+          var td = document.createElement("td");
+          var colDef = columns[ci];
+          var cellVal = row[colDef.key];
+          td.textContent = cellVal != null ? _escapeHtml(String(cellVal)) : "";
+          if (colDef.align) td.setAttribute("data-align", colDef.align);
+          tr.appendChild(td);
+        }
+        // Row click for select event
+        (function(rowData) {
+          tr.onclick = function() {
+            if (node.events && node.events.select) {
+              _fireAupEvent(node.id, "select", {});
+            }
+          };
+          tr.style.cursor = node.events && node.events.select ? "pointer" : "default";
+        })(row);
+        tbody.appendChild(tr);
+      }
+    }
+    table.appendChild(tbody);
+    return table;
+  }
+
+`;
+
+//#endregion
+exports.TABLE_JS = TABLE_JS;