@roxyapi/ui 0.11.0 → 0.12.1

package/src/components/fixed-stars.ts

@@ -0,0 +1,254 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { SIGN_GLYPH } from '../tokens/index.js';
+import type { FixedStarsResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatDegreeInSign } from '../utils/degree.js';
+import { chevron, disclosureStyles } from '../utils/disclosure.js';
+import { formatNumber } from '../utils/format.js';
+import { capitalize } from '../utils/string.js';
+
+type Star = FixedStarsResponse['stars'][number];
+
+/**
+ * Fixed stars table. Leads with the high-value view from a
+ * /astrology/fixed-stars response: every star-to-natal-point conjunction sorted
+ * tightest first, each with its reading. The full precessed star catalog
+ * (position, magnitude, traditional nature, keywords) sits in a secondary
+ * disclosure so the contacts stay front and center.
+ */
+@customElement('roxy-fixed-stars')
+export class RoxyFixedStars extends RoxyDataElement<FixedStarsResponse> {
+	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);
+			}
+			.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;
+			}
+			.empty-note {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			.subhead {
+				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);
+			}
+			.contact {
+				display: inline-flex;
+				align-items: baseline;
+				gap: 0.4rem;
+			}
+			.contact .point {
+				color: var(--roxy-accent-ink, #b45309);
+				font-weight: 600;
+			}
+			.interp-aside {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+			.interp-aside small {
+				color: var(--roxy-muted, #71717a);
+				font-weight: 400;
+				font-variant-numeric: tabular-nums;
+			}
+			.interp-body {
+				margin-top: var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.catalog summary {
+				cursor: pointer;
+				font-weight: 600;
+				color: var(--roxy-fg, #0a0a0a);
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+			.scroll {
+				overflow-x: auto;
+				margin-top: var(--roxy-space-sm, 0.5rem);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			th,
+			td {
+				text-align: left;
+				padding: 6px 10px;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				white-space: nowrap;
+				vertical-align: top;
+			}
+			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;
+			}
+			.sg {
+				color: var(--roxy-secondary, #475569);
+				margin-right: 0.3rem;
+			}
+			.kw {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.2rem;
+				white-space: normal;
+				max-width: 18rem;
+			}
+			.kw span {
+				padding: 0 6px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No fixed star data</div>`;
+	}
+
+	protected renderData(data: FixedStarsResponse) {
+		const conjunctions = data.conjunctions ?? [];
+		const stars = data.stars ?? [];
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">Fixed stars</h2>
+				${
+					typeof data.orb === 'number'
+						? html`<span class="badge"><b>Orb</b> ${formatNumber(data.orb, 1)}°</span>`
+						: nothing
+				}
+			</header>
+			${data.summary ? html`<p class="summary">${data.summary}</p>` : nothing}
+			${
+				conjunctions.length
+					? html`<section>
+						<p class="subhead">Conjunctions to the chart</p>
+						${conjunctions.map((c, i) => {
+							return html`<details class="interp-card" name="fixed-star-contacts" ?open=${i === 0}>
+								<summary>
+									<span class="contact"><span class="point">${c.point}</span> conjunct ${c.star}</span>
+									<span class="interp-aside">
+										<small>orb ${formatNumber(c.orb, 2)}°</small>
+										${chevron()}
+									</span>
+								</summary>
+								${c.interpretation ? html`<div class="interp-body">${c.interpretation}</div>` : nothing}
+							</details>`;
+						})}
+					</section>`
+					: html`<p class="empty-note">No star sits within the orb of a natal point.</p>`
+			}
+			${stars.length ? this.renderCatalog(stars) : nothing}
+		</div>`;
+	}
+
+	private renderCatalog(stars: Star[]) {
+		return html`<details class="catalog">
+			<summary>${chevron()} Star catalog (${stars.length})</summary>
+			<div class="scroll">
+				<table>
+					<caption class="subhead">Precessed positions for the chart date</caption>
+					<thead>
+						<tr>
+							<th scope="col">Star</th>
+							<th scope="col">Position</th>
+							<th scope="col" class="num">Mag</th>
+							<th scope="col">Nature</th>
+							<th scope="col">Keywords</th>
+						</tr>
+					</thead>
+					<tbody>
+						${stars.map((s) => {
+							const g = SIGN_GLYPH[capitalize(s.sign)];
+							return html`<tr>
+								<td>${s.name}</td>
+								<td>${g ? html`<span class="sg">${g}</span>` : nothing}${formatDegreeInSign(s.degree)} ${s.sign}</td>
+								<td class="num">${formatNumber(s.magnitude, 1)}</td>
+								<td>${s.nature}</td>
+								<td>
+									<div class="kw">${(s.keywords ?? []).map((k) => html`<span>${k}</span>`)}</div>
+								</td>
+							</tr>`;
+						})}
+					</tbody>
+				</table>
+			</div>
+		</details>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-fixed-stars': RoxyFixedStars;
+	}
+}

package/src/components/hd-variables.ts

@@ -80,7 +80,14 @@ export class RoxyHdVariables extends RoxyDataElement<CalculateVariablesResponse>
 	];
 
 	protected renderData(d: CalculateVariablesResponse) {
-		const arrows = d.arrows ?? [];
+		// Place the arrows by their bodygraph `position`, not response order: the
+		// 2-col grid fills row-major, so sorting to Top left, Top right, Bottom left,
+		// Bottom right keeps the design column (Determination + Environment) on the
+		// left and the personality column (Motivation + Perspective) on the right,
+		// which is the whole point of the four-arrow layout.
+		const arrows = [...(d.arrows ?? [])].sort(
+			(a, b) => quadrantOrder(a.position) - quadrantOrder(b.position),
+		);
 		return html`<div class="wrap" aria-label="Human Design variables">
 			<h2 class="title">Variables</h2>
 			<div class="grid">${arrows.map((a) => this.renderArrow(a))}</div>
@@ -110,7 +117,12 @@ export class RoxyHdVariables extends RoxyDataElement<CalculateVariablesResponse>
 			</span>
 			${
 				typeof a.color === 'number'
-					? html`<span class="ctb">Color ${a.color} · Tone ${a.tone} · Base ${a.base}</span>`
+					? html`<span class="ctb">Color ${a.color} · Tone ${a.tone} · Base ${a.base}${a.activation?.planet ? ` · ${a.activation.planet}${a.activation.side ? ` (${a.activation.side})` : ''}` : ''}</span>`
+					: nothing
+			}
+			${
+				a.confident === false
+					? html`<span class="note" role="note">Knife-edge: could flip with a more precise birth time.</span>`
 					: nothing
 			}
 		</div>`;
@@ -121,6 +133,22 @@ export class RoxyHdVariables extends RoxyDataElement<CalculateVariablesResponse>
 	}
 }
 
+/** Canonical bodygraph reading order for the four arrows, so the 2-col grid lays them out by quadrant. Unknown positions sort last. */
+function quadrantOrder(position: string | undefined): number {
+	switch (position) {
+		case 'Top left':
+			return 0;
+		case 'Top right':
+			return 1;
+		case 'Bottom left':
+			return 2;
+		case 'Bottom right':
+			return 3;
+		default:
+			return 99;
+	}
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-hd-variables': RoxyHdVariables;

package/src/components/hexagram.ts

@@ -266,18 +266,18 @@ export class RoxyHexagram extends RoxyDataElement<HexagramData> {
 		</article>`;
 	}
 
-	/** When the API only ships symbol+number with no line array, render six solid yang. */
+	/**
+	 * Lines for a static hexagram (lookup/random/daily, which carry no cast `lines` array): read the `binary` pattern. Per the spec it is 6 digits bottom to top, 1 = yang (solid), 0 = yin (broken), so index 0 is line 1 (bottom). Mapped to the same 7 = solid / 8 = broken code the renderer uses for cast lines. Falls back to all-yang only if `binary` is malformed. The Unicode `symbol` block (U+4DC0) is in King Wen order, NOT line order, so it must never be used to derive the lines.
+	 */
 	private derivedLines(h: Hexagram): number[] {
-		// Map each character of the unicode hexagram block (U+4DC0..) to broken/solid
-		const cp = h.symbol.codePointAt(0) ?? 0;
-		if (cp >= 0x4dc0 && cp <= 0x4dff) {
-			const offset = cp - 0x4dc0;
-			const lines: number[] = [];
-			for (let i = 0; i < 6; i++) {
-				const broken = (offset >> i) & 1;
-				lines.push(broken ? 8 : 7);
-			}
-			return lines;
+		const binary = h.binary ?? '';
+		if (/^[01]{6}$/.test(binary)) {
+			// `binary` is top to bottom (index 0 = line 6), verified against the
+			// canonical encoding: hexagram 46 (Earth over Wind) is "000110", which is
+			// Earth/Wind only when read top down. The renderer expects bottom to top
+			// (line 1 first, like the cast `lines` array), so reverse. 1 = yang
+			// (solid, 7), 0 = yin (broken, 8).
+			return Array.from(binary, (c) => (c === '1' ? 7 : 8)).reverse();
 		}
 		return Array.from({ length: 6 }, () => 7);
 	}

package/src/components/local-space-compass.ts

@@ -0,0 +1,299 @@
+import { css, html, nothing, svg } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { LocalSpaceResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { planetColor } from '../utils/planet-color.js';
+
+type Body = LocalSpaceResponse['bodies'][number];
+
+const SIZE = 320;
+const CENTER = SIZE / 2;
+const RIM = 128;
+const SPOKE = 118;
+const GLYPH_R = 140;
+const TICK_LABEL_R = 150;
+
+// Compass azimuth (0 = north, clockwise) to a screen point. North is up, east
+// is right, matching how the local space line is read off a real compass.
+function azimuthPoint(az: number, r: number): { x: number; y: number } {
+	const rad = (az * Math.PI) / 180;
+	return { x: CENTER + r * Math.sin(rad), y: CENTER - r * Math.cos(rad) };
+}
+
+const PRINCIPAL = [
+	{ az: 0, label: 'N' },
+	{ az: 45, label: 'NE' },
+	{ az: 90, label: 'E' },
+	{ az: 135, label: 'SE' },
+	{ az: 180, label: 'S' },
+	{ az: 225, label: 'SW' },
+	{ az: 270, label: 'W' },
+	{ az: 315, label: 'NW' },
+];
+
+/**
+ * Local space compass. Plots each body from a /astrology/local-space response as
+ * a directional line radiating from the birthplace at its azimuth (0 = north,
+ * clockwise), with a 16-point ring. Bodies below the horizon are dimmed. Color
+ * is per body and theme-token driven.
+ */
+@customElement('roxy-local-space-compass')
+export class RoxyLocalSpaceCompass extends RoxyDataElement<LocalSpaceResponse> {
+	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);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+				color: var(--roxy-primary, #0f172a);
+			}
+			.meta {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			svg {
+				display: block;
+				width: 100%;
+				max-width: var(--roxy-chart-max-width, 480px);
+				aspect-ratio: 1 / 1;
+				height: auto;
+				margin: 0 auto;
+			}
+			.dial {
+				fill: none;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.dial-fill {
+				fill: color-mix(in srgb, var(--roxy-border, #e4e4e7) 10%, transparent);
+				stroke: var(--roxy-border, #e4e4e7);
+				stroke-width: 1;
+			}
+			.cardinal-axis {
+				stroke: var(--roxy-border, #e4e4e7);
+				stroke-width: 0.5;
+			}
+			.tick {
+				stroke: var(--roxy-secondary, #475569);
+				stroke-width: 0.6;
+				opacity: 0.5;
+			}
+			.compass-label {
+				fill: var(--roxy-secondary, #475569);
+				font-size: 9px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+			.compass-label.cardinal {
+				fill: var(--roxy-fg, #0a0a0a);
+			}
+			.center-dot {
+				fill: var(--roxy-fg, #0a0a0a);
+			}
+			.spoke {
+				stroke-width: 1.4;
+			}
+			.spoke.below {
+				stroke-dasharray: 3 3;
+				opacity: 0.4;
+			}
+			.body-glyph {
+				font-size: 11px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+			.body-glyph.below {
+				opacity: 0.45;
+			}
+			.list {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.list th,
+			.list td {
+				text-align: left;
+				padding: 4px 8px;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.list th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			.list td.num {
+				text-align: right;
+				font-variant-numeric: tabular-nums;
+			}
+			.body-cell {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.4rem;
+			}
+			.body-dot {
+				width: 10px;
+				height: 10px;
+				border-radius: 50%;
+				flex-shrink: 0;
+			}
+			.horizon-pill {
+				padding: 1px 7px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			.horizon-pill.up {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+			.horizon-pill.down {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 55%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.summary {
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No local space data</div>`;
+	}
+
+	protected renderData(data: LocalSpaceResponse) {
+		const bodies = data.bodies ?? [];
+		const bd = data.birthDetails;
+		return html`<div class="wrap">
+			<header>
+				<h2 class="title">Local space</h2>
+				${
+					bd
+						? html`<div class="meta">${[bd.date, bd.time].filter(Boolean).join(' · ')}</div>`
+						: nothing
+				}
+			</header>
+			${this.renderDial(bodies)}
+			${data.summary ? html`<p class="summary">${data.summary}</p>` : nothing}
+			${this.renderList(bodies)}
+		</div>`;
+	}
+
+	private renderDial(bodies: Body[]) {
+		return html`<svg
+			viewBox="0 0 ${SIZE} ${SIZE}"
+			role="img"
+			aria-label="Local space compass of planetary directions from the birthplace"
+		>
+			<title>Local space compass</title>
+			<desc>
+				A compass centered on the birthplace. Each body is a line pointing to
+				its azimuth, clockwise from north. Bodies below the horizon are dimmed.
+			</desc>
+			<circle class="dial-fill" cx=${CENTER} cy=${CENTER} r=${RIM} />
+			<circle class="dial" cx=${CENTER} cy=${CENTER} r=${RIM * 0.66} stroke-width="0.5" />
+			<circle class="dial" cx=${CENTER} cy=${CENTER} r=${RIM * 0.33} stroke-width="0.5" />
+			${this.renderCompassRing()}
+			${this.renderSpokes(bodies)}
+			<circle class="center-dot" cx=${CENTER} cy=${CENTER} r="2.5" />
+		</svg>`;
+	}
+
+	private renderCompassRing() {
+		const ticks = [];
+		// 16-point ring: a tick every 22.5 degrees.
+		for (let az = 0; az < 360; az += 22.5) {
+			const outer = azimuthPoint(az, RIM);
+			const inner = azimuthPoint(az, RIM - (az % 45 === 0 ? 8 : 4));
+			ticks.push(
+				svg`<line class="tick" x1=${inner.x} y1=${inner.y} x2=${outer.x} y2=${outer.y} />`,
+			);
+		}
+		// Cardinal cross.
+		const ns1 = azimuthPoint(0, RIM);
+		const ns2 = azimuthPoint(180, RIM);
+		const ew1 = azimuthPoint(90, RIM);
+		const ew2 = azimuthPoint(270, RIM);
+		const labels = PRINCIPAL.map(({ az, label }) => {
+			const pos = azimuthPoint(az, TICK_LABEL_R);
+			const cardinal = az % 90 === 0;
+			return svg`<text class=${`compass-label${cardinal ? ' cardinal' : ''}`} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${label}</text>`;
+		});
+		return svg`
+			<line class="cardinal-axis" x1=${ns1.x} y1=${ns1.y} x2=${ns2.x} y2=${ns2.y} />
+			<line class="cardinal-axis" x1=${ew1.x} y1=${ew1.y} x2=${ew2.x} y2=${ew2.y} />
+			${ticks}${labels}`;
+	}
+
+	private renderSpokes(bodies: Body[]) {
+		return bodies.map((b, i) => {
+			const color = planetColor(b.planet, i);
+			const below = b.aboveHorizon === false;
+			const end = azimuthPoint(b.azimuth, SPOKE);
+			const glyphPos = azimuthPoint(b.azimuth, GLYPH_R);
+			const glyph = b.symbol || b.planet.slice(0, 2);
+			const altLabel = `${b.altitude > 0 ? '+' : ''}${Math.round(b.altitude)}°`;
+			return svg`<g>
+				<line class=${`spoke${below ? ' below' : ''}`} stroke=${color} x1=${CENTER} y1=${CENTER} x2=${end.x} y2=${end.y}><title>${b.planet} ${b.compassDirection} ${Math.round(b.azimuth)}° altitude ${altLabel}</title></line>
+				<text class=${`body-glyph${below ? ' below' : ''}`} fill=${color} x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central">${glyph}</text>
+			</g>`;
+		});
+	}
+
+	private renderList(bodies: Body[]) {
+		if (bodies.length === 0) return nothing;
+		return html`<table class="list">
+			<thead>
+				<tr>
+					<th>Body</th>
+					<th>Direction</th>
+					<th class="num">Azimuth</th>
+					<th class="num">Altitude</th>
+					<th>Horizon</th>
+				</tr>
+			</thead>
+			<tbody>
+				${bodies.map((b, i) => {
+					const color = planetColor(b.planet, i);
+					const below = b.aboveHorizon === false;
+					return html`<tr>
+						<td>
+							<span class="body-cell">
+								<span class="body-dot" style=${`background: ${color}`}></span>
+								${b.symbol ? html`${b.symbol} ` : nothing}${b.planet}
+							</span>
+						</td>
+						<td>${b.compassDirection}</td>
+						<td class="num">${Math.round(b.azimuth)}°</td>
+						<td class="num">${b.altitude > 0 ? '+' : ''}${Math.round(b.altitude)}°</td>
+						<td>
+							<span class=${`horizon-pill ${below ? 'down' : 'up'}`}>
+								${below ? 'Below' : 'Above'}
+							</span>
+						</td>
+					</tr>`;
+				})}
+			</tbody>
+		</table>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-local-space-compass': RoxyLocalSpaceCompass;
+	}
+}

package/src/components/moon-phase.ts

@@ -139,7 +139,9 @@ export class RoxyMoonPhase extends RoxyDataElement<MoonPhaseData> {
 	}
 
 	private renderSingle(d: GetCurrentMoonPhaseResponse) {
-		const emoji = phaseEmoji(d.phase);
+		// The API ships the exact phase emoji in meaning.symbol; prefer it and fall
+		// back to the name-derived glyph for the list endpoints that omit meaning.
+		const emoji = d.meaning?.symbol || phaseEmoji(d.phase);
 		return html`<article class="card" aria-label="Current moon phase">
 			<div class="hero">
 				<span class="emoji" aria-hidden="true">${emoji}</span>
@@ -207,9 +209,26 @@ export class RoxyMoonPhase extends RoxyDataElement<MoonPhaseData> {
 	}
 }
 
+/**
+ * Map a phase name to its emoji, tolerant of the live API naming. The API sends
+ * suffixed names ("Waxing Gibbous Moon") and "Third Quarter Moon" where the map
+ * keys are unsuffixed and use "last quarter"; only "new moon"/"full moon" keep
+ * the suffix. Try the raw lowercase, then the suffix stripped, then the
+ * third->last quarter alias, then the alias re-suffixed, so every one of the
+ * eight phases resolves in both the suffixed and unsuffixed forms.
+ */
 function phaseEmoji(phase: string | undefined): string {
 	if (!phase) return '🌙';
-	return MOON_PHASE_EMOJI[phase.toLowerCase()] ?? '🌙';
+	const lc = phase.toLowerCase().trim();
+	const noMoon = lc.replace(/\s*moon$/, '').trim();
+	const alias = noMoon === 'third quarter' ? 'last quarter' : noMoon;
+	return (
+		MOON_PHASE_EMOJI[lc] ??
+		MOON_PHASE_EMOJI[noMoon] ??
+		MOON_PHASE_EMOJI[alias] ??
+		MOON_PHASE_EMOJI[`${alias} moon`] ??
+		'🌙'
+	);
 }
 
 function formatIllumination(v: number): string {