@roxyapi/ui 0.1.1 → 0.1.3

package/src/components/panchang-table.ts

@@ -1,53 +1,16 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetBasicPanchangResponse,
+	GetDetailedPanchangResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { formatDate, formatTime, formatTimeRange } from '../utils/format.js';
 
-interface PanchangTime {
-	start?: string;
-	end?: string;
-}
-
-interface PanchangData {
-	date?: string;
-	location?: { name?: string; latitude?: number; longitude?: number };
-	vara?: string;
-	sunrise?: string;
-	sunset?: string;
-	moonrise?: string;
-	moonset?: string;
-	sunSign?: string;
-	moonSign?: string;
-	sunNakshatra?: string;
-	tithi?: string | { name?: string; phase?: string; end?: string };
-	nakshatra?: string | { name?: string; lord?: string; end?: string };
-	yoga?: string | { name?: string; end?: string };
-	karana?: string | { name?: string; end?: string };
-	hora?: string;
-	rahuKaal?: PanchangTime;
-	yamaganda?: PanchangTime;
-	gulika?: PanchangTime;
-	abhijitMuhurta?: PanchangTime;
-	brahmaMuhurta?: PanchangTime;
-	vijayaMuhurta?: PanchangTime;
-	nishitaMuhurta?: PanchangTime;
-	godhuliMuhurta?: PanchangTime;
-	pratahSandhya?: PanchangTime;
-	sayahnaSandhya?: PanchangTime;
-	durMuhurta?: PanchangTime[];
-	varjyam?: PanchangTime[];
-	amritKalam?: PanchangTime[];
-	chandrabalam?: string | string[];
-	tarabalam?: string;
-	panchaka?: string;
-	bhadra?: string;
-	sunLongitude?: number;
-	moonLongitude?: number;
-}
+type PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;
+type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
 
-/**
- * Panchang table for /vedic-astrology/panchang/{basic,detailed}. Detailed mode
- * renders 15+ muhurtas. Basic mode renders the five elements only.
- */
+/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */
 @customElement('roxy-panchang-table')
 export class RoxyPanchangTable extends LitElement {
 	static styles = [
@@ -123,35 +86,40 @@ export class RoxyPanchangTable extends LitElement {
 		const d = this.data;
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+		const detailed = 'sunrise' in d ? d : null;
 
-		const fivefold = [
+		const fivefold: Array<[string, string]> = [
 			['Tithi', this.formatPart(d.tithi)],
 			['Nakshatra', this.formatPart(d.nakshatra)],
 			['Yoga', this.formatPart(d.yoga)],
 			['Karana', this.formatPart(d.karana)],
-			['Vara', d.vara ?? ''],
 		];
+		if (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);
 
-		const muhurtas: Array<[string, PanchangTime | undefined]> = [
-			['Brahma Muhurta', d.brahmaMuhurta],
-			['Abhijit Muhurta', d.abhijitMuhurta],
-			['Vijaya Muhurta', d.vijayaMuhurta],
-			['Godhuli Muhurta', d.godhuliMuhurta],
-			['Nishita Muhurta', d.nishitaMuhurta],
-			['Pratah Sandhya', d.pratahSandhya],
-			['Sayahna Sandhya', d.sayahnaSandhya],
-		];
+		const muhurtas: Array<[string, PanchangTime | undefined]> = detailed
+			? [
+					['Brahma Muhurta', detailed.brahmaMuhurta],
+					['Abhijit Muhurta', detailed.abhijitMuhurta],
+					['Vijaya Muhurta', detailed.vijayaMuhurta],
+					['Godhuli Muhurta', detailed.godhuliMuhurta],
+					['Nishita Muhurta', detailed.nishitaMuhurta],
+					['Pratah Sandhya', detailed.pratahSandhya],
+					['Sayahna Sandhya', detailed.sayahnaSandhya],
+				]
+			: [];
 
-		const inauspicious: Array<[string, PanchangTime | undefined]> = [
-			['Rahu Kaal', d.rahuKaal],
-			['Yamaganda', d.yamaganda],
-			['Gulika', d.gulika],
-		];
+		const inauspicious: Array<[string, PanchangTime | undefined]> = detailed
+			? [
+					['Rahu Kaal', detailed.rahuKaal],
+					['Yamaganda', detailed.yamaganda],
+					['Gulika', detailed.gulika],
+				]
+			: [];
 
 		return html`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
-				<span class="date">${d.date ?? ''}</span>
+				<span class="date">${detailed ? formatDate(detailed.date) : ''}</span>
 			</header>
 			<table>
 				<tbody>
@@ -162,34 +130,34 @@ export class RoxyPanchangTable extends LitElement {
 						</tr>`,
 					)}
 					${
-						d.sunrise
+						detailed?.sunrise
 							? html`<tr>
 								<th>Sunrise</th>
-								<td>${d.sunrise}</td>
+								<td>${formatTime(detailed.sunrise)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.sunset
+						detailed?.sunset
 							? html`<tr>
 								<th>Sunset</th>
-								<td>${d.sunset}</td>
+								<td>${formatTime(detailed.sunset)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.moonrise
+						detailed?.moonrise
 							? html`<tr>
 								<th>Moonrise</th>
-								<td>${d.moonrise}</td>
+								<td>${formatTime(detailed.moonrise)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.moonset
+						detailed?.moonset
 							? html`<tr>
 								<th>Moonset</th>
-								<td>${d.moonset}</td>
+								<td>${formatTime(detailed.moonset)}</td>
 							</tr>`
 							: nothing
 					}
@@ -207,7 +175,7 @@ export class RoxyPanchangTable extends LitElement {
 									.map(
 										([k, v]) => html`<tr>
 											<th>${k}</th>
-											<td>${formatRange(v)}</td>
+											<td>${formatTimeRange(v)}</td>
 										</tr>`,
 									)}
 							</tbody>
@@ -220,7 +188,7 @@ export class RoxyPanchangTable extends LitElement {
 									.map(
 										([k, v]) => html`<tr>
 											<th>${k}</th>
-											<td>${formatRange(v)}</td>
+											<td>${formatTimeRange(v)}</td>
 										</tr>`,
 									)}
 							</tbody>
@@ -252,12 +220,6 @@ export class RoxyPanchangTable extends LitElement {
 	}
 }
 
-function formatRange(t: PanchangTime | undefined): string {
-	if (!t) return '';
-	if (t.start && t.end) return `${t.start} - ${t.end}`;
-	return t.start ?? t.end ?? '';
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-panchang-table': RoxyPanchangTable;

package/src/components/synastry-chart.ts

@@ -1,41 +1,26 @@
 import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import type {
+	CalculateSynastryResponse,
+	NatalChartResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { polarToCartesian } from '../utils/degree.js';
+import { formatNumber } from '../utils/format.js';
 
-interface PlanetEntry {
-	name?: string;
-	planet?: string;
-	longitude?: number;
-	degree?: number;
-	sign?: string;
-}
+type PlanetEntry = NatalChartResponse['planets'][number];
+type InterAspect = CalculateSynastryResponse['interAspects'][number];
 
-interface InterAspect {
-	planet1?: string;
-	planet2?: string;
-	aspect?: string;
-	orb?: number;
-	strength?: string;
-	interpretation?: string;
-}
-
-interface SynastryData {
-	person1?: {
-		planets?: PlanetEntry[] | Record<string, PlanetEntry>;
-		name?: string;
-	};
-	person2?: {
-		planets?: PlanetEntry[] | Record<string, PlanetEntry>;
-		name?: string;
-	};
-	compatibilityScore?: number;
-	summary?: string;
-	interAspects?: InterAspect[];
-	strengths?: string[];
-	challenges?: string[];
-}
+// TODO(spec): /astrology/synastry does not expose person1/person2 planet
+// positions, but the wheel needs them to plot the dual chart. The preview
+// injects them via scripts/refresh-samples.ts; production callers see an
+// empty wheel. Either add `planets` to the CalculateSynastry response or
+// document that callers must merge in their own natal-chart payloads.
+type SynastryWithPlanets = CalculateSynastryResponse & {
+	person1?: { planets?: PlanetEntry[] };
+	person2?: { planets?: PlanetEntry[] };
+};
 
 const SIZE = 360;
 const CENTER = SIZE / 2;
@@ -104,6 +89,42 @@ export class RoxySynastryChart extends LitElement {
 				font-weight: 600;
 				font-size: 13px;
 			}
+			.aspect {
+				stroke-width: 0.8;
+				fill: none;
+				opacity: 0.5;
+			}
+			.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.35;
+			}
+			.legend-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				margin-top: calc(var(--roxy-space-xs, 0.25rem) * -1);
+			}
+			.legend-row .swatch {
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				margin-right: 4px;
+				vertical-align: middle;
+			}
 
 			.summary {
 				margin: 0;
@@ -151,24 +172,101 @@ export class RoxySynastryChart extends LitElement {
 				padding-left: var(--roxy-space-md, 1rem);
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
+
+			.missing-planets {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				line-height: 1.5;
+			}
+			.missing-planets code {
+				font-family: var(--roxy-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+				font-size: 0.95em;
+				background: color-mix(in srgb, var(--roxy-fg, #0a0a0a) 6%, transparent);
+				padding: 0 4px;
+				border-radius: 4px;
+			}
 		`,
 	];
 
 	@property({ attribute: false })
-	data: SynastryData | null = null;
+	data: SynastryWithPlanets | null = null;
 
 	render() {
 		if (!this.data)
 			return html`<div class="roxy-empty" role="status">No synastry data</div>`;
-		const {
-			person1,
-			person2,
-			compatibilityScore,
-			summary,
-			interAspects = [],
-		} = this.data;
-		const p1Planets = this.normalizePlanets(person1?.planets);
-		const p2Planets = this.normalizePlanets(person2?.planets);
+		const { person1, person2, compatibilityScore, analysis } = this.data;
+		const interAspects = this.data.interAspects ?? [];
+		const p1Planets = person1?.planets ?? [];
+		const p2Planets = person2?.planets ?? [];
+
+		const score =
+			typeof compatibilityScore === 'number'
+				? Math.round(compatibilityScore)
+				: undefined;
+		const summaryText = analysis?.overall;
+		const strengths = analysis?.strengths ?? [];
+		const challenges = analysis?.challenges ?? [];
+
+		// /astrology/synastry does not return per-person planet positions, so the
+		// dual-wheel cannot be drawn from a bare synastry response. Surface this
+		// explicitly instead of rendering a blank wheel; keep the inter-aspects
+		// table when it is present so callers still get useful output.
+		const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
+		if (!hasPlanets) {
+			return html`<div
+				class="wrap"
+				aria-label="Synastry compatibility chart"
+			>
+				<div class="head">
+					<h2 class="title">Synastry</h2>
+					${
+						typeof score === 'number'
+							? html`<span class="score" aria-label=${`Score ${score} of 100`}
+								>${score} / 100</span
+							>`
+							: nothing
+					}
+				</div>
+				<div class="missing-planets" role="status">
+					Synastry response missing planet positions. Pass
+					<code>data</code> with <code>person1.planets</code> and
+					<code>person2.planets</code> arrays from the natal-chart endpoint, or
+					use the <code>&lt;roxy-data&gt;</code> fallback.
+				</div>
+				${summaryText ? html`<p class="summary">${summaryText}</p>` : nothing}
+				${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
+				${
+					strengths.length > 0 || challenges.length > 0
+						? html`<div class="lists">
+							${
+								strengths.length
+									? html`<div>
+										<h3>Strengths</h3>
+										<ul>
+											${strengths.map((s) => html`<li>${s}</li>`)}
+										</ul>
+									</div>`
+									: nothing
+							}
+							${
+								challenges.length
+									? html`<div>
+										<h3>Challenges</h3>
+										<ul>
+											${challenges.map((s) => html`<li>${s}</li>`)}
+										</ul>
+									</div>`
+									: nothing
+							}
+						</div>`
+						: nothing
+				}
+			</div>`;
+		}
 
 		return html`<div
 			class="wrap"
@@ -177,9 +275,9 @@ export class RoxySynastryChart extends LitElement {
 			<div class="head">
 				<h2 class="title">Synastry</h2>
 				${
-					typeof compatibilityScore === 'number'
-						? html`<span class="score" aria-label=${`Score ${compatibilityScore} of 100`}
-							>${compatibilityScore} / 100</span
+					typeof score === 'number'
+						? html`<span class="score" aria-label=${`Score ${score} of 100`}
+							>${score} / 100</span
 						>`
 						: nothing
 				}
@@ -212,30 +310,36 @@ export class RoxySynastryChart extends LitElement {
 					stroke-width="0.6"
 				/>
 				${this.renderSpokes()} ${this.renderSigns()}
+				${this.renderInterAspectLines(p1Planets, p2Planets, interAspects)}
 				${this.renderRing(p1Planets, P1_R, 'p1')} ${this.renderRing(p2Planets, P2_R, 'p2')}
 			</svg>
-			${summary ? html`<p class="summary">${summary}</p>` : nothing}
+			<div class="legend-row">
+				<span><span class="swatch" style="background: var(--roxy-accent)"></span>Person 1</span>
+				<span><span class="swatch" style="background: var(--roxy-info)"></span>Person 2</span>
+				<span><span class="swatch" style="background: var(--roxy-success)"></span>harmonious</span>
+				<span><span class="swatch" style="background: var(--roxy-danger)"></span>challenging</span>
+			</div>
+			${summaryText ? html`<p class="summary">${summaryText}</p>` : nothing}
 			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
 			${
-				(this.data.strengths?.length ?? 0) > 0 ||
-				(this.data.challenges?.length ?? 0) > 0
+				strengths.length > 0 || challenges.length > 0
 					? html`<div class="lists">
 						${
-							this.data.strengths?.length
+							strengths.length
 								? html`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${this.data.strengths.map((s) => html`<li>${s}</li>`)}
+										${strengths.map((s) => html`<li>${s}</li>`)}
 									</ul>
 								</div>`
 								: nothing
 						}
 						${
-							this.data.challenges?.length
+							challenges.length
 								? html`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${this.data.challenges.map((s) => html`<li>${s}</li>`)}
+										${challenges.map((s) => html`<li>${s}</li>`)}
 									</ul>
 								</div>`
 								: nothing
@@ -246,17 +350,13 @@ export class RoxySynastryChart extends LitElement {
 		</div>`;
 	}
 
-	private normalizePlanets(
-		p: PlanetEntry[] | Record<string, PlanetEntry> | undefined,
-	) {
-		if (!p) return [];
-		if (Array.isArray(p)) return p;
-		return Object.entries(p).map(([name, e]) => ({ ...e, name }));
+	private toAngle(longitude: number): number {
+		return 180 - longitude;
 	}
 
 	private renderSpokes() {
 		return Array.from({ length: 12 }, (_, i) => {
-			const angle = i * 30 - 90;
+			const angle = this.toAngle(i * 30);
 			const start = polarToCartesian(CENTER, CENTER, P2_R - 14, 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.6" />`;
@@ -279,7 +379,7 @@ export class RoxySynastryChart extends LitElement {
 			'Pisces',
 		];
 		return order.map((s, i) => {
-			const angle = i * 30 + 15 - 90;
+			const angle = this.toAngle(i * 30 + 15);
 			const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
 			return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
 		});
@@ -287,17 +387,44 @@ export class RoxySynastryChart extends LitElement {
 
 	private renderRing(planets: PlanetEntry[], radius: number, cls: string) {
 		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 pos = polarToCartesian(CENTER, CENTER, radius, lon - 90);
-			const name = p.name ?? p.planet ?? '';
-			const glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);
-			return svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${name}</title>${glyph}</text>`;
+			if (!Number.isFinite(p.longitude)) return nothing;
+			const pos = polarToCartesian(
+				CENTER,
+				CENTER,
+				radius,
+				this.toAngle(p.longitude),
+			);
+			const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
+			return svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}</title>${glyph}</text>`;
+		});
+	}
+
+	private renderInterAspectLines(
+		p1: PlanetEntry[],
+		p2: PlanetEntry[],
+		aspects: InterAspect[],
+	) {
+		const longitudeOf = (
+			list: PlanetEntry[],
+			name: string,
+		): number | undefined => {
+			const target = capitalize(name);
+			for (const p of list) {
+				if (capitalize(p.name) !== target) continue;
+				if (typeof p.longitude === 'number') return p.longitude;
+			}
+			return undefined;
+		};
+		return aspects.map((a) => {
+			const l1 = longitudeOf(p1, a.planet1);
+			const l2 = longitudeOf(p2, a.planet2);
+			if (l1 === undefined || l2 === undefined) return nothing;
+			const out = polarToCartesian(CENTER, CENTER, P1_R - 12, this.toAngle(l1));
+			const inn = polarToCartesian(CENTER, CENTER, P2_R + 8, this.toAngle(l2));
+			const aspectName = normalizeAspect(a);
+			const cls = ASPECT_CLASS[aspectName] ?? 'aspect-other';
+			const orbLabel = formatNumber(a.orb, 1);
+			return svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}°)` : ''}</title></line>`;
 		});
 	}
 
@@ -313,15 +440,13 @@ export class RoxySynastryChart extends LitElement {
 				</tr>
 			</thead>
 			<tbody>
-				${aspects.slice(0, 16).map(
+				${aspects.slice(0, 12).map(
 					(a) => html`<tr>
-						<td>${a.planet1 ?? ''}</td>
-						<td>${a.planet2 ?? ''}</td>
-						<td>${a.aspect ?? ''}</td>
-						<td class="orb">
-							${typeof a.orb === 'number' ? a.orb.toFixed(1) : ''}
-						</td>
-						<td>${a.strength ?? ''}</td>
+						<td>${a.planet1}</td>
+						<td>${a.planet2}</td>
+						<td>${normalizeAspect(a) || ''}</td>
+						<td class="orb">${formatNumber(a.orb, 1)}</td>
+						<td>${formatStrength(a.strength)}</td>
 					</tr>`,
 				)}
 			</tbody>
@@ -334,6 +459,23 @@ function capitalize(s: string): string {
 	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
 }
 
+const ASPECT_CLASS: Record<string, string> = {
+	conjunction: 'aspect-conjunction',
+	sextile: 'aspect-sextile',
+	square: 'aspect-square',
+	trine: 'aspect-trine',
+	opposition: 'aspect-opposition',
+};
+
+function normalizeAspect(a: InterAspect): string {
+	return (a.type ?? '').toLowerCase().replace(/_/g, '-');
+}
+
+function formatStrength(s: number | undefined): string {
+	if (typeof s === 'number') return Math.round(s).toString();
+	return '';
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-synastry-chart': RoxySynastryChart;