@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/panchang-table.ts

@@ -1,12 +1,12 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type {
 	GetBasicPanchangResponse,
 	GetDetailedPanchangResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatDate, formatTime, formatTimeRange } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 
 type PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;
 type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
@@ -24,14 +24,14 @@ type PanchangTime = GetDetailedPanchangResponse['rahuKaal'];
  * on timing without parsing the raw response.
  */
 @customElement('roxy-panchang-table')
-export class RoxyPanchangTable extends LitElement {
+export class RoxyPanchangTable extends RoxyDataElement<PanchangData> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				overflow: hidden;
 				box-shadow: var(--roxy-shadow-sm);
 			}
@@ -88,24 +88,14 @@ export class RoxyPanchangTable extends LitElement {
 		`,
 	];
 
-	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: PanchangData | null = null;
-
 	@property({ type: String, reflect: true })
 	detail: 'basic' | 'detailed' = 'detailed';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No panchang data</div>`;
+	}
+
+	protected renderData(d: PanchangData) {
 		const detailed = 'sunrise' in d ? d : null;
 
 		const fivefold: Array<[string, string]> = [

package/src/components/reference-card.ts

@@ -0,0 +1,212 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type {
+	GetCenterResponse,
+	GetCompoundNumberResponse,
+	GetGateResponse,
+	GetNumberMeaningResponse,
+	GetPlanetMeaningResponse,
+	GetRashiResponse,
+	GetTrigramResponse,
+	GetZodiacSignResponse,
+} from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
+
+/**
+ * Every reference / glossary lookup this card renders. They do NOT share field names (a zodiac sign has 17 fields, a number meaning has 3), so the card renders heuristically rather than by fixed keys: a symbol + title hero, the prose fields as labelled paragraphs, keyword and string-list fields as chips, and every remaining scalar as an attribute grid. One card replaces eight near-identical bespoke ones.
+ */
+type ReferenceData =
+	| GetZodiacSignResponse
+	| GetPlanetMeaningResponse
+	| GetRashiResponse
+	| GetTrigramResponse
+	| GetGateResponse
+	| GetCenterResponse
+	| GetNumberMeaningResponse
+	| GetCompoundNumberResponse;
+
+/** Keys used to derive the title, in priority order. */
+const TITLE_KEYS = ['name', 'english', 'title'];
+/** Keys whose string value is always treated as prose, even when short. */
+const PROSE_KEYS = new Set([
+	'description',
+	'meaning',
+	'characteristics',
+	'tagline',
+	'definedMeaning',
+	'undefinedMeaning',
+	'motto',
+]);
+/** Keys never shown as their own row/section (rendered elsewhere or noise). */
+const SKIP_KEYS = new Set(['id', 'symbol', 'keywords', ...TITLE_KEYS]);
+
+@customElement('roxy-reference-card')
+export class RoxyReferenceCard extends RoxyDataElement<ReferenceData> {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				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);
+			}
+			.symbol {
+				font-size: 2.5rem;
+				line-height: 1;
+				color: var(--roxy-accent-ink, #b45309);
+				flex: none;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.prose {
+				margin: 0;
+				line-height: 1.6;
+			}
+			.prose .prose-label {
+				display: block;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+				margin-bottom: 2px;
+			}
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.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);
+			}
+			.list h3,
+			.facts-wrap h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.facts {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
+			.fact dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: capitalize;
+			}
+			.fact dd {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+		`,
+	];
+
+	protected renderData(d: ReferenceData) {
+		const rec = d as Record<string, unknown>;
+		const title = this.deriveTitle(rec);
+		const symbol = typeof rec.symbol === 'string' ? rec.symbol : undefined;
+		const keywords = Array.isArray(rec.keywords)
+			? (rec.keywords as unknown[]).map(String)
+			: [];
+
+		const prose: Array<[string, string]> = [];
+		const lists: Array<[string, string[]]> = [];
+		const facts: Array<[string, string]> = [];
+		for (const [key, value] of Object.entries(rec)) {
+			if (SKIP_KEYS.has(key) || value == null) continue;
+			if (Array.isArray(value)) {
+				const items = value.filter((v) => v != null).map(String);
+				if (items.length > 0) lists.push([key, items]);
+			} else if (typeof value === 'string') {
+				if (PROSE_KEYS.has(key) || value.length > 48) prose.push([key, value]);
+				else facts.push([key, value]);
+			} else if (typeof value === 'number' || typeof value === 'boolean') {
+				facts.push([key, String(value)]);
+			}
+		}
+
+		return html`<article class="card" aria-label=${title}>
+			<header class="head">
+				${symbol ? html`<span class="symbol" aria-hidden="true">${symbol}</span>` : nothing}
+				<div>
+					<p class="label">Reference</p>
+					<h2 class="name">${title}</h2>
+				</div>
+			</header>
+			${keywords.length > 0 ? html`<div class="chips">${keywords.map((k) => html`<span>${k}</span>`)}</div>` : nothing}
+			${prose.map(
+				([key, text]) => html`<p class="prose">
+					<span class="prose-label">${humanize(key)}</span>${text}
+				</p>`,
+			)}
+			${
+				facts.length > 0
+					? html`<div class="facts-wrap">
+						<dl class="facts">
+							${facts.map(
+								([key, value]) => html`<div class="fact">
+									<dt>${humanize(key)}</dt>
+									<dd>${value}</dd>
+								</div>`,
+							)}
+						</dl>
+					</div>`
+					: nothing
+			}
+			${lists.map(
+				([key, items]) => html`<div class="list">
+					<h3>${humanize(key)}</h3>
+					<div class="chips">${items.map((i) => html`<span>${i}</span>`)}</div>
+				</div>`,
+			)}
+		</article>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No reference data</div>`;
+	}
+
+	private deriveTitle(rec: Record<string, unknown>): string {
+		for (const key of TITLE_KEYS) {
+			if (typeof rec[key] === 'string') return rec[key] as string;
+		}
+		const type = typeof rec.type === 'string' ? humanize(rec.type) : '';
+		const number = rec.number;
+		if (number != null) return `${type} ${number}`.trim();
+		return 'Reference';
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-reference-card': RoxyReferenceCard;
+	}
+}

package/src/components/shadbala-table.ts

@@ -1,10 +1,10 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { PLANET_GLYPH } from '../tokens/index.js';
 import type { ShadbalaResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatNumber } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type Planet = ShadbalaResponse['planets'][number];
@@ -40,11 +40,17 @@ const BALA_COMPONENTS: Array<{
  * Pass `data` from /vedic-astrology/shadbala.
  */
 @customElement('roxy-shadbala-table')
-export class RoxyShadbalaTable extends LitElement {
+export class RoxyShadbalaTable extends RoxyDataElement<ShadbalaResponse> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				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);
 			}
@@ -192,23 +198,14 @@ export class RoxyShadbalaTable extends LitElement {
 		`,
 	];
 
-	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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No shadbala data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: ShadbalaResponse | null = null;
+	protected renderData(d: ShadbalaResponse) {
+		if (!d.planets?.length) return this.renderEmpty();
 
-	render() {
-		if (!this.data?.planets?.length) {
-			return html`<div class="roxy-empty" role="status">No shadbala data</div>`;
-		}
-
-		const sorted = [...this.data.planets].sort(
+		const sorted = [...d.planets].sort(
 			(a, b) => a.relativeRank - b.relativeRank,
 		);
 

package/src/components/synastry-chart.ts

@@ -1,10 +1,11 @@
-import { css, html, LitElement, nothing, svg } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing, svg } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { PLANET_GLYPH, SIGN_GLYPH, SIGNS_ORDER } from '../tokens/index.js';
 import type {
 	CalculateSynastryResponse,
 	NatalChartResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { longitudeToSignPosition, polarToCartesian } from '../utils/degree.js';
 import {
@@ -12,7 +13,6 @@ import {
 	formatNumber,
 	normalizeAspect,
 } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type PlanetEntry = NatalChartResponse['planets'][number];
@@ -40,11 +40,17 @@ const P2_R = 96;
  * /astrology/synastry.
  */
 @customElement('roxy-synastry-chart')
-export class RoxySynastryChart extends LitElement {
+export class RoxySynastryChart extends RoxyDataElement<SynastryWithPlanets> {
 	static styles = [
 		baseStyles,
 		css`
 			.wrap {
+				background: var(--roxy-surface, #fff);
+				color: var(--roxy-fg, #0a0a0a);
+				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);
 			}
@@ -73,7 +79,7 @@ export class RoxySynastryChart extends LitElement {
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 560px;
+				max-width: var(--roxy-chart-max-width, 560px);
 				aspect-ratio: 1 / 1;
 				height: auto;
 				margin: 0 auto;
@@ -225,22 +231,13 @@ export class RoxySynastryChart extends LitElement {
 		`,
 	];
 
-	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);
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No synastry data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: SynastryWithPlanets | null = null;
-
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No synastry data</div>`;
-		const { person1, person2, compatibilityScore, analysis } = this.data;
-		const interAspects = this.data.interAspects ?? [];
+	protected renderData(d: SynastryWithPlanets) {
+		const { person1, person2, compatibilityScore, analysis } = d;
+		const interAspects = d.interAspects ?? [];
 		const p1Planets = person1?.planets ?? [];
 		const p2Planets = person2?.planets ?? [];
 
@@ -353,7 +350,7 @@ export class RoxySynastryChart extends LitElement {
 				${this.renderSpokes()} ${this.renderSigns()}
 				${this.renderInterAspectLines(p1Planets, p2Planets, interAspects)}
 				${this.renderRing(p1Planets, P1_R, 'p1', 1)} ${this.renderRing(p2Planets, P2_R, 'p2', 2)}
-				${this.renderAscendants(this.data)}
+				${this.renderAscendants(d)}
 			</svg>
 			<div class="legend-row">
 				<span><span class="swatch" style="background: var(--roxy-accent)"></span>Person 1</span>

package/src/components/tarot-card.ts

@@ -1,8 +1,8 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
 import type { GetCardResponse, GetDailyCardResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 
 type TarotData = GetCardResponse | GetDailyCardResponse;
 
@@ -11,12 +11,12 @@ type TarotData = GetCardResponse | GetDailyCardResponse;
  * between upright and reversed where the data shape supports it.
  */
 @customElement('roxy-tarot-card')
-export class RoxyTarotCard extends LitElement {
+export class RoxyTarotCard extends RoxyDataElement<TarotData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-lg, 1.5rem);
@@ -107,17 +107,6 @@ export class RoxyTarotCard extends LitElement {
 		`,
 	];
 
-	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: TarotData | null = null;
-
 	@state()
 	private flipped = false;
 
@@ -125,11 +114,11 @@ export class RoxyTarotCard extends LitElement {
 		this.flipped = !this.flipped;
 	};
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No tarot data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No tarot data</div>`;
+	}
 
+	protected renderData(d: TarotData) {
 		if ('card' in d) return this.renderDailyCard(d);
 		return this.renderFullCard(d);
 	}

package/src/components/tarot-catalog.ts

@@ -0,0 +1,129 @@
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { ListCardsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+/** A single card row from the catalog response. Kept spec-derived so the tile never reads a field the API does not return. */
+type CatalogCard = ListCardsResponse['cards'][number];
+
+/**
+ * Tarot catalog. Renders GET /tarot/cards as a responsive gallery of the deck: each tile carries the Rider-Waite-Smith artwork, the card name, and an arcana/suit caption. Filter the deck server-side (arcana, suit, number, paging) and pass the page response; the component renders whatever cards it carries. Pairs with `<roxy-tarot-card>` for a single-card detail view and `<roxy-tarot-spread>` for readings.
+ */
+@customElement('roxy-tarot-catalog')
+export class RoxyTarotCatalog extends RoxyDataElement<ListCardsResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				justify-content: space-between;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.count {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+				margin: 0;
+				padding: 0;
+				list-style: none;
+			}
+			.tile {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+				background: var(--roxy-surface, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.art {
+				aspect-ratio: 2 / 3;
+				width: 100%;
+				border-radius: var(--roxy-radius-sm, 4px);
+				object-fit: cover;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.meta {
+				margin: 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+		`,
+	];
+
+	/**
+	 * Override the auto-derived gallery heading. Empty by default, in which case the heading is "Tarot deck".
+	 */
+	@property({ type: String, reflect: true })
+	heading = '';
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No cards</div>`;
+	}
+
+	protected renderData(d: ListCardsResponse) {
+		const cards = d.cards ?? [];
+		if (cards.length === 0) return this.renderEmpty();
+
+		const title = this.heading || 'Tarot deck';
+		const total = typeof d.total === 'number' ? d.total : cards.length;
+
+		return html`<section class="wrap" aria-label=${title}>
+			<header class="head">
+				<h2 class="title">${title}</h2>
+				<span class="count">${total} ${total === 1 ? 'card' : 'cards'}</span>
+			</header>
+			<ul class="grid">
+				${cards.map(
+					(c) => html`<li class="tile">
+						${
+							c.imageUrl
+								? html`<img class="art" src=${c.imageUrl} alt=${c.name ?? 'Tarot card'} loading="lazy" />`
+								: html`<div class="art" aria-hidden="true"></div>`
+						}
+						<p class="name">${c.name}</p>
+						<p class="meta">${cardMeta(c)}</p>
+					</li>`,
+				)}
+			</ul>
+		</section>`;
+	}
+}
+
+/**
+ * Caption line for a catalog tile. Minor Arcana cards name their suit (`Minor · Cups`); Major Arcana cards read `Major Arcana`. Both derive only from the spec `arcana` and `suit` fields.
+ */
+function cardMeta(c: CatalogCard): string {
+	if (c.suit) return `${capitalize(c.arcana)} · ${capitalize(c.suit)}`;
+	return `${capitalize(c.arcana)} Arcana`;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-tarot-catalog': RoxyTarotCatalog;
+	}
+}