@roxyapi/ui 0.11.0 → 0.12.1

package/src/components/natal-chart.ts

@@ -378,6 +378,10 @@ export class RoxyNatalChart extends RoxyDataElement<NatalChartResponse> {
 	@property({ type: String, attribute: 'house-system', reflect: true })
 	houseSystem: 'placidus' | 'whole-sign' | 'equal' | 'koch' = 'placidus';
 
+	/** Heading above the wheel. Defaults to "Natal chart"; reuse (e.g. the relocation wheel) sets its own. */
+	@property({ type: String })
+	heading = 'Natal chart';
+
 	/** Which view is showing: the wheel or the planet-by-planet aspect grid. */
 	@state()
 	private view: 'wheel' | 'grid' = 'wheel';
@@ -410,7 +414,7 @@ export class RoxyNatalChart extends RoxyDataElement<NatalChartResponse> {
 
 		return html`<div class="wrap">
 			<header>
-				<h2 class="title">Natal chart</h2>
+				<h2 class="title">${this.heading}</h2>
 				${
 					data.birthDetails
 						? html`<div class="meta">
@@ -421,36 +425,44 @@ export class RoxyNatalChart extends RoxyDataElement<NatalChartResponse> {
 						: nothing
 				}
 			</header>
-			${renderTablist({
-				items: [
-					{ id: 'wheel', label: 'Wheel' },
-					{ id: 'grid', label: 'Aspect grid' },
-				],
-				active: view,
-				onSelect: (v) => {
-					this.view = v;
-				},
-				label: 'Natal chart views',
-				idPrefix: 'natal',
-				controls: true,
-			})}
-			<div
-				id="natal-panel-${view}"
-				role="tabpanel"
-				aria-labelledby="natal-tab-${view}"
-			>
-				${view === 'wheel' ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
-			</div>
+			${
+				aspects.length > 0
+					? html`${renderTablist({
+							items: [
+								{ id: 'wheel', label: 'Wheel' },
+								{ id: 'grid', label: 'Aspect grid' },
+							],
+							active: view,
+							onSelect: (v) => {
+								this.view = v;
+							},
+							label: 'Natal chart views',
+							idPrefix: 'natal',
+							controls: true,
+						})}
+						<div
+							id="natal-panel-${view}"
+							role="tabpanel"
+							aria-labelledby="natal-tab-${view}"
+						>
+							${view === 'wheel' ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
+						</div>`
+					: this.renderWheel(planets, aspects)
+			}
 			<div class="legend">
 				<span>${planets.length} planets</span>
-				<span>${aspects.length} aspects</span>
+				${aspects.length > 0 ? html`<span>${aspects.length} aspects</span>` : nothing}
 				${
 					data.houseSystem
 						? html`<span>${data.houseSystem} houses</span>`
 						: nothing
 				}
-				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
-				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
+				${
+					aspects.length > 0
+						? html`<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
+							<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>`
+						: nothing
+				}
 			</div>
 			${this.renderDetails()}
 			${this.renderInterpretations()}

package/src/components/positions-table.ts

@@ -0,0 +1,442 @@
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import type {
+	ArabicLotsResponse,
+	AsteroidsResponse,
+	LilithResponse,
+	ProgressionsResponse,
+	SolarArcResponse,
+} from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import {
+	formatDegreeInSign,
+	longitudeToSignPosition,
+} from '../utils/degree.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
+import { formatNumber } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+/**
+ * Union of the position-list Western responses this one editorial table renders.
+ * Each carries an array of bodies in zodiac signs plus a per-body
+ * interpretation; the table discriminates on which array key is present.
+ */
+type PositionsResponse =
+	| AsteroidsResponse
+	| LilithResponse
+	| ProgressionsResponse
+	| SolarArcResponse
+	| ArabicLotsResponse;
+
+interface Row {
+	label: string;
+	sign: string;
+	degree: number;
+	house?: number;
+	speed?: number;
+	isRetrograde?: boolean;
+	formula?: string;
+	natalLongitude?: number;
+	interpretation?: string;
+	isAngle?: boolean;
+}
+
+interface ViewModel {
+	title: string;
+	badges: Array<{ label: string; value: string }>;
+	summary?: string;
+	rows: Row[];
+	cols: { house: boolean; motion: boolean; formula: boolean; natal: boolean };
+}
+
+/**
+ * Editorial positions table for the Western point-list endpoints: asteroids,
+ * Black Moon Lilith, secondary progressions, solar arc directions, and the
+ * Arabic lots. One component, five shapes: it detects the response by its array
+ * key and shows only the columns that response carries (house, motion, formula,
+ * or a natal-to-directed comparison), then lists each body reading below.
+ */
+@customElement('roxy-positions-table')
+export class RoxyPositionsTable extends RoxyDataElement<PositionsResponse> {
+	static styles = [
+		baseStyles,
+		disclosureStyles,
+		css`
+			.wrap {
+				width: 100%;
+				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);
+			}
+			header {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+				gap: var(--roxy-space-sm, 0.5rem) 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);
+			}
+			.badges {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.badge {
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.badge b {
+				color: var(--roxy-accent-ink, #b45309);
+				font-weight: 600;
+			}
+			.summary {
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			.scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			caption {
+				text-align: left;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				padding-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+			th,
+			td {
+				text-align: left;
+				padding: 6px 10px;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				white-space: nowrap;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			td.num {
+				text-align: right;
+				font-variant-numeric: tabular-nums;
+			}
+			.body-cell {
+				font-weight: 500;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.body-cell .glyph {
+				color: var(--roxy-accent-ink, #b45309);
+				margin-right: 0.35rem;
+			}
+			tr.angle td {
+				color: var(--roxy-secondary, #475569);
+			}
+			.sign {
+				display: inline-flex;
+				align-items: baseline;
+				gap: 0.3rem;
+			}
+			.sign .sg {
+				color: var(--roxy-secondary, #475569);
+			}
+			.retro {
+				color: var(--roxy-danger, #dc2626);
+				font-weight: 600;
+			}
+			.formula {
+				color: var(--roxy-muted, #71717a);
+				font-variant-numeric: tabular-nums;
+				white-space: normal;
+			}
+			.readings h3 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				margin: 0 0 var(--roxy-space-sm, 0.5rem);
+			}
+			.interp-card {
+				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);
+				margin-bottom: var(--roxy-space-xs, 0.25rem);
+			}
+			.interp-card summary {
+				cursor: pointer;
+				font-weight: 500;
+				color: var(--roxy-fg, #0a0a0a);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.interp-aside {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+			.interp-aside small {
+				color: var(--roxy-muted, #71717a);
+				font-weight: 400;
+			}
+			.interp-body {
+				margin-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+		`,
+	];
+
+	/** Override the auto-derived heading. Empty keeps the per-shape default (e.g. "Asteroids"). */
+	@property({ type: String })
+	heading = '';
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No positions data</div>`;
+	}
+
+	protected renderData(data: PositionsResponse) {
+		const vm = this.toViewModel(data);
+		const cols = vm.cols;
+		const readings = vm.rows.filter((r) => r.interpretation);
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">${this.heading || vm.title}</h2>
+				${
+					vm.badges.length
+						? html`<div class="badges">
+							${vm.badges.map((b) => html`<span class="badge"><b>${b.label}</b> ${b.value}</span>`)}
+						</div>`
+						: nothing
+				}
+			</header>
+			${vm.summary ? html`<p class="summary">${vm.summary}</p>` : nothing}
+			<div class="scroll">
+				<table>
+					<caption>
+						${vm.title}
+					</caption>
+					<thead>
+						<tr>
+							<th scope="col">Body</th>
+							<th scope="col">Position</th>
+							${cols.natal ? html`<th scope="col">Natal</th>` : nothing}
+							${cols.house ? html`<th scope="col" class="num">House</th>` : nothing}
+							${cols.motion ? html`<th scope="col">Motion</th>` : nothing}
+							${cols.formula ? html`<th scope="col">Formula</th>` : nothing}
+						</tr>
+					</thead>
+					<tbody>
+						${vm.rows.map((r) => this.renderRow(r, cols))}
+					</tbody>
+				</table>
+			</div>
+			${
+				readings.length
+					? html`<section class="readings">
+						<h3>Readings</h3>
+						${readings.map((r, i) => this.renderReading(r, i === 0))}
+					</section>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderRow(r: Row, cols: ViewModel['cols']) {
+		const glyph = PLANET_GLYPH[capitalize(r.label)];
+		return html`<tr class=${r.isAngle ? 'angle' : ''}>
+			<td class="body-cell">${glyph ? html`<span class="glyph">${glyph}</span>` : nothing}${r.label}</td>
+			<td>${this.signCell(r.sign, r.degree)}</td>
+			${
+				cols.natal
+					? html`<td>${r.natalLongitude != null ? this.signFromLongitude(r.natalLongitude) : html`&mdash;`}</td>`
+					: nothing
+			}
+			${
+				cols.house
+					? html`<td class="num">${r.house != null ? r.house : html`&mdash;`}</td>`
+					: nothing
+			}
+			${
+				cols.motion
+					? html`<td>${
+							r.speed != null
+								? html`${formatNumber(r.speed, 3)}°/day${r.isRetrograde ? html` <span class="retro">℞</span>` : nothing}`
+								: html`&mdash;`
+						}</td>`
+					: nothing
+			}
+			${cols.formula ? html`<td class="formula">${r.formula ?? html`&mdash;`}</td>` : nothing}
+		</tr>`;
+	}
+
+	private signCell(sign: string, degree: number) {
+		const g = SIGN_GLYPH[capitalize(sign)];
+		return html`<span class="sign">${g ? html`<span class="sg">${g}</span>` : nothing}${formatDegreeInSign(degree)} ${sign}</span>`;
+	}
+
+	private signFromLongitude(longitude: number) {
+		const p = longitudeToSignPosition(longitude);
+		return this.signCell(p.sign, p.degree + p.minute / 60);
+	}
+
+	private renderReading(r: Row, open: boolean) {
+		const glyph = PLANET_GLYPH[capitalize(r.label)] ?? '';
+		return html`<details class="interp-card" name="positions-readings" ?open=${open}>
+			<summary>
+				<span>${glyph ? html`${glyph} ` : nothing}${r.label}</span>
+				<span class="interp-aside">
+					<small>${r.sign} ${formatDegreeInSign(r.degree)}</small>
+					${chevron()}
+				</span>
+			</summary>
+			<div class="interp-body">${r.interpretation}</div>
+		</details>`;
+	}
+
+	private toViewModel(data: PositionsResponse): ViewModel {
+		if ('asteroids' in data) {
+			return {
+				title: 'Asteroids',
+				badges: data.houseSystem
+					? [{ label: 'Houses', value: data.houseSystem }]
+					: [],
+				summary: data.summary,
+				cols: { house: true, motion: true, formula: false, natal: false },
+				rows: data.asteroids.map((a) => ({
+					label: a.name,
+					sign: a.sign,
+					degree: a.degree,
+					house: a.house,
+					speed: a.speed,
+					isRetrograde: a.isRetrograde,
+					interpretation: a.interpretation,
+				})),
+			};
+		}
+		if ('lilith' in data) {
+			return {
+				title: 'Black Moon Lilith',
+				badges: data.houseSystem
+					? [{ label: 'Houses', value: data.houseSystem }]
+					: [],
+				summary: data.summary,
+				cols: { house: true, motion: true, formula: false, natal: false },
+				rows: data.lilith.map((l) => ({
+					label: `${capitalize(l.variant)} apogee`,
+					sign: l.sign,
+					degree: l.degree,
+					house: l.house,
+					speed: l.speed,
+					isRetrograde: l.isRetrograde,
+					interpretation: l.interpretation,
+				})),
+			};
+		}
+		if ('directed' in data) {
+			return {
+				title: 'Solar arc directions',
+				badges: [
+					{ label: 'Arc', value: `${formatNumber(data.solarArc, 2)}°` },
+					{ label: 'Directed to', value: data.targetDate },
+				],
+				summary: data.summary,
+				cols: { house: false, motion: false, formula: false, natal: true },
+				rows: data.directed.map((d) => ({
+					label: d.name,
+					sign: d.sign,
+					degree: d.degree,
+					natalLongitude: d.natalLongitude,
+					interpretation: d.interpretation,
+				})),
+			};
+		}
+		if ('lots' in data) {
+			return {
+				title: 'Arabic lots',
+				badges: data.sect
+					? [{ label: 'Sect', value: capitalize(data.sect) }]
+					: [],
+				summary: data.summary,
+				cols: { house: false, motion: false, formula: true, natal: false },
+				rows: data.lots.map((l) => ({
+					label: l.name,
+					sign: l.sign,
+					degree: l.degree,
+					formula: l.formula,
+					interpretation: l.interpretation,
+				})),
+			};
+		}
+		// Secondary progressions: planets plus the progressed angles.
+		const angleRows: Row[] = [];
+		if (data.ascendant) {
+			angleRows.push({
+				label: 'Ascendant',
+				sign: data.ascendant.sign,
+				degree: data.ascendant.degree,
+				isAngle: true,
+			});
+		}
+		if (data.midheaven) {
+			angleRows.push({
+				label: 'Midheaven',
+				sign: data.midheaven.sign,
+				degree: data.midheaven.degree,
+				isAngle: true,
+			});
+		}
+		return {
+			title: 'Secondary progressions',
+			badges: [
+				{ label: 'Progressed to', value: data.targetDate },
+				{
+					label: 'Elapsed',
+					value: `${formatNumber(data.elapsedYears, 1)} yrs`,
+				},
+			],
+			summary: data.summary,
+			cols: { house: true, motion: true, formula: false, natal: false },
+			rows: [
+				...angleRows,
+				...data.planets.map((p) => ({
+					label: p.name,
+					sign: p.sign,
+					degree: p.degree,
+					house: p.house,
+					speed: p.speed,
+					isRetrograde: p.isRetrograde,
+					interpretation: p.interpretation,
+				})),
+			],
+		};
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-positions-table': RoxyPositionsTable;
+	}
+}

package/src/components/profection-card.ts

@@ -0,0 +1,173 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';
+import type { ProfectionsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+/**
+ * Annual profection card. Renders a /astrology/profections response: the year's
+ * profected whole-sign house and sign, the lord of the year and where it sits in
+ * the natal chart, and the reading. A single focal card, not a table.
+ */
+@customElement('roxy-profection-card')
+export class RoxyProfectionCard extends RoxyDataElement<ProfectionsResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				width: 100%;
+				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);
+			}
+			header {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+				justify-content: space-between;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				color: var(--roxy-primary, #0f172a);
+			}
+			.badge {
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.badge b {
+				color: var(--roxy-accent-ink, #b45309);
+				font-weight: 600;
+			}
+			.focus {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+				padding: var(--roxy-space-md, 1rem);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 9%, transparent);
+			}
+			.age {
+				display: grid;
+				justify-items: center;
+				min-width: 4.5rem;
+			}
+			.age .n {
+				font-size: 2rem;
+				font-weight: 700;
+				line-height: 1;
+				color: var(--roxy-accent-ink, #b45309);
+				font-variant-numeric: tabular-nums;
+			}
+			.age .l {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.arrow {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.house {
+				display: grid;
+				gap: 2px;
+			}
+			.house .h {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: 600;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.house .sign {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-secondary, #475569);
+			}
+			.house .sign .sg {
+				margin-right: 0.3rem;
+			}
+			.lord {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: baseline;
+				gap: 0.4rem 0.75rem;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.lord .label {
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			.lord .value {
+				font-weight: 600;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.lord .sub {
+				color: var(--roxy-muted, #71717a);
+			}
+			.interp {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				margin: 0;
+				line-height: var(--roxy-leading-normal, 1.5);
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No profection data</div>`;
+	}
+
+	protected renderData(data: ProfectionsResponse) {
+		const signGlyph = SIGN_GLYPH[capitalize(data.profectedSign ?? '')];
+		const lordGlyph = PLANET_GLYPH[capitalize(data.lordOfYear ?? '')];
+		const lordNatalGlyph =
+			SIGN_GLYPH[capitalize(data.lordNatalPosition?.sign ?? '')];
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">Annual profection</h2>
+				${data.targetDate ? html`<span class="badge"><b>For</b> ${data.targetDate}</span>` : nothing}
+			</header>
+			<div class="focus">
+				<div class="age">
+					<span class="n">${data.age}</span>
+					<span class="l">Age</span>
+				</div>
+				<span class="arrow">activates</span>
+				<div class="house">
+					<span class="h">House ${data.profectedHouse}</span>
+					<span class="sign">${signGlyph ? html`<span class="sg">${signGlyph}</span>` : nothing}${data.profectedSign}</span>
+				</div>
+			</div>
+			<div class="lord">
+				<span class="label">Lord of the year</span>
+				<span class="value">${lordGlyph ? html`${lordGlyph} ` : nothing}${data.lordOfYear}</span>
+				${
+					data.lordNatalPosition
+						? html`<span class="sub">natal ${lordNatalGlyph ? html`<span>${lordNatalGlyph}</span> ` : nothing}${data.lordNatalPosition.sign} · house ${data.lordNatalPosition.house}</span>`
+						: nothing
+				}
+			</div>
+			${data.interpretation ? html`<p class="interp">${data.interpretation}</p>` : nothing}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-profection-card': RoxyProfectionCard;
+	}
+}