@roxyapi/ui 0.1.1 → 0.1.3

package/src/components/data.ts

@@ -25,6 +25,14 @@ const TITLE_KEYS = ['title', 'name', 'label', 'heading', 'overview', 'summary'];
 const IMAGE_KEYS = ['imageUrl', 'image', 'icon', 'symbol'];
 const SKIP_KEYS = ['imageUrl', 'image']; // rendered separately, not in body rows
 
+// Hard cap on recursion. Real RoxyAPI responses nest at most 5-6 deep; anything
+// deeper is either a circular reference (which would otherwise infinite-loop)
+// or a payload too rich for the generic fallback to render usefully. The
+// recursion is otherwise safe: <roxy-data> is registered globally by its
+// `@customElement` decorator on import, so the nested template resolves to
+// this same class without a separate import.
+const MAX_DEPTH = 6;
+
 @customElement('roxy-data')
 export class RoxyData extends LitElement {
 	static styles = [
@@ -129,10 +137,21 @@ export class RoxyData extends LitElement {
 	@property({ attribute: false })
 	data: Json = null;
 
+	/**
+	 * Internal recursion depth. Nested <roxy-data> instances inherit this from
+	 * the parent and increment to guard against circular references in the
+	 * input. Not part of the public API; do not set from consumer code.
+	 */
+	@property({ attribute: false })
+	depth = 0;
+
 	render() {
 		if (this.data == null) {
 			return html`<div class="roxy-empty" role="status">No data</div>`;
 		}
+		if (this.depth >= MAX_DEPTH) {
+			return html`<div class="roxy-empty" role="status">…</div>`;
+		}
 		return html`<div
 			class="roxy-card"
 			aria-label="Generic data display"
@@ -252,7 +271,7 @@ export class RoxyData extends LitElement {
 				</ul>`;
 			}
 		}
-		return html`<roxy-data .data=${value}></roxy-data>`;
+		return html`<roxy-data .data=${value} .depth=${this.depth + 1}></roxy-data>`;
 	}
 
 	private formatPrimitive(value: Json | undefined): string {

package/src/components/dosha-card.ts

@@ -1,25 +1,13 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	KalsarpaResponse,
+	ManglikResponse,
+	SadhesatiResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface DoshaData {
-	present?: boolean;
-	severity?: 'Mild' | 'Moderate' | 'Severe' | string;
-	type?: string;
-	description?: string;
-	remedies?: string[];
-	exceptions?: string[];
-	effects?:
-		| string
-		| {
-				marriage?: string;
-				personality?: string;
-				timing?: string;
-				relationships?: string;
-				general?: string;
-				phases?: Record<string, string>;
-		  };
-}
+type DoshaData = ManglikResponse | KalsarpaResponse | SadhesatiResponse;
 
 const DOSHA_LABELS: Record<string, string> = {
 	manglik: 'Mangal Dosha',
@@ -71,11 +59,11 @@ export class RoxyDoshaCard extends LitElement {
 			}
 			.badge.absent {
 				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
-				color: var(--roxy-success, #16a34a);
+				color: var(--roxy-success-fg, #166534);
 			}
 			.badge.present {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 			}
 			.severity {
 				display: flex;
@@ -166,7 +154,7 @@ export class RoxyDoshaCard extends LitElement {
 				</div>
 			</header>
 			${d.description ? html`<p class="description">${d.description}</p>` : nothing}
-			${this.renderEffects(d.effects)}
+			${this.renderEffects(d)}
 			${
 				d.remedies && d.remedies.length > 0
 					? html`<div>
@@ -178,22 +166,21 @@ export class RoxyDoshaCard extends LitElement {
 					: nothing
 			}
 			${
-				d.exceptions && d.exceptions.length > 0
+				'exceptions' in d && d.exceptions && d.exceptions.length > 0
 					? html`<div>
-						<h3>Exceptions</h3>
-						<ul>
-							${d.exceptions.map((r) => html`<li>${r}</li>`)}
-						</ul>
-					</div>`
+					<h3>Exceptions</h3>
+					<ul>
+						${d.exceptions.map((r) => html`<li>${r}</li>`)}
+					</ul>
+				</div>`
 					: nothing
 			}
 		</article>`;
 	}
 
-	private renderEffects(e: DoshaData['effects']) {
-		if (!e) return nothing;
-		if (typeof e === 'string') return html`<p>${e}</p>`;
-		const entries = Object.entries(e).filter(
+	private renderEffects(d: DoshaData) {
+		if (!d.effects) return nothing;
+		const entries = Object.entries(d.effects).filter(
 			([, v]) => typeof v === 'string' && v.length > 0,
 		);
 		if (entries.length === 0) return nothing;

package/src/components/endpoint-form.ts

@@ -31,6 +31,33 @@ interface FieldDef {
 	default?: unknown;
 }
 
+interface OpenApiDoc {
+	paths?: Record<string, Record<string, unknown>>;
+	components?: { schemas?: Record<string, OpenApiSchema> };
+}
+
+const specCache = new Map<string, Promise<OpenApiDoc>>();
+
+async function loadSpec(url: string): Promise<OpenApiDoc> {
+	let pending = specCache.get(url);
+	if (!pending) {
+		pending = fetch(url)
+			.then(async (res) => {
+				if (!res.ok) throw new Error(`HTTP ${res.status}`);
+				return (await res.json()) as OpenApiDoc;
+			})
+			.catch((err) => {
+				// Evict the rejected promise BEFORE rethrowing so subsequent
+				// callers (the user clicking Retry, a remount) hit the network
+				// again instead of replaying the cached failure forever.
+				specCache.delete(url);
+				throw err;
+			});
+		specCache.set(url, pending);
+	}
+	return pending;
+}
+
 /**
  * Schema-driven form. Pass `endpoint` (e.g. "vedic-astrology/birth-chart").
  * The form introspects the cached OpenAPI spec, slots a roxy-location-search
@@ -64,22 +91,27 @@ export class RoxyEndpointForm extends LitElement {
 			.fields {
 				display: grid;
 				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+				align-items: start;
 				gap: var(--roxy-space-md, 1rem);
 			}
 			.field {
-				display: grid;
+				display: flex;
+				flex-direction: column;
 				gap: var(--roxy-space-xs, 0.25rem);
+				min-width: 0;
 			}
 			label {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-secondary, #475569);
 			}
 			label .req {
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 				margin-left: 4px;
 			}
 			input,
 			select {
+				width: 100%;
+				box-sizing: border-box;
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
 				font-size: var(--roxy-text-base, 1rem);
 				font-family: inherit;
@@ -114,7 +146,7 @@ export class RoxyEndpointForm extends LitElement {
 			button.submit {
 				justify-self: start;
 				background: var(--roxy-accent-fg, #b45309);
-				color: #fff;
+				color: var(--roxy-bg, #fff);
 				border: 0;
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-lg, 1.5rem);
@@ -132,6 +164,17 @@ export class RoxyEndpointForm extends LitElement {
 				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 				outline-offset: 2px;
 			}
+			.spec-error {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				justify-items: start;
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-danger, #dc2626);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				color: var(--roxy-danger-fg, #991b1b);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
 		`,
 	];
 
@@ -159,19 +202,18 @@ export class RoxyEndpointForm extends LitElement {
 	@state()
 	private loaded = false;
 
+	@state()
+	private specError: string | null = null;
+
 	connectedCallback(): void {
 		super.connectedCallback();
 		void this.loadSchema();
 	}
 
 	private async loadSchema() {
+		this.specError = null;
 		try {
-			const res = await fetch(this.specUrl);
-			if (!res.ok) throw new Error(`HTTP ${res.status}`);
-			const spec = (await res.json()) as {
-				paths?: Record<string, Record<string, unknown>>;
-				components?: { schemas?: Record<string, OpenApiSchema> };
-			};
+			const spec = await loadSpec(this.specUrl);
 			const path = `/${this.endpoint.replace(/^\//, '')}`;
 			const op = spec.paths?.[path]?.[this.method.toLowerCase()] as
 				| {
@@ -189,7 +231,11 @@ export class RoxyEndpointForm extends LitElement {
 						}>;
 				  }
 				| undefined;
-			if (!op) return;
+			if (!op) {
+				throw new Error(
+					`Endpoint ${this.method} ${path} not found in OpenAPI spec`,
+				);
+			}
 
 			const schemas = spec.components?.schemas ?? {};
 			const fields: FieldDef[] = [];
@@ -244,11 +290,26 @@ export class RoxyEndpointForm extends LitElement {
 			}
 			this.values = init;
 			this.loaded = true;
-		} catch (_err) {
+		} catch (err) {
+			const message = err instanceof Error ? err.message : String(err);
+			this.specError = message;
 			this.loaded = true;
+			this.dispatchEvent(
+				new CustomEvent('roxy-spec-error', {
+					detail: { url: this.specUrl, message },
+					bubbles: true,
+					composed: true,
+				}),
+			);
 		}
 	}
 
+	private retryLoadSchema = () => {
+		this.loaded = false;
+		this.specError = null;
+		void this.loadSchema();
+	};
+
 	private resolve(
 		schema: OpenApiSchema | OpenApiSchemaRef | undefined,
 		all: Record<string, OpenApiSchema>,
@@ -322,6 +383,13 @@ export class RoxyEndpointForm extends LitElement {
 			return html`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
 		}
 
+		if (this.specError) {
+			return html`<div class="spec-error" role="alert">
+				Schema load failed: ${this.specError}
+				<button type="button" class="submit" @click=${this.retryLoadSchema}>Retry</button>
+			</div>`;
+		}
+
 		const renderField = (f: FieldDef) => {
 			if (
 				this.hasLocation &&

package/src/components/guna-milan.ts

@@ -1,26 +1,8 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type { CompatibilityResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
-
-interface GunaCategory {
-	name?: string;
-	score?: number;
-	max?: number;
-	maxScore?: number;
-	description?: string;
-}
-
-interface GunaData {
-	total?: number;
-	totalScore?: number;
-	maxScore?: number;
-	percentage?: number;
-	isCompatible?: boolean;
-	recommendation?: string;
-	doshas?: string[];
-	doshaCancellations?: string[];
-	breakdown?: GunaCategory[];
-}
+import { formatNumber, formatPercent } from '../utils/format.js';
 
 const STANDARD_CATEGORIES = [
 	'Varna',
@@ -127,38 +109,36 @@ export class RoxyGunaMilan extends LitElement {
 			}
 			.tags .dosha {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 			}
 			.tags .cancel {
 				background: color-mix(in srgb, var(--roxy-success, #16a34a) 18%, transparent);
-				color: var(--roxy-success, #16a34a);
+				color: var(--roxy-success-fg, #166534);
 			}
 		`,
 	];
 
 	@property({ attribute: false })
-	data: GunaData | null = null;
+	data: CompatibilityResponse | null = null;
 
 	render() {
 		const d = this.data;
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
 
-		const total = d.total ?? d.totalScore ?? 0;
-		const max = d.maxScore ?? 36;
 		const breakdown = (d.breakdown ?? []).filter(
-			(b) => b && (b.name || b.score !== undefined),
+			(b) => b?.category !== undefined,
 		);
 
 		return html`<article class="card" aria-label="Guna Milan score">
 			<div class="score-bar">
 				<div>
-					<span class="total">${total}</span>
-					<span class="over"> / ${max}</span>
+					<span class="total">${formatNumber(d.total, 1)}</span>
+					<span class="over"> / ${d.maxScore}</span>
 					${
 						typeof d.percentage === 'number'
 							? html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
-								${d.percentage}%
+								${formatPercent(d.percentage, 1)}
 							</small>`
 							: nothing
 					}
@@ -183,16 +163,16 @@ export class RoxyGunaMilan extends LitElement {
 						<tbody>
 							${breakdown.map((b) => {
 								const score = b.score ?? 0;
-								const maxScore = b.max ?? b.maxScore ?? defaultMax(b.name);
+								const maxScore = b.maxScore ?? defaultMax(b.category);
 								const pct = maxScore ? (score / maxScore) * 100 : 0;
 								return html`<tr>
-									<td>${b.name ?? ''}</td>
+									<td>${b.category}</td>
 									<td class="bar-cell">
 										<div class="mini-bar">
 											<span style="width: ${pct}%"></span>
 										</div>
 									</td>
-									<td class="score">${score} / ${maxScore}</td>
+									<td class="score">${formatNumber(score, 1)} / ${maxScore}</td>
 								</tr>`;
 							})}
 						</tbody>
@@ -203,7 +183,10 @@ export class RoxyGunaMilan extends LitElement {
 				(d.doshas?.length ?? 0) > 0 || (d.doshaCancellations?.length ?? 0) > 0
 					? html`<div class="tags">
 						${d.doshas?.map((x) => html`<span class="dosha">${x}</span>`)}
-						${d.doshaCancellations?.map((x) => html`<span class="cancel">${x}</span>`)}
+						${d.doshaCancellations?.map(
+							(x) =>
+								html`<span class="cancel" title=${x.reason}>${x.dosha} cancelled</span>`,
+						)}
 					</div>`
 					: nothing
 			}
@@ -235,7 +218,6 @@ function defaultMax(name?: string): number {
 	}
 }
 
-// Reference list (kept for documentation, used at codegen time)
 export const GUNA_CATEGORIES = STANDARD_CATEGORIES;
 
 declare global {

package/src/components/hexagram.ts

@@ -1,34 +1,22 @@
 import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TRIGRAM_GLYPH } from '../tokens/index.js';
+import type {
+	CastReadingResponse,
+	GetDailyHexagramResponse,
+	GetHexagramResponse,
+	GetRandomHexagramResponse,
+	Hexagram,
+	LookupHexagramResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface HexagramData {
-	number?: number;
-	symbol?: string;
-	chinese?: string;
-	english?: string;
-	pinyin?: string;
-	upperTrigram?: string;
-	lowerTrigram?: string;
-	judgment?: string;
-	image?: string;
-	interpretation?: {
-		general?: string;
-		love?: string;
-		career?: string;
-		decision?: string;
-		advice?: string;
-	};
-	changingLines?: number[];
-	resultingHexagram?: HexagramData;
-	dailyMessage?: string;
-	hexagram?: HexagramData;
-	lines?: number[]; // 6, 7, 8, 9 cast values
-	changingLinePositions?: number[];
-	seed?: string;
-	date?: string;
-}
+type HexagramData =
+	| GetHexagramResponse
+	| GetRandomHexagramResponse
+	| LookupHexagramResponse
+	| GetDailyHexagramResponse
+	| CastReadingResponse;
 
 /**
  * I Ching hexagram card. Renders /iching/hexagrams/{number}, /iching/cast,
@@ -154,25 +142,48 @@ export class RoxyHexagram extends LitElement {
 	@property({ type: String, reflect: true })
 	mode: 'lookup' | 'cast' | 'daily' = 'lookup';
 
-	private getHexagram(): HexagramData | null {
-		if (!this.data) return null;
-		if ('hexagram' in this.data && this.data.hexagram) {
+	private resolveHexagram(): {
+		hex: Hexagram;
+		lines?: number[];
+		changingLinePositions?: number[];
+		dailyMessage?: string;
+		resultingHexagram?: Hexagram;
+	} | null {
+		const d = this.data;
+		if (!d) return null;
+		if ('hexagram' in d && d.hexagram) {
+			if ('lines' in d) {
+				const cast = d as CastReadingResponse;
+				return {
+					hex: cast.hexagram as Hexagram,
+					lines: cast.lines,
+					changingLinePositions: cast.changingLinePositions,
+					resultingHexagram: cast.resultingHexagram as Hexagram | undefined,
+				};
+			}
+			const daily = d as GetDailyHexagramResponse;
 			return {
-				...this.data.hexagram,
-				lines: this.data.lines,
-				changingLinePositions: this.data.changingLinePositions,
+				hex: daily.hexagram as Hexagram,
+				dailyMessage: daily.dailyMessage,
 			};
 		}
-		return this.data;
+		return { hex: d as Hexagram };
 	}
 
 	render() {
-		const h = this.getHexagram();
-		if (!h)
+		const resolved = this.resolveHexagram();
+		if (!resolved)
 			return html`<div class="roxy-empty" role="status">No hexagram data</div>`;
 
-		const lines = h.lines ?? this.derivedLines(h);
-		const changing = new Set(h.changingLinePositions ?? []);
+		const {
+			hex: h,
+			lines: castLines,
+			changingLinePositions,
+			dailyMessage,
+			resultingHexagram,
+		} = resolved;
+		const lines = castLines ?? this.derivedLines(h);
+		const changing = new Set(changingLinePositions ?? []);
 
 		return html`<article class="card" aria-label="I Ching hexagram">
 			<div class="glyphs">
@@ -229,7 +240,7 @@ export class RoxyHexagram extends LitElement {
 				</div>
 				${h.judgment ? html`<p class="judgment">${h.judgment}</p>` : nothing}
 				${h.image ? html`<p class="image">${h.image}</p>` : nothing}
-				${h.dailyMessage ? html`<p class="message">${h.dailyMessage}</p>` : nothing}
+				${dailyMessage ? html`<p class="message">${dailyMessage}</p>` : nothing}
 				${
 					h.interpretation?.general
 						? html`<p>${h.interpretation.general}</p>`
@@ -242,9 +253,9 @@ export class RoxyHexagram extends LitElement {
 								.sort((a, b) => a - b)
 								.join(', ')}.
 							${
-								h.resultingHexagram?.english
-									? html` Becomes hexagram ${h.resultingHexagram.number}
-										${h.resultingHexagram.english}.`
+								resultingHexagram?.english
+									? html` Becomes hexagram ${resultingHexagram.number}
+										${resultingHexagram.english}.`
 									: nothing
 							}
 						</div>`
@@ -255,8 +266,7 @@ export class RoxyHexagram extends LitElement {
 	}
 
 	/** When the API only ships symbol+number with no line array, render six solid yang. */
-	private derivedLines(h: HexagramData): number[] {
-		if (!h.symbol) return Array.from({ length: 6 }, () => 7);
+	private derivedLines(h: Hexagram): number[] {
 		// Map each character of the unicode hexagram block (U+4DC0..) to broken/solid
 		const cp = h.symbol.codePointAt(0) ?? 0;
 		if (cp >= 0x4dc0 && cp <= 0x4dff) {