@roxyapi/ui 0.1.2 → 0.2.0

package/src/components/tarot-spread.ts

@@ -1,32 +1,22 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type {
+	CastCelticCrossResponse,
+	CastLoveSpreadResponse,
+	CastReadingResponse,
+	CastThreeCardResponse,
+	CastYesNoResponse,
+	DrawCardsResponse,
+} from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 
-interface TarotPosition {
-	number?: number;
-	label?: string;
-	name?: string;
-	position?: string;
-	card?: {
-		name?: string;
-		imageUrl?: string;
-		reversed?: boolean;
-		keywords?: string[];
-		arcana?: string;
-	};
-	interpretation?: string;
-}
-
-interface TarotSpreadData {
-	spread?: string;
-	positions?: TarotPosition[];
-	cards?: TarotPosition[];
-	reading?: string;
-	question?: string;
-	answer?: 'Yes' | 'No' | 'Maybe' | string;
-	strength?: string;
-	interpretation?: string;
-}
+type TarotSpreadData =
+	| CastThreeCardResponse
+	| CastCelticCrossResponse
+	| CastLoveSpreadResponse
+	| CastYesNoResponse
+	| CastReadingResponse
+	| DrawCardsResponse;
 
 /**
  * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
@@ -72,15 +62,15 @@ export class RoxyTarotSpread extends LitElement {
 			}
 			.answer.yes {
 				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
-				color: var(--roxy-success, #16a34a);
+				color: var(--roxy-success-fg, #166534);
 			}
 			.answer.no {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
-				color: var(--roxy-danger, #dc2626);
+				color: var(--roxy-danger-fg, #991b1b);
 			}
 			.answer.maybe {
 				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);
-				color: var(--roxy-warning, #ea580c);
+				color: var(--roxy-warning-fg, #9a3412);
 			}
 
 			.grid {
@@ -157,22 +147,41 @@ export class RoxyTarotSpread extends LitElement {
 		if (!d)
 			return html`<div class="roxy-empty" role="status">No tarot spread</div>`;
 
-		const positions = d.positions ?? d.cards ?? [];
-		const isYesNo = !!d.answer;
-		const answerClass = isYesNo
-			? (d.answer ?? '').toLowerCase().replace(/[^a-z]/g, '')
+		const isYesNo = 'answer' in d;
+		const isDrawn = 'cards' in d && !('spread' in d);
+		const positions = isDrawn
+			? []
+			: 'positions' in d
+				? (d.positions ?? [])
+				: [];
+		const cards = isDrawn && 'cards' in d ? (d as DrawCardsResponse).cards : [];
+		const answer = isYesNo ? (d as CastYesNoResponse).answer : undefined;
+		const strength = isYesNo ? (d as CastYesNoResponse).strength : undefined;
+		const spreadLabel =
+			'spread' in d
+				? (d as CastThreeCardResponse).spread
+				: this.spread.replace(/-/g, ' ');
+		const question =
+			'question' in d ? (d as CastThreeCardResponse).question : undefined;
+		const summary =
+			'summary' in d ? (d as CastThreeCardResponse).summary : undefined;
+		const yesNoInterp = isYesNo
+			? (d as CastYesNoResponse).interpretation
+			: undefined;
+		const answerClass = answer
+			? answer.toLowerCase().replace(/[^a-z]/g, '')
 			: '';
 
 		return html`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
-				<h2 class="title">${d.spread ?? this.spread.replace(/-/g, ' ')}</h2>
-				${d.question ? html`<span class="question">"${d.question}"</span>` : nothing}
+				<h2 class="title">${spreadLabel}</h2>
+				${question ? html`<span class="question">"${question}"</span>` : nothing}
 			</header>
 			${
 				isYesNo
 					? html`<div>
-						<span class=${`answer ${answerClass}`}>${d.answer}</span>
-						${d.strength ? html`<small> · ${d.strength}</small>` : nothing}
+						<span class=${`answer ${answerClass}`}>${answer}</span>
+						${strength ? html`<small> · ${strength}</small>` : nothing}
 					</div>`
 					: nothing
 			}
@@ -181,7 +190,7 @@ export class RoxyTarotSpread extends LitElement {
 					? html`<div class="grid">
 						${positions.map(
 							(p) => html`<div class="card">
-								<p class="label">${p.label ?? p.name ?? p.position ?? ''}</p>
+								<p class="label">${p.name ?? ''}</p>
 								<div class="image">
 									${
 										p.card?.imageUrl
@@ -197,22 +206,40 @@ export class RoxyTarotSpread extends LitElement {
 									${p.card?.name ?? ''}
 									${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}
 								</p>
-								${
-									p.interpretation
-										? html`<p class="interp">${p.interpretation}</p>`
-										: nothing
-								}
+								${p.interpretation ? html`<p class="interp">${p.interpretation}</p>` : nothing}
 							</div>`,
 						)}
 					</div>`
 					: nothing
 			}
-			${d.reading ? html`<p class="reading">${d.reading}</p>` : nothing}
 			${
-				d.interpretation && !d.reading
-					? html`<p class="reading">${d.interpretation}</p>`
+				cards.length > 0
+					? html`<div class="grid">
+						${cards.map(
+							(c) => html`<div class="card">
+								<div class="image">
+									${
+										c.imageUrl
+											? html`<img
+												src=${c.imageUrl}
+												alt=${c.name ?? 'tarot card'}
+												class=${c.reversed ? 'reversed' : ''}
+											/>`
+											: html`${c.name ?? '?'}`
+									}
+								</div>
+								<p class="name">
+									${c.name ?? ''}
+									${c.reversed ? html`<small>(reversed)</small>` : nothing}
+								</p>
+								${c.meaning ? html`<p class="interp">${c.meaning}</p>` : nothing}
+							</div>`,
+						)}
+					</div>`
 					: nothing
 			}
+			${summary ? html`<p class="reading">${summary}</p>` : nothing}
+			${yesNoInterp ? html`<p class="reading">${yesNoInterp}</p>` : nothing}
 		</article>`;
 	}
 }

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