@roxyapi/ui 0.1.3 → 0.2.1

package/src/components/transits-table.ts

@@ -0,0 +1,358 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import type { TransitsResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatDate, formatNumber, formatTime } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+/**
+ * Transit positions and aspect table. Pass `data` from /astrology/transits.
+ * When natalChart is included in the request, `data.transitAspects` and
+ * `data.summary` are present and rendered automatically.
+ */
+@customElement('roxy-transits-table')
+export class RoxyTransitsTable 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;
+			}
+
+			.summary-pills {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+				padding: 2px var(--roxy-space-sm, 0.5rem);
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				border: 1px solid currentColor;
+			}
+
+			.pill--muted {
+				color: var(--roxy-fg, #0a0a0a);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+			}
+
+			.pill--success {
+				color: var(--roxy-success-fg, #166534);
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 10%, transparent);
+			}
+
+			.pill--danger {
+				color: var(--roxy-danger-fg, #991b1b);
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);
+			}
+
+			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;
+			}
+
+			.section-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+			}
+
+			.glyph {
+				font-size: 1.1em;
+				margin-right: 2px;
+				line-height: 1;
+			}
+
+			.planet-cell {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				white-space: nowrap;
+			}
+
+			.retro-badge {
+				display: inline-block;
+				font-size: 0.7em;
+				padding: 1px 4px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
+				color: var(--roxy-warning-fg, #9a3412);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin-left: 2px;
+				vertical-align: middle;
+			}
+
+			.speed {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+				white-space: nowrap;
+			}
+
+			.speed-arrow {
+				font-size: 0.85em;
+			}
+
+			td.num {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.nature-harmonious {
+				color: var(--roxy-success-fg, #166534);
+			}
+
+			.nature-challenging {
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+
+			.nature-neutral {
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.arrow-cell {
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+				white-space: nowrap;
+			}
+
+			.interp-row td {
+				padding-top: 0;
+				padding-bottom: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				color: var(--roxy-secondary, #475569);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				line-height: 1.45;
+			}
+
+			.aspect-row td {
+				border-bottom: none;
+				padding-bottom: 4px;
+			}
+
+			.aspect-row.no-interp td {
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				padding-bottom: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.overflow-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: TransitsResponse | null = null;
+
+	render() {
+		if (!this.data?.transitPlanets?.length) {
+			return html`<div class="roxy-empty" role="status">No transits data</div>`;
+		}
+
+		const {
+			transitDate,
+			transitTime,
+			transitPlanets,
+			transitAspects,
+			summary,
+		} = this.data;
+
+		const dateStr = [formatDate(transitDate), formatTime(transitTime)]
+			.filter(Boolean)
+			.join(' ');
+
+		return html`<div class="wrap" aria-label="Transit positions table">
+			<div class="head">
+				<h2 class="title">Transits</h2>
+				${dateStr ? html`<p class="subtitle">${dateStr}</p>` : nothing}
+			</div>
+
+			${summary ? this.renderSummaryPills(summary) : nothing}
+
+			<div>
+				<p class="section-label">Planet positions</p>
+				<div class="overflow-scroll">
+					${this.renderPlanetsTable(transitPlanets)}
+				</div>
+			</div>
+
+			${
+				transitAspects?.length
+					? html`<div>
+						<p class="section-label">Transit aspects</p>
+						<div class="overflow-scroll">
+							${this.renderAspectsTable(transitAspects)}
+						</div>
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderSummaryPills(
+		summary: NonNullable<TransitsResponse['summary']>,
+	) {
+		return html`<div class="summary-pills" role="region" aria-label="Aspect summary">
+			<span class="pill pill--muted">
+				Total: ${summary.totalAspects}
+			</span>
+			<span class="pill pill--success">
+				Harmonious: ${summary.harmonious}
+			</span>
+			<span class="pill pill--danger">
+				Challenging: ${summary.challenging}
+			</span>
+			<span class="pill pill--muted">
+				Neutral: ${summary.neutral}
+			</span>
+		</div>`;
+	}
+
+	private renderPlanetsTable(planets: TransitsResponse['transitPlanets']) {
+		return html`<table class="planets-table">
+			<thead>
+				<tr>
+					<th scope="col">Planet</th>
+					<th scope="col">Sign</th>
+					<th scope="col">Degree</th>
+					<th scope="col">Speed</th>
+				</tr>
+			</thead>
+			<tbody>
+				${planets.map((p) => {
+					const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? '';
+					const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? '';
+					const speedArrow = p.speed >= 0 ? '↑' : '↓';
+					return html`<tr>
+						<td>
+							<div class="planet-cell">
+								<span class="glyph" aria-hidden="true">${pGlyph}</span>
+								${p.name}
+								${
+									p.isRetrograde
+										? html`<span class="retro-badge" aria-label="retrograde">R</span>`
+										: nothing
+								}
+							</div>
+						</td>
+						<td>
+							<div class="planet-cell">
+								<span class="glyph" aria-hidden="true">${sGlyph}</span>
+								${p.sign}
+							</div>
+						</td>
+						<td class="num">${formatNumber(p.degree, 2)}</td>
+						<td class="speed">
+							<span class="speed-arrow" aria-hidden="true">${speedArrow}</span>
+							${formatNumber(Math.abs(p.speed), 4)}
+						</td>
+					</tr>`;
+				})}
+			</tbody>
+		</table>`;
+	}
+
+	private renderAspectsTable(
+		aspects: NonNullable<TransitsResponse['transitAspects']>,
+	) {
+		return html`<table class="aspects-table">
+			<thead>
+				<tr>
+					<th scope="col">Transit Planet</th>
+					<th scope="col">Natal Planet</th>
+					<th scope="col">Type</th>
+					<th scope="col">Orb</th>
+					<th scope="col">Status</th>
+					<th scope="col">Strength</th>
+				</tr>
+			</thead>
+			<tbody>
+				${aspects.map((a) => {
+					const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';
+					const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';
+					const natureClass = `nature-${(a.nature ?? '').toLowerCase()}`;
+					const summary = a.interpretation?.summary ?? '';
+					const rowClass = summary ? 'aspect-row' : 'aspect-row no-interp';
+					return html`<tr class=${rowClass}>
+							<td>
+								<div class="arrow-cell">
+									<span class="glyph" aria-hidden="true">${tGlyph}</span>
+									${a.transitPlanet}
+								</div>
+							</td>
+							<td>
+								<div class="arrow-cell">
+									<span class="glyph" aria-hidden="true">${nGlyph}</span>
+									${a.natalPlanet}
+								</div>
+							</td>
+							<td class=${natureClass}>${(a.type ?? '').toLowerCase()}</td>
+							<td class="num">${formatNumber(a.orb, 2)}</td>
+							<td>${a.isApplying ? 'Applying' : 'Separating'}</td>
+							<td class="num">${formatNumber(a.strength, 1)}</td>
+						</tr>
+						${
+							summary
+								? html`<tr class="interp-row">
+										<td colspan="6">${summary}</td>
+									</tr>`
+								: nothing
+						}`;
+				})}
+			</tbody>
+		</table>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-transits-table': RoxyTransitsTable;
+	}
+}

package/src/components/vedic-kundli.ts

@@ -1,90 +1,30 @@
-import { css, html, LitElement, nothing, svg } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { PLANET_ABBR, SIGN_ABBR } from '../tokens/index.js';
+import { RASHI_KEYS } from '../tokens/index.js';
 import type { BirthChartResponse } 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 = BirthChartResponse['aries'];
 
-// TODO(spec): BirthChartResponse types only `aries` and `meta`, but the API
-// returns all 12 rashi keys (taurus, gemini, ..., pisces) with the same shape
-// as `aries`. Update the OpenAPI schema so the renderer can index by rashi
-// without casts.
+// The /vedic-astrology/birth-chart response carries all 12 rashi keys
+// (aries, taurus, ..., pisces), each shaped like the spec-typed `aries`
+// bucket. This local alias indexes by rashi name without per-call casts.
 type BirthChartByRashi = BirthChartResponse & Record<string, RashiBucket>;
 
-interface KundliHouse {
-	house: number;
-	sign: string;
-	planets: string[];
-}
-
-const SOUTH_HOUSE_CENTERS: Record<number, { x: number; y: number }> = {
-	1: { x: 150, y: 58 },
-	2: { x: 205, y: 52 },
-	3: { x: 253, y: 112 },
-	4: { x: 243, y: 150 },
-	5: { x: 253, y: 188 },
-	6: { x: 205, y: 248 },
-	7: { x: 150, y: 242 },
-	8: { x: 95, y: 248 },
-	9: { x: 47, y: 188 },
-	10: { x: 57, y: 150 },
-	11: { x: 47, y: 112 },
-	12: { x: 95, y: 52 },
-};
-
-const SOUTH_SIGN_POSITIONS: Record<number, { x: number; y: number }> = {
-	1: { x: 150, y: 35 },
-	2: { x: 222, y: 40 },
-	3: { x: 265, y: 100 },
-	4: { x: 265, y: 150 },
-	5: { x: 265, y: 200 },
-	6: { x: 222, y: 260 },
-	7: { x: 150, y: 265 },
-	8: { x: 78, y: 260 },
-	9: { x: 35, y: 200 },
-	10: { x: 35, y: 150 },
-	11: { x: 35, y: 100 },
-	12: { x: 78, y: 40 },
-};
-
-const RASHI_KEYS = [
-	'aries',
-	'taurus',
-	'gemini',
-	'cancer',
-	'leo',
-	'virgo',
-	'libra',
-	'scorpio',
-	'sagittarius',
-	'capricorn',
-	'aquarius',
-	'pisces',
-] as const;
-
-const RASHI_TO_SIGN: Record<string, string> = {
-	aries: 'Aries',
-	taurus: 'Taurus',
-	gemini: 'Gemini',
-	cancer: 'Cancer',
-	leo: 'Leo',
-	virgo: 'Virgo',
-	libra: 'Libra',
-	scorpio: 'Scorpio',
-	sagittarius: 'Sagittarius',
-	capricorn: 'Capricorn',
-	aquarius: 'Aquarius',
-	pisces: 'Pisces',
-};
-
 /**
  * Vedic kundli (D1 Rashi chart). South Indian style by default. Pass `data`
- * from /vedic-astrology/birth-chart. North Indian style via style="north".
+ * from /vedic-astrology/birth-chart. North Indian style via chartStyle="north".
  *
- * Lifted from jyotish-vedic-astrology-app/src/components/birth-chart.tsx,
- * keeping HOUSE_CENTERS + SIGN_POSITIONS + abbreviations, dropping the React
- * DOM color-probing hook in favor of CSS custom properties on :host.
+ * Theming flows through CSS custom properties on :host, so the chart adopts
+ * the host page palette without runtime color probing.
  */
 @customElement('roxy-vedic-kundli')
 export class RoxyVedicKundli extends LitElement {
@@ -122,6 +62,12 @@ export class RoxyVedicKundli extends LitElement {
 				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;
@@ -143,18 +89,23 @@ export class RoxyVedicKundli extends LitElement {
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
 	chartStyle: 'south' | 'north' = 'south';
 
-	private buildHouses(): KundliHouse[] {
+	private buildHouses(): HouseDef[] {
 		if (!this.data) return [];
 		const data = this.data as BirthChartByRashi;
-		const houses: KundliHouse[] = [];
+		const lagnaSign = this.data?.meta?.Lagna?.rashi ?? '';
+		const houses: HouseDef[] = [];
 		for (let i = 0; i < 12; i++) {
 			const key = RASHI_KEYS[i];
 			const bucket = data[key];
 			const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
+			const sign = RASHI_TO_SIGN[key] ?? '';
 			houses.push({
-				house: i + 1,
-				sign: RASHI_TO_SIGN[key] ?? '',
+				number: i + 1,
+				sign,
 				planets,
+				isLagna: lagnaSign
+					? lagnaSign.toLowerCase() === sign.toLowerCase()
+					: false,
 			});
 		}
 		return houses;
@@ -164,6 +115,7 @@ export class RoxyVedicKundli extends LitElement {
 		if (!this.data)
 			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
 		const houses = this.buildHouses();
+		const isNorth = this.chartStyle === 'north';
 
 		return html`<div class="wrap">
 			<h2 class="title">Vedic kundli</h2>
@@ -173,74 +125,17 @@ export class RoxyVedicKundli extends LitElement {
 				aria-label="Vedic birth chart with twelve sign houses"
 			>
 				<title>Vedic kundli</title>
-				<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
-				<polygon
-					class="line"
-					points="220,80 220,220 80,220 80,80"
-					stroke-width="1"
-					fill="none"
-				/>
-				<line class="line" x1="150" y1="10" x2="80" y2="80" stroke-width="1" />
-				<line class="line" x1="150" y1="10" x2="220" y2="80" stroke-width="1" />
-				<line class="line" x1="290" y1="150" x2="220" y2="80" stroke-width="1" />
-				<line class="line" x1="290" y1="150" x2="220" y2="220" stroke-width="1" />
-				<line class="line" x1="150" y1="290" x2="220" y2="220" stroke-width="1" />
-				<line class="line" x1="150" y1="290" x2="80" y2="220" stroke-width="1" />
-				<line class="line" x1="10" y1="150" x2="80" y2="220" stroke-width="1" />
-				<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
-				${houses.map((h) => this.renderHouseGroup(h))}
-			</svg>
-		</div>`;
-	}
-
-	private isLagna(h: KundliHouse): boolean {
-		const ascSign = this.data?.meta?.Lagna?.rashi;
-		if (!ascSign) return false;
-		return ascSign.toLowerCase() === h.sign.toLowerCase();
-	}
-
-	private renderHouseGroup(h: KundliHouse) {
-		const center = SOUTH_HOUSE_CENTERS[h.house];
-		const signPos = SOUTH_SIGN_POSITIONS[h.house];
-		if (!center || !signPos) return nothing;
-		const signAbbr = SIGN_ABBR[h.sign] ?? '';
-		const planets = h.planets ?? [];
-		const isLagna = this.isLagna(h);
-		return svg`
-			<g>
-				${
-					isLagna
-						? svg`<rect class="lagna-bg" x=${center.x - 30} y=${center.y - 28} width="60" height="56" rx="6" />`
-						: nothing
-				}
+				${isNorth ? renderNorthFrame() : renderSouthFrame()}
 				${
-					signAbbr
-						? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>`
-						: nothing
+					isNorth
+						? houses.map((h) => renderNorthHouseGroup(h))
+						: houses.map((h) => renderSouthHouseGroup(h))
 				}
-				${
-					isLagna
-						? svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>`
-						: nothing
-				}
-				${planets.map((planet, j) => {
-					const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
-					const lineHeight = 13;
-					const baseY = isLagna ? center.y + 8 : center.y;
-					const startY = baseY - ((planets.length - 1) * lineHeight) / 2;
-					const yPos = startY + j * lineHeight;
-					return svg`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
-				})}
-			</g>
-		`;
+			</svg>
+		</div>`;
 	}
 }
 
-function capitalize(s: string): string {
-	if (!s) return '';
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-vedic-kundli': RoxyVedicKundli;