@roxyapi/ui 0.6.0 → 0.7.0

package/src/components/vedic-planets-table.ts

@@ -4,6 +4,8 @@ import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
 import type { BirthChartResponse } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatSignPosition } from '../utils/degree.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
+import { formatNumber } from '../utils/format.js';
 import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
@@ -31,18 +33,28 @@ type MetaEntry = BirthChartResponse['meta'][string];
  * as the full reference-grade positions grid a practitioner reads alongside
  * the kundli wheel: graha, rashi, exact degree, nakshatra and pada, nakshatra
  * lord, bhava (house), Baladi avastha, and retrograde.
+ *
+ * @remarks
+ * The positions grid is the default view. The same birth-chart response also
+ * carries chart-wide conditions and readings, surfaced as collapsed accordions
+ * below the grid so they never crowd the table: combust grahas (astangata),
+ * planetary wars (graha yuddha), per-graha rashi and nakshatra interpretations,
+ * the active classical yogas (present === true), and the twelve bhava
+ * significations. Each accordion renders only when its source array or map is
+ * non-empty.
  */
 @customElement('roxy-vedic-planets-table')
 export class RoxyVedicPlanetsTable extends LitElement {
 	static styles = [
 		baseStyles,
+		disclosureStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				background: var(--roxy-bg, #fff);
-				overflow: auto;
 				box-shadow: var(--roxy-shadow-sm);
+				overflow: hidden;
 			}
 			.head {
 				padding: var(--roxy-space-md, 1rem);
@@ -53,6 +65,9 @@ export class RoxyVedicPlanetsTable extends LitElement {
 				font-size: var(--roxy-text-lg, 1.125rem);
 				font-weight: var(--roxy-weight-bold, 600);
 			}
+			.scroll {
+				overflow-x: auto;
+			}
 			table {
 				width: 100%;
 				border-collapse: collapse;
@@ -92,7 +107,7 @@ export class RoxyVedicPlanetsTable extends LitElement {
 			/* On the tinted Lagna row the muted glyph drops below the WCAG AA
 			   contrast floor, so use the accent foreground there instead. */
 			tbody tr.lagna .glyph {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			.retro {
 				color: var(--roxy-warning-fg, #9a3412);
@@ -102,6 +117,100 @@ export class RoxyVedicPlanetsTable extends LitElement {
 			.num {
 				font-variant-numeric: tabular-nums;
 			}
+			details.panel {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			details.panel > summary {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				cursor: pointer;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			details.panel > summary:focus-visible {
+				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+				outline-offset: -2px;
+			}
+			.summary-count {
+				margin-left: auto;
+				margin-right: var(--roxy-space-xs, 0.25rem);
+				font-weight: var(--roxy-weight-normal, 400);
+				color: var(--roxy-muted, #71717a);
+				font-variant-numeric: tabular-nums;
+			}
+			.panel-body {
+				padding: 0 var(--roxy-space-md, 1rem) var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.condition {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+				gap: 0.4em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.condition .planet {
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.condition .detail {
+				color: var(--roxy-muted, #71717a);
+				font-variant-numeric: tabular-nums;
+			}
+			.condition .winner {
+				color: var(--roxy-success-fg, #166534);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.interp {
+				display: grid;
+				gap: 0.15em;
+			}
+			.interp .planet {
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.interp p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			.interp .label {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.bhava {
+				display: grid;
+				gap: 0.15em;
+			}
+			.bhava .name {
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.bhava .desc {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+			.quality {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+			}
+			.quality.positive {
+				color: var(--roxy-success-fg, #166534);
+			}
+			.quality.negative {
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+			.quality.both {
+				color: var(--roxy-muted, #71717a);
+			}
 		`,
 	];
 
@@ -139,10 +248,11 @@ export class RoxyVedicPlanetsTable extends LitElement {
 			return html`<div class="roxy-empty" role="status">No chart data</div>`;
 		const rows = this.orderedRows();
 
-		return html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+		return html`<div class="wrap" aria-label="Vedic planetary positions">
 			<header class="head">
 				<h2 class="title">Planetary positions</h2>
 			</header>
+			<div class="scroll" tabindex="0">
 			<table role="table">
 				<thead>
 					<tr>
@@ -182,8 +292,116 @@ export class RoxyVedicPlanetsTable extends LitElement {
 					})}
 				</tbody>
 			</table>
+			</div>
+			${this.renderCombustion()}
+			${this.renderPlanetaryWar()}
+			${this.renderInterpretations()}
+			${this.renderYogas()}
+			${this.renderHouses()}
 		</div>`;
 	}
+
+	private renderCombustion() {
+		const combust = this.data?.combustion ?? [];
+		if (combust.length === 0) return nothing;
+		return html`<details class="panel">
+			<summary>
+				Combust grahas<span class="summary-count">${combust.length}</span>${chevron()}
+			</summary>
+			<div class="panel-body">
+				${combust.map((c) => {
+					const glyph = PLANET_GLYPH[capitalize(c.planet)] ?? '';
+					const dist = formatNumber(c.distanceFromSun, 2);
+					const orb = formatNumber(c.orb, 1);
+					return html`<div class="condition">
+						<span class="planet">${glyph ? `${glyph} ` : ''}${c.planet}</span>
+						<span class="detail">${dist} deg from Sun, within ${orb} deg orb</span>
+					</div>`;
+				})}
+			</div>
+		</details>`;
+	}
+
+	private renderPlanetaryWar() {
+		const wars = this.data?.planetaryWar ?? [];
+		if (wars.length === 0) return nothing;
+		return html`<details class="panel">
+			<summary>
+				Planetary wars<span class="summary-count">${wars.length}</span>${chevron()}
+			</summary>
+			<div class="panel-body">
+				${wars.map((w) => {
+					const dist = formatNumber(w.distance, 2);
+					return html`<div class="condition">
+						<span class="planet">${w.planet1} vs ${w.planet2}</span>
+						<span class="detail">${dist} deg apart</span>
+						<span class="winner">${w.winner} wins</span>
+					</div>`;
+				})}
+			</div>
+		</details>`;
+	}
+
+	private renderInterpretations() {
+		const interp = this.data?.interpretations ?? {};
+		const entries = this.orderedRows()
+			.map(([name, p]) => [p.graha ?? name, interp[p.graha ?? name]] as const)
+			.filter(([, v]) => v != null);
+		if (entries.length === 0) return nothing;
+		return html`<details class="panel">
+			<summary>
+				Interpretations<span class="summary-count">${entries.length}</span>${chevron()}
+			</summary>
+			<div class="panel-body">
+				${entries.map(([name, v]) => {
+					const glyph = PLANET_GLYPH[capitalize(name)] ?? '';
+					return html`<div class="interp">
+						<span class="planet">${glyph ? `${glyph} ` : ''}${name}</span>
+						${v.rashi ? html`<p><span class="label">Rashi.</span> ${v.rashi}</p>` : nothing}
+						${v.nakshatra ? html`<p><span class="label">Nakshatra.</span> ${v.nakshatra}</p>` : nothing}
+					</div>`;
+				})}
+			</div>
+		</details>`;
+	}
+
+	private renderHouses() {
+		const houses = (this.data?.houses ?? []).filter(
+			(h) => h.name || h.description,
+		);
+		if (houses.length === 0) return nothing;
+		return html`<details class="panel">
+			<summary>
+				Bhava significations<span class="summary-count">${houses.length}</span>${chevron()}
+			</summary>
+			<div class="panel-body">
+				${houses.map(
+					(h) => html`<div class="bhava">
+						<span class="name">${h.number}. ${h.name ?? ''}</span>
+						${h.description ? html`<p class="desc">${h.description}</p>` : nothing}
+					</div>`,
+				)}
+			</div>
+		</details>`;
+	}
+
+	private renderYogas() {
+		const yogas = (this.data?.yogas ?? []).filter((y) => y.present);
+		if (yogas.length === 0) return nothing;
+		return html`<details class="panel">
+			<summary>
+				Yogas<span class="summary-count">${yogas.length}</span>${chevron()}
+			</summary>
+			<div class="panel-body">
+				${yogas.map(
+					(y) => html`<div class="bhava">
+						<span class="name">${y.name} ${y.quality ? html`<span class="quality ${y.quality.toLowerCase()}">${y.quality}</span>` : nothing}</span>
+						${y.result ? html`<p class="desc">${y.result}</p>` : nothing}
+					</div>`,
+				)}
+			</div>
+		</details>`;
+	}
 }
 
 declare global {

package/src/components/yoga-list.ts

@@ -138,7 +138,7 @@ export class RoxyYogaList extends LitElement {
 			}
 			details summary {
 				cursor: pointer;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-weight: 500;
 				padding: 0.25em 0;
 				list-style: none;

package/src/styles/tokens.css

@@ -23,7 +23,7 @@
 	 * WCAG AA for body text. amber-700 hits 4.5:1, used wherever the accent
 	 * tone is applied to text. Fills (planet glyphs, chart accents, badges
 	 * with non-text use) keep --roxy-accent. */
-	--roxy-accent-fg: #b45309;
+	--roxy-accent-ink: #b45309;
 
 	/* Color: status. The base value (success, warning, danger, info) is for
 	 * fills and tints. The -fg variant is darker so text on a light tint passes
@@ -105,7 +105,7 @@
 		--roxy-primary: #f8fafc;
 		--roxy-secondary: #94a3b8;
 		--roxy-accent: #fbbf24;
-		--roxy-accent-fg: #fbbf24;
+		--roxy-accent-ink: #fbbf24;
 
 		/* Status -fg overrides must mirror the explicit [data-theme="dark"] block
 		 * below. Without these, a user on system dark with no data-theme attribute
@@ -144,7 +144,7 @@
 	--roxy-primary: #0f172a;
 	--roxy-secondary: #475569;
 	--roxy-accent: #f59e0b;
-	--roxy-accent-fg: #b45309;
+	--roxy-accent-ink: #b45309;
 
 	--roxy-success: #16a34a;
 	--roxy-success-fg: #166534;
@@ -174,7 +174,7 @@
 	--roxy-primary: #f8fafc;
 	--roxy-secondary: #94a3b8;
 	--roxy-accent: #fbbf24;
-	--roxy-accent-fg: #fbbf24;
+	--roxy-accent-ink: #fbbf24;
 
 	--roxy-success: #22c55e;
 	--roxy-success-fg: #86efac;