@roxyapi/ui 0.0.1 → 0.1.1

package/src/components/hexagram.ts

@@ -0,0 +1,279 @@
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TRIGRAM_GLYPH } from '../tokens/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface HexagramData {
+	number?: number;
+	symbol?: string;
+	chinese?: string;
+	english?: string;
+	pinyin?: string;
+	upperTrigram?: string;
+	lowerTrigram?: string;
+	judgment?: string;
+	image?: string;
+	interpretation?: {
+		general?: string;
+		love?: string;
+		career?: string;
+		decision?: string;
+		advice?: string;
+	};
+	changingLines?: number[];
+	resultingHexagram?: HexagramData;
+	dailyMessage?: string;
+	hexagram?: HexagramData;
+	lines?: number[]; // 6, 7, 8, 9 cast values
+	changingLinePositions?: number[];
+	seed?: string;
+	date?: string;
+}
+
+/**
+ * I Ching hexagram card. Renders /iching/hexagrams/{number}, /iching/cast,
+ * /iching/daily, /iching/daily/cast.
+ */
+@customElement('roxy-hexagram')
+export class RoxyHexagram 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;
+				grid-template-columns: 6rem 1fr;
+				gap: var(--roxy-space-lg, 1.5rem);
+			}
+
+			@container (max-width: 480px) {
+				.card {
+					grid-template-columns: 1fr;
+				}
+			}
+
+			.glyphs {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				justify-items: center;
+			}
+			.symbol {
+				font-size: 3rem;
+				line-height: 1;
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.lines {
+				display: grid;
+				gap: 4px;
+				width: 4rem;
+			}
+			.line {
+				display: flex;
+				gap: 4px;
+				justify-content: center;
+				align-items: center;
+				height: 8px;
+			}
+			.seg {
+				display: block;
+				height: 6px;
+				background: var(--roxy-fg, #0a0a0a);
+				border-radius: 1px;
+			}
+			.line.broken .seg {
+				width: 1.4rem;
+			}
+			.line.solid .seg {
+				width: 3rem;
+			}
+			.line.changing .seg {
+				background: var(--roxy-accent, #f59e0b);
+			}
+
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-xl, 1.5rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				letter-spacing: var(--roxy-tracking-tight);
+			}
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+			}
+			.trigrams {
+				display: flex;
+				gap: var(--roxy-space-md, 1rem);
+				margin-bottom: var(--roxy-space-sm, 0.5rem);
+				color: var(--roxy-secondary, #475569);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.tri-glyph {
+				font-size: var(--roxy-text-xl, 1.5rem);
+				color: var(--roxy-accent-fg, #b45309);
+				margin-right: 4px;
+				vertical-align: middle;
+			}
+			.judgment,
+			.image,
+			.message {
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.judgment::before {
+				content: 'Judgment. ';
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-secondary, #475569);
+			}
+			.image::before {
+				content: 'Image. ';
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-secondary, #475569);
+			}
+
+			.changing {
+				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);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: HexagramData | null = null;
+
+	@property({ type: String, reflect: true })
+	mode: 'lookup' | 'cast' | 'daily' = 'lookup';
+
+	private getHexagram(): HexagramData | null {
+		if (!this.data) return null;
+		if ('hexagram' in this.data && this.data.hexagram) {
+			return {
+				...this.data.hexagram,
+				lines: this.data.lines,
+				changingLinePositions: this.data.changingLinePositions,
+			};
+		}
+		return this.data;
+	}
+
+	render() {
+		const h = this.getHexagram();
+		if (!h)
+			return html`<div class="roxy-empty" role="status">No hexagram data</div>`;
+
+		const lines = h.lines ?? this.derivedLines(h);
+		const changing = new Set(h.changingLinePositions ?? []);
+
+		return html`<article class="card" aria-label="I Ching hexagram">
+			<div class="glyphs">
+				${h.symbol ? html`<div class="symbol">${h.symbol}</div>` : nothing}
+				<div class="lines" aria-hidden="true">
+					${lines
+						.slice()
+						.reverse()
+						.map((l, idx) => {
+							// reverse so visual top is line 6
+							const realIdx = lines.length - 1 - idx + 1;
+							const isChanging = changing.has(realIdx);
+							const broken = l === 6 || l === 8;
+							const cls = `${broken ? 'broken' : 'solid'}${isChanging ? ' changing' : ''}`;
+							return html`<div class="line ${cls}">
+								${
+									broken
+										? svg`<span class="seg"></span><span class="seg"></span>`
+										: svg`<span class="seg"></span>`
+								}
+							</div>`;
+						})}
+				</div>
+			</div>
+			<div>
+				<h2 class="title">
+					${h.number ? html`${h.number}. ` : nothing}${h.english ?? h.chinese ?? 'Hexagram'}
+				</h2>
+				<p class="subtitle">
+					${h.chinese ? html`${h.chinese}` : nothing}
+					${h.pinyin ? html` · ${h.pinyin}` : nothing}
+				</p>
+				<div class="trigrams">
+					${
+						h.upperTrigram
+							? html`<div>
+								Upper
+								<span class="tri-glyph"
+									>${TRIGRAM_GLYPH[h.upperTrigram] ?? ''}</span
+								>${h.upperTrigram}
+							</div>`
+							: nothing
+					}
+					${
+						h.lowerTrigram
+							? html`<div>
+								Lower
+								<span class="tri-glyph"
+									>${TRIGRAM_GLYPH[h.lowerTrigram] ?? ''}</span
+								>${h.lowerTrigram}
+							</div>`
+							: nothing
+					}
+				</div>
+				${h.judgment ? html`<p class="judgment">${h.judgment}</p>` : nothing}
+				${h.image ? html`<p class="image">${h.image}</p>` : nothing}
+				${h.dailyMessage ? html`<p class="message">${h.dailyMessage}</p>` : nothing}
+				${
+					h.interpretation?.general
+						? html`<p>${h.interpretation.general}</p>`
+						: nothing
+				}
+				${
+					changing.size > 0
+						? html`<div class="changing">
+							Changing lines: ${Array.from(changing)
+								.sort((a, b) => a - b)
+								.join(', ')}.
+							${
+								h.resultingHexagram?.english
+									? html` Becomes hexagram ${h.resultingHexagram.number}
+										${h.resultingHexagram.english}.`
+									: nothing
+							}
+						</div>`
+						: nothing
+				}
+			</div>
+		</article>`;
+	}
+
+	/** When the API only ships symbol+number with no line array, render six solid yang. */
+	private derivedLines(h: HexagramData): number[] {
+		if (!h.symbol) return Array.from({ length: 6 }, () => 7);
+		// Map each character of the unicode hexagram block (U+4DC0..) to broken/solid
+		const cp = h.symbol.codePointAt(0) ?? 0;
+		if (cp >= 0x4dc0 && cp <= 0x4dff) {
+			const offset = cp - 0x4dc0;
+			const lines: number[] = [];
+			for (let i = 0; i < 6; i++) {
+				const broken = (offset >> i) & 1;
+				lines.push(broken ? 8 : 7);
+			}
+			return lines;
+		}
+		return Array.from({ length: 6 }, () => 7);
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-hexagram': RoxyHexagram;
+	}
+}

package/src/components/horoscope-card.ts

@@ -0,0 +1,291 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SIGN_GLYPH } from '../tokens/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface HoroscopeData {
+	sign?: string;
+	date?: string;
+	overview?: string;
+	love?: string;
+	career?: string;
+	health?: string;
+	finance?: string;
+	advice?: string;
+	luckyNumber?: number | string;
+	luckyColor?: string;
+	compatibleSigns?: string[];
+	moonSign?: string;
+	moonPhase?: string;
+	energyRating?: number;
+	week?: string;
+	month?: string;
+	luckyDays?: string[];
+	luckyNumbers?: number[];
+}
+
+/**
+ * Daily, weekly, or monthly horoscope card. Pass `data` from
+ * /astrology/horoscope/{sign}/{daily|weekly|monthly}.
+ */
+@customElement('roxy-horoscope-card')
+export class RoxyHoroscopeCard 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);
+			}
+
+			.head {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.glyph {
+				font-size: 2.25rem;
+				color: var(--roxy-accent-fg, #b45309);
+				line-height: 1;
+			}
+
+			.title {
+				font-size: var(--roxy-text-xl, 1.5rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				letter-spacing: var(--roxy-tracking-tight);
+				text-transform: capitalize;
+			}
+
+			.date {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.energy {
+				margin-left: auto;
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-secondary, #475569);
+			}
+			.energy-bar {
+				display: inline-block;
+				width: 6rem;
+				height: 6px;
+				background: var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-full, 9999px);
+				overflow: hidden;
+				margin-left: 6px;
+				vertical-align: middle;
+			}
+			.energy-bar > span {
+				display: block;
+				height: 100%;
+				background: var(--roxy-accent, #f59e0b);
+				transition:
+					width var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+
+			.overview {
+				font-size: var(--roxy-text-base, 1rem);
+				color: var(--roxy-fg, #0a0a0a);
+				margin: 0;
+			}
+
+			.sections {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.section h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.section p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.lucky {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-secondary, #475569);
+			}
+
+			.lucky strong {
+				color: var(--roxy-fg, #0a0a0a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.compat {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.compat span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 16%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: capitalize;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: HoroscopeData | null = null;
+
+	@property({ type: String, reflect: true })
+	period: 'daily' | 'weekly' | 'monthly' = 'daily';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No horoscope data</div>`;
+
+		const sign = d.sign ?? '';
+		const glyph = sign ? (SIGN_GLYPH[capitalize(sign)] ?? '') : '';
+		const energy = typeof d.energyRating === 'number' ? d.energyRating : null;
+		const dateLabel = d.date ?? d.week ?? d.month ?? '';
+
+		return html`<article
+			class="card"
+			aria-label=${`${this.period} horoscope for ${sign}`}
+		>
+			<header class="head">
+				<span class="glyph" aria-hidden="true">${glyph}</span>
+				<div>
+					<h2 class="title">${sign} ${this.period}</h2>
+					${dateLabel ? html`<div class="date">${dateLabel}</div>` : nothing}
+				</div>
+				${
+					energy !== null
+						? html`<span class="energy" aria-label=${`Energy ${energy} of 10`}>
+							Energy ${energy}/10
+							<span class="energy-bar"
+								><span style="width: ${(energy / 10) * 100}%"></span
+							></span>
+						</span>`
+						: nothing
+				}
+			</header>
+
+			${d.overview ? html`<p class="overview">${d.overview}</p>` : nothing}
+
+			<div class="sections">
+				${
+					d.love
+						? html`<div class="section">
+							<h3>Love</h3>
+							<p>${d.love}</p>
+						</div>`
+						: nothing
+				}
+				${
+					d.career
+						? html`<div class="section">
+							<h3>Career</h3>
+							<p>${d.career}</p>
+						</div>`
+						: nothing
+				}
+				${
+					d.health
+						? html`<div class="section">
+							<h3>Health</h3>
+							<p>${d.health}</p>
+						</div>`
+						: nothing
+				}
+				${
+					d.finance
+						? html`<div class="section">
+							<h3>Finance</h3>
+							<p>${d.finance}</p>
+						</div>`
+						: nothing
+				}
+				${
+					d.advice
+						? html`<div class="section">
+							<h3>Advice</h3>
+							<p>${d.advice}</p>
+						</div>`
+						: nothing
+				}
+			</div>
+
+			${
+				d.luckyNumber || d.luckyColor || (d.compatibleSigns?.length ?? 0) > 0
+					? html`<div class="lucky">
+						${
+							d.luckyNumber !== undefined
+								? html`<span>Lucky number <strong>${d.luckyNumber}</strong></span>`
+								: nothing
+						}
+						${
+							d.luckyColor
+								? html`<span>Lucky color <strong>${d.luckyColor}</strong></span>`
+								: nothing
+						}
+						${
+							d.luckyNumbers?.length
+								? html`<span
+									>Lucky numbers
+									<strong>${d.luckyNumbers.join(', ')}</strong></span
+								>`
+								: nothing
+						}
+						${
+							d.luckyDays?.length
+								? html`<span
+									>Lucky days <strong>${d.luckyDays.join(', ')}</strong></span
+								>`
+								: nothing
+						}
+						${
+							d.compatibleSigns?.length
+								? html`<span class="compat-wrap">
+									Best with
+									<span class="compat"
+										>${d.compatibleSigns.map(
+											(s) => html`<span>${s}</span>`,
+										)}</span
+									>
+								</span>`
+								: nothing
+						}
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+}
+
+function capitalize(s: string): string {
+	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-horoscope-card': RoxyHoroscopeCard;
+	}
+}

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

@@ -0,0 +1,156 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface KpPlanet {
+	planet?: string;
+	name?: string;
+	sign?: string;
+	signLord?: string;
+	nakshatra?: string;
+	nakshatraLord?: string;
+	pada?: number;
+	starLord?: string;
+	subLord?: string;
+	subSubLord?: string;
+	kpNumber?: number;
+	retrograde?: boolean;
+	longitude?: number;
+}
+
+interface KpData {
+	ayanamsa?: number | string;
+	planets?: KpPlanet[];
+}
+
+/**
+ * KP planets table with sub-lord and sub-sub-lord columns. Renders
+ * /vedic-astrology/kp/planets.
+ */
+@customElement('roxy-kp-planets-table')
+export class RoxyKpPlanetsTable extends LitElement {
+	static styles = [
+		baseStyles,
+		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);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				display: flex;
+				justify-content: space-between;
+				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);
+			}
+			.ayanamsa {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 560px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			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.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			td.planet {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.retro {
+				color: var(--roxy-warning, #ea580c);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin-left: 4px;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: KpData | null = null;
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No KP data</div>`;
+		const planets = this.data.planets ?? [];
+
+		return html`<div
+			class="wrap"
+			aria-label="KP planets table"
+			tabindex="0"
+		>
+			<header class="head">
+				<h2 class="title">KP planets</h2>
+				${
+					this.data.ayanamsa
+						? html`<span class="ayanamsa">Ayanamsa: ${this.data.ayanamsa}</span>`
+						: nothing
+				}
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Planet</th>
+						<th scope="col">Sign</th>
+						<th scope="col">Sign lord</th>
+						<th scope="col">Nakshatra</th>
+						<th scope="col">Star lord</th>
+						<th scope="col">Sub lord</th>
+						<th scope="col">Sub sub lord</th>
+						<th scope="col">KP no.</th>
+					</tr>
+				</thead>
+				<tbody>
+					${planets.map(
+						(p) => html`<tr>
+							<td class="planet">
+								${p.planet ?? p.name ?? ''}
+								${p.retrograde ? html`<span class="retro">R</span>` : nothing}
+							</td>
+							<td>${p.sign ?? ''}</td>
+							<td>${p.signLord ?? ''}</td>
+							<td>${p.nakshatra ?? ''}</td>
+							<td>${p.starLord ?? p.nakshatraLord ?? ''}</td>
+							<td>${p.subLord ?? ''}</td>
+							<td>${p.subSubLord ?? ''}</td>
+							<td>${p.kpNumber ?? ''}</td>
+						</tr>`,
+					)}
+				</tbody>
+			</table>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-kp-planets-table': RoxyKpPlanetsTable;
+	}
+}