@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/horoscope-card.ts

@@ -1,28 +1,18 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { SIGN_GLYPH } from '../tokens/index.js';
+import type {
+	GetDailyHoroscopeResponse,
+	GetMonthlyHoroscopeResponse,
+	GetWeeklyHoroscopeResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
 
-interface HoroscopeData {
-	sign?: string;
-	date?: string;
-	overview?: string;
-	love?: string;
-	career?: string;
-	health?: string;
-	finance?: string;
-	advice?: string;
-	luckyNumber?: number | string;
-	luckyColor?: string;
-	compatibleSigns?: string[];
-	moonSign?: string;
-	moonPhase?: string;
-	energyRating?: number;
-	week?: string;
-	month?: string;
-	luckyDays?: string[];
-	luckyNumbers?: number[];
-}
+type HoroscopeData =
+	| GetDailyHoroscopeResponse
+	| GetWeeklyHoroscopeResponse
+	| GetMonthlyHoroscopeResponse;
 
 /**
  * Daily, weekly, or monthly horoscope card. Pass `data` from
@@ -134,6 +124,13 @@ export class RoxyHoroscopeCard extends LitElement {
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 
+			.compat-wrap {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
 			.compat {
 				display: flex;
 				flex-wrap: wrap;
@@ -163,8 +160,15 @@ export class RoxyHoroscopeCard extends LitElement {
 
 		const sign = d.sign ?? '';
 		const glyph = sign ? (SIGN_GLYPH[capitalize(sign)] ?? '') : '';
-		const energy = typeof d.energyRating === 'number' ? d.energyRating : null;
-		const dateLabel = d.date ?? d.week ?? d.month ?? '';
+		const energy =
+			'energyRating' in d && typeof d.energyRating === 'number'
+				? d.energyRating
+				: null;
+		const dateLabel =
+			('date' in d && d.date) ||
+			('week' in d && d.week) ||
+			('month' in d && d.month) ||
+			'';
 
 		return html`<article
 			class="card"
@@ -224,7 +228,7 @@ export class RoxyHoroscopeCard extends LitElement {
 						: nothing
 				}
 				${
-					d.advice
+					'advice' in d && d.advice
 						? html`<div class="section">
 							<h3>Advice</h3>
 							<p>${d.advice}</p>
@@ -233,57 +237,69 @@ export class RoxyHoroscopeCard extends LitElement {
 				}
 			</div>
 
-			${
-				d.luckyNumber || d.luckyColor || (d.compatibleSigns?.length ?? 0) > 0
-					? html`<div class="lucky">
+			${(() => {
+				const luckyNumber =
+					'luckyNumber' in d && d.luckyNumber !== undefined
+						? d.luckyNumber
+						: undefined;
+				const luckyColor =
+					'luckyColor' in d && d.luckyColor ? d.luckyColor : '';
+				const luckyNumbers =
+					'luckyNumbers' in d && d.luckyNumbers ? d.luckyNumbers : [];
+				const luckyDays = 'luckyDays' in d && d.luckyDays ? d.luckyDays : [];
+				const compatibleSigns = d.compatibleSigns ?? [];
+				if (
+					luckyNumber === undefined &&
+					!luckyColor &&
+					luckyNumbers.length === 0 &&
+					luckyDays.length === 0 &&
+					compatibleSigns.length === 0
+				)
+					return nothing;
+				return html`<div class="lucky">
 						${
-							d.luckyNumber !== undefined
-								? html`<span>Lucky number <strong>${d.luckyNumber}</strong></span>`
+							luckyNumber !== undefined
+								? html`<span>Lucky number <strong>${luckyNumber}</strong></span>`
 								: nothing
 						}
 						${
-							d.luckyColor
-								? html`<span>Lucky color <strong>${d.luckyColor}</strong></span>`
+							luckyColor
+								? html`<span>Lucky color <strong>${luckyColor}</strong></span>`
 								: nothing
 						}
 						${
-							d.luckyNumbers?.length
+							luckyNumbers.length
 								? html`<span
 									>Lucky numbers
-									<strong>${d.luckyNumbers.join(', ')}</strong></span
+									<strong>${luckyNumbers.join(', ')}</strong></span
 								>`
 								: nothing
 						}
 						${
-							d.luckyDays?.length
+							luckyDays.length
 								? html`<span
-									>Lucky days <strong>${d.luckyDays.join(', ')}</strong></span
+									>Lucky days <strong>${luckyDays.join(', ')}</strong></span
 								>`
 								: nothing
 						}
 						${
-							d.compatibleSigns?.length
+							compatibleSigns.length
 								? html`<span class="compat-wrap">
 									Best with
 									<span class="compat"
-										>${d.compatibleSigns.map(
+										>${compatibleSigns.map(
 											(s) => html`<span>${s}</span>`,
 										)}</span
 									>
 								</span>`
 								: nothing
 						}
-					</div>`
-					: nothing
-			}
+					</div>`;
+			})()}
 		</article>`;
 	}
 }
 
-function capitalize(s: string): string {
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-horoscope-card': RoxyHoroscopeCard;

package/src/components/kp-planets-table.ts

@@ -1,27 +1,8 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type { KpPlanetsResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
-
-interface KpPlanet {
-	planet?: string;
-	name?: string;
-	sign?: string;
-	signLord?: string;
-	nakshatra?: string;
-	nakshatraLord?: string;
-	pada?: number;
-	starLord?: string;
-	subLord?: string;
-	subSubLord?: string;
-	kpNumber?: number;
-	retrograde?: boolean;
-	longitude?: number;
-}
-
-interface KpData {
-	ayanamsa?: number | string;
-	planets?: KpPlanet[];
-}
+import { formatNumber } from '../utils/format.js';
 
 /**
  * KP planets table with sub-lord and sub-sub-lord columns. Renders
@@ -86,7 +67,7 @@ export class RoxyKpPlanetsTable extends LitElement {
 				color: var(--roxy-fg, #0a0a0a);
 			}
 			.retro {
-				color: var(--roxy-warning, #ea580c);
+				color: var(--roxy-warning-fg, #9a3412);
 				font-size: var(--roxy-text-xs, 0.75rem);
 				margin-left: 4px;
 			}
@@ -94,7 +75,7 @@ export class RoxyKpPlanetsTable extends LitElement {
 	];
 
 	@property({ attribute: false })
-	data: KpData | null = null;
+	data: KpPlanetsResponse | null = null;
 
 	render() {
 		if (!this.data)
@@ -109,8 +90,8 @@ export class RoxyKpPlanetsTable extends LitElement {
 			<header class="head">
 				<h2 class="title">KP planets</h2>
 				${
-					this.data.ayanamsa
-						? html`<span class="ayanamsa">Ayanamsa: ${this.data.ayanamsa}</span>`
+					typeof this.data.ayanamsa === 'number'
+						? html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>`
 						: nothing
 				}
 			</header>
@@ -131,13 +112,13 @@ export class RoxyKpPlanetsTable extends LitElement {
 					${planets.map(
 						(p) => html`<tr>
 							<td class="planet">
-								${p.planet ?? p.name ?? ''}
+								${p.planet}
 								${p.retrograde ? html`<span class="retro">R</span>` : nothing}
 							</td>
 							<td>${p.sign ?? ''}</td>
 							<td>${p.signLord ?? ''}</td>
 							<td>${p.nakshatra ?? ''}</td>
-							<td>${p.starLord ?? p.nakshatraLord ?? ''}</td>
+							<td>${p.nakshatraLord ?? ''}</td>
 							<td>${p.subLord ?? ''}</td>
 							<td>${p.subSubLord ?? ''}</td>
 							<td>${p.kpNumber ?? ''}</td>

package/src/components/location-search.ts

@@ -1,33 +1,18 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import type { SearchCitiesResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { debounce } from '../utils/debounce.js';
 
-export interface CityResult {
-	city: string;
-	province?: string;
-	country: string;
-	iso2?: string;
-	latitude: number;
-	longitude: number;
-	timezone: string;
-	utcOffset: number;
-	population?: number;
-}
-
-interface CitySearchResponse {
-	total?: number;
-	cities?: CityResult[];
-}
+type CityResult = SearchCitiesResponse['cities'][number];
 
 /**
  * Stateful location search input. Calls /location/search and emits
  * `roxy-location-select` CustomEvent with the chosen city. Required for any
  * chart endpoint.
  *
- * Lifted from jyotish-vedic-astrology-app/src/components/city-search.tsx,
- * keeping the 300ms debounce and click-outside behavior, replacing React
- * state with Lit reactive properties and using direct fetch to RoxyAPI.
+ * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation
+ * with arrow keys / Enter / Escape, AbortController on stale requests.
  *
  * Attributes:
  *   api-key            optional. Direct call to roxyapi.com when set.
@@ -175,6 +160,8 @@ export class RoxyLocationSearch extends LitElement {
 	private highlight = -1;
 
 	private clickOutsideHandler?: (e: MouseEvent) => void;
+	private abortController?: AbortController;
+	private secretKeyWarned = false;
 	private debouncedFetch = debounce((q: string) => {
 		void this.fetchResults(q);
 	}, 300);
@@ -194,9 +181,41 @@ export class RoxyLocationSearch extends LitElement {
 		if (this.clickOutsideHandler) {
 			document.removeEventListener('mousedown', this.clickOutsideHandler);
 		}
+		this.debouncedFetch.cancel();
+		if (this.abortController) {
+			this.abortController.abort();
+			this.abortController = undefined;
+		}
+	}
+
+	private warnIfSecretKey() {
+		if (this.secretKeyWarned) return;
+		if (!this.apiKey) return;
+		// Browser-safe publishable keys carry the `pk_` prefix and a server-side
+		// origin allowlist. Anything else (a raw secret key, UUID-style token)
+		// must not ship to the browser.
+		if (this.apiKey.startsWith('pk_')) return;
+		this.secretKeyWarned = true;
+		const message =
+			'Possible secret key in client-side <roxy-location-search>; use a `pk_` publishable key with origin allowlist instead.';
+		// eslint-disable-next-line no-console
+		console.warn(message);
+		this.dispatchEvent(
+			new CustomEvent('roxy-validation-error', {
+				detail: { reason: 'possible-secret-key', message },
+				bubbles: true,
+				composed: true,
+			}),
+		);
 	}
 
 	private async fetchResults(q: string) {
+		this.warnIfSecretKey();
+		// Abort any in-flight request so a stale response cannot overwrite a
+		// fresher one (debounced typing) or land after disconnect.
+		if (this.abortController) this.abortController.abort();
+		const controller = new AbortController();
+		this.abortController = controller;
 		this.isLoading = true;
 		try {
 			const url = new URL(this.endpoint);
@@ -207,17 +226,22 @@ export class RoxyLocationSearch extends LitElement {
 			};
 			if (this.apiKey) headers['X-API-Key'] = this.apiKey;
 			if (this.publishableKey) headers['X-API-Key'] = this.publishableKey;
-			const res = await fetch(url, { headers });
+			const res = await fetch(url, { headers, signal: controller.signal });
 			if (!res.ok) throw new Error(`HTTP ${res.status}`);
-			const json = (await res.json()) as CitySearchResponse;
+			const json = (await res.json()) as SearchCitiesResponse;
+			if (controller.signal.aborted) return;
 			this.results = json.cities ?? [];
 			this.isOpen = this.results.length > 0;
 			this.highlight = this.results.length > 0 ? 0 : -1;
-		} catch (_err) {
+		} catch (err) {
+			if ((err as { name?: string })?.name === 'AbortError') return;
 			this.results = [];
 			this.isOpen = false;
 		} finally {
-			this.isLoading = false;
+			if (this.abortController === controller) {
+				this.abortController = undefined;
+			}
+			if (!controller.signal.aborted) this.isLoading = false;
 		}
 	}
 

package/src/components/moon-phase.ts

@@ -1,27 +1,21 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MOON_PHASE_EMOJI } from '../tokens/index.js';
+import type {
+	GetCurrentMoonPhaseResponse,
+	GetMoonCalendarResponse,
+	GetUpcomingMoonPhasesResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
 
-interface MoonPhaseData {
-	date?: string;
-	phase?: string;
-	illumination?: number;
-	age?: number;
-	sign?: string;
-	degree?: number;
-	distance?: number;
-	meaning?: {
-		name?: string;
-		symbol?: string;
-		description?: string;
-		keywords?: string[];
-	};
-	month?: string;
-	year?: number;
-	phases?: Array<MoonPhaseData>;
-	upcoming?: Array<MoonPhaseData>;
-}
+type MoonPhaseData =
+	| GetCurrentMoonPhaseResponse
+	| GetUpcomingMoonPhasesResponse
+	| GetMoonCalendarResponse;
+type MoonListEntry =
+	| GetUpcomingMoonPhasesResponse['phases'][number]
+	| GetMoonCalendarResponse['calendar'][number];
 
 /**
  * Moon phase card. Renders /astrology/moon-phase/{current,upcoming,calendar/...}.
@@ -125,22 +119,26 @@ export class RoxyMoonPhase extends LitElement {
 		const d = this.data;
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No moon phase data</div>`;
-		const list = d.phases ?? d.upcoming ?? [];
+		const list: MoonListEntry[] =
+			'phases' in d ? d.phases : 'calendar' in d ? d.calendar : [];
 		if (this.mode !== 'current' && list.length > 0) {
+			const month = 'month' in d ? d.month : undefined;
+			const year = 'year' in d ? d.year : undefined;
 			return html`<article
 				class="card"
 				aria-label="Moon phase calendar"
 			>
-				<h2 class="label">${d.month ?? 'Moon phases'} ${d.year ?? ''}</h2>
+				<h2 class="label">${month ?? 'Moon phases'} ${year ?? ''}</h2>
 				<div class="list" role="list">
 					${list.map((phase) => this.renderListItem(phase))}
 				</div>
 			</article>`;
 		}
+		if (!('phase' in d)) return nothing;
 		return this.renderSingle(d);
 	}
 
-	private renderSingle(d: MoonPhaseData) {
+	private renderSingle(d: GetCurrentMoonPhaseResponse) {
 		const emoji = phaseEmoji(d.phase);
 		return html`<article class="card" aria-label="Current moon phase">
 			<div class="hero">
@@ -155,7 +153,7 @@ export class RoxyMoonPhase extends LitElement {
 					typeof d.illumination === 'number'
 						? html`<div>
 							<span>Illumination</span>
-							<strong>${(d.illumination * 100).toFixed(0)}%</strong>
+							<strong>${formatIllumination(d.illumination)}</strong>
 						</div>`
 						: nothing
 				}
@@ -163,7 +161,7 @@ export class RoxyMoonPhase extends LitElement {
 					typeof d.age === 'number'
 						? html`<div>
 							<span>Age</span>
-							<strong>${d.age.toFixed(1)} days</strong>
+							<strong>${formatNumber(d.age, 1)} days</strong>
 						</div>`
 						: nothing
 				}
@@ -199,7 +197,7 @@ export class RoxyMoonPhase extends LitElement {
 		</article>`;
 	}
 
-	private renderListItem(p: MoonPhaseData) {
+	private renderListItem(p: MoonListEntry) {
 		const emoji = phaseEmoji(p.phase);
 		return html`<div class="list-item" role="listitem">
 			<span aria-hidden="true">${emoji}</span>
@@ -214,6 +212,11 @@ function phaseEmoji(phase: string | undefined): string {
 	return MOON_PHASE_EMOJI[phase.toLowerCase()] ?? '🌙';
 }
 
+function formatIllumination(v: number): string {
+	const pct = v <= 1 ? v * 100 : v;
+	return `${Math.round(pct)}%`;
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-moon-phase': RoxyMoonPhase;