@roxyapi/ui 0.1.3 → 0.2.0

package/src/components/shadbala-table.ts

@@ -0,0 +1,286 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type { ShadbalaResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+type Planet = ShadbalaResponse['planets'][number];
+
+/** CSS variable and display name for each of the 6 bala components. */
+const BALA_COMPONENTS: Array<{
+	key: keyof Pick<
+		Planet,
+		| 'sthanaBala'
+		| 'digBala'
+		| 'kalaBala'
+		| 'chestaBala'
+		| 'naisargikaBala'
+		| 'drikBala'
+	>;
+	label: string;
+	color: string;
+}> = [
+	{ key: 'sthanaBala', label: 'Sthana', color: 'var(--roxy-info, #0284c7)' },
+	{ key: 'digBala', label: 'Dig', color: 'var(--roxy-success, #16a34a)' },
+	{ key: 'kalaBala', label: 'Kala', color: 'var(--roxy-warning, #ea580c)' },
+	{ key: 'chestaBala', label: 'Chesta', color: 'var(--roxy-accent, #f59e0b)' },
+	{
+		key: 'naisargikaBala',
+		label: 'Naisargika',
+		color: 'var(--roxy-secondary, #475569)',
+	},
+	{ key: 'drikBala', label: 'Drik', color: 'var(--roxy-danger, #dc2626)' },
+];
+
+/**
+ * Shadbala six-fold planetary strength table with stacked bar visualization.
+ * Pass `data` from /vedic-astrology/shadbala.
+ */
+@customElement('roxy-shadbala-table')
+export class RoxyShadbalaTable 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;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+
+			.planet-row {
+				display: grid;
+				grid-template-columns: 8rem 1fr auto;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-sm, 0.5rem) 0;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+
+			.planet-row:last-of-type {
+				border-bottom: none;
+			}
+
+			.planet-label {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.glyph {
+				font-size: 1.2em;
+				line-height: 1;
+			}
+
+			.bar-wrap {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.bar {
+				display: flex;
+				height: 12px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				overflow: hidden;
+				background: var(--roxy-border, #e4e4e7);
+			}
+
+			.bar-segment {
+				height: 100%;
+				transition: flex-grow var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+
+			.pills {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 4px;
+			}
+
+			.rupas-label {
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				white-space: nowrap;
+			}
+
+			.adequacy-badge {
+				display: inline-block;
+				padding: 1px 6px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.adequacy-badge--adequate {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+
+			.adequacy-badge--weak {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+
+			.rank-badge {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.legend {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.legend-row {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.legend-swatch {
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				flex-shrink: 0;
+			}
+
+			@container (max-width: 480px) {
+				.planet-row {
+					grid-template-columns: 6rem 1fr;
+					grid-template-rows: auto auto;
+				}
+				.pills {
+					grid-column: 1 / -1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-start;
+				}
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: ShadbalaResponse | null = null;
+
+	render() {
+		if (!this.data?.planets?.length) {
+			return html`<div class="roxy-empty" role="status">No shadbala data</div>`;
+		}
+
+		const sorted = [...this.data.planets].sort(
+			(a, b) => a.relativeRank - b.relativeRank,
+		);
+
+		return html`<div class="wrap" aria-label="Shadbala planetary strength">
+			<div class="head">
+				<h2 class="title">Shadbala</h2>
+				<p class="subtitle">${sorted.length} planets ranked by strength</p>
+			</div>
+
+			<div role="list" aria-label="Planet strength bars">
+				${sorted.map((p) => this.renderPlanetRow(p))}
+			</div>
+
+			<div class="legend" aria-label="Strength component legend">
+				${BALA_COMPONENTS.map(
+					(b) => html`<div class="legend-row">
+						<span
+							class="legend-swatch"
+							style="background: ${b.color}"
+							aria-hidden="true"
+						></span>
+						${b.label}
+					</div>`,
+				)}
+			</div>
+		</div>`;
+	}
+
+	private renderPlanetRow(p: Planet) {
+		const glyph = PLANET_GLYPH[capitalize(p.planet)] ?? '';
+
+		// Compute positive component values (drikBala can be negative)
+		const values = BALA_COMPONENTS.map((b) => Math.max(0, p[b.key] as number));
+		const total = values.reduce((s, v) => s + v, 0);
+
+		const isAdequate =
+			typeof p.strengthRatio === 'number' && p.strengthRatio >= 1;
+		const badgeClass = isAdequate
+			? 'adequacy-badge--adequate'
+			: 'adequacy-badge--weak';
+		const badgeLabel = isAdequate ? 'adequate' : 'weak';
+
+		const rupasStr =
+			formatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2)
+				? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R`
+				: '';
+
+		return html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+			<div class="planet-label">
+				<span class="glyph" aria-hidden="true">${glyph}</span>
+				${p.planet}
+				<span class="rank-badge" aria-label="rank ${p.relativeRank}">#${p.relativeRank}</span>
+			</div>
+			<div class="bar-wrap">
+				<div class="bar" role="img" aria-label="Strength components for ${p.planet}">
+					${
+						total > 0
+							? BALA_COMPONENTS.map((b, i) => {
+									const v = values[i];
+									if (v <= 0) return nothing;
+									const grow = (v / total) * 100;
+									return html`<div
+									class="bar-segment"
+									style="flex-grow: ${grow}; background: ${b.color};"
+									title="${b.label}: ${formatNumber(v, 1)}"
+								></div>`;
+								})
+							: nothing
+					}
+				</div>
+			</div>
+			<div class="pills">
+				${rupasStr ? html`<span class="rupas-label">${rupasStr}</span>` : nothing}
+				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
+			</div>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-shadbala-table': RoxyShadbalaTable;
+	}
+}

package/src/components/synastry-chart.ts

@@ -1,22 +1,27 @@
 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 { PLANET_GLYPH, SIGN_GLYPH, SIGNS_ORDER } from '../tokens/index.js';
 import type {
 	CalculateSynastryResponse,
 	NatalChartResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { polarToCartesian } from '../utils/degree.js';
-import { formatNumber } from '../utils/format.js';
+import {
+	ASPECT_CLASS,
+	formatNumber,
+	normalizeAspect,
+} from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
 
 type PlanetEntry = NatalChartResponse['planets'][number];
 type InterAspect = CalculateSynastryResponse['interAspects'][number];
 
-// TODO(spec): /astrology/synastry does not expose person1/person2 planet
-// positions, but the wheel needs them to plot the dual chart. The preview
-// injects them via scripts/refresh-samples.ts; production callers see an
-// empty wheel. Either add `planets` to the CalculateSynastry response or
-// document that callers must merge in their own natal-chart payloads.
+// Drawing the dual wheel requires per-person planet longitudes alongside
+// the synastry response. Callers can merge planet arrays from
+// /astrology/natal-chart into `person1.planets` and `person2.planets`
+// before passing the payload in; without them, the component falls back
+// to the inter-aspects table and a status note instead of an empty wheel.
 type SynastryWithPlanets = CalculateSynastryResponse & {
 	person1?: { planets?: PlanetEntry[] };
 	person2?: { planets?: PlanetEntry[] };
@@ -364,21 +369,7 @@ export class RoxySynastryChart extends LitElement {
 	}
 
 	private renderSigns() {
-		const order = [
-			'Aries',
-			'Taurus',
-			'Gemini',
-			'Cancer',
-			'Leo',
-			'Virgo',
-			'Libra',
-			'Scorpio',
-			'Sagittarius',
-			'Capricorn',
-			'Aquarius',
-			'Pisces',
-		];
-		return order.map((s, i) => {
+		return SIGNS_ORDER.map((s, i) => {
 			const angle = this.toAngle(i * 30 + 15);
 			const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
 			return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
@@ -454,23 +445,6 @@ export class RoxySynastryChart extends LitElement {
 	}
 }
 
-function capitalize(s: string): string {
-	if (!s) return '';
-	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
-const ASPECT_CLASS: Record<string, string> = {
-	conjunction: 'aspect-conjunction',
-	sextile: 'aspect-sextile',
-	square: 'aspect-square',
-	trine: 'aspect-trine',
-	opposition: 'aspect-opposition',
-};
-
-function normalizeAspect(a: InterAspect): string {
-	return (a.type ?? '').toLowerCase().replace(/_/g, '-');
-}
-
 function formatStrength(s: number | undefined): string {
 	if (typeof s === 'number') return Math.round(s).toString();
 	return '';

package/src/components/transits-table.ts

@@ -0,0 +1,350 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import type { TransitsResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatDate, formatNumber, formatTime } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+/**
+ * Transit positions and aspect table. Pass `data` from /astrology/transits.
+ * When natalChart is included in the request, `data.transitAspects` and
+ * `data.summary` are present and rendered automatically.
+ */
+@customElement('roxy-transits-table')
+export class RoxyTransitsTable 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;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+
+			.summary-pills {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+				padding: 2px var(--roxy-space-sm, 0.5rem);
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				border: 1px solid currentColor;
+			}
+
+			.pill--muted {
+				color: var(--roxy-fg, #0a0a0a);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+			}
+
+			.pill--success {
+				color: var(--roxy-success-fg, #166534);
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 10%, transparent);
+			}
+
+			.pill--danger {
+				color: var(--roxy-danger-fg, #991b1b);
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 10%, transparent);
+			}
+
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				text-align: left;
+			}
+
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.06em;
+			}
+
+			.section-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+			}
+
+			.glyph {
+				font-size: 1.1em;
+				margin-right: 2px;
+				line-height: 1;
+			}
+
+			.planet-cell {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				white-space: nowrap;
+			}
+
+			.retro-badge {
+				display: inline-block;
+				font-size: 0.7em;
+				padding: 1px 4px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
+				color: var(--roxy-warning-fg, #9a3412);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin-left: 2px;
+				vertical-align: middle;
+			}
+
+			.speed {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+				white-space: nowrap;
+			}
+
+			.speed-arrow {
+				font-size: 0.85em;
+			}
+
+			td.num {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.nature-harmonious {
+				color: var(--roxy-success-fg, #166534);
+			}
+
+			.nature-challenging {
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+
+			.nature-neutral {
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.arrow-cell {
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+				white-space: nowrap;
+			}
+
+			.interp {
+				color: var(--roxy-secondary, #475569);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				max-width: 22rem;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			@container (max-width: 600px) {
+				.interp {
+					display: none;
+				}
+			}
+
+			.overflow-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: TransitsResponse | null = null;
+
+	render() {
+		if (!this.data?.transitPlanets?.length) {
+			return html`<div class="roxy-empty" role="status">No transits data</div>`;
+		}
+
+		const {
+			transitDate,
+			transitTime,
+			transitPlanets,
+			transitAspects,
+			summary,
+		} = this.data;
+
+		const dateStr = [formatDate(transitDate), formatTime(transitTime)]
+			.filter(Boolean)
+			.join(' ');
+
+		return html`<div class="wrap" aria-label="Transit positions table">
+			<div class="head">
+				<h2 class="title">Transits</h2>
+				${dateStr ? html`<p class="subtitle">${dateStr}</p>` : nothing}
+			</div>
+
+			${summary ? this.renderSummaryPills(summary) : nothing}
+
+			<div>
+				<p class="section-label">Planet positions</p>
+				<div class="overflow-scroll">
+					${this.renderPlanetsTable(transitPlanets)}
+				</div>
+			</div>
+
+			${
+				transitAspects?.length
+					? html`<div>
+						<p class="section-label">Transit aspects</p>
+						<div class="overflow-scroll">
+							${this.renderAspectsTable(transitAspects)}
+						</div>
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderSummaryPills(
+		summary: NonNullable<TransitsResponse['summary']>,
+	) {
+		return html`<div class="summary-pills" role="region" aria-label="Aspect summary">
+			<span class="pill pill--muted">
+				Total: ${summary.totalAspects}
+			</span>
+			<span class="pill pill--success">
+				Harmonious: ${summary.harmonious}
+			</span>
+			<span class="pill pill--danger">
+				Challenging: ${summary.challenging}
+			</span>
+			<span class="pill pill--muted">
+				Neutral: ${summary.neutral}
+			</span>
+		</div>`;
+	}
+
+	private renderPlanetsTable(planets: TransitsResponse['transitPlanets']) {
+		return html`<table class="planets-table">
+			<thead>
+				<tr>
+					<th scope="col">Planet</th>
+					<th scope="col">Sign</th>
+					<th scope="col">Degree</th>
+					<th scope="col">Speed</th>
+				</tr>
+			</thead>
+			<tbody>
+				${planets.map((p) => {
+					const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? '';
+					const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? '';
+					const speedArrow = p.speed >= 0 ? '↑' : '↓';
+					return html`<tr>
+						<td>
+							<div class="planet-cell">
+								<span class="glyph" aria-hidden="true">${pGlyph}</span>
+								${p.name}
+								${
+									p.isRetrograde
+										? html`<span class="retro-badge" aria-label="retrograde">R</span>`
+										: nothing
+								}
+							</div>
+						</td>
+						<td>
+							<div class="planet-cell">
+								<span class="glyph" aria-hidden="true">${sGlyph}</span>
+								${p.sign}
+							</div>
+						</td>
+						<td class="num">${formatNumber(p.degree, 2)}</td>
+						<td class="speed">
+							<span class="speed-arrow" aria-hidden="true">${speedArrow}</span>
+							${formatNumber(Math.abs(p.speed), 4)}
+						</td>
+					</tr>`;
+				})}
+			</tbody>
+		</table>`;
+	}
+
+	private renderAspectsTable(
+		aspects: NonNullable<TransitsResponse['transitAspects']>,
+	) {
+		return html`<table class="aspects-table">
+			<thead>
+				<tr>
+					<th scope="col">Transit Planet</th>
+					<th scope="col">Natal Planet</th>
+					<th scope="col">Type</th>
+					<th scope="col">Orb</th>
+					<th scope="col">Status</th>
+					<th scope="col">Strength</th>
+					<th scope="col" class="interp">Interpretation</th>
+				</tr>
+			</thead>
+			<tbody>
+				${aspects.map((a) => {
+					const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? '';
+					const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? '';
+					const natureClass = `nature-${(a.nature ?? '').toLowerCase()}`;
+					const summary = a.interpretation?.summary ?? '';
+					const truncated =
+						summary.length > 120 ? `${summary.slice(0, 120)}...` : summary;
+					return html`<tr>
+						<td>
+							<div class="arrow-cell">
+								<span class="glyph" aria-hidden="true">${tGlyph}</span>
+								${a.transitPlanet}
+							</div>
+						</td>
+						<td>
+							<div class="arrow-cell">
+								<span class="glyph" aria-hidden="true">${nGlyph}</span>
+								${a.natalPlanet}
+							</div>
+						</td>
+						<td class=${natureClass}>${(a.type ?? '').toLowerCase()}</td>
+						<td class="num">${formatNumber(a.orb, 2)}</td>
+						<td>${a.isApplying ? 'Applying' : 'Separating'}</td>
+						<td class="num">${formatNumber(a.strength, 1)}</td>
+						<td class="interp" title=${summary}>${truncated}</td>
+					</tr>`;
+				})}
+			</tbody>
+		</table>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-transits-table': RoxyTransitsTable;
+	}
+}