@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/tarot-spread.ts

@@ -1,15 +1,17 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type {
+	CastCareerSpreadResponse,
 	CastCelticCrossResponse,
+	CastCustomSpreadResponse,
 	CastLoveSpreadResponse,
 	CastReadingResponse,
 	CastThreeCardResponse,
 	CastYesNoResponse,
 	DrawCardsResponse,
 } 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 TarotSpreadData =
 	| CastThreeCardResponse
@@ -17,6 +19,8 @@ type TarotSpreadData =
 	| CastLoveSpreadResponse
 	| CastYesNoResponse
 	| CastReadingResponse
+	| CastCareerSpreadResponse
+	| CastCustomSpreadResponse
 	| DrawCardsResponse;
 
 /**
@@ -24,7 +28,7 @@ type TarotSpreadData =
  * /tarot/yes-no, /tarot/draw responses.
  */
 @customElement('roxy-tarot-spread')
-export class RoxyTarotSpread extends LitElement {
+export class RoxyTarotSpread extends RoxyDataElement<TarotSpreadData> {
 	static styles = [
 		baseStyles,
 		css`
@@ -84,7 +88,7 @@ export class RoxyTarotSpread extends LitElement {
 				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);
+				background: var(--roxy-surface, #fff);
 				display: grid;
 				gap: var(--roxy-space-xs, 0.25rem);
 			}
@@ -136,26 +140,21 @@ export class RoxyTarotSpread 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: TarotSpreadData | null = null;
-
 	@property({ type: String, reflect: true })
-	spread: 'three-card' | 'celtic-cross' | 'love' | 'yes-no' | 'draw' =
-		'three-card';
+	spread:
+		| 'three-card'
+		| 'celtic-cross'
+		| 'love'
+		| 'career'
+		| 'custom'
+		| 'yes-no'
+		| 'draw' = 'three-card';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No tarot spread</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No tarot spread</div>`;
+	}
 
+	protected renderData(d: TarotSpreadData) {
 		const isYesNo = 'answer' in d;
 		const isDrawn = 'cards' in d && !('spread' in d);
 		const positions = isDrawn

package/src/components/transits-table.ts

@@ -1,11 +1,11 @@
-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 { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
 import type { TransitsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { chevron, disclosureStyles } from '../utils/disclosure.js';
 import { formatDate, formatNumber, formatTime } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 import { renderTablist, tablistStyles } from '../utils/tablist.js';
 
@@ -15,13 +15,19 @@ import { renderTablist, tablistStyles } from '../utils/tablist.js';
  * `data.summary` are present and rendered automatically.
  */
 @customElement('roxy-transits-table')
-export class RoxyTransitsTable extends LitElement {
+export class RoxyTransitsTable extends RoxyDataElement<TransitsResponse> {
 	static styles = [
 		baseStyles,
 		tablistStyles,
 		disclosureStyles,
 		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);
 			}
@@ -219,25 +225,16 @@ export class RoxyTransitsTable 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: TransitsResponse | null = null;
-
 	/** Which panel is showing: planet positions or the transit-to-natal aspects. */
 	@state()
 	private tab: 'positions' | 'aspects' = 'positions';
 
-	render() {
-		if (!this.data?.transitPlanets?.length) {
-			return html`<div class="roxy-empty" role="status">No transits data</div>`;
-		}
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No transits data</div>`;
+	}
+
+	protected renderData(d: TransitsResponse) {
+		if (!d.transitPlanets?.length) return this.renderEmpty();
 
 		const {
 			transitDate,
@@ -245,7 +242,7 @@ export class RoxyTransitsTable extends LitElement {
 			transitPlanets,
 			transitAspects,
 			summary,
-		} = this.data;
+		} = d;
 
 		const dateStr = [formatDate(transitDate), formatTime(transitTime)]
 			.filter(Boolean)

package/src/components/vedic-aspects.ts

@@ -0,0 +1,188 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { CalculateDrishtiResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
+
+/**
+ * Vedic graha drishti (planetary aspects) table. Renders /vedic-astrology/aspects: which planet casts an aspect on which, by special Vedic rules (every graha aspects the 7th; Mars the 4th and 8th, Jupiter the 5th and 9th, Saturn the 3rd and 10th). Mutual aspects (two planets aspecting each other) are surfaced first as they are the strongest sambandha. Each row shows the aspecting planet, the aspect kind, the aspected planet, its strength and orb.
+ */
+@customElement('roxy-vedic-aspects')
+export class RoxyVedicAspects extends RoxyDataElement<CalculateDrishtiResponse> {
+	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);
+			}
+			.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;
+			}
+			.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;
+			}
+			.mutual {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.mutual-pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.35rem;
+				padding: 2px 10px;
+				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-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.mutual-pill .rel {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 400;
+			}
+			.overflow-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+			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;
+				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.06em;
+			}
+			tbody tr:last-child td {
+				border-bottom: none;
+			}
+			.kind {
+				display: inline-block;
+				padding: 1px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 55%, transparent);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-muted, #71717a);
+			}
+			.bar {
+				display: inline-block;
+				height: 6px;
+				border-radius: 3px;
+				background: var(--roxy-accent, #f59e0b);
+				vertical-align: middle;
+				margin-right: 6px;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No aspect data</div>`;
+	}
+
+	protected renderData(d: CalculateDrishtiResponse) {
+		const aspects = d.aspects ?? [];
+		const mutual = d.mutualAspects ?? [];
+		if (aspects.length === 0 && mutual.length === 0) return this.renderEmpty();
+		const date = d.datetime ? String(d.datetime).replace('T', ' ') : '';
+
+		return html`<div class="wrap" aria-label="Vedic aspects">
+			<div class="head">
+				<h2 class="title">Vedic Aspects</h2>
+				${date ? html`<p class="subtitle">${date}</p>` : nothing}
+			</div>
+			${
+				mutual.length > 0
+					? html`<div>
+						<p class="section-label">Mutual aspects</p>
+						<div class="mutual">
+							${mutual.map(
+								(m) => html`<span class="mutual-pill">
+									${m.planet1} ⟷ ${m.planet2}
+									${m.aspectType ? html`<span class="rel">${m.aspectType}</span>` : nothing}
+								</span>`,
+							)}
+						</div>
+					</div>`
+					: nothing
+			}
+			${
+				aspects.length > 0
+					? html`<div class="overflow-scroll">
+						<table>
+							<thead>
+								<tr>
+									<th scope="col">From</th>
+									<th scope="col">Aspect</th>
+									<th scope="col">To</th>
+									<th scope="col">Strength</th>
+									<th scope="col">Orb</th>
+								</tr>
+							</thead>
+							<tbody>
+								${aspects.map(
+									(a) => html`<tr>
+										<td>${a.aspectingPlanet}</td>
+										<td><span class="kind">${a.aspectType}</span></td>
+										<td>${a.aspectedPlanet}</td>
+										<td>
+											${typeof a.strength === 'number' ? html`<span class="bar" style="width:${Math.max(4, Math.min(100, a.strength) * 0.4)}px"></span><span class="num">${formatNumber(a.strength, 0)}</span>` : nothing}
+										</td>
+										<td class="num">${typeof a.orb === 'number' ? `${formatNumber(a.orb, 2)}°` : ''}</td>
+									</tr>`,
+								)}
+							</tbody>
+						</table>
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-vedic-aspects': RoxyVedicAspects;
+	}
+}

package/src/components/vedic-kundli.ts

@@ -1,6 +1,7 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { BirthChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
 	type ChartStyle,
@@ -10,7 +11,6 @@ import {
 	toKundliViewModel,
 } from '../utils/kundli-render.js';
 import { kundliStyles } from '../utils/kundli-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { tablistStyles } from '../utils/tablist.js';
 
 /**
@@ -24,43 +24,70 @@ import { tablistStyles } from '../utils/tablist.js';
  * page sets the initial style via `chart-style` attribute; from there the
  * user takes over.
  *
+ * The ascendant (house 1) defaults to the Janma Lagna carried in the response
+ * `meta`. Set `chart-reference="moon"` to render the Chandra Lagna (Moon as
+ * ascendant) from the same response, or `lagna-override="<rashi>"` to pin the
+ * reference to any sign (Surya Lagna, Arudha Lagna, a custom point). The same
+ * planet-in-sign data feeds every reference; only the house numbering rotates.
+ *
  * Theming flows through CSS custom properties on `:host`, so the chart
  * adopts the host page palette without runtime color probing.
  */
 @customElement('roxy-vedic-kundli')
-export class RoxyVedicKundli extends LitElement {
+export class RoxyVedicKundli extends RoxyDataElement<BirthChartResponse> {
 	static styles = [baseStyles, kundliStyles, tablistStyles];
 
-	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: BirthChartResponse | null = null;
-
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
 	chartStyle: ChartStyle = 'north';
 
+	/**
+	 * Ascendant reference point. `'lagna'` (default) uses the Janma Lagna from the response; `'moon'` renders the Chandra Lagna (Moon sign as house 1) from the same response. An explicit {@link lagnaOverride} wins over this.
+	 */
+	@property({ type: String, reflect: true, attribute: 'chart-reference' })
+	chartReference: 'lagna' | 'moon' = 'lagna';
+
+	/**
+	 * Explicit rashi/sign name (case-insensitive, e.g. `"cancer"`) to use as the ascendant, overriding both the Janma Lagna and {@link chartReference}. Empty by default (standard Janma Lagna). Use for Surya Lagna, Arudha Lagna, or any custom reference chart.
+	 */
+	@property({ type: String, reflect: true, attribute: 'lagna-override' })
+	lagnaOverride = '';
+
+	/**
+	 * Resolve the ascendant override fed to {@link toKundliViewModel}. An explicit `lagna-override` wins; otherwise `chart-reference="moon"` derives the Moon rashi from the response `meta`. Returns `undefined` for the default Janma Lagna path.
+	 */
+	private resolveReference(): string | undefined {
+		if (this.lagnaOverride) return this.lagnaOverride;
+		if (this.chartReference === 'moon') return this.data?.meta?.Moon?.rashi;
+		return undefined;
+	}
+
 	private viewModel(): KundliViewModel | null {
 		if (!this.data?.meta) return null;
-		return toKundliViewModel(this.data.meta, 'D1 Rashi');
+		return toKundliViewModel(
+			this.data.meta,
+			'D1 Rashi',
+			this.resolveReference(),
+		);
 	}
 
 	private setStyle = (next: ChartStyle) => {
 		this.chartStyle = next;
 	};
 
-	render() {
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No kundli data</div>`;
+	}
+
+	protected renderData(_d: BirthChartResponse) {
 		const vm = this.viewModel();
-		if (!vm)
-			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
+		if (!vm) return this.renderEmpty();
+		const title =
+			this.chartReference === 'moon' && !this.lagnaOverride
+				? 'Chandra lagna'
+				: 'Vedic kundli';
 		return html`<div class="wrap">
 			<div class="header">
-				<h2 class="title">Vedic kundli</h2>
+				<h2 class="title">${title}</h2>
 				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
 			</div>
 			<svg

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

@@ -1,12 +1,12 @@
-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, SIGN_GLYPH } from '../tokens/index.js';
 import type { BirthChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatSignPosition } from '../utils/degree.js';
 import { chevron, disclosureStyles } from '../utils/disclosure.js';
 import { formatNumber } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 /**
@@ -44,7 +44,7 @@ type MetaEntry = BirthChartResponse['meta'][string];
  * non-empty.
  */
 @customElement('roxy-vedic-planets-table')
-export class RoxyVedicPlanetsTable extends LitElement {
+export class RoxyVedicPlanetsTable extends RoxyDataElement<BirthChartResponse> {
 	static styles = [
 		baseStyles,
 		disclosureStyles,
@@ -52,7 +52,7 @@ export class RoxyVedicPlanetsTable extends LitElement {
 			.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);
 				box-shadow: var(--roxy-shadow-sm);
 				overflow: hidden;
 			}
@@ -214,17 +214,6 @@ export class RoxyVedicPlanetsTable 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: BirthChartResponse | null = null;
-
 	/** Ordered [name, entry] pairs: GRAHA_ORDER first, then any extras. */
 	private orderedRows(): Array<[string, MetaEntry]> {
 		const meta = this.data?.meta ?? {};
@@ -243,9 +232,12 @@ export class RoxyVedicPlanetsTable extends LitElement {
 		return rows;
 	}
 
-	render() {
-		if (!this.data?.meta)
-			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	}
+
+	protected renderData(d: BirthChartResponse) {
+		if (!d.meta) return this.renderEmpty();
 		const rows = this.orderedRows();
 
 		return html`<div class="wrap" aria-label="Vedic planetary positions">

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

@@ -1,11 +1,11 @@
-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, SIGN_GLYPH } from '../tokens/index.js';
 import type { NatalChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { formatSignPosition } from '../utils/degree.js';
 import { formatNumber } from '../utils/format.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { capitalize } from '../utils/string.js';
 
 /** A body or point row, normalized so planets and the four angles share a table. */
@@ -27,14 +27,14 @@ interface BodyRow {
  * the four chart points (Ascendant, Midheaven, Part of Fortune, Vertex).
  */
 @customElement('roxy-western-planets-table')
-export class RoxyWesternPlanetsTable extends LitElement {
+export class RoxyWesternPlanetsTable extends RoxyDataElement<NatalChartResponse> {
 	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: auto;
 				box-shadow: var(--roxy-shadow-sm);
 			}
@@ -93,17 +93,6 @@ export class RoxyWesternPlanetsTable 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: NatalChartResponse | null = null;
-
 	/** Build the ordered row list: the planets array, then the four chart points. */
 	private rows(): BodyRow[] {
 		const d = this.data;
@@ -134,9 +123,12 @@ export class RoxyWesternPlanetsTable extends LitElement {
 		return rows;
 	}
 
-	render() {
-		if (!this.data?.planets)
-			return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No chart data</div>`;
+	}
+
+	protected renderData(d: NatalChartResponse) {
+		if (!d.planets) return this.renderEmpty();
 		const rows = this.rows();
 
 		return html`<div class="wrap" aria-label="Western planetary positions" tabindex="0">

package/src/components/yoga-list.ts

@@ -1,12 +1,17 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import type { GetYogaResponse, ListYogasResponse } from '../types/index.js';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import type {
+	DetectYogasResponse,
+	GetYogaResponse,
+	ListYogasResponse,
+} 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 YogaListData =
 	| ListYogasResponse
 	| GetYogaResponse
+	| DetectYogasResponse
 	| { yogas: Array<GetYogaResponse> };
 
 /**
@@ -18,7 +23,7 @@ type YogaListData =
  * Catalog and detail-array modes include a live search filter.
  */
 @customElement('roxy-yoga-list')
-export class RoxyYogaList extends LitElement {
+export class RoxyYogaList extends RoxyDataElement<YogaListData> {
 	static styles = [
 		baseStyles,
 		css`
@@ -55,7 +60,7 @@ export class RoxyYogaList extends LitElement {
 				font-family: var(--roxy-font-sans);
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				color: var(--roxy-fg, #0a0a0a);
 				outline: none;
 			}
@@ -77,7 +82,7 @@ export class RoxyYogaList extends LitElement {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				font-size: var(--roxy-text-sm, 0.875rem);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				color: var(--roxy-fg, #0a0a0a);
 				word-break: break-word;
 			}
@@ -92,7 +97,7 @@ export class RoxyYogaList extends LitElement {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-md, 1rem);
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				display: grid;
 				gap: var(--roxy-space-sm, 0.5rem);
 			}
@@ -172,17 +177,6 @@ export class RoxyYogaList 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: YogaListData | null = null;
-
 	@state()
 	private filter = '';
 
@@ -217,11 +211,11 @@ export class RoxyYogaList extends LitElement {
 		</div>`;
 	}
 
-	render() {
-		if (!this.data)
-			return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No yoga data</div>`;
+	}
 
-		const d = this.data;
+	protected renderData(d: YogaListData) {
 		const lc = this.filter.toLowerCase();
 
 		// Detail mode: single GetYogaResponse