@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/data.ts

@@ -1,7 +1,7 @@
-import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { css, html, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 import { humanize } from '../utils/string.js';
 
 /**
@@ -35,12 +35,12 @@ const SKIP_KEYS = ['imageUrl', 'image']; // rendered separately, not in body row
 const MAX_DEPTH = 6;
 
 @customElement('roxy-data')
-export class RoxyData extends LitElement {
+export class RoxyData extends RoxyDataElement<Json> {
 	static styles = [
 		baseStyles,
 		css`
 			.roxy-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-md, 1rem);
@@ -135,37 +135,18 @@ export class RoxyData 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: Json = null;
-
 	/**
-	 * Internal recursion depth. Nested <roxy-data> instances inherit this from
-	 * the parent and increment to guard against circular references in the
-	 * input. Not part of the public API; do not set from consumer code.
+	 * Internal recursion depth. Nested <roxy-data> instances inherit this from the parent and increment to guard against circular references in the input. Not part of the public API; do not set from consumer code.
 	 */
 	@property({ attribute: false })
 	depth = 0;
 
-	render() {
-		if (this.data == null) {
-			return html`<div class="roxy-empty" role="status">No data</div>`;
-		}
+	protected renderData(data: Json) {
 		if (this.depth >= MAX_DEPTH) {
 			return html`<div class="roxy-empty" role="status">…</div>`;
 		}
-		return html`<div
-			class="roxy-card"
-			aria-label="Generic data display"
-		>
-			${this.renderValue(this.data)}
+		return html`<div class="roxy-card" aria-label="Generic data display">
+			${this.renderValue(data)}
 		</div>`;
 	}
 

package/src/components/divisional-chart.ts

@@ -1,7 +1,8 @@
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { PLANET_GLYPH } from '../tokens/index.js';
 import type { DivisionalChartResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import {
 	type ChartStyle,
@@ -11,7 +12,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';
 
 /**
@@ -23,7 +23,7 @@ import { tablistStyles } from '../utils/tablist.js';
  * map.
  */
 @customElement('roxy-divisional-chart')
-export class RoxyDivisionalChart extends LitElement {
+export class RoxyDivisionalChart extends RoxyDataElement<DivisionalChartResponse> {
 	static styles = [
 		baseStyles,
 		kundliStyles,
@@ -68,17 +68,6 @@ export class RoxyDivisionalChart 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: DivisionalChartResponse | null = null;
-
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
 	chartStyle: ChartStyle = 'north';
 
@@ -93,12 +82,15 @@ export class RoxyDivisionalChart extends LitElement {
 		return toKundliViewModel(this.data.chart.meta, label);
 	}
 
-	render() {
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+	}
+
+	protected renderData(d: DivisionalChartResponse) {
 		const vm = this.viewModel();
-		if (!this.data || !vm)
-			return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+		if (!vm) return this.renderEmpty();
 
-		const { division, vargottama } = this.data;
+		const { division, vargottama } = d;
 
 		return html`<div class="wrap">
 			<div class="header">

package/src/components/dosha-card.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 {
 	KalsarpaResponse,
 	ManglikResponse,
 	SadhesatiResponse,
 } 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 DoshaData = ManglikResponse | KalsarpaResponse | SadhesatiResponse;
 
@@ -21,12 +21,12 @@ const DOSHA_LABELS: Record<string, string> = {
  * Visual severity indicator + remedies + scoped effects.
  */
 @customElement('roxy-dosha-card')
-export class RoxyDoshaCard extends LitElement {
+export class RoxyDoshaCard extends RoxyDataElement<DoshaData> {
 	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);
@@ -115,25 +115,14 @@ export class RoxyDoshaCard 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: DoshaData | null = null;
-
 	@property({ type: String, reflect: true })
 	type: 'manglik' | 'kalsarpa' | 'sadhesati' | string = 'manglik';
 
-	render() {
-		const d = this.data;
-		if (!d)
-			return html`<div class="roxy-empty" role="status">No dosha data</div>`;
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No dosha data</div>`;
+	}
 
+	protected renderData(d: DoshaData) {
 		const present = !!d.present;
 		const label = DOSHA_LABELS[this.type] ?? this.type;
 		const sevLower = (d.severity ?? '').toLowerCase();

package/src/components/dream-card.ts

@@ -0,0 +1,88 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { GetDreamSymbolResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+/**
+ * Dream symbol card. Renders /dreams/symbols/{id}: the symbol name as a heading, the full psychological interpretation as the body, and the dictionary letter as a chip for alphabetical context.
+ */
+@customElement('roxy-dream-card')
+export class RoxyDreamCard extends RoxyDataElement<GetDreamSymbolResponse> {
+	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);
+			}
+			.letter {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				width: 2.5rem;
+				height: 2.5rem;
+				flex: none;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 16%, transparent);
+				color: var(--roxy-accent-ink, #b45309);
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-variant-numeric: tabular-nums;
+			}
+			.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);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.meaning {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.6;
+			}
+		`,
+	];
+
+	protected renderData(d: GetDreamSymbolResponse) {
+		return html`<article class="card" aria-label=${d.name ?? 'Dream symbol'}>
+			<header class="head">
+				${d.letter ? html`<span class="letter" aria-hidden="true">${d.letter}</span>` : nothing}
+				<div>
+					<p class="label">Dream symbol</p>
+					${d.name ? html`<h2 class="name">${d.name}</h2>` : nothing}
+				</div>
+			</header>
+			${d.meaning ? html`<p class="meaning">${d.meaning}</p>` : nothing}
+		</article>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No dream symbol</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-dream-card': RoxyDreamCard;
+	}
+}

package/src/components/dream-search.ts

@@ -0,0 +1,135 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { SearchDreamSymbolsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+type DreamSymbol = NonNullable<SearchDreamSymbolsResponse['symbols']>[number];
+
+/**
+ * Dream-symbol search results. Renders /dreams/symbols (the `q` search): the matched symbols as selectable tiles. In self-fetch mode the base renders the search input and this lists the matches. Selecting a result emits a `roxy-symbol-select` CustomEvent ({ id, name, letter }) that bubbles and is composed, so a host pairs it with a roxy-dream-card to show the full meaning. This is the dreams form-mode analog of roxy-location-search.
+ */
+@customElement('roxy-dream-search')
+export class RoxyDreamSearch extends RoxyDataElement<SearchDreamSymbolsResponse> {
+	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;
+			}
+			.count {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.grid {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.result {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				width: 100%;
+				text-align: left;
+				font: inherit;
+				color: var(--roxy-fg, #0a0a0a);
+				background: transparent;
+				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);
+				cursor: pointer;
+				transition: border-color 0.12s ease, background 0.12s ease;
+			}
+			.result:hover,
+			.result:focus-visible {
+				border-color: var(--roxy-accent, #f59e0b);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
+				outline: none;
+			}
+			.letter {
+				flex: none;
+				width: 1.6rem;
+				height: 1.6rem;
+				display: grid;
+				place-items: center;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 16%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+			}
+			.name {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 500;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No symbols match</div>`;
+	}
+
+	protected renderData(d: SearchDreamSymbolsResponse) {
+		const symbols = d.symbols ?? [];
+		if (symbols.length === 0) return this.renderEmpty();
+		const total = typeof d.total === 'number' ? d.total : symbols.length;
+
+		return html`<section class="wrap" aria-label="Dream symbols">
+			<header class="head">
+				<h2 class="title">Dream Symbols</h2>
+				<span class="count">${total} match${total === 1 ? '' : 'es'}</span>
+			</header>
+			<ul class="grid">
+				${symbols.map(
+					(s) => html`<li>
+						<button type="button" class="result" @click=${() => this.select(s)}>
+							${s.letter ? html`<span class="letter" aria-hidden="true">${s.letter}</span>` : nothing}
+							<span class="name">${s.name}</span>
+						</button>
+					</li>`,
+				)}
+			</ul>
+		</section>`;
+	}
+
+	/** Emit the chosen symbol so a host can load its detail (e.g. into a roxy-dream-card). */
+	private select(s: DreamSymbol) {
+		this.dispatchEvent(
+			new CustomEvent('roxy-symbol-select', {
+				detail: { id: s.id, name: s.name, letter: s.letter },
+				bubbles: true,
+				composed: true,
+			}),
+		);
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-dream-search': RoxyDreamSearch;
+	}
+}