fix(components,utils,tests): correct aspect glyphs, centralize formatting, close the phone width layout gap

Aspect glyphs are now the nine Unicode astrological aspects (260C, 26BA, 2220,
26B9, 25A1, 25B3, 26BC, 26BB, 260D). Semisextile and quincunx were drawn with
the XOR and NAND maths operators and were swapped, so every chart rendered a
150 degree quincunx with the 30 degree symbol and back. Semisquare and
sesquiquadrate had no entry at all and the aspect grid printed the literal
text ses.

Aspect names had four divergent inline normalizers. The aspects endpoint
returns SEMI SEXTILE where synastry returns SEMI_SEXTILE, and only the
underscore was folded, so the space form missed every ASPECT_CLASS and
ASPECT_SYMBOL lookup and the same aspect rendered coloured in one card and in
the neutral fallback in another. normalizeAspect is now the single lookup key
and formatAspectName the single label.

Dates, ranges and ayanamsa move to utils/format.ts the same way: eleven
components were concatenating raw ISO strings beside siblings that formatted
the same field. formatDateTime accepts the split date plus time that birth
details actually arrive as.

Layout: guna-milan clipped its Score column off the card and
local-space-compass pushed its header, dial, summary and table 170px past the
edge at 375px. Both are the grid item min-width auto class. The e2e layout
guard existed but ran only at the Playwright desktop default, and all three
projects are Desktop, so nothing ever measured a card below 1280px. It now
loops 375 / 768 / 1280, and both defects were reproduced by deleting the fix
and re-running.

Every tab now carries an aria-controls that resolves. The APG puts it on each
element with role tab, not just the selected one; the helper emits an empty
hidden panel for the inactive tabs so panel content stays lazy.

Also: dasha bar dates take their grain from the shortest period and keep the
year at day grain, forecast digest orders its window by significance,
relocation names the ascendant sign in both branches instead of contradicting
its own summary, roxy-data drops sections that would render empty, transits
speed carries a unit, and headings are sentence case throughout.

Pages deploys from the release run. The release: [published] trigger in
pages.yml never fired once, because GitHub does not start a workflow from an
event created with the default GITHUB_TOKEN, so the demo sat a release behind.

Author: ph33nx

.github/workflows/pages.yml

@@ -14,8 +14,11 @@ on:
       - 'specs/openapi.json'
       - 'scripts/**'
       - '.github/workflows/pages.yml'
-  release:
-    types: [published]
+  # No `release: [published]` trigger. It looked like it covered releases and
+  # never fired once: GitHub does not start a workflow from an event created
+  # with the default GITHUB_TOKEN, and release.yml creates the Release with
+  # exactly that token. Releases now deploy Pages from inside the release.yml
+  # `deploy-pages` job, which shares this concurrency group.
   workflow_dispatch:
 
 permissions:

.github/workflows/release.yml

@@ -22,6 +22,8 @@ jobs:
     permissions:
       contents: write
       id-token: write
+    outputs:
+      version: ${{ steps.bump.outputs.version }}
     steps:
       - uses: actions/checkout@v7
         with:
@@ -206,6 +208,20 @@ jobs:
           git tag "v$VERSION"
           git push --follow-tags
 
+      # The Pages demo is deployed from THIS run, by the deploy-pages job below.
+      # It cannot be left to pages.yml: the `release: [published]` trigger there
+      # has never once fired, because GitHub does not start a workflow
+      # from an event created with the default GITHUB_TOKEN, and both the
+      # `release: vX` push and the GitHub Release here use exactly that token.
+      # The demo therefore sat one commit behind every release. `apps/docs`
+      # already holds the post-bump build from the "Bump versions and rebuild"
+      # step, so this uploads the correct artifact with no extra build.
+      - name: Upload Pages artifact
+        if: steps.diff.outputs.changed == 'true' || github.event_name == 'workflow_dispatch'
+        uses: actions/upload-pages-artifact@v5
+        with:
+          path: apps/docs
+
       - name: Pack npm tarballs for release assets
         if: steps.diff.outputs.changed == 'true' || github.event_name == 'workflow_dispatch'
         run: |
@@ -224,3 +240,29 @@ jobs:
           make_latest: 'true'
           files: |
             .release-assets/*.tgz
+
+  # Deliberately a SEPARATE job. `actions/deploy-pages` requires the
+  # `github-pages` environment, and an `environment:` on the release job would
+  # add an `environment` claim to its OIDC token. The npm Trusted Publishers for
+  # all three packages were configured WITHOUT an environment, so inlining this
+  # would fail every publish. Keeping it behind `needs:` leaves those claims
+  # byte-identical.
+  deploy-pages:
+    needs: release
+    if: needs.release.outputs.version != ''
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Same group as pages.yml so a release deploy and a push deploy serialize
+    # instead of racing. Not cancel-in-progress: a half-applied deploy is worse
+    # than a slow one.
+    concurrency:
+      group: pages
+      cancel-in-progress: false
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v5

packages/ui/src/components/angel-number-lookup.ts

@@ -149,7 +149,7 @@ export class RoxyAngelNumberLookup extends RoxyDataElement<AnalyzeNumberSequence
 			<div class="hero">
 				${d.number ? html`<div class="numeral">${d.number}</div>` : nothing}
 				<div>
-					<p class="label">Number analysis</p>
+					${known?.title ? html`<p class="label">Number analysis</p>` : nothing}
 					<h2 class="title">${heading}</h2>
 				</div>
 			</div>

packages/ui/src/components/aspects-table.ts

@@ -9,7 +9,7 @@ import type {
 import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { chevron, disclosureStyles } from '../utils/disclosure.js';
-import { formatNumber, normalizeAspect } from '../utils/format.js';
+import { formatAspectName, formatDate, formatNumber } from '../utils/format.js';
 import { interpAccordionStyles } from '../utils/interp-accordion.js';
 import { capitalize } from '../utils/string.js';
 
@@ -296,7 +296,9 @@ export class RoxyAspectsTable extends RoxyDataElement<AspectsData> {
 			return this.renderEmpty();
 
 		// Natal aspects date the chart, transits date the sky.
-		const date = 'transitDate' in d ? d.transitDate : 'date' in d ? d.date : '';
+		const date = formatDate(
+			'transitDate' in d ? d.transitDate : 'date' in d ? d.date : '',
+		);
 		const options = 'options' in d ? d.options : undefined;
 
 		return html`<div class="wrap" aria-label="Aspects">
@@ -379,7 +381,7 @@ export class RoxyAspectsTable extends RoxyDataElement<AspectsData> {
 		return html`<div class="strongest">
 			<span class="label">Strongest</span>
 			<span aria-hidden="true" class="glyph">${g1}</span>${s.planet1}
-			<span class="nature-badge ${nature}">${normalizeAspect(s)}</span>
+			<span class="nature-badge ${nature}">${formatAspectName(s)}</span>
 			<span aria-hidden="true" class="glyph">${g2}</span>${s.planet2}
 			<span class="meta">${s.isApplying ? 'Applying' : 'Separating'} · orb ${formatNumber(s.orb, 2)}° · str ${score(s.strength)}</span>
 		</div>`;
@@ -394,7 +396,7 @@ export class RoxyAspectsTable extends RoxyDataElement<AspectsData> {
 		const g1 = PLANET_GLYPH[capitalize(a.planet1)] ?? '';
 		const g2 = PLANET_GLYPH[capitalize(a.planet2)] ?? '';
 		const nature = (a.interpretation ?? 'neutral').toLowerCase();
-		const type = (a.type ?? '').toLowerCase().replace(/_/g, ' ');
+		const type = formatAspectName(a);
 		const status = a.isApplying ? 'Applying' : 'Separating';
 		// Natal aspects carry `meaning` (static aspect lore); transits carry `transitInterpretation` (timed guidance).
 		const meaning = 'meaning' in a ? a.meaning : undefined;

packages/ui/src/components/astrocartography-map.ts

@@ -4,6 +4,7 @@ import type { AstrocartographyResponse } from '../types/index.js';
 import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { chevron, disclosureStyles } from '../utils/disclosure.js';
+import { formatDateTime } from '../utils/format.js';
 import { interpAccordionStyles } from '../utils/interp-accordion.js';
 import { planetColor } from '../utils/planet-color.js';
 import { WORLD_LAND_PATH } from '../utils/world-map.js';
@@ -209,7 +210,7 @@ export class RoxyAstrocartographyMap extends RoxyDataElement<AstrocartographyRes
 				${
 					bd
 						? html`<div class="meta">
-							${[bd.date, bd.time].filter(Boolean).join(' · ')} ·
+							${formatDateTime(bd.date, bd.time)} ·
 							${formatLat(Math.round(bd.latitude))} ${formatLon(Math.round(bd.longitude))}
 						</div>`
 						: nothing

packages/ui/src/components/biorhythm-chart.ts

@@ -8,7 +8,7 @@ import type {
 import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { disclosureStyles } from '../utils/disclosure.js';
-import { formatDate } from '../utils/format.js';
+import { formatDate, formatDateRange } from '../utils/format.js';
 import {
 	type InterpSection,
 	interpAccordionStyles,
@@ -315,7 +315,7 @@ export class RoxyBiorhythmChart extends RoxyDataElement<BiorhythmData> {
 		return html`<section class="wrap" aria-label="Biorhythm forecast">
 			<header class="head">
 				<h2 class="title">Forecast</h2>
-				<span class="energy">${[d.startDate, d.endDate].filter(Boolean).join(' - ')}</span>
+				<span class="energy">${formatDateRange(d.startDate, d.endDate)}</span>
 			</header>
 			<svg
 				viewBox="0 0 ${w} ${h}"
@@ -413,12 +413,17 @@ export class RoxyBiorhythmChart extends RoxyDataElement<BiorhythmData> {
 		return html`<section class="wrap" aria-label="Critical days">
 			<header class="head">
 				<h2 class="title">Critical days</h2>
-				<span class="energy">${[d.startDate, d.endDate].filter(Boolean).join(' - ')}</span>
+				<span class="energy">${formatDateRange(d.startDate, d.endDate)}</span>
 			</header>
 			<dl class="stats">
 				${this.stat('Events', typeof d.totalCriticalDays === 'number' ? `${d.totalCriticalDays}` : '')}
 				${this.stat('Double days', doubles.length ? `${doubles.length}` : '0')}
-				${this.stat('Triple day', d.tripleCriticalDay ? formatDate(d.tripleCriticalDay) : 'none')}
+				${this.stat(
+					'Triple day',
+					d.tripleCriticalDay
+						? formatDate(d.tripleCriticalDay)
+						: 'None in range',
+				)}
 			</dl>
 			${
 				doubles.length > 0

packages/ui/src/components/choghadiya-grid.ts

@@ -4,7 +4,7 @@ import { PLANET_GLYPH } from '../tokens/index.js';
 import type { GetChoghadiyaResponse } from '../types/index.js';
 import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { formatTimeRange } from '../utils/format.js';
+import { formatDate, formatTimeRange } from '../utils/format.js';
 import { capitalize } from '../utils/string.js';
 
 type ChoghadiyaPeriod = GetChoghadiyaResponse['dayChoghadiya'][number];
@@ -175,7 +175,7 @@ export class RoxyChoghadiyaGrid extends RoxyDataElement<GetChoghadiyaResponse> {
 		return html`<div class="wrap">
 			<div class="header">
 				<h2 class="title">Choghadiya</h2>
-				${date ? html`<p class="subtitle">${date}</p>` : nothing}
+				${date ? html`<p class="subtitle">${formatDate(date)}</p>` : nothing}
 			</div>
 
 			<div class="cho-grid">

packages/ui/src/components/compatibility-card.ts

@@ -15,7 +15,7 @@ import {
 	interpAccordionStyles,
 	renderInterpAccordion,
 } from '../utils/interp-accordion.js';
-import { capitalize } from '../utils/string.js';
+import { capitalize, humanize } from '../utils/string.js';
 
 type CompatibilityData =
 	| CalculateCompatibilityResponse
@@ -286,7 +286,7 @@ export class RoxyCompatibilityCard extends RoxyDataElement<CompatibilityData> {
 			aria-label=${`Compatibility (${this.mode})`}
 		>
 			<div class="head">
-				<h2>${this.mode} compatibility</h2>
+				<h2>${humanize(`${this.mode} compatibility`)}</h2>
 				<div>
 					${
 						typeof score === 'number'

packages/ui/src/components/dasha-timeline.ts

@@ -10,7 +10,12 @@ import type {
 import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
 import { disclosureStyles } from '../utils/disclosure.js';
-import { formatDate, formatNumber } from '../utils/format.js';
+import {
+	formatAyanamsa,
+	formatDate,
+	formatNumber,
+	resolveDisplayDate,
+} from '../utils/format.js';
 import {
 	type InterpSection,
 	interpAccordionStyles,
@@ -258,6 +263,13 @@ export class RoxyDashaTimeline extends RoxyDataElement<DashaData> {
 		const maxYears = periods.length
 			? Math.max(...periods.map((p) => p.durationYears))
 			: 0;
+		// Grain comes from the SHORTEST bar, not the longest: the column has to
+		// resolve every row, and the set is never uniform. A sookshma set whose
+		// longest member is 73 days picked month grain, and its 8 day members
+		// then printed both ends as the same month: `Saturn Jan 1990 - Jan 1990`.
+		const grain = grainFor(
+			periods.length ? Math.min(...periods.map((p) => p.durationYears)) : 0,
+		);
 		const readings = this.readings(d, periods);
 		const frame = this.frameRows(d);
 
@@ -315,7 +327,7 @@ export class RoxyDashaTimeline extends RoxyDataElement<DashaData> {
 							${
 								periods.length > 0
 									? html`<div class="timeline" role="list">
-										${periods.map((p) => this.renderBar(p, maxYears, grainFor(maxYears)))}
+										${periods.map((p) => this.renderBar(p, maxYears, grain))}
 									</div>`
 									: nothing
 							}`
@@ -387,11 +399,13 @@ export class RoxyDashaTimeline extends RoxyDataElement<DashaData> {
 			]);
 		}
 		if ('ayanamsaType' in d && d.ayanamsaType) {
-			const deg =
-				'ayanamsa' in d && typeof d.ayanamsa === 'number'
-					? ` (${formatNumber(d.ayanamsa, 3)}\u00b0)`
-					: '';
-			rows.push(['Ayanamsa', `${d.ayanamsaType}${deg}`]);
+			rows.push([
+				'Ayanamsa',
+				formatAyanamsa(
+					d.ayanamsaType,
+					'ayanamsa' in d ? d.ayanamsa : undefined,
+				),
+			]);
 		}
 		if ('birthDashaBalance' in d && d.birthDashaBalance) {
 			const lord =
@@ -625,18 +639,27 @@ function grainFor(maxYears: number): DateGrain {
 	return 'day';
 }
 
-/** One end of a bar, at the chosen granularity. Day grain drops the year: these rows sit under a parent line that already states it, and the column is only 8rem wide. */
+/**
+ * One end of a bar, at the chosen granularity.
+ *
+ * @remarks
+ * Every grain carries the year. Day grain used to drop it on the grounds that the parent line states it, but a sookshma period routinely straddles new year, so a bar read `28 Dec - 3 Jan` with nothing saying which side moved. A dasha table is a date reference: a practitioner reads a boundary off it and writes it down.
+ *
+ * The API returns naive datetimes (`1990-01-15T14:30:00`), which are wall clocks in the timezone of the CHART, not instants. {@link resolveDisplayDate} pins them to UTC so a boundary landing in the DST gap of the viewer cannot silently shift a day.
+ */
 function formatBoundary(s: string, grain: DateGrain): string {
 	if (grain === 'year') {
 		const m = s.match(/^(\d{4})/);
 		return m ? m[1] : s;
 	}
-	const d = new Date(s);
+	const { d, timeZone } = resolveDisplayDate(s);
 	if (Number.isNaN(d.getTime())) return s;
-	const month = d.toLocaleString('en', { month: 'short' });
-	return grain === 'month'
-		? `${month} ${d.getFullYear()}`
-		: `${d.getDate()} ${month}`;
+	return d.toLocaleDateString('en', {
+		day: grain === 'day' ? 'numeric' : undefined,
+		month: 'short',
+		year: 'numeric',
+		timeZone,
+	});
 }
 
 declare global {

packages/ui/src/components/data.ts

@@ -109,6 +109,22 @@ function isComplex(value: Json): boolean {
 	);
 }
 
+/**
+ * True when a value would render as nothing: `[]`, `{}`, or an object whose every value is itself empty.
+ *
+ * @remarks
+ * An empty object still counts as {@link isComplex}, so it is promoted to a full-width section and draws a heading over a blank body. This is the generic fallback renderer for endpoints with no bespoke component, so it receives whatever shape the API returns and a heading with nothing under it is the most visible way it can look broken.
+ *
+ * Recursive because emptiness nests: `{ breakdown: { western: [], vedic: [] } }` has keys at the top level and still renders as nothing.
+ */
+function isEmptyValue(value: Json): boolean {
+	if (value === null || value === undefined) return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (typeof value !== 'object') return false;
+	const values = Object.values(value as Record<string, Json>);
+	return values.length === 0 || values.every(isEmptyValue);
+}
+
 @customElement('roxy-data')
 export class RoxyData extends RoxyDataElement<Json> {
 	static styles = [
@@ -420,8 +436,7 @@ export class RoxyData extends RoxyDataElement<Json> {
 				k !== summaryKey &&
 				k !== quoteKey &&
 				!SKIP_KEYS.includes(k) &&
-				v !== null &&
-				v !== undefined,
+				!isEmptyValue(v),
 		);
 		// Scalars and primitive arrays fit the two-column rows; objects and
 		// object arrays promote to full-width sections so nested tables are