@roxyapi/ui 0.11.0 → 0.12.0

package/src/components/reference-card.ts

@@ -40,7 +40,15 @@ const PROSE_KEYS = new Set([
 	'motto',
 ]);
 /** Keys never shown as their own row/section (rendered elsewhere or noise). */
-const SKIP_KEYS = new Set(['id', 'symbol', 'keywords', ...TITLE_KEYS]);
+const SKIP_KEYS = new Set(['id', 'symbol', ...TITLE_KEYS]);
+
+/** Best-effort one-line label for an object inside an array (e.g. a gate channel partner), joining its primitive values so it never renders as [object Object]. */
+function objectLabel(obj: Record<string, unknown>): string {
+	return Object.values(obj)
+		.filter((v) => typeof v === 'string' || typeof v === 'number')
+		.map(String)
+		.join(' · ');
+}
 
 @customElement('roxy-reference-card')
 export class RoxyReferenceCard extends RoxyDataElement<ReferenceData> {
@@ -140,17 +148,41 @@ export class RoxyReferenceCard extends RoxyDataElement<ReferenceData> {
 		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;
+		// Bucket each field into prose / chip-list / fact. Recurses one level into
+		// nested objects (description {short,long}, keywords {positive,negative},
+		// meaning {...}, ichingHexagram {number,english}) and labels object-array
+		// items by their primitives, so nested content is never dropped and an array
+		// of objects never stringifies to [object Object].
+		const collect = (label: string, value: unknown, depth: number): void => {
+			if (value == null) return;
 			if (Array.isArray(value)) {
-				const items = value.filter((v) => v != null).map(String);
-				if (items.length > 0) lists.push([key, items]);
+				const items = value
+					.filter((v) => v != null)
+					.map((v) =>
+						typeof v === 'object'
+							? objectLabel(v as Record<string, unknown>)
+							: String(v),
+					)
+					.filter((s) => s.length > 0);
+				if (items.length > 0) lists.push([label, items]);
 			} else if (typeof value === 'string') {
-				if (PROSE_KEYS.has(key) || value.length > 48) prose.push([key, value]);
-				else facts.push([key, value]);
+				if (PROSE_KEYS.has(label) || value.length > 48)
+					prose.push([label, value]);
+				else facts.push([label, value]);
 			} else if (typeof value === 'number' || typeof value === 'boolean') {
-				facts.push([key, String(value)]);
+				facts.push([label, String(value)]);
+			} else if (typeof value === 'object' && depth < 2) {
+				for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+					collect(`${label} ${k}`, v, depth + 1);
+				}
 			}
+		};
+		for (const [key, value] of Object.entries(rec)) {
+			if (SKIP_KEYS.has(key)) continue;
+			// The hero chip row already shows a top-level keywords ARRAY; an object
+			// keywords ({positive,negative}) falls through to collect() instead.
+			if (key === 'keywords' && Array.isArray(value)) continue;
+			collect(key, value, 0);
 		}
 
 		return html`<article class="card" aria-label=${title}>

package/src/components/relocation-wheel.ts

@@ -0,0 +1,170 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+// Registers <roxy-natal-chart>, reused below as the wheel renderer. The
+// relocation response is structurally a natal chart (same planets, houses, and
+// angles), so the wheel is shared rather than duplicated.
+import './natal-chart.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type {
+	NatalChartResponse,
+	RelocationChartResponse,
+} from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+type HouseChange =
+	RelocationChartResponse['changes']['planetsChangedHouse'][number];
+
+const glyphFor = (name: string): string =>
+	PLANET_GLYPH[capitalize(name)] ?? PLANET_GLYPH[name] ?? '';
+
+/**
+ * Relocation chart. The birth instant is unchanged, so every planet keeps its
+ * natal sign and degree while the houses and angles are recomputed for a new
+ * place. Reuses {@link RoxyNatalChart} for the wheel (identical data shape) and
+ * adds the relocation read: the move geometry, the planets that change house,
+ * and the bodies pulled onto a relocated angle.
+ */
+@customElement('roxy-relocation-wheel')
+export class RoxyRelocationWheel extends RoxyDataElement<RelocationChartResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.stack {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.changes {
+				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);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				color: var(--roxy-primary, #0f172a);
+			}
+			.move {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.summary {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				margin: 0;
+			}
+			.block-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				color: var(--roxy-muted, #71717a);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+			}
+			.chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.chip {
+				padding: 2px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 16%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.moves-list {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+				display: grid;
+				gap: 2px;
+			}
+			.moves-list li {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.moves-list .arrow {
+				color: var(--roxy-muted, #71717a);
+			}
+			.empty-note {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No relocation data</div>`;
+	}
+
+	protected renderData(data: RelocationChartResponse) {
+		const c = data.changes;
+		return html`<div class="stack">
+			<roxy-natal-chart
+				heading="Relocation chart"
+				.data=${data as unknown as NatalChartResponse}
+			></roxy-natal-chart>
+			<section class="changes">
+				<h3 class="title">What changes at this location</h3>
+				<div class="move">
+					${
+						typeof c?.distanceKm === 'number'
+							? html`<span>${Math.round(c.distanceKm).toLocaleString()} km ${c.direction ?? ''} of birthplace</span>`
+							: nothing
+					}
+					${
+						c
+							? html`<span>Ascendant ${c.ascendantSignChanged ? 'changes sign' : 'keeps its sign'}</span>`
+							: nothing
+					}
+				</div>
+				${
+					data.interpretation?.summary
+						? html`<p class="summary">${data.interpretation.summary}</p>`
+						: nothing
+				}
+				${
+					c?.angularPlanets?.length
+						? html`<div>
+							<p class="block-label">Angular planets here</p>
+							<div class="chips">
+								${c.angularPlanets.map((p) => html`<span class="chip">${glyphFor(p)} ${p}</span>`)}
+							</div>
+						</div>`
+						: nothing
+				}
+				<div>
+					<p class="block-label">Planets that change house</p>
+					${
+						c?.planetsChangedHouse?.length
+							? html`<ul class="moves-list">
+								${c.planetsChangedHouse.map(
+									(m: HouseChange) =>
+										html`<li>${glyphFor(m.planet)} ${m.planet}: house ${m.natalHouse} <span class="arrow">to</span> ${m.relocatedHouse}</li>`,
+								)}
+							</ul>`
+							: html`<p class="empty-note">No planet changes house at this location.</p>`
+					}
+				</div>
+			</section>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-relocation-wheel': RoxyRelocationWheel;
+	}
+}

package/src/components/yoga-list.ts

@@ -15,12 +15,13 @@ type YogaListData =
 	| { yogas: Array<GetYogaResponse> };
 
 /**
- * Yoga catalog and detail renderer. Accepts three data modes:
+ * Yoga catalog and detail renderer. Accepts four data modes:
  *   - Catalog: ListYogasResponse (yogas array of {id, name} + total)
  *   - Detail: GetYogaResponse (single yoga with description, result, quality)
  *   - Detail array: { yogas: Array<GetYogaResponse> } for pre-filtered sets
+ *   - Detect: DetectYogasResponse (each yoga carries a present verdict + evidence); present yogas render first, each badged present/absent with its classical evidence
  *
- * Catalog and detail-array modes include a live search filter.
+ * All multi-item modes include a live search filter.
  */
 @customElement('roxy-yoga-list')
 export class RoxyYogaList extends RoxyDataElement<YogaListData> {
@@ -132,6 +133,30 @@ export class RoxyYogaList extends RoxyDataElement<YogaListData> {
 				color: var(--roxy-warning-fg, #b45309);
 				border: 1px solid color-mix(in srgb, var(--roxy-warning, #f59e0b) 40%, transparent);
 			}
+			.present-badge {
+				display: inline-block;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+			}
+			.present-badge.is-present {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+			.present-badge.is-absent {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 55%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.detail-card.absent {
+				opacity: 0.72;
+			}
+			.evidence {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
 			.description {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -211,6 +236,27 @@ export class RoxyYogaList extends RoxyDataElement<YogaListData> {
 		</div>`;
 	}
 
+	/** Detect-mode card: shows the present/absent verdict and the classical evidence that triggered or failed it. */
+	private renderDetectCard(y: DetectYogasResponse['yogas'][number]) {
+		return html`<div class="detail-card ${y.present ? '' : 'absent'}">
+			<p class="detail-name">
+				${y.name}
+				${y.quality ? this.renderQualityChip(y.quality) : nothing}
+				<span class="present-badge ${y.present ? 'is-present' : 'is-absent'}">${y.present ? 'Present' : 'Not present'}</span>
+			</p>
+			${y.description ? html`<p class="description">${y.description}</p>` : nothing}
+			${
+				y.present && y.result
+					? html`<details>
+						<summary>Effects</summary>
+						<div class="result-body">${y.result}</div>
+					</details>`
+					: nothing
+			}
+			${y.evidence ? html`<p class="evidence">${y.evidence}</p>` : nothing}
+		</div>`;
+	}
+
 	protected renderEmpty() {
 		return html`<div class="roxy-empty" role="status">No yoga data</div>`;
 	}
@@ -232,6 +278,53 @@ export class RoxyYogaList extends RoxyDataElement<YogaListData> {
 			const allYogas = (
 				d as { yogas: Array<GetYogaResponse | { id: string; name: string }> }
 			).yogas;
+
+			// Detect mode: every entry carries a `present` verdict. Render present
+			// yogas first, mark each present/absent, and surface the classical
+			// evidence. Must precede the detail-array check because detect entries
+			// also carry `description`.
+			if (allYogas.length > 0 && 'present' in allYogas[0]) {
+				const detected = allYogas as DetectYogasResponse['yogas'];
+				const filtered = lc
+					? detected.filter((y) => y.name.toLowerCase().includes(lc))
+					: detected;
+				const ordered = [
+					...filtered.filter((y) => y.present),
+					...filtered.filter((y) => !y.present),
+				];
+				const presentCount =
+					(d as DetectYogasResponse).total ??
+					detected.filter((y) => y.present).length;
+				return html`<div class="wrap">
+					<div class="head">
+						<h2 class="title">Detected yogas</h2>
+						<span class="count">${presentCount} of ${detected.length} present</span>
+					</div>
+					<div class="search-wrap">
+						<input
+							class="search"
+							type="search"
+							placeholder="Filter yogas..."
+							aria-label="Filter detected yogas by name"
+							.value=${this.filter}
+							@input=${this.handleInput}
+						/>
+					</div>
+					<div
+						class="detail-grid"
+						role="region"
+						aria-live="polite"
+						aria-label="Detected yogas"
+					>
+						${
+							ordered.length > 0
+								? ordered.map((y) => this.renderDetectCard(y))
+								: html`<p class="no-results">No yogas match your search.</p>`
+						}
+					</div>
+				</div>`;
+			}
+
 			const isDetailArray = allYogas.length > 0 && 'description' in allYogas[0];
 
 			if (isDetailArray) {

package/src/generated/endpoint-bindings.ts

@@ -53,6 +53,13 @@ export const ENDPOINT_BINDINGS: Record<string, EndpointBinding[]> = {
 			path: '/astrology/transit-aspects',
 		},
 	],
+	'roxy-astrocartography-map': [
+		{
+			operationId: 'generateAstrocartography',
+			method: 'POST',
+			path: '/astrology/astrocartography',
+		},
+	],
 	'roxy-biorhythm-chart': [
 		{
 			operationId: 'getCriticalDays',
@@ -216,6 +223,13 @@ export const ENDPOINT_BINDINGS: Record<string, EndpointBinding[]> = {
 			path: '/dreams/symbols',
 		},
 	],
+	'roxy-fixed-stars': [
+		{
+			operationId: 'generateFixedStars',
+			method: 'POST',
+			path: '/astrology/fixed-stars',
+		},
+	],
 	'roxy-forecast-digest': [
 		{
 			operationId: 'generateDigest',
@@ -329,6 +343,13 @@ export const ENDPOINT_BINDINGS: Record<string, EndpointBinding[]> = {
 			path: '/vedic-astrology/kp/ruling-planets',
 		},
 	],
+	'roxy-local-space-compass': [
+		{
+			operationId: 'generateLocalSpace',
+			method: 'POST',
+			path: '/astrology/local-space',
+		},
+	],
 	'roxy-moon-phase': [
 		{
 			operationId: 'getMoonCalendar',
@@ -477,6 +498,40 @@ export const ENDPOINT_BINDINGS: Record<string, EndpointBinding[]> = {
 			},
 		},
 	],
+	'roxy-positions-table': [
+		{
+			operationId: 'calculateArabicLots',
+			method: 'POST',
+			path: '/astrology/arabic-lots',
+		},
+		{
+			operationId: 'generateAsteroids',
+			method: 'POST',
+			path: '/astrology/asteroids',
+		},
+		{
+			operationId: 'generateLilith',
+			method: 'POST',
+			path: '/astrology/lilith',
+		},
+		{
+			operationId: 'generateProgressions',
+			method: 'POST',
+			path: '/astrology/progressions',
+		},
+		{
+			operationId: 'generateSolarArc',
+			method: 'POST',
+			path: '/astrology/solar-arc',
+		},
+	],
+	'roxy-profection-card': [
+		{
+			operationId: 'generateProfections',
+			method: 'POST',
+			path: '/astrology/profections',
+		},
+	],
 	'roxy-reference-card': [
 		{
 			operationId: 'getPlanetMeaning',
@@ -519,6 +574,13 @@ export const ENDPOINT_BINDINGS: Record<string, EndpointBinding[]> = {
 			path: '/vedic-astrology/rashis/{id}',
 		},
 	],
+	'roxy-relocation-wheel': [
+		{
+			operationId: 'generateRelocationChart',
+			method: 'POST',
+			path: '/astrology/relocation-chart',
+		},
+	],
 	'roxy-shadbala-table': [
 		{
 			operationId: 'calculateShadbala',

package/src/index.ts

@@ -11,6 +11,7 @@ export { RoxyAngelNumberLookup } from './components/angel-number-lookup.js';
 export { RoxyAshtakavargaGrid } from './components/ashtakavarga-grid.js';
 // Western astrology
 export { RoxyAspectsTable } from './components/aspects-table.js';
+export { RoxyAstrocartographyMap } from './components/astrocartography-map.js';
 // Biorhythm
 export { RoxyBiorhythmChart } from './components/biorhythm-chart.js';
 // Human Design
@@ -30,6 +31,7 @@ export { RoxyDreamCard } from './components/dream-card.js';
 export { RoxyDreamSearch } from './components/dream-search.js';
 // Helpers
 export { RoxyEndpointForm } from './components/endpoint-form.js';
+export { RoxyFixedStars } from './components/fixed-stars.js';
 // Forecast
 export { RoxyForecastDigest } from './components/forecast-digest.js';
 export { RoxyForecastTimeline } from './components/forecast-timeline.js';
@@ -45,6 +47,7 @@ export { RoxyHoroscopeCard } from './components/horoscope-card.js';
 export { RoxyKpChart } from './components/kp-chart.js';
 export { RoxyKpPlanetsTable } from './components/kp-planets-table.js';
 export { RoxyKpRulingPlanets } from './components/kp-ruling-planets.js';
+export { RoxyLocalSpaceCompass } from './components/local-space-compass.js';
 export { RoxyLocationSearch } from './components/location-search.js';
 export { RoxyMoonPhase } from './components/moon-phase.js';
 export { RoxyNakshatraCard } from './components/nakshatra-card.js';
@@ -53,7 +56,10 @@ export { RoxyNatalChart } from './components/natal-chart.js';
 // Numerology
 export { RoxyNumerologyCard } from './components/numerology-card.js';
 export { RoxyPanchangTable } from './components/panchang-table.js';
+export { RoxyPositionsTable } from './components/positions-table.js';
+export { RoxyProfectionCard } from './components/profection-card.js';
 export { RoxyReferenceCard } from './components/reference-card.js';
+export { RoxyRelocationWheel } from './components/relocation-wheel.js';
 export { RoxyShadbalaTable } from './components/shadbala-table.js';
 export { RoxySynastryChart } from './components/synastry-chart.js';
 // Tarot

package/src/manifest.ts

@@ -126,6 +126,85 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		docsSummary: 'Daily, weekly, or monthly horoscope card',
 		topic: 'Astrology',
 	},
+	{
+		pascal: 'RoxyAstrocartographyMap',
+		tag: 'roxy-astrocartography-map',
+		slug: 'astrocartography-map',
+		heading: 'Astrocartography',
+		description:
+			'Astrocartography world map plotting each body Midheaven, IC, Ascendant, and Descendant relocation lines',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/astrocartography',
+		docsSummary:
+			'World map of planetary MC, IC, Ascendant, and Descendant lines with per-line interpretations',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyLocalSpaceCompass',
+		tag: 'roxy-local-space-compass',
+		slug: 'local-space-compass',
+		heading: 'Local space',
+		description:
+			'Local space compass plotting each body direction from the birthplace by azimuth and altitude',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/local-space',
+		docsSummary:
+			'Compass dial of planetary azimuth lines from the birthplace, dimmed below the horizon',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyRelocationWheel',
+		tag: 'roxy-relocation-wheel',
+		slug: 'relocation-wheel',
+		heading: 'Relocation chart',
+		description:
+			'Relocation chart wheel recomputing houses and angles for a new place, with the planets that change house',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/relocation-chart',
+		docsSummary:
+			'Relocated chart wheel plus the move geometry, angular planets, and planets that change house',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyPositionsTable',
+		tag: 'roxy-positions-table',
+		slug: 'positions-table',
+		heading: 'Positions table',
+		description:
+			'Editorial positions table for asteroids, Black Moon Lilith, secondary progressions, solar arc directions, and the Arabic lots',
+		docsLabel: 'Western',
+		endpointLabel:
+			'POST /astrology/asteroids, /astrology/lilith, /astrology/progressions, /astrology/solar-arc, /astrology/arabic-lots',
+		docsSummary:
+			'Body, sign, degree, and per-shape columns (house, motion, formula, or natal arc) plus each reading',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyFixedStars',
+		tag: 'roxy-fixed-stars',
+		slug: 'fixed-stars',
+		heading: 'Fixed stars',
+		description:
+			'Fixed star conjunctions to the natal chart, tightest first, with the precessed star catalog',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/fixed-stars',
+		docsSummary:
+			'Star to natal point conjunctions with readings, plus a catalog of position, magnitude, nature, and keywords',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyProfectionCard',
+		tag: 'roxy-profection-card',
+		slug: 'profection-card',
+		heading: 'Annual profection',
+		description:
+			'Annual profection card with the profected house and sign, the lord of the year, and its natal placement',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/profections',
+		docsSummary:
+			'Profected house and sign for the year, the lord of the year, its natal placement, and the reading',
+		topic: 'Astrology',
+	},
 	{
 		pascal: 'RoxyCompatibilityCard',
 		tag: 'roxy-compatibility-card',