@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/biorhythm-chart.ts

@@ -1,58 +1,16 @@
 import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetCriticalDaysResponse,
+	GetDailyBiorhythmResponse,
+	GetForecastResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface DailyBiorhythm {
-	birthDate?: string;
-	targetDate?: string;
-	daysSinceBirth?: number;
-	cycles?: Record<string, number>;
-	energyRating?: number;
-	overallPhase?: string;
-	interpretation?: string;
-	advice?: string;
-	criticalAlerts?: string[];
-}
-
-interface BiorhythmDay {
-	date?: string;
-	cycles?: Record<string, number>;
-	energyRating?: number;
-}
-
-interface BiorhythmForecast {
-	birthDate?: string;
-	startDate?: string;
-	endDate?: string;
-	totalDays?: number;
-	summary?: {
-		bestDay?: string;
-		worstDay?: string;
-		criticalDayCount?: number;
-		averageEnergy?: number;
-		periodAdvice?: string;
-	};
-	days?: BiorhythmDay[];
-}
-
-interface CriticalDay {
-	date?: string;
-	cycle?: string;
-	period?: string;
-	direction?: string;
-	severity?: string;
-	advisory?: string;
-}
-
-interface CriticalDays {
-	birthDate?: string;
-	startDate?: string;
-	endDate?: string;
-	totalCriticalDays?: number;
-	criticalDays?: CriticalDay[];
-}
-
-type BiorhythmData = DailyBiorhythm & BiorhythmForecast & CriticalDays;
+type BiorhythmData =
+	| GetDailyBiorhythmResponse
+	| GetForecastResponse
+	| GetCriticalDaysResponse;
 
 const CYCLE_COLOR: Record<string, string> = {
 	physical: '#dc2626',
@@ -164,18 +122,22 @@ export class RoxyBiorhythmChart extends LitElement {
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No biorhythm data</div>`;
 
-		if (this.mode === 'critical-days' && d.criticalDays?.length) {
-			return this.renderCritical(d);
+		if (this.mode === 'critical-days' && 'criticalDays' in d) {
+			return this.renderCritical(d as GetCriticalDaysResponse);
 		}
-		if (this.mode === 'forecast' && d.days?.length) {
-			return this.renderForecast(d);
+		if (this.mode === 'forecast' && 'days' in d) {
+			return this.renderForecast(d as GetForecastResponse);
 		}
-		return this.renderDaily(d);
+		return this.renderDaily(d as GetDailyBiorhythmResponse);
 	}
 
-	private renderDaily(d: DailyBiorhythm) {
-		const cycles = d.cycles ?? {};
-		const entries = Object.entries(cycles);
+	private renderDaily(d: GetDailyBiorhythmResponse) {
+		const raw = d.quickRead ?? {};
+		const entries = Object.entries(raw).map(([cycle, value]) => {
+			const v = typeof value === 'number' ? value : 0;
+			const normalized = Math.abs(v) > 1 ? v / 100 : v;
+			return [cycle, normalized] as const;
+		});
 		return html`<section class="wrap" aria-label="Daily biorhythm">
 			<header class="head">
 				<h2 class="title">Biorhythm</h2>
@@ -186,8 +148,7 @@ export class RoxyBiorhythmChart extends LitElement {
 				}
 			</header>
 			<div class="bars" role="list">
-				${entries.map(([cycle, value]) => {
-					const v = typeof value === 'number' ? value : 0;
+				${entries.map(([cycle, v]) => {
 					const pct = ((v + 1) / 2) * 100; // -1..1 -> 0..100
 					const color = CYCLE_COLOR[cycle] ?? 'var(--roxy-accent, #f59e0b)';
 					return html`<div class="bar" role="listitem">
@@ -198,36 +159,32 @@ export class RoxyBiorhythmChart extends LitElement {
 								style="width: ${pct}%; background: ${color}"
 							></span>
 						</span>
-						<span class="value">${(v * 100).toFixed(0)}%</span>
+						<span class="value">${Math.round(v * 100)}%</span>
 					</div>`;
 				})}
 			</div>
-			${d.interpretation ? html`<p class="advice">${d.interpretation}</p>` : nothing}
+			${d.dailyMessage ? html`<p class="advice">${d.dailyMessage}</p>` : nothing}
 			${d.advice ? html`<p class="advice">${d.advice}</p>` : nothing}
-			${
-				d.criticalAlerts?.length
-					? html`<div>
-						${d.criticalAlerts.map((a) => html`<p class="alert">${a}</p>`)}
-					</div>`
-					: nothing
-			}
 		</section>`;
 	}
 
-	private renderForecast(d: BiorhythmForecast) {
+	private renderForecast(d: GetForecastResponse) {
 		const days = d.days ?? [];
 		if (days.length === 0)
 			return html`<div class="roxy-empty" role="status">No forecast</div>`;
 		const w = 600;
 		const h = 160;
 		const xStep = w / Math.max(days.length - 1, 1);
-		const cycles = Object.keys(days[0]?.cycles ?? {});
+		const cycleKeys = [
+			'physical',
+			'emotional',
+			'intellectual',
+			'intuitive',
+		] as const;
 		return html`<section class="wrap" aria-label="Biorhythm forecast">
 			<header class="head">
 				<h2 class="title">Forecast</h2>
-				<span class="energy"
-					>${d.startDate ?? ''} - ${d.endDate ?? ''}</span
-				>
+				<span class="energy">${d.startDate} - ${d.endDate}</span>
 			</header>
 			<svg
 				viewBox="0 0 ${w} ${h}"
@@ -243,12 +200,12 @@ export class RoxyBiorhythmChart extends LitElement {
 					stroke="var(--roxy-border, #e4e4e7)"
 					stroke-width="1"
 				/>
-				${cycles.map((cycle) => {
+				${cycleKeys.map((cycle) => {
 					const points = days
 						.map((day, i) => {
-							const v = day.cycles?.[cycle] ?? 0;
+							const v = day[cycle] ?? 0;
 							const x = i * xStep;
-							const y = h / 2 - v * (h / 2 - 8);
+							const y = h / 2 - (v / 100) * (h / 2 - 8);
 							return `${x.toFixed(2)},${y.toFixed(2)}`;
 						})
 						.join(' ');
@@ -264,18 +221,16 @@ export class RoxyBiorhythmChart extends LitElement {
 		</section>`;
 	}
 
-	private renderCritical(d: CriticalDays) {
+	private renderCritical(d: GetCriticalDaysResponse) {
 		return html`<section class="wrap" aria-label="Critical days">
 			<header class="head">
 				<h2 class="title">Critical days</h2>
-				<span class="energy"
-					>${d.totalCriticalDays ?? d.criticalDays?.length ?? 0} total</span
-				>
+				<span class="energy">${d.totalCriticalDays} total</span>
 			</header>
 			<div>
-				${(d.criticalDays ?? []).map(
+				${d.criticalDays.map(
 					(day) => html`<span class="crit"
-						>${day.date} · ${day.cycle ?? ''} ${day.severity ?? ''}</span
+						>${day.date} · ${day.cycle} ${day.severity}</span
 					>`,
 				)}
 			</div>

package/src/components/choghadiya-grid.ts

@@ -0,0 +1,185 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type { GetChoghadiyaResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+type ChoghadiyaPeriod = GetChoghadiyaResponse['dayChoghadiya'][number];
+
+/**
+ * Format an ISO 8601 datetime string to a short local time (HH:MM).
+ * Falls back to the raw string when parsing fails.
+ */
+function fmtTime(iso: string): string {
+	try {
+		const d = new Date(iso);
+		if (Number.isNaN(d.getTime())) return iso;
+		return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+	} catch {
+		return iso;
+	}
+}
+
+/**
+ * Choghadiya muhurta grid. Accepts a GetChoghadiyaResponse and renders
+ * 8 daytime and 8 nighttime muhurta tiles in a two-column responsive layout.
+ * Good periods are highlighted in green, Bad periods in red.
+ */
+@customElement('roxy-choghadiya-grid')
+export class RoxyChoghadiyaGrid extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.header {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.subtitle {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+			}
+			.cho-grid {
+				display: grid;
+				grid-template-columns: 1fr;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			@media (min-width: 720px) {
+				.cho-grid {
+					grid-template-columns: 1fr 1fr;
+				}
+			}
+			.period-col {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.period-heading {
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile {
+				display: grid;
+				grid-template-columns: 1fr auto;
+				align-items: center;
+				gap: 0.25em 0.75em;
+				padding: 0.55em 0.85em;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+			}
+			.cho-tile.good {
+				background: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);
+				border-color: color-mix(in srgb, var(--roxy-success, #22c55e) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile.bad {
+				background: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);
+				border-color: color-mix(in srgb, var(--roxy-danger, #ef4444) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile.neutral {
+				background: transparent;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.tile-name {
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				grid-column: 1;
+			}
+			.tile-time {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				opacity: 0.8;
+				white-space: nowrap;
+				grid-column: 2;
+				grid-row: 1 / 3;
+				text-align: right;
+				align-self: center;
+			}
+			.tile-lord {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				opacity: 0.85;
+				grid-column: 1;
+				display: flex;
+				align-items: center;
+				gap: 0.25em;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: GetChoghadiyaResponse | null = null;
+
+	private renderTile(period: ChoghadiyaPeriod) {
+		const effectClass =
+			period.effect === 'Good'
+				? 'good'
+				: period.effect === 'Bad'
+					? 'bad'
+					: 'neutral';
+		const lordGlyph = PLANET_GLYPH[capitalize(period.lord)] ?? '';
+		const timeRange = `${fmtTime(period.start)} - ${fmtTime(period.end)}`;
+		return html`<div class="cho-tile ${effectClass}" role="listitem">
+			<span class="tile-name">${period.name}</span>
+			<span class="tile-time" aria-label="Time range">${timeRange}</span>
+			<span class="tile-lord">
+				${lordGlyph ? html`<span aria-hidden="true">${lordGlyph}</span>` : nothing}
+				${period.lord}
+			</span>
+		</div>`;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No choghadiya data</div>`;
+
+		const { date, dayChoghadiya, nightChoghadiya } = this.data;
+
+		return html`<div class="wrap">
+			<div class="header">
+				<h2 class="title">Choghadiya</h2>
+				${date ? html`<p class="subtitle">${date}</p>` : nothing}
+			</div>
+
+			<div class="cho-grid">
+				<section class="period-col" aria-label="Day muhurta periods">
+					<h3 class="period-heading">Day</h3>
+					<div role="list" aria-label="Daytime choghadiya">
+						${
+							dayChoghadiya && dayChoghadiya.length > 0
+								? dayChoghadiya.map((p) => this.renderTile(p))
+								: html`<p class="roxy-empty" role="status">No daytime periods</p>`
+						}
+					</div>
+				</section>
+
+				<section class="period-col" aria-label="Night muhurta periods">
+					<h3 class="period-heading">Night</h3>
+					<div role="list" aria-label="Nighttime choghadiya">
+						${
+							nightChoghadiya && nightChoghadiya.length > 0
+								? nightChoghadiya.map((p) => this.renderTile(p))
+								: html`<p class="roxy-empty" role="status">No nighttime periods</p>`
+						}
+					</div>
+				</section>
+			</div>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-choghadiya-grid': RoxyChoghadiyaGrid;
+	}
+}

package/src/components/compatibility-card.ts

@@ -1,26 +1,17 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	CalculateBioCompatibilityResponse,
+	CalculateCompatibilityResponse,
+	CalculateNumCompatibilityResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
 
-interface CompatibilityData {
-	overallScore?: number;
-	score?: number;
-	rating?: string;
-	relationshipArchetype?: string;
-	advice?: string;
-	summary?: string;
-	categoryScores?: Record<string, number>;
-	categoryBreakdown?: Record<string, number>;
-	emotional?: number;
-	communication?: number;
-	romance?: number;
-	strengths?: string[];
-	challenges?: string[];
-	keyAspects?: string[];
-	elementBalance?: Record<string, number>;
-	person1?: { name?: string; sign?: string; lifePath?: number };
-	person2?: { name?: string; sign?: string; lifePath?: number };
-}
+type CompatibilityData =
+	| CalculateCompatibilityResponse
+	| CalculateNumCompatibilityResponse
+	| CalculateBioCompatibilityResponse;
 
 /**
  * Cross-domain compatibility card. Renders /astrology/compatibility-score,
@@ -94,7 +85,7 @@ export class RoxyCompatibilityCard extends LitElement {
 			}
 
 			.archetype {
-				color: var(--roxy-info, #0284c7);
+				color: var(--roxy-accent-fg, #b45309);
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 
@@ -126,23 +117,49 @@ export class RoxyCompatibilityCard extends LitElement {
 	private getBreakdown(): Record<string, number> {
 		const d = this.data;
 		if (!d) return {};
-		if (d.categoryScores) return d.categoryScores;
-		if (d.categoryBreakdown) return d.categoryBreakdown;
-		const inferred: Record<string, number> = {};
-		if (typeof d.emotional === 'number') inferred.emotional = d.emotional;
-		if (typeof d.communication === 'number')
-			inferred.communication = d.communication;
-		if (typeof d.romance === 'number') inferred.romance = d.romance;
-		if (d.elementBalance) Object.assign(inferred, d.elementBalance);
-		return inferred;
+		if ('categories' in d && d.categories) {
+			const out: Record<string, number> = {};
+			for (const [k, v] of Object.entries(d.categories)) {
+				if (typeof v === 'number' && Number.isFinite(v)) out[k] = v;
+			}
+			return out;
+		}
+		return {};
 	}
 
 	render() {
 		const d = this.data;
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
-		const score = d.overallScore ?? d.score;
+
+		const score = d.overallScore;
 		const breakdown = this.getBreakdown();
+		const rating =
+			'rating' in d
+				? (d as CalculateNumCompatibilityResponse).rating
+				: undefined;
+		const archetype =
+			'archetype' in d
+				? (d as CalculateCompatibilityResponse).archetype
+				: undefined;
+		const advice =
+			'advice' in d
+				? (d as CalculateNumCompatibilityResponse).advice
+				: undefined;
+		const summary =
+			'summary' in d
+				? (d as CalculateCompatibilityResponse).summary
+				: undefined;
+		const interpretation =
+			'interpretation' in d
+				? (d as CalculateCompatibilityResponse).interpretation
+				: undefined;
+		const strengths = 'strengths' in d ? d.strengths : undefined;
+		const challenges = 'challenges' in d ? d.challenges : undefined;
+		const keyAspects =
+			'keyAspects' in d
+				? (d as CalculateCompatibilityResponse).keyAspects
+				: undefined;
 
 		return html`<article
 			class="card"
@@ -153,10 +170,10 @@ export class RoxyCompatibilityCard extends LitElement {
 				<div>
 					${
 						typeof score === 'number'
-							? html`<div class="score">${score}</div>`
+							? html`<div class="score">${formatNumber(score, 0)}</div>`
 							: nothing
 					}
-					${d.rating ? html`<div class="rating">${d.rating}</div>` : nothing}
+					${rating ? html`<div class="rating">${rating}</div>` : nothing}
 				</div>
 			</div>
 
@@ -169,50 +186,42 @@ export class RoxyCompatibilityCard extends LitElement {
 								<span class="bar"
 									><span style="width: ${Math.max(0, Math.min(100, v))}%"></span
 								></span>
-								<span>${v}</span>
+								<span>${formatNumber(v, 0)}</span>
 							</div>`,
 						)}
 					</div>`
 					: nothing
 			}
 			${
-				d.relationshipArchetype
+				archetype
 					? html`<p>
-						<span class="archetype">${d.relationshipArchetype}</span>
+						<span class="archetype">${archetype.label}</span>
+						${archetype.description ? html` · ${archetype.description}` : nothing}
 					</p>`
 					: nothing
 			}
-			${d.summary ? html`<p>${d.summary}</p>` : nothing}
-			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${summary ? html`<p>${summary}</p>` : nothing}
+			${interpretation && !summary ? html`<p>${interpretation}</p>` : nothing}
+			${advice ? html`<p>${advice}</p>` : nothing}
 			${
-				(d.strengths?.length ?? 0) > 0 || (d.challenges?.length ?? 0) > 0
+				(strengths?.length ?? 0) > 0 || (challenges?.length ?? 0) > 0
 					? html`<div class="lists">
 						${
-							d.strengths?.length
+							strengths?.length
 								? html`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${d.strengths.map((s) => html`<li>${s}</li>`)}
+										${strengths.map((s) => html`<li>${s}</li>`)}
 									</ul>
 								</div>`
 								: nothing
 						}
 						${
-							d.challenges?.length
+							challenges?.length
 								? html`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${d.challenges.map((s) => html`<li>${s}</li>`)}
-									</ul>
-								</div>`
-								: nothing
-						}
-						${
-							d.keyAspects?.length
-								? html`<div>
-									<h3>Key aspects</h3>
-									<ul>
-										${d.keyAspects.map((s) => html`<li>${s}</li>`)}
+										${challenges.map((s) => html`<li>${s}</li>`)}
 									</ul>
 								</div>`
 								: nothing
@@ -220,10 +229,34 @@ export class RoxyCompatibilityCard extends LitElement {
 					</div>`
 					: nothing
 			}
+			${
+				keyAspects?.length
+					? html`<div>
+						<h3 style="margin: 0 0 0.25rem; font-size: var(--roxy-text-xs); color: var(--roxy-muted); text-transform: uppercase; letter-spacing: 0.06em;">Key aspects</h3>
+						<ul style="margin: 0; padding-left: 1rem; font-size: var(--roxy-text-sm);">
+							${keyAspects.slice(0, 6).map((a) => html`<li>${formatAspect(a)}</li>`)}
+						</ul>
+					</div>`
+					: nothing
+			}
 		</article>`;
 	}
 }
 
+type KeyAspect = CalculateCompatibilityResponse extends {
+	keyAspects: Array<infer T>;
+}
+	? T
+	: never;
+
+function formatAspect(a: KeyAspect): string {
+	const aspect = a.type.toLowerCase().replace(/_/g, '-');
+	const orb =
+		typeof a.orb === 'number' ? ` (orb ${formatNumber(a.orb, 1)}°)` : '';
+	const head = [a.planet1, aspect, a.planet2].filter(Boolean).join(' ');
+	return a.description ? `${head}${orb} · ${a.description}` : `${head}${orb}`;
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-compatibility-card': RoxyCompatibilityCard;