@roxyapi/ui 0.0.1 → 0.1.2

package/src/components/natal-chart.ts

@@ -0,0 +1,298 @@
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { longitudeToSignPosition, polarToCartesian } from '../utils/degree.js';
+
+interface PlanetEntry {
+	name?: string;
+	planet?: string;
+	longitude?: number;
+	degree?: number;
+	sign?: string;
+	house?: number;
+	retrograde?: boolean;
+	isRetrograde?: boolean;
+}
+
+interface AspectEntry {
+	planet1?: string;
+	planet2?: string;
+	aspect?: string;
+	orb?: number;
+}
+
+interface HouseEntry {
+	house?: number;
+	number?: number;
+	cusp?: number;
+	sign?: string;
+}
+
+interface NatalChartData {
+	planets?: PlanetEntry[] | Record<string, PlanetEntry>;
+	houses?: HouseEntry[];
+	aspects?: AspectEntry[];
+	ascendant?: number | { longitude?: number; sign?: string };
+	midheaven?: number | { longitude?: number; sign?: string };
+	birthDetails?: {
+		date?: string;
+		time?: string;
+		location?: string;
+	};
+}
+
+const SIZE = 320;
+const CENTER = SIZE / 2;
+const OUTER_R = 150;
+const SIGN_R = 134;
+const HOUSE_R = 110;
+const PLANET_R = 88;
+
+/**
+ * Western natal chart wheel. Renders the 12 zodiac signs, 12 houses, planet
+ * markers, and aspect lines from a /astrology/natal-chart response.
+ */
+@customElement('roxy-natal-chart')
+export class RoxyNatalChart extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				width: 100%;
+				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;
+				color: var(--roxy-primary, #0f172a);
+			}
+
+			.meta {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			svg {
+				display: block;
+				width: 100%;
+				max-width: 360px;
+				height: auto;
+				margin: 0 auto;
+			}
+
+			.wheel-line {
+				fill: none;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+
+			.sign-glyph {
+				fill: var(--roxy-secondary, #475569);
+				font-size: 14px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.planet-glyph {
+				fill: var(--roxy-accent, #f59e0b);
+				font-size: 14px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.house-num {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.aspect {
+				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 32%, transparent);
+				stroke-width: 0.6;
+				fill: none;
+			}
+
+			.legend {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-md, 1rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: NatalChartData | null = null;
+
+	@property({ type: String, attribute: 'house-system', reflect: true })
+	houseSystem: 'placidus' | 'whole-sign' | 'equal' | 'koch' = 'placidus';
+
+	private getPlanets(): PlanetEntry[] {
+		const p = this.data?.planets;
+		if (!p) return [];
+		if (Array.isArray(p)) return p;
+		return Object.entries(p).map(([name, entry]) => ({ ...entry, name }));
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+		const planets = this.getPlanets();
+		const aspects = this.data.aspects ?? [];
+
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">Natal chart</h2>
+				${
+					this.data.birthDetails
+						? html`<div class="meta">
+							${[
+								this.data.birthDetails.date,
+								this.data.birthDetails.time,
+								this.data.birthDetails.location,
+							]
+								.filter(Boolean)
+								.join(' · ')}
+						</div>`
+						: nothing
+				}
+			</header>
+			<svg
+				viewBox="0 0 ${SIZE} ${SIZE}"
+				role="img"
+				aria-label="Natal chart wheel with twelve houses, planets, and aspects"
+			>
+				<title>Natal chart wheel</title>
+				<desc>
+					Twelve zodiac sign segments around a circular wheel. Planet glyphs are
+					placed at their ecliptic longitudes. Aspect lines connect related planets.
+				</desc>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${OUTER_R}
+					stroke-width="1.5"
+				/>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${HOUSE_R}
+					stroke-width="1"
+				/>
+				<circle
+					class="wheel-line"
+					cx=${CENTER}
+					cy=${CENTER}
+					r=${PLANET_R - 16}
+					stroke-width="0.5"
+				/>
+				${this.renderSpokes()} ${this.renderSigns()} ${this.renderHouseNumbers()}
+				${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
+			</svg>
+			<div class="legend">
+				<span>${planets.length} planets</span>
+				<span>${aspects.length} aspects</span>
+				<span>House system: ${this.houseSystem}</span>
+			</div>
+		</div>`;
+	}
+
+	private renderSpokes() {
+		return Array.from({ length: 12 }, (_, i) => {
+			const angle = i * 30 - 90;
+			const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
+			const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
+			return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
+		});
+	}
+
+	private renderSigns() {
+		const order = [
+			'Aries',
+			'Taurus',
+			'Gemini',
+			'Cancer',
+			'Leo',
+			'Virgo',
+			'Libra',
+			'Scorpio',
+			'Sagittarius',
+			'Capricorn',
+			'Aquarius',
+			'Pisces',
+		];
+		return order.map((sign, i) => {
+			const angle = i * 30 + 15 - 90;
+			const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
+			return svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
+		});
+	}
+
+	private renderHouseNumbers() {
+		return Array.from({ length: 12 }, (_, i) => {
+			const angle = i * 30 + 15 - 90;
+			const pos = polarToCartesian(CENTER, CENTER, HOUSE_R - 12, angle);
+			return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${i + 1}</text>`;
+		});
+	}
+
+	private renderPlanets(planets: PlanetEntry[]) {
+		return planets.map((p) => {
+			const lon =
+				typeof p.longitude === 'number'
+					? p.longitude
+					: typeof p.degree === 'number'
+						? p.degree
+						: NaN;
+			if (!Number.isFinite(lon)) return nothing;
+			const angle = lon - 90;
+			const pos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
+			const name = p.name ?? p.planet ?? '';
+			const glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);
+			const retro = p.retrograde || p.isRetrograde ? ' R' : '';
+			return svg`<text class="planet-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${name}${retro}</title>${glyph}</text>`;
+		});
+	}
+
+	private renderAspects(planets: PlanetEntry[], aspects: AspectEntry[]) {
+		const planetMap = new Map<string, number>();
+		for (const p of planets) {
+			const lon =
+				typeof p.longitude === 'number'
+					? p.longitude
+					: typeof p.degree === 'number'
+						? p.degree
+						: null;
+			if (lon === null) continue;
+			const name = capitalize(p.name ?? p.planet ?? '');
+			if (name) planetMap.set(name, lon);
+		}
+		return aspects.map((a) => {
+			const l1 = planetMap.get(capitalize(a.planet1 ?? ''));
+			const l2 = planetMap.get(capitalize(a.planet2 ?? ''));
+			if (l1 === undefined || l2 === undefined) return nothing;
+			const p1 = polarToCartesian(CENTER, CENTER, PLANET_R - 18, l1 - 90);
+			const p2 = polarToCartesian(CENTER, CENTER, PLANET_R - 18, l2 - 90);
+			return svg`<line class="aspect" x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y} />`;
+		});
+	}
+}
+
+function capitalize(s: string): string {
+	if (!s) return '';
+	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-natal-chart': RoxyNatalChart;
+	}
+}
+
+// Export for external use
+export { longitudeToSignPosition };

package/src/components/numerology-card.ts

@@ -0,0 +1,243 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface NumerologyCommon {
+	number?: number;
+	calculation?: string;
+	type?: 'single' | 'master' | string;
+	hasKarmicDebt?: boolean;
+	karmicDebtNumber?: number;
+	karmicDebtMeaning?: string;
+	meaning?: string;
+}
+
+interface CoreNumber {
+	number?: number;
+	type?: string;
+	meaning?: string;
+	calculation?: string;
+}
+
+interface FullChart {
+	profile?: { fullName?: string; birthDate?: string };
+	coreNumbers?: Record<string, CoreNumber | number>;
+	additionalInsights?: Record<string, unknown>;
+	birthDayProfile?: Record<string, unknown>;
+	maturityStatus?: string;
+	luckyAssociations?: Record<string, unknown>;
+	summary?: string;
+}
+
+interface PersonalYear {
+	year?: number;
+	personalYear?: number;
+	title?: string;
+	theme?: string;
+	keywords?: string[];
+	meaning?: string;
+	advice?: string;
+}
+
+type NumerologyData = NumerologyCommon & FullChart & PersonalYear;
+
+/**
+ * Numerology card. Renders /numerology/{life-path,expression,personal-year,chart}.
+ * Use the `type` attribute to switch the layout.
+ */
+@customElement('roxy-numerology-card')
+export class RoxyNumerologyCard extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.hero {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.numeral {
+				font-size: 4rem;
+				line-height: 1;
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				font-variant-numeric: tabular-nums;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.meaning {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.calc {
+				margin: 0;
+				font-family: var(--roxy-font-mono);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-radius: var(--roxy-radius-sm, 4px);
+				word-break: break-all;
+			}
+
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.chips span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			.cores {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-md, 1rem);
+			}
+			.cores .item {
+				display: flex;
+				align-items: baseline;
+				gap: var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.cores .item span:first-child {
+				color: var(--roxy-muted, #71717a);
+				text-transform: capitalize;
+			}
+			.cores .item strong {
+				color: var(--roxy-accent-fg, #b45309);
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.karmic {
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
+				border: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-radius: var(--roxy-radius-md, 8px);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: NumerologyData | null = null;
+
+	@property({ type: String, reflect: true })
+	type: 'life-path' | 'expression' | 'personal-year' | 'chart' = 'life-path';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No numerology data</div>`;
+
+		const headerLabel = LABELS[this.type] ?? this.type;
+		const number = d.personalYear ?? d.number;
+		const cores = d.coreNumbers
+			? Object.entries(d.coreNumbers).filter(
+					([, v]) => v !== null && v !== undefined,
+				)
+			: [];
+
+		return html`<article
+			class="card"
+			aria-label=${headerLabel}
+		>
+			<div class="hero">
+				${typeof number === 'number' ? html`<div class="numeral">${number}</div>` : nothing}
+				<div>
+					<p class="label">${headerLabel}</p>
+					${
+						d.title
+							? html`<h2 class="title">${d.title}</h2>`
+							: d.type
+								? html`<h2 class="title">
+									${d.type === 'master' ? 'Master number' : 'Single digit'}
+								</h2>`
+								: nothing
+					}
+				</div>
+			</div>
+			${d.theme ? html`<p><strong>Theme:</strong> ${d.theme}</p>` : nothing}
+			${d.meaning ? html`<p class="meaning">${d.meaning}</p>` : nothing}
+			${d.advice ? html`<p>${d.advice}</p>` : nothing}
+			${d.calculation ? html`<pre class="calc">${d.calculation}</pre>` : nothing}
+			${
+				d.keywords?.length
+					? html`<div class="chips">
+						${d.keywords.map((k) => html`<span>${k}</span>`)}
+					</div>`
+					: nothing
+			}
+			${
+				cores.length > 0
+					? html`<div class="cores">
+						${cores.map(([k, v]) => {
+							const value =
+								typeof v === 'number' ? v : (v as CoreNumber).number;
+							return html`<div class="item">
+								<span>${humanize(k)}</span>
+								<strong>${value ?? ''}</strong>
+							</div>`;
+						})}
+					</div>`
+					: nothing
+			}
+			${
+				d.hasKarmicDebt && d.karmicDebtNumber
+					? html`<div class="karmic">
+						Karmic debt ${d.karmicDebtNumber}.
+						${d.karmicDebtMeaning ? d.karmicDebtMeaning : ''}
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+}
+
+const LABELS: Record<string, string> = {
+	'life-path': 'Life Path',
+	expression: 'Expression',
+	'personal-year': 'Personal Year',
+	chart: 'Numerology chart',
+};
+
+function humanize(s: string): string {
+	return s
+		.replace(/[_-]+/g, ' ')
+		.replace(/([a-z])([A-Z])/g, '$1 $2')
+		.replace(/^\w/, (c) => c.toUpperCase());
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-numerology-card': RoxyNumerologyCard;
+	}
+}