@roxyapi/ui 0.1.2 → 0.2.0

package/dist/utils/debounce.d.ts

@@ -1,5 +1,13 @@
 /**
  * Lightweight debounce for input handlers. Used by location search.
+ *
+ * The returned function exposes a `.cancel()` method so callers can clear a
+ * pending invocation when the host element disconnects, preventing the timer
+ * from firing on a detached node and mutating reactive state after teardown.
  */
-export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): F;
+export interface Debounced<F extends (...args: never[]) => unknown> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): Debounced<F>;
 //# sourceMappingURL=debounce.d.ts.map

package/dist/utils/debounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAC/D,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,GACV,CAAC,CAMH"}
+{"version":3,"file":"debounce.d.ts","sourceRoot":"","sources":["../../src/utils/debounce.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO;IACjE,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAC/D,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,MAAM,GACV,SAAS,CAAC,CAAC,CAAC,CAgBd"}

package/dist/utils/format.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Display formatters for ISO timestamps and floats coming back from the API.
+ * Every helper returns "" for nullish or unparseable input so it falls out of
+ * template literals cleanly.
+ */
+export declare function formatTime(input: unknown): string;
+export declare function formatDate(input: unknown): string;
+export declare function formatTimeRange(t: {
+    start?: string;
+    end?: string;
+} | undefined): string;
+export declare function formatNumber(value: unknown, dp?: number): string;
+export declare function formatPercent(value: unknown, dp?: number): string;
+/**
+ * CSS class name per aspect type. Used by natal and synastry chart aspect
+ * lines so the same color encoding (harmonious vs challenging) applies in
+ * both wheels. Keys are lowercase canonical names, values are CSS class
+ * suffixes the chart components define in their `:host` styles.
+ */
+export declare const ASPECT_CLASS: Record<string, string>;
+/**
+ * Normalize an aspect entry's `type` field to a lowercase, hyphen-separated
+ * canonical name (`SEMI_SEXTILE` → `semi-sextile`). Accepts any aspect-shaped
+ * object so both natal and synastry inter-aspect entries can share this.
+ */
+export declare function normalizeAspect(a: {
+    type?: string;
+}): string;
+//# sourceMappingURL=format.d.ts.map

package/dist/utils/format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../src/utils/format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAYjD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAWjD;AAED,wBAAgB,eAAe,CAC9B,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GAC7C,MAAM,CAMR;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,SAAI,GAAG,MAAM,CAG3D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,SAAI,GAAG,MAAM,CAG5D;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM/C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAE5D"}

package/dist/utils/kundli-render.d.ts

@@ -0,0 +1,63 @@
+import type { TemplateResult } from 'lit';
+import { nothing } from 'lit';
+export declare const KUNDLI_SIZE = 300;
+export declare const KUNDLI_CENTER = 150;
+/**
+ * Maps a lowercase rashi key (e.g. "aries") back to its canonical sign name
+ * (e.g. "Aries"). Used by every kundli consumer to bridge spec lowercase
+ * rashi keys to the title-cased SIGNS_ORDER tokens.
+ */
+export declare const RASHI_TO_SIGN: Record<string, string>;
+/**
+ * South Indian fixed-house square grid: house centers for planet text labels.
+ * House 1 is fixed top-center; positions are in the 300x300 viewBox.
+ */
+export declare const SOUTH_HOUSE_CENTERS: Record<number, {
+    x: number;
+    y: number;
+}>;
+/**
+ * South Indian sign abbreviation positions (slightly outward from center).
+ */
+export declare const SOUTH_SIGN_POSITIONS: Record<number, {
+    x: number;
+    y: number;
+}>;
+/**
+ * North Indian style: 12 triangular house positions.
+ * Lagna (house 1) is the top diamond, numbered clockwise.
+ * Centers represent the visual midpoint of each triangular cell.
+ */
+export declare const NORTH_HOUSE_CENTERS: Record<number, {
+    x: number;
+    y: number;
+}>;
+export interface HouseDef {
+    /** 1-based house number. */
+    number: number;
+    /** Sign name (TitleCase, e.g. "Aries"). */
+    sign: string;
+    /** Planet abbreviation strings to display. */
+    planets: string[];
+    /** Whether this house is the ascendant (Lagna). */
+    isLagna: boolean;
+}
+/**
+ * Render a single house group: lagna highlight, sign abbreviation, planet labels.
+ * Returns an SVG fragment for use inside an `<svg>` element.
+ */
+export declare function renderSouthHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
+/**
+ * Render a north-Indian-style kundli wheel frame (grid lines only).
+ * Returns the SVG structural lines; call `renderNorthHouseGroup` for content.
+ */
+export declare function renderNorthFrame(): TemplateResult;
+/**
+ * Render a north-Indian house group (sign abbr + house number + planets).
+ */
+export declare function renderNorthHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
+/**
+ * Render the south-Indian square frame (border diamond + inner square + radial lines).
+ */
+export declare function renderSouthFrame(): TemplateResult;
+//# sourceMappingURL=kundli-render.d.ts.map

package/dist/utils/kundli-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAO,MAAM,KAAK,CAAC;AAInC,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEhD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAaxE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAazE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAaxE,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,mDAAmD;IACnD,OAAO,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,CAAC,EAAE,QAAQ,GACT,cAAc,GAAG,OAAO,OAAO,CAqCjC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,cAAc,CAUjD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACpC,CAAC,EAAE,QAAQ,GACT,cAAc,GAAG,OAAO,OAAO,CA2BjC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,cAAc,CAajD"}

package/dist/utils/string.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared string helpers used across components. Single source of truth so the
+ * same formatting rules apply to every key/label/title that surfaces in the
+ * shadow tree.
+ *
+ *  - `capitalize`: title-cases the first character, lowercases the rest. Used
+ *    when matching API-supplied planet/sign names against the glyph maps in
+ *    `tokens/index.ts`, which use canonical TitleCase keys.
+ *  - `humanize`: turns an API key (`birth_date`, `birthDate`, `mahadasha-end`)
+ *    into a label suitable for display ("Birth date", "Mahadasha end").
+ */
+export declare function capitalize(s: string): string;
+export declare function humanize(s: string): string;
+//# sourceMappingURL=string.d.ts.map

package/dist/utils/string.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.d.ts","sourceRoot":"","sources":["../../src/utils/string.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAG5C;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAK1C"}

package/dist/version.d.ts

@@ -0,0 +1,2 @@
+export declare const ROXY_UI_VERSION = "0.2.0";
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -16,6 +16,9 @@
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
     },
+    "./types": {
+      "types": "./dist/types/index.d.ts"
+    },
     "./styles/tokens.css": "./dist/styles/tokens.css",
     "./registry/*": "./dist/registry/*.json"
   },
@@ -63,6 +66,9 @@
     "./dist/components/*.js",
     "./dist/cdn/*.js"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "peerDependencies": {
     "lit": "^3.0.0"
   },

package/src/components/ashtakavarga-grid.ts

@@ -0,0 +1,354 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { SIGN_GLYPH } from '../tokens/index.js';
+import type { AshtakavargaResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+
+type Tab = 'sarva' | 'bhinna' | 'pinda';
+
+const TAB_LABELS: Record<Tab, string> = {
+	sarva: 'Sarvashtakavarga',
+	bhinna: 'Bhinnashtakavarga',
+	pinda: 'Shodhya Pinda',
+};
+
+const TABS: Tab[] = ['sarva', 'bhinna', 'pinda'];
+
+/**
+ * Ashtakavarga grid with three tabbed views: Sarvashtakavarga, Bhinnashtakavarga,
+ * and Shodhya Pinda. Pass `data` from /vedic-astrology/ashtakavarga.
+ */
+@customElement('roxy-ashtakavarga-grid')
+export class RoxyAshtakavargaGrid extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				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;
+			}
+
+			/* Tabs */
+			.tablist {
+				display: flex;
+				gap: 2px;
+				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+			}
+
+			.tab {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: none;
+				border: none;
+				border-bottom: 2px solid transparent;
+				margin-bottom: -2px;
+				cursor: pointer;
+				color: var(--roxy-muted, #71717a);
+				font-family: inherit;
+				transition: color var(--roxy-motion-duration, 200ms) var(--roxy-motion-easing, ease);
+			}
+
+			.tab[aria-selected='true'] {
+				color: var(--roxy-accent-fg, #b45309);
+				border-bottom-color: var(--roxy-accent, #f59e0b);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.tab:hover:not([aria-selected='true']) {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			/* Tables */
+			.overflow-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				text-align: center;
+			}
+
+			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.06em;
+			}
+
+			td:first-child,
+			th:first-child {
+				text-align: left;
+			}
+
+			.glyph {
+				font-size: 1.1em;
+				margin-right: 3px;
+				line-height: 1;
+			}
+
+			.planet-cell {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				white-space: nowrap;
+			}
+
+			.total-row td {
+				font-weight: var(--roxy-weight-bold, 600);
+				border-top: 2px solid var(--roxy-border, #e4e4e7);
+				border-bottom: none;
+			}
+
+			/* Heat cells */
+			.heat-cell {
+				border-radius: var(--roxy-radius-sm, 4px);
+				font-weight: var(--roxy-weight-bold, 600);
+				min-width: 2rem;
+				font-variant-numeric: tabular-nums;
+			}
+
+			.heat-1 { background: var(--roxy-heat-1, #f0fdf4); color: var(--roxy-fg, #0a0a0a); }
+			.heat-2 { background: var(--roxy-heat-2, #d1fae5); color: var(--roxy-fg, #0a0a0a); }
+			.heat-3 { background: var(--roxy-heat-3, #a7f3d0); color: var(--roxy-fg, #0a0a0a); }
+			.heat-4 { background: var(--roxy-heat-4, #fde68a); color: var(--roxy-fg, #0a0a0a); }
+			.heat-5 { background: var(--roxy-heat-5, #fdba74); color: var(--roxy-fg, #0a0a0a); }
+			.heat-6 { background: var(--roxy-heat-6, #fb923c); color: var(--roxy-fg, #0a0a0a); }
+			.heat-7 { background: var(--roxy-heat-7, #ef4444); color: var(--roxy-fg, #0a0a0a); }
+
+			/* Bhinna grid: planet header column narrower */
+			.bhinna-table th:first-child,
+			.bhinna-table td:first-child {
+				min-width: 5rem;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: AshtakavargaResponse | null = null;
+
+	@state()
+	activeTab: Tab = 'sarva';
+
+	render() {
+		if (!this.data) {
+			return html`<div class="roxy-empty" role="status">No ashtakavarga data</div>`;
+		}
+
+		const signs = this.data.signs ?? [];
+
+		return html`<div class="wrap" aria-label="Ashtakavarga grid">
+			<div class="head">
+				<h2 class="title">Ashtakavarga</h2>
+				${
+					signs.length
+						? html`<p class="subtitle">${signs.length} signs</p>`
+						: nothing
+				}
+			</div>
+
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="Ashtakavarga views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${TABS.map(
+					(tab) => html`<button
+						class="tab"
+						role="tab"
+						id="tab-${tab}"
+						aria-selected=${this.activeTab === tab ? 'true' : 'false'}
+						aria-controls="panel-${tab}"
+						tabindex=${this.activeTab === tab ? '0' : '-1'}
+						@click=${() => {
+							this.activeTab = tab;
+						}}
+					>
+						${TAB_LABELS[tab]}
+					</button>`,
+				)}
+			</div>
+
+			<div
+				id="panel-${this.activeTab}"
+				role="tabpanel"
+				aria-labelledby="tab-${this.activeTab}"
+			>
+				${
+					this.activeTab === 'sarva'
+						? this.renderSarva(signs)
+						: this.activeTab === 'bhinna'
+							? this.renderBhinna(signs)
+							: this.renderPinda()
+				}
+			</div>
+		</div>`;
+	}
+
+	private onTabKeyDown(e: KeyboardEvent) {
+		const idx = TABS.indexOf(this.activeTab);
+		if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			this.activeTab = TABS[(idx + 1) % TABS.length];
+			this.focusActiveTab();
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			this.activeTab = TABS[(idx - 1 + TABS.length) % TABS.length];
+			this.focusActiveTab();
+		}
+	}
+
+	private focusActiveTab() {
+		requestAnimationFrame(() => {
+			const btn = this.shadowRoot?.querySelector<HTMLButtonElement>(
+				`#tab-${this.activeTab}`,
+			);
+			btn?.focus();
+		});
+	}
+
+	private heatClass(count: number): string {
+		if (count <= 1) return 'heat-1';
+		if (count <= 2) return 'heat-2';
+		if (count <= 3) return 'heat-3';
+		if (count <= 4) return 'heat-4';
+		if (count <= 5) return 'heat-5';
+		if (count <= 6) return 'heat-6';
+		return 'heat-7';
+	}
+
+	private renderSarva(signs: AshtakavargaResponse['signs']) {
+		const sav = this.data!.sarvashtakavarga;
+		if (!sav) return html`<p class="roxy-empty">No sarvashtakavarga data</p>`;
+
+		return html`<div class="overflow-scroll">
+			<table aria-label="Sarvashtakavarga bindu counts per sign">
+				<thead>
+					<tr>
+						<th scope="col">Sign</th>
+						<th scope="col">Bindus</th>
+					</tr>
+				</thead>
+				<tbody>
+					${signs.map((sign, i) => {
+						const count = sav.bindus[i] ?? 0;
+						const hc = this.heatClass(count);
+						return html`<tr>
+							<td>
+								<div class="planet-cell">
+									<span class="glyph" aria-hidden="true">${SIGN_GLYPH[sign] ?? ''}</span>
+									${sign}
+								</div>
+							</td>
+							<td class="${`heat-cell ${hc}`}">${count}</td>
+						</tr>`;
+					})}
+				</tbody>
+				<tfoot>
+					<tr class="total-row">
+						<td>Total</td>
+						<td>${sav.total}</td>
+					</tr>
+				</tfoot>
+			</table>
+		</div>`;
+	}
+
+	private renderBhinna(signs: AshtakavargaResponse['signs']) {
+		const bhinna = this.data!.bhinnashtakavarga;
+		if (!bhinna?.length)
+			return html`<p class="roxy-empty">No bhinnashtakavarga data</p>`;
+
+		return html`<div class="overflow-scroll">
+			<table class="bhinna-table" aria-label="Bhinnashtakavarga planet-by-sign grid">
+				<thead>
+					<tr>
+						<th scope="col">Planet</th>
+						${signs.map(
+							(s) =>
+								html`<th scope="col" title=${s}>${SIGN_GLYPH[s] ?? s.slice(0, 2)}</th>`,
+						)}
+						<th scope="col">Total</th>
+					</tr>
+				</thead>
+				<tbody>
+					${bhinna.map(
+						(row) => html`<tr>
+						<td>${row.planet}</td>
+						${row.bindus.map((count) => {
+							const hc = this.heatClass(count);
+							return html`<td class="${`heat-cell ${hc}`}">${count}</td>`;
+						})}
+						<td>${row.total}</td>
+					</tr>`,
+					)}
+				</tbody>
+			</table>
+		</div>`;
+	}
+
+	private renderPinda() {
+		const pinda = this.data!.shodhyaPinda;
+		if (!pinda?.length)
+			return html`<p class="roxy-empty">No shodhya pinda data</p>`;
+
+		return html`<div class="overflow-scroll">
+			<table aria-label="Shodhya Pinda planet strength scores">
+				<thead>
+					<tr>
+						<th scope="col">Planet</th>
+						<th scope="col">Rashi Pinda</th>
+						<th scope="col">Graha Pinda</th>
+						<th scope="col">Shodhya Pinda</th>
+					</tr>
+				</thead>
+				<tbody>
+					${pinda.map(
+						(row) => html`<tr>
+							<td>${row.planet}</td>
+							<td>${row.rashiPinda}</td>
+							<td>${row.grahaPinda}</td>
+							<td>${row.shodhyaPinda}</td>
+						</tr>`,
+					)}
+				</tbody>
+			</table>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-ashtakavarga-grid': RoxyAshtakavargaGrid;
+	}
+}