@roxyapi/ui 0.0.1 → 0.1.2

package/src/components/data.ts

@@ -0,0 +1,287 @@
+import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.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.
+ *
+ * Heuristic order:
+ *   1. Primitive (string, number, boolean) -> single line.
+ *   2. Array of primitives -> chip list.
+ *   3. Array of objects with shared keys -> table.
+ *   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.
+ */
+
+type Json = string | number | boolean | null | Json[] | { [key: string]: Json };
+
+const TITLE_KEYS = ['title', 'name', 'label', 'heading', 'overview', 'summary'];
+const IMAGE_KEYS = ['imageUrl', 'image', 'icon', 'symbol'];
+const SKIP_KEYS = ['imageUrl', 'image']; // rendered separately, not in body rows
+
+@customElement('roxy-data')
+export class RoxyData extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.roxy-card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+
+			.roxy-title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0 0 var(--roxy-space-sm, 0.5rem) 0;
+				color: var(--roxy-primary, #0f172a);
+				letter-spacing: var(--roxy-tracking-tight);
+			}
+
+			.roxy-summary {
+				color: var(--roxy-secondary, #475569);
+				margin: 0 0 var(--roxy-space-md, 1rem) 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			dl.roxy-rows {
+				margin: 0;
+				display: grid;
+				grid-template-columns: minmax(8ch, max-content) 1fr;
+				gap: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+			}
+			dl.roxy-rows dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				text-transform: capitalize;
+			}
+			dl.roxy-rows dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				word-break: break-word;
+			}
+
+			ul.roxy-chips {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				padding: 0;
+				margin: 0;
+				list-style: none;
+			}
+			ul.roxy-chips li {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			table.roxy-table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			table.roxy-table th,
+			table.roxy-table td {
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				padding: var(--roxy-space-sm, 0.5rem);
+				text-align: left;
+				text-transform: none;
+			}
+			table.roxy-table th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+
+			.roxy-image {
+				max-width: 100%;
+				height: auto;
+				border-radius: var(--roxy-radius-md, 8px);
+				margin-bottom: var(--roxy-space-md, 1rem);
+			}
+
+			.roxy-section {
+				margin-bottom: var(--roxy-space-md, 1rem);
+			}
+			.roxy-section h4 {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-secondary, #475569);
+				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
+				text-transform: capitalize;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: Json = null;
+
+	render() {
+		if (this.data == null) {
+			return html`<div class="roxy-empty" role="status">No data</div>`;
+		}
+		return html`<div
+			class="roxy-card"
+			aria-label="Generic data display"
+		>
+			${this.renderValue(this.data)}
+		</div>`;
+	}
+
+	private renderValue(value: Json): TemplateResult | typeof nothing {
+		if (value === null || value === undefined) return nothing;
+		if (typeof value === 'string') return html`<p>${value}</p>`;
+		if (typeof value === 'number' || typeof value === 'boolean') {
+			return html`<p>${String(value)}</p>`;
+		}
+		if (Array.isArray(value)) return this.renderArray(value);
+		return this.renderObject(value as Record<string, Json>);
+	}
+
+	private renderArray(arr: Json[]): TemplateResult {
+		if (arr.length === 0) {
+			return html`<div class="roxy-empty" role="status">Empty list</div>`;
+		}
+		const allPrimitive = arr.every(
+			(v) => v === null || ['string', 'number', 'boolean'].includes(typeof v),
+		);
+		if (allPrimitive) {
+			return html`<ul class="roxy-chips">
+				${arr.map((v) => html`<li>${String(v)}</li>`)}
+			</ul>`;
+		}
+		const allObjects = arr.every(
+			(v) => v !== null && typeof v === 'object' && !Array.isArray(v),
+		);
+		if (allObjects) return this.renderTable(arr as Record<string, Json>[]);
+		return html`<ol>
+			${arr.map((v) => html`<li>${this.renderValue(v)}</li>`)}
+		</ol>`;
+	}
+
+	private renderTable(rows: Record<string, Json>[]): TemplateResult {
+		const keys = this.collectKeys(rows);
+		return html`<table class="roxy-table" role="table">
+			<thead>
+				<tr>
+					${keys.map((k) => html`<th>${this.humanize(k)}</th>`)}
+				</tr>
+			</thead>
+			<tbody>
+				${rows.map(
+					(row) => html`<tr>
+						${keys.map((k) => html`<td>${this.formatPrimitive(row[k])}</td>`)}
+					</tr>`,
+				)}
+			</tbody>
+		</table>`;
+	}
+
+	private renderObject(obj: Record<string, Json>): TemplateResult {
+		const titleKey = TITLE_KEYS.find((k) => typeof obj[k] === 'string');
+		const imageKey = IMAGE_KEYS.find(
+			(k) =>
+				typeof obj[k] === 'string' && (obj[k] as string).startsWith('http'),
+		);
+		const summaryKey =
+			titleKey !== 'summary' && typeof obj.summary === 'string'
+				? 'summary'
+				: null;
+		const rows = Object.entries(obj).filter(
+			([k, v]) =>
+				k !== titleKey &&
+				k !== summaryKey &&
+				!SKIP_KEYS.includes(k) &&
+				v !== null &&
+				v !== undefined,
+		);
+
+		return html`
+			${
+				imageKey
+					? html`<img
+						class="roxy-image"
+						src=${String(obj[imageKey])}
+						alt=${titleKey ? String(obj[titleKey]) : 'illustration'}
+						loading="lazy"
+					/>`
+					: nothing
+			}
+			${titleKey ? html`<h3 class="roxy-title">${obj[titleKey]}</h3>` : nothing}
+			${summaryKey ? html`<p class="roxy-summary">${obj[summaryKey]}</p>` : nothing}
+			${
+				rows.length > 0
+					? html`<dl class="roxy-rows">
+						${rows.map(
+							([k, v]) => html`
+								<dt>${this.humanize(k)}</dt>
+								<dd>${this.renderField(v)}</dd>
+							`,
+						)}
+					</dl>`
+					: nothing
+			}
+		`;
+	}
+
+	private renderField(value: Json): TemplateResult | string {
+		if (value === null || value === undefined) return '';
+		if (typeof value === 'string') return value;
+		if (typeof value === 'number' || typeof value === 'boolean')
+			return String(value);
+		if (Array.isArray(value)) {
+			const allPrimitive = value.every((v) =>
+				['string', 'number', 'boolean'].includes(typeof v),
+			);
+			if (allPrimitive) {
+				return html`<ul class="roxy-chips">
+					${value.map((v) => html`<li>${String(v)}</li>`)}
+				</ul>`;
+			}
+		}
+		return html`<roxy-data .data=${value}></roxy-data>`;
+	}
+
+	private formatPrimitive(value: Json | undefined): string {
+		if (value === null || value === undefined) return '';
+		if (typeof value === 'string') return value;
+		if (typeof value === 'number' || typeof value === 'boolean')
+			return String(value);
+		if (Array.isArray(value)) return value.map(String).join(', ');
+		return JSON.stringify(value);
+	}
+
+	private collectKeys(rows: Record<string, Json>[]): string[] {
+		const seen = new Set<string>();
+		for (const row of rows) {
+			for (const k of Object.keys(row)) seen.add(k);
+		}
+		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 {
+	interface HTMLElementTagNameMap {
+		'roxy-data': RoxyData;
+	}
+}

package/src/components/dosha-card.ts

@@ -0,0 +1,215 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+interface DoshaData {
+	present?: boolean;
+	severity?: 'Mild' | 'Moderate' | 'Severe' | string;
+	type?: string;
+	description?: string;
+	remedies?: string[];
+	exceptions?: string[];
+	effects?:
+		| string
+		| {
+				marriage?: string;
+				personality?: string;
+				timing?: string;
+				relationships?: string;
+				general?: string;
+				phases?: Record<string, string>;
+		  };
+}
+
+const DOSHA_LABELS: Record<string, string> = {
+	manglik: 'Mangal Dosha',
+	kalsarpa: 'Kaal Sarp Dosha',
+	sadhesati: 'Sade Sati',
+};
+
+/**
+ * Dosha presence card. Renders /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati}.
+ * Visual severity indicator + remedies + scoped effects.
+ */
+@customElement('roxy-dosha-card')
+export class RoxyDoshaCard extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.card {
+				background: var(--roxy-bg, #fff);
+				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: center;
+				justify-content: space-between;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+			.badge {
+				display: inline-flex;
+				align-items: center;
+				gap: var(--roxy-space-xs, 0.25rem);
+				padding: 4px 10px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.badge.absent {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 16%, transparent);
+				color: var(--roxy-success, #16a34a);
+			}
+			.badge.present {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 16%, transparent);
+				color: var(--roxy-danger, #dc2626);
+			}
+			.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);
+			}
+
+			.description {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			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;
+			}
+			ul {
+				margin: 0;
+				padding-left: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.effects {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.effects p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: DoshaData | null = null;
+
+	@property({ type: String, reflect: true })
+	type: 'manglik' | 'kalsarpa' | 'sadhesati' | string = 'manglik';
+
+	render() {
+		const d = this.data;
+		if (!d)
+			return html`<div class="roxy-empty" role="status">No dosha data</div>`;
+
+		const present = !!d.present;
+		const label = DOSHA_LABELS[this.type] ?? this.type;
+		const sevClass = (d.severity ?? '').toLowerCase();
+
+		return html`<article
+			class="card"
+			aria-label=${label}
+		>
+			<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>
+			</header>
+			${d.description ? html`<p class="description">${d.description}</p>` : nothing}
+			${this.renderEffects(d.effects)}
+			${
+				d.remedies && d.remedies.length > 0
+					? html`<div>
+						<h3>Remedies</h3>
+						<ul>
+							${d.remedies.map((r) => html`<li>${r}</li>`)}
+						</ul>
+					</div>`
+					: nothing
+			}
+			${
+				d.exceptions && d.exceptions.length > 0
+					? html`<div>
+						<h3>Exceptions</h3>
+						<ul>
+							${d.exceptions.map((r) => html`<li>${r}</li>`)}
+						</ul>
+					</div>`
+					: nothing
+			}
+		</article>`;
+	}
+
+	private renderEffects(e: DoshaData['effects']) {
+		if (!e) return nothing;
+		if (typeof e === 'string') return html`<p>${e}</p>`;
+		const entries = Object.entries(e).filter(
+			([, v]) => typeof v === 'string' && v.length > 0,
+		);
+		if (entries.length === 0) return nothing;
+		return html`<div class="effects">
+			${entries.map(
+				([k, v]) => html`<div>
+					<h3>${k}</h3>
+					<p>${v}</p>
+				</div>`,
+			)}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-dosha-card': RoxyDoshaCard;
+	}
+}