@roxyapi/ui 0.0.1 → 0.1.2

package/src/components/tarot-card.ts

@@ -0,0 +1,235 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface TarotCard {
+	id?: string;
+	name?: string;
+	arcana?: 'major' | 'minor' | string;
+	number?: number | string;
+	position?: string;
+	reversed?: boolean;
+	keywords?: string[];
+	meaning?:
+		| string
+		| {
+				upright?: string;
+				reversed?: string;
+				spiritual?: string;
+				emotional?: string;
+				physical?: string;
+		  };
+	imageUrl?: string;
+	upright?: { meaning?: string; keywords?: string[] };
+}
+
+interface TarotData {
+	date?: string;
+	seed?: string;
+	card?: TarotCard;
+	dailyMessage?: string;
+}
+
+/**
+ * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip
+ * between upright and reversed where the data shape supports it.
+ */
+@customElement('roxy-tarot-card')
+export class RoxyTarotCard 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: minmax(0, 9rem) 1fr;
+				gap: var(--roxy-space-lg, 1.5rem);
+				align-items: start;
+			}
+
+			@container (max-width: 480px) {
+				.card {
+					grid-template-columns: 1fr;
+				}
+			}
+
+			.image-wrap {
+				perspective: 800px;
+			}
+			.image {
+				display: block;
+				width: 100%;
+				height: auto;
+				border-radius: var(--roxy-radius-md, 8px);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+				cursor: pointer;
+			}
+			.image.reversed {
+				transform: rotate(180deg);
+			}
+			.image:focus-visible {
+				outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+				outline-offset: 2px;
+			}
+
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-xl, 1.5rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				letter-spacing: var(--roxy-tracking-tight);
+			}
+			.meta {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin-bottom: var(--roxy-space-sm, 0.5rem);
+			}
+			.position {
+				color: var(--roxy-info, #0284c7);
+				margin-left: var(--roxy-space-xs, 0.25rem);
+				text-transform: capitalize;
+			}
+
+			.message {
+				color: var(--roxy-fg, #0a0a0a);
+				margin: var(--roxy-space-sm, 0.5rem) 0 var(--roxy-space-md, 1rem);
+			}
+
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				margin-top: var(--roxy-space-sm, 0.5rem);
+			}
+			.chips span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			.flip {
+				margin-top: var(--roxy-space-sm, 0.5rem);
+				background: transparent;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: 4px 12px;
+				font-family: inherit;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-secondary, #475569);
+				cursor: pointer;
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.flip:hover {
+				transform: scale(1.02);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: TarotData | TarotCard | null = null;
+
+	@state()
+	private flipped = false;
+
+	private getCard(): TarotCard | null {
+		if (!this.data) return null;
+		if ('card' in this.data && this.data.card) return this.data.card;
+		return this.data as TarotCard;
+	}
+
+	private toggleFlip = () => {
+		this.flipped = !this.flipped;
+	};
+
+	render() {
+		const card = this.getCard();
+		if (!card)
+			return html`<div class="roxy-empty" role="status">No tarot data</div>`;
+
+		const isReversed = this.flipped !== Boolean(card.reversed); // start at server-provided orientation, toggle on click
+		const meaning =
+			typeof card.meaning === 'string'
+				? card.meaning
+				: ((isReversed ? card.meaning?.reversed : card.meaning?.upright) ??
+					card.meaning?.spiritual ??
+					card.upright?.meaning);
+		const dailyMessage =
+			this.data && 'dailyMessage' in this.data
+				? this.data.dailyMessage
+				: undefined;
+
+		return html`<article class="card" aria-label=${card.name ?? 'Tarot card'}>
+			<div class="image-wrap">
+				${
+					card.imageUrl
+						? html`<img
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							src=${card.imageUrl}
+							alt=${card.name ?? 'Tarot card'}
+							tabindex="0"
+							@click=${this.toggleFlip}
+							@keydown=${(e: KeyboardEvent) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.preventDefault();
+									this.toggleFlip();
+								}
+							}}
+						/>`
+						: html`<div
+							class=${`image ${isReversed ? 'reversed' : ''}`}
+							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
+						>
+							${card.name ?? '?'}
+						</div>`
+				}
+			</div>
+			<div>
+				<div class="meta">
+					${card.arcana ? html`${card.arcana} arcana` : nothing}
+					${card.number !== undefined && card.number !== null ? html` · ${card.number}` : nothing}
+					${isReversed ? html` · reversed` : nothing}
+					${
+						card.position
+							? html`<span class="position">${card.position}</span>`
+							: nothing
+					}
+				</div>
+				<h2 class="title">${card.name ?? 'Tarot card'}</h2>
+				${dailyMessage ? html`<p class="message">${dailyMessage}</p>` : nothing}
+				${meaning ? html`<p>${meaning}</p>` : nothing}
+				${
+					card.keywords?.length
+						? html`<div class="chips">
+							${card.keywords.map((k) => html`<span>${k}</span>`)}
+						</div>`
+						: nothing
+				}
+				<button
+					class="flip"
+					type="button"
+					@click=${this.toggleFlip}
+					aria-pressed=${this.flipped ? 'true' : 'false'}
+				>
+					Flip card
+				</button>
+			</div>
+		</article>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-tarot-card': RoxyTarotCard;
+	}
+}

package/src/components/tarot-spread.ts

@@ -0,0 +1,224 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.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;
+}
+
+/**
+ * Tarot spread card. Renders /tarot/spreads/{three-card,celtic-cross,love},
+ * /tarot/yes-no, /tarot/draw responses.
+ */
+@customElement('roxy-tarot-spread')
+export class RoxyTarotSpread extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.head {
+				display: flex;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+				align-items: baseline;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+			.question {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-style: italic;
+			}
+
+			.answer {
+				display: inline-block;
+				padding: 4px 14px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-weight: var(--roxy-weight-bold, 600);
+				font-size: var(--roxy-text-base, 1rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.answer.yes {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success, #16a34a);
+			}
+			.answer.no {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
+				color: var(--roxy-danger, #dc2626);
+			}
+			.answer.maybe {
+				background: color-mix(in srgb, var(--roxy-warning, #ea580c) 16%, transparent);
+				color: var(--roxy-warning, #ea580c);
+			}
+
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.card {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem);
+				background: var(--roxy-bg, #fff);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0;
+			}
+			.image {
+				width: 100%;
+				aspect-ratio: 0.6;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
+				border-radius: var(--roxy-radius-sm, 4px);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				overflow: hidden;
+			}
+			.image img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				transition:
+					transform var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+			.image img.reversed {
+				transform: rotate(180deg);
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.interp {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-secondary, #475569);
+			}
+
+			.reading {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: TarotSpreadData | null = null;
+
+	@property({ type: String, reflect: true })
+	spread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =
+		'three-card';
+
+	render() {
+		const d = this.data;
+		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, '')
+			: '';
+
+		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}
+			</header>
+			${
+				isYesNo
+					? html`<div>
+						<span class=${`answer ${answerClass}`}>${d.answer}</span>
+						${d.strength ? html`<small> · ${d.strength}</small>` : nothing}
+					</div>`
+					: nothing
+			}
+			${
+				positions.length > 0
+					? html`<div class="grid">
+						${positions.map(
+							(p) => html`<div class="card">
+								<p class="label">${p.label ?? p.name ?? p.position ?? ''}</p>
+								<div class="image">
+									${
+										p.card?.imageUrl
+											? html`<img
+												src=${p.card.imageUrl}
+												alt=${p.card.name ?? 'tarot card'}
+												class=${p.card.reversed ? 'reversed' : ''}
+											/>`
+											: html`${p.card?.name ?? '?'}`
+									}
+								</div>
+								<p class="name">
+									${p.card?.name ?? ''}
+									${p.card?.reversed ? html`<small>(reversed)</small>` : nothing}
+								</p>
+								${
+									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>`
+					: nothing
+			}
+		</article>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-tarot-spread': RoxyTarotSpread;
+	}
+}

package/src/components/vedic-kundli.ts

@@ -0,0 +1,257 @@
+import { css, html, LitElement, nothing, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_ABBR, SIGN_ABBR } from '../tokens/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface KundliMeta {
+	[planet: string]: {
+		graha?: string;
+		rashi?: string;
+		longitude?: number;
+		nakshatra?: string;
+		isRetrograde?: boolean;
+	};
+}
+
+interface RashiBucket {
+	rashi?: string;
+	signs?: Array<{
+		planet?: string;
+		longitude?: number;
+		isRetrograde?: boolean;
+	}>;
+}
+
+interface KundliHouse {
+	house: number;
+	sign: string;
+	planets: string[];
+}
+
+interface KundliData {
+	meta?: KundliMeta;
+	houses?: Array<{
+		house?: number;
+		number?: number;
+		sign?: string;
+		planets?: string[];
+	}>;
+	combustion?: unknown[];
+	planetaryWar?: unknown[];
+	[rashi: string]: unknown;
+}
+
+const SOUTH_HOUSE_CENTERS: Record<number, { x: number; y: number }> = {
+	1: { x: 150, y: 58 },
+	2: { x: 205, y: 52 },
+	3: { x: 253, y: 112 },
+	4: { x: 243, y: 150 },
+	5: { x: 253, y: 188 },
+	6: { x: 205, y: 248 },
+	7: { x: 150, y: 242 },
+	8: { x: 95, y: 248 },
+	9: { x: 47, y: 188 },
+	10: { x: 57, y: 150 },
+	11: { x: 47, y: 112 },
+	12: { x: 95, y: 52 },
+};
+
+const SOUTH_SIGN_POSITIONS: Record<number, { x: number; y: number }> = {
+	1: { x: 150, y: 35 },
+	2: { x: 222, y: 40 },
+	3: { x: 265, y: 100 },
+	4: { x: 265, y: 150 },
+	5: { x: 265, y: 200 },
+	6: { x: 222, y: 260 },
+	7: { x: 150, y: 265 },
+	8: { x: 78, y: 260 },
+	9: { x: 35, y: 200 },
+	10: { x: 35, y: 150 },
+	11: { x: 35, y: 100 },
+	12: { x: 78, y: 40 },
+};
+
+const RASHI_KEYS = [
+	'aries',
+	'taurus',
+	'gemini',
+	'cancer',
+	'leo',
+	'virgo',
+	'libra',
+	'scorpio',
+	'sagittarius',
+	'capricorn',
+	'aquarius',
+	'pisces',
+] as const;
+
+const RASHI_TO_SIGN: Record<string, string> = {
+	aries: 'Aries',
+	taurus: 'Taurus',
+	gemini: 'Gemini',
+	cancer: 'Cancer',
+	leo: 'Leo',
+	virgo: 'Virgo',
+	libra: 'Libra',
+	scorpio: 'Scorpio',
+	sagittarius: 'Sagittarius',
+	capricorn: 'Capricorn',
+	aquarius: 'Aquarius',
+	pisces: 'Pisces',
+};
+
+/**
+ * Vedic kundli (D1 Rashi chart). South Indian style by default. Pass `data`
+ * from /vedic-astrology/birth-chart. North Indian style via style="north".
+ *
+ * Lifted from jyotish-vedic-astrology-app/src/components/birth-chart.tsx,
+ * keeping HOUSE_CENTERS + SIGN_POSITIONS + abbreviations, dropping the React
+ * DOM color-probing hook in favor of CSS custom properties on :host.
+ */
+@customElement('roxy-vedic-kundli')
+export class RoxyVedicKundli extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			svg {
+				display: block;
+				width: 100%;
+				max-width: 360px;
+				margin: 0 auto;
+			}
+			.line {
+				fill: transparent;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.sign-text {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-weight: 500;
+				font-family: var(--roxy-font-sans);
+			}
+			.planet-text {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 11px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: KundliData | null = null;
+
+	@property({ type: String, reflect: true, attribute: 'chart-style' })
+	chartStyle: 'south' | 'north' = 'south';
+
+	private buildHouses(): KundliHouse[] {
+		if (!this.data) return [];
+		const houses: KundliHouse[] = [];
+		// Prefer normalized .houses array if present
+		if (Array.isArray(this.data.houses)) {
+			for (const h of this.data.houses) {
+				houses.push({
+					house: (h.house ?? h.number ?? houses.length + 1) as number,
+					sign: h.sign ?? '',
+					planets: h.planets ?? [],
+				});
+			}
+			if (houses.length > 0) return houses;
+		}
+		// Otherwise read the rashi buckets and project them as houses 1..12
+		// keyed by sign order. Lagna-anchored ordering would require knowing
+		// the ascendant rashi; we render rashi buckets directly which is the
+		// canonical South Indian layout.
+		for (let i = 0; i < 12; i++) {
+			const key = RASHI_KEYS[i];
+			const bucket = this.data[key] as RashiBucket | undefined;
+			const planets = (bucket?.signs ?? [])
+				.map((p) => p.planet ?? '')
+				.filter(Boolean);
+			houses.push({
+				house: i + 1,
+				sign: RASHI_TO_SIGN[key] ?? '',
+				planets,
+			});
+		}
+		return houses;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
+		const houses = this.buildHouses();
+
+		return html`<div class="wrap">
+			<h2 class="title">Vedic kundli</h2>
+			<svg
+				viewBox="0 0 300 300"
+				role="img"
+				aria-label="Vedic birth chart with twelve sign houses"
+			>
+				<title>Vedic kundli</title>
+				<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
+				<polygon
+					class="line"
+					points="220,80 220,220 80,220 80,80"
+					stroke-width="1"
+					fill="none"
+				/>
+				<line class="line" x1="150" y1="10" x2="80" y2="80" stroke-width="1" />
+				<line class="line" x1="150" y1="10" x2="220" y2="80" stroke-width="1" />
+				<line class="line" x1="290" y1="150" x2="220" y2="80" stroke-width="1" />
+				<line class="line" x1="290" y1="150" x2="220" y2="220" stroke-width="1" />
+				<line class="line" x1="150" y1="290" x2="220" y2="220" stroke-width="1" />
+				<line class="line" x1="150" y1="290" x2="80" y2="220" stroke-width="1" />
+				<line class="line" x1="10" y1="150" x2="80" y2="220" stroke-width="1" />
+				<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
+				${houses.map((h) => this.renderHouseGroup(h))}
+			</svg>
+		</div>`;
+	}
+
+	private renderHouseGroup(h: KundliHouse) {
+		const center = SOUTH_HOUSE_CENTERS[h.house];
+		const signPos = SOUTH_SIGN_POSITIONS[h.house];
+		if (!center || !signPos) return nothing;
+		const signAbbr = SIGN_ABBR[h.sign] ?? '';
+		const planets = h.planets ?? [];
+		return svg`
+			<g>
+				${
+					signAbbr
+						? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>`
+						: nothing
+				}
+				${planets.map((planet, j) => {
+					const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
+					const lineHeight = 13;
+					const startY = center.y - ((planets.length - 1) * lineHeight) / 2;
+					const yPos = startY + j * lineHeight;
+					return svg`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
+				})}
+			</g>
+		`;
+	}
+}
+
+function capitalize(s: string): string {
+	if (!s) return '';
+	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-vedic-kundli': RoxyVedicKundli;
+	}
+}