@roxyapi/ui 0.1.3 → 0.2.1

package/src/manifest.ts

@@ -1,23 +1,14 @@
 /**
  * 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;
@@ -25,12 +16,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. */
@@ -58,9 +45,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyNatalChart',
 		tag: 'roxy-natal-chart',
 		slug: 'natal-chart',
-		domain: 'astrology',
 		heading: 'Natal chart',
-		endpoints: ['astrology.generateNatalChart'],
 		description:
 			'Western natal chart wheel for /astrology/natal-chart responses',
 		docsLabel: 'Western',
@@ -72,13 +57,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyHoroscopeCard',
 		tag: 'roxy-horoscope-card',
 		slug: 'horoscope-card',
-		domain: 'astrology',
 		heading: 'Daily horoscope',
-		endpoints: [
-			'astrology.getDailyHoroscope',
-			'astrology.getWeeklyHoroscope',
-			'astrology.getMonthlyHoroscope',
-		],
 		description:
 			'Daily, weekly, or monthly horoscope card for /astrology/horoscope/...',
 		docsLabel: 'Western',
@@ -90,9 +69,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxySynastryChart',
 		tag: 'roxy-synastry-chart',
 		slug: 'synastry-chart',
-		domain: 'astrology',
 		heading: 'Synastry',
-		endpoints: ['astrology.calculateSynastry'],
 		description: 'Dual-wheel synastry chart with inter-aspects table',
 		docsLabel: 'Western',
 		endpointLabel: 'POST /astrology/synastry',
@@ -103,13 +80,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyCompatibilityCard',
 		tag: 'roxy-compatibility-card',
 		slug: 'compatibility-card',
-		domain: 'astrology',
 		heading: 'Compatibility score',
-		endpoints: [
-			'astrology.calculateCompatibility',
-			'numerology.calculateNumCompatibility',
-			'biorhythm.calculateBioCompatibility',
-		],
 		description: 'Cross-domain compatibility score card',
 		docsLabel: 'Cross',
 		endpointLabel:
@@ -121,13 +92,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyMoonPhase',
 		tag: 'roxy-moon-phase',
 		slug: 'moon-phase',
-		domain: 'astrology',
 		heading: 'Moon phase',
-		endpoints: [
-			'astrology.getCurrentMoonPhase',
-			'astrology.getUpcomingMoonPhases',
-			'astrology.getMoonCalendar',
-		],
 		description: 'Moon phase card and calendar',
 		docsLabel: 'Western',
 		endpointLabel: 'GET /astrology/moon-phase/{current,upcoming,calendar/...}',
@@ -138,9 +103,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyVedicKundli',
 		tag: 'roxy-vedic-kundli',
 		slug: 'vedic-kundli',
-		domain: 'vedic',
 		heading: 'Vedic kundli',
-		endpoints: ['vedicAstrology.generateBirthChart'],
 		description:
 			'South or North Indian Vedic kundli for /vedic-astrology/birth-chart',
 		docsLabel: 'Vedic',
@@ -152,12 +115,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyPanchangTable',
 		tag: 'roxy-panchang-table',
 		slug: 'panchang-table',
-		domain: 'vedic',
 		heading: 'Panchang',
-		endpoints: [
-			'vedicAstrology.getBasicPanchang',
-			'vedicAstrology.getDetailedPanchang',
-		],
 		description:
 			'Panchang muhurta table with auspicious and inauspicious periods',
 		docsLabel: 'Vedic',
@@ -169,13 +127,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyDashaTimeline',
 		tag: 'roxy-dasha-timeline',
 		slug: 'dasha-timeline',
-		domain: 'vedic',
 		heading: 'Vimshottari dasha',
-		endpoints: [
-			'vedicAstrology.getCurrentDasha',
-			'vedicAstrology.getMajorDashas',
-			'vedicAstrology.getSubDashas',
-		],
 		description: 'Vimshottari dasha timeline with active mahadasha highlighted',
 		docsLabel: 'Vedic',
 		endpointLabel: 'POST /vedic-astrology/dasha/{current,major,sub/...}',
@@ -186,13 +138,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyDoshaCard',
 		tag: 'roxy-dosha-card',
 		slug: 'dosha-card',
-		domain: 'vedic',
 		heading: 'Manglik dosha',
-		endpoints: [
-			'vedicAstrology.checkManglikDosha',
-			'vedicAstrology.checkKalsarpaDosha',
-			'vedicAstrology.checkSadhesati',
-		],
 		description: 'Manglik, Kaal Sarp, or Sade Sati presence card',
 		docsLabel: 'Vedic',
 		endpointLabel: 'POST /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati}',
@@ -203,9 +149,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyGunaMilan',
 		tag: 'roxy-guna-milan',
 		slug: 'guna-milan',
-		domain: 'vedic',
 		heading: 'Guna milan',
-		endpoints: ['vedicAstrology.calculateGunMilan'],
 		description: '36-point Ashtakoota matrimonial compatibility breakdown',
 		docsLabel: 'Vedic',
 		endpointLabel: 'POST /vedic-astrology/compatibility',
@@ -216,27 +160,88 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyKpPlanetsTable',
 		tag: 'roxy-kp-planets-table',
 		slug: 'kp-planets-table',
-		domain: 'vedic',
 		heading: 'KP planets',
-		endpoints: ['vedicAstrology.getKpPlanets'],
 		description: 'KP planets table with sub-lord and sub-sub-lord columns',
 		docsLabel: 'Vedic (KP)',
 		endpointLabel: 'POST /vedic-astrology/kp/planets',
 		docsSummary: 'Sub-lord and sub-sub-lord columns',
 		topic: 'Vedic',
 	},
+	{
+		pascal: 'RoxyTransitsTable',
+		tag: 'roxy-transits-table',
+		slug: 'transits-table',
+		heading: 'Transits',
+		description: 'Live planet positions plus aspects to a natal chart',
+		docsLabel: 'Western',
+		endpointLabel: 'POST /astrology/transits',
+		docsSummary:
+			'Transit planet positions plus optional aspects to a natal chart',
+		topic: 'Astrology',
+	},
+	{
+		pascal: 'RoxyDivisionalChart',
+		tag: 'roxy-divisional-chart',
+		slug: 'divisional-chart',
+		heading: 'Divisional chart',
+		description: 'D2 to D60 varga chart wheel with Vargottama markers',
+		docsLabel: 'Vedic',
+		endpointLabel: 'POST /vedic-astrology/divisional-chart',
+		docsSummary:
+			'Generic divisional varga wheel from D2 Hora to D60 Shashtiamsa',
+		topic: 'Vedic',
+	},
+	{
+		pascal: 'RoxyAshtakavargaGrid',
+		tag: 'roxy-ashtakavarga-grid',
+		slug: 'ashtakavarga-grid',
+		heading: 'Ashtakavarga',
+		description: 'Sarva and Bhinna ashtakavarga heatmap with bindu scores',
+		docsLabel: 'Vedic',
+		endpointLabel: 'POST /vedic-astrology/ashtakavarga',
+		docsSummary: 'Sarva, Bhinna, and Shodhya Pinda views in a tabbed heatmap',
+		topic: 'Vedic',
+	},
+	{
+		pascal: 'RoxyShadbalaTable',
+		tag: 'roxy-shadbala-table',
+		slug: 'shadbala-table',
+		heading: 'Shadbala',
+		description: 'Six-fold planetary strength with adequacy badge per planet',
+		docsLabel: 'Vedic',
+		endpointLabel: 'POST /vedic-astrology/shadbala',
+		docsSummary:
+			'Six-fold planetary strength bar plus rupas and adequacy badge',
+		topic: 'Vedic',
+	},
+	{
+		pascal: 'RoxyYogaList',
+		tag: 'roxy-yoga-list',
+		slug: 'yoga-list',
+		heading: 'Yoga catalog',
+		description:
+			'Yoga reference cards from the catalog with optional detail mode',
+		docsLabel: 'Vedic',
+		endpointLabel: 'GET /vedic-astrology/yoga, /yoga/{id}',
+		docsSummary: 'Filterable yoga cards from the 300 plus yoga catalog',
+		topic: 'Vedic',
+	},
+	{
+		pascal: 'RoxyChoghadiyaGrid',
+		tag: 'roxy-choghadiya-grid',
+		slug: 'choghadiya-grid',
+		heading: 'Choghadiya',
+		description: 'Day and night Choghadiya muhurta tiles for activity timing',
+		docsLabel: 'Vedic',
+		endpointLabel: 'POST /vedic-astrology/panchang/choghadiya',
+		docsSummary: 'Day and night Choghadiya muhurta tiles colored by effect',
+		topic: 'Vedic',
+	},
 	{
 		pascal: 'RoxyNumerologyCard',
 		tag: 'roxy-numerology-card',
 		slug: 'numerology-card',
-		domain: 'numerology',
 		heading: 'Life path number',
-		endpoints: [
-			'numerology.calculateLifePath',
-			'numerology.calculateExpression',
-			'numerology.calculatePersonalYear',
-			'numerology.generateNumerologyChart',
-		],
 		description:
 			'Numerology card for life path, expression, personal year, or full chart',
 		docsLabel: 'Numerology',
@@ -249,9 +254,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyTarotCard',
 		tag: 'roxy-tarot-card',
 		slug: 'tarot-card',
-		domain: 'tarot',
 		heading: 'Daily tarot card',
-		endpoints: ['tarot.getCard', 'tarot.getDailyCard'],
 		description: 'Single tarot card with upright/reversed flip animation',
 		docsLabel: 'Tarot',
 		endpointLabel: 'GET /tarot/cards/{id}, POST /tarot/daily',
@@ -262,15 +265,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyTarotSpread',
 		tag: 'roxy-tarot-spread',
 		slug: 'tarot-spread',
-		domain: 'tarot',
 		heading: 'Three-card spread',
-		endpoints: [
-			'tarot.castThreeCard',
-			'tarot.castCelticCross',
-			'tarot.castLoveSpread',
-			'tarot.castYesNo',
-			'tarot.drawCards',
-		],
 		description:
 			'Tarot spread renderer for three-card, Celtic Cross, love, or yes/no',
 		docsLabel: 'Tarot',
@@ -283,13 +278,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyBiorhythmChart',
 		tag: 'roxy-biorhythm-chart',
 		slug: 'biorhythm-chart',
-		domain: 'biorhythm',
 		heading: 'Daily biorhythm',
-		endpoints: [
-			'biorhythm.getDailyBiorhythm',
-			'biorhythm.getForecast',
-			'biorhythm.getCriticalDays',
-		],
 		description: 'Daily biorhythm bars or multi-day forecast cycle lines',
 		docsLabel: 'Biorhythm',
 		endpointLabel: 'POST /biorhythm/{daily,forecast,critical-days}',
@@ -300,15 +289,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyHexagram',
 		tag: 'roxy-hexagram',
 		slug: 'hexagram',
-		domain: 'iching',
 		heading: 'I Ching hexagram',
-		endpoints: [
-			'iching.getHexagram',
-			'iching.castReading',
-			'iching.getDailyHexagram',
-			'iching.castDailyReading',
-			'iching.getRandomHexagram',
-		],
 		description:
 			'I Ching hexagram with trigram glyphs, judgment, image, and changing lines',
 		docsLabel: 'I Ching',
@@ -321,9 +302,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyEndpointForm',
 		tag: 'roxy-endpoint-form',
 		slug: 'endpoint-form',
-		domain: 'utility',
 		heading: 'Schema-driven form',
-		endpoints: [],
 		description:
 			'Schema-driven form that emits roxy-submit with a validated payload',
 		docsLabel: 'Helper',
@@ -336,9 +315,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyLocationSearch',
 		tag: 'roxy-location-search',
 		slug: 'location-search',
-		domain: 'utility',
 		heading: 'City search',
-		endpoints: ['location.searchCities'],
 		description: 'City search input with debounced /location/search calls',
 		docsLabel: 'Helper',
 		endpointLabel: 'GET /location/search',
@@ -350,9 +327,7 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 		pascal: 'RoxyData',
 		tag: 'roxy-data',
 		slug: 'data',
-		domain: 'utility',
 		heading: 'Generic renderer',
-		endpoints: [],
 		description: 'Generic fallback renderer for any OpenAPI response shape',
 		docsLabel: 'Helper',
 		endpointLabel: 'Any response shape',
@@ -362,5 +337,4 @@ export const ROXY_COMPONENTS: readonly RoxyComponent[] = [
 	},
 ];
 
-export type RoxyComponentTag = (typeof ROXY_COMPONENTS)[number]['tag'];
 export type RoxyComponentSlug = (typeof ROXY_COMPONENTS)[number]['slug'];

package/src/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/src/tokens/index.ts

@@ -91,6 +91,15 @@ export const SIGNS_ORDER = [
 	'Pisces',
 ] as const;
 
+/**
+ * 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 const RASHI_KEYS = SIGNS_ORDER.map((s) =>
+	s.toLowerCase(),
+) as readonly Lowercase<(typeof SIGNS_ORDER)[number]>[];
+
 /** Aspect symbols. Used by synastry and natal chart aspect tables. */
 export const ASPECT_SYMBOL: Record<string, string> = {
 	conjunction: '☌',

package/src/types/types.gen.ts

@@ -27907,7 +27907,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;
         /**
@@ -28075,7 +28075,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/src/utils/format.ts

@@ -51,7 +51,25 @@ export function formatPercent(value: unknown, dp = 1): string {
 	return n ? `${n}%` : '';
 }
 
-export function formatLongitude(value: unknown): string {
-	if (typeof value !== 'number' || !Number.isFinite(value)) return '';
-	return `${formatNumber(value, 2)}°`;
+/**
+ * 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 const ASPECT_CLASS: Record<string, string> = {
+	conjunction: 'aspect-conjunction',
+	sextile: 'aspect-sextile',
+	square: 'aspect-square',
+	trine: 'aspect-trine',
+	opposition: 'aspect-opposition',
+};
+
+/**
+ * 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 function normalizeAspect(a: { type?: string }): string {
+	return (a.type ?? '').toLowerCase().replace(/_/g, '-');
 }

package/src/utils/kundli-render.ts

@@ -0,0 +1,197 @@
+import type { TemplateResult } from 'lit';
+import { nothing, svg } from 'lit';
+import { PLANET_ABBR, SIGN_ABBR, SIGNS_ORDER } from '../tokens/index.js';
+import { capitalize } from './string.js';
+
+export const KUNDLI_SIZE = 300;
+export 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 const RASHI_TO_SIGN: Record<string, string> = Object.fromEntries(
+	SIGNS_ORDER.map((s) => [s.toLowerCase(), s] as const),
+);
+
+/**
+ * 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 const SOUTH_HOUSE_CENTERS: Record<number, { x: number; y: number }> = {
+	1: { x: 150, y: 58 },
+	2: { x: 205, y: 52 },
+	3: { x: 253, y: 112 },
+	4: { x: 243, y: 150 },
+	5: { x: 253, y: 188 },
+	6: { x: 205, y: 248 },
+	7: { x: 150, y: 242 },
+	8: { x: 95, y: 248 },
+	9: { x: 47, y: 188 },
+	10: { x: 57, y: 150 },
+	11: { x: 47, y: 112 },
+	12: { x: 95, y: 52 },
+};
+
+/**
+ * South Indian sign abbreviation positions (slightly outward from center).
+ */
+export const SOUTH_SIGN_POSITIONS: Record<number, { x: number; y: number }> = {
+	1: { x: 150, y: 35 },
+	2: { x: 222, y: 40 },
+	3: { x: 265, y: 100 },
+	4: { x: 265, y: 150 },
+	5: { x: 265, y: 200 },
+	6: { x: 222, y: 260 },
+	7: { x: 150, y: 265 },
+	8: { x: 78, y: 260 },
+	9: { x: 35, y: 200 },
+	10: { x: 35, y: 150 },
+	11: { x: 35, y: 100 },
+	12: { x: 78, y: 40 },
+};
+
+/**
+ * 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 const NORTH_HOUSE_CENTERS: Record<number, { x: number; y: number }> = {
+	1: { x: 150, y: 60 },
+	2: { x: 225, y: 100 },
+	3: { x: 255, y: 150 },
+	4: { x: 225, y: 200 },
+	5: { x: 150, y: 240 },
+	6: { x: 75, y: 200 },
+	7: { x: 45, y: 150 },
+	8: { x: 75, y: 100 },
+	9: { x: 100, y: 80 },
+	10: { x: 150, y: 108 },
+	11: { x: 200, y: 80 },
+	12: { x: 200, y: 220 },
+};
+
+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 function renderSouthHouseGroup(
+	h: HouseDef,
+): TemplateResult | typeof nothing {
+	const center = SOUTH_HOUSE_CENTERS[h.number];
+	const signPos = SOUTH_SIGN_POSITIONS[h.number];
+	if (!center || !signPos) return nothing;
+	const signAbbr = SIGN_ABBR[h.sign] ?? '';
+	const planets = h.planets;
+	return svg`
+		<g>
+			${
+				h.isLagna
+					? svg`<rect
+							class="lagna-bg"
+							x=${center.x - 30} y=${center.y - 28}
+							width="60" height="56" rx="6"
+						/>`
+					: nothing
+			}
+			${
+				signAbbr
+					? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>`
+					: nothing
+			}
+			${
+				h.isLagna
+					? svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>`
+					: nothing
+			}
+			${planets.map((planet, j) => {
+				const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
+				const lineHeight = 13;
+				const baseY = h.isLagna ? center.y + 8 : center.y;
+				const startY = baseY - ((planets.length - 1) * lineHeight) / 2;
+				const yPos = startY + j * lineHeight;
+				return svg`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
+			})}
+		</g>
+	`;
+}
+
+/**
+ * Render a north-Indian-style kundli wheel frame (grid lines only).
+ * Returns the SVG structural lines; call `renderNorthHouseGroup` for content.
+ */
+export function renderNorthFrame(): TemplateResult {
+	return svg`
+		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
+		<line class="line" x1="150" y1="10" x2="150" y2="290" stroke-width="1" />
+		<line class="line" x1="10" y1="150" x2="290" y2="150" stroke-width="1" />
+		<line class="line" x1="150" y1="10" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+		<line class="line" x1="150" y1="10" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+		<line class="line" x1="150" y1="290" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+		<line class="line" x1="150" y1="290" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+	`;
+}
+
+/**
+ * Render a north-Indian house group (sign abbr + house number + planets).
+ */
+export function renderNorthHouseGroup(
+	h: HouseDef,
+): TemplateResult | typeof nothing {
+	const center = NORTH_HOUSE_CENTERS[h.number];
+	if (!center) return nothing;
+	const signAbbr = SIGN_ABBR[h.sign] ?? '';
+	const planets = h.planets;
+	return svg`
+		<g>
+			${
+				h.isLagna
+					? svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />`
+					: nothing
+			}
+			${
+				signAbbr
+					? svg`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>`
+					: nothing
+			}
+			<text class="house-num" x=${center.x} y=${center.y + 2} text-anchor="middle" dominant-baseline="central">${h.number}</text>
+			${planets.map((planet, j) => {
+				const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
+				const lineHeight = 11;
+				const startY = center.y + 14 - ((planets.length - 1) * lineHeight) / 2;
+				const yPos = startY + j * lineHeight;
+				return svg`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
+			})}
+		</g>
+	`;
+}
+
+/**
+ * Render the south-Indian square frame (border diamond + inner square + radial lines).
+ */
+export function renderSouthFrame(): TemplateResult {
+	return svg`
+		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
+		<polygon class="line" points="220,80 220,220 80,220 80,80" stroke-width="1" fill="none" />
+		<line class="line" x1="150" y1="10" x2="80" y2="80" stroke-width="1" />
+		<line class="line" x1="150" y1="10" x2="220" y2="80" stroke-width="1" />
+		<line class="line" x1="290" y1="150" x2="220" y2="80" stroke-width="1" />
+		<line class="line" x1="290" y1="150" x2="220" y2="220" stroke-width="1" />
+		<line class="line" x1="150" y1="290" x2="220" y2="220" stroke-width="1" />
+		<line class="line" x1="150" y1="290" x2="80" y2="220" stroke-width="1" />
+		<line class="line" x1="10" y1="150" x2="80" y2="220" stroke-width="1" />
+		<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
+	`;
+}

package/src/utils/string.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 function capitalize(s: string): string {
+	if (!s) return '';
+	return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+
+export function humanize(s: string): string {
+	return s
+		.replace(/[_-]+/g, ' ')
+		.replace(/([a-z])([A-Z])/g, '$1 $2')
+		.replace(/^\w/, (c) => c.toUpperCase());
+}

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by scripts/sync-version.ts. Do not edit.
-export const ROXY_UI_VERSION = '0.1.3';
+export const ROXY_UI_VERSION = '0.2.1';