@roxyapi/ui 0.3.1 → 0.4.1

package/src/components/dasha-timeline.ts

@@ -68,6 +68,13 @@ export class RoxyDashaTimeline extends LitElement {
 				color: var(--roxy-fg, #0a0a0a);
 			}
 
+			.balance {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				border-left: 2px solid var(--roxy-border, #e4e4e7);
+				padding-left: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
 			.timeline {
 				display: grid;
 				gap: var(--roxy-space-xs, 0.25rem);
@@ -79,26 +86,69 @@ export class RoxyDashaTimeline extends LitElement {
 				align-items: center;
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
+			.bar.now strong {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.now-badge {
+				display: inline-block;
+				margin-left: 0.4em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
 			.bar-track {
+				position: relative;
 				height: 14px;
 				background: var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-full, 9999px);
 				overflow: hidden;
 			}
-			.bar-track > span {
+			.bar-fill {
 				display: block;
 				height: 100%;
 				background: var(--roxy-accent, #f59e0b);
+				opacity: 0.45;
 				transition:
 					width var(--roxy-motion-duration, 200ms)
 					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
 			}
+			.bar-now .bar-fill {
+				opacity: 1;
+			}
+			.bar-progress {
+				position: absolute;
+				top: -2px;
+				bottom: -2px;
+				width: 2px;
+				background: var(--roxy-accent-fg, #b45309);
+				border-radius: 2px;
+				box-shadow: 0 0 0 2px
+					color-mix(in srgb, var(--roxy-accent, #f59e0b) 35%, transparent);
+			}
 			.dates {
 				color: var(--roxy-muted, #71717a);
 				font-size: var(--roxy-text-xs, 0.75rem);
 				font-variant-numeric: tabular-nums;
 				text-align: right;
 			}
+			details.interp {
+				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);
+				background: var(--roxy-bg, #fff);
+			}
+			details.interp summary {
+				cursor: pointer;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			details.interp p {
+				margin: var(--roxy-space-sm, 0.5rem) 0 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
 		`,
 	];
 
@@ -139,6 +189,7 @@ export class RoxyDashaTimeline extends LitElement {
 				}
 			</header>
 
+			${this.renderBirthBalance(d)}
 			${this.period === 'current' ? this.renderCurrent(d) : nothing}
 			${
 				periods.length > 0
@@ -147,9 +198,37 @@ export class RoxyDashaTimeline extends LitElement {
 					</div>`
 					: nothing
 			}
+			${this.renderActiveInterpretation(periods)}
 		</div>`;
 	}
 
+	private renderBirthBalance(d: DashaData) {
+		if (!('birthDashaBalance' in d) || !d.birthDashaBalance) return nothing;
+		const b = d.birthDashaBalance;
+		const lord = 'nakshatraLord' in d && d.nakshatraLord ? d.nakshatraLord : '';
+		const yrs = b.years ?? 0;
+		const mo = b.months ?? 0;
+		const da = b.days ?? 0;
+		const parts: string[] = [];
+		if (yrs) parts.push(`${yrs}y`);
+		if (mo) parts.push(`${mo}m`);
+		if (da) parts.push(`${da}d`);
+		const remaining = parts.length ? parts.join(' ') : '0d';
+		return html`<p class="balance">
+			Birth dasha balance: ${remaining} of
+			${lord ? html`<strong>${lord}</strong>` : 'the opening mahadasha'} remained at birth.
+		</p>`;
+	}
+
+	private renderActiveInterpretation(periods: DashaPeriod[]) {
+		const active = periods.find((p) => this.isCurrent(p));
+		if (!active?.interpretation) return nothing;
+		return html`<details class="interp">
+			<summary>${active.planet} mahadasha interpretation</summary>
+			<p>${active.interpretation}</p>
+		</details>`;
+	}
+
 	private renderCurrent(d: DashaData) {
 		if (!('mahadasha' in d)) return nothing;
 		return html`<div class="current">
@@ -201,12 +280,64 @@ export class RoxyDashaTimeline extends LitElement {
 		return [];
 	}
 
+	/** True when the current wall-clock time falls between the period's start and end. */
+	private isCurrent(p: DashaPeriod): boolean {
+		if (!p.startDate || !p.endDate) return false;
+		const now = Date.now();
+		const start = Date.parse(p.startDate);
+		const end = Date.parse(p.endDate);
+		if (Number.isNaN(start) || Number.isNaN(end)) return false;
+		return now >= start && now < end;
+	}
+
+	/**
+	 * Fractional progress (0..1) through a period at the current time. Used to
+	 * draw a vertical "now" marker inside the active bar. Returns -1 outside the
+	 * period so the caller can skip the marker.
+	 */
+	private progressIn(p: DashaPeriod): number {
+		if (!p.startDate || !p.endDate) return -1;
+		const start = Date.parse(p.startDate);
+		const end = Date.parse(p.endDate);
+		const now = Date.now();
+		if (
+			Number.isNaN(start) ||
+			Number.isNaN(end) ||
+			now < start ||
+			now >= end ||
+			end <= start
+		) {
+			return -1;
+		}
+		return (now - start) / (end - start);
+	}
+
 	private renderBar(p: DashaPeriod, max: number) {
 		const years = p.durationYears;
 		const width = max > 0 ? (years / max) * 100 : 0;
-		return html`<div class="bar" role="listitem">
-			<span>${p.planet}</span>
-			<span class="bar-track"><span style="width: ${width}%"></span></span>
+		const current = this.isCurrent(p);
+		const progress = current ? this.progressIn(p) : -1;
+		const trackClass = current ? 'bar-track bar-now' : 'bar-track';
+		return html`<div
+			class=${current ? 'bar now' : 'bar'}
+			role="listitem"
+			aria-current=${current ? 'time' : 'false'}
+		>
+			<span>
+				<strong>${p.planet}</strong>${current ? html`<span class="now-badge">Now</span>` : nothing}
+			</span>
+			<span class=${trackClass}>
+				<span class="bar-fill" style="width: ${width}%"></span>
+				${
+					progress >= 0
+						? html`<span
+							class="bar-progress"
+							style="left: ${progress * width}%"
+							aria-hidden="true"
+						></span>`
+						: nothing
+				}
+			</span>
 			<span class="dates">
 				${p.startDate ? formatYear(p.startDate) : ''}
 				${p.endDate ? html`- ${formatYear(p.endDate)}` : ''}

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(' ');