@roxyapi/ui 0.1.3 → 0.2.0

package/src/components/guna-milan.ts

@@ -33,6 +33,14 @@ export class RoxyGunaMilan extends LitElement {
 				gap: var(--roxy-space-md, 1rem);
 			}
 
+			.score-header {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+			}
+			.score-info {
+				flex: 1;
+			}
 			.score-bar {
 				display: grid;
 				grid-template-columns: 1fr auto;
@@ -54,6 +62,26 @@ export class RoxyGunaMilan extends LitElement {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-secondary, #475569);
 			}
+			.score-ring {
+				width: 120px;
+				height: 120px;
+				flex-shrink: 0;
+			}
+			.score-ring svg {
+				width: 100%;
+				height: 100%;
+			}
+			.score-ring .ring-text {
+				font-size: 22px;
+				font-weight: 700;
+				fill: var(--roxy-fg, #0a0a0a);
+				font-family: var(--roxy-font-sans);
+			}
+			.score-ring .ring-max {
+				font-size: 10px;
+				fill: var(--roxy-muted, #71717a);
+				font-family: var(--roxy-font-sans);
+			}
 
 			table {
 				width: 100%;
@@ -130,24 +158,54 @@ export class RoxyGunaMilan extends LitElement {
 			(b) => b?.category !== undefined,
 		);
 
+		const score = d.total ?? 0;
+		const max = d.maxScore ?? 36;
+		const pct = (score / max) * 100;
+		const trackColor =
+			'color-mix(in srgb, var(--roxy-border) 50%, transparent)';
+		const fillColor =
+			pct >= 70
+				? 'var(--roxy-success)'
+				: pct >= 50
+					? 'var(--roxy-warning)'
+					: 'var(--roxy-danger)';
+		// SVG circle with r=45: circumference = 2 * pi * 45 = 282.74
+		// dasharray segments = pct * 2.827, (100 - pct) * 2.827
+		const dashFill = pct * 2.827;
+		const dashGap = (100 - pct) * 2.827;
+
 		return html`<article class="card" aria-label="Guna Milan score">
-			<div class="score-bar">
-				<div>
-					<span class="total">${formatNumber(d.total, 1)}</span>
-					<span class="over"> / ${d.maxScore}</span>
-					${
-						typeof d.percentage === 'number'
-							? html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
-								${formatPercent(d.percentage, 1)}
-							</small>`
-							: nothing
-					}
+			<div class="score-header">
+				<div class="score-info">
+					<div class="score-bar">
+						<div>
+							<span class="total">${formatNumber(d.total, 1)}</span>
+							<span class="over"> / ${d.maxScore}</span>
+							${
+								typeof d.percentage === 'number'
+									? html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
+										${formatPercent(d.percentage, 1)}
+									</small>`
+									: nothing
+							}
+						</div>
+						${
+							d.recommendation
+								? html`<span class="recommendation">${d.recommendation}</span>`
+								: nothing
+						}
+					</div>
+				</div>
+				<div class="score-ring" role="meter" aria-label="Guna milan score" aria-valuemin="0" aria-valuemax="36" aria-valuenow="${score}">
+					<svg viewBox="0 0 100 100" aria-hidden="true">
+						<circle class="ring-track" cx="50" cy="50" r="45" fill="none" stroke="${trackColor}" stroke-width="8"/>
+						<circle class="ring-fill" cx="50" cy="50" r="45" fill="none" stroke="${fillColor}" stroke-width="8"
+								stroke-dasharray="${dashFill},${dashGap}" stroke-linecap="round"
+								transform="rotate(-90 50 50)"/>
+						<text x="50" y="50" text-anchor="middle" dominant-baseline="central" class="ring-text">${score}</text>
+						<text x="50" y="64" text-anchor="middle" dominant-baseline="central" class="ring-max">/${max}</text>
+					</svg>
 				</div>
-				${
-					d.recommendation
-						? html`<span class="recommendation">${d.recommendation}</span>`
-						: nothing
-				}
 			</div>
 
 			${

package/src/components/horoscope-card.ts

@@ -7,6 +7,7 @@ import type {
 	GetWeeklyHoroscopeResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
 
 type HoroscopeData =
 	| GetDailyHoroscopeResponse
@@ -123,6 +124,13 @@ export class RoxyHoroscopeCard extends LitElement {
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 
+			.compat-wrap {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
 			.compat {
 				display: flex;
 				flex-wrap: wrap;
@@ -292,10 +300,6 @@ export class RoxyHoroscopeCard extends LitElement {
 	}
 }
 
-function capitalize(s: string): string {
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-horoscope-card': RoxyHoroscopeCard;

package/src/components/location-search.ts

@@ -11,9 +11,8 @@ type CityResult = SearchCitiesResponse['cities'][number];
  * `roxy-location-select` CustomEvent with the chosen city. Required for any
  * chart endpoint.
  *
- * Lifted from jyotish-vedic-astrology-app/src/components/city-search.tsx,
- * keeping the 300ms debounce and click-outside behavior, replacing React
- * state with Lit reactive properties and using direct fetch to RoxyAPI.
+ * Behavior: 300ms input debounce, click-outside dismiss, keyboard navigation
+ * with arrow keys / Enter / Escape, AbortController on stale requests.
  *
  * Attributes:
  *   api-key            optional. Direct call to roxyapi.com when set.

package/src/components/natal-chart.ts

@@ -1,22 +1,27 @@
 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 { PLANET_GLYPH, SIGN_GLYPH, SIGNS_ORDER } from '../tokens/index.js';
 import type { NatalChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { longitudeToSignPosition, polarToCartesian } from '../utils/degree.js';
-import { formatNumber } from '../utils/format.js';
+import { polarToCartesian } from '../utils/degree.js';
+import {
+	ASPECT_CLASS,
+	formatNumber,
+	normalizeAspect,
+} from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
 
 type PlanetEntry = NatalChartResponse['planets'][number];
 type AspectEntry = NatalChartResponse['aspects'][number];
 
-const SIZE = 384;
+const SIZE = 420;
 const CENTER = SIZE / 2;
-const OUTER_R = 150;
-const SIGN_R = 134;
-const HOUSE_R = 110;
-const PLANET_R = 88;
-const ANGLE_TICK_R = 162;
-const ANGLE_LABEL_R = 176;
+const OUTER_R = 164;
+const SIGN_R = 146;
+const HOUSE_R = 120;
+const PLANET_R = 96;
+const ANGLE_TICK_R = 178;
+const ANGLE_LABEL_R = 196;
 
 /**
  * Western natal chart wheel. Renders the 12 zodiac signs, 12 houses, planet
@@ -125,6 +130,136 @@ export class RoxyNatalChart extends LitElement {
 				margin-right: 4px;
 				vertical-align: middle;
 			}
+
+			.details {
+				margin-top: var(--roxy-space-md, 1rem);
+			}
+
+			.pill-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+
+			.pill {
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-fg, #0f172a) 8%, transparent);
+				color: var(--roxy-fg, #0f172a);
+			}
+
+			.pill--success {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 15%, transparent);
+				color: var(--roxy-success, #16a34a);
+			}
+
+			.pill--danger {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 15%, transparent);
+				color: var(--roxy-danger, #dc2626);
+			}
+
+			.pill--muted {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.summary {
+				color: var(--roxy-fg, #0f172a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: var(--roxy-space-md, 1rem) 0;
+			}
+
+			.dist-grid {
+				display: grid;
+				grid-template-columns: 1fr 1fr;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			@container (max-width: 639px) {
+				.dist-grid {
+					grid-template-columns: 1fr;
+				}
+			}
+
+			.dist-section h3 {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+
+			.dist-row {
+				display: grid;
+				grid-template-columns: 4rem 1fr 1.5rem;
+				align-items: center;
+				gap: var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-fg, #0f172a);
+				margin-bottom: 4px;
+			}
+
+			.dist-bar {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 20%, transparent);
+				height: 6px;
+				border-radius: 3px;
+			}
+
+			.dist-bar > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				border-radius: 3px;
+			}
+
+			.interpretations {
+				margin-top: var(--roxy-space-md, 1rem);
+			}
+			.interpretations h3 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+			}
+			.interp-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-card summary {
+				cursor: pointer;
+				font-weight: 500;
+				color: var(--roxy-fg, #0f172a);
+			}
+			.interp-card summary small {
+				color: var(--roxy-muted, #71717a);
+				margin-left: 0.5em;
+				font-weight: 400;
+			}
+			.interp-body {
+				margin-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0f172a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.interp-keywords {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.25rem;
+				margin-top: 0.5rem;
+			}
+			.interp-keywords .kw {
+				padding: 1px 8px;
+				border-radius: 9999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
 		`,
 	];
 
@@ -211,6 +346,8 @@ export class RoxyNatalChart extends LitElement {
 				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
 				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
+			${this.renderDetails()}
+			${this.renderInterpretations()}
 		</div>`;
 	}
 
@@ -245,21 +382,7 @@ export class RoxyNatalChart extends LitElement {
 	}
 
 	private renderSigns() {
-		const order = [
-			'Aries',
-			'Taurus',
-			'Gemini',
-			'Cancer',
-			'Leo',
-			'Virgo',
-			'Libra',
-			'Scorpio',
-			'Sagittarius',
-			'Capricorn',
-			'Aquarius',
-			'Pisces',
-		];
-		return order.map((sign, i) => {
+		return SIGNS_ORDER.map((sign, i) => {
 			const angle = this.toAngle(i * 30 + 15);
 			const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
 			return svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
@@ -288,6 +411,109 @@ export class RoxyNatalChart extends LitElement {
 		});
 	}
 
+	private renderDetails() {
+		const summary = this.data?.summary;
+		const ai = this.data?.aspectsInterpretation;
+		if (!summary && !ai) return nothing;
+
+		const retrogrades = summary?.retrogradePlanets ?? [];
+		const elementDist = summary?.elementDistribution ?? {};
+		const modalityDist = summary?.modalityDistribution ?? {};
+		const elementMax = Math.max(1, ...Object.values(elementDist));
+		const modalityMax = Math.max(1, ...Object.values(modalityDist));
+
+		return html`<div class="details">
+			${
+				summary?.dominantElement || summary?.dominantModality
+					? html`<div class="pill-row">
+						${summary.dominantElement ? html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing}
+						${summary.dominantModality ? html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing}
+					</div>`
+					: nothing
+			}
+			${
+				ai
+					? html`<div class="pill-row">
+						<span class="pill pill--success">Harmonious ${ai.harmonious}</span>
+						<span class="pill pill--danger">Challenging ${ai.challenging}</span>
+						<span class="pill pill--muted">Neutral ${ai.neutral}</span>
+					</div>`
+					: nothing
+			}
+			${
+				retrogrades.length > 0
+					? html`<div class="pill-row">
+						${retrogrades.map((p) => {
+							const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
+							return html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+						})}
+					</div>`
+					: nothing
+			}
+			${ai?.summary ? html`<p class="summary">${ai.summary}</p>` : nothing}
+			${
+				Object.keys(elementDist).length > 0 ||
+				Object.keys(modalityDist).length > 0
+					? html`<div class="dist-grid">
+						${
+							Object.keys(elementDist).length > 0
+								? html`<div class="dist-section">
+									<h3>Elements</h3>
+									${Object.entries(elementDist).map(
+										([label, count]) => html`<div class="dist-row">
+											<span>${label}</span>
+											<div class="dist-bar"><span style="width: ${Math.round((count / elementMax) * 100)}%"></span></div>
+											<span>${count}</span>
+										</div>`,
+									)}
+								</div>`
+								: nothing
+						}
+						${
+							Object.keys(modalityDist).length > 0
+								? html`<div class="dist-section">
+									<h3>Modalities</h3>
+									${Object.entries(modalityDist).map(
+										([label, count]) => html`<div class="dist-row">
+											<span>${label}</span>
+											<div class="dist-bar"><span style="width: ${Math.round((count / modalityMax) * 100)}%"></span></div>
+											<span>${count}</span>
+										</div>`,
+									)}
+								</div>`
+								: nothing
+						}
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderInterpretations() {
+		const planets = this.getPlanets().filter((p) => p.interpretation);
+		if (planets.length === 0) return nothing;
+		return html`<section class="interpretations">
+			<h3>Planet readings</h3>
+			${planets.map((p) => {
+				const interp = p.interpretation!;
+				const glyph = PLANET_GLYPH[capitalize(p.name)] ?? '';
+				const deg = formatNumber(p.degree ?? 0, 1);
+				return html`<details class="interp-card">
+					<summary>${glyph} ${p.name} <small>${p.sign ?? ''} ${deg}</small></summary>
+					<div class="interp-body">
+						${interp.summary ? html`<p class="interp-summary">${interp.summary}</p>` : nothing}
+						${interp.detailed ? html`<p class="interp-detail">${interp.detailed}</p>` : nothing}
+						${
+							interp.keywords?.length
+								? html`<div class="interp-keywords">${interp.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>`
+								: nothing
+						}
+					</div>
+				</details>`;
+			})}
+		</section>`;
+	}
+
 	private renderAspects(planets: PlanetEntry[], aspects: AspectEntry[]) {
 		const planetMap = new Map<string, number>();
 		for (const p of planets) {
@@ -319,23 +545,6 @@ export class RoxyNatalChart extends LitElement {
 	}
 }
 
-function capitalize(s: string): string {
-	if (!s) return '';
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
-const ASPECT_CLASS: Record<string, string> = {
-	conjunction: 'aspect-conjunction',
-	sextile: 'aspect-sextile',
-	square: 'aspect-square',
-	trine: 'aspect-trine',
-	opposition: 'aspect-opposition',
-};
-
-function normalizeAspect(a: AspectEntry): string {
-	return (a.type ?? '').toLowerCase().replace(/_/g, '-');
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-natal-chart': RoxyNatalChart;

package/src/components/numerology-card.ts

@@ -7,6 +7,7 @@ import type {
 	GenerateNumerologyChartResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
 type NumerologyData =
 	| CalculateLifePathResponse
@@ -237,13 +238,6 @@ function karmicDebtText(value: KarmicDebtMeaning | undefined): string {
 		.join(' ');
 }
 
-function humanize(s: string): string {
-	return s
-		.replace(/[_-]+/g, ' ')
-		.replace(/([a-z])([A-Z])/g, '$1 $2')
-		.replace(/^\w/, (c) => c.toUpperCase());
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-numerology-card': RoxyNumerologyCard;