@roxyapi/ui 0.1.3 → 0.2.0

package/src/components/choghadiya-grid.ts

@@ -0,0 +1,185 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH } from '../tokens/index.js';
+import type { GetChoghadiyaResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { capitalize } from '../utils/string.js';
+
+type ChoghadiyaPeriod = GetChoghadiyaResponse['dayChoghadiya'][number];
+
+/**
+ * Format an ISO 8601 datetime string to a short local time (HH:MM).
+ * Falls back to the raw string when parsing fails.
+ */
+function fmtTime(iso: string): string {
+	try {
+		const d = new Date(iso);
+		if (Number.isNaN(d.getTime())) return iso;
+		return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+	} catch {
+		return iso;
+	}
+}
+
+/**
+ * Choghadiya muhurta grid. Accepts a GetChoghadiyaResponse and renders
+ * 8 daytime and 8 nighttime muhurta tiles in a two-column responsive layout.
+ * Good periods are highlighted in green, Bad periods in red.
+ */
+@customElement('roxy-choghadiya-grid')
+export class RoxyChoghadiyaGrid extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.header {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.subtitle {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+			}
+			.cho-grid {
+				display: grid;
+				grid-template-columns: 1fr;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			@media (min-width: 720px) {
+				.cho-grid {
+					grid-template-columns: 1fr 1fr;
+				}
+			}
+			.period-col {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.period-heading {
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile {
+				display: grid;
+				grid-template-columns: 1fr auto;
+				align-items: center;
+				gap: 0.25em 0.75em;
+				padding: 0.55em 0.85em;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+			}
+			.cho-tile.good {
+				background: color-mix(in srgb, var(--roxy-success, #22c55e) 18%, transparent);
+				border-color: color-mix(in srgb, var(--roxy-success, #22c55e) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile.bad {
+				background: color-mix(in srgb, var(--roxy-danger, #ef4444) 18%, transparent);
+				border-color: color-mix(in srgb, var(--roxy-danger, #ef4444) 45%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.cho-tile.neutral {
+				background: transparent;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.tile-name {
+				font-size: var(--roxy-text-base, 1rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				grid-column: 1;
+			}
+			.tile-time {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				opacity: 0.8;
+				white-space: nowrap;
+				grid-column: 2;
+				grid-row: 1 / 3;
+				text-align: right;
+				align-self: center;
+			}
+			.tile-lord {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				opacity: 0.85;
+				grid-column: 1;
+				display: flex;
+				align-items: center;
+				gap: 0.25em;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: GetChoghadiyaResponse | null = null;
+
+	private renderTile(period: ChoghadiyaPeriod) {
+		const effectClass =
+			period.effect === 'Good'
+				? 'good'
+				: period.effect === 'Bad'
+					? 'bad'
+					: 'neutral';
+		const lordGlyph = PLANET_GLYPH[capitalize(period.lord)] ?? '';
+		const timeRange = `${fmtTime(period.start)} - ${fmtTime(period.end)}`;
+		return html`<div class="cho-tile ${effectClass}" role="listitem">
+			<span class="tile-name">${period.name}</span>
+			<span class="tile-time" aria-label="Time range">${timeRange}</span>
+			<span class="tile-lord">
+				${lordGlyph ? html`<span aria-hidden="true">${lordGlyph}</span>` : nothing}
+				${period.lord}
+			</span>
+		</div>`;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No choghadiya data</div>`;
+
+		const { date, dayChoghadiya, nightChoghadiya } = this.data;
+
+		return html`<div class="wrap">
+			<div class="header">
+				<h2 class="title">Choghadiya</h2>
+				${date ? html`<p class="subtitle">${date}</p>` : nothing}
+			</div>
+
+			<div class="cho-grid">
+				<section class="period-col" aria-label="Day muhurta periods">
+					<h3 class="period-heading">Day</h3>
+					<div role="list" aria-label="Daytime choghadiya">
+						${
+							dayChoghadiya && dayChoghadiya.length > 0
+								? dayChoghadiya.map((p) => this.renderTile(p))
+								: html`<p class="roxy-empty" role="status">No daytime periods</p>`
+						}
+					</div>
+				</section>
+
+				<section class="period-col" aria-label="Night muhurta periods">
+					<h3 class="period-heading">Night</h3>
+					<div role="list" aria-label="Nighttime choghadiya">
+						${
+							nightChoghadiya && nightChoghadiya.length > 0
+								? nightChoghadiya.map((p) => this.renderTile(p))
+								: html`<p class="roxy-empty" role="status">No nighttime periods</p>`
+						}
+					</div>
+				</section>
+			</div>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-choghadiya-grid': RoxyChoghadiyaGrid;
+	}
+}

package/src/components/data.ts

@@ -1,11 +1,12 @@
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
 /**
- * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders it
- * via field-name heuristics so future spec additions render reasonably without
- * hand-wired components. Mirrors the WordPress GenericRenderer pattern.
+ * Generic fallback renderer. Accepts ANY OpenAPI response shape and renders
+ * it via field-name heuristics so future spec additions render reasonably
+ * without hand-wired components.
  *
  * Heuristic order:
  *   1. Primitive (string, number, boolean) -> single line.
@@ -14,9 +15,8 @@ import { baseStyles } from '../utils/base-styles.js';
  *   4. Object with title-like field -> card with key/value rows.
  *   5. Otherwise -> definition list of all keys.
  *
- * Future spec hint: when the server emits `x-roxy-ui` on a schema, the
- * dispatcher in tool-call (Phase 2.5) will select a hand-tuned component
- * instead of this fallback.
+ * When a schema declares an `x-roxy-ui` hint, a future dispatcher can opt
+ * into a hand-tuned component instead of this fallback.
  */
 
 type Json = string | number | boolean | null | Json[] | { [key: string]: Json };
@@ -196,7 +196,7 @@ export class RoxyData extends LitElement {
 		return html`<table class="roxy-table" role="table">
 			<thead>
 				<tr>
-					${keys.map((k) => html`<th>${this.humanize(k)}</th>`)}
+					${keys.map((k) => html`<th>${humanize(k)}</th>`)}
 				</tr>
 			</thead>
 			<tbody>
@@ -246,7 +246,7 @@ export class RoxyData extends LitElement {
 					? html`<dl class="roxy-rows">
 						${rows.map(
 							([k, v]) => html`
-								<dt>${this.humanize(k)}</dt>
+								<dt>${humanize(k)}</dt>
 								<dd>${this.renderField(v)}</dd>
 							`,
 						)}
@@ -290,13 +290,6 @@ export class RoxyData extends LitElement {
 		}
 		return Array.from(seen);
 	}
-
-	private humanize(key: string): string {
-		return key
-			.replace(/[_-]+/g, ' ')
-			.replace(/([a-z])([A-Z])/g, '$1 $2')
-			.replace(/^\w/, (c) => c.toUpperCase());
-	}
 }
 
 declare global {

package/src/components/divisional-chart.ts

@@ -0,0 +1,214 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PLANET_GLYPH, RASHI_KEYS } from '../tokens/index.js';
+import type { DivisionalChartResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import type { HouseDef } from '../utils/kundli-render.js';
+import {
+	RASHI_TO_SIGN,
+	renderNorthFrame,
+	renderNorthHouseGroup,
+	renderSouthFrame,
+	renderSouthHouseGroup,
+} from '../utils/kundli-render.js';
+
+type RashiBucket = {
+	rashi?: string;
+	signs?: Array<{ graha: string; isRetrograde?: boolean }>;
+};
+type ChartByRashi = { [key: string]: RashiBucket | unknown };
+
+/**
+ * Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
+ * renders the same south/north kundli wheel as the birth chart, plus division
+ * metadata and Vargottama planet pills.
+ */
+@customElement('roxy-divisional-chart')
+export class RoxyDivisionalChart extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.header {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+			.division-meta {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				margin: 0;
+			}
+			.significance {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				border-left: 2px solid var(--roxy-border, #e4e4e7);
+				padding-left: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
+			svg {
+				display: block;
+				width: 100%;
+				max-width: 360px;
+				margin: 0 auto;
+			}
+			.line {
+				fill: transparent;
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.sign-text {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-weight: 500;
+				font-family: var(--roxy-font-sans);
+			}
+			.planet-text {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 11px;
+				font-weight: 600;
+				font-family: var(--roxy-font-sans);
+			}
+			.house-num {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 9px;
+				font-weight: 400;
+				font-family: var(--roxy-font-sans);
+			}
+			.lagna-marker {
+				fill: var(--roxy-accent-fg, #b45309);
+				font-size: 8px;
+				font-weight: 700;
+				font-family: var(--roxy-font-sans);
+				letter-spacing: 0.05em;
+			}
+			.lagna-bg {
+				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
+				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
+				stroke-width: 0.8;
+			}
+			.vargottama-row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				align-items: center;
+			}
+			.vargottama-label {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				font-weight: 500;
+				margin-right: var(--roxy-space-xs, 0.25rem);
+			}
+			.vargottama-pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.2em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: 600;
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 22%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				border: 1px solid color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: DivisionalChartResponse | null = null;
+
+	@property({ type: String, reflect: true, attribute: 'chart-style' })
+	chartStyle: 'south' | 'north' = 'south';
+
+	private buildHouses(): HouseDef[] {
+		if (!this.data) return [];
+		const chart = this.data.chart as ChartByRashi;
+		const meta =
+			(this.data.chart as { meta?: Record<string, { rashi?: string }> }).meta ??
+			{};
+		const lagnaSign = meta.Lagna?.rashi ?? '';
+		const houses: HouseDef[] = [];
+		for (let i = 0; i < 12; i++) {
+			const key = RASHI_KEYS[i];
+			const bucket = chart[key] as RashiBucket | undefined;
+			const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
+			const sign = RASHI_TO_SIGN[key] ?? '';
+			houses.push({
+				number: i + 1,
+				sign,
+				planets,
+				isLagna: lagnaSign
+					? lagnaSign.toLowerCase() === sign.toLowerCase()
+					: false,
+			});
+		}
+		return houses;
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+
+		const { division, vargottama } = this.data;
+		const houses = this.buildHouses();
+		const isNorth = this.chartStyle === 'north';
+
+		return html`<div class="wrap">
+			<div class="header">
+				<h2 class="title">
+					D${division.number} ${division.name}
+					${
+						division.sanskritName && division.sanskritName !== division.name
+							? html`<span class="division-meta"> · ${division.sanskritName}</span>`
+							: nothing
+					}
+				</h2>
+				${
+					division.significance
+						? html`<p class="significance">${division.significance}</p>`
+						: nothing
+				}
+			</div>
+
+			<svg
+				viewBox="0 0 300 300"
+				role="img"
+				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
+			>
+				<title>D${division.number} ${division.name}</title>
+				${isNorth ? renderNorthFrame() : renderSouthFrame()}
+				${
+					isNorth
+						? houses.map((h) => renderNorthHouseGroup(h))
+						: houses.map((h) => renderSouthHouseGroup(h))
+				}
+			</svg>
+
+			${
+				vargottama && vargottama.length > 0
+					? html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
+						<span class="vargottama-label">Vargottama:</span>
+						${vargottama.map(
+							(planet) =>
+								html`<span class="vargottama-pill" role="listitem">
+									${PLANET_GLYPH[planet] ?? ''} ${planet}
+								</span>`,
+						)}
+					</div>`
+					: nothing
+			}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-divisional-chart': RoxyDivisionalChart;
+	}
+}

package/src/components/dosha-card.ts

@@ -65,25 +65,24 @@ export class RoxyDoshaCard extends LitElement {
 				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
 				color: var(--roxy-danger-fg, #991b1b);
 			}
-			.severity {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-			}
-			.severity span {
-				width: 14px;
-				height: 4px;
-				border-radius: 2px;
-				background: var(--roxy-border, #e4e4e7);
-			}
-			.severity.mild span:nth-child(1) {
-				background: var(--roxy-warning, #ea580c);
-			}
-			.severity.moderate span:nth-child(-n + 2) {
-				background: var(--roxy-warning, #ea580c);
-			}
-			.severity.severe span {
-				background: var(--roxy-danger, #dc2626);
+			.severity-bar {
+				position: relative;
+				width: 100%;
+				height: 8px;
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 30%, transparent);
+				border-radius: 4px;
+				overflow: hidden;
+			}
+			.severity-fill {
+				display: block;
+				height: 100%;
+				transition: width var(--roxy-motion-duration, 200ms) ease-out;
+				border-radius: 4px;
+			}
+			@media (prefers-reduced-motion: reduce) {
+				.severity-fill {
+					transition: none;
+				}
 			}
 
 			.description {
@@ -128,7 +127,24 @@ export class RoxyDoshaCard extends LitElement {
 
 		const present = !!d.present;
 		const label = DOSHA_LABELS[this.type] ?? this.type;
-		const sevClass = (d.severity ?? '').toLowerCase();
+		const sevLower = (d.severity ?? '').toLowerCase();
+		const tier =
+			sevLower === 'severe'
+				? 3
+				: sevLower === 'moderate'
+					? 2
+					: sevLower === 'mild'
+						? 1
+						: 0;
+		const pct = tier * 33;
+		const barColor =
+			tier === 3
+				? 'var(--roxy-danger)'
+				: tier === 2
+					? 'var(--roxy-warning)'
+					: tier === 1
+						? 'var(--roxy-success)'
+						: 'transparent';
 
 		return html`<article
 			class="card"
@@ -136,23 +152,24 @@ export class RoxyDoshaCard extends LitElement {
 		>
 			<header class="head">
 				<h2 class="title">${label}</h2>
-				<div style="display:flex; gap:0.5rem; align-items:center;">
-					<span class=${`badge ${present ? 'present' : 'absent'}`}>
-						${present ? 'Present' : 'Absent'}
-					</span>
-					${
-						d.severity
-							? html`<span
-								class=${`severity ${sevClass}`}
-								role="img"
-								aria-label=${`Severity ${d.severity}`}
-							>
-								<span></span><span></span><span></span>
-							</span>`
-							: nothing
-					}
-				</div>
+				<span class=${`badge ${present ? 'present' : 'absent'}`}>
+					${present ? 'Present' : 'Absent'}
+				</span>
 			</header>
+			${
+				d.severity
+					? html`<div
+						class="severity-bar"
+						role="meter"
+						aria-valuemin="0"
+						aria-valuemax="3"
+						aria-valuenow="${tier}"
+						aria-label="Severity ${d.severity}"
+					>
+						<span class="severity-fill" style="width: ${pct}%; background: ${barColor};"></span>
+					</div>`
+					: nothing
+			}
 			${d.description ? html`<p class="description">${d.description}</p>` : nothing}
 			${this.renderEffects(d)}
 			${

package/src/components/endpoint-form.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { baseStyles } from '../utils/base-styles.js';
+import { humanize } from '../utils/string.js';
 
 interface OpenApiSchemaRef {
 	$ref?: string;
@@ -487,13 +488,6 @@ export class RoxyEndpointForm extends LitElement {
 	}
 }
 
-function humanize(s: string): string {
-	return s
-		.replace(/[_-]+/g, ' ')
-		.replace(/([a-z])([A-Z])/g, '$1 $2')
-		.replace(/^\w/, (c) => c.toUpperCase());
-}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		'roxy-endpoint-form': RoxyEndpointForm;