@roxyapi/ui 0.3.1 → 0.4.0

package/dist/index.js

@@ -221,6 +221,20 @@ var baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;
 
 // packages/ui/src/components/ashtakavarga-grid.ts
@@ -299,7 +313,11 @@ var RoxyAshtakavargaGrid = class extends LitElement {
       btn?.focus();
     });
   }
-  heatClass(count) {
+  /**
+   * Bhinna bindus per planet per sign run 0..8 (sum of 0/1 contributions
+   * from each of the 8 reference points). Bucket directly by raw count.
+   */
+  bhinnaHeat(count) {
     if (count <= 1) return "heat-1";
     if (count <= 2) return "heat-2";
     if (count <= 3) return "heat-3";
@@ -308,6 +326,22 @@ var RoxyAshtakavargaGrid = class extends LitElement {
     if (count <= 6) return "heat-6";
     return "heat-7";
   }
+  /**
+   * Sarva bindus per sign are the column total across all 7 planets, range
+   * roughly 0..56 with typical values 20..40. Bucketed per classical
+   * interpretation: 25 below par, 25..30 average, 30..40 strong, 40+ very
+   * strong. Bucket spans intentionally widen at the extremes so a single
+   * outlier sign reads as exceptional.
+   */
+  sarvaHeat(count) {
+    if (count <= 18) return "heat-1";
+    if (count <= 23) return "heat-2";
+    if (count <= 28) return "heat-3";
+    if (count <= 32) return "heat-4";
+    if (count <= 37) return "heat-5";
+    if (count <= 42) return "heat-6";
+    return "heat-7";
+  }
   renderSarva(signs) {
     const sav = this.data.sarvashtakavarga;
     if (!sav) return html`<p class="roxy-empty">No sarvashtakavarga data</p>`;
@@ -322,7 +356,7 @@ var RoxyAshtakavargaGrid = class extends LitElement {
 				<tbody>
 					${signs.map((sign, i) => {
       const count = sav.bindus[i] ?? 0;
-      const hc = this.heatClass(count);
+      const hc = this.sarvaHeat(count);
       return html`<tr>
 							<td>
 								<div class="planet-cell">
@@ -363,7 +397,7 @@ var RoxyAshtakavargaGrid = class extends LitElement {
       (row) => html`<tr>
 						<td>${row.planet}</td>
 						${row.bindus.map((count) => {
-        const hc = this.heatClass(count);
+        const hc = this.bhinnaHeat(count);
         return html`<td class="${`heat-cell ${hc}`}">${count}</td>`;
       })}
 						<td>${row.total}</td>
@@ -510,27 +544,68 @@ RoxyAshtakavargaGrid.styles = [
 				border-bottom: none;
 			}
 
-			/* Heat cells */
+			/* Heat cells. Single base hue (var --roxy-heat) mixed with
+			 * transparent at increasing percentages produces seven readable
+			 * tiers in both light and dark themes. Text colour stays
+			 * var(--roxy-fg) so it inverts with the host theme without
+			 * per-tier overrides. */
 			.heat-cell {
 				border-radius: var(--roxy-radius-sm, 4px);
 				font-weight: var(--roxy-weight-bold, 600);
 				min-width: 2rem;
 				font-variant-numeric: tabular-nums;
+				color: var(--roxy-fg, currentColor);
 			}
 
-			.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); }
+			.heat-1 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 6%, transparent); }
+			.heat-2 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 14%, transparent); }
+			.heat-3 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 26%, transparent); }
+			.heat-4 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 40%, transparent); }
+			.heat-5 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 55%, transparent); }
+			.heat-6 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 72%, transparent); }
+			.heat-7 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 90%, transparent); }
 
 			/* Bhinna grid: planet header column narrower */
 			.bhinna-table th:first-child,
 			.bhinna-table td:first-child {
 				min-width: 5rem;
 			}
+
+			/* Tight cells below 480px so the 14-column bhinna grid stops
+			 * overflowing the viewport. The wrapper keeps overflow-x:auto as
+			 * a fallback for very long content. */
+			@container (max-width: 480px) {
+				.bhinna-table th,
+				.bhinna-table td {
+					padding: 0.3rem 0.35rem;
+					font-size: var(--roxy-text-xs, 0.75rem);
+				}
+				.bhinna-table th:first-child,
+				.bhinna-table td:first-child {
+					min-width: 3.5rem;
+				}
+				.heat-cell {
+					min-width: 1.5rem;
+				}
+			}
+			/* Visual cue that the bhinna table is scrollable below the breakpoint:
+			 * a soft gradient at the right edge so users see there is more to scroll. */
+			.overflow-scroll {
+				mask-image: linear-gradient(
+					to right,
+					transparent 0,
+					black 0.5rem,
+					black calc(100% - 1rem),
+					transparent 100%
+				);
+				-webkit-mask-image: linear-gradient(
+					to right,
+					transparent 0,
+					black 0.5rem,
+					black calc(100% - 1rem),
+					transparent 100%
+				);
+			}
 		`
 ];
 __decorateClass([
@@ -788,12 +863,31 @@ var RoxyChoghadiyaGrid = class extends LitElement3 {
     super(...arguments);
     this.data = null;
   }
+  /**
+   * True when the current wall-clock time falls inside this period. Both
+   * `start` and `end` are ISO 8601 with timezone, so the comparison is
+   * timezone-aware via the host's `Date` parsing.
+   */
+  isCurrent(period) {
+    const now = Date.now();
+    const start = Date.parse(period.start);
+    const end = Date.parse(period.end);
+    if (Number.isNaN(start) || Number.isNaN(end)) return false;
+    return now >= start && now < end;
+  }
   renderTile(period) {
     const effectClass = period.effect === "Good" ? "good" : period.effect === "Bad" ? "bad" : "neutral";
+    const current = this.isCurrent(period);
     const lordGlyph = PLANET_GLYPH[capitalize(period.lord)] ?? "";
     const timeRange = `${fmtTime(period.start)} - ${fmtTime(period.end)}`;
-    return html3`<div class="cho-tile ${effectClass}" role="listitem">
-			<span class="tile-name">${period.name}</span>
+    return html3`<div
+			class="cho-tile ${effectClass}${current ? " now" : ""}"
+			role="listitem"
+			aria-current=${current ? "time" : "false"}
+		>
+			<span class="tile-name">
+				${period.name}${current ? html3`<span class="now-badge">Now</span>` : nothing3}
+			</span>
 			<span class="tile-time" aria-label="Time range">${timeRange}</span>
 			<span class="tile-lord">
 				${lordGlyph ? html3`<span aria-hidden="true">${lordGlyph}</span>` : nothing3}
@@ -893,6 +987,21 @@ RoxyChoghadiyaGrid.styles = [
 				background: transparent;
 				color: var(--roxy-fg, #0a0a0a);
 			}
+			.cho-tile.now {
+				outline: 2px solid var(--roxy-accent, #f59e0b);
+				outline-offset: 1px;
+				box-shadow: 0 0 0 4px
+					color-mix(in srgb, var(--roxy-accent, #f59e0b) 18%, transparent);
+			}
+			.now-badge {
+				display: inline-block;
+				margin-left: 0.4em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
 			.tile-name {
 				font-size: var(--roxy-text-base, 1rem);
 				font-weight: var(--roxy-weight-bold, 600);
@@ -1196,12 +1305,39 @@ var RoxyDashaTimeline = class extends LitElement5 {
 					</div>` : nothing5}
 			</header>
 
+			${this.renderBirthBalance(d)}
 			${this.period === "current" ? this.renderCurrent(d) : nothing5}
 			${periods.length > 0 ? html5`<div class="timeline" role="list">
 						${periods.map((p) => this.renderBar(p, maxYears))}
 					</div>` : nothing5}
+			${this.renderActiveInterpretation(periods)}
 		</div>`;
   }
+  renderBirthBalance(d) {
+    if (!("birthDashaBalance" in d) || !d.birthDashaBalance) return nothing5;
+    const b = d.birthDashaBalance;
+    const lord = "nakshatraLord" in d && d.nakshatraLord ? d.nakshatraLord : "";
+    const yrs = b.years ?? 0;
+    const mo = b.months ?? 0;
+    const da = b.days ?? 0;
+    const parts = [];
+    if (yrs) parts.push(`${yrs}y`);
+    if (mo) parts.push(`${mo}m`);
+    if (da) parts.push(`${da}d`);
+    const remaining = parts.length ? parts.join(" ") : "0d";
+    return html5`<p class="balance">
+			Birth dasha balance: ${remaining} of
+			${lord ? html5`<strong>${lord}</strong>` : "the opening mahadasha"} remained at birth.
+		</p>`;
+  }
+  renderActiveInterpretation(periods) {
+    const active = periods.find((p) => this.isCurrent(p));
+    if (!active?.interpretation) return nothing5;
+    return html5`<details class="interp">
+			<summary>${active.planet} mahadasha interpretation</summary>
+			<p>${active.interpretation}</p>
+		</details>`;
+  }
   renderCurrent(d) {
     if (!("mahadasha" in d)) return nothing5;
     return html5`<div class="current">
@@ -1227,12 +1363,52 @@ var RoxyDashaTimeline = class extends LitElement5 {
     if ("antardashas" in d && d.antardashas?.length) return d.antardashas;
     return [];
   }
+  /** True when the current wall-clock time falls between the period's start and end. */
+  isCurrent(p) {
+    if (!p.startDate || !p.endDate) return false;
+    const now = Date.now();
+    const start = Date.parse(p.startDate);
+    const end = Date.parse(p.endDate);
+    if (Number.isNaN(start) || Number.isNaN(end)) return false;
+    return now >= start && now < end;
+  }
+  /**
+   * Fractional progress (0..1) through a period at the current time. Used to
+   * draw a vertical "now" marker inside the active bar. Returns -1 outside the
+   * period so the caller can skip the marker.
+   */
+  progressIn(p) {
+    if (!p.startDate || !p.endDate) return -1;
+    const start = Date.parse(p.startDate);
+    const end = Date.parse(p.endDate);
+    const now = Date.now();
+    if (Number.isNaN(start) || Number.isNaN(end) || now < start || now >= end || end <= start) {
+      return -1;
+    }
+    return (now - start) / (end - start);
+  }
   renderBar(p, max) {
     const years = p.durationYears;
     const width = max > 0 ? years / max * 100 : 0;
-    return html5`<div class="bar" role="listitem">
-			<span>${p.planet}</span>
-			<span class="bar-track"><span style="width: ${width}%"></span></span>
+    const current = this.isCurrent(p);
+    const progress = current ? this.progressIn(p) : -1;
+    const trackClass = current ? "bar-track bar-now" : "bar-track";
+    return html5`<div
+			class=${current ? "bar now" : "bar"}
+			role="listitem"
+			aria-current=${current ? "time" : "false"}
+		>
+			<span>
+				<strong>${p.planet}</strong>${current ? html5`<span class="now-badge">Now</span>` : nothing5}
+			</span>
+			<span class=${trackClass}>
+				<span class="bar-fill" style="width: ${width}%"></span>
+				${progress >= 0 ? html5`<span
+							class="bar-progress"
+							style="left: ${progress * width}%"
+							aria-hidden="true"
+						></span>` : nothing5}
+			</span>
 			<span class="dates">
 				${p.startDate ? formatYear(p.startDate) : ""}
 				${p.endDate ? html5`- ${formatYear(p.endDate)}` : ""}
@@ -1286,6 +1462,13 @@ RoxyDashaTimeline.styles = [
 				color: var(--roxy-fg, #0a0a0a);
 			}
 
+			.balance {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				border-left: 2px solid var(--roxy-border, #e4e4e7);
+				padding-left: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
 			.timeline {
 				display: grid;
 				gap: var(--roxy-space-xs, 0.25rem);
@@ -1297,26 +1480,69 @@ RoxyDashaTimeline.styles = [
 				align-items: center;
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
+			.bar.now strong {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.now-badge {
+				display: inline-block;
+				margin-left: 0.4em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
 			.bar-track {
+				position: relative;
 				height: 14px;
 				background: var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-full, 9999px);
 				overflow: hidden;
 			}
-			.bar-track > span {
+			.bar-fill {
 				display: block;
 				height: 100%;
 				background: var(--roxy-accent, #f59e0b);
+				opacity: 0.45;
 				transition:
 					width var(--roxy-motion-duration, 200ms)
 					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
 			}
+			.bar-now .bar-fill {
+				opacity: 1;
+			}
+			.bar-progress {
+				position: absolute;
+				top: -2px;
+				bottom: -2px;
+				width: 2px;
+				background: var(--roxy-accent-fg, #b45309);
+				border-radius: 2px;
+				box-shadow: 0 0 0 2px
+					color-mix(in srgb, var(--roxy-accent, #f59e0b) 35%, transparent);
+			}
 			.dates {
 				color: var(--roxy-muted, #71717a);
 				font-size: var(--roxy-text-xs, 0.75rem);
 				font-variant-numeric: tabular-nums;
 				text-align: right;
 			}
+			details.interp {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+			}
+			details.interp summary {
+				cursor: pointer;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			details.interp p {
+				margin: var(--roxy-space-sm, 0.5rem) 0 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
 		`
 ];
 __decorateClass([
@@ -1576,11 +1802,11 @@ RoxyData = __decorateClass([
 ], RoxyData);
 
 // packages/ui/src/components/divisional-chart.ts
-import { css as css8, html as html7, LitElement as LitElement7, nothing as nothing8 } from "lit";
+import { css as css9, html as html8, LitElement as LitElement7, nothing as nothing8 } from "lit";
 import { customElement as customElement7, property as property7 } from "lit/decorators.js";
 
 // packages/ui/src/utils/kundli-render.ts
-import { nothing as nothing7, svg as svg2 } from "lit";
+import { html as html7, nothing as nothing7, svg as svg2 } from "lit";
 
 // packages/ui/src/utils/degree.ts
 function normalizeLongitude(lon) {
@@ -1625,25 +1851,45 @@ function polarToCartesian(cx, cy, radius, angleDeg) {
 }
 
 // packages/ui/src/utils/kundli-render.ts
+var VIEW_BOX = 400;
+var MARGIN = 20;
+var INNER = VIEW_BOX - 2 * MARGIN;
+var CENTRE = VIEW_BOX / 2;
 var RASHI_TO_SIGN = Object.fromEntries(
   SIGNS_ORDER.map((s) => [s.toLowerCase(), s])
 );
+var CHART_STYLES = [
+  { id: "north", label: "North" },
+  { id: "south", label: "South" },
+  { id: "east", label: "East" }
+];
 var RETRO_MARK = "\u02B3";
-function grahaLabel(p) {
+function isDivisionalPlacement(p, cellSign) {
+  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude)) {
+    return false;
+  }
+  return longitudeToSignPosition(p.longitude).sign.toLowerCase() !== cellSign.toLowerCase();
+}
+function grahaLabel(p, cellSign) {
   const abbr = PLANET_ABBR[capitalize(p.graha)] ?? p.graha.slice(0, 2);
   const retro = p.isRetrograde ? RETRO_MARK : "";
-  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude)) {
+  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude) || isDivisionalPlacement(p, cellSign)) {
     return `${abbr}${retro}`;
   }
   const { degree } = longitudeToSignPosition(p.longitude);
   return `${abbr} ${degree}\xB0${retro}`;
 }
-function grahaTitle(p) {
+function grahaTitle(p, cellSign) {
   const parts = [capitalize(p.graha)];
+  const divisional = isDivisionalPlacement(p, cellSign);
+  if (divisional) {
+    parts.push(`in ${cellSign}`);
+  }
   if (typeof p.longitude === "number" && Number.isFinite(p.longitude)) {
     const sp = longitudeToSignPosition(p.longitude);
+    const minute = String(sp.minute).padStart(2, "0");
     parts.push(
-      `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}' ${sp.sign}`
+      divisional ? `D1: ${sp.degree}\xB0${minute}' ${sp.sign}` : `${sp.degree}\xB0${minute}' ${sp.sign}`
     );
   }
   if (p.nakshatra?.name) {
@@ -1654,249 +1900,562 @@ function grahaTitle(p) {
   if (p.isRetrograde) parts.push("retrograde");
   return parts.join(" \xB7 ");
 }
-function renderPlanetStack(planets, cx, baseY, lineHeight) {
+function renderPlanetStack(planets, cellSign, cx, baseY, lineHeight) {
   const startY = baseY - (planets.length - 1) * lineHeight / 2;
   return planets.map((p, j) => {
     const yPos = startY + j * lineHeight;
     return svg2`<text class="planet-text" x=${cx} y=${yPos} text-anchor="middle" dominant-baseline="central">${grahaLabel(
-      p
-    )}<title>${grahaTitle(p)}</title></text>`;
+      p,
+      cellSign
+    )}<title>${grahaTitle(p, cellSign)}</title></text>`;
   });
 }
-var SOUTH_HOUSE_CENTERS = {
-  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 }
-};
-var SOUTH_SIGN_POSITIONS = {
-  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 }
-};
-var NORTH_HOUSE_CENTERS = {
-  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 }
-};
-var EAST_HOUSE_CENTERS = {
-  1: { x: 150, y: 80 },
-  // inner diamond, top
-  2: { x: 220, y: 33 },
-  // top-right corner, upper triangle
-  3: { x: 267, y: 80 },
-  // top-right corner, right triangle
-  4: { x: 220, y: 150 },
-  // inner diamond, right
-  5: { x: 267, y: 220 },
-  // bottom-right corner, right triangle
-  6: { x: 220, y: 267 },
-  // bottom-right corner, lower triangle
-  7: { x: 150, y: 220 },
-  // inner diamond, bottom
-  8: { x: 80, y: 267 },
-  // bottom-left corner, lower triangle
-  9: { x: 33, y: 220 },
-  // bottom-left corner, left triangle
-  10: { x: 80, y: 150 },
-  // inner diamond, left
-  11: { x: 33, y: 80 },
-  // top-left corner, left triangle
-  12: { x: 80, y: 33 }
-  // top-left corner, upper triangle
-};
-var EAST_SIGN_POSITIONS = {
-  1: { x: 150, y: 55 },
-  2: { x: 235, y: 24 },
-  3: { x: 276, y: 62 },
-  4: { x: 242, y: 150 },
-  5: { x: 276, y: 238 },
-  6: { x: 235, y: 276 },
-  7: { x: 150, y: 245 },
-  8: { x: 65, y: 276 },
-  9: { x: 24, y: 238 },
-  10: { x: 58, y: 150 },
-  11: { x: 24, y: 62 },
-  12: { x: 65, y: 24 }
+function toKundliViewModel(meta, divisionLabel) {
+  const placements = {};
+  for (const sign of SIGNS_ORDER) placements[sign.toLowerCase()] = [];
+  let lagnaSign = "";
+  for (const [name, pos] of Object.entries(meta ?? {})) {
+    const rashiKey = (pos?.rashi ?? "").toLowerCase();
+    if (name === "Lagna" || pos?.graha === "Lagna") {
+      lagnaSign = RASHI_TO_SIGN[rashiKey] ?? "";
+      continue;
+    }
+    if (!rashiKey || !(rashiKey in placements)) continue;
+    placements[rashiKey]?.push({
+      graha: pos.graha ?? name,
+      longitude: pos.longitude,
+      nakshatra: pos.nakshatra,
+      isRetrograde: pos.isRetrograde,
+      awastha: pos.awastha
+    });
+  }
+  return { lagnaSign, placements, divisionLabel };
+}
+var SOUTH_CELL = INNER / 4;
+var SOUTH_CELL_GRID = {
+  Pisces: { col: 0, row: 0 },
+  Aries: { col: 1, row: 0 },
+  Taurus: { col: 2, row: 0 },
+  Gemini: { col: 3, row: 0 },
+  Cancer: { col: 3, row: 1 },
+  Leo: { col: 3, row: 2 },
+  Virgo: { col: 3, row: 3 },
+  Libra: { col: 2, row: 3 },
+  Scorpio: { col: 1, row: 3 },
+  Sagittarius: { col: 0, row: 3 },
+  Capricorn: { col: 0, row: 2 },
+  Aquarius: { col: 0, row: 1 }
 };
-function renderSouthHouseGroup(h) {
-  const center = SOUTH_HOUSE_CENTERS[h.number];
-  const signPos = SOUTH_SIGN_POSITIONS[h.number];
-  if (!center || !signPos) return nothing7;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const baseY = h.isLagna ? center.y + 8 : center.y;
+function southCellRect(sign) {
+  const g = SOUTH_CELL_GRID[sign] ?? { col: 0, row: 0 };
+  return {
+    x: MARGIN + g.col * SOUTH_CELL,
+    y: MARGIN + g.row * SOUTH_CELL,
+    w: SOUTH_CELL,
+    h: SOUTH_CELL
+  };
+}
+function renderSouthFrame(divisionLabel) {
+  const a = MARGIN;
+  const b = MARGIN + SOUTH_CELL;
+  const c = MARGIN + 2 * SOUTH_CELL;
+  const d = MARGIN + 3 * SOUTH_CELL;
+  const e = VIEW_BOX - MARGIN;
   return svg2`
-		<g>
-			${h.isLagna ? svg2`<rect
-							class="lagna-bg"
-							x=${center.x - 30} y=${center.y - 28}
-							width="60" height="56" rx="6"
-						/>` : nothing7}
-			${signAbbr ? svg2`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
-			${h.isLagna ? svg2`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing7}
-			${renderPlanetStack(h.planets, center.x, baseY, 13)}
+		<rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${a} y1=${b} x2=${e} y2=${b} stroke-width="1" />
+		<line class="line" x1=${a} y1=${d} x2=${e} y2=${d} stroke-width="1" />
+		<line class="line" x1=${b} y1=${a} x2=${b} y2=${e} stroke-width="1" />
+		<line class="line" x1=${d} y1=${a} x2=${d} y2=${e} stroke-width="1" />
+		<line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
+		<line class="line" x1=${d} y1=${c} x2=${e} y2=${c} stroke-width="1" />
+		<line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${d} x2=${c} y2=${e} stroke-width="1" />
+		${divisionLabel ? svg2`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing7}
+	`;
+}
+function houseNumberInSign(sign, lagnaSign) {
+  const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
+  const signIdx = SIGNS_ORDER.findIndex((s) => s === sign);
+  if (lagnaIdx === -1 || signIdx === -1) return 0;
+  return (signIdx - lagnaIdx + 12) % 12 + 1;
+}
+function renderSouthCell(sign, planets, isLagna, houseNum) {
+  const r = southCellRect(sign);
+  const cx = r.x + r.w / 2;
+  const cy = r.y + r.h / 2;
+  const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
+  const slashInset = 14;
+  return svg2`
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? svg2`
+						<rect class="lagna-bg" x=${r.x} y=${r.y} width=${r.w} height=${r.h} />
+						<line class="lagna-slash" x1=${r.x + r.w - slashInset} y1=${r.y + slashInset} x2=${r.x + slashInset} y2=${r.y + r.h - slashInset} stroke-width="1.2" />
+					` : nothing7}
+			<text class="sign-text" x=${r.x + 6} y=${r.y + 12} text-anchor="start" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? svg2`<text class="house-num" x=${r.x + r.w - 6} y=${r.y + 12} text-anchor="end" dominant-baseline="central">${houseNum}</text>` : nothing7}
+			${planets.length ? renderPlanetStack(planets, sign, cx, cy + 4, 14) : nothing7}
 		</g>
 	`;
 }
-function renderNorthFrame() {
+function renderSouthSvg(vm) {
+  const lagnaKey = vm.lagnaSign.toLowerCase();
   return svg2`
-		<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" />
+		${renderSouthFrame(vm.divisionLabel)}
+		${SIGNS_ORDER.map(
+    (sign) => renderSouthCell(
+      sign,
+      vm.placements[sign.toLowerCase()] ?? [],
+      sign.toLowerCase() === lagnaKey,
+      houseNumberInSign(sign, vm.lagnaSign)
+    )
+  )}
 	`;
 }
-function renderNorthHouseGroup(h) {
-  const center = NORTH_HOUSE_CENTERS[h.number];
-  if (!center) return nothing7;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+var NORTH_VERTICES = {
+  tl: { x: MARGIN, y: MARGIN },
+  tr: { x: VIEW_BOX - MARGIN, y: MARGIN },
+  br: { x: VIEW_BOX - MARGIN, y: VIEW_BOX - MARGIN },
+  bl: { x: MARGIN, y: VIEW_BOX - MARGIN },
+  top: { x: CENTRE, y: MARGIN },
+  right: { x: VIEW_BOX - MARGIN, y: CENTRE },
+  bottom: { x: CENTRE, y: VIEW_BOX - MARGIN },
+  left: { x: MARGIN, y: CENTRE },
+  tlMid: { x: CENTRE - INNER / 4, y: CENTRE - INNER / 4 },
+  trMid: { x: CENTRE + INNER / 4, y: CENTRE - INNER / 4 },
+  brMid: { x: CENTRE + INNER / 4, y: CENTRE + INNER / 4 },
+  blMid: { x: CENTRE - INNER / 4, y: CENTRE + INNER / 4 }
+};
+function centroidOf(pts) {
+  const x = pts.reduce((s, p) => s + p.x, 0) / pts.length;
+  const y = pts.reduce((s, p) => s + p.y, 0) / pts.length;
+  return { x, y };
+}
+var NORTH_HOUSE_CENTERS = {
+  1: { x: CENTRE, y: NORTH_VERTICES.tlMid.y },
+  2: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.top, NORTH_VERTICES.tlMid]),
+  3: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.left, NORTH_VERTICES.tlMid]),
+  4: { x: NORTH_VERTICES.tlMid.x, y: CENTRE },
+  5: centroidOf([NORTH_VERTICES.bl, NORTH_VERTICES.left, NORTH_VERTICES.blMid]),
+  6: centroidOf([
+    NORTH_VERTICES.bl,
+    NORTH_VERTICES.bottom,
+    NORTH_VERTICES.blMid
+  ]),
+  7: { x: CENTRE, y: NORTH_VERTICES.blMid.y },
+  8: centroidOf([
+    NORTH_VERTICES.br,
+    NORTH_VERTICES.bottom,
+    NORTH_VERTICES.brMid
+  ]),
+  9: centroidOf([
+    NORTH_VERTICES.br,
+    NORTH_VERTICES.right,
+    NORTH_VERTICES.brMid
+  ]),
+  10: { x: NORTH_VERTICES.brMid.x, y: CENTRE },
+  11: centroidOf([
+    NORTH_VERTICES.tr,
+    NORTH_VERTICES.right,
+    NORTH_VERTICES.trMid
+  ]),
+  12: centroidOf([NORTH_VERTICES.tr, NORTH_VERTICES.top, NORTH_VERTICES.trMid])
+};
+function rashiInHouse(houseNum, lagnaSign) {
+  const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
+  if (lagnaIdx === -1) return houseNum;
+  return (lagnaIdx + houseNum - 1) % 12 + 1;
+}
+function renderNorthFrame(divisionLabel) {
+  const { tl, tr, br, bl, top, right, bottom, left } = NORTH_VERTICES;
   return svg2`
-		<g>
-			${h.isLagna ? svg2`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />` : nothing7}
-			${signAbbr ? svg2`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
-			<text class="house-num" x=${center.x} y=${center.y + 2} text-anchor="middle" dominant-baseline="central">${h.number}</text>
-			${renderPlanetStack(h.planets, center.x, center.y + 14, 11)}
+		<rect class="line" x=${tl.x} y=${tl.y} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<polygon class="line" points="${top.x},${top.y} ${right.x},${right.y} ${bottom.x},${bottom.y} ${left.x},${left.y}" stroke-width="1" fill="none" />
+		<line class="line" x1=${tl.x} y1=${tl.y} x2=${br.x} y2=${br.y} stroke-width="1" />
+		<line class="line" x1=${tr.x} y1=${tr.y} x2=${bl.x} y2=${bl.y} stroke-width="1" />
+		${divisionLabel ? svg2`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing7}
+	`;
+}
+function renderNorthCell(houseNum, rashiNum, sign, planets, isLagna) {
+  const c = NORTH_HOUSE_CENTERS[houseNum];
+  if (!c) return svg2``;
+  const rashiOffsetY = Math.min(14, Math.abs(c.y - CENTRE) * 0.45 + 6);
+  const ascOffsetY = rashiOffsetY + 12;
+  return svg2`
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			<text class="rashi-num" x=${c.x} y=${c.y - rashiOffsetY} text-anchor="middle" dominant-baseline="central">${rashiNum}</text>
+			${isLagna ? svg2`<text class="lagna-marker" x=${c.x} y=${c.y - ascOffsetY} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing7}
+			${planets.length ? renderPlanetStack(planets, sign, c.x, c.y + 8, 12) : nothing7}
 		</g>
 	`;
 }
-function renderSouthFrame() {
+function renderNorthSvg(vm) {
+  const lagnaSign = vm.lagnaSign || "Aries";
   return svg2`
-		<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" />
+		${renderNorthFrame(vm.divisionLabel)}
+		${Array.from({ length: 12 }, (_, i) => {
+    const houseNum = i + 1;
+    const rashiNum = rashiInHouse(houseNum, lagnaSign);
+    const sign = SIGNS_ORDER[rashiNum - 1] ?? "Aries";
+    return renderNorthCell(
+      houseNum,
+      rashiNum,
+      sign,
+      vm.placements[sign.toLowerCase()] ?? [],
+      houseNum === 1
+    );
+  })}
 	`;
 }
-function renderEastFrame() {
+var EAST_CELL = INNER / 3;
+function eastCells() {
+  const a = MARGIN;
+  const b = MARGIN + EAST_CELL;
+  const c = MARGIN + 2 * EAST_CELL;
+  const d = VIEW_BOX - MARGIN;
+  const aries = [
+    { x: b, y: a },
+    { x: c, y: a },
+    { x: c, y: b },
+    { x: b, y: b }
+  ];
+  const cancer = [
+    { x: a, y: b },
+    { x: b, y: b },
+    { x: b, y: c },
+    { x: a, y: c }
+  ];
+  const libra = [
+    { x: b, y: c },
+    { x: c, y: c },
+    { x: c, y: d },
+    { x: b, y: d }
+  ];
+  const capricorn = [
+    { x: c, y: b },
+    { x: d, y: b },
+    { x: d, y: c },
+    { x: c, y: c }
+  ];
+  const taurus = [
+    { x: a, y: a },
+    { x: b, y: a },
+    { x: b, y: b }
+  ];
+  const gemini = [
+    { x: a, y: a },
+    { x: b, y: b },
+    { x: a, y: b }
+  ];
+  const leo = [
+    { x: a, y: c },
+    { x: b, y: c },
+    { x: a, y: d }
+  ];
+  const virgo = [
+    { x: b, y: c },
+    { x: b, y: d },
+    { x: a, y: d }
+  ];
+  const scorpio = [
+    { x: c, y: c },
+    { x: c, y: d },
+    { x: d, y: d }
+  ];
+  const sagittarius = [
+    { x: c, y: c },
+    { x: d, y: d },
+    { x: d, y: c }
+  ];
+  const aquarius = [
+    { x: d, y: a },
+    { x: d, y: b },
+    { x: c, y: b }
+  ];
+  const pisces = [
+    { x: c, y: a },
+    { x: d, y: a },
+    { x: c, y: b }
+  ];
+  const polys = {
+    Aries: aries,
+    Taurus: taurus,
+    Gemini: gemini,
+    Cancer: cancer,
+    Leo: leo,
+    Virgo: virgo,
+    Libra: libra,
+    Scorpio: scorpio,
+    Sagittarius: sagittarius,
+    Capricorn: capricorn,
+    Aquarius: aquarius,
+    Pisces: pisces
+  };
+  const out = {};
+  for (const [sign, points] of Object.entries(polys)) {
+    out[sign] = { points: [...points], centroid: centroidOf(points) };
+  }
+  return out;
+}
+var EAST_CELLS = eastCells();
+function renderEastFrame(divisionLabel) {
+  const a = MARGIN;
+  const b = MARGIN + EAST_CELL;
+  const c = MARGIN + 2 * EAST_CELL;
+  const d = VIEW_BOX - MARGIN;
   return svg2`
-		<rect class="line" x="10" y="10" width="280" height="280" stroke-width="1.5" fill="none" />
-		<line class="line" x1="10" y1="10" x2="290" y2="290" stroke-width="1" />
-		<line class="line" x1="290" y1="10" x2="10" y2="290" stroke-width="1" />
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1" fill="none" />
+		<rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${a} y1=${b} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${b} x2=${d} y2=${b} stroke-width="1" />
+		<line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
+		<line class="line" x1=${c} y1=${c} x2=${d} y2=${c} stroke-width="1" />
+		<line class="line" x1=${b} y1=${a} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${b} y1=${c} x2=${b} y2=${d} stroke-width="1" />
+		<line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${c} x2=${c} y2=${d} stroke-width="1" />
+		<line class="line" x1=${a} y1=${a} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${d} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${d} y1=${d} x2=${c} y2=${c} stroke-width="1" />
+		<line class="line" x1=${a} y1=${d} x2=${b} y2=${c} stroke-width="1" />
+		${divisionLabel ? svg2`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing7}
 	`;
 }
-function renderEastHouseGroup(h) {
-  const center = EAST_HOUSE_CENTERS[h.number];
-  const signPos = EAST_SIGN_POSITIONS[h.number];
-  if (!center || !signPos) return nothing7;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+function renderEastCell(sign, planets, isLagna, houseNum) {
+  const cell = EAST_CELLS[sign];
+  if (!cell) return svg2``;
+  const { centroid: cen, points } = cell;
+  const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
+  const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
   return svg2`
-		<g>
-			${h.isLagna ? svg2`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="20" />` : nothing7}
-			${signAbbr ? svg2`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
-			${h.isLagna ? svg2`<text class="lagna-marker" x=${center.x} y=${center.y - 14} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing7}
-			${renderPlanetStack(h.planets, center.x, center.y + 2, 11)}
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? svg2`<polygon class="lagna-bg" points=${polyPoints} />` : nothing7}
+			<text class="sign-text" x=${cen.x} y=${cen.y - 16} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? svg2`<text class="house-num" x=${cen.x + 18} y=${cen.y - 16} text-anchor="start" dominant-baseline="central">${houseNum}</text>` : nothing7}
+			${isLagna ? svg2`<text class="lagna-marker" x=${cen.x} y=${cen.y - 30} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing7}
+			${planets.length ? renderPlanetStack(planets, sign, cen.x, cen.y + 4, 12) : nothing7}
 		</g>
 	`;
 }
-function buildHousesFromMeta(meta) {
-  const byRashi = /* @__PURE__ */ new Map();
-  let lagnaKey = "";
-  for (const [name, pos] of Object.entries(meta)) {
-    const rashiKey = (pos?.rashi ?? "").toLowerCase();
-    if (name === "Lagna" || pos?.graha === "Lagna") {
-      lagnaKey = rashiKey;
-      continue;
-    }
-    if (!rashiKey) continue;
-    const list = byRashi.get(rashiKey) ?? [];
-    list.push({
-      graha: pos.graha ?? name,
-      longitude: pos.longitude,
-      nakshatra: pos.nakshatra,
-      isRetrograde: pos.isRetrograde,
-      awastha: pos.awastha
-    });
-    byRashi.set(rashiKey, list);
-  }
-  return SIGNS_ORDER.map((sign, i) => {
-    const key = sign.toLowerCase();
-    return {
-      number: i + 1,
+function renderEastSvg(vm) {
+  const lagnaKey = vm.lagnaSign.toLowerCase();
+  return svg2`
+		${renderEastFrame(vm.divisionLabel)}
+		${SIGNS_ORDER.map(
+    (sign) => renderEastCell(
       sign,
-      planets: byRashi.get(key) ?? [],
-      isLagna: lagnaKey === key
-    };
-  });
+      vm.placements[sign.toLowerCase()] ?? [],
+      sign.toLowerCase() === lagnaKey,
+      houseNumberInSign(sign, vm.lagnaSign)
+    )
+  )}
+	`;
+}
+function renderKundliSvg(vm, style) {
+  switch (style) {
+    case "north":
+      return renderNorthSvg(vm);
+    case "east":
+      return renderEastSvg(vm);
+    default:
+      return renderSouthSvg(vm);
+  }
+}
+function renderKundliStyleTablist(active, setStyle) {
+  const onKeyDown = (e) => {
+    const idx = CHART_STYLES.findIndex((s) => s.id === active);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = CHART_STYLES[(idx + 1) % CHART_STYLES.length];
+      if (next) setStyle(next.id);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const next = CHART_STYLES[(idx - 1 + CHART_STYLES.length) % CHART_STYLES.length];
+      if (next) setStyle(next.id);
+    }
+  };
+  return html7`<div
+		class="kundli-tablist"
+		role="tablist"
+		aria-label="Kundli style"
+		@keydown=${onKeyDown}
+	>
+		${CHART_STYLES.map(
+    (s) => html7`<button
+				type="button"
+				class="kundli-tab"
+				role="tab"
+				id="kundli-tab-${s.id}"
+				aria-selected=${active === s.id ? "true" : "false"}
+				tabindex=${active === s.id ? "0" : "-1"}
+				@click=${() => setStyle(s.id)}
+			>
+				${s.label}
+			</button>`
+  )}
+	</div>`;
 }
 
+// packages/ui/src/utils/kundli-styles.ts
+import { css as css8 } from "lit";
+var kundliStyles = css8`
+	.wrap {
+		display: grid;
+		gap: var(--roxy-space-md, 1rem);
+	}
+	.header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--roxy-space-sm, 0.5rem);
+	}
+	.title {
+		font-size: var(--roxy-text-lg, 1.125rem);
+		font-weight: var(--roxy-weight-bold, 600);
+		margin: 0;
+	}
+	.kundli-tablist {
+		display: inline-flex;
+		gap: 2px;
+		border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+	}
+	.kundli-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);
+	}
+	.kundli-tab[aria-selected='true'] {
+		color: var(--roxy-accent-fg, #b45309);
+		border-bottom-color: var(--roxy-accent, #f59e0b);
+		font-weight: var(--roxy-weight-bold, 600);
+	}
+	.kundli-tab:hover:not([aria-selected='true']) {
+		color: var(--roxy-fg, #0a0a0a);
+	}
+	.kundli-tab:focus-visible {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
+	svg {
+		display: block;
+		width: 100%;
+		max-width: 560px;
+		aspect-ratio: 1 / 1;
+		height: auto;
+		margin: 0 auto;
+	}
+	.line {
+		fill: transparent;
+		stroke: var(--roxy-border, #d4d4d8);
+	}
+	.sign-text {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 11px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.rashi-num {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 12px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+	}
+	.house-num {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 11px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		opacity: 0.85;
+	}
+	.planet-text {
+		fill: var(--roxy-fg, #0a0a0a);
+		font-size: 13px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+	}
+	.centre-label {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 14px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.02em;
+	}
+	.lagna-marker {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 10px;
+		font-weight: 700;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+	.lagna-bg {
+		fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+	}
+	.lagna-slash {
+		stroke: var(--roxy-accent, #f59e0b);
+		stroke-linecap: round;
+		opacity: 0.7;
+	}
+`;
+
 // packages/ui/src/components/divisional-chart.ts
 var RoxyDivisionalChart = class extends LitElement7 {
   constructor() {
     super(...arguments);
     this.data = null;
-    this.chartStyle = "south";
+    this.chartStyle = "north";
+    this.setStyle = (next) => {
+      this.chartStyle = next;
+    };
   }
-  buildHouses() {
-    if (!this.data?.chart?.meta) return [];
-    return buildHousesFromMeta(this.data.chart.meta);
+  viewModel() {
+    if (!this.data?.chart?.meta) return null;
+    const { division } = this.data;
+    const label = `D${division.number} ${division.name}`;
+    return toKundliViewModel(this.data.chart.meta, label);
   }
   render() {
-    if (!this.data)
-      return html7`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+    const vm = this.viewModel();
+    if (!this.data || !vm)
+      return html8`<div class="roxy-empty" role="status">No divisional chart data</div>`;
     const { division, vargottama } = this.data;
-    const houses = this.buildHouses();
-    const style = this.chartStyle;
-    const frame = style === "north" ? renderNorthFrame() : style === "east" ? renderEastFrame() : renderSouthFrame();
-    const houseGroup = style === "north" ? renderNorthHouseGroup : style === "east" ? renderEastHouseGroup : renderSouthHouseGroup;
-    return html7`<div class="wrap">
+    return html8`<div class="wrap">
 			<div class="header">
-				<h2 class="title">
-					D${division.number} ${division.name}
-					${division.sanskritName && division.sanskritName !== division.name ? html7`<span class="division-meta"> · ${division.sanskritName}</span>` : nothing8}
-				</h2>
-				${division.significance ? html7`<p class="significance">${division.significance}</p>` : nothing8}
+				<div>
+					<h2 class="title">
+						D${division.number} ${division.name}
+						${division.sanskritName && division.sanskritName !== division.name ? html8`<span class="division-meta"> · ${division.sanskritName}</span>` : nothing8}
+					</h2>
+					${division.significance ? html8`<p class="significance">${division.significance}</p>` : nothing8}
+				</div>
+				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
 			</div>
 
 			<svg
-				viewBox="0 0 300 300"
+				viewBox="0 0 400 400"
+				preserveAspectRatio="xMidYMid meet"
 				role="img"
 				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
 			>
 				<title>D${division.number} ${division.name}</title>
-				${frame}
-				${houses.map((h) => houseGroup(h))}
+				${renderKundliSvg(vm, this.chartStyle)}
 			</svg>
 
-			${vargottama && vargottama.length > 0 ? html7`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
+			${vargottama && vargottama.length > 0 ? html8`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
 						<span class="vargottama-label">Vargottama:</span>
 						${vargottama.map(
-      (planet) => html7`<span class="vargottama-pill" role="listitem">
+      (planet) => html8`<span class="vargottama-pill" role="listitem">
 									${PLANET_GLYPH[planet] ?? ""} ${planet}
 								</span>`
     )}
@@ -1906,20 +2465,8 @@ var RoxyDivisionalChart = class extends LitElement7 {
 };
 RoxyDivisionalChart.styles = [
   baseStyles,
-  css8`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.header {
-				display: grid;
-				gap: var(--roxy-space-xs, 0.25rem);
-			}
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
+  kundliStyles,
+  css9`
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -1932,46 +2479,6 @@ RoxyDivisionalChart.styles = [
 				padding-left: var(--roxy-space-sm, 0.5rem);
 				margin: 0;
 			}
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
-			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 11px;
-				font-weight: 600;
-				font-family: var(--roxy-font-sans);
-			}
-			.house-num {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 400;
-				font-family: var(--roxy-font-sans);
-			}
-			.lagna-marker {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 8px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
-			}
-			.lagna-bg {
-				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-				stroke-width: 0.8;
-			}
 			.vargottama-row {
 				display: flex;
 				flex-wrap: wrap;
@@ -2009,7 +2516,7 @@ RoxyDivisionalChart = __decorateClass([
 ], RoxyDivisionalChart);
 
 // packages/ui/src/components/dosha-card.ts
-import { css as css9, html as html8, LitElement as LitElement8, nothing as nothing9 } from "lit";
+import { css as css10, html as html9, LitElement as LitElement8, nothing as nothing9 } from "lit";
 import { customElement as customElement8, property as property8 } from "lit/decorators.js";
 var DOSHA_LABELS = {
   manglik: "Mangal Dosha",
@@ -2025,14 +2532,14 @@ var RoxyDoshaCard = class extends LitElement8 {
   render() {
     const d = this.data;
     if (!d)
-      return html8`<div class="roxy-empty" role="status">No dosha data</div>`;
+      return html9`<div class="roxy-empty" role="status">No dosha data</div>`;
     const present = !!d.present;
     const label = DOSHA_LABELS[this.type] ?? this.type;
     const sevLower = (d.severity ?? "").toLowerCase();
     const tier = sevLower === "severe" ? 3 : sevLower === "moderate" ? 2 : sevLower === "mild" ? 1 : 0;
     const pct = tier * 33;
     const barColor = tier === 3 ? "var(--roxy-danger)" : tier === 2 ? "var(--roxy-warning)" : tier === 1 ? "var(--roxy-success)" : "transparent";
-    return html8`<article
+    return html9`<article
 			class="card"
 			aria-label=${label}
 		>
@@ -2042,7 +2549,7 @@ var RoxyDoshaCard = class extends LitElement8 {
 					${present ? "Present" : "Absent"}
 				</span>
 			</header>
-			${d.severity ? html8`<div
+			${d.severity ? html9`<div
 						class="severity-bar"
 						role="meter"
 						aria-valuemin="0"
@@ -2052,18 +2559,18 @@ var RoxyDoshaCard = class extends LitElement8 {
 					>
 						<span class="severity-fill" style="width: ${pct}%; background: ${barColor};"></span>
 					</div>` : nothing9}
-			${d.description ? html8`<p class="description">${d.description}</p>` : nothing9}
+			${d.description ? html9`<p class="description">${d.description}</p>` : nothing9}
 			${this.renderEffects(d)}
-			${d.remedies && d.remedies.length > 0 ? html8`<div>
+			${d.remedies && d.remedies.length > 0 ? html9`<div>
 						<h3>Remedies</h3>
 						<ul>
-							${d.remedies.map((r) => html8`<li>${r}</li>`)}
+							${d.remedies.map((r) => html9`<li>${r}</li>`)}
 						</ul>
 					</div>` : nothing9}
-			${"exceptions" in d && d.exceptions && d.exceptions.length > 0 ? html8`<div>
+			${"exceptions" in d && d.exceptions && d.exceptions.length > 0 ? html9`<div>
 					<h3>Exceptions</h3>
 					<ul>
-						${d.exceptions.map((r) => html8`<li>${r}</li>`)}
+						${d.exceptions.map((r) => html9`<li>${r}</li>`)}
 					</ul>
 				</div>` : nothing9}
 		</article>`;
@@ -2074,9 +2581,9 @@ var RoxyDoshaCard = class extends LitElement8 {
       ([, v]) => typeof v === "string" && v.length > 0
     );
     if (entries.length === 0) return nothing9;
-    return html8`<div class="effects">
+    return html9`<div class="effects">
 			${entries.map(
-      ([k, v]) => html8`<div>
+      ([k, v]) => html9`<div>
 					<h3>${k}</h3>
 					<p>${v}</p>
 				</div>`
@@ -2086,7 +2593,7 @@ var RoxyDoshaCard = class extends LitElement8 {
 };
 RoxyDoshaCard.styles = [
   baseStyles,
-  css9`
+  css10`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -2187,7 +2694,7 @@ RoxyDoshaCard = __decorateClass([
 ], RoxyDoshaCard);
 
 // packages/ui/src/components/endpoint-form.ts
-import { css as css10, html as html9, LitElement as LitElement9, nothing as nothing10 } from "lit";
+import { css as css11, html as html10, LitElement as LitElement9, nothing as nothing10 } from "lit";
 import { customElement as customElement9, property as property9, state as state2 } from "lit/decorators.js";
 var specCache = /* @__PURE__ */ new Map();
 async function loadSpec(url) {
@@ -2349,10 +2856,10 @@ var RoxyEndpointForm = class extends LitElement9 {
   }
   render() {
     if (!this.loaded) {
-      return html9`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
+      return html10`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
     }
     if (this.specError) {
-      return html9`<div class="spec-error" role="alert">
+      return html10`<div class="spec-error" role="alert">
 				Schema load failed: ${this.specError}
 				<button type="button" class="submit" @click=${this.retryLoadSchema}>Retry</button>
 			</div>`;
@@ -2362,22 +2869,22 @@ var RoxyEndpointForm = class extends LitElement9 {
         return nothing10;
       }
       const inputId = `roxy-form-${f.name}`;
-      return html9`<div class="field">
+      return html10`<div class="field">
 				<label for=${inputId}>
-					${humanize(f.name)}${f.required ? html9`<span class="req" aria-hidden="true">*</span>` : nothing10}
+					${humanize(f.name)}${f.required ? html10`<span class="req" aria-hidden="true">*</span>` : nothing10}
 				</label>
-				${f.enum ? html9`<select
+				${f.enum ? html10`<select
 							id=${inputId}
 							?required=${f.required}
 							@change=${(e) => this.setValue(f.name, e.target.value)}
 						>
 							<option value="">Choose</option>
 							${f.enum.map(
-        (opt) => html9`<option value=${opt} ?selected=${this.values[f.name] === opt}>
+        (opt) => html10`<option value=${opt} ?selected=${this.values[f.name] === opt}>
 									${opt}
 								</option>`
       )}
-						</select>` : html9`<input
+						</select>` : html10`<input
 							id=${inputId}
 							type=${this.htmlType(f.type)}
 							?required=${f.required}
@@ -2390,12 +2897,12 @@ var RoxyEndpointForm = class extends LitElement9 {
         this.coerce(f.type, e.target.value)
       )}
 						/>`}
-				${f.description ? html9`<small class="help">${f.description}</small>` : nothing10}
+				${f.description ? html10`<small class="help">${f.description}</small>` : nothing10}
 			</div>`;
     };
-    return html9`<form @submit=${this.onSubmit}>
+    return html10`<form @submit=${this.onSubmit}>
 			<h2 class="title">${humanize(this.endpoint.split("/").pop() ?? "")}</h2>
-			${this.hasLocation ? html9`<div class="location-block">
+			${this.hasLocation ? html10`<div class="location-block">
 						<label>Birth location</label>
 						<roxy-location-search
 							@roxy-location-select=${this.onLocation}
@@ -2436,7 +2943,7 @@ var RoxyEndpointForm = class extends LitElement9 {
 };
 RoxyEndpointForm.styles = [
   baseStyles,
-  css10`
+  css11`
 			form {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -2572,7 +3079,7 @@ RoxyEndpointForm = __decorateClass([
 ], RoxyEndpointForm);
 
 // packages/ui/src/components/guna-milan.ts
-import { css as css11, html as html10, LitElement as LitElement10, nothing as nothing11 } from "lit";
+import { css as css12, html as html11, LitElement as LitElement10, nothing as nothing11 } from "lit";
 import { customElement as customElement10, property as property10 } from "lit/decorators.js";
 var RoxyGunaMilan = class extends LitElement10 {
   constructor() {
@@ -2582,7 +3089,7 @@ var RoxyGunaMilan = class extends LitElement10 {
   render() {
     const d = this.data;
     if (!d)
-      return html10`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
+      return html11`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
     const breakdown = (d.breakdown ?? []).filter(
       (b) => b?.category !== void 0
     );
@@ -2593,18 +3100,18 @@ var RoxyGunaMilan = class extends LitElement10 {
     const fillColor = pct >= 70 ? "var(--roxy-success)" : pct >= 50 ? "var(--roxy-warning)" : "var(--roxy-danger)";
     const dashFill = pct * 2.827;
     const dashGap = (100 - pct) * 2.827;
-    return html10`<article class="card" aria-label="Guna Milan score">
+    return html11`<article class="card" aria-label="Guna Milan score">
 			<div class="score-header">
 				<div class="score-info">
 					<div class="score-bar">
 						<div>
 							<span class="total">${formatNumber(d.total, 1)}</span>
 							<span class="over"> / ${d.maxScore}</span>
-							${typeof d.percentage === "number" ? html10`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
+							${typeof d.percentage === "number" ? html11`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
 										${formatPercent(d.percentage, 1)}
 									</small>` : nothing11}
 						</div>
-						${d.recommendation ? html10`<span class="recommendation">${d.recommendation}</span>` : nothing11}
+						${d.recommendation ? html11`<span class="recommendation">${d.recommendation}</span>` : nothing11}
 					</div>
 				</div>
 				<div class="score-ring" role="meter" aria-label="Guna milan score" aria-valuemin="0" aria-valuemax="36" aria-valuenow="${score}">
@@ -2619,7 +3126,7 @@ var RoxyGunaMilan = class extends LitElement10 {
 				</div>
 			</div>
 
-			${breakdown.length > 0 ? html10`<table>
+			${breakdown.length > 0 ? html11`<table>
 						<thead>
 							<tr>
 								<th>Category</th>
@@ -2632,7 +3139,7 @@ var RoxyGunaMilan = class extends LitElement10 {
       const score2 = b.score ?? 0;
       const maxScore = b.maxScore ?? defaultMax(b.category);
       const pct2 = maxScore ? score2 / maxScore * 100 : 0;
-      return html10`<tr>
+      return html11`<tr>
 									<td>${b.category}</td>
 									<td class="bar-cell">
 										<div class="mini-bar">
@@ -2644,10 +3151,10 @@ var RoxyGunaMilan = class extends LitElement10 {
     })}
 						</tbody>
 					</table>` : nothing11}
-			${(d.doshas?.length ?? 0) > 0 || (d.doshaCancellations?.length ?? 0) > 0 ? html10`<div class="tags">
-						${d.doshas?.map((x) => html10`<span class="dosha">${x}</span>`)}
+			${(d.doshas?.length ?? 0) > 0 || (d.doshaCancellations?.length ?? 0) > 0 ? html11`<div class="tags">
+						${d.doshas?.map((x) => html11`<span class="dosha">${x}</span>`)}
 						${d.doshaCancellations?.map(
-      (x) => html10`<span class="cancel" title=${x.reason}>${x.dosha} cancelled</span>`
+      (x) => html11`<span class="cancel" title=${x.reason}>${x.dosha} cancelled</span>`
     )}
 					</div>` : nothing11}
 		</article>`;
@@ -2655,7 +3162,7 @@ var RoxyGunaMilan = class extends LitElement10 {
 };
 RoxyGunaMilan.styles = [
   baseStyles,
-  css11`
+  css12`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -2809,7 +3316,7 @@ function defaultMax(name) {
 }
 
 // packages/ui/src/components/hexagram.ts
-import { css as css12, html as html11, LitElement as LitElement11, nothing as nothing12, svg as svg3 } from "lit";
+import { css as css13, html as html12, LitElement as LitElement11, nothing as nothing12, svg as svg3 } from "lit";
 import { customElement as customElement11, property as property11 } from "lit/decorators.js";
 var RoxyHexagram = class extends LitElement11 {
   constructor() {
@@ -2841,7 +3348,7 @@ var RoxyHexagram = class extends LitElement11 {
   render() {
     const resolved = this.resolveHexagram();
     if (!resolved)
-      return html11`<div class="roxy-empty" role="status">No hexagram data</div>`;
+      return html12`<div class="roxy-empty" role="status">No hexagram data</div>`;
     const {
       hex: h,
       lines: castLines,
@@ -2851,16 +3358,16 @@ var RoxyHexagram = class extends LitElement11 {
     } = resolved;
     const lines = castLines ?? this.derivedLines(h);
     const changing = new Set(changingLinePositions ?? []);
-    return html11`<article class="card" aria-label="I Ching hexagram">
+    return html12`<article class="card" aria-label="I Ching hexagram">
 			<div class="glyphs">
-				${h.symbol ? html11`<div class="symbol">${h.symbol}</div>` : nothing12}
+				${h.symbol ? html12`<div class="symbol">${h.symbol}</div>` : nothing12}
 				<div class="lines" aria-hidden="true">
 					${lines.slice().reverse().map((l, idx) => {
       const realIdx = lines.length - 1 - idx + 1;
       const isChanging = changing.has(realIdx);
       const broken = l === 6 || l === 8;
       const cls = `${broken ? "broken" : "solid"}${isChanging ? " changing" : ""}`;
-      return html11`<div class="line ${cls}">
+      return html12`<div class="line ${cls}">
 								${broken ? svg3`<span class="seg"></span><span class="seg"></span>` : svg3`<span class="seg"></span>`}
 							</div>`;
     })}
@@ -2868,33 +3375,33 @@ var RoxyHexagram = class extends LitElement11 {
 			</div>
 			<div>
 				<h2 class="title">
-					${h.number ? html11`${h.number}. ` : nothing12}${h.english ?? h.chinese ?? "Hexagram"}
+					${h.number ? html12`${h.number}. ` : nothing12}${h.english ?? h.chinese ?? "Hexagram"}
 				</h2>
 				<p class="subtitle">
-					${h.chinese ? html11`${h.chinese}` : nothing12}
-					${h.pinyin ? html11` · ${h.pinyin}` : nothing12}
+					${h.chinese ? html12`${h.chinese}` : nothing12}
+					${h.pinyin ? html12` · ${h.pinyin}` : nothing12}
 				</p>
 				<div class="trigrams">
-					${h.upperTrigram ? html11`<div>
+					${h.upperTrigram ? html12`<div>
 								Upper
 								<span class="tri-glyph"
 									>${TRIGRAM_GLYPH[h.upperTrigram] ?? ""}</span
 								>${h.upperTrigram}
 							</div>` : nothing12}
-					${h.lowerTrigram ? html11`<div>
+					${h.lowerTrigram ? html12`<div>
 								Lower
 								<span class="tri-glyph"
 									>${TRIGRAM_GLYPH[h.lowerTrigram] ?? ""}</span
 								>${h.lowerTrigram}
 							</div>` : nothing12}
 				</div>
-				${h.judgment ? html11`<p class="judgment">${h.judgment}</p>` : nothing12}
-				${h.image ? html11`<p class="image">${h.image}</p>` : nothing12}
-				${dailyMessage ? html11`<p class="message">${dailyMessage}</p>` : nothing12}
-				${h.interpretation?.general ? html11`<p>${h.interpretation.general}</p>` : nothing12}
-				${changing.size > 0 ? html11`<div class="changing">
+				${h.judgment ? html12`<p class="judgment">${h.judgment}</p>` : nothing12}
+				${h.image ? html12`<p class="image">${h.image}</p>` : nothing12}
+				${dailyMessage ? html12`<p class="message">${dailyMessage}</p>` : nothing12}
+				${h.interpretation?.general ? html12`<p>${h.interpretation.general}</p>` : nothing12}
+				${changing.size > 0 ? html12`<div class="changing">
 							Changing lines: ${Array.from(changing).sort((a, b) => a - b).join(", ")}.
-							${resultingHexagram?.english ? html11` Becomes hexagram ${resultingHexagram.number}
+							${resultingHexagram?.english ? html12` Becomes hexagram ${resultingHexagram.number}
 										${resultingHexagram.english}.` : nothing12}
 						</div>` : nothing12}
 			</div>
@@ -2917,7 +3424,7 @@ var RoxyHexagram = class extends LitElement11 {
 };
 RoxyHexagram.styles = [
   baseStyles,
-  css12`
+  css13`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3037,7 +3544,7 @@ RoxyHexagram = __decorateClass([
 ], RoxyHexagram);
 
 // packages/ui/src/components/horoscope-card.ts
-import { css as css13, html as html12, LitElement as LitElement12, nothing as nothing13 } from "lit";
+import { css as css14, html as html13, LitElement as LitElement12, nothing as nothing13 } from "lit";
 import { customElement as customElement12, property as property12 } from "lit/decorators.js";
 var RoxyHoroscopeCard = class extends LitElement12 {
   constructor() {
@@ -3048,12 +3555,12 @@ var RoxyHoroscopeCard = class extends LitElement12 {
   render() {
     const d = this.data;
     if (!d)
-      return html12`<div class="roxy-empty" role="status">No horoscope data</div>`;
+      return html13`<div class="roxy-empty" role="status">No horoscope data</div>`;
     const sign = d.sign ?? "";
     const glyph = sign ? SIGN_GLYPH[capitalize(sign)] ?? "" : "";
     const energy = "energyRating" in d && typeof d.energyRating === "number" ? d.energyRating : null;
     const dateLabel = "date" in d && d.date || "week" in d && d.week || "month" in d && d.month || "";
-    return html12`<article
+    return html13`<article
 			class="card"
 			aria-label=${`${this.period} horoscope for ${sign}`}
 		>
@@ -3061,9 +3568,9 @@ var RoxyHoroscopeCard = class extends LitElement12 {
 				<span class="glyph" aria-hidden="true">${glyph}</span>
 				<div>
 					<h2 class="title">${sign} ${this.period}</h2>
-					${dateLabel ? html12`<div class="date">${dateLabel}</div>` : nothing13}
+					${dateLabel ? html13`<div class="date">${dateLabel}</div>` : nothing13}
 				</div>
-				${energy !== null ? html12`<span class="energy" aria-label=${`Energy ${energy} of 10`}>
+				${energy !== null ? html13`<span class="energy" aria-label=${`Energy ${energy} of 10`}>
 							Energy ${energy}/10
 							<span class="energy-bar"
 								><span style="width: ${energy / 10 * 100}%"></span
@@ -3071,26 +3578,26 @@ var RoxyHoroscopeCard = class extends LitElement12 {
 						</span>` : nothing13}
 			</header>
 
-			${d.overview ? html12`<p class="overview">${d.overview}</p>` : nothing13}
+			${d.overview ? html13`<p class="overview">${d.overview}</p>` : nothing13}
 
 			<div class="sections">
-				${d.love ? html12`<div class="section">
+				${d.love ? html13`<div class="section">
 							<h3>Love</h3>
 							<p>${d.love}</p>
 						</div>` : nothing13}
-				${d.career ? html12`<div class="section">
+				${d.career ? html13`<div class="section">
 							<h3>Career</h3>
 							<p>${d.career}</p>
 						</div>` : nothing13}
-				${d.health ? html12`<div class="section">
+				${d.health ? html13`<div class="section">
 							<h3>Health</h3>
 							<p>${d.health}</p>
 						</div>` : nothing13}
-				${d.finance ? html12`<div class="section">
+				${d.finance ? html13`<div class="section">
 							<h3>Finance</h3>
 							<p>${d.finance}</p>
 						</div>` : nothing13}
-				${"advice" in d && d.advice ? html12`<div class="section">
+				${"advice" in d && d.advice ? html13`<div class="section">
 							<h3>Advice</h3>
 							<p>${d.advice}</p>
 						</div>` : nothing13}
@@ -3104,21 +3611,21 @@ var RoxyHoroscopeCard = class extends LitElement12 {
       const compatibleSigns = d.compatibleSigns ?? [];
       if (luckyNumber === void 0 && !luckyColor && luckyNumbers.length === 0 && luckyDays.length === 0 && compatibleSigns.length === 0)
         return nothing13;
-      return html12`<div class="lucky">
-						${luckyNumber !== void 0 ? html12`<span>Lucky number <strong>${luckyNumber}</strong></span>` : nothing13}
-						${luckyColor ? html12`<span>Lucky color <strong>${luckyColor}</strong></span>` : nothing13}
-						${luckyNumbers.length ? html12`<span
+      return html13`<div class="lucky">
+						${luckyNumber !== void 0 ? html13`<span>Lucky number <strong>${luckyNumber}</strong></span>` : nothing13}
+						${luckyColor ? html13`<span>Lucky color <strong>${luckyColor}</strong></span>` : nothing13}
+						${luckyNumbers.length ? html13`<span
 									>Lucky numbers
 									<strong>${luckyNumbers.join(", ")}</strong></span
 								>` : nothing13}
-						${luckyDays.length ? html12`<span
+						${luckyDays.length ? html13`<span
 									>Lucky days <strong>${luckyDays.join(", ")}</strong></span
 								>` : nothing13}
-						${compatibleSigns.length ? html12`<span class="compat-wrap">
+						${compatibleSigns.length ? html13`<span class="compat-wrap">
 									Best with
 									<span class="compat"
 										>${compatibleSigns.map(
-        (s) => html12`<span>${s}</span>`
+        (s) => html13`<span>${s}</span>`
       )}</span
 									>
 								</span>` : nothing13}
@@ -3129,7 +3636,7 @@ var RoxyHoroscopeCard = class extends LitElement12 {
 };
 RoxyHoroscopeCard.styles = [
   baseStyles,
-  css13`
+  css14`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3264,7 +3771,7 @@ RoxyHoroscopeCard = __decorateClass([
 ], RoxyHoroscopeCard);
 
 // packages/ui/src/components/kp-chart.ts
-import { css as css14, html as html13, LitElement as LitElement13, nothing as nothing14 } from "lit";
+import { css as css15, html as html14, LitElement as LitElement13, nothing as nothing14 } from "lit";
 import { customElement as customElement13, property as property13, state as state3 } from "lit/decorators.js";
 var RoxyKpChart = class extends LitElement13 {
   constructor() {
@@ -3318,21 +3825,21 @@ var RoxyKpChart = class extends LitElement13 {
   }
   render() {
     if (!this.data)
-      return html13`<div class="roxy-empty" role="status">No KP chart data</div>`;
+      return html14`<div class="roxy-empty" role="status">No KP chart data</div>`;
     const d = this.data;
     const asc = d.ascendant;
-    return html13`<div class="wrap" aria-label="KP chart" tabindex="0">
+    return html14`<div class="wrap" aria-label="KP chart" tabindex="0">
 			<header class="head">
 				<h2 class="title">KP chart</h2>
-				${asc ? html13`<div class="asc">
+				${asc ? html14`<div class="asc">
 							Ascendant: <strong>${asc.sign ?? ""}</strong>
-							${asc.nakshatra ? html13`· ${asc.nakshatra}` : nothing14}
-							${asc.subLord ? html13`· sub lord ${asc.subLord}` : nothing14}
-							${typeof asc.kpNumber === "number" ? html13`· KP ${asc.kpNumber}` : nothing14}
+							${asc.nakshatra ? html14`· ${asc.nakshatra}` : nothing14}
+							${asc.subLord ? html14`· sub lord ${asc.subLord}` : nothing14}
+							${typeof asc.kpNumber === "number" ? html14`· KP ${asc.kpNumber}` : nothing14}
 						</div>` : nothing14}
-				${typeof d.meta?.ayanamsa === "number" ? html13`<div class="ayan">
+				${typeof d.meta?.ayanamsa === "number" ? html14`<div class="ayan">
 							${d.meta.ayanamsaType ?? "Ayanamsa"}: ${formatNumber(d.meta.ayanamsa, 4)}°
-							${d.meta.houseSystem ? html13`· ${d.meta.houseSystem} houses` : nothing14}
+							${d.meta.houseSystem ? html14`· ${d.meta.houseSystem} houses` : nothing14}
 						</div>` : nothing14}
 			</header>
 
@@ -3343,7 +3850,7 @@ var RoxyKpChart = class extends LitElement13 {
 				@keydown=${this.onTabKeyDown}
 			>
 				${["planets", "cusps"].map(
-      (t) => html13`<button
+      (t) => html14`<button
 						class="tab"
 						role="tab"
 						id="tab-${t}"
@@ -3367,8 +3874,8 @@ var RoxyKpChart = class extends LitElement13 {
   renderPlanets() {
     const bodies = this.bodies();
     if (!bodies.length)
-      return html13`<p class="roxy-empty" role="status">No planets</p>`;
-    return html13`<table role="table" aria-label="KP planets and nodes">
+      return html14`<p class="roxy-empty" role="status">No planets</p>`;
+    return html14`<table role="table" aria-label="KP planets and nodes">
 			<thead>
 				<tr>
 					<th scope="col">Body</th>
@@ -3383,9 +3890,9 @@ var RoxyKpChart = class extends LitElement13 {
 			</thead>
 			<tbody>
 				${bodies.map(
-      (b) => html13`<tr>
+      (b) => html14`<tr>
 						<td class="body">
-							${b.name}${b.retrograde ? html13`<span class="retro">R</span>` : nothing14}
+							${b.name}${b.retrograde ? html14`<span class="retro">R</span>` : nothing14}
 						</td>
 						<td>${b.sign ?? ""}</td>
 						<td class="num">${typeof b.house === "number" ? b.house : ""}</td>
@@ -3402,8 +3909,8 @@ var RoxyKpChart = class extends LitElement13 {
   renderCusps() {
     const cusps = this.data?.cusps ?? [];
     if (!cusps.length)
-      return html13`<p class="roxy-empty" role="status">No cusps</p>`;
-    return html13`<table role="table" aria-label="KP Placidus cusps">
+      return html14`<p class="roxy-empty" role="status">No cusps</p>`;
+    return html14`<table role="table" aria-label="KP Placidus cusps">
 			<thead>
 				<tr>
 					<th scope="col">House</th>
@@ -3418,7 +3925,7 @@ var RoxyKpChart = class extends LitElement13 {
 			</thead>
 			<tbody>
 				${cusps.map(
-      (c) => html13`<tr>
+      (c) => html14`<tr>
 						<td class="body num">${c.house}</td>
 						<td>${c.sign ?? ""}</td>
 						<td>${c.signLord ?? ""}</td>
@@ -3435,7 +3942,7 @@ var RoxyKpChart = class extends LitElement13 {
 };
 RoxyKpChart.styles = [
   baseStyles,
-  css14`
+  css15`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3538,7 +4045,7 @@ RoxyKpChart = __decorateClass([
 ], RoxyKpChart);
 
 // packages/ui/src/components/kp-planets-table.ts
-import { css as css15, html as html14, LitElement as LitElement14, nothing as nothing15 } from "lit";
+import { css as css16, html as html15, LitElement as LitElement14, nothing as nothing15 } from "lit";
 import { customElement as customElement14, property as property14 } from "lit/decorators.js";
 var RoxyKpPlanetsTable = class extends LitElement14 {
   constructor() {
@@ -3547,16 +4054,16 @@ var RoxyKpPlanetsTable = class extends LitElement14 {
   }
   render() {
     if (!this.data)
-      return html14`<div class="roxy-empty" role="status">No KP data</div>`;
+      return html15`<div class="roxy-empty" role="status">No KP data</div>`;
     const planets = this.data.planets ?? [];
-    return html14`<div
+    return html15`<div
 			class="wrap"
 			aria-label="KP planets table"
 			tabindex="0"
 		>
 			<header class="head">
 				<h2 class="title">KP planets</h2>
-				${typeof this.data.ayanamsa === "number" ? html14`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : nothing15}
+				${typeof this.data.ayanamsa === "number" ? html15`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : nothing15}
 			</header>
 			<table role="table">
 				<thead>
@@ -3573,10 +4080,10 @@ var RoxyKpPlanetsTable = class extends LitElement14 {
 				</thead>
 				<tbody>
 					${planets.map(
-      (p) => html14`<tr>
+      (p) => html15`<tr>
 							<td class="planet">
 								${p.planet}
-								${p.retrograde ? html14`<span class="retro">R</span>` : nothing15}
+								${p.retrograde ? html15`<span class="retro">R</span>` : nothing15}
 							</td>
 							<td>${p.sign ?? ""}</td>
 							<td>${p.signLord ?? ""}</td>
@@ -3594,7 +4101,7 @@ var RoxyKpPlanetsTable = class extends LitElement14 {
 };
 RoxyKpPlanetsTable.styles = [
   baseStyles,
-  css15`
+  css16`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3663,7 +4170,7 @@ RoxyKpPlanetsTable = __decorateClass([
 ], RoxyKpPlanetsTable);
 
 // packages/ui/src/components/kp-ruling-planets.ts
-import { css as css16, html as html15, LitElement as LitElement15, nothing as nothing16 } from "lit";
+import { css as css17, html as html16, LitElement as LitElement15, nothing as nothing16 } from "lit";
 import { customElement as customElement15, property as property15 } from "lit/decorators.js";
 var RoxyKpRulingPlanets = class extends LitElement15 {
   constructor() {
@@ -3672,13 +4179,13 @@ var RoxyKpRulingPlanets = class extends LitElement15 {
   }
   render() {
     if (!this.data)
-      return html15`<div class="roxy-empty" role="status">No ruling planets data</div>`;
+      return html16`<div class="roxy-empty" role="status">No ruling planets data</div>`;
     const d = this.data;
     const significators = d.significators ?? [];
-    return html15`<div class="wrap" aria-label="KP ruling planets">
+    return html16`<div class="wrap" aria-label="KP ruling planets">
 			<header>
 				<h2 class="title">KP ruling planets</h2>
-				${d.dayLord ? html15`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : nothing16}
+				${d.dayLord ? html16`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : nothing16}
 			</header>
 
 			<div class="groups">
@@ -3702,14 +4209,14 @@ var RoxyKpRulingPlanets = class extends LitElement15 {
 				</div>
 			</div>
 
-			${d.rulingPlanets?.length ? html15`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
+			${d.rulingPlanets?.length ? html16`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
 						<span class="rp-label">Ruling planets</span>
 						${d.rulingPlanets.map(
-      (p, i) => html15`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
+      (p, i) => html16`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
     )}
 					</div>` : nothing16}
 
-			${significators.length ? html15`<table aria-label="House significators">
+			${significators.length ? html16`<table aria-label="House significators">
 						<thead>
 							<tr>
 								<th scope="col">Planet</th>
@@ -3718,7 +4225,7 @@ var RoxyKpRulingPlanets = class extends LitElement15 {
 						</thead>
 						<tbody>
 							${significators.map(
-      (s) => html15`<tr>
+      (s) => html16`<tr>
 									<td>${s.planet}</td>
 									<td>${(s.signifies ?? []).join(", ")}</td>
 								</tr>`
@@ -3730,7 +4237,7 @@ var RoxyKpRulingPlanets = class extends LitElement15 {
 };
 RoxyKpRulingPlanets.styles = [
   baseStyles,
-  css16`
+  css17`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3836,7 +4343,7 @@ RoxyKpRulingPlanets = __decorateClass([
 ], RoxyKpRulingPlanets);
 
 // packages/ui/src/components/location-search.ts
-import { css as css17, html as html16, LitElement as LitElement16, nothing as nothing17 } from "lit";
+import { css as css18, html as html17, LitElement as LitElement16, nothing as nothing17 } from "lit";
 import { customElement as customElement16, property as property16, state as state4 } from "lit/decorators.js";
 
 // packages/ui/src/utils/debounce.ts
@@ -3994,7 +4501,7 @@ var RoxyLocationSearch = class extends LitElement16 {
     );
   }
   render() {
-    return html16`<div class="field">
+    return html17`<div class="field">
 			<input
 				type="text"
 				role="combobox"
@@ -4011,14 +4518,14 @@ var RoxyLocationSearch = class extends LitElement16 {
       if (this.results.length > 0) this.isOpen = true;
     }}
 			/>
-			${this.isLoading ? html16`<span class="spinner" role="status" aria-label="Loading"></span>` : nothing17}
-			${this.isOpen ? html16`<ul
+			${this.isLoading ? html17`<span class="spinner" role="status" aria-label="Loading"></span>` : nothing17}
+			${this.isOpen ? html17`<ul
 						id="roxy-location-listbox"
 						class="results"
 						role="listbox"
 					>
-						${this.results.length === 0 ? html16`<li class="empty" role="status">No cities found</li>` : this.results.map(
-      (city, idx) => html16`<li role="presentation">
+						${this.results.length === 0 ? html17`<li class="empty" role="status">No cities found</li>` : this.results.map(
+      (city, idx) => html17`<li role="presentation">
 										<button
 											type="button"
 											class="option"
@@ -4032,7 +4539,7 @@ var RoxyLocationSearch = class extends LitElement16 {
 										>
 											<span class="city">${city.city}</span>
 											<span class="where"
-												>${city.province ? html16`${city.province}, ` : ""}${city.country}</span
+												>${city.province ? html17`${city.province}, ` : ""}${city.country}</span
 											>
 											<span class="tz"
 												>UTC${city.utcOffset >= 0 ? "+" : ""}${city.utcOffset}</span
@@ -4046,7 +4553,7 @@ var RoxyLocationSearch = class extends LitElement16 {
 };
 RoxyLocationSearch.styles = [
   baseStyles,
-  css17`
+  css18`
 			:host {
 				display: block;
 				position: relative;
@@ -4184,7 +4691,7 @@ RoxyLocationSearch = __decorateClass([
 ], RoxyLocationSearch);
 
 // packages/ui/src/components/moon-phase.ts
-import { css as css18, html as html17, LitElement as LitElement17, nothing as nothing18 } from "lit";
+import { css as css19, html as html18, LitElement as LitElement17, nothing as nothing18 } from "lit";
 import { customElement as customElement17, property as property17 } from "lit/decorators.js";
 var RoxyMoonPhase = class extends LitElement17 {
   constructor() {
@@ -4195,12 +4702,12 @@ var RoxyMoonPhase = class extends LitElement17 {
   render() {
     const d = this.data;
     if (!d)
-      return html17`<div class="roxy-empty" role="status">No moon phase data</div>`;
+      return html18`<div class="roxy-empty" role="status">No moon phase data</div>`;
     const list = "phases" in d ? d.phases : "calendar" in d ? d.calendar : [];
     if (this.mode !== "current" && list.length > 0) {
       const month = "month" in d ? d.month : void 0;
       const year = "year" in d ? d.year : void 0;
-      return html17`<article
+      return html18`<article
 				class="card"
 				aria-label="Moon phase calendar"
 			>
@@ -4215,41 +4722,41 @@ var RoxyMoonPhase = class extends LitElement17 {
   }
   renderSingle(d) {
     const emoji = phaseEmoji(d.phase);
-    return html17`<article class="card" aria-label="Current moon phase">
+    return html18`<article class="card" aria-label="Current moon phase">
 			<div class="hero">
 				<span class="emoji" aria-hidden="true">${emoji}</span>
 				<div>
 					<h2 class="label">${d.phase ?? "Moon"}</h2>
-					${d.date ? html17`<div class="date">${d.date}</div>` : nothing18}
+					${d.date ? html18`<div class="date">${d.date}</div>` : nothing18}
 				</div>
 			</div>
 			<div class="stats">
-				${typeof d.illumination === "number" ? html17`<div>
+				${typeof d.illumination === "number" ? html18`<div>
 							<span>Illumination</span>
 							<strong>${formatIllumination(d.illumination)}</strong>
 						</div>` : nothing18}
-				${typeof d.age === "number" ? html17`<div>
+				${typeof d.age === "number" ? html18`<div>
 							<span>Age</span>
 							<strong>${formatNumber(d.age, 1)} days</strong>
 						</div>` : nothing18}
-				${d.sign ? html17`<div>
+				${d.sign ? html18`<div>
 							<span>Sign</span>
 							<strong>${d.sign}</strong>
 						</div>` : nothing18}
-				${typeof d.distance === "number" ? html17`<div>
+				${typeof d.distance === "number" ? html18`<div>
 							<span>Distance</span>
 							<strong>${(d.distance / 1e3).toFixed(0)}k km</strong>
 						</div>` : nothing18}
 			</div>
-			${d.meaning?.description ? html17`<p class="meaning">${d.meaning.description}</p>` : nothing18}
-			${d.meaning?.keywords?.length ? html17`<div class="keywords">
-						${d.meaning.keywords.map((k) => html17`<span>${k}</span>`)}
+			${d.meaning?.description ? html18`<p class="meaning">${d.meaning.description}</p>` : nothing18}
+			${d.meaning?.keywords?.length ? html18`<div class="keywords">
+						${d.meaning.keywords.map((k) => html18`<span>${k}</span>`)}
 					</div>` : nothing18}
 		</article>`;
   }
   renderListItem(p) {
     const emoji = phaseEmoji(p.phase);
-    return html17`<div class="list-item" role="listitem">
+    return html18`<div class="list-item" role="listitem">
 			<span aria-hidden="true">${emoji}</span>
 			<span>${p.phase}</span>
 			<span>${p.date ?? ""}</span>
@@ -4258,7 +4765,7 @@ var RoxyMoonPhase = class extends LitElement17 {
 };
 RoxyMoonPhase.styles = [
   baseStyles,
-  css18`
+  css19`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -4361,7 +4868,7 @@ function formatIllumination(v) {
 }
 
 // packages/ui/src/components/nakshatra-card.ts
-import { css as css19, html as html18, LitElement as LitElement18, nothing as nothing19 } from "lit";
+import { css as css20, html as html19, LitElement as LitElement18, nothing as nothing19 } from "lit";
 import { customElement as customElement18, property as property18 } from "lit/decorators.js";
 var RoxyNakshatraCard = class extends LitElement18 {
   constructor() {
@@ -4370,33 +4877,33 @@ var RoxyNakshatraCard = class extends LitElement18 {
   }
   render() {
     if (!this.data)
-      return html18`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+      return html19`<div class="roxy-empty" role="status">No nakshatra data</div>`;
     const n = this.data;
     const remedies = n.remedies;
-    return html18`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+    return html19`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
 			<header class="head">
 				<h2 class="name">${n.name}</h2>
-				${typeof n.number === "number" ? html18`<span class="number">Nakshatra ${n.number} of 27</span>` : nothing19}
-				${n.range ? html18`<span class="range">${n.range}</span>` : nothing19}
+				${typeof n.number === "number" ? html19`<span class="number">Nakshatra ${n.number} of 27</span>` : nothing19}
+				${n.range ? html19`<span class="range">${n.range}</span>` : nothing19}
 			</header>
 
 			<dl class="facts">
-				${n.lord ? html18`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing19}
-				${n.deity ? html18`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing19}
-				${n.symbol ? html18`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing19}
+				${n.lord ? html19`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing19}
+				${n.deity ? html19`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing19}
+				${n.symbol ? html19`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing19}
 			</dl>
 
-			${n.characteristics ? html18`<div class="section">
+			${n.characteristics ? html19`<div class="section">
 						<h3>Characteristics</h3>
 						<p>${n.characteristics}</p>
 					</div>` : nothing19}
 
-			${remedies ? html18`<div class="section">
+			${remedies ? html19`<div class="section">
 						<h3>Remedies</h3>
 						<div class="remedies">
-							${remedies.mantras ? html18`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing19}
-							${remedies.gemstones ? html18`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing19}
-							${remedies.rituals ? html18`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing19}
+							${remedies.mantras ? html19`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing19}
+							${remedies.gemstones ? html19`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing19}
+							${remedies.rituals ? html19`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing19}
 						</div>
 					</div>` : nothing19}
 		</article>`;
@@ -4404,7 +4911,7 @@ var RoxyNakshatraCard = class extends LitElement18 {
 };
 RoxyNakshatraCard.styles = [
   baseStyles,
-  css19`
+  css20`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -4490,7 +4997,7 @@ RoxyNakshatraCard = __decorateClass([
 ], RoxyNakshatraCard);
 
 // packages/ui/src/components/natal-chart.ts
-import { css as css20, html as html19, LitElement as LitElement19, nothing as nothing20, svg as svg4 } from "lit";
+import { css as css21, html as html20, LitElement as LitElement19, nothing as nothing20, svg as svg4 } from "lit";
 import { customElement as customElement19, property as property19, state as state5 } from "lit/decorators.js";
 var SIZE = 420;
 var CENTER = SIZE / 2;
@@ -4522,14 +5029,14 @@ var RoxyNatalChart = class extends LitElement19 {
   }
   render() {
     if (!this.data)
-      return html19`<div class="roxy-empty" role="status">No chart data</div>`;
+      return html20`<div class="roxy-empty" role="status">No chart data</div>`;
     const planets = this.getPlanets();
     const aspects = this.data.aspects ?? [];
     const view = this.view;
-    return html19`<div class="wrap">
+    return html20`<div class="wrap">
 			<header>
 				<h2 class="title">Natal chart</h2>
-				${this.data.birthDetails ? html19`<div class="meta">
+				${this.data.birthDetails ? html20`<div class="meta">
 							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
 						</div>` : nothing20}
 			</header>
@@ -4540,7 +5047,7 @@ var RoxyNatalChart = class extends LitElement19 {
 				@keydown=${this.onTabKeyDown}
 			>
 				${["wheel", "grid"].map(
-      (t) => html19`<button
+      (t) => html20`<button
 						class="tab"
 						role="tab"
 						id="tab-${t}"
@@ -4561,7 +5068,7 @@ var RoxyNatalChart = class extends LitElement19 {
 			<div class="legend">
 				<span>${planets.length} planets</span>
 				<span>${aspects.length} aspects</span>
-				${this.data.houseSystem ? html19`<span>${this.data.houseSystem} houses</span>` : nothing20}
+				${this.data.houseSystem ? html20`<span>${this.data.houseSystem} houses</span>` : nothing20}
 				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
 				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
@@ -4579,7 +5086,7 @@ var RoxyNatalChart = class extends LitElement19 {
     });
   }
   renderWheel(planets, aspects) {
-    return html19`<svg
+    return html20`<svg
 			viewBox="0 0 ${SIZE} ${SIZE}"
 			role="img"
 			aria-label="Natal chart wheel with twelve houses, planets, and aspects"
@@ -4612,35 +5119,35 @@ var RoxyNatalChart = class extends LitElement19 {
       byPair.set(k, a);
     }
     if (names.length === 0)
-      return html19`<p class="roxy-empty" role="status">No planets to grid</p>`;
-    return html19`<div class="grid-scroll">
+      return html20`<p class="roxy-empty" role="status">No planets to grid</p>`;
+    return html20`<div class="grid-scroll">
 			<table class="aspect-grid" aria-label="Planet by planet aspect grid">
 				<thead>
 					<tr>
 						<th></th>
 						${names.slice(0, -1).map((n) => {
       const g = PLANET_GLYPH[n] ?? n.slice(0, 2);
-      return html19`<th scope="col" title=${n}>${g}</th>`;
+      return html20`<th scope="col" title=${n}>${g}</th>`;
     })}
 					</tr>
 				</thead>
 				<tbody>
 					${names.slice(1).map((rowName, ri) => {
       const rowGlyph = PLANET_GLYPH[rowName] ?? rowName.slice(0, 2);
-      return html19`<tr>
+      return html20`<tr>
 							<th scope="row" title=${rowName}>${rowGlyph}</th>
 							${names.slice(0, ri + 1).map((colName) => {
         const a = byPair.get([rowName, colName].sort().join("|"));
-        if (!a) return html19`<td class="empty"></td>`;
+        if (!a) return html20`<td class="empty"></td>`;
         const name = normalizeAspect(a);
         const sym = ASPECT_SYMBOL[name] ?? ASPECT_SYMBOL[name.replace(/-/g, "")] ?? name.slice(0, 3);
         const cls = ASPECT_CLASS[name] ?? "aspect-other";
         const orb = formatNumber(a.orb, 1);
-        return html19`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
+        return html20`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
 									<span class="asp">${sym}</span>
 								</td>`;
       })}
-							${names.slice(ri + 1, -1).map(() => html19`<td class="empty"></td>`)}
+							${names.slice(ri + 1, -1).map(() => html20`<td class="empty"></td>`)}
 						</tr>`;
     })}
 				</tbody>
@@ -4757,16 +5264,48 @@ var RoxyNatalChart = class extends LitElement19 {
     });
   }
   renderPlanets(planets) {
-    return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return nothing20;
-      const angle = this.toAngle(p.longitude);
-      const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
-      const degPos = polarToCartesian(CENTER, CENTER, PLANET_R - 13, angle);
+    const MIN_SEPARATION = 7;
+    const sorted = planets.filter((p) => Number.isFinite(p.longitude)).map((p) => ({
+      p,
+      trueLon: normalizeLongitude(p.longitude),
+      displayLon: normalizeLongitude(p.longitude)
+    })).sort((a, b) => a.trueLon - b.trueLon);
+    for (let i = 1; i < sorted.length; i++) {
+      const prev = sorted[i - 1];
+      const cur = sorted[i];
+      if (!prev || !cur) continue;
+      const wanted = prev.displayLon + MIN_SEPARATION;
+      if (cur.displayLon < wanted) cur.displayLon = wanted;
+    }
+    const last = sorted[sorted.length - 1];
+    if (last && last.displayLon > 360) {
+      const shift = last.displayLon - 360;
+      for (const s of sorted) s.displayLon -= shift;
+    }
+    return sorted.map(({ p, trueLon, displayLon }) => {
+      const trueAngle = this.toAngle(trueLon);
+      const displayAngle = this.toAngle(displayLon);
+      const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, displayAngle);
+      const degPos = polarToCartesian(
+        CENTER,
+        CENTER,
+        PLANET_R - 13,
+        displayAngle
+      );
+      const rimPos = polarToCartesian(CENTER, CENTER, OUTER_R - 4, trueAngle);
+      const leaderInner = polarToCartesian(
+        CENTER,
+        CENTER,
+        PLANET_R + 8,
+        displayAngle
+      );
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
       const sp = longitudeToSignPosition(p.longitude);
       const retro = p.isRetrograde === true;
       const degLabel = `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}'`;
+      const offset = Math.abs(displayLon - trueLon) > 0.5;
       return svg4`<g>
+				${offset ? svg4`<line class="planet-leader" x1=${rimPos.x} y1=${rimPos.y} x2=${leaderInner.x} y2=${leaderInner.y} />` : nothing20}
 				<text class="planet-glyph" x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${p.sign ?? ""}</title>${glyph}</text>
 				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? svg4`<tspan class="retro"> ℞</tspan>` : nothing20}</text>
 			</g>`;
@@ -4777,23 +5316,23 @@ var RoxyNatalChart = class extends LitElement19 {
     const ai = this.data?.aspectsInterpretation;
     if (!summary && !ai) return nothing20;
     const retrogrades = summary?.retrogradePlanets ?? [];
-    return html19`<div class="details">
-			${summary?.dominantElement || summary?.dominantModality ? html19`<div class="pill-row">
-						${summary.dominantElement ? html19`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing20}
-						${summary.dominantModality ? html19`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing20}
+    return html20`<div class="details">
+			${summary?.dominantElement || summary?.dominantModality ? html20`<div class="pill-row">
+						${summary.dominantElement ? html20`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing20}
+						${summary.dominantModality ? html20`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing20}
 					</div>` : nothing20}
-			${ai ? html19`<div class="pill-row">
+			${ai ? html20`<div class="pill-row">
 						<span class="pill pill--success">Harmonious ${ai.harmonious}</span>
 						<span class="pill pill--danger">Challenging ${ai.challenging}</span>
 						<span class="pill pill--muted">Neutral ${ai.neutral}</span>
 					</div>` : nothing20}
-			${retrogrades.length > 0 ? html19`<div class="pill-row">
+			${retrogrades.length > 0 ? html20`<div class="pill-row">
 						${retrogrades.map((p) => {
       const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
-      return html19`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+      return html20`<span class="pill pill--muted">${glyph} ${p} R</span>`;
     })}
 					</div>` : nothing20}
-			${ai?.summary ? html19`<p class="summary">${ai.summary}</p>` : nothing20}
+			${ai?.summary ? html20`<p class="summary">${ai.summary}</p>` : nothing20}
 			${this.renderElementModalityGrid()}
 		</div>`;
   }
@@ -4820,11 +5359,11 @@ var RoxyNatalChart = class extends LitElement19 {
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? capitalize(p.name).slice(0, 2);
       cells[el]?.[mod]?.push(glyph);
     }
-    return html19`<table class="em-grid" aria-label="Element and modality distribution">
+    return html20`<table class="em-grid" aria-label="Element and modality distribution">
 			<thead>
 				<tr>
 					<th></th>
-					${MODALITIES.map((m) => html19`<th scope="col">${m.slice(0, 3)}</th>`)}
+					${MODALITIES.map((m) => html20`<th scope="col">${m.slice(0, 3)}</th>`)}
 					<th scope="col">Total</th>
 				</tr>
 			</thead>
@@ -4834,10 +5373,10 @@ var RoxyNatalChart = class extends LitElement19 {
         (s, m) => s + (cells[el]?.[m]?.length ?? 0),
         0
       );
-      return html19`<tr>
+      return html20`<tr>
 						<th scope="row">${el}</th>
 						${MODALITIES.map(
-        (m) => html19`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
+        (m) => html20`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
       )}
 						<td class="em-total">${rowTotal}</td>
 					</tr>`;
@@ -4845,7 +5384,7 @@ var RoxyNatalChart = class extends LitElement19 {
 				<tr>
 					<th scope="row">Total</th>
 					${MODALITIES.map(
-      (m) => html19`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
+      (m) => html20`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
     )}
 					<td class="em-total">${planets.length}</td>
 				</tr>
@@ -4855,18 +5394,18 @@ var RoxyNatalChart = class extends LitElement19 {
   renderInterpretations() {
     const planets = this.getPlanets().filter((p) => p.interpretation);
     if (planets.length === 0) return nothing20;
-    return html19`<section class="interpretations">
+    return html20`<section class="interpretations">
 			<h3>Planet readings</h3>
 			${planets.map((p, idx) => {
       const interp = p.interpretation;
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const deg = formatNumber(p.degree ?? 0, 1);
-      return html19`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
+      return html20`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
 					<summary>${glyph} ${p.name} <small>${p.sign ?? ""} ${deg}</small></summary>
 					<div class="interp-body">
-						${interp.summary ? html19`<p class="interp-summary">${interp.summary}</p>` : nothing20}
-						${interp.detailed ? html19`<p class="interp-detail">${interp.detailed}</p>` : nothing20}
-						${interp.keywords?.length ? html19`<div class="interp-keywords">${interp.keywords.map((k) => html19`<span class="kw">${k}</span>`)}</div>` : nothing20}
+						${interp.summary ? html20`<p class="interp-summary">${interp.summary}</p>` : nothing20}
+						${interp.detailed ? html20`<p class="interp-detail">${interp.detailed}</p>` : nothing20}
+						${interp.keywords?.length ? html20`<div class="interp-keywords">${interp.keywords.map((k) => html20`<span class="kw">${k}</span>`)}</div>` : nothing20}
 					</div>
 				</details>`;
     })}
@@ -4904,7 +5443,7 @@ var RoxyNatalChart = class extends LitElement19 {
 };
 RoxyNatalChart.styles = [
   baseStyles,
-  css20`
+  css21`
 			.wrap {
 				width: 100%;
 				display: grid;
@@ -4926,7 +5465,8 @@ RoxyNatalChart.styles = [
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 360px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
 				height: auto;
 				margin: 0 auto;
 			}
@@ -4955,10 +5495,33 @@ RoxyNatalChart.styles = [
 				font-family: var(--roxy-font-sans);
 			}
 
+			/* Below 480px the chart container shrinks to ~320px on phones.
+			 * Bump in-SVG text up proportionally so the 7px degree band
+			 * does not collapse below ~6px on screen.
+			 */
+			@container (max-width: 480px) {
+				.sign-glyph,
+				.planet-glyph {
+					font-size: 18px;
+				}
+				.planet-deg {
+					font-size: 10px;
+				}
+				.house-num {
+					font-size: 12px;
+				}
+			}
+
 			.planet-deg .retro {
 				fill: var(--roxy-danger, #dc2626);
 			}
 
+			.planet-leader {
+				stroke: var(--roxy-accent, #f59e0b);
+				stroke-width: 0.5;
+				opacity: 0.55;
+			}
+
 			.house-num {
 				fill: var(--roxy-muted, #71717a);
 				font-size: 9px;
@@ -5233,7 +5796,7 @@ RoxyNatalChart = __decorateClass([
 ], RoxyNatalChart);
 
 // packages/ui/src/components/numerology-card.ts
-import { css as css21, html as html20, LitElement as LitElement20, nothing as nothing21 } from "lit";
+import { css as css22, html as html21, LitElement as LitElement20, nothing as nothing21 } from "lit";
 import { customElement as customElement20, property as property20 } from "lit/decorators.js";
 var RoxyNumerologyCard = class extends LitElement20 {
   constructor() {
@@ -5244,7 +5807,7 @@ var RoxyNumerologyCard = class extends LitElement20 {
   render() {
     const d = this.data;
     if (!d)
-      return html20`<div class="roxy-empty" role="status">No numerology data</div>`;
+      return html21`<div class="roxy-empty" role="status">No numerology data</div>`;
     const headerLabel = LABELS[this.type] ?? this.type;
     if ("coreNumbers" in d) return this.renderChart(d, headerLabel);
     if ("personalYear" in d) return this.renderPersonalYear(d, headerLabel);
@@ -5255,50 +5818,50 @@ var RoxyNumerologyCard = class extends LitElement20 {
   }
   renderNumberCard(d, headerLabel) {
     const keywords = d.meaning?.keywords ?? [];
-    return html20`<article class="card" aria-label=${headerLabel}>
+    return html21`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.number === "number" ? html20`<div class="numeral">${d.number}</div>` : nothing21}
+				${typeof d.number === "number" ? html21`<div class="numeral">${d.number}</div>` : nothing21}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.meaning?.title ? html20`<h2 class="title">${d.meaning.title}</h2>` : nothing21}
+					${d.meaning?.title ? html21`<h2 class="title">${d.meaning.title}</h2>` : nothing21}
 				</div>
 			</div>
-			${d.meaning?.description ? html20`<p class="meaning">${d.meaning.description}</p>` : nothing21}
-			${d.calculation ? html20`<pre class="calc">${d.calculation}</pre>` : nothing21}
-			${keywords.length > 0 ? html20`<div class="chips">
-						${keywords.map((k) => html20`<span>${k}</span>`)}
+			${d.meaning?.description ? html21`<p class="meaning">${d.meaning.description}</p>` : nothing21}
+			${d.calculation ? html21`<pre class="calc">${d.calculation}</pre>` : nothing21}
+			${keywords.length > 0 ? html21`<div class="chips">
+						${keywords.map((k) => html21`<span>${k}</span>`)}
 					</div>` : nothing21}
-			${d.hasKarmicDebt && d.karmicDebtNumber ? html20`<div class="karmic">
+			${d.hasKarmicDebt && d.karmicDebtNumber ? html21`<div class="karmic">
 						Karmic debt ${d.karmicDebtNumber}.
 						${karmicDebtText(d.karmicDebtMeaning)}
 					</div>` : nothing21}
 		</article>`;
   }
   renderPersonalYear(d, headerLabel) {
-    return html20`<article class="card" aria-label=${headerLabel}>
+    return html21`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.personalYear === "number" ? html20`<div class="numeral">${d.personalYear}</div>` : nothing21}
+				${typeof d.personalYear === "number" ? html21`<div class="numeral">${d.personalYear}</div>` : nothing21}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.theme ? html20`<h2 class="title">${d.theme}</h2>` : nothing21}
+					${d.theme ? html21`<h2 class="title">${d.theme}</h2>` : nothing21}
 				</div>
 			</div>
-			${d.forecast ? html20`<p class="meaning">${d.forecast}</p>` : nothing21}
-			${d.advice ? html20`<p>${d.advice}</p>` : nothing21}
+			${d.forecast ? html21`<p class="meaning">${d.forecast}</p>` : nothing21}
+			${d.advice ? html21`<p>${d.advice}</p>` : nothing21}
 		</article>`;
   }
   renderChart(d, headerLabel) {
     const cores = Object.entries(d.coreNumbers).filter(
       ([, v]) => v !== null && v !== void 0
     );
-    return html20`<article class="card" aria-label=${headerLabel}>
+    return html21`<article class="card" aria-label=${headerLabel}>
 			<div>
 				<p class="label">${headerLabel}</p>
-				${d.profile?.name ? html20`<h2 class="title">${d.profile.name}</h2>` : nothing21}
+				${d.profile?.name ? html21`<h2 class="title">${d.profile.name}</h2>` : nothing21}
 			</div>
-			${cores.length > 0 ? html20`<div class="cores">
+			${cores.length > 0 ? html21`<div class="cores">
 						${cores.map(
-      ([k, v]) => html20`<div class="item">
+      ([k, v]) => html21`<div class="item">
 								<span>${humanize(k)}</span>
 								<strong>${v.number ?? ""}</strong>
 							</div>`
@@ -5309,7 +5872,7 @@ var RoxyNumerologyCard = class extends LitElement20 {
 };
 RoxyNumerologyCard.styles = [
   baseStyles,
-  css21`
+  css22`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -5428,7 +5991,7 @@ function karmicDebtText(value) {
 }
 
 // packages/ui/src/components/panchang-table.ts
-import { css as css22, html as html21, LitElement as LitElement21, nothing as nothing22 } from "lit";
+import { css as css23, html as html22, LitElement as LitElement21, nothing as nothing22 } from "lit";
 import { customElement as customElement21, property as property21 } from "lit/decorators.js";
 var RoxyPanchangTable = class extends LitElement21 {
   constructor() {
@@ -5439,7 +6002,7 @@ var RoxyPanchangTable = class extends LitElement21 {
   render() {
     const d = this.data;
     if (!d)
-      return html21`<div class="roxy-empty" role="status">No panchang data</div>`;
+      return html22`<div class="roxy-empty" role="status">No panchang data</div>`;
     const detailed = "sunrise" in d ? d : null;
     const fivefold = [
       ["Tithi", this.formatPart(d.tithi)],
@@ -5462,7 +6025,8 @@ var RoxyPanchangTable = class extends LitElement21 {
       ["Yamaganda", detailed.yamaganda],
       ["Gulika", detailed.gulika]
     ] : [];
-    return html21`<div class="wrap" aria-label="Panchang">
+    const transitions = detailed && "transitions" in detailed ? detailed.transitions : void 0;
+    return html22`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
 				<span class="date">${detailed ? formatDate(detailed.date) : ""}</span>
@@ -5470,35 +6034,46 @@ var RoxyPanchangTable = class extends LitElement21 {
 			<table>
 				<tbody>
 					${fivefold.map(
-      ([k, v]) => html21`<tr>
+      ([k, v]) => html22`<tr>
 							<th>${k}</th>
 							<td>${v}</td>
 						</tr>`
     )}
-					${detailed?.sunrise ? html21`<tr>
+					${detailed?.sunrise ? html22`<tr>
 								<th>Sunrise</th>
 								<td>${formatTime(detailed.sunrise)}</td>
 							</tr>` : nothing22}
-					${detailed?.sunset ? html21`<tr>
+					${detailed?.sunset ? html22`<tr>
 								<th>Sunset</th>
 								<td>${formatTime(detailed.sunset)}</td>
 							</tr>` : nothing22}
-					${detailed?.moonrise ? html21`<tr>
+					${detailed?.moonrise ? html22`<tr>
 								<th>Moonrise</th>
 								<td>${formatTime(detailed.moonrise)}</td>
 							</tr>` : nothing22}
-					${detailed?.moonset ? html21`<tr>
+					${detailed?.moonset ? html22`<tr>
 								<th>Moonset</th>
 								<td>${formatTime(detailed.moonset)}</td>
 							</tr>` : nothing22}
 				</tbody>
 			</table>
-			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? html21`
+			${transitions ? html22`
+						<div class="section">Next transitions</div>
+						<table>
+							<tbody>
+								${this.renderTransitionRow("Tithi", transitions.tithi)}
+								${this.renderTransitionRow("Nakshatra", transitions.nakshatra)}
+								${this.renderTransitionRow("Yoga", transitions.yoga)}
+								${this.renderTransitionRow("Karana", transitions.karana)}
+							</tbody>
+						</table>
+					` : nothing22}
+			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? html22`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
 								${muhurtas.filter(([, v]) => !!v).map(
-      ([k, v]) => html21`<tr>
+      ([k, v]) => html22`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
@@ -5509,7 +6084,7 @@ var RoxyPanchangTable = class extends LitElement21 {
 						<table>
 							<tbody>
 								${inauspicious.filter(([, v]) => !!v).map(
-      ([k, v]) => html21`<tr>
+      ([k, v]) => html22`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
@@ -5519,6 +6094,15 @@ var RoxyPanchangTable = class extends LitElement21 {
 					` : nothing22}
 		</div>`;
   }
+  renderTransitionRow(label, t) {
+    if (!t?.endsAt) return nothing22;
+    const when = formatTime(t.endsAt);
+    const next = t.next ? ` \u2192 ${t.next}` : "";
+    return html22`<tr>
+			<th>${label}</th>
+			<td>ends ${when}${next}</td>
+		</tr>`;
+  }
   formatPart(v) {
     if (!v) return "";
     if (typeof v === "string") return v;
@@ -5526,7 +6110,8 @@ var RoxyPanchangTable = class extends LitElement21 {
       const obj = v;
       const parts = [
         obj.name,
-        obj.lord ? `(${obj.lord})` : "",
+        obj.paksha ? `(${obj.paksha} paksha)` : "",
+        obj.lord ? `\xB7 ${obj.lord}` : "",
         obj.phase
       ].filter(Boolean);
       return parts.join(" ");
@@ -5536,7 +6121,7 @@ var RoxyPanchangTable = class extends LitElement21 {
 };
 RoxyPanchangTable.styles = [
   baseStyles,
-  css22`
+  css23`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -5607,7 +6192,7 @@ RoxyPanchangTable = __decorateClass([
 ], RoxyPanchangTable);
 
 // packages/ui/src/components/shadbala-table.ts
-import { css as css23, html as html22, LitElement as LitElement22, nothing as nothing23 } from "lit";
+import { css as css24, html as html23, LitElement as LitElement22, nothing as nothing23 } from "lit";
 import { customElement as customElement22, property as property22 } from "lit/decorators.js";
 var BALA_COMPONENTS = [
   { key: "sthanaBala", label: "Sthana", color: "var(--roxy-info, #0284c7)" },
@@ -5628,12 +6213,12 @@ var RoxyShadbalaTable = class extends LitElement22 {
   }
   render() {
     if (!this.data?.planets?.length) {
-      return html22`<div class="roxy-empty" role="status">No shadbala data</div>`;
+      return html23`<div class="roxy-empty" role="status">No shadbala data</div>`;
     }
     const sorted = [...this.data.planets].sort(
       (a, b) => a.relativeRank - b.relativeRank
     );
-    return html22`<div class="wrap" aria-label="Shadbala planetary strength">
+    return html23`<div class="wrap" aria-label="Shadbala planetary strength">
 			<div class="head">
 				<h2 class="title">Shadbala</h2>
 				<p class="subtitle">${sorted.length} planets ranked by strength</p>
@@ -5645,7 +6230,7 @@ var RoxyShadbalaTable = class extends LitElement22 {
 
 			<div class="legend" aria-label="Strength component legend">
 				${BALA_COMPONENTS.map(
-      (b) => html22`<div class="legend-row">
+      (b) => html23`<div class="legend-row">
 						<span
 							class="legend-swatch"
 							style="background: ${b.color}"
@@ -5665,7 +6250,7 @@ var RoxyShadbalaTable = class extends LitElement22 {
     const badgeClass = isAdequate ? "adequacy-badge--adequate" : "adequacy-badge--weak";
     const badgeLabel = isAdequate ? "adequate" : "weak";
     const rupasStr = formatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2) ? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R` : "";
-    return html22`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+    return html23`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
 			<div class="planet-label">
 				<span class="glyph" aria-hidden="true">${glyph}</span>
 				${p.planet}
@@ -5677,7 +6262,7 @@ var RoxyShadbalaTable = class extends LitElement22 {
       const v = values[i];
       if (v <= 0) return nothing23;
       const grow = v / total * 100;
-      return html22`<div
+      return html23`<div
 									class="bar-segment"
 									style="flex-grow: ${grow}; background: ${b.color};"
 									title="${b.label}: ${formatNumber(v, 1)}"
@@ -5686,7 +6271,7 @@ var RoxyShadbalaTable = class extends LitElement22 {
 				</div>
 			</div>
 			<div class="pills">
-				${rupasStr ? html22`<span class="rupas-label">${rupasStr}</span>` : nothing23}
+				${rupasStr ? html23`<span class="rupas-label">${rupasStr}</span>` : nothing23}
 				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
 			</div>
 		</div>`;
@@ -5694,7 +6279,7 @@ var RoxyShadbalaTable = class extends LitElement22 {
 };
 RoxyShadbalaTable.styles = [
   baseStyles,
-  css23`
+  css24`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5850,7 +6435,7 @@ RoxyShadbalaTable = __decorateClass([
 ], RoxyShadbalaTable);
 
 // packages/ui/src/components/synastry-chart.ts
-import { css as css24, html as html23, LitElement as LitElement23, nothing as nothing24, svg as svg5 } from "lit";
+import { css as css25, html as html24, LitElement as LitElement23, nothing as nothing24, svg as svg5 } from "lit";
 import { customElement as customElement23, property as property23 } from "lit/decorators.js";
 var SIZE2 = 360;
 var CENTER2 = SIZE2 / 2;
@@ -5865,7 +6450,7 @@ var RoxySynastryChart = class extends LitElement23 {
   }
   render() {
     if (!this.data)
-      return html23`<div class="roxy-empty" role="status">No synastry data</div>`;
+      return html24`<div class="roxy-empty" role="status">No synastry data</div>`;
     const { person1, person2, compatibilityScore, analysis } = this.data;
     const interAspects = this.data.interAspects ?? [];
     const p1Planets = person1?.planets ?? [];
@@ -5876,13 +6461,13 @@ var RoxySynastryChart = class extends LitElement23 {
     const challenges = analysis?.challenges ?? [];
     const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
     if (!hasPlanets) {
-      return html23`<div
+      return html24`<div
 				class="wrap"
 				aria-label="Synastry compatibility chart"
 			>
 				<div class="head">
 					<h2 class="title">Synastry</h2>
-					${typeof score === "number" ? html23`<span class="score" aria-label=${`Score ${score} of 100`}
+					${typeof score === "number" ? html24`<span class="score" aria-label=${`Score ${score} of 100`}
 								>${score} / 100</span
 							>` : nothing24}
 				</div>
@@ -5892,31 +6477,31 @@ var RoxySynastryChart = class extends LitElement23 {
 					<code>person2.planets</code> arrays from the natal-chart endpoint, or
 					use the <code>&lt;roxy-data&gt;</code> fallback.
 				</div>
-				${summaryText ? html23`<p class="summary">${summaryText}</p>` : nothing24}
+				${summaryText ? html24`<p class="summary">${summaryText}</p>` : nothing24}
 				${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing24}
-				${strengths.length > 0 || challenges.length > 0 ? html23`<div class="lists">
-							${strengths.length ? html23`<div>
+				${strengths.length > 0 || challenges.length > 0 ? html24`<div class="lists">
+							${strengths.length ? html24`<div>
 										<h3>Strengths</h3>
 										<ul>
-											${strengths.map((s) => html23`<li>${s}</li>`)}
+											${strengths.map((s) => html24`<li>${s}</li>`)}
 										</ul>
 									</div>` : nothing24}
-							${challenges.length ? html23`<div>
+							${challenges.length ? html24`<div>
 										<h3>Challenges</h3>
 										<ul>
-											${challenges.map((s) => html23`<li>${s}</li>`)}
+											${challenges.map((s) => html24`<li>${s}</li>`)}
 										</ul>
 									</div>` : nothing24}
 						</div>` : nothing24}
 			</div>`;
     }
-    return html23`<div
+    return html24`<div
 			class="wrap"
 			aria-label="Synastry compatibility chart"
 		>
 			<div class="head">
 				<h2 class="title">Synastry</h2>
-				${typeof score === "number" ? html23`<span class="score" aria-label=${`Score ${score} of 100`}
+				${typeof score === "number" ? html24`<span class="score" aria-label=${`Score ${score} of 100`}
 							>${score} / 100</span
 						>` : nothing24}
 			</div>
@@ -5949,7 +6534,8 @@ var RoxySynastryChart = class extends LitElement23 {
 				/>
 				${this.renderSpokes()} ${this.renderSigns()}
 				${this.renderInterAspectLines(p1Planets, p2Planets, interAspects)}
-				${this.renderRing(p1Planets, P1_R, "p1")} ${this.renderRing(p2Planets, P2_R, "p2")}
+				${this.renderRing(p1Planets, P1_R, "p1", 1)} ${this.renderRing(p2Planets, P2_R, "p2", 2)}
+				${this.renderAscendants(this.data)}
 			</svg>
 			<div class="legend-row">
 				<span><span class="swatch" style="background: var(--roxy-accent)"></span>Person 1</span>
@@ -5957,19 +6543,19 @@ var RoxySynastryChart = class extends LitElement23 {
 				<span><span class="swatch" style="background: var(--roxy-success)"></span>harmonious</span>
 				<span><span class="swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
-			${summaryText ? html23`<p class="summary">${summaryText}</p>` : nothing24}
+			${summaryText ? html24`<p class="summary">${summaryText}</p>` : nothing24}
 			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing24}
-			${strengths.length > 0 || challenges.length > 0 ? html23`<div class="lists">
-						${strengths.length ? html23`<div>
+			${strengths.length > 0 || challenges.length > 0 ? html24`<div class="lists">
+						${strengths.length ? html24`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${strengths.map((s) => html23`<li>${s}</li>`)}
+										${strengths.map((s) => html24`<li>${s}</li>`)}
 									</ul>
 								</div>` : nothing24}
-						${challenges.length ? html23`<div>
+						${challenges.length ? html24`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${challenges.map((s) => html23`<li>${s}</li>`)}
+										${challenges.map((s) => html24`<li>${s}</li>`)}
 									</ul>
 								</div>` : nothing24}
 					</div>` : nothing24}
@@ -5993,19 +6579,56 @@ var RoxySynastryChart = class extends LitElement23 {
       return svg5`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
     });
   }
-  renderRing(planets, radius, cls) {
+  renderRing(planets, radius, cls, personIndex) {
     return planets.map((p) => {
       if (!Number.isFinite(p.longitude)) return nothing24;
-      const pos = polarToCartesian(
+      const angle = this.toAngle(p.longitude);
+      const pos = polarToCartesian(CENTER2, CENTER2, radius, angle);
+      const degOffset = personIndex === 1 ? -12 : -10;
+      const degPos = polarToCartesian(
         CENTER2,
         CENTER2,
-        radius,
-        this.toAngle(p.longitude)
+        radius + degOffset,
+        angle
       );
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-      return svg5`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}</title>${glyph}</text>`;
+      const sp = longitudeToSignPosition(p.longitude);
+      const retro = p.isRetrograde === true;
+      const degLabel = `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}'`;
+      const tooltip = `${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${sp.sign}`;
+      return svg5`<g>
+				<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${tooltip}</title>${glyph}<tspan class="person-tag" dy="-0.55em" dx="0.15em">${personIndex}</tspan></text>
+				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${retro ? svg5`<tspan class="retro"> ℞</tspan>` : nothing24}</text>
+			</g>`;
     });
   }
+  /**
+   * Ascendant markers for both people. Drawn as small spokes at the inner
+   * rim with the label outside, so the two rising signs are immediately
+   * scannable on the wheel without depending on tooltips.
+   */
+  renderAscendants(data) {
+    const items = [];
+    const make = (asc, personIndex) => {
+      if (!asc) return;
+      const signIdx = SIGNS_ORDER.findIndex(
+        (s) => s.toLowerCase() === asc.sign.toLowerCase()
+      );
+      if (signIdx === -1) return;
+      const longitude = signIdx * 30 + asc.degree;
+      const angle = this.toAngle(longitude);
+      const innerR = personIndex === 1 ? P1_R + 14 : P2_R + 14;
+      const tickPos = polarToCartesian(CENTER2, CENTER2, innerR, angle);
+      const labelPos = polarToCartesian(CENTER2, CENTER2, OUTER_R2 + 14, angle);
+      items.push(svg5`<g>
+				<line class="asc-tick" x1=${tickPos.x} y1=${tickPos.y} x2=${labelPos.x} y2=${labelPos.y} />
+				<text class="asc-label" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">Asc${personIndex}</text>
+			</g>`);
+    };
+    make(data.person1?.ascendant, 1);
+    make(data.person2?.ascendant, 2);
+    return items;
+  }
   renderInterAspectLines(p1, p2, aspects) {
     const longitudeOf = (list, name) => {
       const target = capitalize(name);
@@ -6028,7 +6651,7 @@ var RoxySynastryChart = class extends LitElement23 {
     });
   }
   renderAspects(aspects) {
-    return html23`<table>
+    return html24`<table>
 			<thead>
 				<tr>
 					<th>Planet 1</th>
@@ -6040,7 +6663,7 @@ var RoxySynastryChart = class extends LitElement23 {
 			</thead>
 			<tbody>
 				${aspects.slice(0, 12).map(
-      (a) => html23`<tr>
+      (a) => html24`<tr>
 						<td>${a.planet1}</td>
 						<td>${a.planet2}</td>
 						<td>${normalizeAspect(a) || ""}</td>
@@ -6054,7 +6677,7 @@ var RoxySynastryChart = class extends LitElement23 {
 };
 RoxySynastryChart.styles = [
   baseStyles,
-  css24`
+  css25`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6084,7 +6707,9 @@ RoxySynastryChart.styles = [
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 400px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
+				height: auto;
 				margin: 0 auto;
 			}
 
@@ -6106,6 +6731,31 @@ RoxySynastryChart.styles = [
 				font-weight: 600;
 				font-size: 13px;
 			}
+			.person-tag {
+				font-size: 7px;
+				font-weight: 700;
+				opacity: 0.85;
+			}
+			.planet-deg {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 7px;
+				font-family: var(--roxy-font-sans);
+			}
+			.planet-deg .retro {
+				fill: var(--roxy-danger, #dc2626);
+			}
+			.asc-tick {
+				stroke: var(--roxy-accent-fg, #b45309);
+				stroke-width: 1;
+				opacity: 0.75;
+			}
+			.asc-label {
+				fill: var(--roxy-accent-fg, #b45309);
+				font-size: 9px;
+				font-weight: 700;
+				font-family: var(--roxy-font-sans);
+				letter-spacing: 0.04em;
+			}
 			.aspect {
 				stroke-width: 0.8;
 				fill: none;
@@ -6220,7 +6870,7 @@ function formatStrength(s) {
 }
 
 // packages/ui/src/components/tarot-card.ts
-import { css as css25, html as html24, LitElement as LitElement24, nothing as nothing25 } from "lit";
+import { css as css26, html as html25, LitElement as LitElement24, nothing as nothing25 } from "lit";
 import { customElement as customElement24, property as property24, state as state6 } from "lit/decorators.js";
 var RoxyTarotCard = class extends LitElement24 {
   constructor() {
@@ -6234,7 +6884,7 @@ var RoxyTarotCard = class extends LitElement24 {
   render() {
     const d = this.data;
     if (!d)
-      return html24`<div class="roxy-empty" role="status">No tarot data</div>`;
+      return html25`<div class="roxy-empty" role="status">No tarot data</div>`;
     if ("card" in d) return this.renderDailyCard(d);
     return this.renderFullCard(d);
   }
@@ -6242,9 +6892,9 @@ var RoxyTarotCard = class extends LitElement24 {
     const card = d.card;
     const isReversed = this.flipped !== Boolean(card.reversed);
     const keywords = card.keywords ?? [];
-    return html24`<article class="card" aria-label=${card.name ?? "Tarot card"}>
+    return html25`<article class="card" aria-label=${card.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${card.imageUrl ? html24`<img
+				${card.imageUrl ? html25`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${card.imageUrl}
 							alt=${card.name ?? "Tarot card"}
@@ -6256,7 +6906,7 @@ var RoxyTarotCard = class extends LitElement24 {
         this.toggleFlip();
       }
     }}
-						/>` : html24`<div
+						/>` : html25`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -6265,14 +6915,14 @@ var RoxyTarotCard = class extends LitElement24 {
 			</div>
 			<div>
 				<div class="meta">
-					${card.arcana ? html24`${card.arcana} arcana` : nothing25}
-					${isReversed ? html24` · reversed` : nothing25}
+					${card.arcana ? html25`${card.arcana} arcana` : nothing25}
+					${isReversed ? html25` · reversed` : nothing25}
 				</div>
 				<h2 class="title">${card.name ?? "Tarot card"}</h2>
-				${d.dailyMessage ? html24`<p class="message">${d.dailyMessage}</p>` : nothing25}
-				${card.meaning ? html24`<p>${card.meaning}</p>` : nothing25}
-				${keywords.length > 0 ? html24`<div class="chips">
-							${keywords.map((k) => html24`<span>${k}</span>`)}
+				${d.dailyMessage ? html25`<p class="message">${d.dailyMessage}</p>` : nothing25}
+				${card.meaning ? html25`<p>${card.meaning}</p>` : nothing25}
+				${keywords.length > 0 ? html25`<div class="chips">
+							${keywords.map((k) => html25`<span>${k}</span>`)}
 						</div>` : nothing25}
 				<button
 					class="flip"
@@ -6289,9 +6939,9 @@ var RoxyTarotCard = class extends LitElement24 {
     const isReversed = this.flipped;
     const orientedMeaning = isReversed ? d.reversed : d.upright;
     const keywords = isReversed ? d.keywords?.reversed ?? [] : d.keywords?.upright ?? [];
-    return html24`<article class="card" aria-label=${d.name ?? "Tarot card"}>
+    return html25`<article class="card" aria-label=${d.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${d.imageUrl ? html24`<img
+				${d.imageUrl ? html25`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${d.imageUrl}
 							alt=${d.name ?? "Tarot card"}
@@ -6303,7 +6953,7 @@ var RoxyTarotCard = class extends LitElement24 {
         this.toggleFlip();
       }
     }}
-						/>` : html24`<div
+						/>` : html25`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -6312,14 +6962,14 @@ var RoxyTarotCard = class extends LitElement24 {
 			</div>
 			<div>
 				<div class="meta">
-					${d.arcana ? html24`${d.arcana} arcana` : nothing25}
-					${d.number !== void 0 && d.number !== null ? html24` · ${d.number}` : nothing25}
-					${isReversed ? html24` · reversed` : nothing25}
+					${d.arcana ? html25`${d.arcana} arcana` : nothing25}
+					${d.number !== void 0 && d.number !== null ? html25` · ${d.number}` : nothing25}
+					${isReversed ? html25` · reversed` : nothing25}
 				</div>
 				<h2 class="title">${d.name ?? "Tarot card"}</h2>
-				${orientedMeaning?.description ? html24`<p>${orientedMeaning.description}</p>` : nothing25}
-				${keywords.length > 0 ? html24`<div class="chips">
-							${keywords.map((k) => html24`<span>${k}</span>`)}
+				${orientedMeaning?.description ? html25`<p>${orientedMeaning.description}</p>` : nothing25}
+				${keywords.length > 0 ? html25`<div class="chips">
+							${keywords.map((k) => html25`<span>${k}</span>`)}
 						</div>` : nothing25}
 				<button
 					class="flip"
@@ -6335,7 +6985,7 @@ var RoxyTarotCard = class extends LitElement24 {
 };
 RoxyTarotCard.styles = [
   baseStyles,
-  css25`
+  css26`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -6438,7 +7088,7 @@ RoxyTarotCard = __decorateClass([
 ], RoxyTarotCard);
 
 // packages/ui/src/components/tarot-spread.ts
-import { css as css26, html as html25, LitElement as LitElement25, nothing as nothing26 } from "lit";
+import { css as css27, html as html26, LitElement as LitElement25, nothing as nothing26 } from "lit";
 import { customElement as customElement25, property as property25 } from "lit/decorators.js";
 var RoxyTarotSpread = class extends LitElement25 {
   constructor() {
@@ -6449,7 +7099,7 @@ var RoxyTarotSpread = class extends LitElement25 {
   render() {
     const d = this.data;
     if (!d)
-      return html25`<div class="roxy-empty" role="status">No tarot spread</div>`;
+      return html26`<div class="roxy-empty" role="status">No tarot spread</div>`;
     const isYesNo = "answer" in d;
     const isDrawn = "cards" in d && !("spread" in d);
     const positions = isDrawn ? [] : "positions" in d ? d.positions ?? [] : [];
@@ -6461,60 +7111,60 @@ var RoxyTarotSpread = class extends LitElement25 {
     const summary = "summary" in d ? d.summary : void 0;
     const yesNoInterp = isYesNo ? d.interpretation : void 0;
     const answerClass = answer ? answer.toLowerCase().replace(/[^a-z]/g, "") : "";
-    return html25`<article class="wrap" aria-label="Tarot spread">
+    return html26`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
 				<h2 class="title">${spreadLabel}</h2>
-				${question ? html25`<span class="question">"${question}"</span>` : nothing26}
+				${question ? html26`<span class="question">"${question}"</span>` : nothing26}
 			</header>
-			${isYesNo ? html25`<div>
+			${isYesNo ? html26`<div>
 						<span class=${`answer ${answerClass}`}>${answer}</span>
-						${strength ? html25`<small> · ${strength}</small>` : nothing26}
+						${strength ? html26`<small> · ${strength}</small>` : nothing26}
 					</div>` : nothing26}
-			${positions.length > 0 ? html25`<div class="grid">
+			${positions.length > 0 ? html26`<div class="grid">
 						${positions.map(
-      (p) => html25`<div class="card">
+      (p) => html26`<div class="card">
 								<p class="label">${p.name ?? ""}</p>
 								<div class="image">
-									${p.card?.imageUrl ? html25`<img
+									${p.card?.imageUrl ? html26`<img
 												src=${p.card.imageUrl}
 												alt=${p.card.name ?? "tarot card"}
 												class=${p.card.reversed ? "reversed" : ""}
-											/>` : html25`${p.card?.name ?? "?"}`}
+											/>` : html26`${p.card?.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${p.card?.name ?? ""}
-									${p.card?.reversed ? html25`<small>(reversed)</small>` : nothing26}
+									${p.card?.reversed ? html26`<small>(reversed)</small>` : nothing26}
 								</p>
-								${p.interpretation ? html25`<p class="interp">${p.interpretation}</p>` : nothing26}
+								${p.interpretation ? html26`<p class="interp">${p.interpretation}</p>` : nothing26}
 							</div>`
     )}
 					</div>` : nothing26}
-			${cards.length > 0 ? html25`<div class="grid">
+			${cards.length > 0 ? html26`<div class="grid">
 						${cards.map(
-      (c) => html25`<div class="card">
+      (c) => html26`<div class="card">
 								<div class="image">
-									${c.imageUrl ? html25`<img
+									${c.imageUrl ? html26`<img
 												src=${c.imageUrl}
 												alt=${c.name ?? "tarot card"}
 												class=${c.reversed ? "reversed" : ""}
-											/>` : html25`${c.name ?? "?"}`}
+											/>` : html26`${c.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${c.name ?? ""}
-									${c.reversed ? html25`<small>(reversed)</small>` : nothing26}
+									${c.reversed ? html26`<small>(reversed)</small>` : nothing26}
 								</p>
-								${c.meaning ? html25`<p class="interp">${c.meaning}</p>` : nothing26}
+								${c.meaning ? html26`<p class="interp">${c.meaning}</p>` : nothing26}
 							</div>`
     )}
 					</div>` : nothing26}
-			${summary ? html25`<p class="reading">${summary}</p>` : nothing26}
-			${yesNoInterp ? html25`<p class="reading">${yesNoInterp}</p>` : nothing26}
+			${summary ? html26`<p class="reading">${summary}</p>` : nothing26}
+			${yesNoInterp ? html26`<p class="reading">${yesNoInterp}</p>` : nothing26}
 		</article>`;
   }
 };
 RoxyTarotSpread.styles = [
   baseStyles,
-  css26`
+  css27`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6633,7 +7283,7 @@ RoxyTarotSpread = __decorateClass([
 ], RoxyTarotSpread);
 
 // packages/ui/src/components/transits-table.ts
-import { css as css27, html as html26, LitElement as LitElement26, nothing as nothing27 } from "lit";
+import { css as css28, html as html27, LitElement as LitElement26, nothing as nothing27 } from "lit";
 import { customElement as customElement26, property as property26 } from "lit/decorators.js";
 var RoxyTransitsTable = class extends LitElement26 {
   constructor() {
@@ -6642,7 +7292,7 @@ var RoxyTransitsTable = class extends LitElement26 {
   }
   render() {
     if (!this.data?.transitPlanets?.length) {
-      return html26`<div class="roxy-empty" role="status">No transits data</div>`;
+      return html27`<div class="roxy-empty" role="status">No transits data</div>`;
     }
     const {
       transitDate,
@@ -6652,10 +7302,10 @@ var RoxyTransitsTable = class extends LitElement26 {
       summary
     } = this.data;
     const dateStr = [formatDate(transitDate), formatTime(transitTime)].filter(Boolean).join(" ");
-    return html26`<div class="wrap" aria-label="Transit positions table">
+    return html27`<div class="wrap" aria-label="Transit positions table">
 			<div class="head">
 				<h2 class="title">Transits</h2>
-				${dateStr ? html26`<p class="subtitle">${dateStr}</p>` : nothing27}
+				${dateStr ? html27`<p class="subtitle">${dateStr}</p>` : nothing27}
 			</div>
 
 			${summary ? this.renderSummaryPills(summary) : nothing27}
@@ -6667,7 +7317,7 @@ var RoxyTransitsTable = class extends LitElement26 {
 				</div>
 			</div>
 
-			${transitAspects?.length ? html26`<div>
+			${transitAspects?.length ? html27`<div>
 						<p class="section-label">Transit aspects</p>
 						<div class="overflow-scroll">
 							${this.renderAspectsList(transitAspects)}
@@ -6676,7 +7326,7 @@ var RoxyTransitsTable = class extends LitElement26 {
 		</div>`;
   }
   renderSummaryPills(summary) {
-    return html26`<div class="summary-pills" role="region" aria-label="Aspect summary">
+    return html27`<div class="summary-pills" role="region" aria-label="Aspect summary">
 			<span class="pill pill--muted">
 				Total: ${summary.totalAspects}
 			</span>
@@ -6692,7 +7342,7 @@ var RoxyTransitsTable = class extends LitElement26 {
 		</div>`;
   }
   renderPlanetsTable(planets) {
-    return html26`<table class="planets-table">
+    return html27`<table class="planets-table">
 			<thead>
 				<tr>
 					<th scope="col">Planet</th>
@@ -6706,12 +7356,12 @@ var RoxyTransitsTable = class extends LitElement26 {
       const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? "";
       const speedArrow = p.speed >= 0 ? "\u2191" : "\u2193";
-      return html26`<tr>
+      return html27`<tr>
 						<td>
 							<div class="planet-cell">
 								<span class="glyph" aria-hidden="true">${pGlyph}</span>
 								${p.name}
-								${p.isRetrograde ? html26`<span class="retro-badge" aria-label="retrograde">R</span>` : nothing27}
+								${p.isRetrograde ? html27`<span class="retro-badge" aria-label="retrograde">R</span>` : nothing27}
 							</div>
 						</td>
 						<td>
@@ -6731,7 +7381,7 @@ var RoxyTransitsTable = class extends LitElement26 {
 		</table>`;
   }
   renderAspectsList(aspects) {
-    return html26`<div role="list" aria-label="Transit aspects">
+    return html27`<div role="list" aria-label="Transit aspects">
 			${aspects.map((a, idx) => {
       const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? "";
       const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? "";
@@ -6739,7 +7389,7 @@ var RoxyTransitsTable = class extends LitElement26 {
       const interp = a.interpretation;
       const type = (a.type ?? "").toLowerCase();
       const status = a.isApplying ? "Applying" : "Separating";
-      return html26`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
+      return html27`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
 					<summary>
 						<span aria-hidden="true">${tGlyph}</span>
 						${a.transitPlanet}
@@ -6751,12 +7401,12 @@ var RoxyTransitsTable = class extends LitElement26 {
 						</span>
 					</summary>
 					<div class="interp-body">
-						${interp?.summary ? html26`<p>${interp.summary}</p>` : nothing27}
-						${interp?.impact ? html26`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing27}
-						${interp?.timing ? html26`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing27}
-						${interp?.guidance ? html26`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing27}
-						${interp?.keywords?.length ? html26`<div class="interp-keywords">
-										${interp.keywords.map((k) => html26`<span class="kw">${k}</span>`)}
+						${interp?.summary ? html27`<p>${interp.summary}</p>` : nothing27}
+						${interp?.impact ? html27`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing27}
+						${interp?.timing ? html27`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing27}
+						${interp?.guidance ? html27`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing27}
+						${interp?.keywords?.length ? html27`<div class="interp-keywords">
+										${interp.keywords.map((k) => html27`<span class="kw">${k}</span>`)}
 									</div>` : nothing27}
 					</div>
 				</details>`;
@@ -6766,7 +7416,7 @@ var RoxyTransitsTable = class extends LitElement26 {
 };
 RoxyTransitsTable.styles = [
   baseStyles,
-  css27`
+  css28`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6972,93 +7622,43 @@ RoxyTransitsTable = __decorateClass([
 ], RoxyTransitsTable);
 
 // packages/ui/src/components/vedic-kundli.ts
-import { css as css28, html as html27, LitElement as LitElement27 } from "lit";
+import { html as html28, LitElement as LitElement27 } from "lit";
 import { customElement as customElement27, property as property27 } from "lit/decorators.js";
 var RoxyVedicKundli = class extends LitElement27 {
   constructor() {
     super(...arguments);
     this.data = null;
-    this.chartStyle = "south";
+    this.chartStyle = "north";
+    this.setStyle = (next) => {
+      this.chartStyle = next;
+    };
   }
-  buildHouses() {
-    if (!this.data?.meta) return [];
-    return buildHousesFromMeta(this.data.meta);
+  viewModel() {
+    if (!this.data?.meta) return null;
+    return toKundliViewModel(this.data.meta, "D1 Rashi");
   }
   render() {
-    if (!this.data)
-      return html27`<div class="roxy-empty" role="status">No kundli data</div>`;
-    const houses = this.buildHouses();
-    const style = this.chartStyle;
-    const frame = style === "north" ? renderNorthFrame() : style === "east" ? renderEastFrame() : renderSouthFrame();
-    const houseGroup = style === "north" ? renderNorthHouseGroup : style === "east" ? renderEastHouseGroup : renderSouthHouseGroup;
-    return html27`<div class="wrap">
-			<h2 class="title">Vedic kundli</h2>
+    const vm = this.viewModel();
+    if (!vm)
+      return html28`<div class="roxy-empty" role="status">No kundli data</div>`;
+    return html28`<div class="wrap">
+			<div class="header">
+				<h2 class="title">Vedic kundli</h2>
+				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
+			</div>
 			<svg
-				viewBox="0 0 300 300"
+				viewBox="0 0 400 400"
+				preserveAspectRatio="xMidYMid meet"
 				role="img"
 				aria-label="Vedic birth chart with twelve sign houses"
 			>
 				<title>Vedic kundli</title>
-				${frame}
-				${houses.map((h) => houseGroup(h))}
+				${renderKundliSvg(vm, this.chartStyle)}
 			</svg>
 		</div>`;
   }
 };
-RoxyVedicKundli.styles = [
-  baseStyles,
-  css28`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
-			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 10px;
-				font-weight: 600;
-				font-family: var(--roxy-font-sans);
-			}
-			.house-num {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 400;
-				font-family: var(--roxy-font-sans);
-			}
-			.lagna-marker {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 8px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
-			}
-			.lagna-bg {
-				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-				stroke-width: 0.8;
-			}
-		`
-];
+RoxyVedicKundli.styles = [baseStyles, kundliStyles];
 __decorateClass([
   property27({ attribute: false })
 ], RoxyVedicKundli.prototype, "data", 2);
@@ -7070,7 +7670,7 @@ RoxyVedicKundli = __decorateClass([
 ], RoxyVedicKundli);
 
 // packages/ui/src/components/vedic-planets-table.ts
-import { css as css29, html as html28, LitElement as LitElement28, nothing as nothing28 } from "lit";
+import { css as css29, html as html29, LitElement as LitElement28, nothing as nothing28 } from "lit";
 import { customElement as customElement28, property as property28 } from "lit/decorators.js";
 var GRAHA_ORDER = [
   "Lagna",
@@ -7108,9 +7708,9 @@ var RoxyVedicPlanetsTable = class extends LitElement28 {
   }
   render() {
     if (!this.data?.meta)
-      return html28`<div class="roxy-empty" role="status">No chart data</div>`;
+      return html29`<div class="roxy-empty" role="status">No chart data</div>`;
     const rows = this.orderedRows();
-    return html28`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+    return html29`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
 			<header class="head">
 				<h2 class="title">Planetary positions</h2>
 			</header>
@@ -7133,12 +7733,12 @@ var RoxyVedicPlanetsTable = class extends LitElement28 {
       const isLagna = (p.graha ?? name) === "Lagna";
       const glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? "";
       const signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? "")] ?? "";
-      return html28`<tr class=${isLagna ? "lagna" : ""}>
+      return html29`<tr class=${isLagna ? "lagna" : ""}>
 							<td class="graha">
-								${glyph ? html28`<span class="glyph">${glyph}</span>` : nothing28}${p.graha ?? name}
+								${glyph ? html29`<span class="glyph">${glyph}</span>` : nothing28}${p.graha ?? name}
 							</td>
 							<td>
-								${signGlyph ? html28`<span class="glyph">${signGlyph}</span>` : nothing28}${p.rashi ?? ""}
+								${signGlyph ? html29`<span class="glyph">${signGlyph}</span>` : nothing28}${p.rashi ?? ""}
 							</td>
 							<td class="num">
 								${typeof p.longitude === "number" ? formatSignPosition(p.longitude) : ""}
@@ -7148,7 +7748,7 @@ var RoxyVedicPlanetsTable = class extends LitElement28 {
 							<td>${p.nakshatra?.lord ?? ""}</td>
 							<td class="num">${typeof p.house === "number" ? p.house : ""}</td>
 							<td>${p.awastha ?? ""}</td>
-							<td>${p.isRetrograde ? html28`<span class="retro">R</span>` : nothing28}</td>
+							<td>${p.isRetrograde ? html29`<span class="retro">R</span>` : nothing28}</td>
 						</tr>`;
     })}
 				</tbody>
@@ -7234,7 +7834,7 @@ RoxyVedicPlanetsTable = __decorateClass([
 ], RoxyVedicPlanetsTable);
 
 // packages/ui/src/components/western-planets-table.ts
-import { css as css30, html as html29, LitElement as LitElement29, nothing as nothing29 } from "lit";
+import { css as css30, html as html30, LitElement as LitElement29, nothing as nothing29 } from "lit";
 import { customElement as customElement29, property as property29 } from "lit/decorators.js";
 var RoxyWesternPlanetsTable = class extends LitElement29 {
   constructor() {
@@ -7272,9 +7872,9 @@ var RoxyWesternPlanetsTable = class extends LitElement29 {
   }
   render() {
     if (!this.data?.planets)
-      return html29`<div class="roxy-empty" role="status">No chart data</div>`;
+      return html30`<div class="roxy-empty" role="status">No chart data</div>`;
     const rows = this.rows();
-    return html29`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
+    return html30`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
 			<header class="head">
 				<h2 class="title">Planetary positions</h2>
 			</header>
@@ -7293,20 +7893,20 @@ var RoxyWesternPlanetsTable = class extends LitElement29 {
       const glyph = PLANET_GLYPH[capitalize(r.name)] ?? "";
       const signGlyph = SIGN_GLYPH[capitalize(r.sign ?? "")] ?? "";
       const speed = typeof r.speed === "number" ? formatNumber(r.speed, 3) : "";
-      return html29`<tr class=${r.isPoint ? "point" : ""}>
+      return html30`<tr class=${r.isPoint ? "point" : ""}>
 							<td class="body">
-								${glyph ? html29`<span class="glyph">${glyph}</span>` : nothing29}${r.name}
+								${glyph ? html30`<span class="glyph">${glyph}</span>` : nothing29}${r.name}
 							</td>
 							<td>
-								${signGlyph ? html29`<span class="glyph">${signGlyph}</span>` : nothing29}${r.sign ?? ""}
+								${signGlyph ? html30`<span class="glyph">${signGlyph}</span>` : nothing29}${r.sign ?? ""}
 							</td>
 							<td class="num">
 								${typeof r.longitude === "number" ? formatSignPosition(r.longitude) : ""}
 							</td>
 							<td class="num">${typeof r.house === "number" ? r.house : ""}</td>
 							<td class="num">
-								${speed ? html29`${speed}°/day` : nothing29}
-								${r.isRetrograde ? html29`<span class="retro"> ℞</span>` : nothing29}
+								${speed ? html30`${speed}°/day` : nothing29}
+								${r.isRetrograde ? html30`<span class="retro"> ℞</span>` : nothing29}
 							</td>
 						</tr>`;
     })}
@@ -7387,7 +7987,7 @@ RoxyWesternPlanetsTable = __decorateClass([
 ], RoxyWesternPlanetsTable);
 
 // packages/ui/src/components/yoga-list.ts
-import { css as css31, html as html30, LitElement as LitElement30, nothing as nothing30 } from "lit";
+import { css as css31, html as html31, LitElement as LitElement30, nothing as nothing30 } from "lit";
 import { customElement as customElement30, property as property30, state as state7 } from "lit/decorators.js";
 var RoxyYogaList = class extends LitElement30 {
   constructor() {
@@ -7400,16 +8000,16 @@ var RoxyYogaList = class extends LitElement30 {
   }
   renderQualityChip(quality) {
     const cls = `quality-chip quality-${quality}`;
-    return html30`<span class=${cls}>${quality}</span>`;
+    return html31`<span class=${cls}>${quality}</span>`;
   }
   renderDetailCard(yoga) {
-    return html30`<div class="detail-card">
+    return html31`<div class="detail-card">
 			<p class="detail-name">
 				${yoga.name}
 				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing30}
 			</p>
-			${yoga.description ? html30`<p class="description">${yoga.description}</p>` : nothing30}
-			${yoga.result ? html30`<details>
+			${yoga.description ? html31`<p class="description">${yoga.description}</p>` : nothing30}
+			${yoga.result ? html31`<details>
 						<summary>Effects</summary>
 						<div class="result-body">${yoga.result}</div>
 					</details>` : nothing30}
@@ -7417,12 +8017,12 @@ var RoxyYogaList = class extends LitElement30 {
   }
   render() {
     if (!this.data)
-      return html30`<div class="roxy-empty" role="status">No yoga data</div>`;
+      return html31`<div class="roxy-empty" role="status">No yoga data</div>`;
     const d = this.data;
     const lc = this.filter.toLowerCase();
     if ("description" in d && typeof d.description === "string") {
       const yoga = d;
-      return html30`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+      return html31`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
     }
     if ("yogas" in d && Array.isArray(d.yogas)) {
       const allYogas = d.yogas;
@@ -7431,10 +8031,10 @@ var RoxyYogaList = class extends LitElement30 {
         const detailYogas = allYogas;
         const filtered2 = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas;
         const total2 = d.total;
-        return html30`<div class="wrap">
+        return html31`<div class="wrap">
 					<div class="head">
 						<h2 class="title">Yoga catalog</h2>
-						${total2 !== void 0 ? html30`<span class="count">${total2} total</span>` : nothing30}
+						${total2 !== void 0 ? html31`<span class="count">${total2} total</span>` : nothing30}
 					</div>
 					<div class="search-wrap">
 						<input
@@ -7452,17 +8052,17 @@ var RoxyYogaList = class extends LitElement30 {
 						aria-live="polite"
 						aria-label="Yoga results"
 					>
-						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : html30`<p class="no-results">No yogas match your search.</p>`}
+						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : html31`<p class="no-results">No yogas match your search.</p>`}
 					</div>
 				</div>`;
       }
       const catalogYogas = allYogas;
       const filtered = lc ? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc)) : catalogYogas;
       const total = d.total;
-      return html30`<div class="wrap">
+      return html31`<div class="wrap">
 				<div class="head">
 					<h2 class="title">Yoga catalog</h2>
-					${total !== void 0 ? html30`<span class="count">${total} total</span>` : nothing30}
+					${total !== void 0 ? html31`<span class="count">${total} total</span>` : nothing30}
 				</div>
 				<div class="search-wrap">
 					<input
@@ -7481,15 +8081,15 @@ var RoxyYogaList = class extends LitElement30 {
 					aria-label="Yoga results"
 				>
 					${filtered.length > 0 ? filtered.map(
-        (y) => html30`<div class="yoga-chip">
+        (y) => html31`<div class="yoga-chip">
 									${y.name}
 									<span class="yoga-id">${y.id}</span>
 								</div>`
-      ) : html30`<p class="no-results">No yogas match your search.</p>`}
+      ) : html31`<p class="no-results">No yogas match your search.</p>`}
 				</div>
 			</div>`;
     }
-    return html30`<div class="roxy-empty" role="status">No yoga data</div>`;
+    return html31`<div class="roxy-empty" role="status">No yoga data</div>`;
   }
 };
 RoxyYogaList.styles = [
@@ -7992,7 +8592,7 @@ var ROXY_COMPONENTS = [
 ];
 
 // packages/ui/src/version.ts
-var ROXY_UI_VERSION = "0.3.1";
+var ROXY_UI_VERSION = "0.4.0";
 
 // packages/ui/src/index.ts
 var ROXY_UI_COMPONENTS = ROXY_COMPONENTS.map((c) => c.slug);