@aigne/afs-ui 1.11.0-beta.12

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

@@ -0,0 +1,105 @@
+
+//#region src/web-page/renderers/moonphase.ts
+const MOONPHASE_JS = `
+  // ── Moon Phase Primitive (Pure JS, zero deps) ──
+  function renderAupMoonPhase(node) {
+    var el = document.createElement("div");
+    el.className = "aup-moonphase";
+    var p = node.props || {};
+    var mode = p.mode || "today"; // "today" | "month"
+    var targetDate = p.date ? new Date(p.date) : new Date();
+
+    // ── Moon phase calculation (inline, no library needed) ──
+    var SYNODIC = 29.53058770576;
+    var START_JDN = 2451550.1;
+    var BOUNDS = { WXC: 1, FQ: 6.382647, WXG: 8.382647, FM: 13.765294, WNG: 15.765294, LQ: 21.147941, WNC: 23.147941, NMU: 28.530588, NMUE: 29.530588 };
+    var PHASE_NAMES = ["New Moon","Waxing Crescent","First Quarter","Waxing Gibbous","Full Moon","Waning Gibbous","Last Quarter","Waning Crescent"];
+    var PHASE_EMOJI = ["\\u{1F311}","\\u{1F312}","\\u{1F313}","\\u{1F314}","\\u{1F315}","\\u{1F316}","\\u{1F317}","\\u{1F318}"];
+
+    function _toJDN(d) {
+      var day = d.getUTCDate(), mo = d.getUTCMonth() + 1, yr = d.getFullYear();
+      var a = Math.trunc((14 - mo) / 12), y = yr + 4800 - a, m = mo + 12 * a - 3;
+      return day + Math.trunc((153 * m + 2) / 5) + 365 * y + Math.trunc(y / 4) - Math.trunc(y / 100) + Math.trunc(y / 400) - 32045;
+    }
+    function _lunarDay(d) {
+      var raw = (_toJDN(d) - START_JDN) / SYNODIC;
+      var frac = raw - Math.floor(raw);
+      return (frac < 0 ? frac + 1 : frac) * SYNODIC;
+    }
+    function _phaseIndex(ld) {
+      if (ld < BOUNDS.WXC) return 0;
+      if (ld < BOUNDS.FQ) return 1;
+      if (ld < BOUNDS.WXG) return 2;
+      if (ld < BOUNDS.FM) return 3;
+      if (ld < BOUNDS.WNG) return 4;
+      if (ld < BOUNDS.LQ) return 5;
+      if (ld < BOUNDS.WNC) return 6;
+      if (ld < BOUNDS.NMU) return 7;
+      return 0;
+    }
+    function _illumination(ld) { return (1 - Math.cos((ld / SYNODIC) * 2 * Math.PI)) / 2; }
+
+    var ld = _lunarDay(targetDate);
+    var pi = _phaseIndex(ld);
+    var illum = _illumination(ld);
+
+    // Visual moon emoji
+    var visual = document.createElement("div");
+    visual.className = "aup-moonphase-visual";
+    visual.textContent = PHASE_EMOJI[pi];
+    el.appendChild(visual);
+
+    // Phase name
+    var name = document.createElement("div");
+    name.className = "aup-moonphase-name";
+    name.textContent = PHASE_NAMES[pi];
+    el.appendChild(name);
+
+    // Details
+    var details = document.createElement("div");
+    details.className = "aup-moonphase-details";
+    details.innerHTML = "<span>Day " + ld.toFixed(1) + " / " + SYNODIC.toFixed(1) + "</span>"
+      + "<span>Illumination: " + (illum * 100).toFixed(1) + "%</span>"
+      + "<span>" + targetDate.toLocaleDateString(p.locale || undefined, { year: "numeric", month: "long", day: "numeric" }) + "</span>";
+    el.appendChild(details);
+
+    // Month view
+    if (mode === "month") {
+      var grid = document.createElement("div");
+      grid.className = "aup-moonphase-month";
+      var yr = targetDate.getFullYear(), mo = targetDate.getMonth();
+      var daysInMonth = new Date(yr, mo + 1, 0).getDate();
+      var todayStr = new Date().toISOString().slice(0, 10);
+      for (var day = 1; day <= daysInMonth; day++) {
+        var d = new Date(yr, mo, day);
+        var dld = _lunarDay(d);
+        var dpi = _phaseIndex(dld);
+        var cell = document.createElement("div");
+        cell.className = "aup-moonphase-month-day";
+        if (d.toISOString().slice(0, 10) === todayStr) cell.classList.add("today");
+        cell.innerHTML = "<span class='moon-emoji'>" + PHASE_EMOJI[dpi] + "</span><span>" + day + "</span>";
+        grid.appendChild(cell);
+      }
+      el.appendChild(grid);
+    }
+
+    // src binding
+    if (p.src && window.afs) {
+      window.afs.read(p.src).then(function(result) {
+        if (result && result.content) {
+          var newDate = new Date(result.content.date || result.content);
+          var nld = _lunarDay(newDate);
+          var npi = _phaseIndex(nld);
+          visual.textContent = PHASE_EMOJI[npi];
+          name.textContent = PHASE_NAMES[npi];
+        }
+      }).catch(function() {});
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.MOONPHASE_JS = MOONPHASE_JS;

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

@@ -0,0 +1,105 @@
+//#region src/web-page/renderers/moonphase.ts
+const MOONPHASE_JS = `
+  // ── Moon Phase Primitive (Pure JS, zero deps) ──
+  function renderAupMoonPhase(node) {
+    var el = document.createElement("div");
+    el.className = "aup-moonphase";
+    var p = node.props || {};
+    var mode = p.mode || "today"; // "today" | "month"
+    var targetDate = p.date ? new Date(p.date) : new Date();
+
+    // ── Moon phase calculation (inline, no library needed) ──
+    var SYNODIC = 29.53058770576;
+    var START_JDN = 2451550.1;
+    var BOUNDS = { WXC: 1, FQ: 6.382647, WXG: 8.382647, FM: 13.765294, WNG: 15.765294, LQ: 21.147941, WNC: 23.147941, NMU: 28.530588, NMUE: 29.530588 };
+    var PHASE_NAMES = ["New Moon","Waxing Crescent","First Quarter","Waxing Gibbous","Full Moon","Waning Gibbous","Last Quarter","Waning Crescent"];
+    var PHASE_EMOJI = ["\\u{1F311}","\\u{1F312}","\\u{1F313}","\\u{1F314}","\\u{1F315}","\\u{1F316}","\\u{1F317}","\\u{1F318}"];
+
+    function _toJDN(d) {
+      var day = d.getUTCDate(), mo = d.getUTCMonth() + 1, yr = d.getFullYear();
+      var a = Math.trunc((14 - mo) / 12), y = yr + 4800 - a, m = mo + 12 * a - 3;
+      return day + Math.trunc((153 * m + 2) / 5) + 365 * y + Math.trunc(y / 4) - Math.trunc(y / 100) + Math.trunc(y / 400) - 32045;
+    }
+    function _lunarDay(d) {
+      var raw = (_toJDN(d) - START_JDN) / SYNODIC;
+      var frac = raw - Math.floor(raw);
+      return (frac < 0 ? frac + 1 : frac) * SYNODIC;
+    }
+    function _phaseIndex(ld) {
+      if (ld < BOUNDS.WXC) return 0;
+      if (ld < BOUNDS.FQ) return 1;
+      if (ld < BOUNDS.WXG) return 2;
+      if (ld < BOUNDS.FM) return 3;
+      if (ld < BOUNDS.WNG) return 4;
+      if (ld < BOUNDS.LQ) return 5;
+      if (ld < BOUNDS.WNC) return 6;
+      if (ld < BOUNDS.NMU) return 7;
+      return 0;
+    }
+    function _illumination(ld) { return (1 - Math.cos((ld / SYNODIC) * 2 * Math.PI)) / 2; }
+
+    var ld = _lunarDay(targetDate);
+    var pi = _phaseIndex(ld);
+    var illum = _illumination(ld);
+
+    // Visual moon emoji
+    var visual = document.createElement("div");
+    visual.className = "aup-moonphase-visual";
+    visual.textContent = PHASE_EMOJI[pi];
+    el.appendChild(visual);
+
+    // Phase name
+    var name = document.createElement("div");
+    name.className = "aup-moonphase-name";
+    name.textContent = PHASE_NAMES[pi];
+    el.appendChild(name);
+
+    // Details
+    var details = document.createElement("div");
+    details.className = "aup-moonphase-details";
+    details.innerHTML = "<span>Day " + ld.toFixed(1) + " / " + SYNODIC.toFixed(1) + "</span>"
+      + "<span>Illumination: " + (illum * 100).toFixed(1) + "%</span>"
+      + "<span>" + targetDate.toLocaleDateString(p.locale || undefined, { year: "numeric", month: "long", day: "numeric" }) + "</span>";
+    el.appendChild(details);
+
+    // Month view
+    if (mode === "month") {
+      var grid = document.createElement("div");
+      grid.className = "aup-moonphase-month";
+      var yr = targetDate.getFullYear(), mo = targetDate.getMonth();
+      var daysInMonth = new Date(yr, mo + 1, 0).getDate();
+      var todayStr = new Date().toISOString().slice(0, 10);
+      for (var day = 1; day <= daysInMonth; day++) {
+        var d = new Date(yr, mo, day);
+        var dld = _lunarDay(d);
+        var dpi = _phaseIndex(dld);
+        var cell = document.createElement("div");
+        cell.className = "aup-moonphase-month-day";
+        if (d.toISOString().slice(0, 10) === todayStr) cell.classList.add("today");
+        cell.innerHTML = "<span class='moon-emoji'>" + PHASE_EMOJI[dpi] + "</span><span>" + day + "</span>";
+        grid.appendChild(cell);
+      }
+      el.appendChild(grid);
+    }
+
+    // src binding
+    if (p.src && window.afs) {
+      window.afs.read(p.src).then(function(result) {
+        if (result && result.content) {
+          var newDate = new Date(result.content.date || result.content);
+          var nld = _lunarDay(newDate);
+          var npi = _phaseIndex(nld);
+          visual.textContent = PHASE_EMOJI[npi];
+          name.textContent = PHASE_NAMES[npi];
+        }
+      }).catch(function() {});
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { MOONPHASE_JS };
+//# sourceMappingURL=moonphase.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moonphase.mjs","names":[],"sources":["../../../src/web-page/renderers/moonphase.ts"],"sourcesContent":["export const MOONPHASE_JS = `\n  // ── Moon Phase Primitive (Pure JS, zero deps) ──\n  function renderAupMoonPhase(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-moonphase\";\n    var p = node.props || {};\n    var mode = p.mode || \"today\"; // \"today\" | \"month\"\n    var targetDate = p.date ? new Date(p.date) : new Date();\n\n    // ── Moon phase calculation (inline, no library needed) ──\n    var SYNODIC = 29.53058770576;\n    var START_JDN = 2451550.1;\n    var BOUNDS = { WXC: 1, FQ: 6.382647, WXG: 8.382647, FM: 13.765294, WNG: 15.765294, LQ: 21.147941, WNC: 23.147941, NMU: 28.530588, NMUE: 29.530588 };\n    var PHASE_NAMES = [\"New Moon\",\"Waxing Crescent\",\"First Quarter\",\"Waxing Gibbous\",\"Full Moon\",\"Waning Gibbous\",\"Last Quarter\",\"Waning Crescent\"];\n    var PHASE_EMOJI = [\"\\\\u{1F311}\",\"\\\\u{1F312}\",\"\\\\u{1F313}\",\"\\\\u{1F314}\",\"\\\\u{1F315}\",\"\\\\u{1F316}\",\"\\\\u{1F317}\",\"\\\\u{1F318}\"];\n\n    function _toJDN(d) {\n      var day = d.getUTCDate(), mo = d.getUTCMonth() + 1, yr = d.getFullYear();\n      var a = Math.trunc((14 - mo) / 12), y = yr + 4800 - a, m = mo + 12 * a - 3;\n      return day + Math.trunc((153 * m + 2) / 5) + 365 * y + Math.trunc(y / 4) - Math.trunc(y / 100) + Math.trunc(y / 400) - 32045;\n    }\n    function _lunarDay(d) {\n      var raw = (_toJDN(d) - START_JDN) / SYNODIC;\n      var frac = raw - Math.floor(raw);\n      return (frac < 0 ? frac + 1 : frac) * SYNODIC;\n    }\n    function _phaseIndex(ld) {\n      if (ld < BOUNDS.WXC) return 0;\n      if (ld < BOUNDS.FQ) return 1;\n      if (ld < BOUNDS.WXG) return 2;\n      if (ld < BOUNDS.FM) return 3;\n      if (ld < BOUNDS.WNG) return 4;\n      if (ld < BOUNDS.LQ) return 5;\n      if (ld < BOUNDS.WNC) return 6;\n      if (ld < BOUNDS.NMU) return 7;\n      return 0;\n    }\n    function _illumination(ld) { return (1 - Math.cos((ld / SYNODIC) * 2 * Math.PI)) / 2; }\n\n    var ld = _lunarDay(targetDate);\n    var pi = _phaseIndex(ld);\n    var illum = _illumination(ld);\n\n    // Visual moon emoji\n    var visual = document.createElement(\"div\");\n    visual.className = \"aup-moonphase-visual\";\n    visual.textContent = PHASE_EMOJI[pi];\n    el.appendChild(visual);\n\n    // Phase name\n    var name = document.createElement(\"div\");\n    name.className = \"aup-moonphase-name\";\n    name.textContent = PHASE_NAMES[pi];\n    el.appendChild(name);\n\n    // Details\n    var details = document.createElement(\"div\");\n    details.className = \"aup-moonphase-details\";\n    details.innerHTML = \"<span>Day \" + ld.toFixed(1) + \" / \" + SYNODIC.toFixed(1) + \"</span>\"\n      + \"<span>Illumination: \" + (illum * 100).toFixed(1) + \"%</span>\"\n      + \"<span>\" + targetDate.toLocaleDateString(p.locale || undefined, { year: \"numeric\", month: \"long\", day: \"numeric\" }) + \"</span>\";\n    el.appendChild(details);\n\n    // Month view\n    if (mode === \"month\") {\n      var grid = document.createElement(\"div\");\n      grid.className = \"aup-moonphase-month\";\n      var yr = targetDate.getFullYear(), mo = targetDate.getMonth();\n      var daysInMonth = new Date(yr, mo + 1, 0).getDate();\n      var todayStr = new Date().toISOString().slice(0, 10);\n      for (var day = 1; day <= daysInMonth; day++) {\n        var d = new Date(yr, mo, day);\n        var dld = _lunarDay(d);\n        var dpi = _phaseIndex(dld);\n        var cell = document.createElement(\"div\");\n        cell.className = \"aup-moonphase-month-day\";\n        if (d.toISOString().slice(0, 10) === todayStr) cell.classList.add(\"today\");\n        cell.innerHTML = \"<span class='moon-emoji'>\" + PHASE_EMOJI[dpi] + \"</span><span>\" + day + \"</span>\";\n        grid.appendChild(cell);\n      }\n      el.appendChild(grid);\n    }\n\n    // src binding\n    if (p.src && window.afs) {\n      window.afs.read(p.src).then(function(result) {\n        if (result && result.content) {\n          var newDate = new Date(result.content.date || result.content);\n          var nld = _lunarDay(newDate);\n          var npi = _phaseIndex(nld);\n          visual.textContent = PHASE_EMOJI[npi];\n          name.textContent = PHASE_NAMES[npi];\n        }\n      }).catch(function() {});\n    }\n\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,eAAe"}

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

@@ -0,0 +1,222 @@
+
+//#region src/web-page/renderers/natal-chart.ts
+const NATAL_CHART_JS = `
+  // ── Natal Chart Primitive (@astrodraw/astrochart v3) ──
+  var _astroChartLoaded = false;
+
+  function _setNatalStatus(el, message) {
+    el.innerHTML = "";
+    var status = document.createElement("div");
+    status.className = "aup-natal-chart-loading";
+    status.textContent = message;
+    el.appendChild(status);
+  }
+
+  function _appendCell(row, value, strong) {
+    var td = document.createElement("td");
+    if (strong) {
+      var bold = document.createElement("strong");
+      bold.textContent = value;
+      td.appendChild(bold);
+    } else {
+      td.textContent = value;
+    }
+    row.appendChild(td);
+  }
+
+  function _appendHead(table, headers) {
+    var thead = document.createElement("thead");
+    var tr = document.createElement("tr");
+    for (var i = 0; i < headers.length; i++) {
+      var th = document.createElement("th");
+      th.textContent = headers[i];
+      tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+    table.appendChild(thead);
+  }
+
+  function renderAupNatalChart(node) {
+    var el = document.createElement("div");
+    el.className = "aup-natal-chart";
+    var p = node.props || {};
+    var variant = p.variant || "radix"; // "radix" | "transit" | "aspects-table" | "planets-table"
+    var height = p.height || "500px";
+    var width = parseInt(p.width) || 500;
+    var chartSize = parseInt(p.size) || Math.min(width, 500);
+
+    // Data format: { planets: {"Sun":[degrees], "Moon":[degrees], ...}, cusps: [12 house cusps] }
+    var data = p.data || null;
+
+    // ── Aspects / Planets table mode (no chart rendering, calculation only) ──
+    if (variant === "aspects-table" || variant === "planets-table") {
+      if (!data || !data.planets) {
+        _setNatalStatus(el, "No chart data provided");
+        return el;
+      }
+
+      if (variant === "planets-table") {
+        var planetsDiv = document.createElement("div");
+        planetsDiv.className = "aup-natal-planets";
+        var tbl = document.createElement("table");
+        _appendHead(tbl, ["Planet", "Longitude", "Sign", "Degree in Sign"]);
+        var tbody = document.createElement("tbody");
+        var SIGNS = ["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"];
+        for (var planet in data.planets) {
+          if (data.planets.hasOwnProperty(planet)) {
+            var deg = Number(data.planets[planet] && data.planets[planet][0]);
+            if (!isFinite(deg)) continue;
+            var signIdx = Math.floor(deg / 30) % 12;
+            if (signIdx < 0) signIdx += 12;
+            var degInSign = ((deg % 30) + 30) % 30;
+            var row = document.createElement("tr");
+            _appendCell(row, String(planet), true);
+            _appendCell(row, deg.toFixed(2) + "\\u00B0");
+            _appendCell(row, SIGNS[signIdx]);
+            _appendCell(row, degInSign.toFixed(2) + "\\u00B0");
+            tbody.appendChild(row);
+          }
+        }
+        tbl.appendChild(tbody);
+        planetsDiv.appendChild(tbl);
+        el.appendChild(planetsDiv);
+      }
+
+      if (variant === "aspects-table") {
+        // Inline aspect calculation (no library needed — port of AspectCalculator core logic)
+        var ASPECTS_DEF = { conjunction: { degree: 0, orbit: 10 }, square: { degree: 90, orbit: 8 }, trine: { degree: 120, orbit: 8 }, opposition: { degree: 180, orbit: 10 }, sextile: { degree: 60, orbit: 6 } };
+        var aspectsList = [];
+        var planetNames = Object.keys(data.planets);
+        for (var i = 0; i < planetNames.length; i++) {
+          for (var j = i + 1; j < planetNames.length; j++) {
+            var pA = planetNames[i], pB = planetNames[j];
+            var degA = Number(data.planets[pA] && data.planets[pA][0]);
+            var degB = Number(data.planets[pB] && data.planets[pB][0]);
+            if (!isFinite(degA) || !isFinite(degB)) continue;
+            var gap = Math.abs(degA - degB);
+            if (gap > 180) gap = 360 - gap;
+            for (var aspName in ASPECTS_DEF) {
+              var asp = ASPECTS_DEF[aspName];
+              var orbitMin = asp.degree - asp.orbit / 2, orbitMax = asp.degree + asp.orbit / 2;
+              if (gap >= orbitMin && gap <= orbitMax) {
+                var precisionNum = Math.abs(gap - asp.degree);
+                aspectsList.push({
+                  from: pA,
+                  to: pB,
+                  aspect: aspName,
+                  precision: precisionNum.toFixed(2),
+                  precisionNum: precisionNum,
+                });
+              }
+            }
+          }
+        }
+        aspectsList.sort(function(a, b) { return a.precisionNum - b.precisionNum; });
+
+        var aspDiv = document.createElement("div");
+        aspDiv.className = "aup-natal-aspects";
+        var aspTbl = document.createElement("table");
+        _appendHead(aspTbl, ["Planet", "Aspect", "Planet", "Orb"]);
+        var aspBody = document.createElement("tbody");
+        for (var k = 0; k < aspectsList.length; k++) {
+          var a = aspectsList[k];
+          var aspRow = document.createElement("tr");
+          _appendCell(aspRow, String(a.from));
+          _appendCell(aspRow, String(a.aspect), true);
+          _appendCell(aspRow, String(a.to));
+          _appendCell(aspRow, String(a.precision) + "\\u00B0");
+          aspBody.appendChild(aspRow);
+        }
+        aspTbl.appendChild(aspBody);
+        aspDiv.appendChild(aspTbl);
+        el.appendChild(aspDiv);
+      }
+
+      return el;
+    }
+
+    // ── SVG Chart mode — lazy-load @astrodraw/astrochart from CDN ──
+    el.style.minHeight = height;
+    _setNatalStatus(el, "Loading natal chart...");
+
+    if (!data || !data.planets || !data.cusps) {
+      _setNatalStatus(
+        el,
+        "No chart data provided. Expected: { planets: {Sun: [deg], ...}, cusps: [12 values] }",
+      );
+      return el;
+    }
+
+    var CDN_URL = "https://cdn.jsdelivr.net/npm/@astrodraw/astrochart@3.0.2/dist/astrochart.js";
+
+    function _initChart() {
+      el.innerHTML = "";
+      var chartContainerId = "aup-natal-" + (node.id || Math.random().toString(36).slice(2));
+      var container = document.createElement("div");
+      container.id = chartContainerId;
+      container.style.cssText = "display: flex; justify-content: center;";
+      el.appendChild(container);
+
+      // Detect dark mode
+      var bgHex = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
+      var isDark = false;
+      if (bgHex && bgHex.charAt(0) === "#") {
+        var r = parseInt(bgHex.slice(1, 3), 16) || 0;
+        var g = parseInt(bgHex.slice(3, 5), 16) || 0;
+        var b = parseInt(bgHex.slice(5, 7), 16) || 0;
+        isDark = (r + g + b) / 3 < 128;
+      }
+
+      var chartSettings = {
+        COLOR_BACKGROUND: "transparent",
+        POINTS_COLOR: isDark ? "#e2e8f0" : "#1e293b",
+        SIGNS_COLOR: isDark ? "#cbd5e1" : "#334155",
+        CIRCLE_COLOR: isDark ? "#475569" : "#94a3b8",
+        LINE_COLOR: isDark ? "#475569" : "#94a3b8",
+        CUSPS_FONT_COLOR: isDark ? "#94a3b8" : "#64748b",
+        SYMBOL_AXIS_FONT_COLOR: isDark ? "#e2e8f0" : "#1e293b",
+      };
+      if (p.settings) {
+        for (var sk in p.settings) {
+          if (p.settings.hasOwnProperty(sk)) chartSettings[sk] = p.settings[sk];
+        }
+      }
+
+      try {
+        var astroLib = window.astrochart;
+        if (!astroLib || !astroLib.Chart) {
+          _setNatalStatus(el, "AstroChart library not loaded");
+          return;
+        }
+        var chart = new astroLib.Chart(chartContainerId, chartSize, chartSize, chartSettings);
+        var radix = chart.radix(data);
+        radix.aspects();
+
+        // Transit overlay
+        if (variant === "transit" && p.transitData) {
+          var transit = radix.transit(p.transitData);
+          transit.aspects();
+        }
+      } catch (err) {
+        var errMsg = err && err.message ? err.message : String(err);
+        _setNatalStatus(el, "Chart error: " + errMsg);
+      }
+    }
+
+    if (_astroChartLoaded || window.astrochart) {
+      _astroChartLoaded = true;
+      _initChart();
+    } else {
+      loadScript(CDN_URL, function() {
+        _astroChartLoaded = true;
+        _initChart();
+      });
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.NATAL_CHART_JS = NATAL_CHART_JS;

package/dist/web-page/renderers/natal-chart.mjs

@@ -0,0 +1,222 @@
+//#region src/web-page/renderers/natal-chart.ts
+const NATAL_CHART_JS = `
+  // ── Natal Chart Primitive (@astrodraw/astrochart v3) ──
+  var _astroChartLoaded = false;
+
+  function _setNatalStatus(el, message) {
+    el.innerHTML = "";
+    var status = document.createElement("div");
+    status.className = "aup-natal-chart-loading";
+    status.textContent = message;
+    el.appendChild(status);
+  }
+
+  function _appendCell(row, value, strong) {
+    var td = document.createElement("td");
+    if (strong) {
+      var bold = document.createElement("strong");
+      bold.textContent = value;
+      td.appendChild(bold);
+    } else {
+      td.textContent = value;
+    }
+    row.appendChild(td);
+  }
+
+  function _appendHead(table, headers) {
+    var thead = document.createElement("thead");
+    var tr = document.createElement("tr");
+    for (var i = 0; i < headers.length; i++) {
+      var th = document.createElement("th");
+      th.textContent = headers[i];
+      tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+    table.appendChild(thead);
+  }
+
+  function renderAupNatalChart(node) {
+    var el = document.createElement("div");
+    el.className = "aup-natal-chart";
+    var p = node.props || {};
+    var variant = p.variant || "radix"; // "radix" | "transit" | "aspects-table" | "planets-table"
+    var height = p.height || "500px";
+    var width = parseInt(p.width) || 500;
+    var chartSize = parseInt(p.size) || Math.min(width, 500);
+
+    // Data format: { planets: {"Sun":[degrees], "Moon":[degrees], ...}, cusps: [12 house cusps] }
+    var data = p.data || null;
+
+    // ── Aspects / Planets table mode (no chart rendering, calculation only) ──
+    if (variant === "aspects-table" || variant === "planets-table") {
+      if (!data || !data.planets) {
+        _setNatalStatus(el, "No chart data provided");
+        return el;
+      }
+
+      if (variant === "planets-table") {
+        var planetsDiv = document.createElement("div");
+        planetsDiv.className = "aup-natal-planets";
+        var tbl = document.createElement("table");
+        _appendHead(tbl, ["Planet", "Longitude", "Sign", "Degree in Sign"]);
+        var tbody = document.createElement("tbody");
+        var SIGNS = ["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"];
+        for (var planet in data.planets) {
+          if (data.planets.hasOwnProperty(planet)) {
+            var deg = Number(data.planets[planet] && data.planets[planet][0]);
+            if (!isFinite(deg)) continue;
+            var signIdx = Math.floor(deg / 30) % 12;
+            if (signIdx < 0) signIdx += 12;
+            var degInSign = ((deg % 30) + 30) % 30;
+            var row = document.createElement("tr");
+            _appendCell(row, String(planet), true);
+            _appendCell(row, deg.toFixed(2) + "\\u00B0");
+            _appendCell(row, SIGNS[signIdx]);
+            _appendCell(row, degInSign.toFixed(2) + "\\u00B0");
+            tbody.appendChild(row);
+          }
+        }
+        tbl.appendChild(tbody);
+        planetsDiv.appendChild(tbl);
+        el.appendChild(planetsDiv);
+      }
+
+      if (variant === "aspects-table") {
+        // Inline aspect calculation (no library needed — port of AspectCalculator core logic)
+        var ASPECTS_DEF = { conjunction: { degree: 0, orbit: 10 }, square: { degree: 90, orbit: 8 }, trine: { degree: 120, orbit: 8 }, opposition: { degree: 180, orbit: 10 }, sextile: { degree: 60, orbit: 6 } };
+        var aspectsList = [];
+        var planetNames = Object.keys(data.planets);
+        for (var i = 0; i < planetNames.length; i++) {
+          for (var j = i + 1; j < planetNames.length; j++) {
+            var pA = planetNames[i], pB = planetNames[j];
+            var degA = Number(data.planets[pA] && data.planets[pA][0]);
+            var degB = Number(data.planets[pB] && data.planets[pB][0]);
+            if (!isFinite(degA) || !isFinite(degB)) continue;
+            var gap = Math.abs(degA - degB);
+            if (gap > 180) gap = 360 - gap;
+            for (var aspName in ASPECTS_DEF) {
+              var asp = ASPECTS_DEF[aspName];
+              var orbitMin = asp.degree - asp.orbit / 2, orbitMax = asp.degree + asp.orbit / 2;
+              if (gap >= orbitMin && gap <= orbitMax) {
+                var precisionNum = Math.abs(gap - asp.degree);
+                aspectsList.push({
+                  from: pA,
+                  to: pB,
+                  aspect: aspName,
+                  precision: precisionNum.toFixed(2),
+                  precisionNum: precisionNum,
+                });
+              }
+            }
+          }
+        }
+        aspectsList.sort(function(a, b) { return a.precisionNum - b.precisionNum; });
+
+        var aspDiv = document.createElement("div");
+        aspDiv.className = "aup-natal-aspects";
+        var aspTbl = document.createElement("table");
+        _appendHead(aspTbl, ["Planet", "Aspect", "Planet", "Orb"]);
+        var aspBody = document.createElement("tbody");
+        for (var k = 0; k < aspectsList.length; k++) {
+          var a = aspectsList[k];
+          var aspRow = document.createElement("tr");
+          _appendCell(aspRow, String(a.from));
+          _appendCell(aspRow, String(a.aspect), true);
+          _appendCell(aspRow, String(a.to));
+          _appendCell(aspRow, String(a.precision) + "\\u00B0");
+          aspBody.appendChild(aspRow);
+        }
+        aspTbl.appendChild(aspBody);
+        aspDiv.appendChild(aspTbl);
+        el.appendChild(aspDiv);
+      }
+
+      return el;
+    }
+
+    // ── SVG Chart mode — lazy-load @astrodraw/astrochart from CDN ──
+    el.style.minHeight = height;
+    _setNatalStatus(el, "Loading natal chart...");
+
+    if (!data || !data.planets || !data.cusps) {
+      _setNatalStatus(
+        el,
+        "No chart data provided. Expected: { planets: {Sun: [deg], ...}, cusps: [12 values] }",
+      );
+      return el;
+    }
+
+    var CDN_URL = "https://cdn.jsdelivr.net/npm/@astrodraw/astrochart@3.0.2/dist/astrochart.js";
+
+    function _initChart() {
+      el.innerHTML = "";
+      var chartContainerId = "aup-natal-" + (node.id || Math.random().toString(36).slice(2));
+      var container = document.createElement("div");
+      container.id = chartContainerId;
+      container.style.cssText = "display: flex; justify-content: center;";
+      el.appendChild(container);
+
+      // Detect dark mode
+      var bgHex = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
+      var isDark = false;
+      if (bgHex && bgHex.charAt(0) === "#") {
+        var r = parseInt(bgHex.slice(1, 3), 16) || 0;
+        var g = parseInt(bgHex.slice(3, 5), 16) || 0;
+        var b = parseInt(bgHex.slice(5, 7), 16) || 0;
+        isDark = (r + g + b) / 3 < 128;
+      }
+
+      var chartSettings = {
+        COLOR_BACKGROUND: "transparent",
+        POINTS_COLOR: isDark ? "#e2e8f0" : "#1e293b",
+        SIGNS_COLOR: isDark ? "#cbd5e1" : "#334155",
+        CIRCLE_COLOR: isDark ? "#475569" : "#94a3b8",
+        LINE_COLOR: isDark ? "#475569" : "#94a3b8",
+        CUSPS_FONT_COLOR: isDark ? "#94a3b8" : "#64748b",
+        SYMBOL_AXIS_FONT_COLOR: isDark ? "#e2e8f0" : "#1e293b",
+      };
+      if (p.settings) {
+        for (var sk in p.settings) {
+          if (p.settings.hasOwnProperty(sk)) chartSettings[sk] = p.settings[sk];
+        }
+      }
+
+      try {
+        var astroLib = window.astrochart;
+        if (!astroLib || !astroLib.Chart) {
+          _setNatalStatus(el, "AstroChart library not loaded");
+          return;
+        }
+        var chart = new astroLib.Chart(chartContainerId, chartSize, chartSize, chartSettings);
+        var radix = chart.radix(data);
+        radix.aspects();
+
+        // Transit overlay
+        if (variant === "transit" && p.transitData) {
+          var transit = radix.transit(p.transitData);
+          transit.aspects();
+        }
+      } catch (err) {
+        var errMsg = err && err.message ? err.message : String(err);
+        _setNatalStatus(el, "Chart error: " + errMsg);
+      }
+    }
+
+    if (_astroChartLoaded || window.astrochart) {
+      _astroChartLoaded = true;
+      _initChart();
+    } else {
+      loadScript(CDN_URL, function() {
+        _astroChartLoaded = true;
+        _initChart();
+      });
+    }
+
+    return el;
+  }
+
+`;
+
+//#endregion
+export { NATAL_CHART_JS };
+//# sourceMappingURL=natal-chart.mjs.map