@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/numerology-card.ts

@@ -1,45 +1,19 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	CalculateExpressionResponse,
+	CalculateLifePathResponse,
+	CalculatePersonalYearResponse,
+	GenerateNumerologyChartResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
-interface NumerologyCommon {
-	number?: number;
-	calculation?: string;
-	type?: 'single' | 'master' | string;
-	hasKarmicDebt?: boolean;
-	karmicDebtNumber?: number;
-	karmicDebtMeaning?: string;
-	meaning?: string;
-}
-
-interface CoreNumber {
-	number?: number;
-	type?: string;
-	meaning?: string;
-	calculation?: string;
-}
-
-interface FullChart {
-	profile?: { fullName?: string; birthDate?: string };
-	coreNumbers?: Record<string, CoreNumber | number>;
-	additionalInsights?: Record<string, unknown>;
-	birthDayProfile?: Record<string, unknown>;
-	maturityStatus?: string;
-	luckyAssociations?: Record<string, unknown>;
-	summary?: string;
-}
-
-interface PersonalYear {
-	year?: number;
-	personalYear?: number;
-	title?: string;
-	theme?: string;
-	keywords?: string[];
-	meaning?: string;
-	advice?: string;
-}
-
-type NumerologyData = NumerologyCommon & FullChart & PersonalYear;
+type NumerologyData =
+	| CalculateLifePathResponse
+	| CalculateExpressionResponse
+	| CalculatePersonalYearResponse
+	| GenerateNumerologyChartResponse;
 
 /**
  * Numerology card. Renders /numerology/{life-path,expression,personal-year,chart}.
@@ -97,7 +71,8 @@ export class RoxyNumerologyCard extends LitElement {
 				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);
 				padding: var(--roxy-space-sm, 0.5rem);
 				border-radius: var(--roxy-radius-sm, 4px);
-				word-break: break-all;
+				white-space: pre-wrap;
+				overflow-wrap: anywhere;
 			}
 
 			.chips {
@@ -159,62 +134,83 @@ export class RoxyNumerologyCard extends LitElement {
 			return html`<div class="roxy-empty" role="status">No numerology data</div>`;
 
 		const headerLabel = LABELS[this.type] ?? this.type;
-		const number = d.personalYear ?? d.number;
-		const cores = d.coreNumbers
-			? Object.entries(d.coreNumbers).filter(
-					([, v]) => v !== null && v !== undefined,
-				)
-			: [];
-
-		return html`<article
-			class="card"
-			aria-label=${headerLabel}
-		>
+
+		if ('coreNumbers' in d) return this.renderChart(d, headerLabel);
+		if ('personalYear' in d) return this.renderPersonalYear(d, headerLabel);
+		return this.renderNumberCard(
+			d as CalculateLifePathResponse | CalculateExpressionResponse,
+			headerLabel,
+		);
+	}
+
+	private renderNumberCard(
+		d: CalculateLifePathResponse | CalculateExpressionResponse,
+		headerLabel: string,
+	) {
+		const keywords = d.meaning?.keywords ?? [];
+		return html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof number === 'number' ? html`<div class="numeral">${number}</div>` : nothing}
+				${typeof d.number === 'number' ? html`<div class="numeral">${d.number}</div>` : nothing}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${
-						d.title
-							? html`<h2 class="title">${d.title}</h2>`
-							: d.type
-								? html`<h2 class="title">
-									${d.type === 'master' ? 'Master number' : 'Single digit'}
-								</h2>`
-								: nothing
-					}
+					${d.meaning?.title ? html`<h2 class="title">${d.meaning.title}</h2>` : nothing}
 				</div>
 			</div>
-			${d.theme ? html`<p><strong>Theme:</strong> ${d.theme}</p>` : nothing}
-			${d.meaning ? html`<p class="meaning">${d.meaning}</p>` : nothing}
-			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${d.meaning?.description ? html`<p class="meaning">${d.meaning.description}</p>` : nothing}
 			${d.calculation ? html`<pre class="calc">${d.calculation}</pre>` : nothing}
 			${
-				d.keywords?.length
+				keywords.length > 0
 					? html`<div class="chips">
-						${d.keywords.map((k) => html`<span>${k}</span>`)}
+						${keywords.map((k) => html`<span>${k}</span>`)}
 					</div>`
 					: nothing
 			}
 			${
-				cores.length > 0
-					? html`<div class="cores">
-						${cores.map(([k, v]) => {
-							const value =
-								typeof v === 'number' ? v : (v as CoreNumber).number;
-							return html`<div class="item">
-								<span>${humanize(k)}</span>
-								<strong>${value ?? ''}</strong>
-							</div>`;
-						})}
+				d.hasKarmicDebt && d.karmicDebtNumber
+					? html`<div class="karmic">
+						Karmic debt ${d.karmicDebtNumber}.
+						${karmicDebtText(d.karmicDebtMeaning)}
 					</div>`
 					: nothing
 			}
+		</article>`;
+	}
+
+	private renderPersonalYear(
+		d: CalculatePersonalYearResponse,
+		headerLabel: string,
+	) {
+		return html`<article class="card" aria-label=${headerLabel}>
+			<div class="hero">
+				${typeof d.personalYear === 'number' ? html`<div class="numeral">${d.personalYear}</div>` : nothing}
+				<div>
+					<p class="label">${headerLabel}</p>
+					${d.theme ? html`<h2 class="title">${d.theme}</h2>` : nothing}
+				</div>
+			</div>
+			${d.forecast ? html`<p class="meaning">${d.forecast}</p>` : nothing}
+			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+		</article>`;
+	}
+
+	private renderChart(d: GenerateNumerologyChartResponse, headerLabel: string) {
+		const cores = Object.entries(d.coreNumbers).filter(
+			([, v]) => v !== null && v !== undefined,
+		);
+		return html`<article class="card" aria-label=${headerLabel}>
+			<div>
+				<p class="label">${headerLabel}</p>
+				${d.profile?.name ? html`<h2 class="title">${d.profile.name}</h2>` : nothing}
+			</div>
 			${
-				d.hasKarmicDebt && d.karmicDebtNumber
-					? html`<div class="karmic">
-						Karmic debt ${d.karmicDebtNumber}.
-						${d.karmicDebtMeaning ? d.karmicDebtMeaning : ''}
+				cores.length > 0
+					? html`<div class="cores">
+						${cores.map(
+							([k, v]) => html`<div class="item">
+								<span>${humanize(k)}</span>
+								<strong>${v.number ?? ''}</strong>
+							</div>`,
+						)}
 					</div>`
 					: nothing
 			}
@@ -229,11 +225,17 @@ const LABELS: Record<string, string> = {
 	chart: 'Numerology chart',
 };
 
-function humanize(s: string): string {
-	return s
-		.replace(/[_-]+/g, ' ')
-		.replace(/([a-z])([A-Z])/g, '$1 $2')
-		.replace(/^\w/, (c) => c.toUpperCase());
+type KarmicDebtMeaning = {
+	description: string;
+	challenge: string;
+	resolution: string;
+};
+
+function karmicDebtText(value: KarmicDebtMeaning | undefined): string {
+	if (!value) return '';
+	return [value.description, value.challenge, value.resolution]
+		.filter(Boolean)
+		.join(' ');
 }
 
 declare global {

package/src/components/panchang-table.ts

@@ -1,53 +1,16 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetBasicPanchangResponse,
+	GetDetailedPanchangResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { formatDate, formatTime, formatTimeRange } from '../utils/format.js';
 
-interface PanchangTime {
-	start?: string;
-	end?: string;
-}
-
-interface PanchangData {
-	date?: string;
-	location?: { name?: string; latitude?: number; longitude?: number };
-	vara?: string;
-	sunrise?: string;
-	sunset?: string;
-	moonrise?: string;
-	moonset?: string;
-	sunSign?: string;
-	moonSign?: string;
-	sunNakshatra?: string;
-	tithi?: string | { name?: string; phase?: string; end?: string };
-	nakshatra?: string | { name?: string; lord?: string; end?: string };
-	yoga?: string | { name?: string; end?: string };
-	karana?: string | { name?: string; end?: string };
-	hora?: string;
-	rahuKaal?: PanchangTime;
-	yamaganda?: PanchangTime;
-	gulika?: PanchangTime;
-	abhijitMuhurta?: PanchangTime;
-	brahmaMuhurta?: PanchangTime;
-	vijayaMuhurta?: PanchangTime;
-	nishitaMuhurta?: PanchangTime;
-	godhuliMuhurta?: PanchangTime;
-	pratahSandhya?: PanchangTime;
-	sayahnaSandhya?: PanchangTime;
-	durMuhurta?: PanchangTime[];
-	varjyam?: PanchangTime[];
-	amritKalam?: PanchangTime[];
-	chandrabalam?: string | string[];
-	tarabalam?: string;
-	panchaka?: string;
-	bhadra?: string;
-	sunLongitude?: number;
-	moonLongitude?: number;
-}
+type PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;
+type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
 
-/**
- * Panchang table for /vedic-astrology/panchang/{basic,detailed}. Detailed mode
- * renders 15+ muhurtas. Basic mode renders the five elements only.
- */
+/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */
 @customElement('roxy-panchang-table')
 export class RoxyPanchangTable extends LitElement {
 	static styles = [
@@ -123,35 +86,40 @@ export class RoxyPanchangTable extends LitElement {
 		const d = this.data;
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+		const detailed = 'sunrise' in d ? d : null;
 
-		const fivefold = [
+		const fivefold: Array<[string, string]> = [
 			['Tithi', this.formatPart(d.tithi)],
 			['Nakshatra', this.formatPart(d.nakshatra)],
 			['Yoga', this.formatPart(d.yoga)],
 			['Karana', this.formatPart(d.karana)],
-			['Vara', d.vara ?? ''],
 		];
+		if (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);
 
-		const muhurtas: Array<[string, PanchangTime | undefined]> = [
-			['Brahma Muhurta', d.brahmaMuhurta],
-			['Abhijit Muhurta', d.abhijitMuhurta],
-			['Vijaya Muhurta', d.vijayaMuhurta],
-			['Godhuli Muhurta', d.godhuliMuhurta],
-			['Nishita Muhurta', d.nishitaMuhurta],
-			['Pratah Sandhya', d.pratahSandhya],
-			['Sayahna Sandhya', d.sayahnaSandhya],
-		];
+		const muhurtas: Array<[string, PanchangTime | undefined]> = detailed
+			? [
+					['Brahma Muhurta', detailed.brahmaMuhurta],
+					['Abhijit Muhurta', detailed.abhijitMuhurta],
+					['Vijaya Muhurta', detailed.vijayaMuhurta],
+					['Godhuli Muhurta', detailed.godhuliMuhurta],
+					['Nishita Muhurta', detailed.nishitaMuhurta],
+					['Pratah Sandhya', detailed.pratahSandhya],
+					['Sayahna Sandhya', detailed.sayahnaSandhya],
+				]
+			: [];
 
-		const inauspicious: Array<[string, PanchangTime | undefined]> = [
-			['Rahu Kaal', d.rahuKaal],
-			['Yamaganda', d.yamaganda],
-			['Gulika', d.gulika],
-		];
+		const inauspicious: Array<[string, PanchangTime | undefined]> = detailed
+			? [
+					['Rahu Kaal', detailed.rahuKaal],
+					['Yamaganda', detailed.yamaganda],
+					['Gulika', detailed.gulika],
+				]
+			: [];
 
 		return html`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
-				<span class="date">${d.date ?? ''}</span>
+				<span class="date">${detailed ? formatDate(detailed.date) : ''}</span>
 			</header>
 			<table>
 				<tbody>
@@ -162,34 +130,34 @@ export class RoxyPanchangTable extends LitElement {
 						</tr>`,
 					)}
 					${
-						d.sunrise
+						detailed?.sunrise
 							? html`<tr>
 								<th>Sunrise</th>
-								<td>${d.sunrise}</td>
+								<td>${formatTime(detailed.sunrise)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.sunset
+						detailed?.sunset
 							? html`<tr>
 								<th>Sunset</th>
-								<td>${d.sunset}</td>
+								<td>${formatTime(detailed.sunset)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.moonrise
+						detailed?.moonrise
 							? html`<tr>
 								<th>Moonrise</th>
-								<td>${d.moonrise}</td>
+								<td>${formatTime(detailed.moonrise)}</td>
 							</tr>`
 							: nothing
 					}
 					${
-						d.moonset
+						detailed?.moonset
 							? html`<tr>
 								<th>Moonset</th>
-								<td>${d.moonset}</td>
+								<td>${formatTime(detailed.moonset)}</td>
 							</tr>`
 							: nothing
 					}
@@ -207,7 +175,7 @@ export class RoxyPanchangTable extends LitElement {
 									.map(
 										([k, v]) => html`<tr>
 											<th>${k}</th>
-											<td>${formatRange(v)}</td>
+											<td>${formatTimeRange(v)}</td>
 										</tr>`,
 									)}
 							</tbody>
@@ -220,7 +188,7 @@ export class RoxyPanchangTable extends LitElement {
 									.map(
 										([k, v]) => html`<tr>
 											<th>${k}</th>
-											<td>${formatRange(v)}</td>
+											<td>${formatTimeRange(v)}</td>
 										</tr>`,
 									)}
 							</tbody>
@@ -252,12 +220,6 @@ export class RoxyPanchangTable extends LitElement {
 	}
 }
 
-function formatRange(t: PanchangTime | undefined): string {
-	if (!t) return '';
-	if (t.start && t.end) return `${t.start} - ${t.end}`;
-	return t.start ?? t.end ?? '';
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-panchang-table': RoxyPanchangTable;

package/src/components/shadbala-table.ts

@@ -0,0 +1,286 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type { ShadbalaResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+type Planet = ShadbalaResponse['planets'][number];
+
+/** CSS variable and display name for each of the 6 bala components. */
+const BALA_COMPONENTS: Array<{
+	key: keyof Pick<
+		Planet,
+		| 'sthanaBala'
+		| 'digBala'
+		| 'kalaBala'
+		| 'chestaBala'
+		| 'naisargikaBala'
+		| 'drikBala'
+	>;
+	label: string;
+	color: string;
+}> = [
+	{ key: 'sthanaBala', label: 'Sthana', color: 'var(--roxy-info, #0284c7)' },
+	{ key: 'digBala', label: 'Dig', color: 'var(--roxy-success, #16a34a)' },
+	{ key: 'kalaBala', label: 'Kala', color: 'var(--roxy-warning, #ea580c)' },
+	{ key: 'chestaBala', label: 'Chesta', color: 'var(--roxy-accent, #f59e0b)' },
+	{
+		key: 'naisargikaBala',
+		label: 'Naisargika',
+		color: 'var(--roxy-secondary, #475569)',
+	},
+	{ key: 'drikBala', label: 'Drik', color: 'var(--roxy-danger, #dc2626)' },
+];
+
+/**
+ * Shadbala six-fold planetary strength table with stacked bar visualization.
+ * Pass `data` from /vedic-astrology/shadbala.
+ */
+@customElement('roxy-shadbala-table')
+export class RoxyShadbalaTable extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+
+			.planet-row {
+				display: grid;
+				grid-template-columns: 8rem 1fr auto;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-sm, 0.5rem) 0;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+
+			.planet-row:last-of-type {
+				border-bottom: none;
+			}
+
+			.planet-label {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.glyph {
+				font-size: 1.2em;
+				line-height: 1;
+			}
+
+			.bar-wrap {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.bar {
+				display: flex;
+				height: 12px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				overflow: hidden;
+				background: var(--roxy-border, #e4e4e7);
+			}
+
+			.bar-segment {
+				height: 100%;
+				transition: flex-grow var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+
+			.pills {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 4px;
+			}
+
+			.rupas-label {
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				white-space: nowrap;
+			}
+
+			.adequacy-badge {
+				display: inline-block;
+				padding: 1px 6px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.adequacy-badge--adequate {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+
+			.adequacy-badge--weak {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+
+			.rank-badge {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.legend {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.legend-row {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.legend-swatch {
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				flex-shrink: 0;
+			}
+
+			@container (max-width: 480px) {
+				.planet-row {
+					grid-template-columns: 6rem 1fr;
+					grid-template-rows: auto auto;
+				}
+				.pills {
+					grid-column: 1 / -1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-start;
+				}
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: ShadbalaResponse | null = null;
+
+	render() {
+		if (!this.data?.planets?.length) {
+			return html`<div class="roxy-empty" role="status">No shadbala data</div>`;
+		}
+
+		const sorted = [...this.data.planets].sort(
+			(a, b) => a.relativeRank - b.relativeRank,
+		);
+
+		return html`<div class="wrap" aria-label="Shadbala planetary strength">
+			<div class="head">
+				<h2 class="title">Shadbala</h2>
+				<p class="subtitle">${sorted.length} planets ranked by strength</p>
+			</div>
+
+			<div role="list" aria-label="Planet strength bars">
+				${sorted.map((p) => this.renderPlanetRow(p))}
+			</div>
+
+			<div class="legend" aria-label="Strength component legend">
+				${BALA_COMPONENTS.map(
+					(b) => html`<div class="legend-row">
+						<span
+							class="legend-swatch"
+							style="background: ${b.color}"
+							aria-hidden="true"
+						></span>
+						${b.label}
+					</div>`,
+				)}
+			</div>
+		</div>`;
+	}
+
+	private renderPlanetRow(p: Planet) {
+		const glyph = PLANET_GLYPH[capitalize(p.planet)] ?? '';
+
+		// Compute positive component values (drikBala can be negative)
+		const values = BALA_COMPONENTS.map((b) => Math.max(0, p[b.key] as number));
+		const total = values.reduce((s, v) => s + v, 0);
+
+		const isAdequate =
+			typeof p.strengthRatio === 'number' && p.strengthRatio >= 1;
+		const badgeClass = isAdequate
+			? 'adequacy-badge--adequate'
+			: 'adequacy-badge--weak';
+		const badgeLabel = isAdequate ? 'adequate' : 'weak';
+
+		const rupasStr =
+			formatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2)
+				? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R`
+				: '';
+
+		return html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+			<div class="planet-label">
+				<span class="glyph" aria-hidden="true">${glyph}</span>
+				${p.planet}
+				<span class="rank-badge" aria-label="rank ${p.relativeRank}">#${p.relativeRank}</span>
+			</div>
+			<div class="bar-wrap">
+				<div class="bar" role="img" aria-label="Strength components for ${p.planet}">
+					${
+						total > 0
+							? BALA_COMPONENTS.map((b, i) => {
+									const v = values[i];
+									if (v <= 0) return nothing;
+									const grow = (v / total) * 100;
+									return html`<div
+									class="bar-segment"
+									style="flex-grow: ${grow}; background: ${b.color};"
+									title="${b.label}: ${formatNumber(v, 1)}"
+								></div>`;
+								})
+							: nothing
+					}
+				</div>
+			</div>
+			<div class="pills">
+				${rupasStr ? html`<span class="rupas-label">${rupasStr}</span>` : nothing}
+				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
+			</div>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-shadbala-table': RoxyShadbalaTable;
+	}
+}