@roxyapi/ui 0.6.1 → 0.8.0

package/src/components/forecast-timeline.ts

@@ -0,0 +1,336 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ASPECT_SYMBOL } from '../tokens/index.js';
+import type { GenerateTimelineResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { ASPECT_CLASS, formatDate, formatNumber } from '../utils/format.js';
+import { MarkupDataController } from '../utils/markup-data.js';
+import { capitalize, humanize } from '../utils/string.js';
+
+type ForecastEvent = GenerateTimelineResponse['events'][number];
+type ForecastDomain = ForecastEvent['domain'];
+
+/**
+ * Display label per forecast domain. Keyed by the spec `domain` union so a new
+ * domain in the spec surfaces as a typecheck failure here rather than an
+ * unlabeled swatch.
+ */
+const DOMAIN_LABEL: Record<ForecastDomain, string> = {
+	western: 'Western',
+	vedic: 'Vedic',
+	biorhythm: 'Biorhythm',
+};
+
+const DOMAIN_ORDER: readonly ForecastDomain[] = [
+	'western',
+	'vedic',
+	'biorhythm',
+];
+
+/**
+ * Cross-domain forecast timeline. Pass `data` from /forecast/timeline. Events
+ * are grouped by calendar date down a vertical axis, each colored by its domain
+ * and weighted by significance (0-100), showing the event type, body, target,
+ * aspect, and description. The visual language matches the dasha timeline: a
+ * left rail of dates, a significance bar per event, and a colored marker for
+ * the domain.
+ *
+ * Theming flows through `--roxy-*` custom properties on `:host`.
+ */
+@customElement('roxy-forecast-timeline')
+export class RoxyForecastTimeline 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;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.range {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-variant-numeric: tabular-nums;
+			}
+			.legend {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.legend .swatch {
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				border-radius: 50%;
+				margin-right: 4px;
+				vertical-align: middle;
+			}
+			.swatch-western {
+				background: var(--roxy-accent, #f59e0b);
+			}
+			.swatch-vedic {
+				background: var(--roxy-info, #2563eb);
+			}
+			.swatch-biorhythm {
+				background: var(--roxy-success, #16a34a);
+			}
+
+			.day {
+				display: grid;
+				grid-template-columns: 4.5rem 1fr;
+				gap: var(--roxy-space-md, 1rem);
+				padding-block: var(--roxy-space-sm, 0.5rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.day:first-of-type {
+				border-top: none;
+			}
+			.day-date {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+				padding-top: 2px;
+			}
+			.events {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.event {
+				display: grid;
+				grid-template-columns: 0.6rem 1fr;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: start;
+			}
+			.dot {
+				width: 0.6rem;
+				height: 0.6rem;
+				border-radius: 50%;
+				margin-top: 4px;
+			}
+			.dot-western {
+				background: var(--roxy-accent, #f59e0b);
+			}
+			.dot-vedic {
+				background: var(--roxy-info, #2563eb);
+			}
+			.dot-biorhythm {
+				background: var(--roxy-success, #16a34a);
+			}
+			.event-body {
+				min-width: 0;
+			}
+			.event-line {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.event-line .aspect-trine,
+			.event-line .aspect-sextile {
+				color: var(--roxy-success-fg, #166534);
+			}
+			.event-line .aspect-square,
+			.event-line .aspect-opposition {
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+			.event-line .aspect-conjunction {
+				color: var(--roxy-accent-ink, #b45309);
+			}
+			.event-line .kind {
+				margin-left: 0.35em;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+			}
+			.event-desc {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin: 2px 0 0;
+			}
+			.sig {
+				display: flex;
+				align-items: center;
+				gap: 0.4rem;
+				margin-top: 4px;
+			}
+			.sig-track {
+				flex: 1;
+				max-width: 8rem;
+				height: 4px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+			}
+			.sig-fill {
+				display: block;
+				height: 100%;
+				border-radius: var(--roxy-radius-full, 9999px);
+			}
+			.sig-fill-western {
+				background: var(--roxy-accent, #f59e0b);
+			}
+			.sig-fill-vedic {
+				background: var(--roxy-info, #2563eb);
+			}
+			.sig-fill-biorhythm {
+				background: var(--roxy-success, #16a34a);
+			}
+			.sig-val {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+			}
+		`,
+	];
+
+	constructor() {
+		super();
+		// Enables hydrating `data` from a direct-child
+		// <script type="application/json" class="roxy-data"> for server-rendered
+		// and cached consumers. The JavaScript `data` property still wins.
+		new MarkupDataController(this);
+	}
+
+	@property({ attribute: false })
+	data: GenerateTimelineResponse | null = null;
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No forecast data</div>`;
+
+		const events = d.events ?? [];
+		const grouped = this.groupByDate(events);
+		const present = DOMAIN_ORDER.filter((dom) =>
+			events.some((e) => e.domain === dom),
+		);
+
+		return html`<div class="wrap" aria-label="Forecast timeline">
+			<header class="head">
+				<h2 class="title">Forecast timeline</h2>
+				${
+					d.startDate && d.endDate
+						? html`<div class="range">
+							${formatDate(d.startDate)} - ${formatDate(d.endDate)} · ${d.count ?? events.length} events
+						</div>`
+						: nothing
+				}
+			</header>
+			${
+				present.length
+					? html`<div class="legend">
+						${present.map(
+							(dom) =>
+								html`<span><span class="swatch swatch-${dom}"></span>${DOMAIN_LABEL[dom]}</span>`,
+						)}
+					</div>`
+					: nothing
+			}
+			${
+				grouped.length
+					? html`<div class="days" role="list">
+						${grouped.map(([date, dayEvents]) => this.renderDay(date, dayEvents))}
+					</div>`
+					: html`<p class="roxy-empty" role="status">No events in this window</p>`
+			}
+		</div>`;
+	}
+
+	/** Group events by their calendar date, preserving response order. */
+	private groupByDate(
+		events: ForecastEvent[],
+	): Array<[string, ForecastEvent[]]> {
+		const map = new Map<string, ForecastEvent[]>();
+		for (const e of events) {
+			const key = e.date ?? '';
+			const list = map.get(key) ?? [];
+			list.push(e);
+			map.set(key, list);
+		}
+		return [...map.entries()];
+	}
+
+	private renderDay(date: string, events: ForecastEvent[]) {
+		return html`<div class="day" role="listitem">
+			<div class="day-date">${formatDate(date)}</div>
+			<div class="events">
+				${events.map((e) => this.renderEvent(e))}
+			</div>
+		</div>`;
+	}
+
+	private renderEvent(e: ForecastEvent) {
+		const sig = typeof e.significance === 'number' ? e.significance : 0;
+		const width = Math.max(0, Math.min(100, sig));
+		return html`<div class="event">
+			<span class="dot dot-${e.domain}" aria-hidden="true"></span>
+			<div class="event-body">
+				<div class="event-line">${this.renderHeadline(e)}</div>
+				${e.description ? html`<p class="event-desc">${e.description}</p>` : nothing}
+				<div class="sig" title="Significance ${width} of 100">
+					<span class="sig-track">
+						<span class="sig-fill sig-fill-${e.domain}" style="width: ${width}%"></span>
+					</span>
+					<span class="sig-val">${width}</span>
+				</div>
+			</div>
+		</div>`;
+	}
+
+	/**
+	 * Compact event headline built from the spec fields. Transit aspects read
+	 * "body aspect target"; ingresses, stations, eclipses, dasha changes, and
+	 * critical days fall back to "body" plus the qualifier the spec carries for
+	 * that type (station direction, eclipse kind). The aspect symbol is colored
+	 * by nature, matching the chart aspect encoding.
+	 */
+	private renderHeadline(e: ForecastEvent) {
+		const body = e.body ? capitalize(e.body) : '';
+		const target = e.target ? capitalize(e.target) : '';
+		const aspect = e.aspect ? e.aspect.toLowerCase() : '';
+		const aspectClass = ASPECT_CLASS[aspect] ?? '';
+		const aspectSym = aspect ? (ASPECT_SYMBOL[aspect] ?? aspect) : '';
+		const orb = typeof e.orb === 'number' ? formatNumber(e.orb, 1) : '';
+		const qualifier = this.typeQualifier(e);
+
+		if (aspect && target) {
+			return html`<strong>${body}</strong>
+				<span class=${aspectClass}>${aspectSym}</span>
+				<strong>${target}</strong>${orb ? html` <span class="kind">orb ${orb}°</span>` : nothing}`;
+		}
+		return html`<strong>${body || humanize(e.type ?? '')}</strong>${
+			qualifier ? html` <span class="kind">${qualifier}</span>` : nothing
+		}`;
+	}
+
+	/** Type-specific qualifier text from the optional spec fields. */
+	private typeQualifier(e: ForecastEvent): string {
+		if (e.type === 'sign-ingress' && e.target)
+			return `enters ${capitalize(e.target)}`;
+		if (e.type === 'retrograde-station' && e.station) return e.station;
+		if (e.type === 'eclipse')
+			return [e.kind, 'eclipse'].filter(Boolean).join(' ');
+		if (e.type === 'critical-day') return 'critical day';
+		if (e.type === 'dasha-change' && e.target)
+			return `dasha ${capitalize(e.target)}`;
+		return humanize(e.type ?? '');
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-forecast-timeline': RoxyForecastTimeline;
+	}
+}

package/src/components/guna-milan.ts

@@ -51,7 +51,7 @@ export class RoxyGunaMilan extends LitElement {
 			.total {
 				font-size: 2.25rem;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 				line-height: 1;
 			}

package/src/components/hexagram.ts

@@ -53,7 +53,7 @@ export class RoxyHexagram extends LitElement {
 			.symbol {
 				font-size: 3rem;
 				line-height: 1;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			.lines {
 				display: grid;
@@ -105,7 +105,7 @@ export class RoxyHexagram extends LitElement {
 			}
 			.tri-glyph {
 				font-size: var(--roxy-text-xl, 1.5rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				margin-right: 4px;
 				vertical-align: middle;
 			}
@@ -131,7 +131,7 @@ export class RoxyHexagram extends LitElement {
 				margin-top: var(--roxy-space-md, 1rem);
 				padding-top: var(--roxy-space-md, 1rem);
 				border-top: 1px solid var(--roxy-border, #e4e4e7);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
 		`,

package/src/components/horoscope-card.ts

@@ -42,7 +42,7 @@ export class RoxyHoroscopeCard extends LitElement {
 
 			.glyph {
 				font-size: 2.25rem;
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				line-height: 1;
 			}
 

package/src/components/kp-chart.ts

@@ -76,7 +76,7 @@ export class RoxyKpChart extends LitElement {
 				font-family: inherit;
 			}
 			.tab[aria-selected='true'] {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				border-bottom-color: var(--roxy-accent, #f59e0b);
 				font-weight: var(--roxy-weight-bold, 600);
 			}

package/src/components/kp-ruling-planets.ts

@@ -91,7 +91,7 @@ export class RoxyKpRulingPlanets extends LitElement {
 			}
 			.rp .rank {
 				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			table {
 				width: 100%;

package/src/components/location-search.ts

@@ -50,7 +50,7 @@ export class RoxyLocationSearch extends LitElement {
 			input:focus {
 				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 				outline-offset: 2px;
-				border-color: var(--roxy-accent-fg, #b45309);
+				border-color: var(--roxy-accent-ink, #b45309);
 			}
 			.spinner {
 				position: absolute;

package/src/components/nakshatra-card.ts

@@ -35,7 +35,7 @@ export class RoxyNakshatraCard extends LitElement {
 				font-weight: var(--roxy-weight-bold, 600);
 			}
 			.number {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-sm, 0.875rem);
 				font-weight: var(--roxy-weight-bold, 600);
 			}

package/src/components/natal-chart.ts

@@ -159,7 +159,7 @@ export class RoxyNatalChart extends LitElement {
 				stroke: var(--roxy-danger, #dc2626);
 			}
 			.aspect-conjunction {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 			}
 			.aspect-other {
 				stroke: var(--roxy-muted, #71717a);
@@ -167,14 +167,14 @@ export class RoxyNatalChart extends LitElement {
 			}
 
 			.angle-marker {
-				fill: var(--roxy-accent-fg, #b45309);
+				fill: var(--roxy-accent-ink, #b45309);
 				font-size: 10px;
 				font-weight: 700;
 				font-family: var(--roxy-font-sans);
 				letter-spacing: 0.04em;
 			}
 			.angle-tick {
-				stroke: var(--roxy-accent-fg, #b45309);
+				stroke: var(--roxy-accent-ink, #b45309);
 				stroke-width: 1.5;
 			}
 
@@ -234,7 +234,7 @@ export class RoxyNatalChart extends LitElement {
 				color: var(--roxy-danger, #dc2626);
 			}
 			table.aspect-grid td.aspect-conjunction .asp {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 			}
 			table.aspect-grid td.aspect-other .asp {
 				color: var(--roxy-muted, #71717a);
@@ -363,7 +363,7 @@ export class RoxyNatalChart extends LitElement {
 				padding: 1px 8px;
 				border-radius: 9999px;
 				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-size: var(--roxy-text-xs, 0.75rem);
 			}
 		`,

package/src/components/numerology-card.ts

@@ -44,7 +44,7 @@ export class RoxyNumerologyCard extends LitElement {
 				font-size: 4rem;
 				line-height: 1;
 				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 			}
 			.label {
@@ -106,7 +106,7 @@ export class RoxyNumerologyCard extends LitElement {
 				text-transform: capitalize;
 			}
 			.cores .item strong {
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-variant-numeric: tabular-nums;
 				font-size: var(--roxy-text-base, 1rem);
 				font-weight: var(--roxy-weight-bold, 600);

package/src/components/panchang-table.ts

@@ -11,7 +11,18 @@ import { MarkupDataController } from '../utils/markup-data.js';
 type PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;
 type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
 
-/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */
+/**
+ * Panchang table for /vedic-astrology/panchang/{basic,detailed}.
+ *
+ * @remarks
+ * The main grid lists the five limbs (tithi, nakshatra, yoga, karana, vara),
+ * sun and moon timings, and, in detailed mode, the sunrise placements a reader
+ * scans first: Moon rashi, Sun rashi, Sun nakshatra, and the current hora. The
+ * detailed mode then groups every timed window into two sections, auspicious
+ * (the fixed muhurtas plus each Amrit Kalam) and inauspicious (Rahu Kaal,
+ * Yamaganda, Gulika, plus each Dur Muhurta and Varjyam), so a consumer can act
+ * on timing without parsing the raw response.
+ */
 @customElement('roxy-panchang-table')
 export class RoxyPanchangTable extends LitElement {
 	static styles = [
@@ -105,6 +116,15 @@ export class RoxyPanchangTable extends LitElement {
 		];
 		if (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);
 
+		const placements: Array<[string, string]> = detailed
+			? [
+					['Moon sign', this.formatRashi(detailed.moonSign)],
+					['Sun sign', this.formatRashi(detailed.sunSign)],
+					['Sun nakshatra', this.formatSunNakshatra(detailed.sunNakshatra)],
+					['Hora', this.formatHora(detailed.hora)],
+				].filter((row): row is [string, string] => Boolean(row[1]))
+			: [];
+
 		const muhurtas: Array<[string, PanchangTime | undefined]> = detailed
 			? [
 					['Brahma Muhurta', detailed.brahmaMuhurta],
@@ -117,6 +137,10 @@ export class RoxyPanchangTable extends LitElement {
 				]
 			: [];
 
+		const auspiciousWindows: Array<[string, PanchangTime]> = detailed
+			? this.expandWindows('Amrit Kalam', detailed.amritKalam)
+			: [];
+
 		const inauspicious: Array<[string, PanchangTime | undefined]> = detailed
 			? [
 					['Rahu Kaal', detailed.rahuKaal],
@@ -125,6 +149,13 @@ export class RoxyPanchangTable extends LitElement {
 				]
 			: [];
 
+		const inauspiciousWindows: Array<[string, PanchangTime]> = detailed
+			? [
+					...this.expandWindows('Dur Muhurta', detailed.durMuhurta),
+					...this.expandWindows('Varjyam', detailed.varjyam),
+				]
+			: [];
+
 		const transitions =
 			detailed && 'transitions' in detailed ? detailed.transitions : undefined;
 
@@ -173,6 +204,12 @@ export class RoxyPanchangTable extends LitElement {
 							</tr>`
 							: nothing
 					}
+					${placements.map(
+						([k, v]) => html`<tr>
+							<th>${k}</th>
+							<td>${v}</td>
+						</tr>`,
+					)}
 				</tbody>
 			</table>
 			${
@@ -192,32 +229,33 @@ export class RoxyPanchangTable extends LitElement {
 			}
 			${
 				this.detail === 'detailed' &&
-				(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))
+				(
+					muhurtas.some((m) => !!m[1]) ||
+						auspiciousWindows.length > 0 ||
+						inauspicious.some((m) => !!m[1]) ||
+						inauspiciousWindows.length > 0
+				)
 					? html`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
-								${muhurtas
-									.filter(([, v]) => !!v)
-									.map(
-										([k, v]) => html`<tr>
-											<th>${k}</th>
-											<td>${formatTimeRange(v)}</td>
-										</tr>`,
-									)}
+								${this.renderPeriodRows([
+									...muhurtas.filter(
+										(m): m is [string, PanchangTime] => !!m[1],
+									),
+									...auspiciousWindows,
+								])}
 							</tbody>
 						</table>
 						<div class="section">Inauspicious periods</div>
 						<table>
 							<tbody>
-								${inauspicious
-									.filter(([, v]) => !!v)
-									.map(
-										([k, v]) => html`<tr>
-											<th>${k}</th>
-											<td>${formatTimeRange(v)}</td>
-										</tr>`,
-									)}
+								${this.renderPeriodRows([
+									...inauspicious.filter(
+										(m): m is [string, PanchangTime] => !!m[1],
+									),
+									...inauspiciousWindows,
+								])}
 							</tbody>
 						</table>
 					`
@@ -226,6 +264,31 @@ export class RoxyPanchangTable extends LitElement {
 		</div>`;
 	}
 
+	/** Renders one row per [label, period] pair, dropping any with no range. */
+	private renderPeriodRows(rows: Array<[string, PanchangTime]>) {
+		return rows.map(([k, v]) => {
+			const range = formatTimeRange(v);
+			return range
+				? html`<tr>
+						<th>${k}</th>
+						<td>${range}</td>
+					</tr>`
+				: nothing;
+		});
+	}
+
+	/** Expands an array of periods into labeled rows, numbering when more than one. */
+	private expandWindows(
+		label: string,
+		windows: PanchangTime[] | undefined,
+	): Array<[string, PanchangTime]> {
+		if (!windows || windows.length === 0) return [];
+		return windows.map((w, i) => [
+			windows.length > 1 ? `${label} ${i + 1}` : label,
+			w,
+		]);
+	}
+
 	private renderTransitionRow(
 		label: string,
 		t: { endsAt?: string; next?: string } | undefined,
@@ -260,8 +323,39 @@ export class RoxyPanchangTable extends LitElement {
 		}
 		return String(v);
 	}
+
+	/** "English (Sanskrit)" label for the Moon or Sun rashi at sunrise. */
+	private formatRashi(r: RashiPlacement | undefined): string {
+		if (!r?.name) return '';
+		return r.sanskritName && r.sanskritName !== r.name
+			? `${r.name} (${r.sanskritName})`
+			: r.name;
+	}
+
+	/** Sun nakshatra with pada and lord, the form a panchang reader expects. */
+	private formatSunNakshatra(n: SunNakshatra | undefined): string {
+		if (!n?.name) return '';
+		const parts = [
+			n.name,
+			typeof n.pada === 'number' ? `pada ${n.pada}` : '',
+			n.lord ? `· ${n.lord}` : '',
+		].filter(Boolean);
+		return parts.join(' ');
+	}
+
+	/** Current planetary hora with its active window. */
+	private formatHora(h: Hora | undefined): string {
+		if (!h?.current) return '';
+		const range = formatTimeRange(h);
+		return range ? `${h.current} (${range})` : h.current;
+	}
 }
 
+type PanchangPlacements = GetDetailedPanchangResponse;
+type RashiPlacement = PanchangPlacements['moonSign'];
+type SunNakshatra = PanchangPlacements['sunNakshatra'];
+type Hora = PanchangPlacements['hora'];
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-panchang-table': RoxyPanchangTable;

package/src/components/shadbala-table.ts

@@ -149,7 +149,7 @@ export class RoxyShadbalaTable extends LitElement {
 
 			.rank-badge {
 				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-accent-fg, #b45309);
+				color: var(--roxy-accent-ink, #b45309);
 				font-weight: var(--roxy-weight-bold, 600);
 			}