@roxyapi/ui 0.1.3 → 0.2.1

package/dist/manifest.d.ts

@@ -1,14 +1,13 @@
 /**
  * Single source of truth for component metadata. Every consumer that needs
- * the (tag, pascal, slug, domain, description, heading, endpoints) tuple
- * reads from here: scripts/build-react.ts, scripts/build-registry.ts,
- * scripts/sync-docs.ts, scripts/build-widgets.ts, and the browser-side
- * apps/docs/manifest.js (mirrored at build time).
+ * the (tag, pascal, slug, description, heading) tuple reads from here:
+ * scripts/build-react.ts, scripts/build-registry.ts, scripts/sync-docs.ts,
+ * scripts/build-widgets.ts, and the browser-side apps/docs/manifest.js
+ * (mirrored at build time).
  *
  * Hand-maintained. Add a component → add one entry here. The OpenAPI spec
  * does not yet carry component metadata, so this stays manual.
  */
-export type RoxyDomain = 'astrology' | 'vedic' | 'numerology' | 'tarot' | 'biorhythm' | 'iching' | 'utility';
 export interface RoxyComponent {
     /** Pascal-case React export name, e.g. RoxyNatalChart */
     pascal: string;
@@ -16,12 +15,8 @@ export interface RoxyComponent {
     tag: string;
     /** Slug used in registry filenames and shadcn paths, e.g. natal-chart */
     slug: string;
-    /** Domain bucket for filtering. */
-    domain: RoxyDomain;
     /** Short human-readable heading shown on demo cards. */
     heading: string;
-    /** SDK methods this component is designed to render. */
-    endpoints: string[];
     /** One-line description for registry / docs / SEO meta. */
     description: string;
     /** Domain column label in the synced README/AGENTS table. */
@@ -44,6 +39,5 @@ export interface RoxyComponent {
     selfFetching?: boolean;
 }
 export declare const ROXY_COMPONENTS: readonly RoxyComponent[];
-export type RoxyComponentTag = (typeof ROXY_COMPONENTS)[number]['tag'];
 export type RoxyComponentSlug = (typeof ROXY_COMPONENTS)[number]['slug'];
 //# sourceMappingURL=manifest.d.ts.map

package/dist/manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,MAAM,UAAU,GACnB,WAAW,GACX,OAAO,GACP,YAAY,GACZ,OAAO,GACP,WAAW,GACX,QAAQ,GACR,SAAS,CAAC;AAEb,MAAM,WAAW,aAAa;IAC7B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,MAAM,EAAE,UAAU,CAAC;IACnB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAmTnD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;AACvE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,WAAW,aAAa;IAC7B,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAuSnD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
-  "generatedAt": "2026-05-10T18:20:57.839Z",
   "components": [
+    "shadbala-table",
     "tarot-spread",
     "natal-chart",
     "biorhythm-chart",
@@ -9,11 +9,16 @@
     "horoscope-card",
     "dasha-timeline",
     "hexagram",
+    "transits-table",
     "location-search",
+    "choghadiya-grid",
     "tarot-card",
     "kp-planets-table",
     "endpoint-form",
+    "divisional-chart",
+    "ashtakavarga-grid",
     "data",
+    "yoga-list",
     "panchang-table",
     "guna-milan",
     "moon-phase",
@@ -21,4 +26,4 @@
     "synastry-chart",
     "compatibility-card"
   ]
-}
+}

package/dist/styles/tokens.css

@@ -89,6 +89,16 @@
 	/* Motion */
 	--roxy-motion-duration: 200ms;
 	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* Heat scale: 7-step gradient used by ashtakavarga bindu cells.
+	 * Low bindus (1) are cool green; high bindus (7+) are hot red. */
+	--roxy-heat-1: #f0fdf4;
+	--roxy-heat-2: #d1fae5;
+	--roxy-heat-3: #a7f3d0;
+	--roxy-heat-4: #fde68a;
+	--roxy-heat-5: #fdba74;
+	--roxy-heat-6: #fb923c;
+	--roxy-heat-7: #ef4444;
 }
 
 /* Dark theme via system preference */
@@ -123,6 +133,14 @@
 		--roxy-shadow-md:
 			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
+
+		--roxy-heat-1: #052e16;
+		--roxy-heat-2: #14532d;
+		--roxy-heat-3: #166534;
+		--roxy-heat-4: #92400e;
+		--roxy-heat-5: #b45309;
+		--roxy-heat-6: #c2410c;
+		--roxy-heat-7: #b91c1c;
 	}
 }
 
@@ -182,6 +200,14 @@
 	--roxy-shadow-md:
 		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
+
+	--roxy-heat-1: #052e16;
+	--roxy-heat-2: #14532d;
+	--roxy-heat-3: #166534;
+	--roxy-heat-4: #92400e;
+	--roxy-heat-5: #b45309;
+	--roxy-heat-6: #c2410c;
+	--roxy-heat-7: #b91c1c;
 }
 
 /* Reduced motion override */

package/dist/tokens/index.d.ts

@@ -8,6 +8,12 @@ export declare const PLANET_ABBR: Record<string, string>;
 export declare const SIGN_GLYPH: Record<string, string>;
 export declare const SIGN_ABBR: Record<string, string>;
 export declare const SIGNS_ORDER: readonly ["Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces"];
+/**
+ * Lowercase rashi keys in canonical zodiac order. Derived from `SIGNS_ORDER`
+ * so the two stay in lockstep. The /vedic-astrology/birth-chart response
+ * carries planet buckets keyed by these names.
+ */
+export declare const RASHI_KEYS: readonly Lowercase<(typeof SIGNS_ORDER)[number]>[];
 /** Aspect symbols. Used by synastry and natal chart aspect tables. */
 export declare const ASPECT_SYMBOL: Record<string, string>;
 /** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */

package/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAuB/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAe9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa7C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,WAAW,wIAad,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQhD,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBhD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASnD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAuB/C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAe9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa7C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAa5C,CAAC;AAEF,eAAO,MAAM,WAAW,wIAad,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAElB,SAAS,SAAS,CAAC,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQhD,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBhD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASnD,CAAC"}

package/dist/types/types.gen.d.ts

@@ -27210,7 +27210,7 @@ export type ListCountriesData = {
     path?: never;
     query?: {
         /**
-         * Maximum items to return per page. Range: 1-50, default 50.
+         * Maximum items to return per page. Range: 1-250, default 50.
          */
         limit?: number;
         /**
@@ -27373,7 +27373,7 @@ export type GetCitiesByCountryData = {
     };
     query?: {
         /**
-         * Maximum items to return per page. Range: 1-200, default 50.
+         * Maximum items to return per page. Range: 1-100, default 20.
          */
         limit?: number;
         /**

package/dist/utils/format.d.ts

@@ -11,5 +11,19 @@ export declare function formatTimeRange(t: {
 } | undefined): string;
 export declare function formatNumber(value: unknown, dp?: number): string;
 export declare function formatPercent(value: unknown, dp?: number): string;
-export declare function formatLongitude(value: unknown): 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

@@ -1 +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,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAGtD"}
+{"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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "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/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;
+	}
+}