@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1,137 @@
+//#region src/web-page/renderers/calendar.ts
+const CALENDAR_JS = `
+  // ── Calendar Primitive (Pure CSS/JS) ──
+  function renderAupCalendar(node) {
+    var el = document.createElement("div");
+    el.className = "aup-calendar";
+    var p = node.props || {};
+    var mode = p.mode || "month";
+    var events = p.events || [];
+    var currentDate = new Date();
+
+    if (mode === "month" || mode === "week" || mode === "day") {
+      renderMonthView();
+    } else if (mode === "agenda") {
+      renderAgendaView();
+    }
+
+    function renderMonthView() {
+      el.innerHTML = "";
+      var header = document.createElement("div");
+      header.className = "aup-calendar-header";
+      var prevBtn = document.createElement("button");
+      prevBtn.textContent = "\\u25C0";
+      prevBtn.onclick = function() { currentDate.setMonth(currentDate.getMonth() - 1); renderMonthView(); };
+      var nextBtn = document.createElement("button");
+      nextBtn.textContent = "\\u25B6";
+      nextBtn.onclick = function() { currentDate.setMonth(currentDate.getMonth() + 1); renderMonthView(); };
+      var title = document.createElement("span");
+      title.className = "aup-calendar-title";
+      title.textContent = currentDate.toLocaleDateString(p.locale || undefined, { year: "numeric", month: "long" });
+      header.appendChild(prevBtn);
+      header.appendChild(title);
+      header.appendChild(nextBtn);
+      el.appendChild(header);
+
+      var grid = document.createElement("div");
+      grid.className = "aup-calendar-grid";
+
+      var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+      for (var d = 0; d < 7; d++) {
+        var dh = document.createElement("div");
+        dh.className = "aup-calendar-day-header";
+        dh.textContent = dayNames[d];
+        grid.appendChild(dh);
+      }
+
+      var year = currentDate.getFullYear();
+      var month = currentDate.getMonth();
+      var firstDay = new Date(year, month, 1).getDay();
+      var daysInMonth = new Date(year, month + 1, 0).getDate();
+      var today = new Date();
+
+      // Previous month padding
+      var prevMonthDays = new Date(year, month, 0).getDate();
+      for (var i = firstDay - 1; i >= 0; i--) {
+        var dayEl = document.createElement("div");
+        dayEl.className = "aup-calendar-day other-month";
+        dayEl.textContent = String(prevMonthDays - i);
+        grid.appendChild(dayEl);
+      }
+
+      // Current month days
+      for (var day = 1; day <= daysInMonth; day++) {
+        var dayEl = document.createElement("div");
+        dayEl.className = "aup-calendar-day";
+        if (day === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
+          dayEl.classList.add("today");
+        }
+        dayEl.textContent = String(day);
+
+        // Events on this day
+        var dateStr = year + "-" + String(month + 1).padStart(2, "0") + "-" + String(day).padStart(2, "0");
+        for (var e = 0; e < events.length; e++) {
+          if (events[e].date === dateStr) {
+            var evtEl = document.createElement("span");
+            evtEl.className = "aup-calendar-event";
+            evtEl.setAttribute("data-intent", events[e].intent || "info");
+            evtEl.textContent = _escapeHtml(String(events[e].label || ""));
+            dayEl.appendChild(evtEl);
+          }
+        }
+        grid.appendChild(dayEl);
+      }
+
+      // Next month padding
+      var totalCells = firstDay + daysInMonth;
+      var remaining = (7 - (totalCells % 7)) % 7;
+      for (var i = 1; i <= remaining; i++) {
+        var dayEl = document.createElement("div");
+        dayEl.className = "aup-calendar-day other-month";
+        dayEl.textContent = String(i);
+        grid.appendChild(dayEl);
+      }
+
+      el.appendChild(grid);
+    }
+
+    function renderAgendaView() {
+      el.innerHTML = "";
+      var header = document.createElement("div");
+      header.className = "aup-calendar-header";
+      var title = document.createElement("span");
+      title.className = "aup-calendar-title";
+      title.textContent = "Agenda";
+      header.appendChild(title);
+      el.appendChild(header);
+
+      var sorted = events.slice().sort(function(a, b) { return (a.date || "").localeCompare(b.date || ""); });
+      if (sorted.length === 0) {
+        var empty = document.createElement("div");
+        empty.style.cssText = "color: var(--dim); text-align: center; padding: 20px;";
+        empty.textContent = "No events";
+        el.appendChild(empty);
+      } else {
+        for (var i = 0; i < sorted.length; i++) {
+          var item = document.createElement("div");
+          item.style.cssText = "display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border);";
+          var date = document.createElement("span");
+          date.style.cssText = "font-size: 0.8em; color: var(--dim); min-width: 80px;";
+          date.textContent = sorted[i].date || "";
+          var label = document.createElement("span");
+          label.textContent = _escapeHtml(String(sorted[i].label || ""));
+          item.appendChild(date);
+          item.appendChild(label);
+          el.appendChild(item);
+        }
+      }
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { CALENDAR_JS };
+//# sourceMappingURL=calendar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.mjs","names":[],"sources":["../../../src/web-page/renderers/calendar.ts"],"sourcesContent":["export const CALENDAR_JS = `\n  // ── Calendar Primitive (Pure CSS/JS) ──\n  function renderAupCalendar(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-calendar\";\n    var p = node.props || {};\n    var mode = p.mode || \"month\";\n    var events = p.events || [];\n    var currentDate = new Date();\n\n    if (mode === \"month\" || mode === \"week\" || mode === \"day\") {\n      renderMonthView();\n    } else if (mode === \"agenda\") {\n      renderAgendaView();\n    }\n\n    function renderMonthView() {\n      el.innerHTML = \"\";\n      var header = document.createElement(\"div\");\n      header.className = \"aup-calendar-header\";\n      var prevBtn = document.createElement(\"button\");\n      prevBtn.textContent = \"\\\\u25C0\";\n      prevBtn.onclick = function() { currentDate.setMonth(currentDate.getMonth() - 1); renderMonthView(); };\n      var nextBtn = document.createElement(\"button\");\n      nextBtn.textContent = \"\\\\u25B6\";\n      nextBtn.onclick = function() { currentDate.setMonth(currentDate.getMonth() + 1); renderMonthView(); };\n      var title = document.createElement(\"span\");\n      title.className = \"aup-calendar-title\";\n      title.textContent = currentDate.toLocaleDateString(p.locale || undefined, { year: \"numeric\", month: \"long\" });\n      header.appendChild(prevBtn);\n      header.appendChild(title);\n      header.appendChild(nextBtn);\n      el.appendChild(header);\n\n      var grid = document.createElement(\"div\");\n      grid.className = \"aup-calendar-grid\";\n\n      var dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n      for (var d = 0; d < 7; d++) {\n        var dh = document.createElement(\"div\");\n        dh.className = \"aup-calendar-day-header\";\n        dh.textContent = dayNames[d];\n        grid.appendChild(dh);\n      }\n\n      var year = currentDate.getFullYear();\n      var month = currentDate.getMonth();\n      var firstDay = new Date(year, month, 1).getDay();\n      var daysInMonth = new Date(year, month + 1, 0).getDate();\n      var today = new Date();\n\n      // Previous month padding\n      var prevMonthDays = new Date(year, month, 0).getDate();\n      for (var i = firstDay - 1; i >= 0; i--) {\n        var dayEl = document.createElement(\"div\");\n        dayEl.className = \"aup-calendar-day other-month\";\n        dayEl.textContent = String(prevMonthDays - i);\n        grid.appendChild(dayEl);\n      }\n\n      // Current month days\n      for (var day = 1; day <= daysInMonth; day++) {\n        var dayEl = document.createElement(\"div\");\n        dayEl.className = \"aup-calendar-day\";\n        if (day === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {\n          dayEl.classList.add(\"today\");\n        }\n        dayEl.textContent = String(day);\n\n        // Events on this day\n        var dateStr = year + \"-\" + String(month + 1).padStart(2, \"0\") + \"-\" + String(day).padStart(2, \"0\");\n        for (var e = 0; e < events.length; e++) {\n          if (events[e].date === dateStr) {\n            var evtEl = document.createElement(\"span\");\n            evtEl.className = \"aup-calendar-event\";\n            evtEl.setAttribute(\"data-intent\", events[e].intent || \"info\");\n            evtEl.textContent = _escapeHtml(String(events[e].label || \"\"));\n            dayEl.appendChild(evtEl);\n          }\n        }\n        grid.appendChild(dayEl);\n      }\n\n      // Next month padding\n      var totalCells = firstDay + daysInMonth;\n      var remaining = (7 - (totalCells % 7)) % 7;\n      for (var i = 1; i <= remaining; i++) {\n        var dayEl = document.createElement(\"div\");\n        dayEl.className = \"aup-calendar-day other-month\";\n        dayEl.textContent = String(i);\n        grid.appendChild(dayEl);\n      }\n\n      el.appendChild(grid);\n    }\n\n    function renderAgendaView() {\n      el.innerHTML = \"\";\n      var header = document.createElement(\"div\");\n      header.className = \"aup-calendar-header\";\n      var title = document.createElement(\"span\");\n      title.className = \"aup-calendar-title\";\n      title.textContent = \"Agenda\";\n      header.appendChild(title);\n      el.appendChild(header);\n\n      var sorted = events.slice().sort(function(a, b) { return (a.date || \"\").localeCompare(b.date || \"\"); });\n      if (sorted.length === 0) {\n        var empty = document.createElement(\"div\");\n        empty.style.cssText = \"color: var(--dim); text-align: center; padding: 20px;\";\n        empty.textContent = \"No events\";\n        el.appendChild(empty);\n      } else {\n        for (var i = 0; i < sorted.length; i++) {\n          var item = document.createElement(\"div\");\n          item.style.cssText = \"display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border);\";\n          var date = document.createElement(\"span\");\n          date.style.cssText = \"font-size: 0.8em; color: var(--dim); min-width: 80px;\";\n          date.textContent = sorted[i].date || \"\";\n          var label = document.createElement(\"span\");\n          label.textContent = _escapeHtml(String(sorted[i].label || \"\"));\n          item.appendChild(date);\n          item.appendChild(label);\n          el.appendChild(item);\n        }\n      }\n    }\n\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,cAAc"}

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

@@ -0,0 +1,173 @@
+
+//#region src/web-page/renderers/canvas.ts
+const CANVAS_JS = `
+  // ── Canvas Subsystem (HTML5 Canvas drawing) ──
+  function renderAupCanvas(node) {
+    var el = document.createElement("div");
+    el.className = "aup-canvas";
+    var p = node.props || {};
+    var width = parseInt(p.width) || 800;
+    var height = parseInt(p.height) || 400;
+    var bgColor = p.background || "#ffffff";
+
+    // Toolbar
+    var toolbar = document.createElement("div");
+    toolbar.className = "aup-canvas-toolbar";
+
+    var tools = [
+      { id: "pen", label: "Pen" },
+      { id: "line", label: "Line" },
+      { id: "rect", label: "Rect" },
+      { id: "circle", label: "Circle" },
+      { id: "eraser", label: "Eraser" },
+    ];
+    var activeTool = "pen";
+    var toolBtns = {};
+
+    for (var t = 0; t < tools.length; t++) {
+      (function(tool) {
+        var btn = document.createElement("button");
+        btn.textContent = tool.label;
+        if (tool.id === activeTool) btn.classList.add("active");
+        btn.onclick = function() {
+          activeTool = tool.id;
+          for (var k in toolBtns) toolBtns[k].classList.remove("active");
+          btn.classList.add("active");
+        };
+        toolbar.appendChild(btn);
+        toolBtns[tool.id] = btn;
+      })(tools[t]);
+    }
+
+    // Separator
+    var sep = document.createElement("div");
+    sep.className = "separator";
+    toolbar.appendChild(sep);
+
+    // Color picker
+    var colorInput = document.createElement("input");
+    colorInput.type = "color";
+    colorInput.value = p.strokeColor || "#000000";
+    toolbar.appendChild(colorInput);
+
+    // Line width
+    var sizeInput = document.createElement("input");
+    sizeInput.type = "range";
+    sizeInput.min = "1";
+    sizeInput.max = "20";
+    sizeInput.value = String(p.strokeWidth || 2);
+    toolbar.appendChild(sizeInput);
+
+    // Clear button
+    var sep2 = document.createElement("div");
+    sep2.className = "separator";
+    toolbar.appendChild(sep2);
+    var clearBtn = document.createElement("button");
+    clearBtn.textContent = "Clear";
+    clearBtn.onclick = function() {
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, height);
+      strokes = [];
+    };
+    toolbar.appendChild(clearBtn);
+
+    el.appendChild(toolbar);
+
+    // Canvas area
+    var area = document.createElement("div");
+    area.className = "aup-canvas-area";
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = "100%";
+    canvas.style.height = "auto";
+    area.appendChild(canvas);
+    el.appendChild(area);
+
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, width, height);
+
+    var drawing = false;
+    var startX = 0, startY = 0;
+    var strokes = [];
+    var snapshot = null;
+
+    function getPos(e) {
+      var rect = canvas.getBoundingClientRect();
+      var scaleX = canvas.width / rect.width;
+      var scaleY = canvas.height / rect.height;
+      return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };
+    }
+
+    canvas.addEventListener("mousedown", function(e) {
+      drawing = true;
+      var pos = getPos(e);
+      startX = pos.x;
+      startY = pos.y;
+      if (activeTool === "pen" || activeTool === "eraser") {
+        ctx.beginPath();
+        ctx.moveTo(pos.x, pos.y);
+      } else {
+        snapshot = ctx.getImageData(0, 0, width, height);
+      }
+    });
+
+    canvas.addEventListener("mousemove", function(e) {
+      if (!drawing) return;
+      var pos = getPos(e);
+      var lw = parseInt(sizeInput.value) || 2;
+      if (activeTool === "pen") {
+        ctx.strokeStyle = colorInput.value;
+        ctx.lineWidth = lw;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+      } else if (activeTool === "eraser") {
+        ctx.strokeStyle = bgColor;
+        ctx.lineWidth = lw * 4;
+        ctx.lineCap = "round";
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+      } else if (snapshot) {
+        ctx.putImageData(snapshot, 0, 0);
+        ctx.strokeStyle = colorInput.value;
+        ctx.lineWidth = lw;
+        ctx.lineCap = "round";
+        if (activeTool === "line") {
+          ctx.beginPath();
+          ctx.moveTo(startX, startY);
+          ctx.lineTo(pos.x, pos.y);
+          ctx.stroke();
+        } else if (activeTool === "rect") {
+          ctx.strokeRect(startX, startY, pos.x - startX, pos.y - startY);
+        } else if (activeTool === "circle") {
+          var rx = Math.abs(pos.x - startX) / 2;
+          var ry = Math.abs(pos.y - startY) / 2;
+          var cx = startX + (pos.x - startX) / 2;
+          var cy = startY + (pos.y - startY) / 2;
+          ctx.beginPath();
+          ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+      }
+    });
+
+    canvas.addEventListener("mouseup", function() {
+      drawing = false;
+      snapshot = null;
+    });
+
+    canvas.addEventListener("mouseleave", function() {
+      drawing = false;
+      snapshot = null;
+    });
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.CANVAS_JS = CANVAS_JS;

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

@@ -0,0 +1,173 @@
+//#region src/web-page/renderers/canvas.ts
+const CANVAS_JS = `
+  // ── Canvas Subsystem (HTML5 Canvas drawing) ──
+  function renderAupCanvas(node) {
+    var el = document.createElement("div");
+    el.className = "aup-canvas";
+    var p = node.props || {};
+    var width = parseInt(p.width) || 800;
+    var height = parseInt(p.height) || 400;
+    var bgColor = p.background || "#ffffff";
+
+    // Toolbar
+    var toolbar = document.createElement("div");
+    toolbar.className = "aup-canvas-toolbar";
+
+    var tools = [
+      { id: "pen", label: "Pen" },
+      { id: "line", label: "Line" },
+      { id: "rect", label: "Rect" },
+      { id: "circle", label: "Circle" },
+      { id: "eraser", label: "Eraser" },
+    ];
+    var activeTool = "pen";
+    var toolBtns = {};
+
+    for (var t = 0; t < tools.length; t++) {
+      (function(tool) {
+        var btn = document.createElement("button");
+        btn.textContent = tool.label;
+        if (tool.id === activeTool) btn.classList.add("active");
+        btn.onclick = function() {
+          activeTool = tool.id;
+          for (var k in toolBtns) toolBtns[k].classList.remove("active");
+          btn.classList.add("active");
+        };
+        toolbar.appendChild(btn);
+        toolBtns[tool.id] = btn;
+      })(tools[t]);
+    }
+
+    // Separator
+    var sep = document.createElement("div");
+    sep.className = "separator";
+    toolbar.appendChild(sep);
+
+    // Color picker
+    var colorInput = document.createElement("input");
+    colorInput.type = "color";
+    colorInput.value = p.strokeColor || "#000000";
+    toolbar.appendChild(colorInput);
+
+    // Line width
+    var sizeInput = document.createElement("input");
+    sizeInput.type = "range";
+    sizeInput.min = "1";
+    sizeInput.max = "20";
+    sizeInput.value = String(p.strokeWidth || 2);
+    toolbar.appendChild(sizeInput);
+
+    // Clear button
+    var sep2 = document.createElement("div");
+    sep2.className = "separator";
+    toolbar.appendChild(sep2);
+    var clearBtn = document.createElement("button");
+    clearBtn.textContent = "Clear";
+    clearBtn.onclick = function() {
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, height);
+      strokes = [];
+    };
+    toolbar.appendChild(clearBtn);
+
+    el.appendChild(toolbar);
+
+    // Canvas area
+    var area = document.createElement("div");
+    area.className = "aup-canvas-area";
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = "100%";
+    canvas.style.height = "auto";
+    area.appendChild(canvas);
+    el.appendChild(area);
+
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, width, height);
+
+    var drawing = false;
+    var startX = 0, startY = 0;
+    var strokes = [];
+    var snapshot = null;
+
+    function getPos(e) {
+      var rect = canvas.getBoundingClientRect();
+      var scaleX = canvas.width / rect.width;
+      var scaleY = canvas.height / rect.height;
+      return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };
+    }
+
+    canvas.addEventListener("mousedown", function(e) {
+      drawing = true;
+      var pos = getPos(e);
+      startX = pos.x;
+      startY = pos.y;
+      if (activeTool === "pen" || activeTool === "eraser") {
+        ctx.beginPath();
+        ctx.moveTo(pos.x, pos.y);
+      } else {
+        snapshot = ctx.getImageData(0, 0, width, height);
+      }
+    });
+
+    canvas.addEventListener("mousemove", function(e) {
+      if (!drawing) return;
+      var pos = getPos(e);
+      var lw = parseInt(sizeInput.value) || 2;
+      if (activeTool === "pen") {
+        ctx.strokeStyle = colorInput.value;
+        ctx.lineWidth = lw;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+      } else if (activeTool === "eraser") {
+        ctx.strokeStyle = bgColor;
+        ctx.lineWidth = lw * 4;
+        ctx.lineCap = "round";
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+      } else if (snapshot) {
+        ctx.putImageData(snapshot, 0, 0);
+        ctx.strokeStyle = colorInput.value;
+        ctx.lineWidth = lw;
+        ctx.lineCap = "round";
+        if (activeTool === "line") {
+          ctx.beginPath();
+          ctx.moveTo(startX, startY);
+          ctx.lineTo(pos.x, pos.y);
+          ctx.stroke();
+        } else if (activeTool === "rect") {
+          ctx.strokeRect(startX, startY, pos.x - startX, pos.y - startY);
+        } else if (activeTool === "circle") {
+          var rx = Math.abs(pos.x - startX) / 2;
+          var ry = Math.abs(pos.y - startY) / 2;
+          var cx = startX + (pos.x - startX) / 2;
+          var cy = startY + (pos.y - startY) / 2;
+          ctx.beginPath();
+          ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+      }
+    });
+
+    canvas.addEventListener("mouseup", function() {
+      drawing = false;
+      snapshot = null;
+    });
+
+    canvas.addEventListener("mouseleave", function() {
+      drawing = false;
+      snapshot = null;
+    });
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { CANVAS_JS };
+//# sourceMappingURL=canvas.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.mjs","names":[],"sources":["../../../src/web-page/renderers/canvas.ts"],"sourcesContent":["export const CANVAS_JS = `\n  // ── Canvas Subsystem (HTML5 Canvas drawing) ──\n  function renderAupCanvas(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-canvas\";\n    var p = node.props || {};\n    var width = parseInt(p.width) || 800;\n    var height = parseInt(p.height) || 400;\n    var bgColor = p.background || \"#ffffff\";\n\n    // Toolbar\n    var toolbar = document.createElement(\"div\");\n    toolbar.className = \"aup-canvas-toolbar\";\n\n    var tools = [\n      { id: \"pen\", label: \"Pen\" },\n      { id: \"line\", label: \"Line\" },\n      { id: \"rect\", label: \"Rect\" },\n      { id: \"circle\", label: \"Circle\" },\n      { id: \"eraser\", label: \"Eraser\" },\n    ];\n    var activeTool = \"pen\";\n    var toolBtns = {};\n\n    for (var t = 0; t < tools.length; t++) {\n      (function(tool) {\n        var btn = document.createElement(\"button\");\n        btn.textContent = tool.label;\n        if (tool.id === activeTool) btn.classList.add(\"active\");\n        btn.onclick = function() {\n          activeTool = tool.id;\n          for (var k in toolBtns) toolBtns[k].classList.remove(\"active\");\n          btn.classList.add(\"active\");\n        };\n        toolbar.appendChild(btn);\n        toolBtns[tool.id] = btn;\n      })(tools[t]);\n    }\n\n    // Separator\n    var sep = document.createElement(\"div\");\n    sep.className = \"separator\";\n    toolbar.appendChild(sep);\n\n    // Color picker\n    var colorInput = document.createElement(\"input\");\n    colorInput.type = \"color\";\n    colorInput.value = p.strokeColor || \"#000000\";\n    toolbar.appendChild(colorInput);\n\n    // Line width\n    var sizeInput = document.createElement(\"input\");\n    sizeInput.type = \"range\";\n    sizeInput.min = \"1\";\n    sizeInput.max = \"20\";\n    sizeInput.value = String(p.strokeWidth || 2);\n    toolbar.appendChild(sizeInput);\n\n    // Clear button\n    var sep2 = document.createElement(\"div\");\n    sep2.className = \"separator\";\n    toolbar.appendChild(sep2);\n    var clearBtn = document.createElement(\"button\");\n    clearBtn.textContent = \"Clear\";\n    clearBtn.onclick = function() {\n      ctx.fillStyle = bgColor;\n      ctx.fillRect(0, 0, width, height);\n      strokes = [];\n    };\n    toolbar.appendChild(clearBtn);\n\n    el.appendChild(toolbar);\n\n    // Canvas area\n    var area = document.createElement(\"div\");\n    area.className = \"aup-canvas-area\";\n    var canvas = document.createElement(\"canvas\");\n    canvas.width = width;\n    canvas.height = height;\n    canvas.style.width = \"100%\";\n    canvas.style.height = \"auto\";\n    area.appendChild(canvas);\n    el.appendChild(area);\n\n    var ctx = canvas.getContext(\"2d\");\n    ctx.fillStyle = bgColor;\n    ctx.fillRect(0, 0, width, height);\n\n    var drawing = false;\n    var startX = 0, startY = 0;\n    var strokes = [];\n    var snapshot = null;\n\n    function getPos(e) {\n      var rect = canvas.getBoundingClientRect();\n      var scaleX = canvas.width / rect.width;\n      var scaleY = canvas.height / rect.height;\n      return { x: (e.clientX - rect.left) * scaleX, y: (e.clientY - rect.top) * scaleY };\n    }\n\n    canvas.addEventListener(\"mousedown\", function(e) {\n      drawing = true;\n      var pos = getPos(e);\n      startX = pos.x;\n      startY = pos.y;\n      if (activeTool === \"pen\" || activeTool === \"eraser\") {\n        ctx.beginPath();\n        ctx.moveTo(pos.x, pos.y);\n      } else {\n        snapshot = ctx.getImageData(0, 0, width, height);\n      }\n    });\n\n    canvas.addEventListener(\"mousemove\", function(e) {\n      if (!drawing) return;\n      var pos = getPos(e);\n      var lw = parseInt(sizeInput.value) || 2;\n      if (activeTool === \"pen\") {\n        ctx.strokeStyle = colorInput.value;\n        ctx.lineWidth = lw;\n        ctx.lineCap = \"round\";\n        ctx.lineJoin = \"round\";\n        ctx.lineTo(pos.x, pos.y);\n        ctx.stroke();\n      } else if (activeTool === \"eraser\") {\n        ctx.strokeStyle = bgColor;\n        ctx.lineWidth = lw * 4;\n        ctx.lineCap = \"round\";\n        ctx.lineTo(pos.x, pos.y);\n        ctx.stroke();\n      } else if (snapshot) {\n        ctx.putImageData(snapshot, 0, 0);\n        ctx.strokeStyle = colorInput.value;\n        ctx.lineWidth = lw;\n        ctx.lineCap = \"round\";\n        if (activeTool === \"line\") {\n          ctx.beginPath();\n          ctx.moveTo(startX, startY);\n          ctx.lineTo(pos.x, pos.y);\n          ctx.stroke();\n        } else if (activeTool === \"rect\") {\n          ctx.strokeRect(startX, startY, pos.x - startX, pos.y - startY);\n        } else if (activeTool === \"circle\") {\n          var rx = Math.abs(pos.x - startX) / 2;\n          var ry = Math.abs(pos.y - startY) / 2;\n          var cx = startX + (pos.x - startX) / 2;\n          var cy = startY + (pos.y - startY) / 2;\n          ctx.beginPath();\n          ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);\n          ctx.stroke();\n        }\n      }\n    });\n\n    canvas.addEventListener(\"mouseup\", function() {\n      drawing = false;\n      snapshot = null;\n    });\n\n    canvas.addEventListener(\"mouseleave\", function() {\n      drawing = false;\n      snapshot = null;\n    });\n\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,YAAY"}

package/dist/web-page/renderers/cdn-loader.cjs

@@ -0,0 +1,25 @@
+
+//#region src/web-page/renderers/cdn-loader.ts
+const CDN_LOADER_JS = `
+  // ── CDN Lazy-Load Utilities ──
+  var _loadedScripts = {};
+  function loadScript(url, cb) {
+    if (_loadedScripts[url]) { if (cb) cb(); return; }
+    var s = document.createElement("script");
+    s.src = url;
+    s.onload = function() { _loadedScripts[url] = true; if (cb) cb(); };
+    s.onerror = function() { console.error("Failed to load: " + url); };
+    document.head.appendChild(s);
+  }
+  function loadCSS(url) {
+    if (document.querySelector('link[href="' + url + '"]')) return;
+    var l = document.createElement("link");
+    l.rel = "stylesheet";
+    l.href = url;
+    document.head.appendChild(l);
+  }
+
+`;
+
+//#endregion
+exports.CDN_LOADER_JS = CDN_LOADER_JS;

package/dist/web-page/renderers/cdn-loader.mjs

@@ -0,0 +1,25 @@
+//#region src/web-page/renderers/cdn-loader.ts
+const CDN_LOADER_JS = `
+  // ── CDN Lazy-Load Utilities ──
+  var _loadedScripts = {};
+  function loadScript(url, cb) {
+    if (_loadedScripts[url]) { if (cb) cb(); return; }
+    var s = document.createElement("script");
+    s.src = url;
+    s.onload = function() { _loadedScripts[url] = true; if (cb) cb(); };
+    s.onerror = function() { console.error("Failed to load: " + url); };
+    document.head.appendChild(s);
+  }
+  function loadCSS(url) {
+    if (document.querySelector('link[href="' + url + '"]')) return;
+    var l = document.createElement("link");
+    l.rel = "stylesheet";
+    l.href = url;
+    document.head.appendChild(l);
+  }
+
+`;
+
+//#endregion
+export { CDN_LOADER_JS };
+//# sourceMappingURL=cdn-loader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cdn-loader.mjs","names":[],"sources":["../../../src/web-page/renderers/cdn-loader.ts"],"sourcesContent":["export const CDN_LOADER_JS = `\n  // ── CDN Lazy-Load Utilities ──\n  var _loadedScripts = {};\n  function loadScript(url, cb) {\n    if (_loadedScripts[url]) { if (cb) cb(); return; }\n    var s = document.createElement(\"script\");\n    s.src = url;\n    s.onload = function() { _loadedScripts[url] = true; if (cb) cb(); };\n    s.onerror = function() { console.error(\"Failed to load: \" + url); };\n    document.head.appendChild(s);\n  }\n  function loadCSS(url) {\n    if (document.querySelector('link[href=\"' + url + '\"]')) return;\n    var l = document.createElement(\"link\");\n    l.rel = \"stylesheet\";\n    l.href = url;\n    document.head.appendChild(l);\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,gBAAgB"}

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

@@ -0,0 +1,101 @@
+
+//#region src/web-page/renderers/chart.ts
+const CHART_JS = `
+  // ── Chart Primitive (Chart.js v4) ──
+  function renderAupChart(node) {
+    var el = document.createElement("div");
+    el.className = "aup-chart";
+    var p = node.props || {};
+    var variant = p.variant || "line";
+    if (p.height) el.style.height = p.height;
+    var canvas = document.createElement("canvas");
+    el.appendChild(canvas);
+
+    var chartData = p.data || { labels: p.labels || [], datasets: p.datasets || [] };
+    var chartInstance = null;
+
+    function chartType() {
+      return variant === "area" ? "line" : variant === "histogram" ? "bar" : variant === "gauge" ? "doughnut" : variant;
+    }
+
+    function chartOptions() {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        fill: variant === "area",
+        animation: chartInstance ? { duration: 400 } : undefined,
+        plugins: { legend: { labels: { color: getComputedStyle(el).color } } },
+        scales: variant === "pie" || variant === "doughnut" || variant === "gauge" ? {} : {
+          x: { ticks: { color: getComputedStyle(el).color } },
+          y: { ticks: { color: getComputedStyle(el).color } }
+        }
+      };
+    }
+
+    function initChart() {
+      if (typeof Chart === "undefined") {
+        var loading = document.createElement("div");
+        loading.className = "aup-chart-loading";
+        loading.textContent = "Loading chart...";
+        el.insertBefore(loading, canvas);
+        loadScript("https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js", function() {
+          if (loading.parentNode) loading.parentNode.removeChild(loading);
+          createChart(chartData);
+        });
+      } else {
+        createChart(chartData);
+      }
+    }
+
+    function createChart(data) {
+      try {
+        chartInstance = new Chart(canvas, {
+          type: chartType(),
+          data: data,
+          options: chartOptions()
+        });
+      } catch(e) { canvas.parentNode.textContent = "Chart error: " + e.message; }
+    }
+
+    function updateChart(data) {
+      if (!chartInstance) { createChart(data); return; }
+      chartInstance.data = data;
+      chartInstance.update();
+    }
+
+    // src binding: read data from AFS path, subscribe for live updates
+    if (node.src && window.afs) {
+      var loading = document.createElement("div");
+      loading.className = "aup-chart-loading";
+      loading.textContent = "Loading data...";
+      el.insertBefore(loading, canvas);
+
+      function applyAfsData(raw) {
+        var d = (typeof raw === "object" && raw !== null) ? raw : {};
+        // Support both { labels, datasets } and { content: { labels, datasets } }
+        if (d.content && typeof d.content === "object") d = d.content;
+        var resolved = { labels: d.labels || [], datasets: d.datasets || [] };
+        if (loading.parentNode) loading.parentNode.removeChild(loading);
+        updateChart(resolved);
+      }
+
+      // Initial read
+      window.afs.read(node.src).then(applyAfsData).catch(function(e) {
+        loading.textContent = "Data error: " + e.message;
+      });
+
+      // Subscribe for live updates
+      window.afs.subscribe({ type: "afs:write", path: node.src }, function(event) {
+        if (event && event.data) applyAfsData(event.data);
+      });
+    } else {
+      setTimeout(initChart, 0);
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.CHART_JS = CHART_JS;