@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/bodygraph.ts

@@ -1,7 +1,8 @@
-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 { GenerateBodygraphResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
 	BODYGRAPH_VIEWBOX,
@@ -9,7 +10,6 @@ import {
 	channelKey,
 	renderBodygraphSvg,
 } from '../utils/bodygraph-render.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 type GateActivation = GenerateBodygraphResponse['gates'][number];
@@ -26,7 +26,7 @@ type GateActivation = GenerateBodygraphResponse['gates'][number];
  * it adopts the host palette in light and dark without runtime color probing.
  */
 @customElement('roxy-bodygraph')
-export class RoxyBodygraph extends LitElement {
+export class RoxyBodygraph extends RoxyDataElement<GenerateBodygraphResponse> {
 	static styles = [
 		baseStyles,
 		css`
@@ -65,7 +65,7 @@ export class RoxyBodygraph extends LitElement {
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 340px;
+				max-width: var(--roxy-chart-max-width, 340px);
 				height: auto;
 				margin: 0 auto;
 			}
@@ -165,7 +165,7 @@ export class RoxyBodygraph extends LitElement {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 			}
 			.fact span {
 				display: block;
@@ -251,22 +251,11 @@ export class RoxyBodygraph 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 bodygraph data</div>`;
 	}
 
-	@property({ attribute: false })
-	data: GenerateBodygraphResponse | null = null;
-
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No bodygraph data</div>`;
-
+	protected renderData(d: GenerateBodygraphResponse) {
 		const definedCenters = new Set<BodygraphCenterId>(
 			(d.centers ?? [])
 				.filter((c) => c.defined)

package/src/components/choghadiya-grid.ts

@@ -1,9 +1,9 @@
-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 { GetChoghadiyaResponse } 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';
 import { capitalize } from '../utils/string.js';
 
 type ChoghadiyaPeriod = GetChoghadiyaResponse['dayChoghadiya'][number];
@@ -28,11 +28,17 @@ function fmtTime(iso: string): string {
  * Good periods are highlighted in green, Bad periods in red.
  */
 @customElement('roxy-choghadiya-grid')
-export class RoxyChoghadiyaGrid extends LitElement {
+export class RoxyChoghadiyaGrid extends RoxyDataElement<GetChoghadiyaResponse> {
 	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);
 			}
@@ -133,17 +139,6 @@ export class RoxyChoghadiyaGrid 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: GetChoghadiyaResponse | null = null;
-
 	/**
 	 * True when the current wall-clock time falls inside this period. Both
 	 * `start` and `end` are ISO 8601 with timezone, so the comparison is
@@ -183,11 +178,12 @@ export class RoxyChoghadiyaGrid extends LitElement {
 		</div>`;
 	}
 
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No choghadiya data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No choghadiya data</div>`;
+	}
 
-		const { date, dayChoghadiya, nightChoghadiya } = this.data;
+	protected renderData(d: GetChoghadiyaResponse) {
+		const { date, dayChoghadiya, nightChoghadiya } = d;
 
 		return html`<div class="wrap">
 			<div class="header">

package/src/components/compatibility-card.ts

@@ -1,13 +1,13 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type {
 	CalculateBioCompatibilityResponse,
 	CalculateCompatibilityResponse,
 	CalculateNumCompatibilityResponse,
 } 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';
 
 type CompatibilityData =
 	| CalculateCompatibilityResponse
@@ -19,12 +19,13 @@ type CompatibilityData =
  * /numerology/compatibility, or /biorhythm/compatibility responses.
  */
 @customElement('roxy-compatibility-card')
-export class RoxyCompatibilityCard extends LitElement {
+export class RoxyCompatibilityCard extends RoxyDataElement<CompatibilityData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				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);
@@ -109,17 +110,6 @@ export class RoxyCompatibilityCard 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: CompatibilityData | null = null;
-
 	@property({ type: String, reflect: true })
 	mode: 'astrology' | 'numerology' | 'biorhythm' = 'astrology';
 
@@ -136,11 +126,11 @@ export class RoxyCompatibilityCard extends LitElement {
 		return {};
 	}
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
+	}
 
+	protected renderData(d: CompatibilityData) {
 		const score = d.overallScore;
 		const breakdown = this.getBreakdown();
 		const rating =

package/src/components/crystal-card.ts

@@ -0,0 +1,242 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { GetCrystalResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+const MONTHS = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+];
+
+/**
+ * Single-crystal detail card. Renders /crystals/{id}: the stone's photo, description, and full metaphysical profile (spiritual / emotional / physical meaning, governing chakras, zodiac signs, planet, elements, colours, Mohs hardness, numerical vibration, birthstone month), plus its affirmation and the crystals it pairs with. This is the detail view; roxy-crystal-grid is the gallery.
+ */
+@customElement('roxy-crystal-card')
+export class RoxyCrystalCard extends RoxyDataElement<GetCrystalResponse> {
+	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);
+			}
+			.hero {
+				display: flex;
+				gap: var(--roxy-space-md, 1rem);
+				align-items: flex-start;
+			}
+			.photo {
+				width: 96px;
+				height: 96px;
+				flex: none;
+				border-radius: var(--roxy-radius-md, 8px);
+				object-fit: cover;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 35%, transparent);
+			}
+			.title {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.desc {
+				margin: 0;
+				line-height: 1.55;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.attrs {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.attr {
+				display: grid;
+				gap: 2px;
+			}
+			.attr dt {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.attr dd {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 500;
+			}
+			.colors {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.4rem;
+			}
+			.color {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.3rem;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: capitalize;
+			}
+			.dot {
+				width: 0.7rem;
+				height: 0.7rem;
+				border-radius: var(--roxy-radius-full, 9999px);
+				border: 1px solid color-mix(in srgb, var(--roxy-fg, #0a0a0a) 18%, transparent);
+			}
+			.meaning h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.meaning p {
+				margin: 0 0 var(--roxy-space-sm, 0.5rem) 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				line-height: 1.55;
+			}
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.3rem;
+			}
+			.chip {
+				padding: 1px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: capitalize;
+			}
+			.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;
+			}
+			.affirmation {
+				margin: 0;
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-left: 3px solid var(--roxy-accent, #f59e0b);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
+				font-style: italic;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				border-radius: 0 var(--roxy-radius-sm, 4px) var(--roxy-radius-sm, 4px) 0;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No crystal data</div>`;
+	}
+
+	protected renderData(d: GetCrystalResponse) {
+		const colors = d.colors ?? [];
+		const keywords = d.keywords ?? [];
+		const pairs = d.pairsWith ?? [];
+		const month =
+			typeof d.birthMonth === 'number' ? MONTHS[d.birthMonth - 1] : undefined;
+
+		return html`<article class="wrap" aria-label=${d.name ?? 'Crystal'}>
+			<div class="hero">
+				${d.imageUrl ? html`<img class="photo" src=${d.imageUrl} alt=${d.name ?? 'Crystal'} loading="lazy" />` : nothing}
+				<div>
+					<h2 class="title">${d.name}</h2>
+					${d.description ? html`<p class="desc">${d.description}</p>` : nothing}
+				</div>
+			</div>
+
+			<dl class="attrs">
+				${this.attr('Planet', d.planet)}
+				${this.attr('Hardness', typeof d.hardness === 'number' ? `${d.hardness} Mohs` : undefined)}
+				${this.attr('Vibration', d.numericalVibration)}
+				${this.attr('Birthstone', month)}
+				${this.list('Chakras', d.chakras)}
+				${this.list('Zodiac', d.zodiacSigns)}
+				${this.list('Elements', d.elements)}
+				${
+					colors.length
+						? html`<div class="attr">
+							<dt>Colors</dt>
+							<dd>
+								<div class="colors">
+									${colors.map((c) => html`<span class="color"><span class="dot" style="background:${c}"></span>${c}</span>`)}
+								</div>
+							</dd>
+						</div>`
+						: nothing
+				}
+			</dl>
+
+			${this.renderMeaning(d.meaning)}
+
+			${
+				keywords.length
+					? html`<div>
+						<p class="section-label">Keywords</p>
+						<div class="chips">${keywords.map((k) => html`<span class="chip">${k}</span>`)}</div>
+					</div>`
+					: nothing
+			}
+
+			${d.affirmation ? html`<p class="affirmation">${d.affirmation}</p>` : nothing}
+
+			${
+				pairs.length
+					? html`<div>
+						<p class="section-label">Pairs with</p>
+						<div class="chips">${pairs.map((p) => html`<span class="chip">${String(p).replace(/-/g, ' ')}</span>`)}</div>
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+
+	private attr(label: string, value: string | number | undefined) {
+		if (value === undefined || value === null || value === '') return nothing;
+		return html`<div class="attr"><dt>${label}</dt><dd>${value}</dd></div>`;
+	}
+
+	private list(label: string, values: readonly string[] | undefined) {
+		if (!values?.length) return nothing;
+		return html`<div class="attr"><dt>${label}</dt><dd>${values.join(', ')}</dd></div>`;
+	}
+
+	private renderMeaning(m: GetCrystalResponse['meaning'] | undefined) {
+		if (!m) return nothing;
+		const rows: Array<[string, string | undefined]> = [
+			['Spiritual', m.spiritual],
+			['Emotional', m.emotional],
+			['Physical', m.physical],
+		];
+		const present = rows.filter(([, v]) => Boolean(v));
+		if (present.length === 0) return nothing;
+		return html`<div class="meaning">
+			${present.map(([label, text]) => html`<h3>${label}</h3><p>${text}</p>`)}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-crystal-card': RoxyCrystalCard;
+	}
+}

package/src/components/crystal-grid.ts

@@ -0,0 +1,182 @@
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetBirthstonesResponse,
+	GetCrystalsByChakraResponse,
+	GetCrystalsByElementResponse,
+	GetCrystalsByZodiacResponse,
+	ListCrystalsResponse,
+	SearchCrystalsResponse,
+} from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+/**
+ * Any crystal list response that carries a `crystals` summary array. Every crystals endpoint that returns more than one stone shares the `{ name, id, imageUrl, colors }` item shape, so one grid renders them all.
+ */
+type CrystalGridData =
+	| ListCrystalsResponse
+	| GetCrystalsByChakraResponse
+	| GetCrystalsByElementResponse
+	| GetCrystalsByZodiacResponse
+	| GetBirthstonesResponse
+	| SearchCrystalsResponse;
+
+/**
+ * Month number to birthstone month name for the derived heading.
+ */
+const MONTHS = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+];
+
+/**
+ * Crystal grid. Renders any crystals list response (/crystals, /crystals/chakra/{chakra}, /crystals/element/{element}, /crystals/zodiac/{sign}, /crystals/birthstone/{month}, /crystals/search) as a responsive gallery of crystal tiles with photo, name, and colour swatches. The heading is derived from the response filter (chakra, element, zodiac sign, or birth month) or set explicitly via the `heading` attribute.
+ */
+@customElement('roxy-crystal-grid')
+export class RoxyCrystalGrid extends RoxyDataElement<CrystalGridData> {
+	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(8rem, 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);
+			}
+			.photo {
+				aspect-ratio: 1 / 1;
+				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);
+			}
+			.colors {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 4px;
+			}
+			.swatch {
+				width: 10px;
+				height: 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				border: 1px solid color-mix(in srgb, var(--roxy-fg, #0a0a0a) 18%, transparent);
+			}
+		`,
+	];
+
+	/**
+	 * Override the auto-derived grid heading. Empty by default, in which case the heading comes from the response filter (chakra, element, zodiac, or birth month) or falls back to "Crystals".
+	 */
+	@property({ type: String, reflect: true })
+	heading = '';
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No crystals</div>`;
+	}
+
+	protected renderData(d: CrystalGridData) {
+		const crystals = d.crystals ?? [];
+		if (crystals.length === 0) return this.renderEmpty();
+
+		const title = this.heading || this.deriveHeading(d);
+		const total =
+			'total' in d && typeof d.total === 'number' ? d.total : crystals.length;
+
+		return html`<section class="wrap" aria-label=${title}>
+			<header class="head">
+				<h2 class="title">${title}</h2>
+				<span class="count">${total} ${total === 1 ? 'crystal' : 'crystals'}</span>
+			</header>
+			<ul class="grid">
+				${crystals.map(
+					(c) => html`<li class="tile">
+						${
+							c.imageUrl
+								? html`<img class="photo" src=${c.imageUrl} alt=${c.name ?? 'Crystal'} loading="lazy" />`
+								: html`<div class="photo" aria-hidden="true"></div>`
+						}
+						<p class="name">${c.name}</p>
+						${
+							c.colors && c.colors.length > 0
+								? html`<div class="colors" aria-label=${`Colours: ${c.colors.join(', ')}`}>
+									${c.colors.map((col) => html`<span class="swatch" style=${`background:${cssColor(col)}`} title=${col}></span>`)}
+								</div>`
+								: nothing
+						}
+					</li>`,
+				)}
+			</ul>
+		</section>`;
+	}
+
+	private deriveHeading(d: CrystalGridData): string {
+		if ('chakra' in d && d.chakra) return `${d.chakra} chakra crystals`;
+		if ('element' in d && d.element) return `${d.element} element crystals`;
+		if ('sign' in d && d.sign) return `Crystals for ${d.sign}`;
+		if ('month' in d && typeof d.month === 'number')
+			return `${MONTHS[d.month - 1] ?? ''} birthstones`.trim();
+		return 'Crystals';
+	}
+}
+
+/**
+ * Map an API colour keyword to a CSS colour. Most crystal colours (violet, purple, green, blue) are valid CSS named colours; multi-word or non-standard values (blue-green, lavender) fall back to the keyword and, if the browser cannot resolve it, the swatch border still renders. Lower-cased and space-stripped so "Blue Green" resolves to the CSS hyphen form where it exists.
+ */
+function cssColor(name: string): string {
+	return name.trim().toLowerCase().replace(/\s+/g, '');
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-crystal-grid': RoxyCrystalGrid;
+	}
+}

package/src/components/dasha-timeline.ts

@@ -1,13 +1,13 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type {
 	GetCurrentDashaResponse,
 	GetMajorDashasResponse,
 	GetSubDashasResponse,
 } 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';
 
 type DashaData =
 	| GetCurrentDashaResponse
@@ -22,7 +22,7 @@ type DashaPeriod = GetMajorDashasResponse['mahadashas'][number];
  * Switch to period="major" for the full 120-year Vimshottari timeline.
  */
 @customElement('roxy-dasha-timeline')
-export class RoxyDashaTimeline extends LitElement {
+export class RoxyDashaTimeline extends RoxyDataElement<DashaData> {
 	static styles = [
 		baseStyles,
 		css`
@@ -51,7 +51,7 @@ export class RoxyDashaTimeline extends LitElement {
 				display: grid;
 				grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 				gap: var(--roxy-space-md, 1rem);
-				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-md, 1rem);
@@ -138,7 +138,7 @@ export class RoxyDashaTimeline extends LitElement {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 			}
 			.interp h3 {
 				margin: 0;
@@ -153,25 +153,14 @@ export class RoxyDashaTimeline 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: DashaData | null = null;
-
 	@property({ type: String, reflect: true })
 	period: 'current' | 'major' | 'sub' = 'current';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No dasha data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No dasha data</div>`;
+	}
 
+	protected renderData(d: DashaData) {
 		const periods = this.collectPeriods(d);
 		const maxYears = periods.length
 			? Math.max(...periods.map((p) => p.durationYears))