@roxyapi/ui 0.1.2 → 0.2.0

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) : ''}

package/src/components/data.ts

@@ -1,11 +1,12 @@
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
 /**
- * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders it
- * via field-name heuristics so future spec additions render reasonably without
- * hand-wired components. Mirrors the WordPress GenericRenderer pattern.
+ * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders
+ * it via field-name heuristics so future spec additions render reasonably
+ * without hand-wired components.
  *
  * Heuristic order:
  *   1. Primitive (string, number, boolean) -> single line.
@@ -14,9 +15,8 @@ import { baseStyles } from '../utils/base-styles.js';
  *   4. Object with title-like field -> card with key/value rows.
  *   5. Otherwise -> definition list of all keys.
  *
- * Future spec hint: when the server emits `x-roxy-ui` on a schema, the
- * dispatcher in tool-call (Phase 2.5) will select a hand-tuned component
- * instead of this fallback.
+ * When a schema declares an `x-roxy-ui` hint, a future dispatcher can opt
+ * into a hand-tuned component instead of this fallback.
  */
 
 type Json = string | number | boolean | null | Json[] | { [key: string]: Json };
@@ -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"
@@ -177,7 +196,7 @@ export class RoxyData extends LitElement {
 		return html`<table class="roxy-table" role="table">
 			<thead>
 				<tr>
-					${keys.map((k) => html`<th>${this.humanize(k)}</th>`)}
+					${keys.map((k) => html`<th>${humanize(k)}</th>`)}
 				</tr>
 			</thead>
 			<tbody>
@@ -227,7 +246,7 @@ export class RoxyData extends LitElement {
 					? html`<dl class="roxy-rows">
 						${rows.map(
 							([k, v]) => html`
-								<dt>${this.humanize(k)}</dt>
+								<dt>${humanize(k)}</dt>
 								<dd>${this.renderField(v)}</dd>
 							`,
 						)}
@@ -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 {
@@ -271,13 +290,6 @@ export class RoxyData extends LitElement {
 		}
 		return Array.from(seen);
 	}
-
-	private humanize(key: string): string {
-		return key
-			.replace(/[_-]+/g, ' ')
-			.replace(/([a-z])([A-Z])/g, '$1 $2')
-			.replace(/^\w/, (c) => c.toUpperCase());
-	}
 }
 
 declare global {

package/src/components/divisional-chart.ts

@@ -0,0 +1,214 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, RASHI_KEYS } from '../tokens/index.js';
+import type { DivisionalChartResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import type { HouseDef } from '../utils/kundli-render.js';
+import {
+	RASHI_TO_SIGN,
+	renderNorthFrame,
+	renderNorthHouseGroup,
+	renderSouthFrame,
+	renderSouthHouseGroup,
+} from '../utils/kundli-render.js';
+
+type RashiBucket = {
+	rashi?: string;
+	signs?: Array<{ graha: string; isRetrograde?: boolean }>;
+};
+type ChartByRashi = { [key: string]: RashiBucket | unknown };
+
+/**
+ * Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
+ * renders the same south/north kundli wheel as the birth chart, plus division
+ * metadata and Vargottama planet pills.
+ */
+@customElement('roxy-divisional-chart')
+export class RoxyDivisionalChart extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.header {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.division-meta {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+			}
+			.significance {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				border-left: 2px solid var(--roxy-border, #e4e4e7);
+				padding-left: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
+			svg {
+				display: block;
+				width: 100%;
+				max-width: 360px;
+				margin: 0 auto;
+			}
+			.line {
+				fill: transparent;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.sign-text {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-weight: 500;
+				font-family: var(--roxy-font-sans);
+			}
+			.planet-text {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 11px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+			.house-num {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-weight: 400;
+				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;
+			}
+			.vargottama-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				align-items: center;
+			}
+			.vargottama-label {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				font-weight: 500;
+				margin-right: var(--roxy-space-xs, 0.25rem);
+			}
+			.vargottama-pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.2em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 22%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				border: 1px solid color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: DivisionalChartResponse | null = null;
+
+	@property({ type: String, reflect: true, attribute: 'chart-style' })
+	chartStyle: 'south' | 'north' = 'south';
+
+	private buildHouses(): HouseDef[] {
+		if (!this.data) return [];
+		const chart = this.data.chart as ChartByRashi;
+		const meta =
+			(this.data.chart as { meta?: Record<string, { rashi?: string }> }).meta ??
+			{};
+		const lagnaSign = meta.Lagna?.rashi ?? '';
+		const houses: HouseDef[] = [];
+		for (let i = 0; i < 12; i++) {
+			const key = RASHI_KEYS[i];
+			const bucket = chart[key] as RashiBucket | undefined;
+			const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
+			const sign = RASHI_TO_SIGN[key] ?? '';
+			houses.push({
+				number: i + 1,
+				sign,
+				planets,
+				isLagna: lagnaSign
+					? lagnaSign.toLowerCase() === sign.toLowerCase()
+					: false,
+			});
+		}
+		return houses;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+
+		const { division, vargottama } = this.data;
+		const houses = this.buildHouses();
+		const isNorth = this.chartStyle === 'north';
+
+		return html`<div class="wrap">
+			<div class="header">
+				<h2 class="title">
+					D${division.number} ${division.name}
+					${
+						division.sanskritName && division.sanskritName !== division.name
+							? html`<span class="division-meta"> · ${division.sanskritName}</span>`
+							: nothing
+					}
+				</h2>
+				${
+					division.significance
+						? html`<p class="significance">${division.significance}</p>`
+						: nothing
+				}
+			</div>
+
+			<svg
+				viewBox="0 0 300 300"
+				role="img"
+				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
+			>
+				<title>D${division.number} ${division.name}</title>
+				${isNorth ? renderNorthFrame() : renderSouthFrame()}
+				${
+					isNorth
+						? houses.map((h) => renderNorthHouseGroup(h))
+						: houses.map((h) => renderSouthHouseGroup(h))
+				}
+			</svg>
+
+			${
+				vargottama && vargottama.length > 0
+					? html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
+						<span class="vargottama-label">Vargottama:</span>
+						${vargottama.map(
+							(planet) =>
+								html`<span class="vargottama-pill" role="listitem">
+									${PLANET_GLYPH[planet] ?? ''} ${planet}
+								</span>`,
+						)}
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-divisional-chart': RoxyDivisionalChart;
+	}
+}

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,31 +59,30 @@ 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);
-			}
-			.severity {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-			}
-			.severity span {
-				width: 14px;
-				height: 4px;
-				border-radius: 2px;
-				background: var(--roxy-border, #e4e4e7);
-			}
-			.severity.mild span:nth-child(1) {
-				background: var(--roxy-warning, #ea580c);
-			}
-			.severity.moderate span:nth-child(-n + 2) {
-				background: var(--roxy-warning, #ea580c);
-			}
-			.severity.severe span {
-				background: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+			.severity-bar {
+				position: relative;
+				width: 100%;
+				height: 8px;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);
+				border-radius: 4px;
+				overflow: hidden;
+			}
+			.severity-fill {
+				display: block;
+				height: 100%;
+				transition: width var(--roxy-motion-duration, 200ms) ease-out;
+				border-radius: 4px;
+			}
+			@media (prefers-reduced-motion: reduce) {
+				.severity-fill {
+					transition: none;
+				}
 			}
 
 			.description {
@@ -140,7 +127,24 @@ export class RoxyDoshaCard extends LitElement {
 
 		const present = !!d.present;
 		const label = DOSHA_LABELS[this.type] ?? this.type;
-		const sevClass = (d.severity ?? '').toLowerCase();
+		const sevLower = (d.severity ?? '').toLowerCase();
+		const tier =
+			sevLower === 'severe'
+				? 3
+				: sevLower === 'moderate'
+					? 2
+					: sevLower === 'mild'
+						? 1
+						: 0;
+		const pct = tier * 33;
+		const barColor =
+			tier === 3
+				? 'var(--roxy-danger)'
+				: tier === 2
+					? 'var(--roxy-warning)'
+					: tier === 1
+						? 'var(--roxy-success)'
+						: 'transparent';
 
 		return html`<article
 			class="card"
@@ -148,25 +152,26 @@ export class RoxyDoshaCard extends LitElement {
 		>
 			<header class="head">
 				<h2 class="title">${label}</h2>
-				<div style="display:flex; gap:0.5rem; align-items:center;">
-					<span class=${`badge ${present ? 'present' : 'absent'}`}>
-						${present ? 'Present' : 'Absent'}
-					</span>
-					${
-						d.severity
-							? html`<span
-								class=${`severity ${sevClass}`}
-								role="img"
-								aria-label=${`Severity ${d.severity}`}
-							>
-								<span></span><span></span><span></span>
-							</span>`
-							: nothing
-					}
-				</div>
+				<span class=${`badge ${present ? 'present' : 'absent'}`}>
+					${present ? 'Present' : 'Absent'}
+				</span>
 			</header>
+			${
+				d.severity
+					? html`<div
+						class="severity-bar"
+						role="meter"
+						aria-valuemin="0"
+						aria-valuemax="3"
+						aria-valuenow="${tier}"
+						aria-label="Severity ${d.severity}"
+					>
+						<span class="severity-fill" style="width: ${pct}%; background: ${barColor};"></span>
+					</div>`
+					: nothing
+			}
 			${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 +183,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;