@roxyapi/ui 0.1.3 → 0.2.0

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;

package/src/components/yoga-list.ts

@@ -0,0 +1,328 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { GetYogaResponse, ListYogasResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { debounce } from '../utils/debounce.js';
+
+type YogaListData =
+	| ListYogasResponse
+	| GetYogaResponse
+	| { yogas: Array<GetYogaResponse> };
+
+/**
+ * Yoga catalog and detail renderer. Accepts three data modes:
+ *   - Catalog: ListYogasResponse (yogas array of {id, name} + total)
+ *   - Detail: GetYogaResponse (single yoga with description, result, quality)
+ *   - Detail array: { yogas: Array<GetYogaResponse> } for pre-filtered sets
+ *
+ * Catalog and detail-array modes include a live search filter.
+ */
+@customElement('roxy-yoga-list')
+export class RoxyYogaList 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;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.count {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.search-wrap {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.search {
+				width: 100%;
+				max-width: 280px;
+				padding: 0.35em 0.75em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-family: var(--roxy-font-sans);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				outline: none;
+			}
+			.search::placeholder {
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.65;
+			}
+			.search:focus {
+				border-color: var(--roxy-accent, #f59e0b);
+				box-shadow: 0 0 0 2px color-mix(in srgb, var(--roxy-accent, #f59e0b) 30%, transparent);
+			}
+			.grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+				grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+			}
+			.yoga-chip {
+				padding: 0.4em 0.8em;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: var(--roxy-bg, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				word-break: break-word;
+			}
+			.yoga-chip .yoga-id {
+				display: block;
+				font-size: 0.7em;
+				color: var(--roxy-fg, #0a0a0a);
+				opacity: 0.75;
+				margin-top: 0.15em;
+			}
+			.detail-card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.detail-name {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.quality-chip {
+				display: inline-block;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+			}
+			.quality-Positive {
+				background: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);
+				color: var(--roxy-success-fg, #15803d);
+				border: 1px solid color-mix(in srgb, var(--roxy-success, #22c55e) 40%, transparent);
+			}
+			.quality-Negative {
+				background: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);
+				color: var(--roxy-danger-fg, #b91c1c);
+				border: 1px solid color-mix(in srgb, var(--roxy-danger, #ef4444) 40%, transparent);
+			}
+			.quality-Both {
+				background: color-mix(in srgb, var(--roxy-warning, #f59e0b) 18%, transparent);
+				color: var(--roxy-warning-fg, #b45309);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #f59e0b) 40%, transparent);
+			}
+			.description {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			details {
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			details summary {
+				cursor: pointer;
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: 500;
+				padding: 0.25em 0;
+				list-style: none;
+				display: flex;
+				align-items: center;
+				gap: 0.4em;
+			}
+			details summary::before {
+				content: '+';
+				font-size: 1.1em;
+				line-height: 1;
+			}
+			details[open] summary::before {
+				content: '-';
+			}
+			details .result-body {
+				padding-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			.no-results {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				padding: var(--roxy-space-md, 1rem) 0;
+				text-align: center;
+			}
+			.detail-grid {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: YogaListData | null = null;
+
+	@state()
+	private filter = '';
+
+	private readonly handleInput = debounce((e: Event) => {
+		this.filter = (e.target as HTMLInputElement).value;
+	}, 200);
+
+	private renderQualityChip(quality: string) {
+		const cls = `quality-chip quality-${quality}`;
+		return html`<span class=${cls}>${quality}</span>`;
+	}
+
+	private renderDetailCard(yoga: GetYogaResponse) {
+		return html`<div class="detail-card">
+			<p class="detail-name">
+				${yoga.name}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing}
+			</p>
+			${
+				yoga.description
+					? html`<p class="description">${yoga.description}</p>`
+					: nothing
+			}
+			${
+				yoga.result
+					? html`<details>
+						<summary>Effects</summary>
+						<div class="result-body">${yoga.result}</div>
+					</details>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+
+		const d = this.data;
+		const lc = this.filter.toLowerCase();
+
+		// Detail mode: single GetYogaResponse
+		if (
+			'description' in d &&
+			typeof (d as GetYogaResponse).description === 'string'
+		) {
+			const yoga = d as GetYogaResponse;
+			return html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+		}
+
+		// Detail-array mode: { yogas: Array<GetYogaResponse> } where items have description
+		if ('yogas' in d && Array.isArray((d as { yogas: unknown[] }).yogas)) {
+			const allYogas = (
+				d as { yogas: Array<GetYogaResponse | { id: string; name: string }> }
+			).yogas;
+			const isDetailArray = allYogas.length > 0 && 'description' in allYogas[0];
+
+			if (isDetailArray) {
+				const detailYogas = allYogas as GetYogaResponse[];
+				const filtered = lc
+					? detailYogas.filter((y) => y.name.toLowerCase().includes(lc))
+					: detailYogas;
+				const total = (d as ListYogasResponse).total;
+				return html`<div class="wrap">
+					<div class="head">
+						<h2 class="title">Yoga catalog</h2>
+						${
+							total !== undefined
+								? html`<span class="count">${total} total</span>`
+								: nothing
+						}
+					</div>
+					<div class="search-wrap">
+						<input
+							class="search"
+							type="search"
+							placeholder="Filter yogas..."
+							aria-label="Filter yoga list by name"
+							.value=${this.filter}
+							@input=${this.handleInput}
+						/>
+					</div>
+					<div
+						class="detail-grid"
+						role="region"
+						aria-live="polite"
+						aria-label="Yoga results"
+					>
+						${
+							filtered.length > 0
+								? filtered.map((y) => this.renderDetailCard(y))
+								: html`<p class="no-results">No yogas match your search.</p>`
+						}
+					</div>
+				</div>`;
+			}
+
+			// Catalog mode: ListYogasResponse with {id, name} items
+			const catalogYogas = allYogas as Array<{ id: string; name: string }>;
+			const filtered = lc
+				? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc))
+				: catalogYogas;
+			const total = (d as ListYogasResponse).total;
+			return html`<div class="wrap">
+				<div class="head">
+					<h2 class="title">Yoga catalog</h2>
+					${
+						total !== undefined
+							? html`<span class="count">${total} total</span>`
+							: nothing
+					}
+				</div>
+				<div class="search-wrap">
+					<input
+						class="search"
+						type="search"
+						placeholder="Filter yogas..."
+						aria-label="Filter yoga list by name"
+						.value=${this.filter}
+						@input=${this.handleInput}
+					/>
+				</div>
+				<div
+					class="grid"
+					role="region"
+					aria-live="polite"
+					aria-label="Yoga results"
+				>
+					${
+						filtered.length > 0
+							? filtered.map(
+									(y) => html`<div class="yoga-chip">
+									${y.name}
+									<span class="yoga-id">${y.id}</span>
+								</div>`,
+								)
+							: html`<p class="no-results">No yogas match your search.</p>`
+					}
+				</div>
+			</div>`;
+		}
+
+		return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-yoga-list': RoxyYogaList;
+	}
+}

package/src/index.ts

@@ -5,12 +5,15 @@
  *   import '@roxyapi/ui/components/natal-chart';
  */
 
+export { RoxyAshtakavargaGrid } from './components/ashtakavarga-grid.js';
 // Biorhythm
 export { RoxyBiorhythmChart } from './components/biorhythm-chart.js';
+export { RoxyChoghadiyaGrid } from './components/choghadiya-grid.js';
 export { RoxyCompatibilityCard } from './components/compatibility-card.js';
 export { RoxyDashaTimeline } from './components/dasha-timeline.js';
 // Generic fallback first so it is always available for nested rendering
 export { RoxyData } from './components/data.js';
+export { RoxyDivisionalChart } from './components/divisional-chart.js';
 export { RoxyDoshaCard } from './components/dosha-card.js';
 // Helpers
 export { RoxyEndpointForm } from './components/endpoint-form.js';
@@ -21,17 +24,20 @@ export { RoxyHoroscopeCard } from './components/horoscope-card.js';
 export { RoxyKpPlanetsTable } from './components/kp-planets-table.js';
 export { RoxyLocationSearch } from './components/location-search.js';
 export { RoxyMoonPhase } from './components/moon-phase.js';
-// Western
+// Western astrology
 export { RoxyNatalChart } from './components/natal-chart.js';
 // Numerology
 export { RoxyNumerologyCard } from './components/numerology-card.js';
 export { RoxyPanchangTable } from './components/panchang-table.js';
+export { RoxyShadbalaTable } from './components/shadbala-table.js';
 export { RoxySynastryChart } from './components/synastry-chart.js';
 // Tarot
 export { RoxyTarotCard } from './components/tarot-card.js';
 export { RoxyTarotSpread } from './components/tarot-spread.js';
-// Vedic
+export { RoxyTransitsTable } from './components/transits-table.js';
+// Vedic astrology
 export { RoxyVedicKundli } from './components/vedic-kundli.js';
+export { RoxyYogaList } from './components/yoga-list.js';
 
 import { ROXY_COMPONENTS, type RoxyComponentSlug } from './manifest.js';
 
@@ -39,13 +45,9 @@ export {
 	ROXY_COMPONENTS,
 	type RoxyComponent,
 	type RoxyComponentSlug,
-	type RoxyComponentTag,
-	type RoxyDomain,
 } from './manifest.js';
 export { ROXY_UI_VERSION } from './version.js';
 
 /** Slugs in declaration order. Kept for the auto-mount widgets script and downstream codegen. */
 export const ROXY_UI_COMPONENTS: readonly RoxyComponentSlug[] =
 	ROXY_COMPONENTS.map((c) => c.slug) as RoxyComponentSlug[];
-
-export type RoxyUIComponentName = RoxyComponentSlug;