@roxyapi/ui 0.1.1 → 0.1.3

package/src/components/tarot-card.ts

@@ -1,34 +1,9 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import type { GetCardResponse, GetDailyCardResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface TarotCard {
-	id?: string;
-	name?: string;
-	arcana?: 'major' | 'minor' | string;
-	number?: number | string;
-	position?: string;
-	reversed?: boolean;
-	keywords?: string[];
-	meaning?:
-		| string
-		| {
-				upright?: string;
-				reversed?: string;
-				spiritual?: string;
-				emotional?: string;
-				physical?: string;
-		  };
-	imageUrl?: string;
-	upright?: { meaning?: string; keywords?: string[] };
-}
-
-interface TarotData {
-	date?: string;
-	seed?: string;
-	card?: TarotCard;
-	dailyMessage?: string;
-}
+type TarotData = GetCardResponse | GetDailyCardResponse;
 
 /**
  * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip
@@ -92,11 +67,6 @@ export class RoxyTarotCard extends LitElement {
 				letter-spacing: 0.06em;
 				margin-bottom: var(--roxy-space-sm, 0.5rem);
 			}
-			.position {
-				color: var(--roxy-info, #0284c7);
-				margin-left: var(--roxy-space-xs, 0.25rem);
-				text-transform: capitalize;
-			}
 
 			.message {
 				color: var(--roxy-fg, #0a0a0a);
@@ -137,37 +107,28 @@ export class RoxyTarotCard extends LitElement {
 	];
 
 	@property({ attribute: false })
-	data: TarotData | TarotCard | null = null;
+	data: TarotData | null = null;
 
 	@state()
 	private flipped = false;
 
-	private getCard(): TarotCard | null {
-		if (!this.data) return null;
-		if ('card' in this.data && this.data.card) return this.data.card;
-		return this.data as TarotCard;
-	}
-
 	private toggleFlip = () => {
 		this.flipped = !this.flipped;
 	};
 
 	render() {
-		const card = this.getCard();
-		if (!card)
+		const d = this.data;
+		if (!d)
 			return html`<div class="roxy-empty" role="status">No tarot data</div>`;
 
-		const isReversed = this.flipped !== Boolean(card.reversed); // start at server-provided orientation, toggle on click
-		const meaning =
-			typeof card.meaning === 'string'
-				? card.meaning
-				: ((isReversed ? card.meaning?.reversed : card.meaning?.upright) ??
-					card.meaning?.spiritual ??
-					card.upright?.meaning);
-		const dailyMessage =
-			this.data && 'dailyMessage' in this.data
-				? this.data.dailyMessage
-				: undefined;
+		if ('card' in d) return this.renderDailyCard(d);
+		return this.renderFullCard(d);
+	}
+
+	private renderDailyCard(d: GetDailyCardResponse) {
+		const card = d.card;
+		const isReversed = this.flipped !== Boolean(card.reversed);
+		const keywords = card.keywords ?? [];
 
 		return html`<article class="card" aria-label=${card.name ?? 'Tarot card'}>
 			<div class="image-wrap">
@@ -197,21 +158,74 @@ export class RoxyTarotCard extends LitElement {
 			<div>
 				<div class="meta">
 					${card.arcana ? html`${card.arcana} arcana` : nothing}
-					${card.number !== undefined && card.number !== null ? html` · ${card.number}` : nothing}
 					${isReversed ? html` · reversed` : nothing}
-					${
-						card.position
-							? html`<span class="position">${card.position}</span>`
-							: nothing
-					}
 				</div>
 				<h2 class="title">${card.name ?? 'Tarot card'}</h2>
-				${dailyMessage ? html`<p class="message">${dailyMessage}</p>` : nothing}
-				${meaning ? html`<p>${meaning}</p>` : nothing}
+				${d.dailyMessage ? html`<p class="message">${d.dailyMessage}</p>` : nothing}
+				${card.meaning ? html`<p>${card.meaning}</p>` : nothing}
+				${
+					keywords.length > 0
+						? html`<div class="chips">
+							${keywords.map((k) => html`<span>${k}</span>`)}
+						</div>`
+						: nothing
+				}
+				<button
+					class="flip"
+					type="button"
+					@click=${this.toggleFlip}
+					aria-pressed=${this.flipped ? 'true' : 'false'}
+				>
+					Flip card
+				</button>
+			</div>
+		</article>`;
+	}
+
+	private renderFullCard(d: GetCardResponse) {
+		const isReversed = this.flipped;
+		const orientedMeaning = isReversed ? d.reversed : d.upright;
+		const keywords = isReversed
+			? (d.keywords?.reversed ?? [])
+			: (d.keywords?.upright ?? []);
+
+		return html`<article class="card" aria-label=${d.name ?? 'Tarot card'}>
+			<div class="image-wrap">
+				${
+					d.imageUrl
+						? html`<img
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							src=${d.imageUrl}
+							alt=${d.name ?? 'Tarot card'}
+							tabindex="0"
+							@click=${this.toggleFlip}
+							@keydown=${(e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									this.toggleFlip();
+								}
+							}}
+						/>`
+						: html`<div
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
+						>
+							${d.name ?? '?'}
+						</div>`
+				}
+			</div>
+			<div>
+				<div class="meta">
+					${d.arcana ? html`${d.arcana} arcana` : nothing}
+					${d.number !== undefined && d.number !== null ? html` · ${d.number}` : nothing}
+					${isReversed ? html` · reversed` : nothing}
+				</div>
+				<h2 class="title">${d.name ?? 'Tarot card'}</h2>
+				${orientedMeaning?.description ? html`<p>${orientedMeaning.description}</p>` : nothing}
 				${
-					card.keywords?.length
+					keywords.length > 0
 						? html`<div class="chips">
-							${card.keywords.map((k) => html`<span>${k}</span>`)}
+							${keywords.map((k) => html`<span>${k}</span>`)}
 						</div>`
 						: nothing
 				}

package/src/components/tarot-spread.ts

@@ -1,32 +1,22 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	CastCelticCrossResponse,
+	CastLoveSpreadResponse,
+	CastReadingResponse,
+	CastThreeCardResponse,
+	CastYesNoResponse,
+	DrawCardsResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface TarotPosition {
-	number?: number;
-	label?: string;
-	name?: string;
-	position?: string;
-	card?: {
-		name?: string;
-		imageUrl?: string;
-		reversed?: boolean;
-		keywords?: string[];
-		arcana?: string;
-	};
-	interpretation?: string;
-}
-
-interface TarotSpreadData {
-	spread?: string;
-	positions?: TarotPosition[];
-	cards?: TarotPosition[];
-	reading?: string;
-	question?: string;
-	answer?: 'Yes' | 'No' | 'Maybe' | string;
-	strength?: string;
-	interpretation?: string;
-}
+type TarotSpreadData =
+	| CastThreeCardResponse
+	| CastCelticCrossResponse
+	| CastLoveSpreadResponse
+	| CastYesNoResponse
+	| CastReadingResponse
+	| DrawCardsResponse;
 
 /**
  * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
@@ -72,15 +62,15 @@ export class RoxyTarotSpread extends LitElement {
 			}
 			.answer.yes {
 				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
-				color: var(--roxy-success, #16a34a);
+				color: var(--roxy-success-fg, #166534);
 			}
 			.answer.no {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 			}
 			.answer.maybe {
 				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);
-				color: var(--roxy-warning, #ea580c);
+				color: var(--roxy-warning-fg, #9a3412);
 			}
 
 			.grid {
@@ -157,22 +147,41 @@ export class RoxyTarotSpread extends LitElement {
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No tarot spread</div>`;
 
-		const positions = d.positions ?? d.cards ?? [];
-		const isYesNo = !!d.answer;
-		const answerClass = isYesNo
-			? (d.answer ?? '').toLowerCase().replace(/[^a-z]/g, '')
+		const isYesNo = 'answer' in d;
+		const isDrawn = 'cards' in d && !('spread' in d);
+		const positions = isDrawn
+			? []
+			: 'positions' in d
+				? (d.positions ?? [])
+				: [];
+		const cards = isDrawn && 'cards' in d ? (d as DrawCardsResponse).cards : [];
+		const answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;
+		const strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;
+		const spreadLabel =
+			'spread' in d
+				? (d as CastThreeCardResponse).spread
+				: this.spread.replace(/-/g, ' ');
+		const question =
+			'question' in d ? (d as CastThreeCardResponse).question : undefined;
+		const summary =
+			'summary' in d ? (d as CastThreeCardResponse).summary : undefined;
+		const yesNoInterp = isYesNo
+			? (d as CastYesNoResponse).interpretation
+			: undefined;
+		const answerClass = answer
+			? answer.toLowerCase().replace(/[^a-z]/g, '')
 			: '';
 
 		return html`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
-				<h2 class="title">${d.spread ?? this.spread.replace(/-/g, ' ')}</h2>
-				${d.question ? html`<span class="question">"${d.question}"</span>` : nothing}
+				<h2 class="title">${spreadLabel}</h2>
+				${question ? html`<span class="question">"${question}"</span>` : nothing}
 			</header>
 			${
 				isYesNo
 					? html`<div>
-						<span class=${`answer ${answerClass}`}>${d.answer}</span>
-						${d.strength ? html`<small> · ${d.strength}</small>` : nothing}
+						<span class=${`answer ${answerClass}`}>${answer}</span>
+						${strength ? html`<small> · ${strength}</small>` : nothing}
 					</div>`
 					: nothing
 			}
@@ -181,7 +190,7 @@ export class RoxyTarotSpread extends LitElement {
 					? html`<div class="grid">
 						${positions.map(
 							(p) => html`<div class="card">
-								<p class="label">${p.label ?? p.name ?? p.position ?? ''}</p>
+								<p class="label">${p.name ?? ''}</p>
 								<div class="image">
 									${
 										p.card?.imageUrl
@@ -197,22 +206,40 @@ export class RoxyTarotSpread extends LitElement {
 									${p.card?.name ?? ''}
 									${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}
 								</p>
-								${
-									p.interpretation
-										? html`<p class="interp">${p.interpretation}</p>`
-										: nothing
-								}
+								${p.interpretation ? html`<p class="interp">${p.interpretation}</p>` : nothing}
 							</div>`,
 						)}
 					</div>`
 					: nothing
 			}
-			${d.reading ? html`<p class="reading">${d.reading}</p>` : nothing}
 			${
-				d.interpretation && !d.reading
-					? html`<p class="reading">${d.interpretation}</p>`
+				cards.length > 0
+					? html`<div class="grid">
+						${cards.map(
+							(c) => html`<div class="card">
+								<div class="image">
+									${
+										c.imageUrl
+											? html`<img
+												src=${c.imageUrl}
+												alt=${c.name ?? 'tarot card'}
+												class=${c.reversed ? 'reversed' : ''}
+											/>`
+											: html`${c.name ?? '?'}`
+									}
+								</div>
+								<p class="name">
+									${c.name ?? ''}
+									${c.reversed ? html`<small>(reversed)</small>` : nothing}
+								</p>
+								${c.meaning ? html`<p class="interp">${c.meaning}</p>` : nothing}
+							</div>`,
+						)}
+					</div>`
 					: nothing
 			}
+			${summary ? html`<p class="reading">${summary}</p>` : nothing}
+			${yesNoInterp ? html`<p class="reading">${yesNoInterp}</p>` : nothing}
 		</article>`;
 	}
 }

package/src/components/vedic-kundli.ts

@@ -1,26 +1,16 @@
 import { css, html, LitElement, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { PLANET_ABBR, SIGN_ABBR } from '../tokens/index.js';
+import type { BirthChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface KundliMeta {
-	[planet: string]: {
-		graha?: string;
-		rashi?: string;
-		longitude?: number;
-		nakshatra?: string;
-		isRetrograde?: boolean;
-	};
-}
+type RashiBucket = BirthChartResponse['aries'];
 
-interface RashiBucket {
-	rashi?: string;
-	signs?: Array<{
-		planet?: string;
-		longitude?: number;
-		isRetrograde?: boolean;
-	}>;
-}
+// TODO(spec): BirthChartResponse types only `aries` and `meta`, but the API
+// returns all 12 rashi keys (taurus, gemini, ..., pisces) with the same shape
+// as `aries`. Update the OpenAPI schema so the renderer can index by rashi
+// without casts.
+type BirthChartByRashi = BirthChartResponse & Record<string, RashiBucket>;
 
 interface KundliHouse {
 	house: number;
@@ -28,19 +18,6 @@ interface KundliHouse {
 	planets: string[];
 }
 
-interface KundliData {
-	meta?: KundliMeta;
-	houses?: Array<{
-		house?: number;
-		number?: number;
-		sign?: string;
-		planets?: string[];
-	}>;
-	combustion?: unknown[];
-	planetaryWar?: unknown[];
-	[rashi: string]: unknown;
-}
-
 const SOUTH_HOUSE_CENTERS: Record<number, { x: number; y: number }> = {
 	1: { x: 150, y: 58 },
 	2: { x: 205, y: 52 },
@@ -145,39 +122,35 @@ export class RoxyVedicKundli extends LitElement {
 				font-weight: 600;
 				font-family: var(--roxy-font-sans);
 			}
+			.lagna-marker {
+				fill: var(--roxy-accent-fg, #b45309);
+				font-size: 8px;
+				font-weight: 700;
+				font-family: var(--roxy-font-sans);
+				letter-spacing: 0.05em;
+			}
+			.lagna-bg {
+				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
+				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
+				stroke-width: 0.8;
+			}
 		`,
 	];
 
 	@property({ attribute: false })
-	data: KundliData | null = null;
+	data: BirthChartResponse | null = null;
 
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
 	chartStyle: 'south' | 'north' = 'south';
 
 	private buildHouses(): KundliHouse[] {
 		if (!this.data) return [];
+		const data = this.data as BirthChartByRashi;
 		const houses: KundliHouse[] = [];
-		// Prefer normalized .houses array if present
-		if (Array.isArray(this.data.houses)) {
-			for (const h of this.data.houses) {
-				houses.push({
-					house: (h.house ?? h.number ?? houses.length + 1) as number,
-					sign: h.sign ?? '',
-					planets: h.planets ?? [],
-				});
-			}
-			if (houses.length > 0) return houses;
-		}
-		// Otherwise read the rashi buckets and project them as houses 1..12
-		// keyed by sign order. Lagna-anchored ordering would require knowing
-		// the ascendant rashi; we render rashi buckets directly which is the
-		// canonical South Indian layout.
 		for (let i = 0; i < 12; i++) {
 			const key = RASHI_KEYS[i];
-			const bucket = this.data[key] as RashiBucket | undefined;
-			const planets = (bucket?.signs ?? [])
-				.map((p) => p.planet ?? '')
-				.filter(Boolean);
+			const bucket = data[key];
+			const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
 			houses.push({
 				house: i + 1,
 				sign: RASHI_TO_SIGN[key] ?? '',
@@ -220,23 +193,41 @@ export class RoxyVedicKundli extends LitElement {
 		</div>`;
 	}
 
+	private isLagna(h: KundliHouse): boolean {
+		const ascSign = this.data?.meta?.Lagna?.rashi;
+		if (!ascSign) return false;
+		return ascSign.toLowerCase() === h.sign.toLowerCase();
+	}
+
 	private renderHouseGroup(h: KundliHouse) {
 		const center = SOUTH_HOUSE_CENTERS[h.house];
 		const signPos = SOUTH_SIGN_POSITIONS[h.house];
 		if (!center || !signPos) return nothing;
 		const signAbbr = SIGN_ABBR[h.sign] ?? '';
 		const planets = h.planets ?? [];
+		const isLagna = this.isLagna(h);
 		return svg`
 			<g>
+				${
+					isLagna
+						? svg`<rect class="lagna-bg" x=${center.x - 30} y=${center.y - 28} width="60" height="56" rx="6" />`
+						: nothing
+				}
 				${
 					signAbbr
 						? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>`
 						: nothing
 				}
+				${
+					isLagna
+						? svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>`
+						: nothing
+				}
 				${planets.map((planet, j) => {
 					const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
 					const lineHeight = 13;
-					const startY = center.y - ((planets.length - 1) * lineHeight) / 2;
+					const baseY = isLagna ? center.y + 8 : center.y;
+					const startY = baseY - ((planets.length - 1) * lineHeight) / 2;
 					const yPos = startY + j * lineHeight;
 					return svg`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
 				})}

package/src/index.ts

@@ -33,29 +33,19 @@ export { RoxyTarotSpread } from './components/tarot-spread.js';
 // Vedic
 export { RoxyVedicKundli } from './components/vedic-kundli.js';
 
-export const ROXY_UI_VERSION = '0.1.0';
+import { ROXY_COMPONENTS, type RoxyComponentSlug } from './manifest.js';
 
-/** Component manifest used by the widgets auto-mount script and registry build. */
-export const ROXY_UI_COMPONENTS = [
-	'natal-chart',
-	'horoscope-card',
-	'synastry-chart',
-	'compatibility-card',
-	'moon-phase',
-	'vedic-kundli',
-	'panchang-table',
-	'dasha-timeline',
-	'dosha-card',
-	'guna-milan',
-	'kp-planets-table',
-	'numerology-card',
-	'tarot-card',
-	'tarot-spread',
-	'biorhythm-chart',
-	'hexagram',
-	'endpoint-form',
-	'location-search',
-	'data',
-] as const;
+export {
+	ROXY_COMPONENTS,
+	type RoxyComponent,
+	type RoxyComponentSlug,
+	type RoxyComponentTag,
+	type RoxyDomain,
+} from './manifest.js';
+export { ROXY_UI_VERSION } from './version.js';
 
-export type RoxyUIComponentName = (typeof ROXY_UI_COMPONENTS)[number];
+/** Slugs in declaration order. Kept for the auto-mount widgets script and downstream codegen. */
+export const ROXY_UI_COMPONENTS: readonly RoxyComponentSlug[] =
+	ROXY_COMPONENTS.map((c) => c.slug) as RoxyComponentSlug[];
+
+export type RoxyUIComponentName = RoxyComponentSlug;