@roxyapi/ui 0.3.1 → 0.4.1

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>`;
 	}

package/src/styles/tokens.css

@@ -90,15 +90,12 @@
 	--roxy-motion-duration: 200ms;
 	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
-	/* Heat scale: 7-step gradient used by ashtakavarga bindu cells.
-	 * Low bindus (1) are cool green; high bindus (7+) are hot red. */
-	--roxy-heat-1: #f0fdf4;
-	--roxy-heat-2: #d1fae5;
-	--roxy-heat-3: #a7f3d0;
-	--roxy-heat-4: #fde68a;
-	--roxy-heat-5: #fdba74;
-	--roxy-heat-6: #fb923c;
-	--roxy-heat-7: #ef4444;
+	/* Heat scale: a single base hue. Consumers mix it with `transparent` at
+	 * increasing percentages to paint cooler-to-hotter tiers. The mix-with-
+	 * transparent approach lets the page bg show through and keeps text
+	 * colour stable (always --roxy-fg), so the cells read in both themes
+	 * without per-tier text colours. */
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Dark theme via system preference */
@@ -134,13 +131,7 @@
 			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-		--roxy-heat-1: #052e16;
-		--roxy-heat-2: #14532d;
-		--roxy-heat-3: #166534;
-		--roxy-heat-4: #92400e;
-		--roxy-heat-5: #b45309;
-		--roxy-heat-6: #c2410c;
-		--roxy-heat-7: #b91c1c;
+		--roxy-heat: var(--roxy-danger, #ef4444);
 	}
 }
 
@@ -205,13 +196,7 @@
 		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-	--roxy-heat-1: #052e16;
-	--roxy-heat-2: #14532d;
-	--roxy-heat-3: #166534;
-	--roxy-heat-4: #92400e;
-	--roxy-heat-5: #b45309;
-	--roxy-heat-6: #c2410c;
-	--roxy-heat-7: #b91c1c;
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Reduced motion override */

package/src/utils/base-styles.ts

@@ -86,4 +86,18 @@ export const baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;