@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/endpoint-form.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
 interface OpenApiSchemaRef {
 	$ref?: string;
@@ -31,6 +32,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 +92,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 +147,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 +165,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 +203,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 +232,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 +291,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 +384,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 &&
@@ -419,13 +488,6 @@ export class RoxyEndpointForm extends LitElement {
 	}
 }
 
-function humanize(s: string): string {
-	return s
-		.replace(/[_-]+/g, ' ')
-		.replace(/([a-z])([A-Z])/g, '$1 $2')
-		.replace(/^\w/, (c) => c.toUpperCase());
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-endpoint-form': RoxyEndpointForm;

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',
@@ -51,6 +33,14 @@ export class RoxyGunaMilan extends LitElement {
 				gap: var(--roxy-space-md, 1rem);
 			}
 
+			.score-header {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+			}
+			.score-info {
+				flex: 1;
+			}
 			.score-bar {
 				display: grid;
 				grid-template-columns: 1fr auto;
@@ -72,6 +62,26 @@ export class RoxyGunaMilan extends LitElement {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-secondary, #475569);
 			}
+			.score-ring {
+				width: 120px;
+				height: 120px;
+				flex-shrink: 0;
+			}
+			.score-ring svg {
+				width: 100%;
+				height: 100%;
+			}
+			.score-ring .ring-text {
+				font-size: 22px;
+				font-weight: 700;
+				fill: var(--roxy-fg, #0a0a0a);
+				font-family: var(--roxy-font-sans);
+			}
+			.score-ring .ring-max {
+				font-size: 10px;
+				fill: var(--roxy-muted, #71717a);
+				font-family: var(--roxy-font-sans);
+			}
 
 			table {
 				width: 100%;
@@ -127,47 +137,75 @@ 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,
 		);
 
+		const score = d.total ?? 0;
+		const max = d.maxScore ?? 36;
+		const pct = (score / max) * 100;
+		const trackColor =
+			'color-mix(in srgb, var(--roxy-border) 50%, transparent)';
+		const fillColor =
+			pct >= 70
+				? 'var(--roxy-success)'
+				: pct >= 50
+					? 'var(--roxy-warning)'
+					: 'var(--roxy-danger)';
+		// SVG circle with r=45: circumference = 2 * pi * 45 = 282.74
+		// dasharray segments = pct * 2.827, (100 - pct) * 2.827
+		const dashFill = pct * 2.827;
+		const dashGap = (100 - pct) * 2.827;
+
 		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>
-					${
-						typeof d.percentage === 'number'
-							? html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
-								${d.percentage}%
-							</small>`
-							: nothing
-					}
+			<div class="score-header">
+				<div class="score-info">
+					<div class="score-bar">
+						<div>
+							<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)">
+										${formatPercent(d.percentage, 1)}
+									</small>`
+									: nothing
+							}
+						</div>
+						${
+							d.recommendation
+								? html`<span class="recommendation">${d.recommendation}</span>`
+								: nothing
+						}
+					</div>
+				</div>
+				<div class="score-ring" role="meter" aria-label="Guna milan score" aria-valuemin="0" aria-valuemax="36" aria-valuenow="${score}">
+					<svg viewBox="0 0 100 100" aria-hidden="true">
+						<circle class="ring-track" cx="50" cy="50" r="45" fill="none" stroke="${trackColor}" stroke-width="8"/>
+						<circle class="ring-fill" cx="50" cy="50" r="45" fill="none" stroke="${fillColor}" stroke-width="8"
+								stroke-dasharray="${dashFill},${dashGap}" stroke-linecap="round"
+								transform="rotate(-90 50 50)"/>
+						<text x="50" y="50" text-anchor="middle" dominant-baseline="central" class="ring-text">${score}</text>
+						<text x="50" y="64" text-anchor="middle" dominant-baseline="central" class="ring-max">/${max}</text>
+					</svg>
 				</div>
-				${
-					d.recommendation
-						? html`<span class="recommendation">${d.recommendation}</span>`
-						: nothing
-				}
 			</div>
 
 			${
@@ -183,16 +221,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 +241,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 +276,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) {