@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/synastry-chart.ts

@@ -1,41 +1,31 @@
 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 { PLANET_GLYPH, SIGN_GLYPH, SIGNS_ORDER } 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 {
+	ASPECT_CLASS,
+	formatNumber,
+	normalizeAspect,
+} from '../utils/format.js';
+import { capitalize } from '../utils/string.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[];
-}
+// Drawing the dual wheel requires per-person planet longitudes alongside
+// the synastry response. Callers can merge planet arrays from
+// /astrology/natal-chart into `person1.planets` and `person2.planets`
+// before passing the payload in; without them, the component falls back
+// to the inter-aspects table and a status note instead of an empty wheel.
+type SynastryWithPlanets = CalculateSynastryResponse & {
+	person1?: { planets?: PlanetEntry[] };
+	person2?: { planets?: PlanetEntry[] };
+};
 
 const SIZE = 360;
 const CENTER = SIZE / 2;
@@ -104,6 +94,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 +177,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 +280,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 +315,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 +355,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" />`;
@@ -264,22 +369,8 @@ export class RoxySynastryChart extends LitElement {
 	}
 
 	private renderSigns() {
-		const order = [
-			'Aries',
-			'Taurus',
-			'Gemini',
-			'Cancer',
-			'Leo',
-			'Virgo',
-			'Libra',
-			'Scorpio',
-			'Sagittarius',
-			'Capricorn',
-			'Aquarius',
-			'Pisces',
-		];
-		return order.map((s, i) => {
-			const angle = i * 30 + 15 - 90;
+		return SIGNS_ORDER.map((s, i) => {
+			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 +378,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 +431,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>
@@ -329,9 +445,9 @@ export class RoxySynastryChart extends LitElement {
 	}
 }
 
-function capitalize(s: string): string {
-	if (!s) return '';
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+function formatStrength(s: number | undefined): string {
+	if (typeof s === 'number') return Math.round(s).toString();
+	return '';
 }
 
 declare global {

package/src/components/tarot-card.ts

@@ -1,34 +1,9 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import type { GetCardResponse, GetDailyCardResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface TarotCard {
-	id?: string;
-	name?: string;
-	arcana?: 'major' | 'minor' | string;
-	number?: number | string;
-	position?: string;
-	reversed?: boolean;
-	keywords?: string[];
-	meaning?:
-		| string
-		| {
-				upright?: string;
-				reversed?: string;
-				spiritual?: string;
-				emotional?: string;
-				physical?: string;
-		  };
-	imageUrl?: string;
-	upright?: { meaning?: string; keywords?: string[] };
-}
-
-interface TarotData {
-	date?: string;
-	seed?: string;
-	card?: TarotCard;
-	dailyMessage?: string;
-}
+type TarotData = GetCardResponse | GetDailyCardResponse;
 
 /**
  * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip
@@ -92,11 +67,6 @@ export class RoxyTarotCard extends LitElement {
 				letter-spacing: 0.06em;
 				margin-bottom: var(--roxy-space-sm, 0.5rem);
 			}
-			.position {
-				color: var(--roxy-info, #0284c7);
-				margin-left: var(--roxy-space-xs, 0.25rem);
-				text-transform: capitalize;
-			}
 
 			.message {
 				color: var(--roxy-fg, #0a0a0a);
@@ -137,37 +107,28 @@ export class RoxyTarotCard extends LitElement {
 	];
 
 	@property({ attribute: false })
-	data: TarotData | TarotCard | null = null;
+	data: TarotData | null = null;
 
 	@state()
 	private flipped = false;
 
-	private getCard(): TarotCard | null {
-		if (!this.data) return null;
-		if ('card' in this.data && this.data.card) return this.data.card;
-		return this.data as TarotCard;
-	}
-
 	private toggleFlip = () => {
 		this.flipped = !this.flipped;
 	};
 
 	render() {
-		const card = this.getCard();
-		if (!card)
+		const d = this.data;
+		if (!d)
 			return html`<div class="roxy-empty" role="status">No tarot data</div>`;
 
-		const isReversed = this.flipped !== Boolean(card.reversed); // start at server-provided orientation, toggle on click
-		const meaning =
-			typeof card.meaning === 'string'
-				? card.meaning
-				: ((isReversed ? card.meaning?.reversed : card.meaning?.upright) ??
-					card.meaning?.spiritual ??
-					card.upright?.meaning);
-		const dailyMessage =
-			this.data && 'dailyMessage' in this.data
-				? this.data.dailyMessage
-				: undefined;
+		if ('card' in d) return this.renderDailyCard(d);
+		return this.renderFullCard(d);
+	}
+
+	private renderDailyCard(d: GetDailyCardResponse) {
+		const card = d.card;
+		const isReversed = this.flipped !== Boolean(card.reversed);
+		const keywords = card.keywords ?? [];
 
 		return html`<article class="card" aria-label=${card.name ?? 'Tarot card'}>
 			<div class="image-wrap">
@@ -197,21 +158,74 @@ export class RoxyTarotCard extends LitElement {
 			<div>
 				<div class="meta">
 					${card.arcana ? html`${card.arcana} arcana` : nothing}
-					${card.number !== undefined && card.number !== null ? html` · ${card.number}` : nothing}
 					${isReversed ? html` · reversed` : nothing}
-					${
-						card.position
-							? html`<span class="position">${card.position}</span>`
-							: nothing
-					}
 				</div>
 				<h2 class="title">${card.name ?? 'Tarot card'}</h2>
-				${dailyMessage ? html`<p class="message">${dailyMessage}</p>` : nothing}
-				${meaning ? html`<p>${meaning}</p>` : nothing}
+				${d.dailyMessage ? html`<p class="message">${d.dailyMessage}</p>` : nothing}
+				${card.meaning ? html`<p>${card.meaning}</p>` : nothing}
+				${
+					keywords.length > 0
+						? html`<div class="chips">
+							${keywords.map((k) => html`<span>${k}</span>`)}
+						</div>`
+						: nothing
+				}
+				<button
+					class="flip"
+					type="button"
+					@click=${this.toggleFlip}
+					aria-pressed=${this.flipped ? 'true' : 'false'}
+				>
+					Flip card
+				</button>
+			</div>
+		</article>`;
+	}
+
+	private renderFullCard(d: GetCardResponse) {
+		const isReversed = this.flipped;
+		const orientedMeaning = isReversed ? d.reversed : d.upright;
+		const keywords = isReversed
+			? (d.keywords?.reversed ?? [])
+			: (d.keywords?.upright ?? []);
+
+		return html`<article class="card" aria-label=${d.name ?? 'Tarot card'}>
+			<div class="image-wrap">
+				${
+					d.imageUrl
+						? html`<img
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							src=${d.imageUrl}
+							alt=${d.name ?? 'Tarot card'}
+							tabindex="0"
+							@click=${this.toggleFlip}
+							@keydown=${(e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									this.toggleFlip();
+								}
+							}}
+						/>`
+						: html`<div
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
+						>
+							${d.name ?? '?'}
+						</div>`
+				}
+			</div>
+			<div>
+				<div class="meta">
+					${d.arcana ? html`${d.arcana} arcana` : nothing}
+					${d.number !== undefined && d.number !== null ? html` · ${d.number}` : nothing}
+					${isReversed ? html` · reversed` : nothing}
+				</div>
+				<h2 class="title">${d.name ?? 'Tarot card'}</h2>
+				${orientedMeaning?.description ? html`<p>${orientedMeaning.description}</p>` : nothing}
 				${
-					card.keywords?.length
+					keywords.length > 0
 						? html`<div class="chips">
-							${card.keywords.map((k) => html`<span>${k}</span>`)}
+							${keywords.map((k) => html`<span>${k}</span>`)}
 						</div>`
 						: nothing
 				}