@roxyapi/ui 0.9.0 → 0.11.0

package/src/components/hd-connection.ts

@@ -0,0 +1,188 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { CalculateConnectionResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
+
+/**
+ * Human Design connection chart. Renders /human-design/connection: the composite of two charts as the electromagnetic / compromise / dominance channels they form together, plus the combined definition and a summary. The HD analog of synastry. Each channel row shows its two gates, name, circuit, the relationship dynamic, and which person carries which gate.
+ */
+@customElement('roxy-hd-connection')
+export class RoxyHdConnection extends RoxyDataElement<CalculateConnectionResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				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);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.count {
+				color: var(--roxy-accent-ink, #b45309);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				font-variant-numeric: tabular-nums;
+			}
+			.def {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
+			.def strong {
+				color: var(--roxy-fg, #0a0a0a);
+				text-transform: capitalize;
+			}
+			.stats {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.stat {
+				display: inline-flex;
+				align-items: baseline;
+				gap: 0.35rem;
+				padding: 2px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.stat b {
+				color: var(--roxy-fg, #0a0a0a);
+				font-variant-numeric: tabular-nums;
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			th,
+			td {
+				text-align: left;
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				white-space: nowrap;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+			tbody tr:last-child td {
+				border-bottom: none;
+			}
+			.gates {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-accent-ink, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.dyn {
+				display: inline-block;
+				padding: 1px 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) 16%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.who {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+			.scroll {
+				overflow-x: auto;
+			}
+		`,
+	];
+
+	protected renderData(d: CalculateConnectionResponse) {
+		const channels = d.channels ?? [];
+		return html`<div class="wrap" aria-label="Human Design connection">
+			<header class="head">
+				<h2 class="title">Connection</h2>
+				${typeof d.totalChannels === 'number' ? html`<span class="count">${d.totalChannels} channels</span>` : nothing}
+			</header>
+			${d.combinedDefinition ? html`<p class="def">Combined definition: <strong>${humanize(String(d.combinedDefinition))}</strong></p>` : nothing}
+			${this.renderSummary(d.summary)}
+			${
+				channels.length > 0
+					? html`<div class="scroll">
+						<table role="table" aria-label="Connection channels">
+							<thead>
+								<tr>
+									<th scope="col">Channel</th>
+									<th scope="col">Gates</th>
+									<th scope="col">Circuit</th>
+									<th scope="col">Dynamic</th>
+									<th scope="col">Held by</th>
+								</tr>
+							</thead>
+							<tbody>
+								${channels.map((c) => this.renderChannel(c))}
+							</tbody>
+						</table>
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderSummary(s: CalculateConnectionResponse['summary'] | undefined) {
+		if (!s) return nothing;
+		// The four ways two charts meet in a channel, in canonical HD order.
+		const rows: Array<[string, number | undefined]> = [
+			['Electromagnetic', s.electromagnetic],
+			['Dominance', s.dominance],
+			['Compromise', s.compromise],
+			['Companionship', s.companionship],
+		];
+		return html`<div class="stats" aria-label="Channel dynamics">
+			${rows.map(([label, n]) => (typeof n === 'number' ? html`<span class="stat">${label} <b>${n}</b></span>` : nothing))}
+		</div>`;
+	}
+
+	private renderChannel(
+		c: NonNullable<CalculateConnectionResponse['channels']>[number],
+	) {
+		const a = c.personAGates ?? [];
+		const b = c.personBGates ?? [];
+		const held =
+			[a.length ? 'A' : '', b.length ? 'B' : ''].filter(Boolean).join(' + ') ||
+			'-';
+		return html`<tr>
+			<td>${c.name ?? ''}</td>
+			<td class="gates">${c.gateA}-${c.gateB}</td>
+			<td>${c.circuit ?? ''}</td>
+			<td>${c.dynamic ? html`<span class="dyn">${c.dynamic}</span>` : ''}</td>
+			<td class="who">${held}</td>
+		</tr>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No connection data</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-hd-connection': RoxyHdConnection;
+	}
+}

package/src/components/hd-penta.ts

@@ -0,0 +1,165 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { CalculatePentaResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+/**
+ * Human Design penta. Renders /human-design/penta: the group field (3 to 5 people) as the penta channels they form, split into the upper (direction) and lower (execution) triangles, with each channel marked defined or open and core or not, and which members hold each gate. The team/business chart.
+ */
+@customElement('roxy-hd-penta')
+export class RoxyHdPenta extends RoxyDataElement<CalculatePentaResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				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);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.count {
+				color: var(--roxy-accent-ink, #b45309);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.stats {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.stat {
+				display: inline-flex;
+				align-items: baseline;
+				gap: 0.35rem;
+				padding: 2px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.stat b {
+				color: var(--roxy-fg, #0a0a0a);
+				font-variant-numeric: tabular-nums;
+			}
+			.section h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.row {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-sm, 0.5rem) 0;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				flex-wrap: wrap;
+			}
+			.row:last-child {
+				border-bottom: none;
+			}
+			.gates {
+				font-variant-numeric: tabular-nums;
+				color: var(--roxy-accent-ink, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+				min-width: 3.5rem;
+			}
+			.cname {
+				flex: 1;
+				min-width: 8rem;
+			}
+			.badge {
+				display: inline-flex;
+				padding: 1px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.badge.defined {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+			.badge.open {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.badge.core {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 18%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+		`,
+	];
+
+	protected renderData(d: CalculatePentaResponse) {
+		const channels = d.channels ?? [];
+		const upper = channels.filter((c) => c.position === 'upper');
+		const lower = channels.filter((c) => c.position === 'lower');
+		return html`<div class="wrap" aria-label="Human Design penta">
+			<header class="head">
+				<h2 class="title">Penta</h2>
+				${typeof d.memberCount === 'number' ? html`<span class="count">${d.memberCount} members</span>` : nothing}
+			</header>
+			${this.renderSummary(d.summary)}
+			${this.renderGroup('Upper (direction)', upper)}
+			${this.renderGroup('Lower (execution)', lower)}
+		</div>`;
+	}
+
+	private renderSummary(s: CalculatePentaResponse['summary'] | undefined) {
+		if (!s) return nothing;
+		const gaps = s.gapGates ?? [];
+		return html`<div class="stats" aria-label="Penta summary">
+			${typeof s.definedChannels === 'number' ? html`<span class="stat">Defined channels <b>${s.definedChannels}</b></span>` : nothing}
+			${typeof s.filledGates === 'number' ? html`<span class="stat">Filled gates <b>${s.filledGates}</b></span>` : nothing}
+			${gaps.length > 0 ? html`<span class="stat">Gap gates <b>${gaps.join(', ')}</b></span>` : nothing}
+			${typeof s.coreDefined === 'boolean' ? html`<span class="stat">${s.coreDefined ? 'Core defined' : 'Core open'}</span>` : nothing}
+		</div>`;
+	}
+
+	private renderGroup(
+		label: string,
+		channels: NonNullable<CalculatePentaResponse['channels']>,
+	) {
+		if (channels.length === 0) return nothing;
+		return html`<div class="section">
+			<h3>${label}</h3>
+			${channels.map(
+				(c) => html`<div class="row">
+					<span class="gates">${c.gateA}-${c.gateB}</span>
+					<span class="cname">${c.name ?? ''}</span>
+					<span class="badge ${c.defined ? 'defined' : 'open'}">${c.defined ? 'Defined' : 'Open'}</span>
+					${c.isCore ? html`<span class="badge core">Core</span>` : nothing}
+				</div>`,
+			)}
+		</div>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No penta data</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-hd-penta': RoxyHdPenta;
+	}
+}

package/src/components/hd-variables.ts

@@ -0,0 +1,128 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import type { CalculateVariablesResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+/**
+ * Human Design variables (the four arrows / PHS). Renders /human-design/variables: the four transformation arrows laid out as they sit on the bodygraph head (top-left/right Determination + Motivation, bottom-left/right Environment + Perspective), each showing its left/right direction, the digestion/environment/awareness/perspective labels, and its color/tone/base. A low-confidence calculation (near a color/tone boundary) is flagged.
+ */
+@customElement('roxy-hd-variables')
+export class RoxyHdVariables extends RoxyDataElement<CalculateVariablesResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				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 {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.arrow {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.arrow-head {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.glyph {
+				font-size: 1.75rem;
+				line-height: 1;
+				color: var(--roxy-accent-ink, #b45309);
+			}
+			.name {
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.layer {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.labels {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.ctb {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				font-variant-numeric: tabular-nums;
+			}
+			.note {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-warning-fg, #9a3412);
+			}
+			@container (max-width: 28rem) {
+				.grid {
+					grid-template-columns: 1fr;
+				}
+			}
+		`,
+	];
+
+	protected renderData(d: CalculateVariablesResponse) {
+		const arrows = d.arrows ?? [];
+		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>
+			${
+				d.confident === false
+					? html`<p class="note" role="note">
+						Low confidence: a birth time near a color or tone boundary${typeof d.confidenceMarginDeg === 'number' ? ` (within ${d.confidenceMarginDeg}°)` : ''}. Verify the exact birth time.
+					</p>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	private renderArrow(
+		a: NonNullable<CalculateVariablesResponse['arrows']>[number],
+	) {
+		// A left arrow is strategic/active, a right arrow receptive/passive in HD.
+		const glyph = a.direction === 'left' ? '←' : '→';
+		return html`<div class="arrow">
+			<div class="arrow-head">
+				<span class="glyph" aria-hidden="true">${glyph}</span>
+				<span class="name">${a.name ?? ''}</span>
+			</div>
+			${a.layer ? html`<span class="layer">${a.layer}</span>` : nothing}
+			<span class="labels">
+				${[a.directionLabel, a.colorLabel].filter(Boolean).join(' · ')}
+			</span>
+			${
+				typeof a.color === 'number'
+					? html`<span class="ctb">Color ${a.color} · Tone ${a.tone} · Base ${a.base}</span>`
+					: nothing
+			}
+		</div>`;
+	}
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No variables data</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-hd-variables': RoxyHdVariables;
+	}
+}

package/src/components/hexagram.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, svg } from 'lit';
+import { css, html, nothing, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TRIGRAM_GLYPH } from '../tokens/index.js';
 import type {
@@ -9,8 +9,8 @@ import type {
 	Hexagram,
 	LookupHexagramResponse,
 } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
 import { baseStyles } from '../utils/base-styles.js';
-import { MarkupDataController } from '../utils/markup-data.js';
 
 type HexagramData =
 	| GetHexagramResponse
@@ -24,12 +24,12 @@ type HexagramData =
  * /iching/daily, /iching/daily/cast.
  */
 @customElement('roxy-hexagram')
-export class RoxyHexagram extends LitElement {
+export class RoxyHexagram extends RoxyDataElement<HexagramData> {
 	static styles = [
 		baseStyles,
 		css`
 			.card {
-				background: var(--roxy-bg, #fff);
+				background: var(--roxy-surface, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
 				padding: var(--roxy-space-lg, 1.5rem);
@@ -137,17 +137,6 @@ export class RoxyHexagram extends LitElement {
 		`,
 	];
 
-	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: HexagramData | null = null;
-
 	@property({ type: String, reflect: true })
 	mode: 'lookup' | 'cast' | 'daily' = 'lookup';
 
@@ -179,10 +168,13 @@ export class RoxyHexagram extends LitElement {
 		return { hex: d as Hexagram };
 	}
 
-	render() {
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No hexagram data</div>`;
+	}
+
+	protected renderData() {
 		const resolved = this.resolveHexagram();
-		if (!resolved)
-			return html`<div class="roxy-empty" role="status">No hexagram data</div>`;
+		if (!resolved) return this.renderEmpty();
 
 		const {
 			hex: h,

package/src/components/hora-table.ts

@@ -0,0 +1,149 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type { GetHoraResponse } from '../types/index.js';
+import { RoxyDataElement } from '../utils/base-element.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+/** HH:MM from a tz-naive ISO local datetime, without reparsing (the times are already wall-clock in the requested timezone). */
+function clockTime(iso: string | undefined): string {
+	if (!iso) return '';
+	const t = String(iso).slice(11, 16);
+	return t || String(iso);
+}
+
+type HoraPeriod = NonNullable<GetHoraResponse['dayHoras']>[number];
+
+/**
+ * Vedic Hora (planetary hours) table. Renders /vedic-astrology/panchang/hora: the 12 daytime and 12 nighttime horas, each ruled by one of the seven classical planets in the Chaldean order, used for electional timing (start a venture in the hora of the planet that favours it). Day horas run sunrise to sunset, night horas sunset to next sunrise; each tile shows the ruling planet and its wall-clock window.
+ */
+@customElement('roxy-hora-table')
+export class RoxyHoraTable extends RoxyDataElement<GetHoraResponse> {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				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);
+			}
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+			.cols {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.section-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+			}
+			.row {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-xs, 0.25rem) 0;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.row:last-child {
+				border-bottom: none;
+			}
+			.glyph {
+				font-size: 1.15em;
+				line-height: 1;
+				color: var(--roxy-accent-ink, #b45309);
+				width: 1.25em;
+				text-align: center;
+			}
+			.planet {
+				flex: 1;
+				font-weight: 500;
+			}
+			.time {
+				color: var(--roxy-muted, #71717a);
+				font-variant-numeric: tabular-nums;
+				white-space: nowrap;
+			}
+			.num {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-variant-numeric: tabular-nums;
+				width: 1.5em;
+				text-align: right;
+			}
+			@container (max-width: 30rem) {
+				.cols {
+					grid-template-columns: 1fr;
+				}
+			}
+		`,
+	];
+
+	protected renderEmpty() {
+		return html`<div class="roxy-empty" role="status">No hora data</div>`;
+	}
+
+	protected renderData(d: GetHoraResponse) {
+		const day = d.dayHoras ?? [];
+		const night = d.nightHoras ?? [];
+		if (day.length === 0 && night.length === 0) return this.renderEmpty();
+
+		return html`<div class="wrap" aria-label="Hora periods">
+			<div class="head">
+				<h2 class="title">Hora</h2>
+				${d.date ? html`<p class="subtitle">${d.date}</p>` : nothing}
+			</div>
+			<div class="cols">
+				${this.renderColumn('Day', day)}
+				${this.renderColumn('Night', night)}
+			</div>
+		</div>`;
+	}
+
+	private renderColumn(label: string, horas: HoraPeriod[]) {
+		if (horas.length === 0) return nothing;
+		return html`<div class="col">
+			<p class="section-label">${label}</p>
+			${horas.map(
+				(h) => html`<div class="row">
+					<span class="glyph" aria-hidden="true">${PLANET_GLYPH[capitalize(h.planet ?? '')] ?? '·'}</span>
+					<span class="planet">${h.planet}</span>
+					<span class="time">${clockTime(h.start)}-${clockTime(h.end)}</span>
+					${typeof h.number === 'number' ? html`<span class="num">${h.number}</span>` : nothing}
+				</div>`,
+			)}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-hora-table': RoxyHoraTable;
+	}
+}