@roxyapi/ui 0.2.3 → 0.3.0

package/dist/utils/degree.d.ts

@@ -21,6 +21,18 @@ export declare function normalizeLongitude(lon: number): number;
 export declare function longitudeToSignPosition(longitude: number): SignPosition;
 /** Compact display string like "12° Leo 34'". Used in chart labels. */
 export declare function formatSignPosition(longitude: number): string;
+/**
+ * The point diametrically opposite a longitude (e.g. Descendant from
+ * Ascendant, IC from MC). Exact derivation, always 180 degrees away.
+ */
+export declare function oppositePoint(longitude: number): number;
+/**
+ * Midpoint of the forward arc from `start` to `end` (both ecliptic
+ * longitudes). Handles the 360/0 wrap, so a house spanning 350 to 20 degrees
+ * yields a midpoint of 5, not 185. Used to place house numbers between two
+ * cusps regardless of how unequal the house is.
+ */
+export declare function arcMidpoint(start: number, end: number): number;
 /** Polar to cartesian for SVG wheel positioning. Angle in degrees, 0 at 3 o'clock. */
 export declare function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number): {
     x: number;

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

@@ -1 +1 @@
-{"version":3,"file":"degree.d.ts","sourceRoot":"","sources":["../../src/utils/degree.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,CAevE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED,sFAAsF;AACtF,wBAAgB,gBAAgB,CAC/B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACd;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B"}
+{"version":3,"file":"degree.d.ts","sourceRoot":"","sources":["../../src/utils/degree.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,GAAG,YAAY,CAevE;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9D;AAED,sFAAsF;AACtF,wBAAgB,gBAAgB,CAC/B,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACd;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM1B"}

package/dist/utils/format.d.ts

@@ -19,7 +19,7 @@ export declare function formatPercent(value: unknown, dp?: number): string;
  */
 export declare const ASPECT_CLASS: Record<string, string>;
 /**
- * Normalize an aspect entry's `type` field to a lowercase, hyphen-separated
+ * Normalize the `type` field on an aspect entry 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.
  */

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

@@ -8,6 +8,34 @@ export declare const KUNDLI_CENTER = 150;
  * rashi keys to the title-cased SIGNS_ORDER tokens.
  */
 export declare const RASHI_TO_SIGN: Record<string, string>;
+/**
+ * A planet placed in a kundli house. This is a render-only view model, not an
+ * API type: it carries just enough per-graha detail to draw a compact label
+ * (abbreviation plus degree-within-sign plus retrograde mark) and a rich SVG
+ * `<title>` tooltip (full position, nakshatra, pada, avastha). Both the D1
+ * birth chart and the Dx divisional charts feed it from their `meta` map.
+ */
+export interface PlacedGraha {
+    graha: string;
+    longitude?: number;
+    nakshatra?: {
+        name?: string;
+        pada?: number;
+        lord?: string;
+    };
+    isRetrograde?: boolean;
+    awastha?: string;
+}
+export interface HouseDef {
+    /** 1-based cell number. For the sign-fixed styles (south, east) this is the rashi index, Aries = 1. */
+    number: number;
+    /** Sign name (TitleCase, e.g. "Aries"). */
+    sign: string;
+    /** Planets occupying this house, with full detail for label + tooltip. */
+    planets: PlacedGraha[];
+    /** Whether this house is the ascendant (Lagna). */
+    isLagna: boolean;
+}
 /**
  * South Indian fixed-house square grid: house centers for planet text labels.
  * House 1 is fixed top-center; positions are in the 300x300 viewBox.
@@ -32,19 +60,35 @@ 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.
+ * East Indian style: a fixed-sign square (like South Indian) cut by both
+ * diagonals and an inner diamond joining the side midpoints, giving 12 cells.
+ * The four inner-diamond quadrilaterals hold the cardinal-position signs
+ * (cell 1, 4, 7, 10) and the eight corner half-triangles fill between them,
+ * laid out clockwise from the top so cell `n` holds the n-th rashi (Aries = 1).
+ * Centers are the visual midpoints of those cells in the 300x300 viewBox,
+ * derived from the frame geometry (square 10..290, diagonals, side-midpoint
+ * diamond).
+ *
+ * @remarks The cell geometry is exact; the rashi-to-cell order follows the
+ * common clockwise-from-top convention and is slated for a regional
+ * reference-image confirmation pass (see docs/todo.md "East Indian polish").
+ */
+export declare const EAST_HOUSE_CENTERS: Record<number, {
+    x: number;
+    y: number;
+}>;
+/**
+ * East Indian sign abbreviation positions, nudged toward the outer edge of
+ * every cell so the abbreviation and the planet stack do not collide.
+ */
+export declare const EAST_SIGN_POSITIONS: Record<number, {
+    x: number;
+    y: number;
+}>;
+/**
+ * Render a single south-Indian house group: lagna highlight, sign
+ * abbreviation, planet labels with degree and tooltip.
  */
 export declare function renderSouthHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
 /**
@@ -60,4 +104,33 @@ export declare function renderNorthHouseGroup(h: HouseDef): TemplateResult | typ
  * Render the south-Indian square frame (border diamond + inner square + radial lines).
  */
 export declare function renderSouthFrame(): TemplateResult;
+/**
+ * Render the east-Indian square frame: outer square, both diagonals, and the
+ * inner diamond joining the four side midpoints. Twelve triangular cells.
+ */
+export declare function renderEastFrame(): TemplateResult;
+/**
+ * Render an east-Indian house group. East Indian charts are sign-fixed like
+ * the south style, so this mirrors `renderSouthHouseGroup` with the east cell
+ * centers and a smaller line height to fit the triangular cells.
+ */
+export declare function renderEastHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
+/**
+ * Bucket a graha-keyed `meta` map (from a D1 or Dx chart response) into the 12
+ * sign-indexed houses. Shared by the kundli and divisional chart components so
+ * both render the same rich per-graha detail. The Lagna entry is consumed only
+ * to flag the ascendant cell, not rendered as a planet.
+ */
+export declare function buildHousesFromMeta(meta: Record<string, {
+    graha?: string;
+    rashi?: string;
+    longitude?: number;
+    nakshatra?: {
+        name?: string;
+        pada?: number;
+        lord?: string;
+    };
+    isRetrograde?: boolean;
+    awastha?: string;
+}>): HouseDef[];
 //# sourceMappingURL=kundli-render.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.2.3",
+  "version": "0.3.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",

package/src/components/dasha-timeline.ts

@@ -13,13 +13,7 @@ type DashaData =
 	| GetMajorDashasResponse
 	| GetSubDashasResponse;
 
-type DashaPeriod = {
-	planet: string;
-	startDate: string;
-	endDate: string;
-	durationYears: number;
-	interpretation?: string;
-};
+type DashaPeriod = GetMajorDashasResponse['mahadashas'][number];
 
 /**
  * Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.

package/src/components/divisional-chart.ts

@@ -1,27 +1,25 @@
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { PLANET_GLYPH, RASHI_KEYS } from '../tokens/index.js';
+import { PLANET_GLYPH } 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,
+	buildHousesFromMeta,
+	type HouseDef,
+	renderEastFrame,
+	renderEastHouseGroup,
 	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.
+ * renders the same south/north/east kundli wheel as the birth chart, plus
+ * division metadata and Vargottama planet pills. The varga response carries a
+ * graha-keyed `chart.meta` map (no per-rashi buckets), so houses are bucketed
+ * from that map.
  */
 @customElement('roxy-divisional-chart')
 export class RoxyDivisionalChart extends LitElement {
@@ -124,31 +122,11 @@ export class RoxyDivisionalChart extends LitElement {
 	data: DivisionalChartResponse | null = null;
 
 	@property({ type: String, reflect: true, attribute: 'chart-style' })
-	chartStyle: 'south' | 'north' = 'south';
+	chartStyle: 'south' | 'north' | 'east' = '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;
+		if (!this.data?.chart?.meta) return [];
+		return buildHousesFromMeta(this.data.chart.meta);
 	}
 
 	render() {
@@ -157,7 +135,19 @@ export class RoxyDivisionalChart extends LitElement {
 
 		const { division, vargottama } = this.data;
 		const houses = this.buildHouses();
-		const isNorth = this.chartStyle === 'north';
+		const style = this.chartStyle;
+		const frame =
+			style === 'north'
+				? renderNorthFrame()
+				: style === 'east'
+					? renderEastFrame()
+					: renderSouthFrame();
+		const houseGroup =
+			style === 'north'
+				? renderNorthHouseGroup
+				: style === 'east'
+					? renderEastHouseGroup
+					: renderSouthHouseGroup;
 
 		return html`<div class="wrap">
 			<div class="header">
@@ -182,12 +172,8 @@ export class RoxyDivisionalChart extends LitElement {
 				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))
-				}
+				${frame}
+				${houses.map((h) => houseGroup(h))}
 			</svg>
 
 			${

package/src/components/kp-chart.ts

@@ -0,0 +1,313 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type { KpChartResponse } from '../types/index.js';
+import { baseStyles } from '../utils/base-styles.js';
+import { formatNumber } from '../utils/format.js';
+
+type Tab = 'planets' | 'cusps';
+
+/** A planet or node row, normalized so planets and Rahu/Ketu share a table. */
+interface KpBody {
+	name: string;
+	sign?: string;
+	house?: number;
+	nakshatra?: string;
+	starLord?: string;
+	subLord?: string;
+	subSubLord?: string;
+	kpNumber?: number;
+	retrograde?: boolean;
+}
+
+/**
+ * KP (Krishnamurti Paddhati) chart. Renders /vedic-astrology/kp/chart: the
+ * Ascendant with its full stellar hierarchy, a planets-and-nodes table, and a
+ * Placidus cusps table. The cusp and planet sub lords are the primary
+ * predictive surface in KP astrology, so each row carries star lord, sub lord,
+ * sub-sub lord, and KP number (1-249).
+ */
+@customElement('roxy-kp-chart')
+export class RoxyKpChart extends LitElement {
+	static styles = [
+		baseStyles,
+		css`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.asc,
+			.ayan {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.asc strong {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.tablist {
+				display: flex;
+				gap: 2px;
+				padding: 0 var(--roxy-space-md, 1rem);
+				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;
+			}
+			.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);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 620px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				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 {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			td.body {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.retro {
+				color: var(--roxy-warning-fg, #9a3412);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin-left: 4px;
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`,
+	];
+
+	@property({ attribute: false })
+	data: KpChartResponse | null = null;
+
+	@state()
+	private activeTab: Tab = 'planets';
+
+	/** Merge the 7 planets and the two nodes into one ordered body list. */
+	private bodies(): KpBody[] {
+		const d = this.data;
+		if (!d) return [];
+		const rows: KpBody[] = (d.planets ?? []).map((p) => ({
+			name: p.planet,
+			sign: p.sign,
+			house: p.house,
+			nakshatra: p.nakshatra,
+			starLord: p.starLord,
+			subLord: p.subLord,
+			subSubLord: p.subSubLord,
+			kpNumber: p.kpNumber,
+			retrograde: p.retrograde,
+		}));
+		const nodes = d.nodes;
+		for (const [name, node] of [
+			['Rahu', nodes?.rahu],
+			['Ketu', nodes?.ketu],
+		] as const) {
+			if (node) {
+				rows.push({
+					name,
+					sign: node.sign,
+					house: node.house,
+					nakshatra: node.nakshatra,
+					starLord: node.starLord,
+					subLord: node.subLord,
+					subSubLord: node.subSubLord,
+					retrograde: true,
+				});
+			}
+		}
+		return rows;
+	}
+
+	private onTabKeyDown(e: KeyboardEvent) {
+		if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+		e.preventDefault();
+		this.activeTab = this.activeTab === 'planets' ? 'cusps' : 'planets';
+		const next = this.activeTab;
+		requestAnimationFrame(() => {
+			this.shadowRoot
+				?.querySelector<HTMLButtonElement>(`#tab-${next}`)
+				?.focus();
+		});
+	}
+
+	render() {
+		if (!this.data)
+			return html`<div class="roxy-empty" role="status">No KP chart data</div>`;
+		const d = this.data;
+		const asc = d.ascendant;
+
+		return html`<div class="wrap" aria-label="KP chart" tabindex="0">
+			<header class="head">
+				<h2 class="title">KP chart</h2>
+				${
+					asc
+						? html`<div class="asc">
+							Ascendant: <strong>${asc.sign ?? ''}</strong>
+							${asc.nakshatra ? html`· ${asc.nakshatra}` : nothing}
+							${asc.subLord ? html`· sub lord ${asc.subLord}` : nothing}
+							${typeof asc.kpNumber === 'number' ? html`· KP ${asc.kpNumber}` : nothing}
+						</div>`
+						: nothing
+				}
+				${
+					typeof d.meta?.ayanamsa === 'number'
+						? html`<div class="ayan">
+							${d.meta.ayanamsaType ?? 'Ayanamsa'}: ${formatNumber(d.meta.ayanamsa, 4)}°
+							${d.meta.houseSystem ? html`· ${d.meta.houseSystem} houses` : nothing}
+						</div>`
+						: nothing
+				}
+			</header>
+
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="KP chart views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${(['planets', 'cusps'] as const).map(
+					(t) => html`<button
+						class="tab"
+						role="tab"
+						id="tab-${t}"
+						aria-selected=${this.activeTab === t ? 'true' : 'false'}
+						aria-controls="panel-${t}"
+						tabindex=${this.activeTab === t ? '0' : '-1'}
+						@click=${() => {
+							this.activeTab = t;
+						}}
+					>
+						${t === 'planets' ? 'Planets' : 'Cusps'}
+					</button>`,
+				)}
+			</div>
+
+			<div id="panel-${this.activeTab}" role="tabpanel" aria-labelledby="tab-${this.activeTab}">
+				${this.activeTab === 'planets' ? this.renderPlanets() : this.renderCusps()}
+			</div>
+		</div>`;
+	}
+
+	private renderPlanets() {
+		const bodies = this.bodies();
+		if (!bodies.length)
+			return html`<p class="roxy-empty" role="status">No planets</p>`;
+		return html`<table role="table" aria-label="KP planets and nodes">
+			<thead>
+				<tr>
+					<th scope="col">Body</th>
+					<th scope="col">Sign</th>
+					<th scope="col">House</th>
+					<th scope="col">Nakshatra</th>
+					<th scope="col">Star lord</th>
+					<th scope="col">Sub lord</th>
+					<th scope="col">Sub sub lord</th>
+					<th scope="col">KP no.</th>
+				</tr>
+			</thead>
+			<tbody>
+				${bodies.map(
+					(b) => html`<tr>
+						<td class="body">
+							${b.name}${b.retrograde ? html`<span class="retro">R</span>` : nothing}
+						</td>
+						<td>${b.sign ?? ''}</td>
+						<td class="num">${typeof b.house === 'number' ? b.house : ''}</td>
+						<td>${b.nakshatra ?? ''}</td>
+						<td>${b.starLord ?? ''}</td>
+						<td>${b.subLord ?? ''}</td>
+						<td>${b.subSubLord ?? ''}</td>
+						<td class="num">${typeof b.kpNumber === 'number' ? b.kpNumber : ''}</td>
+					</tr>`,
+				)}
+			</tbody>
+		</table>`;
+	}
+
+	private renderCusps() {
+		const cusps = this.data?.cusps ?? [];
+		if (!cusps.length)
+			return html`<p class="roxy-empty" role="status">No cusps</p>`;
+		return html`<table role="table" aria-label="KP Placidus cusps">
+			<thead>
+				<tr>
+					<th scope="col">House</th>
+					<th scope="col">Sign</th>
+					<th scope="col">Sign lord</th>
+					<th scope="col">Nakshatra</th>
+					<th scope="col">Star lord</th>
+					<th scope="col">Sub lord</th>
+					<th scope="col">Sub sub lord</th>
+					<th scope="col">KP no.</th>
+				</tr>
+			</thead>
+			<tbody>
+				${cusps.map(
+					(c) => html`<tr>
+						<td class="body num">${c.house}</td>
+						<td>${c.sign ?? ''}</td>
+						<td>${c.signLord ?? ''}</td>
+						<td>${c.nakshatra ?? ''}</td>
+						<td>${c.starLord ?? ''}</td>
+						<td>${c.subLord ?? ''}</td>
+						<td>${c.subSubLord ?? ''}</td>
+						<td class="num">${typeof c.kpNumber === 'number' ? c.kpNumber : ''}</td>
+					</tr>`,
+				)}
+			</tbody>
+		</table>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'roxy-kp-chart': RoxyKpChart;
+	}
+}