@roxyapi/ui 0.1.2 → 0.1.3

package/dist/utils/debounce.d.ts

@@ -1,5 +1,13 @@
 /**
  * Lightweight debounce for input handlers. Used by location search.
+ *
+ * The returned function exposes a `.cancel()` method so callers can clear a
+ * pending invocation when the host element disconnects, preventing the timer
+ * from firing on a detached node and mutating reactive state after teardown.
  */
-export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): F;
+export interface Debounced<F extends (...args: never[]) => unknown> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): Debounced<F>;
 //# sourceMappingURL=debounce.d.ts.map

package/dist/utils/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAC/D,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,GACV,CAAC,CAMH"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO;IACjE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAC/D,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,GACV,SAAS,CAAC,CAAC,CAAC,CAgBd"}

package/dist/utils/format.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Display formatters for ISO timestamps and floats coming back from the API.
+ * Every helper returns "" for nullish or unparseable input so it falls out of
+ * template literals cleanly.
+ */
+export declare function formatTime(input: unknown): string;
+export declare function formatDate(input: unknown): string;
+export declare function formatTimeRange(t: {
+    start?: string;
+    end?: string;
+} | undefined): string;
+export declare function formatNumber(value: unknown, dp?: number): string;
+export declare function formatPercent(value: unknown, dp?: number): string;
+export declare function formatLongitude(value: unknown): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/utils/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAWjD;AAED,wBAAgB,eAAe,CAC9B,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GAC7C,MAAM,CAMR;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,SAAI,GAAG,MAAM,CAG3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,SAAI,GAAG,MAAM,CAG5D;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAGtD"}

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const ROXY_UI_VERSION = "0.1.3";
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,6 +16,9 @@
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
     },
+    "./types": {
+      "types": "./dist/types/index.d.ts"
+    },
     "./styles/tokens.css": "./dist/styles/tokens.css",
     "./registry/*": "./dist/registry/*.json"
   },
@@ -63,6 +66,9 @@
     "./dist/components/*.js",
     "./dist/cdn/*.js"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "peerDependencies": {
     "lit": "^3.0.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/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;

package/src/components/dasha-timeline.ts

@@ -1,36 +1,25 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetCurrentDashaResponse,
+	GetMajorDashasResponse,
+	GetSubDashasResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
 
-interface DashaPeriod {
-	mahadashaLord?: string;
-	antardashaLord?: string;
-	pratyantardashaLord?: string;
-	lord?: string;
-	planet?: string;
-	startDate?: string;
-	endDate?: string;
-	years?: number;
-	durationYears?: number;
-}
+type DashaData =
+	| GetCurrentDashaResponse
+	| GetMajorDashasResponse
+	| GetSubDashasResponse;
 
-interface DashaData {
-	moonNakshatra?: string;
-	nakshatraName?: string;
-	nakshatraLord?: string;
-	mahadasha?: DashaPeriod;
-	antardasha?: DashaPeriod;
-	pratyantardasha?: DashaPeriod;
-	mahadashas?: DashaPeriod[];
-	antardashas?: DashaPeriod[];
-	mahadashaLord?: string;
-	mahadashaPeriod?: DashaPeriod;
-	birthDashaBalance?: { lord?: string; years?: number };
-	totalYears?: number;
-	remainingInMahadasha?: number;
-	remainingInAntardasha?: number;
-	remainingInPratyantardasha?: number;
-}
+type DashaPeriod = {
+	planet: string;
+	startDate: string;
+	endDate: string;
+	durationYears: number;
+	interpretation?: string;
+};
 
 /**
  * Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.
@@ -132,7 +121,7 @@ export class RoxyDashaTimeline extends LitElement {
 
 		const periods = this.collectPeriods(d);
 		const maxYears = periods.length
-			? Math.max(...periods.map((p) => p.durationYears ?? p.years ?? 1))
+			? Math.max(...periods.map((p) => p.durationYears))
 			: 0;
 
 		return html`<div class="wrap" aria-label="Dasha timeline">
@@ -147,11 +136,11 @@ export class RoxyDashaTimeline extends LitElement {
 					}
 				</h2>
 				${
-					d.nakshatraName || d.moonNakshatra
+					'nakshatraName' in d && d.nakshatraName
 						? html`<div class="nakshatra">
-							Moon nakshatra: ${d.nakshatraName ?? d.moonNakshatra}
-							${d.nakshatraLord ? html`(lord ${d.nakshatraLord})` : nothing}
-						</div>`
+						Moon nakshatra: ${d.nakshatraName}
+						${'nakshatraLord' in d && d.nakshatraLord ? html`(lord ${d.nakshatraLord})` : nothing}
+					</div>`
 						: nothing
 				}
 			</header>
@@ -168,68 +157,61 @@ export class RoxyDashaTimeline extends LitElement {
 	}
 
 	private renderCurrent(d: DashaData) {
+		if (!('mahadasha' in d)) return nothing;
 		return html`<div class="current">
 			${
-				d.mahadasha
+				'mahadasha' in d && d.mahadasha
 					? html`<div>
-						<span>Mahadasha</span>
-						<strong>${d.mahadasha.lord ?? d.mahadasha.mahadashaLord}</strong>
-						${
-							typeof d.remainingInMahadasha === 'number'
-								? html`<small>${d.remainingInMahadasha.toFixed(1)} years left</small>`
-								: nothing
-						}
-					</div>`
+					<span>Mahadasha</span>
+					<strong>${d.mahadasha.planet}</strong>
+					${
+						'remainingInMahadasha' in d && d.remainingInMahadasha
+							? html`<small>${formatNumber(d.remainingInMahadasha.years + d.remainingInMahadasha.months / 12, 1)} years left</small>`
+							: nothing
+					}
+				</div>`
 					: nothing
 			}
 			${
-				d.antardasha
+				'antardasha' in d && d.antardasha
 					? html`<div>
-						<span>Antardasha</span>
-						<strong>${d.antardasha.lord ?? d.antardasha.antardashaLord}</strong>
-						${
-							typeof d.remainingInAntardasha === 'number'
-								? html`<small>${d.remainingInAntardasha.toFixed(1)} years left</small>`
-								: nothing
-						}
-					</div>`
+					<span>Antardasha</span>
+					<strong>${d.antardasha.planet}</strong>
+					${
+						'remainingInAntardasha' in d && d.remainingInAntardasha
+							? html`<small>${formatNumber(d.remainingInAntardasha.years + d.remainingInAntardasha.months / 12, 1)} years left</small>`
+							: nothing
+					}
+				</div>`
 					: nothing
 			}
 			${
-				d.pratyantardasha
+				'pratyantardasha' in d && d.pratyantardasha
 					? html`<div>
-						<span>Pratyantardasha</span>
-						<strong
-							>${
-								d.pratyantardasha.lord ?? d.pratyantardasha.pratyantardashaLord
-							}</strong
-						>
-						${
-							typeof d.remainingInPratyantardasha === 'number'
-								? html`<small
-									>${d.remainingInPratyantardasha.toFixed(2)} years left</small
-								>`
-								: nothing
-						}
-					</div>`
+					<span>Pratyantardasha</span>
+					<strong>${d.pratyantardasha.planet}</strong>
+					${
+						'remainingInPratyantardasha' in d && d.remainingInPratyantardasha
+							? html`<small>${formatNumber(d.remainingInPratyantardasha.years + d.remainingInPratyantardasha.months / 12, 1)} years left</small>`
+							: nothing
+					}
+				</div>`
 					: nothing
 			}
 		</div>`;
 	}
 
 	private collectPeriods(d: DashaData): DashaPeriod[] {
-		if (this.period === 'major' && d.mahadashas?.length) return d.mahadashas;
-		if (this.period === 'sub' && d.antardashas?.length) return d.antardashas;
-		return d.mahadashas ?? d.antardashas ?? [];
+		if ('mahadashas' in d && d.mahadashas?.length) return d.mahadashas;
+		if ('antardashas' in d && d.antardashas?.length) return d.antardashas;
+		return [];
 	}
 
 	private renderBar(p: DashaPeriod, max: number) {
-		const lord =
-			p.lord ?? p.mahadashaLord ?? p.antardashaLord ?? p.planet ?? '';
-		const years = p.durationYears ?? p.years ?? 0;
+		const years = p.durationYears;
 		const width = max > 0 ? (years / max) * 100 : 0;
 		return html`<div class="bar" role="listitem">
-			<span>${lord}</span>
+			<span>${p.planet}</span>
 			<span class="bar-track"><span style="width: ${width}%"></span></span>
 			<span class="dates">
 				${p.startDate ? formatYear(p.startDate) : ''}