@roxyapi/ui 0.1.2 → 0.2.0

package/dist/components/natal-chart.js

@@ -31,7 +31,12 @@ var PLANET_GLYPH = {
   Ascendant: "Asc",
   Lagna: "La",
   NorthNode: "\u260A",
-  SouthNode: "\u260B"
+  SouthNode: "\u260B",
+  "North node": "\u260A",
+  "South node": "\u260B",
+  Chiron: "\u26B7",
+  Lilith: "\u26B8",
+  "Black moon lilith": "\u26B8"
 };
 var SIGN_GLYPH = {
   Aries: "\u2648",
@@ -61,6 +66,9 @@ var SIGNS_ORDER = [
   "Aquarius",
   "Pisces"
 ];
+var RASHI_KEYS = SIGNS_ORDER.map(
+  (s) => s.toLowerCase()
+);
 
 // packages/ui/src/utils/base-styles.ts
 import { css } from "lit";
@@ -149,26 +157,6 @@ var baseStyles = css`
 `;
 
 // packages/ui/src/utils/degree.ts
-function normalizeLongitude(lon) {
-  const wrapped = lon % 360;
-  return wrapped < 0 ? wrapped + 360 : wrapped;
-}
-function longitudeToSignPosition(longitude) {
-  const lon = normalizeLongitude(longitude);
-  const signIndex = Math.floor(lon / 30) % 12;
-  const within = lon % 30;
-  const degree = Math.floor(within);
-  const minuteFloat = (within - degree) * 60;
-  const minute = Math.floor(minuteFloat);
-  const second = Math.round((minuteFloat - minute) * 60);
-  return {
-    sign: SIGNS_ORDER[signIndex] ?? "Aries",
-    signIndex,
-    degree,
-    minute,
-    second
-  };
-}
 function polarToCartesian(cx, cy, radius, angleDeg) {
   const angleRad = angleDeg * Math.PI / 180;
   return {
@@ -177,13 +165,37 @@ function polarToCartesian(cx, cy, radius, angleDeg) {
   };
 }
 
+// packages/ui/src/utils/format.ts
+function formatNumber(value, dp = 1) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "";
+  return value.toFixed(dp).replace(/\.?0+$/, "");
+}
+var ASPECT_CLASS = {
+  conjunction: "aspect-conjunction",
+  sextile: "aspect-sextile",
+  square: "aspect-square",
+  trine: "aspect-trine",
+  opposition: "aspect-opposition"
+};
+function normalizeAspect(a) {
+  return (a.type ?? "").toLowerCase().replace(/_/g, "-");
+}
+
+// packages/ui/src/utils/string.ts
+function capitalize(s) {
+  if (!s) return "";
+  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
 // packages/ui/src/components/natal-chart.ts
-var SIZE = 320;
+var SIZE = 420;
 var CENTER = SIZE / 2;
-var OUTER_R = 150;
-var SIGN_R = 134;
-var HOUSE_R = 110;
-var PLANET_R = 88;
+var OUTER_R = 164;
+var SIGN_R = 146;
+var HOUSE_R = 120;
+var PLANET_R = 96;
+var ANGLE_TICK_R = 178;
+var ANGLE_LABEL_R = 196;
 var RoxyNatalChart = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -191,10 +203,17 @@ var RoxyNatalChart = class extends LitElement {
     this.houseSystem = "placidus";
   }
   getPlanets() {
-    const p = this.data?.planets;
-    if (!p) return [];
-    if (Array.isArray(p)) return p;
-    return Object.entries(p).map(([name, entry]) => ({ ...entry, name }));
+    return this.data?.planets ?? [];
+  }
+  getAscendant() {
+    return this.data?.ascendant?.longitude ?? 0;
+  }
+  getMidheaven() {
+    const m = this.data?.midheaven?.longitude;
+    return typeof m === "number" ? m : null;
+  }
+  toAngle(lon) {
+    return 180 + this.getAscendant() - lon;
   }
   render() {
     if (!this.data)
@@ -205,11 +224,7 @@ var RoxyNatalChart = class extends LitElement {
 			<header>
 				<h2 class="title">Natal chart</h2>
 				${this.data.birthDetails ? html`<div class="meta">
-							${[
-      this.data.birthDetails.date,
-      this.data.birthDetails.time,
-      this.data.birthDetails.location
-    ].filter(Boolean).join(" \xB7 ")}
+							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
 						</div>` : nothing}
 			</header>
 			<svg
@@ -245,77 +260,169 @@ var RoxyNatalChart = class extends LitElement {
 				/>
 				${this.renderSpokes()} ${this.renderSigns()} ${this.renderHouseNumbers()}
 				${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
+				${this.renderAngles()}
 			</svg>
 			<div class="legend">
 				<span>${planets.length} planets</span>
 				<span>${aspects.length} aspects</span>
-				<span>House system: ${this.houseSystem}</span>
+				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
+				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
+			${this.renderDetails()}
+			${this.renderInterpretations()}
 		</div>`;
   }
+  renderAngles() {
+    const asc = this.getAscendant();
+    const mc = this.getMidheaven();
+    const items = [this.renderAngleMark(asc, "ASC")];
+    if (mc !== null) items.push(this.renderAngleMark(mc, "MC"));
+    return items;
+  }
+  renderAngleMark(longitude, label) {
+    const angle = this.toAngle(longitude);
+    const tickInner = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
+    const tickOuter = polarToCartesian(CENTER, CENTER, ANGLE_TICK_R, angle);
+    const labelPos = polarToCartesian(CENTER, CENTER, ANGLE_LABEL_R, angle);
+    return svg`
+			<g>
+				<line class="angle-tick" x1=${tickInner.x} y1=${tickInner.y} x2=${tickOuter.x} y2=${tickOuter.y} />
+				<text class="angle-marker" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">${label}</text>
+			</g>
+		`;
+  }
   renderSpokes() {
     return Array.from({ length: 12 }, (_, i) => {
-      const angle = i * 30 - 90;
+      const angle = this.toAngle(i * 30);
       const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
       const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
       return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
     });
   }
   renderSigns() {
-    const order = [
-      "Aries",
-      "Taurus",
-      "Gemini",
-      "Cancer",
-      "Leo",
-      "Virgo",
-      "Libra",
-      "Scorpio",
-      "Sagittarius",
-      "Capricorn",
-      "Aquarius",
-      "Pisces"
-    ];
-    return order.map((sign, i) => {
-      const angle = i * 30 + 15 - 90;
+    return SIGNS_ORDER.map((sign, i) => {
+      const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
       return svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
     });
   }
   renderHouseNumbers() {
+    const ascSignIndex = Math.floor(this.getAscendant() / 30);
     return Array.from({ length: 12 }, (_, i) => {
-      const angle = i * 30 + 15 - 90;
+      const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, HOUSE_R - 12, angle);
-      return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${i + 1}</text>`;
+      const houseNum = (i - ascSignIndex + 12) % 12 + 1;
+      return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
     });
   }
   renderPlanets(planets) {
     return planets.map((p) => {
-      const lon = typeof p.longitude === "number" ? p.longitude : typeof p.degree === "number" ? p.degree : NaN;
-      if (!Number.isFinite(lon)) return nothing;
-      const angle = lon - 90;
+      if (!Number.isFinite(p.longitude)) return nothing;
+      const angle = this.toAngle(p.longitude);
       const pos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
-      const name = p.name ?? p.planet ?? "";
-      const glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);
-      const retro = p.retrograde || p.isRetrograde ? " R" : "";
-      return svg`<text class="planet-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${name}${retro}</title>${glyph}</text>`;
+      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
+      const retro = p.isRetrograde ? " R" : "";
+      const display = retro ? `${glyph}\u1D3F` : glyph;
+      return svg`<text class="planet-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro}</title>${display}</text>`;
     });
   }
+  renderDetails() {
+    const summary = this.data?.summary;
+    const ai = this.data?.aspectsInterpretation;
+    if (!summary && !ai) return nothing;
+    const retrogrades = summary?.retrogradePlanets ?? [];
+    const elementDist = summary?.elementDistribution ?? {};
+    const modalityDist = summary?.modalityDistribution ?? {};
+    const elementMax = Math.max(1, ...Object.values(elementDist));
+    const modalityMax = Math.max(1, ...Object.values(modalityDist));
+    return html`<div class="details">
+			${summary?.dominantElement || summary?.dominantModality ? html`<div class="pill-row">
+						${summary.dominantElement ? html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing}
+						${summary.dominantModality ? html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing}
+					</div>` : nothing}
+			${ai ? html`<div class="pill-row">
+						<span class="pill pill--success">Harmonious ${ai.harmonious}</span>
+						<span class="pill pill--danger">Challenging ${ai.challenging}</span>
+						<span class="pill pill--muted">Neutral ${ai.neutral}</span>
+					</div>` : nothing}
+			${retrogrades.length > 0 ? html`<div class="pill-row">
+						${retrogrades.map((p) => {
+      const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
+      return html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+    })}
+					</div>` : nothing}
+			${ai?.summary ? html`<p class="summary">${ai.summary}</p>` : nothing}
+			${Object.keys(elementDist).length > 0 || Object.keys(modalityDist).length > 0 ? html`<div class="dist-grid">
+						${Object.keys(elementDist).length > 0 ? html`<div class="dist-section">
+									<h3>Elements</h3>
+									${Object.entries(elementDist).map(
+      ([label, count]) => html`<div class="dist-row">
+											<span>${label}</span>
+											<div class="dist-bar"><span style="width: ${Math.round(count / elementMax * 100)}%"></span></div>
+											<span>${count}</span>
+										</div>`
+    )}
+								</div>` : nothing}
+						${Object.keys(modalityDist).length > 0 ? html`<div class="dist-section">
+									<h3>Modalities</h3>
+									${Object.entries(modalityDist).map(
+      ([label, count]) => html`<div class="dist-row">
+											<span>${label}</span>
+											<div class="dist-bar"><span style="width: ${Math.round(count / modalityMax * 100)}%"></span></div>
+											<span>${count}</span>
+										</div>`
+    )}
+								</div>` : nothing}
+					</div>` : nothing}
+		</div>`;
+  }
+  renderInterpretations() {
+    const planets = this.getPlanets().filter((p) => p.interpretation);
+    if (planets.length === 0) return nothing;
+    return html`<section class="interpretations">
+			<h3>Planet readings</h3>
+			${planets.map((p) => {
+      const interp = p.interpretation;
+      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
+      const deg = formatNumber(p.degree ?? 0, 1);
+      return html`<details class="interp-card">
+					<summary>${glyph} ${p.name} <small>${p.sign ?? ""} ${deg}</small></summary>
+					<div class="interp-body">
+						${interp.summary ? html`<p class="interp-summary">${interp.summary}</p>` : nothing}
+						${interp.detailed ? html`<p class="interp-detail">${interp.detailed}</p>` : nothing}
+						${interp.keywords?.length ? html`<div class="interp-keywords">${interp.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>` : nothing}
+					</div>
+				</details>`;
+    })}
+		</section>`;
+  }
   renderAspects(planets, aspects) {
     const planetMap = /* @__PURE__ */ new Map();
     for (const p of planets) {
-      const lon = typeof p.longitude === "number" ? p.longitude : typeof p.degree === "number" ? p.degree : null;
-      if (lon === null) continue;
-      const name = capitalize(p.name ?? p.planet ?? "");
-      if (name) planetMap.set(name, lon);
+      if (typeof p.longitude !== "number") continue;
+      const name = capitalize(p.name);
+      if (name) planetMap.set(name, p.longitude);
     }
     return aspects.map((a) => {
-      const l1 = planetMap.get(capitalize(a.planet1 ?? ""));
-      const l2 = planetMap.get(capitalize(a.planet2 ?? ""));
+      const l1 = planetMap.get(capitalize(a.planet1));
+      const l2 = planetMap.get(capitalize(a.planet2));
       if (l1 === void 0 || l2 === void 0) return nothing;
-      const p1 = polarToCartesian(CENTER, CENTER, PLANET_R - 18, l1 - 90);
-      const p2 = polarToCartesian(CENTER, CENTER, PLANET_R - 18, l2 - 90);
-      return svg`<line class="aspect" x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y} />`;
+      const p1 = polarToCartesian(
+        CENTER,
+        CENTER,
+        PLANET_R - 18,
+        this.toAngle(l1)
+      );
+      const p2 = polarToCartesian(
+        CENTER,
+        CENTER,
+        PLANET_R - 18,
+        this.toAngle(l2)
+      );
+      const aspectName = normalizeAspect(a);
+      const aspectClass = ASPECT_CLASS[aspectName] ?? "aspect-other";
+      const orbLabel = formatNumber(a.orb, 1);
+      return svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
     });
   }
 };
@@ -373,9 +480,36 @@ RoxyNatalChart.styles = [
 			}
 
 			.aspect {
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 32%, transparent);
-				stroke-width: 0.6;
+				stroke-width: 0.8;
 				fill: none;
+				opacity: 0.55;
+			}
+			.aspect-trine,
+			.aspect-sextile {
+				stroke: var(--roxy-success, #16a34a);
+			}
+			.aspect-square,
+			.aspect-opposition {
+				stroke: var(--roxy-danger, #dc2626);
+			}
+			.aspect-conjunction {
+				stroke: var(--roxy-accent-fg, #b45309);
+			}
+			.aspect-other {
+				stroke: var(--roxy-muted, #71717a);
+				opacity: 0.4;
+			}
+
+			.angle-marker {
+				fill: var(--roxy-accent-fg, #b45309);
+				font-size: 10px;
+				font-weight: 700;
+				font-family: var(--roxy-font-sans);
+				letter-spacing: 0.04em;
+			}
+			.angle-tick {
+				stroke: var(--roxy-accent-fg, #b45309);
+				stroke-width: 1.5;
 			}
 
 			.legend {
@@ -385,6 +519,144 @@ RoxyNatalChart.styles = [
 				flex-wrap: wrap;
 				gap: var(--roxy-space-md, 1rem);
 			}
+			.legend-swatch {
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				margin-right: 4px;
+				vertical-align: middle;
+			}
+
+			.details {
+				margin-top: var(--roxy-space-md, 1rem);
+			}
+
+			.pill-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+
+			.pill {
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-fg, #0f172a) 8%, transparent);
+				color: var(--roxy-fg, #0f172a);
+			}
+
+			.pill--success {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 15%, transparent);
+				color: var(--roxy-success, #16a34a);
+			}
+
+			.pill--danger {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 15%, transparent);
+				color: var(--roxy-danger, #dc2626);
+			}
+
+			.pill--muted {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.summary {
+				color: var(--roxy-fg, #0f172a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: var(--roxy-space-md, 1rem) 0;
+			}
+
+			.dist-grid {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			@container (max-width: 639px) {
+				.dist-grid {
+					grid-template-columns: 1fr;
+				}
+			}
+
+			.dist-section h3 {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+
+			.dist-row {
+				display: grid;
+				grid-template-columns: 4rem 1fr 1.5rem;
+				align-items: center;
+				gap: var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-fg, #0f172a);
+				margin-bottom: 4px;
+			}
+
+			.dist-bar {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 20%, transparent);
+				height: 6px;
+				border-radius: 3px;
+			}
+
+			.dist-bar > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				border-radius: 3px;
+			}
+
+			.interpretations {
+				margin-top: var(--roxy-space-md, 1rem);
+			}
+			.interpretations h3 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+			}
+			.interp-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-card summary {
+				cursor: pointer;
+				font-weight: 500;
+				color: var(--roxy-fg, #0f172a);
+			}
+			.interp-card summary small {
+				color: var(--roxy-muted, #71717a);
+				margin-left: 0.5em;
+				font-weight: 400;
+			}
+			.interp-body {
+				margin-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0f172a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.interp-keywords {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.25rem;
+				margin-top: 0.5rem;
+			}
+			.interp-keywords .kw {
+				padding: 1px 8px;
+				border-radius: 9999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
 		`
 ];
 __decorateClass([
@@ -396,12 +668,7 @@ __decorateClass([
 RoxyNatalChart = __decorateClass([
   customElement("roxy-natal-chart")
 ], RoxyNatalChart);
-function capitalize(s) {
-  if (!s) return "";
-  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
 export {
-  RoxyNatalChart,
-  longitudeToSignPosition
+  RoxyNatalChart
 };
 //# sourceMappingURL=natal-chart.js.map