@roxyapi/ui 0.2.3 → 0.3.0

package/src/components/vedic-kundli.ts

@@ -1,27 +1,25 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.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,
+	buildHousesFromMeta,
+	type HouseDef,
+	renderEastFrame,
+	renderEastHouseGroup,
 	renderNorthFrame,
 	renderNorthHouseGroup,
 	renderSouthFrame,
 	renderSouthHouseGroup,
 } from '../utils/kundli-render.js';
 
-type RashiBucket = BirthChartResponse['aries'];
-
-// 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>;
-
 /**
- * Vedic kundli (D1 Rashi chart). South Indian style by default. Pass `data`
- * from /vedic-astrology/birth-chart. North Indian style via chartStyle="north".
+ * Vedic kundli (D1 Rashi chart). Pass `data` from /vedic-astrology/birth-chart.
+ * Three render styles via the `chart-style` attribute: south (default),
+ * north, and east. All three draw the identical planet-in-sign data, so the
+ * style is purely a layout choice. Each planet shows its abbreviation and
+ * whole-degree, with an SVG tooltip carrying exact position, nakshatra, pada,
+ * and avastha.
  *
  * Theming flows through CSS custom properties on :host, so the chart adopts
  * the host page palette without runtime color probing.
@@ -58,7 +56,7 @@ export class RoxyVedicKundli extends LitElement {
 			}
 			.planet-text {
 				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 11px;
+				font-size: 10px;
 				font-weight: 600;
 				font-family: var(--roxy-font-sans);
 			}
@@ -87,35 +85,31 @@ export class RoxyVedicKundli extends LitElement {
 	data: BirthChartResponse | null = null;
 
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
-	chartStyle: 'south' | 'north' = 'south';
+	chartStyle: 'south' | 'north' | 'east' = 'south';
 
 	private buildHouses(): HouseDef[] {
-		if (!this.data) return [];
-		const data = this.data as BirthChartByRashi;
-		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({
-				number: i + 1,
-				sign,
-				planets,
-				isLagna: lagnaSign
-					? lagnaSign.toLowerCase() === sign.toLowerCase()
-					: false,
-			});
-		}
-		return houses;
+		if (!this.data?.meta) return [];
+		return buildHousesFromMeta(this.data.meta);
 	}
 
 	render() {
 		if (!this.data)
 			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
 		const houses = this.buildHouses();
-		const isNorth = this.chartStyle === 'north';
+		const style = this.chartStyle;
+
+		const frame =
+			style === 'north'
+				? renderNorthFrame()
+				: style === 'east'
+					? renderEastFrame()
+					: renderSouthFrame();
+		const houseGroup =
+			style === 'north'
+				? renderNorthHouseGroup
+				: style === 'east'
+					? renderEastHouseGroup
+					: renderSouthHouseGroup;
 
 		return html`<div class="wrap">
 			<h2 class="title">Vedic kundli</h2>
@@ -125,12 +119,8 @@ export class RoxyVedicKundli extends LitElement {
 				aria-label="Vedic birth chart with twelve sign houses"
 			>
 				<title>Vedic kundli</title>
-				${isNorth ? renderNorthFrame() : renderSouthFrame()}
-				${
-					isNorth
-						? houses.map((h) => renderNorthHouseGroup(h))
-						: houses.map((h) => renderSouthHouseGroup(h))
-				}
+				${frame}
+				${houses.map((h) => houseGroup(h))}
 			</svg>
 		</div>`;
 	}

package/src/components/vedic-planets-table.ts

@@ -0,0 +1,184 @@
+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 { BirthChartResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatSignPosition } from '../utils/degree.js';
+import { capitalize } from '../utils/string.js';
+
+/**
+ * Fixed display order: Lagna pinned first as the chart frame, then the nine
+ * grahas in classical sequence. Any graha not in this list is appended.
+ */
+const GRAHA_ORDER = [
+	'Lagna',
+	'Sun',
+	'Moon',
+	'Mars',
+	'Mercury',
+	'Jupiter',
+	'Venus',
+	'Saturn',
+	'Rahu',
+	'Ketu',
+];
+
+type MetaEntry = BirthChartResponse['meta'][string];
+
+/**
+ * Vedic planetary positions table. Renders /vedic-astrology/birth-chart `meta`
+ * as the full reference-grade positions grid a practitioner reads alongside
+ * the kundli wheel: graha, rashi, exact degree, nakshatra and pada, nakshatra
+ * lord, bhava (house), Baladi avastha, and retrograde.
+ */
+@customElement('roxy-vedic-planets-table')
+export class RoxyVedicPlanetsTable 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: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 620px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			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.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			tbody tr.lagna {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);
+			}
+			td.graha {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.glyph {
+				margin-right: 0.4em;
+				color: var(--roxy-muted, #71717a);
+			}
+			/* On the tinted Lagna row the muted glyph drops below the WCAG AA
+			   contrast floor, so use the accent foreground there instead. */
+			tbody tr.lagna .glyph {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.retro {
+				color: var(--roxy-warning-fg, #9a3412);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: BirthChartResponse | null = null;
+
+	/** Ordered [name, entry] pairs: GRAHA_ORDER first, then any extras. */
+	private orderedRows(): Array<[string, MetaEntry]> {
+		const meta = this.data?.meta ?? {};
+		const seen = new Set<string>();
+		const rows: Array<[string, MetaEntry]> = [];
+		for (const name of GRAHA_ORDER) {
+			const entry = meta[name];
+			if (entry) {
+				rows.push([name, entry]);
+				seen.add(name);
+			}
+		}
+		for (const [name, entry] of Object.entries(meta)) {
+			if (!seen.has(name)) rows.push([name, entry]);
+		}
+		return rows;
+	}
+
+	render() {
+		if (!this.data?.meta)
+			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+		const rows = this.orderedRows();
+
+		return html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+			<header class="head">
+				<h2 class="title">Planetary positions</h2>
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Graha</th>
+						<th scope="col">Rashi</th>
+						<th scope="col">Degree</th>
+						<th scope="col">Nakshatra</th>
+						<th scope="col">Pada</th>
+						<th scope="col">Nak. lord</th>
+						<th scope="col">House</th>
+						<th scope="col">Avastha</th>
+						<th scope="col">Retro</th>
+					</tr>
+				</thead>
+				<tbody>
+					${rows.map(([name, p]) => {
+						const isLagna = (p.graha ?? name) === 'Lagna';
+						const glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? '';
+						const signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? '')] ?? '';
+						return html`<tr class=${isLagna ? 'lagna' : ''}>
+							<td class="graha">
+								${glyph ? html`<span class="glyph">${glyph}</span>` : nothing}${p.graha ?? name}
+							</td>
+							<td>
+								${signGlyph ? html`<span class="glyph">${signGlyph}</span>` : nothing}${p.rashi ?? ''}
+							</td>
+							<td class="num">
+								${typeof p.longitude === 'number' ? formatSignPosition(p.longitude) : ''}
+							</td>
+							<td>${p.nakshatra?.name ?? ''}</td>
+							<td class="num">${p.nakshatra?.pada ?? ''}</td>
+							<td>${p.nakshatra?.lord ?? ''}</td>
+							<td class="num">${typeof p.house === 'number' ? p.house : ''}</td>
+							<td>${p.awastha ?? ''}</td>
+							<td>${p.isRetrograde ? html`<span class="retro">R</span>` : nothing}</td>
+						</tr>`;
+					})}
+				</tbody>
+			</table>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-vedic-planets-table': RoxyVedicPlanetsTable;
+	}
+}

package/src/components/western-planets-table.ts

@@ -0,0 +1,180 @@
+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 { NatalChartResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatSignPosition } from '../utils/degree.js';
+import { formatNumber } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+/** A body or point row, normalized so planets and the four angles share a table. */
+interface BodyRow {
+	name: string;
+	sign?: string;
+	longitude?: number;
+	house?: number;
+	speed?: number;
+	isRetrograde?: boolean;
+	/** True for the chart angles (ASC, MC, Part of Fortune, Vertex). */
+	isPoint?: boolean;
+}
+
+/**
+ * Western planetary positions table. Renders a /astrology/natal-chart response
+ * as the reference-grade positions grid astrologers read alongside the wheel:
+ * every body with its sign, exact degree, house, and daily motion, followed by
+ * the four chart points (Ascendant, Midheaven, Part of Fortune, Vertex).
+ */
+@customElement('roxy-western-planets-table')
+export class RoxyWesternPlanetsTable 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: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 460px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			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.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			tbody tr.point {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
+			}
+			td.body {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.glyph {
+				margin-right: 0.4em;
+				color: var(--roxy-muted, #71717a);
+			}
+			.retro {
+				color: var(--roxy-danger, #dc2626);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: NatalChartResponse | null = null;
+
+	/** Build the ordered row list: the planets array, then the four chart points. */
+	private rows(): BodyRow[] {
+		const d = this.data;
+		if (!d) return [];
+		const rows: BodyRow[] = (d.planets ?? []).map((p) => ({
+			name: p.name,
+			sign: p.sign,
+			longitude: p.longitude,
+			house: p.house,
+			speed: p.speed,
+			isRetrograde: p.isRetrograde,
+		}));
+		for (const [name, point] of [
+			['Ascendant', d.ascendant],
+			['Midheaven', d.midheaven],
+			['Part of Fortune', d.partOfFortune],
+			['Vertex', d.vertex],
+		] as const) {
+			if (point) {
+				rows.push({
+					name,
+					sign: point.sign,
+					longitude: point.longitude,
+					isPoint: true,
+				});
+			}
+		}
+		return rows;
+	}
+
+	render() {
+		if (!this.data?.planets)
+			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+		const rows = this.rows();
+
+		return html`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
+			<header class="head">
+				<h2 class="title">Planetary positions</h2>
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Body</th>
+						<th scope="col">Sign</th>
+						<th scope="col">Degree</th>
+						<th scope="col">House</th>
+						<th scope="col">Motion</th>
+					</tr>
+				</thead>
+				<tbody>
+					${rows.map((r) => {
+						const glyph = PLANET_GLYPH[capitalize(r.name)] ?? '';
+						const signGlyph = SIGN_GLYPH[capitalize(r.sign ?? '')] ?? '';
+						const speed =
+							typeof r.speed === 'number' ? formatNumber(r.speed, 3) : '';
+						return html`<tr class=${r.isPoint ? 'point' : ''}>
+							<td class="body">
+								${glyph ? html`<span class="glyph">${glyph}</span>` : nothing}${r.name}
+							</td>
+							<td>
+								${signGlyph ? html`<span class="glyph">${signGlyph}</span>` : nothing}${r.sign ?? ''}
+							</td>
+							<td class="num">
+								${typeof r.longitude === 'number' ? formatSignPosition(r.longitude) : ''}
+							</td>
+							<td class="num">${typeof r.house === 'number' ? r.house : ''}</td>
+							<td class="num">
+								${speed ? html`${speed}°/day` : nothing}
+								${r.isRetrograde ? html`<span class="retro"> ℞</span>` : nothing}
+							</td>
+						</tr>`;
+					})}
+				</tbody>
+			</table>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-western-planets-table': RoxyWesternPlanetsTable;
+	}
+}

package/src/index.ts

@@ -21,9 +21,12 @@ export { RoxyGunaMilan } from './components/guna-milan.js';
 // I Ching
 export { RoxyHexagram } from './components/hexagram.js';
 export { RoxyHoroscopeCard } from './components/horoscope-card.js';
+export { RoxyKpChart } from './components/kp-chart.js';
 export { RoxyKpPlanetsTable } from './components/kp-planets-table.js';
+export { RoxyKpRulingPlanets } from './components/kp-ruling-planets.js';
 export { RoxyLocationSearch } from './components/location-search.js';
 export { RoxyMoonPhase } from './components/moon-phase.js';
+export { RoxyNakshatraCard } from './components/nakshatra-card.js';
 // Western astrology
 export { RoxyNatalChart } from './components/natal-chart.js';
 // Numerology
@@ -37,6 +40,8 @@ export { RoxyTarotSpread } from './components/tarot-spread.js';
 export { RoxyTransitsTable } from './components/transits-table.js';
 // Vedic astrology
 export { RoxyVedicKundli } from './components/vedic-kundli.js';
+export { RoxyVedicPlanetsTable } from './components/vedic-planets-table.js';
+export { RoxyWesternPlanetsTable } from './components/western-planets-table.js';
 export { RoxyYogaList } from './components/yoga-list.js';
 
 import { ROXY_COMPONENTS, type RoxyComponentSlug } from './manifest.js';