@roxyapi/ui 0.3.0 → 0.4.0

package/src/components/divisional-chart.ts

@@ -4,41 +4,28 @@ import { PLANET_GLYPH } from '../tokens/index.js';
 import type { DivisionalChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
-	buildHousesFromMeta,
-	type HouseDef,
-	renderEastFrame,
-	renderEastHouseGroup,
-	renderNorthFrame,
-	renderNorthHouseGroup,
-	renderSouthFrame,
-	renderSouthHouseGroup,
+	type ChartStyle,
+	type KundliViewModel,
+	renderKundliStyleTablist,
+	renderKundliSvg,
+	toKundliViewModel,
 } from '../utils/kundli-render.js';
+import { kundliStyles } from '../utils/kundli-styles.js';
 
 /**
  * Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
- * renders the same south/north/east kundli wheel as the birth chart, plus
- * division metadata and Vargottama planet pills. The varga response carries a
- * graha-keyed `chart.meta` map (no per-rashi buckets), so houses are bucketed
- * from that map.
+ * renders the same South / North / East kundli grid as the birth chart, plus
+ * division metadata and Vargottama planet pills. A visible tablist lets the
+ * end user switch styles at runtime. The varga response carries a graha-keyed
+ * `chart.meta` map (no per-rashi buckets), so houses are bucketed from that
+ * map.
  */
 @customElement('roxy-divisional-chart')
 export class RoxyDivisionalChart extends LitElement {
 	static styles = [
 		baseStyles,
+		kundliStyles,
 		css`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.header {
-				display: grid;
-				gap: var(--roxy-space-xs, 0.25rem);
-			}
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -51,46 +38,6 @@ export class RoxyDivisionalChart extends LitElement {
 				padding-left: var(--roxy-space-sm, 0.5rem);
 				margin: 0;
 			}
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
-			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 11px;
-				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;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
-			}
-			.lagna-bg {
-				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-				stroke-width: 0.8;
-			}
 			.vargottama-row {
 				display: flex;
 				flex-wrap: wrap;
@@ -122,58 +69,54 @@ export class RoxyDivisionalChart extends LitElement {
 	data: DivisionalChartResponse | null = null;
 
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
-	chartStyle: 'south' | 'north' | 'east' = 'south';
+	chartStyle: ChartStyle = 'north';
+
+	private setStyle = (next: ChartStyle) => {
+		this.chartStyle = next;
+	};
 
-	private buildHouses(): HouseDef[] {
-		if (!this.data?.chart?.meta) return [];
-		return buildHousesFromMeta(this.data.chart.meta);
+	private viewModel(): KundliViewModel | null {
+		if (!this.data?.chart?.meta) return null;
+		const { division } = this.data;
+		const label = `D${division.number} ${division.name}`;
+		return toKundliViewModel(this.data.chart.meta, label);
 	}
 
 	render() {
-		if (!this.data)
+		const vm = this.viewModel();
+		if (!this.data || !vm)
 			return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
 
 		const { division, vargottama } = this.data;
-		const houses = this.buildHouses();
-		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">
 			<div class="header">
-				<h2 class="title">
-					D${division.number} ${division.name}
+				<div>
+					<h2 class="title">
+						D${division.number} ${division.name}
+						${
+							division.sanskritName && division.sanskritName !== division.name
+								? html`<span class="division-meta"> · ${division.sanskritName}</span>`
+								: nothing
+						}
+					</h2>
 					${
-						division.sanskritName && division.sanskritName !== division.name
-							? html`<span class="division-meta"> · ${division.sanskritName}</span>`
+						division.significance
+							? html`<p class="significance">${division.significance}</p>`
 							: nothing
 					}
-				</h2>
-				${
-					division.significance
-						? html`<p class="significance">${division.significance}</p>`
-						: nothing
-				}
+				</div>
+				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
 			</div>
 
 			<svg
-				viewBox="0 0 300 300"
+				viewBox="0 0 400 400"
+				preserveAspectRatio="xMidYMid meet"
 				role="img"
 				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
 			>
 				<title>D${division.number} ${division.name}</title>
-				${frame}
-				${houses.map((h) => houseGroup(h))}
+				${renderKundliSvg(vm, this.chartStyle)}
 			</svg>
 
 			${

package/src/components/natal-chart.ts

@@ -64,7 +64,8 @@ export class RoxyNatalChart extends LitElement {
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 360px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
 				height: auto;
 				margin: 0 auto;
 			}
@@ -93,10 +94,33 @@ export class RoxyNatalChart extends LitElement {
 				font-family: var(--roxy-font-sans);
 			}
 
+			/* Below 480px the chart container shrinks to ~320px on phones.
+			 * Bump in-SVG text up proportionally so the 7px degree band
+			 * does not collapse below ~6px on screen.
+			 */
+			@container (max-width: 480px) {
+				.sign-glyph,
+				.planet-glyph {
+					font-size: 18px;
+				}
+				.planet-deg {
+					font-size: 10px;
+				}
+				.house-num {
+					font-size: 12px;
+				}
+			}
+
 			.planet-deg .retro {
 				fill: var(--roxy-danger, #dc2626);
 			}
 
+			.planet-leader {
+				stroke: var(--roxy-accent, #f59e0b);
+				stroke-width: 0.5;
+				opacity: 0.55;
+			}
+
 			.house-num {
 				fill: var(--roxy-muted, #71717a);
 				font-size: 9px;
@@ -559,6 +583,10 @@ export class RoxyNatalChart extends LitElement {
 	}
 
 	private renderAngleMark(longitude: number, label: string) {
+		// Tick AND label share the same angle so the label sits right at the
+		// tip of the arrow, where a practitioner expects to find it. The label
+		// halo at radius ANGLE_LABEL_R is clear of the wheel rim, so there is
+		// no overlap with house dividers despite the shared angle.
 		const angle = this.toAngle(longitude);
 		const tickInner = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
 		const tickOuter = polarToCartesian(CENTER, CENTER, ANGLE_TICK_R, angle);
@@ -662,16 +690,71 @@ export class RoxyNatalChart extends LitElement {
 	}
 
 	private renderPlanets(planets: PlanetEntry[]) {
-		return planets.map((p) => {
-			if (!Number.isFinite(p.longitude)) return nothing;
-			const angle = this.toAngle(p.longitude);
-			const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
-			const degPos = polarToCartesian(CENTER, CENTER, PLANET_R - 13, angle);
+		// Stellium-aware angular fan-out. Conjunctions within 8° are the norm
+		// in professional natal charts (Sun-Mercury-Venus cluster, outer-planet
+		// stacks). To keep every glyph legible without losing precision, sort
+		// by longitude and push later members forward in angle until they
+		// clear a minimum separation, then draw a thin leader line from each
+		// displaced glyph back to the planet's true position on the outer
+		// rim. Conventional approach used by professional Western natal
+		// software; preserves both readability and astronomical accuracy.
+		const MIN_SEPARATION = 7;
+		type Placed = {
+			p: PlanetEntry;
+			trueLon: number;
+			displayLon: number;
+		};
+		const sorted: Placed[] = planets
+			.filter((p) => Number.isFinite(p.longitude))
+			.map((p) => ({
+				p,
+				trueLon: normalizeLongitude(p.longitude),
+				displayLon: normalizeLongitude(p.longitude),
+			}))
+			.sort((a, b) => a.trueLon - b.trueLon);
+		// Forward sweep: clamp each to at least prev + MIN_SEPARATION.
+		for (let i = 1; i < sorted.length; i++) {
+			const prev = sorted[i - 1];
+			const cur = sorted[i];
+			if (!prev || !cur) continue;
+			const wanted = prev.displayLon + MIN_SEPARATION;
+			if (cur.displayLon < wanted) cur.displayLon = wanted;
+		}
+		// If the cluster overshot 360°, slide everything back equally so the
+		// stack stays anchored near the original longitudes.
+		const last = sorted[sorted.length - 1];
+		if (last && last.displayLon > 360) {
+			const shift = last.displayLon - 360;
+			for (const s of sorted) s.displayLon -= shift;
+		}
+		return sorted.map(({ p, trueLon, displayLon }) => {
+			const trueAngle = this.toAngle(trueLon);
+			const displayAngle = this.toAngle(displayLon);
+			const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, displayAngle);
+			const degPos = polarToCartesian(
+				CENTER,
+				CENTER,
+				PLANET_R - 13,
+				displayAngle,
+			);
+			const rimPos = polarToCartesian(CENTER, CENTER, OUTER_R - 4, trueAngle);
+			const leaderInner = polarToCartesian(
+				CENTER,
+				CENTER,
+				PLANET_R + 8,
+				displayAngle,
+			);
 			const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
 			const sp = longitudeToSignPosition(p.longitude);
 			const retro = p.isRetrograde === true;
 			const degLabel = `${sp.degree}°${String(sp.minute).padStart(2, '0')}'`;
+			const offset = Math.abs(displayLon - trueLon) > 0.5;
 			return svg`<g>
+				${
+					offset
+						? svg`<line class="planet-leader" x1=${rimPos.x} y1=${rimPos.y} x2=${leaderInner.x} y2=${leaderInner.y} />`
+						: nothing
+				}
 				<text class="planet-glyph" x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro ? ' retrograde' : ''} - ${degLabel} ${p.sign ?? ''}</title>${glyph}</text>
 				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? svg`<tspan class="retro"> ℞</tspan>` : nothing}</text>
 			</g>`;

package/src/components/panchang-table.ts

@@ -116,6 +116,9 @@ export class RoxyPanchangTable extends LitElement {
 				]
 			: [];
 
+		const transitions =
+			detailed && 'transitions' in detailed ? detailed.transitions : undefined;
+
 		return html`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
@@ -163,6 +166,21 @@ export class RoxyPanchangTable extends LitElement {
 					}
 				</tbody>
 			</table>
+			${
+				transitions
+					? html`
+						<div class="section">Next transitions</div>
+						<table>
+							<tbody>
+								${this.renderTransitionRow('Tithi', transitions.tithi)}
+								${this.renderTransitionRow('Nakshatra', transitions.nakshatra)}
+								${this.renderTransitionRow('Yoga', transitions.yoga)}
+								${this.renderTransitionRow('Karana', transitions.karana)}
+							</tbody>
+						</table>
+					`
+					: nothing
+			}
 			${
 				this.detail === 'detailed' &&
 				(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))
@@ -199,6 +217,19 @@ export class RoxyPanchangTable extends LitElement {
 		</div>`;
 	}
 
+	private renderTransitionRow(
+		label: string,
+		t: { endsAt?: string; next?: string } | undefined,
+	) {
+		if (!t?.endsAt) return nothing;
+		const when = formatTime(t.endsAt);
+		const next = t.next ? ` → ${t.next}` : '';
+		return html`<tr>
+			<th>${label}</th>
+			<td>ends ${when}${next}</td>
+		</tr>`;
+	}
+
 	private formatPart(v: unknown): string {
 		if (!v) return '';
 		if (typeof v === 'string') return v;
@@ -207,11 +238,13 @@ export class RoxyPanchangTable extends LitElement {
 				name?: string;
 				lord?: string;
 				phase?: string;
+				paksha?: string;
 				end?: string;
 			};
 			const parts = [
 				obj.name,
-				obj.lord ? `(${obj.lord})` : '',
+				obj.paksha ? `(${obj.paksha} paksha)` : '',
+				obj.lord ? `· ${obj.lord}` : '',
 				obj.phase,
 			].filter(Boolean);
 			return parts.join(' ');

package/src/components/synastry-chart.ts

@@ -6,7 +6,7 @@ import type {
 	NatalChartResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { polarToCartesian } from '../utils/degree.js';
+import { longitudeToSignPosition, polarToCartesian } from '../utils/degree.js';
 import {
 	ASPECT_CLASS,
 	formatNumber,
@@ -72,7 +72,9 @@ export class RoxySynastryChart extends LitElement {
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 400px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
+				height: auto;
 				margin: 0 auto;
 			}
 
@@ -94,6 +96,31 @@ export class RoxySynastryChart extends LitElement {
 				font-weight: 600;
 				font-size: 13px;
 			}
+			.person-tag {
+				font-size: 7px;
+				font-weight: 700;
+				opacity: 0.85;
+			}
+			.planet-deg {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 7px;
+				font-family: var(--roxy-font-sans);
+			}
+			.planet-deg .retro {
+				fill: var(--roxy-danger, #dc2626);
+			}
+			.asc-tick {
+				stroke: var(--roxy-accent-fg, #b45309);
+				stroke-width: 1;
+				opacity: 0.75;
+			}
+			.asc-label {
+				fill: var(--roxy-accent-fg, #b45309);
+				font-size: 9px;
+				font-weight: 700;
+				font-family: var(--roxy-font-sans);
+				letter-spacing: 0.04em;
+			}
 			.aspect {
 				stroke-width: 0.8;
 				fill: none;
@@ -316,7 +343,8 @@ export class RoxySynastryChart extends LitElement {
 				/>
 				${this.renderSpokes()} ${this.renderSigns()}
 				${this.renderInterAspectLines(p1Planets, p2Planets, interAspects)}
-				${this.renderRing(p1Planets, P1_R, 'p1')} ${this.renderRing(p2Planets, P2_R, 'p2')}
+				${this.renderRing(p1Planets, P1_R, 'p1', 1)} ${this.renderRing(p2Planets, P2_R, 'p2', 2)}
+				${this.renderAscendants(this.data)}
 			</svg>
 			<div class="legend-row">
 				<span><span class="swatch" style="background: var(--roxy-accent)"></span>Person 1</span>
@@ -376,20 +404,68 @@ export class RoxySynastryChart extends LitElement {
 		});
 	}
 
-	private renderRing(planets: PlanetEntry[], radius: number, cls: string) {
+	private renderRing(
+		planets: PlanetEntry[],
+		radius: number,
+		cls: string,
+		personIndex: 1 | 2,
+	) {
 		return planets.map((p) => {
 			if (!Number.isFinite(p.longitude)) return nothing;
-			const pos = polarToCartesian(
+			const angle = this.toAngle(p.longitude);
+			const pos = polarToCartesian(CENTER, CENTER, radius, angle);
+			// Degree label sits one tier inward from the glyph so the two
+			// concentric rings never blur their numbers into the aspect lines.
+			const degOffset = personIndex === 1 ? -12 : -10;
+			const degPos = polarToCartesian(
 				CENTER,
 				CENTER,
-				radius,
-				this.toAngle(p.longitude),
+				radius + degOffset,
+				angle,
 			);
 			const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-			return svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}</title>${glyph}</text>`;
+			const sp = longitudeToSignPosition(p.longitude);
+			const retro = p.isRetrograde === true;
+			const degLabel = `${sp.degree}°${String(sp.minute).padStart(2, '0')}'`;
+			const tooltip = `${p.name}${retro ? ' retrograde' : ''} - ${degLabel} ${sp.sign}`;
+			return svg`<g>
+				<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${tooltip}</title>${glyph}<tspan class="person-tag" dy="-0.55em" dx="0.15em">${personIndex}</tspan></text>
+				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${retro ? svg`<tspan class="retro"> ℞</tspan>` : nothing}</text>
+			</g>`;
 		});
 	}
 
+	/**
+	 * Ascendant markers for both people. Drawn as small spokes at the inner
+	 * rim with the label outside, so the two rising signs are immediately
+	 * scannable on the wheel without depending on tooltips.
+	 */
+	private renderAscendants(data: SynastryWithPlanets) {
+		const items: ReturnType<typeof svg>[] = [];
+		const make = (
+			asc: { sign: string; degree: number } | undefined,
+			personIndex: 1 | 2,
+		) => {
+			if (!asc) return;
+			const signIdx = SIGNS_ORDER.findIndex(
+				(s) => s.toLowerCase() === asc.sign.toLowerCase(),
+			);
+			if (signIdx === -1) return;
+			const longitude = signIdx * 30 + asc.degree;
+			const angle = this.toAngle(longitude);
+			const innerR = personIndex === 1 ? P1_R + 14 : P2_R + 14;
+			const tickPos = polarToCartesian(CENTER, CENTER, innerR, angle);
+			const labelPos = polarToCartesian(CENTER, CENTER, OUTER_R + 14, angle);
+			items.push(svg`<g>
+				<line class="asc-tick" x1=${tickPos.x} y1=${tickPos.y} x2=${labelPos.x} y2=${labelPos.y} />
+				<text class="asc-label" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">Asc${personIndex}</text>
+			</g>`);
+		};
+		make(data.person1?.ascendant, 1);
+		make(data.person2?.ascendant, 2);
+		return items;
+	}
+
 	private renderInterAspectLines(
 		p1: PlanetEntry[],
 		p2: PlanetEntry[],

package/src/components/vedic-kundli.ts

@@ -1,126 +1,66 @@
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { BirthChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
-	buildHousesFromMeta,
-	type HouseDef,
-	renderEastFrame,
-	renderEastHouseGroup,
-	renderNorthFrame,
-	renderNorthHouseGroup,
-	renderSouthFrame,
-	renderSouthHouseGroup,
+	type ChartStyle,
+	type KundliViewModel,
+	renderKundliStyleTablist,
+	renderKundliSvg,
+	toKundliViewModel,
 } from '../utils/kundli-render.js';
+import { kundliStyles } from '../utils/kundli-styles.js';
 
 /**
  * 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.
+ * Three regional render styles are available; the visible tablist lets the
+ * end user switch between South / North / East at any time. The same planet-
+ * in-sign data feeds every style, so the toggle is purely a layout choice.
  *
- * Theming flows through CSS custom properties on :host, so the chart adopts
- * the host page palette without runtime color probing.
+ * Each planet shows its abbreviation and whole-degree-within-sign, with an
+ * SVG tooltip carrying exact position, nakshatra, pada, and avastha. The host
+ * page sets the initial style via `chart-style` attribute; from there the
+ * user takes over.
+ *
+ * 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 {
-	static styles = [
-		baseStyles,
-		css`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
-			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 10px;
-				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;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
-			}
-			.lagna-bg {
-				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-				stroke-width: 0.8;
-			}
-		`,
-	];
+	static styles = [baseStyles, kundliStyles];
 
 	@property({ attribute: false })
 	data: BirthChartResponse | null = null;
 
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
-	chartStyle: 'south' | 'north' | 'east' = 'south';
+	chartStyle: ChartStyle = 'north';
 
-	private buildHouses(): HouseDef[] {
-		if (!this.data?.meta) return [];
-		return buildHousesFromMeta(this.data.meta);
+	private viewModel(): KundliViewModel | null {
+		if (!this.data?.meta) return null;
+		return toKundliViewModel(this.data.meta, 'D1 Rashi');
 	}
 
+	private setStyle = (next: ChartStyle) => {
+		this.chartStyle = next;
+	};
+
 	render() {
-		if (!this.data)
+		const vm = this.viewModel();
+		if (!vm)
 			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
-		const houses = this.buildHouses();
-		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>
+			<div class="header">
+				<h2 class="title">Vedic kundli</h2>
+				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
+			</div>
 			<svg
-				viewBox="0 0 300 300"
+				viewBox="0 0 400 400"
+				preserveAspectRatio="xMidYMid meet"
 				role="img"
 				aria-label="Vedic birth chart with twelve sign houses"
 			>
 				<title>Vedic kundli</title>
-				${frame}
-				${houses.map((h) => houseGroup(h))}
+				${renderKundliSvg(vm, this.chartStyle)}
 			</svg>
 		</div>`;
 	}