@roxyapi/ui 0.0.1 → 0.1.1

package/src/components/compatibility-card.ts

@@ -0,0 +1,231 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface CompatibilityData {
+	overallScore?: number;
+	score?: number;
+	rating?: string;
+	relationshipArchetype?: string;
+	advice?: string;
+	summary?: string;
+	categoryScores?: Record<string, number>;
+	categoryBreakdown?: Record<string, number>;
+	emotional?: number;
+	communication?: number;
+	romance?: number;
+	strengths?: string[];
+	challenges?: string[];
+	keyAspects?: string[];
+	elementBalance?: Record<string, number>;
+	person1?: { name?: string; sign?: string; lifePath?: number };
+	person2?: { name?: string; sign?: string; lifePath?: number };
+}
+
+/**
+ * Cross-domain compatibility card. Renders /astrology/compatibility-score,
+ * /numerology/compatibility, or /biorhythm/compatibility responses.
+ */
+@customElement('roxy-compatibility-card')
+export class RoxyCompatibilityCard extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.head {
+				display: grid;
+				grid-template-columns: 1fr auto;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head h2 {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+
+			.score {
+				font-variant-numeric: tabular-nums;
+				font-size: 2rem;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				line-height: 1;
+			}
+			.rating {
+				color: var(--roxy-secondary, #475569);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			.bar-row {
+				display: grid;
+				grid-template-columns: 8rem 1fr 3.5rem;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: center;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.bar {
+				height: 8px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+			}
+			.bar > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.bar-row > span:last-child {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+				text-align: right;
+			}
+
+			.archetype {
+				color: var(--roxy-info, #0284c7);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.lists {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.lists h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.lists ul {
+				margin: 0;
+				padding-left: var(--roxy-space-md, 1rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: CompatibilityData | null = null;
+
+	@property({ type: String, reflect: true })
+	mode: 'astrology' | 'numerology' | 'biorhythm' = 'astrology';
+
+	private getBreakdown(): Record<string, number> {
+		const d = this.data;
+		if (!d) return {};
+		if (d.categoryScores) return d.categoryScores;
+		if (d.categoryBreakdown) return d.categoryBreakdown;
+		const inferred: Record<string, number> = {};
+		if (typeof d.emotional === 'number') inferred.emotional = d.emotional;
+		if (typeof d.communication === 'number')
+			inferred.communication = d.communication;
+		if (typeof d.romance === 'number') inferred.romance = d.romance;
+		if (d.elementBalance) Object.assign(inferred, d.elementBalance);
+		return inferred;
+	}
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
+		const score = d.overallScore ?? d.score;
+		const breakdown = this.getBreakdown();
+
+		return html`<article
+			class="card"
+			aria-label=${`Compatibility (${this.mode})`}
+		>
+			<div class="head">
+				<h2>${this.mode} compatibility</h2>
+				<div>
+					${
+						typeof score === 'number'
+							? html`<div class="score">${score}</div>`
+							: nothing
+					}
+					${d.rating ? html`<div class="rating">${d.rating}</div>` : nothing}
+				</div>
+			</div>
+
+			${
+				Object.keys(breakdown).length > 0
+					? html`<div role="list">
+						${Object.entries(breakdown).map(
+							([k, v]) => html`<div class="bar-row" role="listitem">
+								<span style="text-transform: capitalize">${k}</span>
+								<span class="bar"
+									><span style="width: ${Math.max(0, Math.min(100, v))}%"></span
+								></span>
+								<span>${v}</span>
+							</div>`,
+						)}
+					</div>`
+					: nothing
+			}
+			${
+				d.relationshipArchetype
+					? html`<p>
+						<span class="archetype">${d.relationshipArchetype}</span>
+					</p>`
+					: nothing
+			}
+			${d.summary ? html`<p>${d.summary}</p>` : nothing}
+			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${
+				(d.strengths?.length ?? 0) > 0 || (d.challenges?.length ?? 0) > 0
+					? html`<div class="lists">
+						${
+							d.strengths?.length
+								? html`<div>
+									<h3>Strengths</h3>
+									<ul>
+										${d.strengths.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>`
+								: nothing
+						}
+						${
+							d.challenges?.length
+								? html`<div>
+									<h3>Challenges</h3>
+									<ul>
+										${d.challenges.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>`
+								: nothing
+						}
+						${
+							d.keyAspects?.length
+								? html`<div>
+									<h3>Key aspects</h3>
+									<ul>
+										${d.keyAspects.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>`
+								: nothing
+						}
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-compatibility-card': RoxyCompatibilityCard;
+	}
+}

package/src/components/dasha-timeline.ts

@@ -0,0 +1,251 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface DashaPeriod {
+	mahadashaLord?: string;
+	antardashaLord?: string;
+	pratyantardashaLord?: string;
+	lord?: string;
+	planet?: string;
+	startDate?: string;
+	endDate?: string;
+	years?: number;
+	durationYears?: number;
+}
+
+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;
+}
+
+/**
+ * Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.
+ * Default mode shows the active mahadasha + antardasha + pratyantardasha.
+ * Switch to period="major" for the full 120-year Vimshottari timeline.
+ */
+@customElement('roxy-dasha-timeline')
+export class RoxyDashaTimeline extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.nakshatra {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			.current {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.current div span:first-child {
+				display: block;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.current div strong {
+				font-size: var(--roxy-text-base, 1rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.timeline {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.bar {
+				display: grid;
+				grid-template-columns: 5rem 1fr 8rem;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: center;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.bar-track {
+				height: 14px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+			}
+			.bar-track > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.dates {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+				text-align: right;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: DashaData | null = null;
+
+	@property({ type: String, reflect: true })
+	period: 'current' | 'major' | 'sub' = 'current';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No dasha data</div>`;
+
+		const periods = this.collectPeriods(d);
+		const maxYears = periods.length
+			? Math.max(...periods.map((p) => p.durationYears ?? p.years ?? 1))
+			: 0;
+
+		return html`<div class="wrap" aria-label="Dasha timeline">
+			<header class="head">
+				<h2 class="title">
+					${
+						this.period === 'major'
+							? 'Vimshottari Mahadasha'
+							: this.period === 'sub'
+								? 'Antardasha'
+								: 'Active dashas'
+					}
+				</h2>
+				${
+					d.nakshatraName || d.moonNakshatra
+						? html`<div class="nakshatra">
+							Moon nakshatra: ${d.nakshatraName ?? d.moonNakshatra}
+							${d.nakshatraLord ? html`(lord ${d.nakshatraLord})` : nothing}
+						</div>`
+						: nothing
+				}
+			</header>
+
+			${this.period === 'current' ? this.renderCurrent(d) : nothing}
+			${
+				periods.length > 0
+					? html`<div class="timeline" role="list">
+						${periods.map((p) => this.renderBar(p, maxYears))}
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderCurrent(d: DashaData) {
+		return html`<div class="current">
+			${
+				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>`
+					: nothing
+			}
+			${
+				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>`
+					: nothing
+			}
+			${
+				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>`
+					: 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 ?? [];
+	}
+
+	private renderBar(p: DashaPeriod, max: number) {
+		const lord =
+			p.lord ?? p.mahadashaLord ?? p.antardashaLord ?? p.planet ?? '';
+		const years = p.durationYears ?? p.years ?? 0;
+		const width = max > 0 ? (years / max) * 100 : 0;
+		return html`<div class="bar" role="listitem">
+			<span>${lord}</span>
+			<span class="bar-track"><span style="width: ${width}%"></span></span>
+			<span class="dates">
+				${p.startDate ? formatYear(p.startDate) : ''}
+				${p.endDate ? html`- ${formatYear(p.endDate)}` : ''}
+			</span>
+		</div>`;
+	}
+}
+
+function formatYear(s: string): string {
+	const m = s.match(/^(\d{4})/);
+	return m ? m[1] : s;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-dasha-timeline': RoxyDashaTimeline;
+	}
+}