@roxyapi/ui 0.8.1 → 0.10.0

package/src/components/crystal-grid.ts

@@ -0,0 +1,191 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type {
+	GetBirthstonesResponse,
+	GetCrystalsByChakraResponse,
+	GetCrystalsByElementResponse,
+	GetCrystalsByZodiacResponse,
+	ListCrystalsResponse,
+	SearchCrystalsResponse,
+} from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.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 LitElement {
+	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-bg, #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);
+			}
+		`,
+	];
+
+	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: CrystalGridData | null = null;
+
+	/**
+	 * 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 = '';
+
+	render() {
+		const d = this.data;
+		const crystals = d?.crystals ?? [];
+		if (!d || crystals.length === 0)
+			return html`<div class="roxy-empty" role="status">No crystals</div>`;
+
+		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/dream-card.ts

@@ -0,0 +1,98 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { GetDreamSymbolResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { MarkupDataController } from '../utils/markup-data.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 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;
+				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;
+			}
+		`,
+	];
+
+	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: GetDreamSymbolResponse | null = null;
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No dream symbol</div>`;
+
+		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>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-dream-card': RoxyDreamCard;
+	}
+}

package/src/components/numerology-card.ts

@@ -3,16 +3,26 @@ import { customElement, property } from 'lit/decorators.js';
 import type {
 	CalculateExpressionResponse,
 	CalculateLifePathResponse,
+	CalculatePersonalityResponse,
 	CalculatePersonalYearResponse,
+	CalculateSoulUrgeResponse,
 	GenerateNumerologyChartResponse,
 } from '../types/index.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { MarkupDataController } from '../utils/markup-data.js';
 import { humanize } from '../utils/string.js';
 
-type NumerologyData =
+/**
+ * Single-number numerology responses that share the number + meaning + calculation + karmic-debt shape. {@link RoxyNumerologyCard.renderNumberCard} renders any of them; the `type` attribute selects only the heading label.
+ */
+type NumberCardData =
 	| CalculateLifePathResponse
 	| CalculateExpressionResponse
+	| CalculateSoulUrgeResponse
+	| CalculatePersonalityResponse;
+
+type NumerologyData =
+	| NumberCardData
 	| CalculatePersonalYearResponse
 	| GenerateNumerologyChartResponse;
 
@@ -135,7 +145,13 @@ export class RoxyNumerologyCard extends LitElement {
 	data: NumerologyData | null = null;
 
 	@property({ type: String, reflect: true })
-	type: 'life-path' | 'expression' | 'personal-year' | 'chart' = 'life-path';
+	type:
+		| 'life-path'
+		| 'expression'
+		| 'soul-urge'
+		| 'personality'
+		| 'personal-year'
+		| 'chart' = 'life-path';
 
 	render() {
 		const d = this.data;
@@ -146,16 +162,10 @@ export class RoxyNumerologyCard extends LitElement {
 
 		if ('coreNumbers' in d) return this.renderChart(d, headerLabel);
 		if ('personalYear' in d) return this.renderPersonalYear(d, headerLabel);
-		return this.renderNumberCard(
-			d as CalculateLifePathResponse | CalculateExpressionResponse,
-			headerLabel,
-		);
+		return this.renderNumberCard(d as NumberCardData, headerLabel);
 	}
 
-	private renderNumberCard(
-		d: CalculateLifePathResponse | CalculateExpressionResponse,
-		headerLabel: string,
-	) {
+	private renderNumberCard(d: NumberCardData, headerLabel: string) {
 		const keywords = d.meaning?.keywords ?? [];
 		return html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
@@ -230,6 +240,8 @@ export class RoxyNumerologyCard extends LitElement {
 const LABELS: Record<string, string> = {
 	'life-path': 'Life Path',
 	expression: 'Expression',
+	'soul-urge': 'Soul Urge',
+	personality: 'Personality',
 	'personal-year': 'Personal Year',
 	chart: 'Numerology chart',
 };

package/src/components/vedic-kundli.ts

@@ -24,6 +24,12 @@ 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.
  */
@@ -45,9 +51,34 @@ export class RoxyVedicKundli extends LitElement {
 	@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) => {
@@ -58,9 +89,13 @@ export class RoxyVedicKundli extends LitElement {
 		const vm = this.viewModel();
 		if (!vm)
 			return html`<div class="roxy-empty" role="status">No kundli data</div>`;
+		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/index.ts

@@ -5,6 +5,9 @@
  *   import '@roxyapi/ui/components/natal-chart';
  */
 
+// Angel numbers
+export { RoxyAngelNumberCard } from './components/angel-number-card.js';
+export { RoxyAngelNumberLookup } from './components/angel-number-lookup.js';
 export { RoxyAshtakavargaGrid } from './components/ashtakavarga-grid.js';
 // Biorhythm
 export { RoxyBiorhythmChart } from './components/biorhythm-chart.js';
@@ -12,11 +15,15 @@ export { RoxyBiorhythmChart } from './components/biorhythm-chart.js';
 export { RoxyBodygraph } from './components/bodygraph.js';
 export { RoxyChoghadiyaGrid } from './components/choghadiya-grid.js';
 export { RoxyCompatibilityCard } from './components/compatibility-card.js';
+// Crystals
+export { RoxyCrystalGrid } from './components/crystal-grid.js';
 export { RoxyDashaTimeline } from './components/dasha-timeline.js';
 // Generic fallback first so it is always available for nested rendering
 export { RoxyData } from './components/data.js';
 export { RoxyDivisionalChart } from './components/divisional-chart.js';
 export { RoxyDoshaCard } from './components/dosha-card.js';
+// Dreams
+export { RoxyDreamCard } from './components/dream-card.js';
 // Helpers
 export { RoxyEndpointForm } from './components/endpoint-form.js';
 // Forecast
@@ -48,6 +55,13 @@ export { RoxyVedicPlanetsTable } from './components/vedic-planets-table.js';
 export { RoxyWesternPlanetsTable } from './components/western-planets-table.js';
 export { RoxyYogaList } from './components/yoga-list.js';
 
+// SSR helpers for the server-rendered hydration path (Pattern 7). Safe writers
+// for the inline <script class="roxy-data"> the MarkupDataController reads.
+export {
+	roxyDataScript,
+	serializeRoxyData,
+} from './utils/markup-data.js';
+
 import { ROXY_COMPONENTS, type RoxyComponentSlug } from './manifest.js';
 
 export {

package/src/manifest.ts

@@ -130,10 +130,11 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		slug: 'vedic-kundli',
 		heading: 'Vedic kundli',
 		description:
-			'South, North, or East Indian Vedic kundli for /vedic-astrology/birth-chart with per-planet degree and nakshatra detail',
+			'South, North, or East Indian Vedic kundli for /vedic-astrology/birth-chart with per-planet degree and nakshatra detail, plus an optional Chandra Lagna (Moon-as-ascendant) reference view',
 		docsLabel: 'Vedic',
 		endpointLabel: 'POST /vedic-astrology/birth-chart',
-		docsSummary: 'South, North, or East Indian kundli with degree detail',
+		docsSummary:
+			'South, North, or East Indian kundli with degree detail and optional Chandra Lagna view',
 		topic: 'Vedic',
 	},
 	{
@@ -305,11 +306,12 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		slug: 'numerology-card',
 		heading: 'Life path number',
 		description:
-			'Numerology card for life path, expression, personal year, or full chart',
+			'Numerology card for life path, expression, soul urge, personality, personal year, or full chart',
 		docsLabel: 'Numerology',
 		endpointLabel:
-			'POST /numerology/{life-path,expression,personal-year,chart}',
-		docsSummary: 'Life path, expression, personal year, full chart',
+			'POST /numerology/{life-path,expression,soul-urge,personality,personal-year,chart}',
+		docsSummary:
+			'Life path, expression, soul urge, personality, personal year, full chart',
 		topic: 'Numerology',
 	},
 	{
@@ -386,6 +388,56 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		docsSummary: 'Hexagram with trigrams, judgment, image, changing lines',
 		topic: 'I Ching',
 	},
+	{
+		pascal: 'RoxyCrystalGrid',
+		tag: 'roxy-crystal-grid',
+		slug: 'crystal-grid',
+		heading: 'Crystal grid',
+		description:
+			'Responsive crystal gallery with photo, name, and colour swatches from any crystals list response',
+		docsLabel: 'Crystals',
+		endpointLabel:
+			'GET /crystals, /crystals/chakra/{chakra}, /crystals/element/{element}, /crystals/zodiac/{sign}, /crystals/birthstone/{month}, /crystals/search',
+		docsSummary: 'Crystal gallery tiles with photo, name, and colour swatches',
+		topic: 'Crystals',
+	},
+	{
+		pascal: 'RoxyDreamCard',
+		tag: 'roxy-dream-card',
+		slug: 'dream-card',
+		heading: 'Dream symbol',
+		description:
+			'Dream symbol card with the symbol name, full interpretation, and dictionary letter',
+		docsLabel: 'Dreams',
+		endpointLabel: 'GET /dreams/symbols/{id}',
+		docsSummary: 'Symbol name, interpretation body, and letter chip',
+		topic: 'Dreams',
+	},
+	{
+		pascal: 'RoxyAngelNumberCard',
+		tag: 'roxy-angel-number-card',
+		slug: 'angel-number-card',
+		heading: 'Angel number',
+		description:
+			'Angel number card with title, core message, badges, keywords, life-area interpretations, affirmation, and action steps',
+		docsLabel: 'Angel Numbers',
+		endpointLabel: 'GET /angel-numbers/numbers/{number}',
+		docsSummary:
+			'Number meaning with spiritual, love, career, and twin flame sections',
+		topic: 'Angel Numbers',
+	},
+	{
+		pascal: 'RoxyAngelNumberLookup',
+		tag: 'roxy-angel-number-lookup',
+		slug: 'angel-number-lookup',
+		heading: 'Angel number lookup',
+		description:
+			'Angel number sequence analysis with pattern classification, the known meaning when present, and a digit-root fallback for any number',
+		docsLabel: 'Angel Numbers',
+		endpointLabel: 'GET /angel-numbers/lookup',
+		docsSummary: 'Pattern analysis plus known meaning and digit-root fallback',
+		topic: 'Angel Numbers',
+	},
 	{
 		pascal: 'RoxyEndpointForm',
 		tag: 'roxy-endpoint-form',