@roxyapi/ui 0.0.1 → 0.1.1

package/src/components/panchang-table.ts

@@ -0,0 +1,265 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.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;
+}
+
+/**
+ * Panchang table for /vedic-astrology/panchang/{basic,detailed}. Detailed mode
+ * renders 15+ muhurtas. Basic mode renders the five elements only.
+ */
+@customElement('roxy-panchang-table')
+export class RoxyPanchangTable extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: hidden;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				display: flex;
+				justify-content: space-between;
+				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);
+			}
+			.date {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			tbody tr:nth-child(odd) {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 24%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				vertical-align: top;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				width: 38%;
+				text-transform: capitalize;
+			}
+			td {
+				color: var(--roxy-fg, #0a0a0a);
+				font-variant-numeric: tabular-nums;
+			}
+			.section {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: PanchangData | null = null;
+
+	@property({ type: String, reflect: true })
+	detail: 'basic' | 'detailed' = 'detailed';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+
+		const fivefold = [
+			['Tithi', this.formatPart(d.tithi)],
+			['Nakshatra', this.formatPart(d.nakshatra)],
+			['Yoga', this.formatPart(d.yoga)],
+			['Karana', this.formatPart(d.karana)],
+			['Vara', d.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 inauspicious: Array<[string, PanchangTime | undefined]> = [
+			['Rahu Kaal', d.rahuKaal],
+			['Yamaganda', d.yamaganda],
+			['Gulika', d.gulika],
+		];
+
+		return html`<div class="wrap" aria-label="Panchang">
+			<header class="head">
+				<h2 class="title">Panchang</h2>
+				<span class="date">${d.date ?? ''}</span>
+			</header>
+			<table>
+				<tbody>
+					${fivefold.map(
+						([k, v]) => html`<tr>
+							<th>${k}</th>
+							<td>${v}</td>
+						</tr>`,
+					)}
+					${
+						d.sunrise
+							? html`<tr>
+								<th>Sunrise</th>
+								<td>${d.sunrise}</td>
+							</tr>`
+							: nothing
+					}
+					${
+						d.sunset
+							? html`<tr>
+								<th>Sunset</th>
+								<td>${d.sunset}</td>
+							</tr>`
+							: nothing
+					}
+					${
+						d.moonrise
+							? html`<tr>
+								<th>Moonrise</th>
+								<td>${d.moonrise}</td>
+							</tr>`
+							: nothing
+					}
+					${
+						d.moonset
+							? html`<tr>
+								<th>Moonset</th>
+								<td>${d.moonset}</td>
+							</tr>`
+							: nothing
+					}
+				</tbody>
+			</table>
+			${
+				this.detail === 'detailed' &&
+				(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))
+					? html`
+						<div class="section">Auspicious muhurtas</div>
+						<table>
+							<tbody>
+								${muhurtas
+									.filter(([, v]) => !!v)
+									.map(
+										([k, v]) => html`<tr>
+											<th>${k}</th>
+											<td>${formatRange(v)}</td>
+										</tr>`,
+									)}
+							</tbody>
+						</table>
+						<div class="section">Inauspicious periods</div>
+						<table>
+							<tbody>
+								${inauspicious
+									.filter(([, v]) => !!v)
+									.map(
+										([k, v]) => html`<tr>
+											<th>${k}</th>
+											<td>${formatRange(v)}</td>
+										</tr>`,
+									)}
+							</tbody>
+						</table>
+					`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private formatPart(v: unknown): string {
+		if (!v) return '';
+		if (typeof v === 'string') return v;
+		if (typeof v === 'object') {
+			const obj = v as {
+				name?: string;
+				lord?: string;
+				phase?: string;
+				end?: string;
+			};
+			const parts = [
+				obj.name,
+				obj.lord ? `(${obj.lord})` : '',
+				obj.phase,
+			].filter(Boolean);
+			return parts.join(' ');
+		}
+		return String(v);
+	}
+}
+
+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/synastry-chart.ts

@@ -0,0 +1,341 @@
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { polarToCartesian } from '../utils/degree.js';
+
+interface PlanetEntry {
+	name?: string;
+	planet?: string;
+	longitude?: number;
+	degree?: number;
+	sign?: string;
+}
+
+interface InterAspect {
+	planet1?: string;
+	planet2?: string;
+	aspect?: string;
+	orb?: number;
+	strength?: string;
+	interpretation?: string;
+}
+
+interface SynastryData {
+	person1?: {
+		planets?: PlanetEntry[] | Record<string, PlanetEntry>;
+		name?: string;
+	};
+	person2?: {
+		planets?: PlanetEntry[] | Record<string, PlanetEntry>;
+		name?: string;
+	};
+	compatibilityScore?: number;
+	summary?: string;
+	interAspects?: InterAspect[];
+	strengths?: string[];
+	challenges?: string[];
+}
+
+const SIZE = 360;
+const CENTER = SIZE / 2;
+const OUTER_R = 170;
+const SIGN_R = 154;
+const P1_R = 124;
+const P2_R = 96;
+
+/**
+ * Dual-wheel synastry chart with inter-aspects table. Pass `data` from
+ * /astrology/synastry.
+ */
+@customElement('roxy-synastry-chart')
+export class RoxySynastryChart 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;
+				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;
+			}
+
+			.score {
+				font-variant-numeric: tabular-nums;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-xl, 1.5rem);
+			}
+
+			svg {
+				display: block;
+				width: 100%;
+				max-width: 400px;
+				margin: 0 auto;
+			}
+
+			.wheel-line {
+				fill: none;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.sign {
+				fill: var(--roxy-secondary, #475569);
+				font-size: 14px;
+			}
+			.p1 {
+				fill: var(--roxy-accent, #f59e0b);
+				font-weight: 600;
+				font-size: 13px;
+			}
+			.p2 {
+				fill: var(--roxy-info, #0284c7);
+				font-weight: 600;
+				font-size: 13px;
+			}
+
+			.summary {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-base, 1rem);
+			}
+
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				text-align: left;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.06em;
+			}
+			td.orb {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.lists {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.lists h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				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);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: SynastryData | null = null;
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No synastry data</div>`;
+		const {
+			person1,
+			person2,
+			compatibilityScore,
+			summary,
+			interAspects = [],
+		} = this.data;
+		const p1Planets = this.normalizePlanets(person1?.planets);
+		const p2Planets = this.normalizePlanets(person2?.planets);
+
+		return html`<div
+			class="wrap"
+			aria-label="Synastry compatibility chart"
+		>
+			<div class="head">
+				<h2 class="title">Synastry</h2>
+				${
+					typeof compatibilityScore === 'number'
+						? html`<span class="score" aria-label=${`Score ${compatibilityScore} of 100`}
+							>${compatibilityScore} / 100</span
+						>`
+						: nothing
+				}
+			</div>
+			<svg
+				viewBox="0 0 ${SIZE} ${SIZE}"
+				role="img"
+				aria-label="Dual chart wheel comparing two natal charts"
+			>
+				<title>Synastry dual wheel</title>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${OUTER_R}
+					stroke-width="1.5"
+				/>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${P2_R + 14}
+					stroke-width="0.8"
+				/>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${P2_R - 14}
+					stroke-width="0.6"
+				/>
+				${this.renderSpokes()} ${this.renderSigns()}
+				${this.renderRing(p1Planets, P1_R, 'p1')} ${this.renderRing(p2Planets, P2_R, 'p2')}
+			</svg>
+			${summary ? html`<p class="summary">${summary}</p>` : nothing}
+			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
+			${
+				(this.data.strengths?.length ?? 0) > 0 ||
+				(this.data.challenges?.length ?? 0) > 0
+					? html`<div class="lists">
+						${
+							this.data.strengths?.length
+								? html`<div>
+									<h3>Strengths</h3>
+									<ul>
+										${this.data.strengths.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>`
+								: nothing
+						}
+						${
+							this.data.challenges?.length
+								? html`<div>
+									<h3>Challenges</h3>
+									<ul>
+										${this.data.challenges.map((s) => html`<li>${s}</li>`)}
+									</ul>
+								</div>`
+								: nothing
+						}
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private normalizePlanets(
+		p: PlanetEntry[] | Record<string, PlanetEntry> | undefined,
+	) {
+		if (!p) return [];
+		if (Array.isArray(p)) return p;
+		return Object.entries(p).map(([name, e]) => ({ ...e, name }));
+	}
+
+	private renderSpokes() {
+		return Array.from({ length: 12 }, (_, i) => {
+			const angle = i * 30 - 90;
+			const start = polarToCartesian(CENTER, CENTER, P2_R - 14, angle);
+			const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
+			return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
+		});
+	}
+
+	private renderSigns() {
+		const order = [
+			'Aries',
+			'Taurus',
+			'Gemini',
+			'Cancer',
+			'Leo',
+			'Virgo',
+			'Libra',
+			'Scorpio',
+			'Sagittarius',
+			'Capricorn',
+			'Aquarius',
+			'Pisces',
+		];
+		return order.map((s, i) => {
+			const angle = i * 30 + 15 - 90;
+			const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
+			return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
+		});
+	}
+
+	private renderRing(planets: PlanetEntry[], radius: number, cls: string) {
+		return planets.map((p) => {
+			const lon =
+				typeof p.longitude === 'number'
+					? p.longitude
+					: typeof p.degree === 'number'
+						? p.degree
+						: NaN;
+			if (!Number.isFinite(lon)) return nothing;
+			const pos = polarToCartesian(CENTER, CENTER, radius, lon - 90);
+			const name = p.name ?? p.planet ?? '';
+			const glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);
+			return svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${name}</title>${glyph}</text>`;
+		});
+	}
+
+	private renderAspects(aspects: InterAspect[]) {
+		return html`<table>
+			<thead>
+				<tr>
+					<th>Planet 1</th>
+					<th>Planet 2</th>
+					<th>Aspect</th>
+					<th>Orb</th>
+					<th>Strength</th>
+				</tr>
+			</thead>
+			<tbody>
+				${aspects.slice(0, 16).map(
+					(a) => html`<tr>
+						<td>${a.planet1 ?? ''}</td>
+						<td>${a.planet2 ?? ''}</td>
+						<td>${a.aspect ?? ''}</td>
+						<td class="orb">
+							${typeof a.orb === 'number' ? a.orb.toFixed(1) : ''}
+						</td>
+						<td>${a.strength ?? ''}</td>
+					</tr>`,
+				)}
+			</tbody>
+		</table>`;
+	}
+}
+
+function capitalize(s: string): string {
+	if (!s) return '';
+	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-synastry-chart': RoxySynastryChart;
+	}
+}