@roxyapi/ui 0.3.1 → 0.4.1

package/dist/index.cjs

@@ -276,6 +276,20 @@ var baseStyles = import_lit.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
@@ -354,7 +368,11 @@ var RoxyAshtakavargaGrid = class extends import_lit2.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";
@@ -363,6 +381,22 @@ var RoxyAshtakavargaGrid = class extends import_lit2.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 import_lit2.html`<p class="roxy-empty">No sarvashtakavarga data</p>`;
@@ -377,7 +411,7 @@ var RoxyAshtakavargaGrid = class extends import_lit2.LitElement {
 				<tbody>
 					${signs.map((sign, i) => {
       const count = sav.bindus[i] ?? 0;
-      const hc = this.heatClass(count);
+      const hc = this.sarvaHeat(count);
       return import_lit2.html`<tr>
 							<td>
 								<div class="planet-cell">
@@ -418,7 +452,7 @@ var RoxyAshtakavargaGrid = class extends import_lit2.LitElement {
       (row) => import_lit2.html`<tr>
 						<td>${row.planet}</td>
 						${row.bindus.map((count) => {
-        const hc = this.heatClass(count);
+        const hc = this.bhinnaHeat(count);
         return import_lit2.html`<td class="${`heat-cell ${hc}`}">${count}</td>`;
       })}
 						<td>${row.total}</td>
@@ -565,27 +599,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([
@@ -843,12 +918,31 @@ var RoxyChoghadiyaGrid = class extends import_lit4.LitElement {
     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 import_lit4.html`<div class="cho-tile ${effectClass}" role="listitem">
-			<span class="tile-name">${period.name}</span>
+    return import_lit4.html`<div
+			class="cho-tile ${effectClass}${current ? " now" : ""}"
+			role="listitem"
+			aria-current=${current ? "time" : "false"}
+		>
+			<span class="tile-name">
+				${period.name}${current ? import_lit4.html`<span class="now-badge">Now</span>` : import_lit4.nothing}
+			</span>
 			<span class="tile-time" aria-label="Time range">${timeRange}</span>
 			<span class="tile-lord">
 				${lordGlyph ? import_lit4.html`<span aria-hidden="true">${lordGlyph}</span>` : import_lit4.nothing}
@@ -948,6 +1042,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);
@@ -1251,12 +1360,39 @@ var RoxyDashaTimeline = class extends import_lit6.LitElement {
 					</div>` : import_lit6.nothing}
 			</header>
 
+			${this.renderBirthBalance(d)}
 			${this.period === "current" ? this.renderCurrent(d) : import_lit6.nothing}
 			${periods.length > 0 ? import_lit6.html`<div class="timeline" role="list">
 						${periods.map((p) => this.renderBar(p, maxYears))}
 					</div>` : import_lit6.nothing}
+			${this.renderActiveInterpretation(periods)}
 		</div>`;
   }
+  renderBirthBalance(d) {
+    if (!("birthDashaBalance" in d) || !d.birthDashaBalance) return import_lit6.nothing;
+    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 import_lit6.html`<p class="balance">
+			Birth dasha balance: ${remaining} of
+			${lord ? import_lit6.html`<strong>${lord}</strong>` : "the opening mahadasha"} remained at birth.
+		</p>`;
+  }
+  renderActiveInterpretation(periods) {
+    const active = periods.find((p) => this.isCurrent(p));
+    if (!active?.interpretation) return import_lit6.nothing;
+    return import_lit6.html`<details class="interp">
+			<summary>${active.planet} mahadasha interpretation</summary>
+			<p>${active.interpretation}</p>
+		</details>`;
+  }
   renderCurrent(d) {
     if (!("mahadasha" in d)) return import_lit6.nothing;
     return import_lit6.html`<div class="current">
@@ -1282,12 +1418,52 @@ var RoxyDashaTimeline = class extends import_lit6.LitElement {
     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 import_lit6.html`<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 import_lit6.html`<div
+			class=${current ? "bar now" : "bar"}
+			role="listitem"
+			aria-current=${current ? "time" : "false"}
+		>
+			<span>
+				<strong>${p.planet}</strong>${current ? import_lit6.html`<span class="now-badge">Now</span>` : import_lit6.nothing}
+			</span>
+			<span class=${trackClass}>
+				<span class="bar-fill" style="width: ${width}%"></span>
+				${progress >= 0 ? import_lit6.html`<span
+							class="bar-progress"
+							style="left: ${progress * width}%"
+							aria-hidden="true"
+						></span>` : import_lit6.nothing}
+			</span>
 			<span class="dates">
 				${p.startDate ? formatYear(p.startDate) : ""}
 				${p.endDate ? import_lit6.html`- ${formatYear(p.endDate)}` : ""}
@@ -1341,6 +1517,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);
@@ -1352,26 +1535,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([
@@ -1631,7 +1857,7 @@ RoxyData = __decorateClass([
 ], RoxyData);
 
 // packages/ui/src/components/divisional-chart.ts
-var import_lit9 = require("lit");
+var import_lit10 = require("lit");
 var import_decorators7 = require("lit/decorators.js");
 
 // packages/ui/src/utils/kundli-render.ts
@@ -1680,25 +1906,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) {
@@ -1709,272 +1955,573 @@ 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 import_lit8.svg`<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 import_lit8.nothing;
-  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 import_lit8.svg`
+		<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 ? import_lit8.svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : import_lit8.nothing}
+	`;
+}
+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 import_lit8.svg`
-		<g>
-			${h.isLagna ? import_lit8.svg`<rect
-							class="lagna-bg"
-							x=${center.x - 30} y=${center.y - 28}
-							width="60" height="56" rx="6"
-						/>` : import_lit8.nothing}
-			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
-			${h.isLagna ? import_lit8.svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : import_lit8.nothing}
-			${renderPlanetStack(h.planets, center.x, baseY, 13)}
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? import_lit8.svg`
+						<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" />
+					` : import_lit8.nothing}
+			<text class="sign-text" x=${r.x + 6} y=${r.y + 12} text-anchor="start" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? import_lit8.svg`<text class="house-num" x=${r.x + r.w - 6} y=${r.y + 12} text-anchor="end" dominant-baseline="central">${houseNum}</text>` : import_lit8.nothing}
+			${planets.length ? renderPlanetStack(planets, sign, cx, cy + 4, 14) : import_lit8.nothing}
 		</g>
 	`;
 }
-function renderNorthFrame() {
+function renderSouthSvg(vm) {
+  const lagnaKey = vm.lagnaSign.toLowerCase();
+  return import_lit8.svg`
+		${renderSouthFrame(vm.divisionLabel)}
+		${SIGNS_ORDER.map(
+    (sign) => renderSouthCell(
+      sign,
+      vm.placements[sign.toLowerCase()] ?? [],
+      sign.toLowerCase() === lagnaKey,
+      houseNumberInSign(sign, vm.lagnaSign)
+    )
+  )}
+	`;
+}
+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 import_lit8.svg`
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
-		<line class="line" x1="150" y1="10" x2="150" y2="290" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="290" y2="150" stroke-width="1" />
-		<line class="line" x1="150" y1="10" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="10" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="290" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="290" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+		<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 ? import_lit8.svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : import_lit8.nothing}
 	`;
 }
-function renderNorthHouseGroup(h) {
-  const center = NORTH_HOUSE_CENTERS[h.number];
-  if (!center) return import_lit8.nothing;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+function renderNorthCell(houseNum, rashiNum, sign, planets, isLagna) {
+  const c = NORTH_HOUSE_CENTERS[houseNum];
+  if (!c) return import_lit8.svg``;
+  const rashiOffsetY = Math.min(14, Math.abs(c.y - CENTRE) * 0.45 + 6);
+  const ascOffsetY = rashiOffsetY + 12;
   return import_lit8.svg`
-		<g>
-			${h.isLagna ? import_lit8.svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />` : import_lit8.nothing}
-			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
-			<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)}
+		<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 ? import_lit8.svg`<text class="lagna-marker" x=${c.x} y=${c.y - ascOffsetY} text-anchor="middle" dominant-baseline="central">Asc</text>` : import_lit8.nothing}
+			${planets.length ? renderPlanetStack(planets, sign, c.x, c.y + 8, 12) : import_lit8.nothing}
 		</g>
 	`;
 }
-function renderSouthFrame() {
+function renderNorthSvg(vm) {
+  const lagnaSign = vm.lagnaSign || "Aries";
   return import_lit8.svg`
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
-		<polygon class="line" points="220,80 220,220 80,220 80,80" stroke-width="1" fill="none" />
-		<line class="line" x1="150" y1="10" x2="80" y2="80" stroke-width="1" />
-		<line class="line" x1="150" y1="10" x2="220" y2="80" stroke-width="1" />
-		<line class="line" x1="290" y1="150" x2="220" y2="80" stroke-width="1" />
-		<line class="line" x1="290" y1="150" x2="220" y2="220" stroke-width="1" />
-		<line class="line" x1="150" y1="290" x2="220" y2="220" stroke-width="1" />
-		<line class="line" x1="150" y1="290" x2="80" y2="220" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="80" y2="220" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
+		${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 import_lit8.svg`
-		<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 ? import_lit8.svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : import_lit8.nothing}
 	`;
 }
-function renderEastHouseGroup(h) {
-  const center = EAST_HOUSE_CENTERS[h.number];
-  const signPos = EAST_SIGN_POSITIONS[h.number];
-  if (!center || !signPos) return import_lit8.nothing;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+function renderEastCell(sign, planets, isLagna, houseNum) {
+  const cell = EAST_CELLS[sign];
+  if (!cell) return import_lit8.svg``;
+  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 import_lit8.svg`
-		<g>
-			${h.isLagna ? import_lit8.svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="20" />` : import_lit8.nothing}
-			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
-			${h.isLagna ? import_lit8.svg`<text class="lagna-marker" x=${center.x} y=${center.y - 14} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : import_lit8.nothing}
-			${renderPlanetStack(h.planets, center.x, center.y + 2, 11)}
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? import_lit8.svg`<polygon class="lagna-bg" points=${polyPoints} />` : import_lit8.nothing}
+			<text class="sign-text" x=${cen.x} y=${cen.y - 16} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? import_lit8.svg`<text class="house-num" x=${cen.x + 18} y=${cen.y - 16} text-anchor="start" dominant-baseline="central">${houseNum}</text>` : import_lit8.nothing}
+			${isLagna ? import_lit8.svg`<text class="lagna-marker" x=${cen.x} y=${cen.y - 30} text-anchor="middle" dominant-baseline="central">Asc</text>` : import_lit8.nothing}
+			${planets.length ? renderPlanetStack(planets, sign, cen.x, cen.y + 4, 12) : import_lit8.nothing}
 		</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 import_lit8.svg`
+		${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 import_lit8.html`<div
+		class="kundli-tablist"
+		role="tablist"
+		aria-label="Kundli style"
+		@keydown=${onKeyDown}
+	>
+		${CHART_STYLES.map(
+    (s) => import_lit8.html`<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
+var import_lit9 = require("lit");
+var kundliStyles = import_lit9.css`
+	.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 import_lit9.LitElement {
+var RoxyDivisionalChart = class extends import_lit10.LitElement {
   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 import_lit9.html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+    const vm = this.viewModel();
+    if (!this.data || !vm)
+      return import_lit10.html`<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 import_lit9.html`<div class="wrap">
+    return import_lit10.html`<div class="wrap">
 			<div class="header">
-				<h2 class="title">
-					D${division.number} ${division.name}
-					${division.sanskritName && division.sanskritName !== division.name ? import_lit9.html`<span class="division-meta"> · ${division.sanskritName}</span>` : import_lit9.nothing}
-				</h2>
-				${division.significance ? import_lit9.html`<p class="significance">${division.significance}</p>` : import_lit9.nothing}
+				<div>
+					<h2 class="title">
+						D${division.number} ${division.name}
+						${division.sanskritName && division.sanskritName !== division.name ? import_lit10.html`<span class="division-meta"> · ${division.sanskritName}</span>` : import_lit10.nothing}
+					</h2>
+					${division.significance ? import_lit10.html`<p class="significance">${division.significance}</p>` : import_lit10.nothing}
+				</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 ? import_lit9.html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
+			${vargottama && vargottama.length > 0 ? import_lit10.html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
 						<span class="vargottama-label">Vargottama:</span>
 						${vargottama.map(
-      (planet) => import_lit9.html`<span class="vargottama-pill" role="listitem">
+      (planet) => import_lit10.html`<span class="vargottama-pill" role="listitem">
 									${PLANET_GLYPH[planet] ?? ""} ${planet}
 								</span>`
     )}
-					</div>` : import_lit9.nothing}
+					</div>` : import_lit10.nothing}
 		</div>`;
   }
 };
 RoxyDivisionalChart.styles = [
   baseStyles,
-  import_lit9.css`
-			.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,
+  import_lit10.css`
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -1987,46 +2534,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;
@@ -2064,14 +2571,14 @@ RoxyDivisionalChart = __decorateClass([
 ], RoxyDivisionalChart);
 
 // packages/ui/src/components/dosha-card.ts
-var import_lit10 = require("lit");
+var import_lit11 = require("lit");
 var import_decorators8 = require("lit/decorators.js");
 var DOSHA_LABELS = {
   manglik: "Mangal Dosha",
   kalsarpa: "Kaal Sarp Dosha",
   sadhesati: "Sade Sati"
 };
-var RoxyDoshaCard = class extends import_lit10.LitElement {
+var RoxyDoshaCard = class extends import_lit11.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -2080,14 +2587,14 @@ var RoxyDoshaCard = class extends import_lit10.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit10.html`<div class="roxy-empty" role="status">No dosha data</div>`;
+      return import_lit11.html`<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 import_lit10.html`<article
+    return import_lit11.html`<article
 			class="card"
 			aria-label=${label}
 		>
@@ -2097,7 +2604,7 @@ var RoxyDoshaCard = class extends import_lit10.LitElement {
 					${present ? "Present" : "Absent"}
 				</span>
 			</header>
-			${d.severity ? import_lit10.html`<div
+			${d.severity ? import_lit11.html`<div
 						class="severity-bar"
 						role="meter"
 						aria-valuemin="0"
@@ -2106,32 +2613,32 @@ var RoxyDoshaCard = class extends import_lit10.LitElement {
 						aria-label="Severity ${d.severity}"
 					>
 						<span class="severity-fill" style="width: ${pct}%; background: ${barColor};"></span>
-					</div>` : import_lit10.nothing}
-			${d.description ? import_lit10.html`<p class="description">${d.description}</p>` : import_lit10.nothing}
+					</div>` : import_lit11.nothing}
+			${d.description ? import_lit11.html`<p class="description">${d.description}</p>` : import_lit11.nothing}
 			${this.renderEffects(d)}
-			${d.remedies && d.remedies.length > 0 ? import_lit10.html`<div>
+			${d.remedies && d.remedies.length > 0 ? import_lit11.html`<div>
 						<h3>Remedies</h3>
 						<ul>
-							${d.remedies.map((r) => import_lit10.html`<li>${r}</li>`)}
+							${d.remedies.map((r) => import_lit11.html`<li>${r}</li>`)}
 						</ul>
-					</div>` : import_lit10.nothing}
-			${"exceptions" in d && d.exceptions && d.exceptions.length > 0 ? import_lit10.html`<div>
+					</div>` : import_lit11.nothing}
+			${"exceptions" in d && d.exceptions && d.exceptions.length > 0 ? import_lit11.html`<div>
 					<h3>Exceptions</h3>
 					<ul>
-						${d.exceptions.map((r) => import_lit10.html`<li>${r}</li>`)}
+						${d.exceptions.map((r) => import_lit11.html`<li>${r}</li>`)}
 					</ul>
-				</div>` : import_lit10.nothing}
+				</div>` : import_lit11.nothing}
 		</article>`;
   }
   renderEffects(d) {
-    if (!d.effects) return import_lit10.nothing;
+    if (!d.effects) return import_lit11.nothing;
     const entries = Object.entries(d.effects).filter(
       ([, v]) => typeof v === "string" && v.length > 0
     );
-    if (entries.length === 0) return import_lit10.nothing;
-    return import_lit10.html`<div class="effects">
+    if (entries.length === 0) return import_lit11.nothing;
+    return import_lit11.html`<div class="effects">
 			${entries.map(
-      ([k, v]) => import_lit10.html`<div>
+      ([k, v]) => import_lit11.html`<div>
 					<h3>${k}</h3>
 					<p>${v}</p>
 				</div>`
@@ -2141,7 +2648,7 @@ var RoxyDoshaCard = class extends import_lit10.LitElement {
 };
 RoxyDoshaCard.styles = [
   baseStyles,
-  import_lit10.css`
+  import_lit11.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -2242,7 +2749,7 @@ RoxyDoshaCard = __decorateClass([
 ], RoxyDoshaCard);
 
 // packages/ui/src/components/endpoint-form.ts
-var import_lit11 = require("lit");
+var import_lit12 = require("lit");
 var import_decorators9 = require("lit/decorators.js");
 var specCache = /* @__PURE__ */ new Map();
 async function loadSpec(url) {
@@ -2259,7 +2766,7 @@ async function loadSpec(url) {
   }
   return pending;
 }
-var RoxyEndpointForm = class extends import_lit11.LitElement {
+var RoxyEndpointForm = class extends import_lit12.LitElement {
   constructor() {
     super(...arguments);
     this.endpoint = "vedic-astrology/birth-chart";
@@ -2404,35 +2911,35 @@ var RoxyEndpointForm = class extends import_lit11.LitElement {
   }
   render() {
     if (!this.loaded) {
-      return import_lit11.html`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
+      return import_lit12.html`<form><div class="roxy-skeleton" style="height: 8rem"></div></form>`;
     }
     if (this.specError) {
-      return import_lit11.html`<div class="spec-error" role="alert">
+      return import_lit12.html`<div class="spec-error" role="alert">
 				Schema load failed: ${this.specError}
 				<button type="button" class="submit" @click=${this.retryLoadSchema}>Retry</button>
 			</div>`;
     }
     const renderField = (f) => {
       if (this.hasLocation && (f.name === "latitude" || f.name === "longitude" || f.name === "timezone")) {
-        return import_lit11.nothing;
+        return import_lit12.nothing;
       }
       const inputId = `roxy-form-${f.name}`;
-      return import_lit11.html`<div class="field">
+      return import_lit12.html`<div class="field">
 				<label for=${inputId}>
-					${humanize(f.name)}${f.required ? import_lit11.html`<span class="req" aria-hidden="true">*</span>` : import_lit11.nothing}
+					${humanize(f.name)}${f.required ? import_lit12.html`<span class="req" aria-hidden="true">*</span>` : import_lit12.nothing}
 				</label>
-				${f.enum ? import_lit11.html`<select
+				${f.enum ? import_lit12.html`<select
 							id=${inputId}
 							?required=${f.required}
 							@change=${(e) => this.setValue(f.name, e.target.value)}
 						>
 							<option value="">Choose</option>
 							${f.enum.map(
-        (opt) => import_lit11.html`<option value=${opt} ?selected=${this.values[f.name] === opt}>
+        (opt) => import_lit12.html`<option value=${opt} ?selected=${this.values[f.name] === opt}>
 									${opt}
 								</option>`
       )}
-						</select>` : import_lit11.html`<input
+						</select>` : import_lit12.html`<input
 							id=${inputId}
 							type=${this.htmlType(f.type)}
 							?required=${f.required}
@@ -2445,12 +2952,12 @@ var RoxyEndpointForm = class extends import_lit11.LitElement {
         this.coerce(f.type, e.target.value)
       )}
 						/>`}
-				${f.description ? import_lit11.html`<small class="help">${f.description}</small>` : import_lit11.nothing}
+				${f.description ? import_lit12.html`<small class="help">${f.description}</small>` : import_lit12.nothing}
 			</div>`;
     };
-    return import_lit11.html`<form @submit=${this.onSubmit}>
+    return import_lit12.html`<form @submit=${this.onSubmit}>
 			<h2 class="title">${humanize(this.endpoint.split("/").pop() ?? "")}</h2>
-			${this.hasLocation ? import_lit11.html`<div class="location-block">
+			${this.hasLocation ? import_lit12.html`<div class="location-block">
 						<label>Birth location</label>
 						<roxy-location-search
 							@roxy-location-select=${this.onLocation}
@@ -2459,7 +2966,7 @@ var RoxyEndpointForm = class extends import_lit11.LitElement {
 						<small class="help">
 							Required: latitude, longitude, timezone. Pick a city to autofill.
 						</small>
-					</div>` : import_lit11.nothing}
+					</div>` : import_lit12.nothing}
 			<div class="fields">
 				${this.fields.map((f) => renderField(f))}
 			</div>
@@ -2491,7 +2998,7 @@ var RoxyEndpointForm = class extends import_lit11.LitElement {
 };
 RoxyEndpointForm.styles = [
   baseStyles,
-  import_lit11.css`
+  import_lit12.css`
 			form {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -2627,9 +3134,9 @@ RoxyEndpointForm = __decorateClass([
 ], RoxyEndpointForm);
 
 // packages/ui/src/components/guna-milan.ts
-var import_lit12 = require("lit");
+var import_lit13 = require("lit");
 var import_decorators10 = require("lit/decorators.js");
-var RoxyGunaMilan = class extends import_lit12.LitElement {
+var RoxyGunaMilan = class extends import_lit13.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -2637,7 +3144,7 @@ var RoxyGunaMilan = class extends import_lit12.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit12.html`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
+      return import_lit13.html`<div class="roxy-empty" role="status">No Guna Milan data</div>`;
     const breakdown = (d.breakdown ?? []).filter(
       (b) => b?.category !== void 0
     );
@@ -2648,18 +3155,18 @@ var RoxyGunaMilan = class extends import_lit12.LitElement {
     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 import_lit12.html`<article class="card" aria-label="Guna Milan score">
+    return import_lit13.html`<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" ? import_lit12.html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
+							${typeof d.percentage === "number" ? import_lit13.html`<small style="margin-left: 0.5rem; color: var(--roxy-muted)">
 										${formatPercent(d.percentage, 1)}
-									</small>` : import_lit12.nothing}
+									</small>` : import_lit13.nothing}
 						</div>
-						${d.recommendation ? import_lit12.html`<span class="recommendation">${d.recommendation}</span>` : import_lit12.nothing}
+						${d.recommendation ? import_lit13.html`<span class="recommendation">${d.recommendation}</span>` : import_lit13.nothing}
 					</div>
 				</div>
 				<div class="score-ring" role="meter" aria-label="Guna milan score" aria-valuemin="0" aria-valuemax="36" aria-valuenow="${score}">
@@ -2674,7 +3181,7 @@ var RoxyGunaMilan = class extends import_lit12.LitElement {
 				</div>
 			</div>
 
-			${breakdown.length > 0 ? import_lit12.html`<table>
+			${breakdown.length > 0 ? import_lit13.html`<table>
 						<thead>
 							<tr>
 								<th>Category</th>
@@ -2687,7 +3194,7 @@ var RoxyGunaMilan = class extends import_lit12.LitElement {
       const score2 = b.score ?? 0;
       const maxScore = b.maxScore ?? defaultMax(b.category);
       const pct2 = maxScore ? score2 / maxScore * 100 : 0;
-      return import_lit12.html`<tr>
+      return import_lit13.html`<tr>
 									<td>${b.category}</td>
 									<td class="bar-cell">
 										<div class="mini-bar">
@@ -2698,19 +3205,19 @@ var RoxyGunaMilan = class extends import_lit12.LitElement {
 								</tr>`;
     })}
 						</tbody>
-					</table>` : import_lit12.nothing}
-			${(d.doshas?.length ?? 0) > 0 || (d.doshaCancellations?.length ?? 0) > 0 ? import_lit12.html`<div class="tags">
-						${d.doshas?.map((x) => import_lit12.html`<span class="dosha">${x}</span>`)}
+					</table>` : import_lit13.nothing}
+			${(d.doshas?.length ?? 0) > 0 || (d.doshaCancellations?.length ?? 0) > 0 ? import_lit13.html`<div class="tags">
+						${d.doshas?.map((x) => import_lit13.html`<span class="dosha">${x}</span>`)}
 						${d.doshaCancellations?.map(
-      (x) => import_lit12.html`<span class="cancel" title=${x.reason}>${x.dosha} cancelled</span>`
+      (x) => import_lit13.html`<span class="cancel" title=${x.reason}>${x.dosha} cancelled</span>`
     )}
-					</div>` : import_lit12.nothing}
+					</div>` : import_lit13.nothing}
 		</article>`;
   }
 };
 RoxyGunaMilan.styles = [
   baseStyles,
-  import_lit12.css`
+  import_lit13.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -2864,9 +3371,9 @@ function defaultMax(name) {
 }
 
 // packages/ui/src/components/hexagram.ts
-var import_lit13 = require("lit");
+var import_lit14 = require("lit");
 var import_decorators11 = require("lit/decorators.js");
-var RoxyHexagram = class extends import_lit13.LitElement {
+var RoxyHexagram = class extends import_lit14.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -2896,7 +3403,7 @@ var RoxyHexagram = class extends import_lit13.LitElement {
   render() {
     const resolved = this.resolveHexagram();
     if (!resolved)
-      return import_lit13.html`<div class="roxy-empty" role="status">No hexagram data</div>`;
+      return import_lit14.html`<div class="roxy-empty" role="status">No hexagram data</div>`;
     const {
       hex: h,
       lines: castLines,
@@ -2906,52 +3413,52 @@ var RoxyHexagram = class extends import_lit13.LitElement {
     } = resolved;
     const lines = castLines ?? this.derivedLines(h);
     const changing = new Set(changingLinePositions ?? []);
-    return import_lit13.html`<article class="card" aria-label="I Ching hexagram">
+    return import_lit14.html`<article class="card" aria-label="I Ching hexagram">
 			<div class="glyphs">
-				${h.symbol ? import_lit13.html`<div class="symbol">${h.symbol}</div>` : import_lit13.nothing}
+				${h.symbol ? import_lit14.html`<div class="symbol">${h.symbol}</div>` : import_lit14.nothing}
 				<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 import_lit13.html`<div class="line ${cls}">
-								${broken ? import_lit13.svg`<span class="seg"></span><span class="seg"></span>` : import_lit13.svg`<span class="seg"></span>`}
+      return import_lit14.html`<div class="line ${cls}">
+								${broken ? import_lit14.svg`<span class="seg"></span><span class="seg"></span>` : import_lit14.svg`<span class="seg"></span>`}
 							</div>`;
     })}
 				</div>
 			</div>
 			<div>
 				<h2 class="title">
-					${h.number ? import_lit13.html`${h.number}. ` : import_lit13.nothing}${h.english ?? h.chinese ?? "Hexagram"}
+					${h.number ? import_lit14.html`${h.number}. ` : import_lit14.nothing}${h.english ?? h.chinese ?? "Hexagram"}
 				</h2>
 				<p class="subtitle">
-					${h.chinese ? import_lit13.html`${h.chinese}` : import_lit13.nothing}
-					${h.pinyin ? import_lit13.html` · ${h.pinyin}` : import_lit13.nothing}
+					${h.chinese ? import_lit14.html`${h.chinese}` : import_lit14.nothing}
+					${h.pinyin ? import_lit14.html` · ${h.pinyin}` : import_lit14.nothing}
 				</p>
 				<div class="trigrams">
-					${h.upperTrigram ? import_lit13.html`<div>
+					${h.upperTrigram ? import_lit14.html`<div>
 								Upper
 								<span class="tri-glyph"
 									>${TRIGRAM_GLYPH[h.upperTrigram] ?? ""}</span
 								>${h.upperTrigram}
-							</div>` : import_lit13.nothing}
-					${h.lowerTrigram ? import_lit13.html`<div>
+							</div>` : import_lit14.nothing}
+					${h.lowerTrigram ? import_lit14.html`<div>
 								Lower
 								<span class="tri-glyph"
 									>${TRIGRAM_GLYPH[h.lowerTrigram] ?? ""}</span
 								>${h.lowerTrigram}
-							</div>` : import_lit13.nothing}
+							</div>` : import_lit14.nothing}
 				</div>
-				${h.judgment ? import_lit13.html`<p class="judgment">${h.judgment}</p>` : import_lit13.nothing}
-				${h.image ? import_lit13.html`<p class="image">${h.image}</p>` : import_lit13.nothing}
-				${dailyMessage ? import_lit13.html`<p class="message">${dailyMessage}</p>` : import_lit13.nothing}
-				${h.interpretation?.general ? import_lit13.html`<p>${h.interpretation.general}</p>` : import_lit13.nothing}
-				${changing.size > 0 ? import_lit13.html`<div class="changing">
+				${h.judgment ? import_lit14.html`<p class="judgment">${h.judgment}</p>` : import_lit14.nothing}
+				${h.image ? import_lit14.html`<p class="image">${h.image}</p>` : import_lit14.nothing}
+				${dailyMessage ? import_lit14.html`<p class="message">${dailyMessage}</p>` : import_lit14.nothing}
+				${h.interpretation?.general ? import_lit14.html`<p>${h.interpretation.general}</p>` : import_lit14.nothing}
+				${changing.size > 0 ? import_lit14.html`<div class="changing">
 							Changing lines: ${Array.from(changing).sort((a, b) => a - b).join(", ")}.
-							${resultingHexagram?.english ? import_lit13.html` Becomes hexagram ${resultingHexagram.number}
-										${resultingHexagram.english}.` : import_lit13.nothing}
-						</div>` : import_lit13.nothing}
+							${resultingHexagram?.english ? import_lit14.html` Becomes hexagram ${resultingHexagram.number}
+										${resultingHexagram.english}.` : import_lit14.nothing}
+						</div>` : import_lit14.nothing}
 			</div>
 		</article>`;
   }
@@ -2972,7 +3479,7 @@ var RoxyHexagram = class extends import_lit13.LitElement {
 };
 RoxyHexagram.styles = [
   baseStyles,
-  import_lit13.css`
+  import_lit14.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3092,9 +3599,9 @@ RoxyHexagram = __decorateClass([
 ], RoxyHexagram);
 
 // packages/ui/src/components/horoscope-card.ts
-var import_lit14 = require("lit");
+var import_lit15 = require("lit");
 var import_decorators12 = require("lit/decorators.js");
-var RoxyHoroscopeCard = class extends import_lit14.LitElement {
+var RoxyHoroscopeCard = class extends import_lit15.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -3103,12 +3610,12 @@ var RoxyHoroscopeCard = class extends import_lit14.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit14.html`<div class="roxy-empty" role="status">No horoscope data</div>`;
+      return import_lit15.html`<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 import_lit14.html`<article
+    return import_lit15.html`<article
 			class="card"
 			aria-label=${`${this.period} horoscope for ${sign}`}
 		>
@@ -3116,39 +3623,39 @@ var RoxyHoroscopeCard = class extends import_lit14.LitElement {
 				<span class="glyph" aria-hidden="true">${glyph}</span>
 				<div>
 					<h2 class="title">${sign} ${this.period}</h2>
-					${dateLabel ? import_lit14.html`<div class="date">${dateLabel}</div>` : import_lit14.nothing}
+					${dateLabel ? import_lit15.html`<div class="date">${dateLabel}</div>` : import_lit15.nothing}
 				</div>
-				${energy !== null ? import_lit14.html`<span class="energy" aria-label=${`Energy ${energy} of 10`}>
+				${energy !== null ? import_lit15.html`<span class="energy" aria-label=${`Energy ${energy} of 10`}>
 							Energy ${energy}/10
 							<span class="energy-bar"
 								><span style="width: ${energy / 10 * 100}%"></span
 							></span>
-						</span>` : import_lit14.nothing}
+						</span>` : import_lit15.nothing}
 			</header>
 
-			${d.overview ? import_lit14.html`<p class="overview">${d.overview}</p>` : import_lit14.nothing}
+			${d.overview ? import_lit15.html`<p class="overview">${d.overview}</p>` : import_lit15.nothing}
 
 			<div class="sections">
-				${d.love ? import_lit14.html`<div class="section">
+				${d.love ? import_lit15.html`<div class="section">
 							<h3>Love</h3>
 							<p>${d.love}</p>
-						</div>` : import_lit14.nothing}
-				${d.career ? import_lit14.html`<div class="section">
+						</div>` : import_lit15.nothing}
+				${d.career ? import_lit15.html`<div class="section">
 							<h3>Career</h3>
 							<p>${d.career}</p>
-						</div>` : import_lit14.nothing}
-				${d.health ? import_lit14.html`<div class="section">
+						</div>` : import_lit15.nothing}
+				${d.health ? import_lit15.html`<div class="section">
 							<h3>Health</h3>
 							<p>${d.health}</p>
-						</div>` : import_lit14.nothing}
-				${d.finance ? import_lit14.html`<div class="section">
+						</div>` : import_lit15.nothing}
+				${d.finance ? import_lit15.html`<div class="section">
 							<h3>Finance</h3>
 							<p>${d.finance}</p>
-						</div>` : import_lit14.nothing}
-				${"advice" in d && d.advice ? import_lit14.html`<div class="section">
+						</div>` : import_lit15.nothing}
+				${"advice" in d && d.advice ? import_lit15.html`<div class="section">
 							<h3>Advice</h3>
 							<p>${d.advice}</p>
-						</div>` : import_lit14.nothing}
+						</div>` : import_lit15.nothing}
 			</div>
 
 			${(() => {
@@ -3158,25 +3665,25 @@ var RoxyHoroscopeCard = class extends import_lit14.LitElement {
       const luckyDays = "luckyDays" in d && d.luckyDays ? d.luckyDays : [];
       const compatibleSigns = d.compatibleSigns ?? [];
       if (luckyNumber === void 0 && !luckyColor && luckyNumbers.length === 0 && luckyDays.length === 0 && compatibleSigns.length === 0)
-        return import_lit14.nothing;
-      return import_lit14.html`<div class="lucky">
-						${luckyNumber !== void 0 ? import_lit14.html`<span>Lucky number <strong>${luckyNumber}</strong></span>` : import_lit14.nothing}
-						${luckyColor ? import_lit14.html`<span>Lucky color <strong>${luckyColor}</strong></span>` : import_lit14.nothing}
-						${luckyNumbers.length ? import_lit14.html`<span
+        return import_lit15.nothing;
+      return import_lit15.html`<div class="lucky">
+						${luckyNumber !== void 0 ? import_lit15.html`<span>Lucky number <strong>${luckyNumber}</strong></span>` : import_lit15.nothing}
+						${luckyColor ? import_lit15.html`<span>Lucky color <strong>${luckyColor}</strong></span>` : import_lit15.nothing}
+						${luckyNumbers.length ? import_lit15.html`<span
 									>Lucky numbers
 									<strong>${luckyNumbers.join(", ")}</strong></span
-								>` : import_lit14.nothing}
-						${luckyDays.length ? import_lit14.html`<span
+								>` : import_lit15.nothing}
+						${luckyDays.length ? import_lit15.html`<span
 									>Lucky days <strong>${luckyDays.join(", ")}</strong></span
-								>` : import_lit14.nothing}
-						${compatibleSigns.length ? import_lit14.html`<span class="compat-wrap">
+								>` : import_lit15.nothing}
+						${compatibleSigns.length ? import_lit15.html`<span class="compat-wrap">
 									Best with
 									<span class="compat"
 										>${compatibleSigns.map(
-        (s) => import_lit14.html`<span>${s}</span>`
+        (s) => import_lit15.html`<span>${s}</span>`
       )}</span
 									>
-								</span>` : import_lit14.nothing}
+								</span>` : import_lit15.nothing}
 					</div>`;
     })()}
 		</article>`;
@@ -3184,7 +3691,7 @@ var RoxyHoroscopeCard = class extends import_lit14.LitElement {
 };
 RoxyHoroscopeCard.styles = [
   baseStyles,
-  import_lit14.css`
+  import_lit15.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3319,9 +3826,9 @@ RoxyHoroscopeCard = __decorateClass([
 ], RoxyHoroscopeCard);
 
 // packages/ui/src/components/kp-chart.ts
-var import_lit15 = require("lit");
+var import_lit16 = require("lit");
 var import_decorators13 = require("lit/decorators.js");
-var RoxyKpChart = class extends import_lit15.LitElement {
+var RoxyKpChart = class extends import_lit16.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -3373,22 +3880,22 @@ var RoxyKpChart = class extends import_lit15.LitElement {
   }
   render() {
     if (!this.data)
-      return import_lit15.html`<div class="roxy-empty" role="status">No KP chart data</div>`;
+      return import_lit16.html`<div class="roxy-empty" role="status">No KP chart data</div>`;
     const d = this.data;
     const asc = d.ascendant;
-    return import_lit15.html`<div class="wrap" aria-label="KP chart" tabindex="0">
+    return import_lit16.html`<div class="wrap" aria-label="KP chart" tabindex="0">
 			<header class="head">
 				<h2 class="title">KP chart</h2>
-				${asc ? import_lit15.html`<div class="asc">
+				${asc ? import_lit16.html`<div class="asc">
 							Ascendant: <strong>${asc.sign ?? ""}</strong>
-							${asc.nakshatra ? import_lit15.html`· ${asc.nakshatra}` : import_lit15.nothing}
-							${asc.subLord ? import_lit15.html`· sub lord ${asc.subLord}` : import_lit15.nothing}
-							${typeof asc.kpNumber === "number" ? import_lit15.html`· KP ${asc.kpNumber}` : import_lit15.nothing}
-						</div>` : import_lit15.nothing}
-				${typeof d.meta?.ayanamsa === "number" ? import_lit15.html`<div class="ayan">
+							${asc.nakshatra ? import_lit16.html`· ${asc.nakshatra}` : import_lit16.nothing}
+							${asc.subLord ? import_lit16.html`· sub lord ${asc.subLord}` : import_lit16.nothing}
+							${typeof asc.kpNumber === "number" ? import_lit16.html`· KP ${asc.kpNumber}` : import_lit16.nothing}
+						</div>` : import_lit16.nothing}
+				${typeof d.meta?.ayanamsa === "number" ? import_lit16.html`<div class="ayan">
 							${d.meta.ayanamsaType ?? "Ayanamsa"}: ${formatNumber(d.meta.ayanamsa, 4)}°
-							${d.meta.houseSystem ? import_lit15.html`· ${d.meta.houseSystem} houses` : import_lit15.nothing}
-						</div>` : import_lit15.nothing}
+							${d.meta.houseSystem ? import_lit16.html`· ${d.meta.houseSystem} houses` : import_lit16.nothing}
+						</div>` : import_lit16.nothing}
 			</header>
 
 			<div
@@ -3398,7 +3905,7 @@ var RoxyKpChart = class extends import_lit15.LitElement {
 				@keydown=${this.onTabKeyDown}
 			>
 				${["planets", "cusps"].map(
-      (t) => import_lit15.html`<button
+      (t) => import_lit16.html`<button
 						class="tab"
 						role="tab"
 						id="tab-${t}"
@@ -3422,8 +3929,8 @@ var RoxyKpChart = class extends import_lit15.LitElement {
   renderPlanets() {
     const bodies = this.bodies();
     if (!bodies.length)
-      return import_lit15.html`<p class="roxy-empty" role="status">No planets</p>`;
-    return import_lit15.html`<table role="table" aria-label="KP planets and nodes">
+      return import_lit16.html`<p class="roxy-empty" role="status">No planets</p>`;
+    return import_lit16.html`<table role="table" aria-label="KP planets and nodes">
 			<thead>
 				<tr>
 					<th scope="col">Body</th>
@@ -3438,9 +3945,9 @@ var RoxyKpChart = class extends import_lit15.LitElement {
 			</thead>
 			<tbody>
 				${bodies.map(
-      (b) => import_lit15.html`<tr>
+      (b) => import_lit16.html`<tr>
 						<td class="body">
-							${b.name}${b.retrograde ? import_lit15.html`<span class="retro">R</span>` : import_lit15.nothing}
+							${b.name}${b.retrograde ? import_lit16.html`<span class="retro">R</span>` : import_lit16.nothing}
 						</td>
 						<td>${b.sign ?? ""}</td>
 						<td class="num">${typeof b.house === "number" ? b.house : ""}</td>
@@ -3457,8 +3964,8 @@ var RoxyKpChart = class extends import_lit15.LitElement {
   renderCusps() {
     const cusps = this.data?.cusps ?? [];
     if (!cusps.length)
-      return import_lit15.html`<p class="roxy-empty" role="status">No cusps</p>`;
-    return import_lit15.html`<table role="table" aria-label="KP Placidus cusps">
+      return import_lit16.html`<p class="roxy-empty" role="status">No cusps</p>`;
+    return import_lit16.html`<table role="table" aria-label="KP Placidus cusps">
 			<thead>
 				<tr>
 					<th scope="col">House</th>
@@ -3473,7 +3980,7 @@ var RoxyKpChart = class extends import_lit15.LitElement {
 			</thead>
 			<tbody>
 				${cusps.map(
-      (c) => import_lit15.html`<tr>
+      (c) => import_lit16.html`<tr>
 						<td class="body num">${c.house}</td>
 						<td>${c.sign ?? ""}</td>
 						<td>${c.signLord ?? ""}</td>
@@ -3490,7 +3997,7 @@ var RoxyKpChart = class extends import_lit15.LitElement {
 };
 RoxyKpChart.styles = [
   baseStyles,
-  import_lit15.css`
+  import_lit16.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3593,25 +4100,25 @@ RoxyKpChart = __decorateClass([
 ], RoxyKpChart);
 
 // packages/ui/src/components/kp-planets-table.ts
-var import_lit16 = require("lit");
+var import_lit17 = require("lit");
 var import_decorators14 = require("lit/decorators.js");
-var RoxyKpPlanetsTable = class extends import_lit16.LitElement {
+var RoxyKpPlanetsTable = class extends import_lit17.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit16.html`<div class="roxy-empty" role="status">No KP data</div>`;
+      return import_lit17.html`<div class="roxy-empty" role="status">No KP data</div>`;
     const planets = this.data.planets ?? [];
-    return import_lit16.html`<div
+    return import_lit17.html`<div
 			class="wrap"
 			aria-label="KP planets table"
 			tabindex="0"
 		>
 			<header class="head">
 				<h2 class="title">KP planets</h2>
-				${typeof this.data.ayanamsa === "number" ? import_lit16.html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : import_lit16.nothing}
+				${typeof this.data.ayanamsa === "number" ? import_lit17.html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : import_lit17.nothing}
 			</header>
 			<table role="table">
 				<thead>
@@ -3628,10 +4135,10 @@ var RoxyKpPlanetsTable = class extends import_lit16.LitElement {
 				</thead>
 				<tbody>
 					${planets.map(
-      (p) => import_lit16.html`<tr>
+      (p) => import_lit17.html`<tr>
 							<td class="planet">
 								${p.planet}
-								${p.retrograde ? import_lit16.html`<span class="retro">R</span>` : import_lit16.nothing}
+								${p.retrograde ? import_lit17.html`<span class="retro">R</span>` : import_lit17.nothing}
 							</td>
 							<td>${p.sign ?? ""}</td>
 							<td>${p.signLord ?? ""}</td>
@@ -3649,7 +4156,7 @@ var RoxyKpPlanetsTable = class extends import_lit16.LitElement {
 };
 RoxyKpPlanetsTable.styles = [
   baseStyles,
-  import_lit16.css`
+  import_lit17.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3718,22 +4225,22 @@ RoxyKpPlanetsTable = __decorateClass([
 ], RoxyKpPlanetsTable);
 
 // packages/ui/src/components/kp-ruling-planets.ts
-var import_lit17 = require("lit");
+var import_lit18 = require("lit");
 var import_decorators15 = require("lit/decorators.js");
-var RoxyKpRulingPlanets = class extends import_lit17.LitElement {
+var RoxyKpRulingPlanets = class extends import_lit18.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit17.html`<div class="roxy-empty" role="status">No ruling planets data</div>`;
+      return import_lit18.html`<div class="roxy-empty" role="status">No ruling planets data</div>`;
     const d = this.data;
     const significators = d.significators ?? [];
-    return import_lit17.html`<div class="wrap" aria-label="KP ruling planets">
+    return import_lit18.html`<div class="wrap" aria-label="KP ruling planets">
 			<header>
 				<h2 class="title">KP ruling planets</h2>
-				${d.dayLord ? import_lit17.html`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : import_lit17.nothing}
+				${d.dayLord ? import_lit18.html`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : import_lit18.nothing}
 			</header>
 
 			<div class="groups">
@@ -3757,14 +4264,14 @@ var RoxyKpRulingPlanets = class extends import_lit17.LitElement {
 				</div>
 			</div>
 
-			${d.rulingPlanets?.length ? import_lit17.html`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
+			${d.rulingPlanets?.length ? import_lit18.html`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
 						<span class="rp-label">Ruling planets</span>
 						${d.rulingPlanets.map(
-      (p, i) => import_lit17.html`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
+      (p, i) => import_lit18.html`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
     )}
-					</div>` : import_lit17.nothing}
+					</div>` : import_lit18.nothing}
 
-			${significators.length ? import_lit17.html`<table aria-label="House significators">
+			${significators.length ? import_lit18.html`<table aria-label="House significators">
 						<thead>
 							<tr>
 								<th scope="col">Planet</th>
@@ -3773,19 +4280,19 @@ var RoxyKpRulingPlanets = class extends import_lit17.LitElement {
 						</thead>
 						<tbody>
 							${significators.map(
-      (s) => import_lit17.html`<tr>
+      (s) => import_lit18.html`<tr>
 									<td>${s.planet}</td>
 									<td>${(s.signifies ?? []).join(", ")}</td>
 								</tr>`
     )}
 						</tbody>
-					</table>` : import_lit17.nothing}
+					</table>` : import_lit18.nothing}
 		</div>`;
   }
 };
 RoxyKpRulingPlanets.styles = [
   baseStyles,
-  import_lit17.css`
+  import_lit18.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3891,7 +4398,7 @@ RoxyKpRulingPlanets = __decorateClass([
 ], RoxyKpRulingPlanets);
 
 // packages/ui/src/components/location-search.ts
-var import_lit18 = require("lit");
+var import_lit19 = require("lit");
 var import_decorators16 = require("lit/decorators.js");
 
 // packages/ui/src/utils/debounce.ts
@@ -3914,7 +4421,7 @@ function debounce(fn, wait) {
 }
 
 // packages/ui/src/components/location-search.ts
-var RoxyLocationSearch = class extends import_lit18.LitElement {
+var RoxyLocationSearch = class extends import_lit19.LitElement {
   constructor() {
     super(...arguments);
     this.endpoint = "https://roxyapi.com/api/v2/location/search";
@@ -4049,7 +4556,7 @@ var RoxyLocationSearch = class extends import_lit18.LitElement {
     );
   }
   render() {
-    return import_lit18.html`<div class="field">
+    return import_lit19.html`<div class="field">
 			<input
 				type="text"
 				role="combobox"
@@ -4066,14 +4573,14 @@ var RoxyLocationSearch = class extends import_lit18.LitElement {
       if (this.results.length > 0) this.isOpen = true;
     }}
 			/>
-			${this.isLoading ? import_lit18.html`<span class="spinner" role="status" aria-label="Loading"></span>` : import_lit18.nothing}
-			${this.isOpen ? import_lit18.html`<ul
+			${this.isLoading ? import_lit19.html`<span class="spinner" role="status" aria-label="Loading"></span>` : import_lit19.nothing}
+			${this.isOpen ? import_lit19.html`<ul
 						id="roxy-location-listbox"
 						class="results"
 						role="listbox"
 					>
-						${this.results.length === 0 ? import_lit18.html`<li class="empty" role="status">No cities found</li>` : this.results.map(
-      (city, idx) => import_lit18.html`<li role="presentation">
+						${this.results.length === 0 ? import_lit19.html`<li class="empty" role="status">No cities found</li>` : this.results.map(
+      (city, idx) => import_lit19.html`<li role="presentation">
 										<button
 											type="button"
 											class="option"
@@ -4087,7 +4594,7 @@ var RoxyLocationSearch = class extends import_lit18.LitElement {
 										>
 											<span class="city">${city.city}</span>
 											<span class="where"
-												>${city.province ? import_lit18.html`${city.province}, ` : ""}${city.country}</span
+												>${city.province ? import_lit19.html`${city.province}, ` : ""}${city.country}</span
 											>
 											<span class="tz"
 												>UTC${city.utcOffset >= 0 ? "+" : ""}${city.utcOffset}</span
@@ -4095,13 +4602,13 @@ var RoxyLocationSearch = class extends import_lit18.LitElement {
 										</button>
 									</li>`
     )}
-					</ul>` : import_lit18.nothing}
+					</ul>` : import_lit19.nothing}
 		</div>`;
   }
 };
 RoxyLocationSearch.styles = [
   baseStyles,
-  import_lit18.css`
+  import_lit19.css`
 			:host {
 				display: block;
 				position: relative;
@@ -4239,9 +4746,9 @@ RoxyLocationSearch = __decorateClass([
 ], RoxyLocationSearch);
 
 // packages/ui/src/components/moon-phase.ts
-var import_lit19 = require("lit");
+var import_lit20 = require("lit");
 var import_decorators17 = require("lit/decorators.js");
-var RoxyMoonPhase = class extends import_lit19.LitElement {
+var RoxyMoonPhase = class extends import_lit20.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4250,12 +4757,12 @@ var RoxyMoonPhase = class extends import_lit19.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit19.html`<div class="roxy-empty" role="status">No moon phase data</div>`;
+      return import_lit20.html`<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 import_lit19.html`<article
+      return import_lit20.html`<article
 				class="card"
 				aria-label="Moon phase calendar"
 			>
@@ -4265,46 +4772,46 @@ var RoxyMoonPhase = class extends import_lit19.LitElement {
 				</div>
 			</article>`;
     }
-    if (!("phase" in d)) return import_lit19.nothing;
+    if (!("phase" in d)) return import_lit20.nothing;
     return this.renderSingle(d);
   }
   renderSingle(d) {
     const emoji = phaseEmoji(d.phase);
-    return import_lit19.html`<article class="card" aria-label="Current moon phase">
+    return import_lit20.html`<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 ? import_lit19.html`<div class="date">${d.date}</div>` : import_lit19.nothing}
+					${d.date ? import_lit20.html`<div class="date">${d.date}</div>` : import_lit20.nothing}
 				</div>
 			</div>
 			<div class="stats">
-				${typeof d.illumination === "number" ? import_lit19.html`<div>
+				${typeof d.illumination === "number" ? import_lit20.html`<div>
 							<span>Illumination</span>
 							<strong>${formatIllumination(d.illumination)}</strong>
-						</div>` : import_lit19.nothing}
-				${typeof d.age === "number" ? import_lit19.html`<div>
+						</div>` : import_lit20.nothing}
+				${typeof d.age === "number" ? import_lit20.html`<div>
 							<span>Age</span>
 							<strong>${formatNumber(d.age, 1)} days</strong>
-						</div>` : import_lit19.nothing}
-				${d.sign ? import_lit19.html`<div>
+						</div>` : import_lit20.nothing}
+				${d.sign ? import_lit20.html`<div>
 							<span>Sign</span>
 							<strong>${d.sign}</strong>
-						</div>` : import_lit19.nothing}
-				${typeof d.distance === "number" ? import_lit19.html`<div>
+						</div>` : import_lit20.nothing}
+				${typeof d.distance === "number" ? import_lit20.html`<div>
 							<span>Distance</span>
 							<strong>${(d.distance / 1e3).toFixed(0)}k km</strong>
-						</div>` : import_lit19.nothing}
+						</div>` : import_lit20.nothing}
 			</div>
-			${d.meaning?.description ? import_lit19.html`<p class="meaning">${d.meaning.description}</p>` : import_lit19.nothing}
-			${d.meaning?.keywords?.length ? import_lit19.html`<div class="keywords">
-						${d.meaning.keywords.map((k) => import_lit19.html`<span>${k}</span>`)}
-					</div>` : import_lit19.nothing}
+			${d.meaning?.description ? import_lit20.html`<p class="meaning">${d.meaning.description}</p>` : import_lit20.nothing}
+			${d.meaning?.keywords?.length ? import_lit20.html`<div class="keywords">
+						${d.meaning.keywords.map((k) => import_lit20.html`<span>${k}</span>`)}
+					</div>` : import_lit20.nothing}
 		</article>`;
   }
   renderListItem(p) {
     const emoji = phaseEmoji(p.phase);
-    return import_lit19.html`<div class="list-item" role="listitem">
+    return import_lit20.html`<div class="list-item" role="listitem">
 			<span aria-hidden="true">${emoji}</span>
 			<span>${p.phase}</span>
 			<span>${p.date ?? ""}</span>
@@ -4313,7 +4820,7 @@ var RoxyMoonPhase = class extends import_lit19.LitElement {
 };
 RoxyMoonPhase.styles = [
   baseStyles,
-  import_lit19.css`
+  import_lit20.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -4416,50 +4923,50 @@ function formatIllumination(v) {
 }
 
 // packages/ui/src/components/nakshatra-card.ts
-var import_lit20 = require("lit");
+var import_lit21 = require("lit");
 var import_decorators18 = require("lit/decorators.js");
-var RoxyNakshatraCard = class extends import_lit20.LitElement {
+var RoxyNakshatraCard = class extends import_lit21.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit20.html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+      return import_lit21.html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
     const n = this.data;
     const remedies = n.remedies;
-    return import_lit20.html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+    return import_lit21.html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
 			<header class="head">
 				<h2 class="name">${n.name}</h2>
-				${typeof n.number === "number" ? import_lit20.html`<span class="number">Nakshatra ${n.number} of 27</span>` : import_lit20.nothing}
-				${n.range ? import_lit20.html`<span class="range">${n.range}</span>` : import_lit20.nothing}
+				${typeof n.number === "number" ? import_lit21.html`<span class="number">Nakshatra ${n.number} of 27</span>` : import_lit21.nothing}
+				${n.range ? import_lit21.html`<span class="range">${n.range}</span>` : import_lit21.nothing}
 			</header>
 
 			<dl class="facts">
-				${n.lord ? import_lit20.html`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : import_lit20.nothing}
-				${n.deity ? import_lit20.html`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : import_lit20.nothing}
-				${n.symbol ? import_lit20.html`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : import_lit20.nothing}
+				${n.lord ? import_lit21.html`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : import_lit21.nothing}
+				${n.deity ? import_lit21.html`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : import_lit21.nothing}
+				${n.symbol ? import_lit21.html`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : import_lit21.nothing}
 			</dl>
 
-			${n.characteristics ? import_lit20.html`<div class="section">
+			${n.characteristics ? import_lit21.html`<div class="section">
 						<h3>Characteristics</h3>
 						<p>${n.characteristics}</p>
-					</div>` : import_lit20.nothing}
+					</div>` : import_lit21.nothing}
 
-			${remedies ? import_lit20.html`<div class="section">
+			${remedies ? import_lit21.html`<div class="section">
 						<h3>Remedies</h3>
 						<div class="remedies">
-							${remedies.mantras ? import_lit20.html`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : import_lit20.nothing}
-							${remedies.gemstones ? import_lit20.html`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : import_lit20.nothing}
-							${remedies.rituals ? import_lit20.html`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : import_lit20.nothing}
+							${remedies.mantras ? import_lit21.html`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : import_lit21.nothing}
+							${remedies.gemstones ? import_lit21.html`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : import_lit21.nothing}
+							${remedies.rituals ? import_lit21.html`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : import_lit21.nothing}
 						</div>
-					</div>` : import_lit20.nothing}
+					</div>` : import_lit21.nothing}
 		</article>`;
   }
 };
 RoxyNakshatraCard.styles = [
   baseStyles,
-  import_lit20.css`
+  import_lit21.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -4545,7 +5052,7 @@ RoxyNakshatraCard = __decorateClass([
 ], RoxyNakshatraCard);
 
 // packages/ui/src/components/natal-chart.ts
-var import_lit21 = require("lit");
+var import_lit22 = require("lit");
 var import_decorators19 = require("lit/decorators.js");
 var SIZE = 420;
 var CENTER = SIZE / 2;
@@ -4555,7 +5062,7 @@ var HOUSE_R = 120;
 var PLANET_R = 96;
 var ANGLE_TICK_R = 178;
 var ANGLE_LABEL_R = 196;
-var RoxyNatalChart = class extends import_lit21.LitElement {
+var RoxyNatalChart = class extends import_lit22.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4577,16 +5084,16 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
   }
   render() {
     if (!this.data)
-      return import_lit21.html`<div class="roxy-empty" role="status">No chart data</div>`;
+      return import_lit22.html`<div class="roxy-empty" role="status">No chart data</div>`;
     const planets = this.getPlanets();
     const aspects = this.data.aspects ?? [];
     const view = this.view;
-    return import_lit21.html`<div class="wrap">
+    return import_lit22.html`<div class="wrap">
 			<header>
 				<h2 class="title">Natal chart</h2>
-				${this.data.birthDetails ? import_lit21.html`<div class="meta">
+				${this.data.birthDetails ? import_lit22.html`<div class="meta">
 							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
-						</div>` : import_lit21.nothing}
+						</div>` : import_lit22.nothing}
 			</header>
 			<div
 				class="tablist"
@@ -4595,7 +5102,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
 				@keydown=${this.onTabKeyDown}
 			>
 				${["wheel", "grid"].map(
-      (t) => import_lit21.html`<button
+      (t) => import_lit22.html`<button
 						class="tab"
 						role="tab"
 						id="tab-${t}"
@@ -4616,7 +5123,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
 			<div class="legend">
 				<span>${planets.length} planets</span>
 				<span>${aspects.length} aspects</span>
-				${this.data.houseSystem ? import_lit21.html`<span>${this.data.houseSystem} houses</span>` : import_lit21.nothing}
+				${this.data.houseSystem ? import_lit22.html`<span>${this.data.houseSystem} houses</span>` : import_lit22.nothing}
 				<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>
@@ -4634,7 +5141,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
     });
   }
   renderWheel(planets, aspects) {
-    return import_lit21.html`<svg
+    return import_lit22.html`<svg
 			viewBox="0 0 ${SIZE} ${SIZE}"
 			role="img"
 			aria-label="Natal chart wheel with twelve houses, planets, and aspects"
@@ -4667,35 +5174,35 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       byPair.set(k, a);
     }
     if (names.length === 0)
-      return import_lit21.html`<p class="roxy-empty" role="status">No planets to grid</p>`;
-    return import_lit21.html`<div class="grid-scroll">
+      return import_lit22.html`<p class="roxy-empty" role="status">No planets to grid</p>`;
+    return import_lit22.html`<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 import_lit21.html`<th scope="col" title=${n}>${g}</th>`;
+      return import_lit22.html`<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 import_lit21.html`<tr>
+      return import_lit22.html`<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 import_lit21.html`<td class="empty"></td>`;
+        if (!a) return import_lit22.html`<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 import_lit21.html`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
+        return import_lit22.html`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
 									<span class="asp">${sym}</span>
 								</td>`;
       })}
-							${names.slice(ri + 1, -1).map(() => import_lit21.html`<td class="empty"></td>`)}
+							${names.slice(ri + 1, -1).map(() => import_lit22.html`<td class="empty"></td>`)}
 						</tr>`;
     })}
 				</tbody>
@@ -4728,7 +5235,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
     const tickInner = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
     const tickOuter = polarToCartesian(CENTER, CENTER, ANGLE_TICK_R, angle);
     const labelPos = polarToCartesian(CENTER, CENTER, ANGLE_LABEL_R, angle);
-    return import_lit21.svg`
+    return import_lit22.svg`
 			<g>
 				<line class="angle-tick" x1=${tickInner.x} y1=${tickInner.y} x2=${tickOuter.x} y2=${tickOuter.y} />
 				<text class="angle-marker" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">${label}</text>
@@ -4742,14 +5249,14 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       const angle = this.toAngle(lon);
       const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
       const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
-      return import_lit21.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
+      return import_lit22.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
     });
   }
   renderSigns() {
     return SIGNS_ORDER.map((sign, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
-      return import_lit21.svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
+      return import_lit22.svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
     });
   }
   renderHouseNumbers() {
@@ -4767,7 +5274,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
           HOUSE_R - 12,
           this.toAngle(mid)
         );
-        return import_lit21.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${house.number}</text>`;
+        return import_lit22.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${house.number}</text>`;
       });
     }
     const ascSignIndex = Math.floor(this.getAscendant() / 30);
@@ -4775,7 +5282,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, HOUSE_R - 12, angle);
       const houseNum = (i - ascSignIndex + 12) % 12 + 1;
-      return import_lit21.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
+      return import_lit22.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
     });
   }
   /**
@@ -4792,7 +5299,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       const a = polarToCartesian(CENTER, CENTER, inner, angle);
       const b = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
       ticks.push(
-        import_lit21.svg`<line class=${isMajor ? "tick tick-major" : "tick"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} stroke-width=${isMajor ? 1 : 0.5} />`
+        import_lit22.svg`<line class=${isMajor ? "tick tick-major" : "tick"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} stroke-width=${isMajor ? 1 : 0.5} />`
       );
     }
     return ticks;
@@ -4803,52 +5310,84 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
    */
   renderCuspDegrees() {
     const houses = this.data?.houses ?? [];
-    if (houses.length !== 12) return import_lit21.nothing;
+    if (houses.length !== 12) return import_lit22.nothing;
     return houses.map((house) => {
       const angle = this.toAngle(house.longitude);
       const pos = polarToCartesian(CENTER, CENTER, HOUSE_R + 9, angle);
       const sp = longitudeToSignPosition(house.longitude);
-      return import_lit21.svg`<text class="cusp-deg" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${String(sp.minute).padStart(2, "0")}'</text>`;
+      return import_lit22.svg`<text class="cusp-deg" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${String(sp.minute).padStart(2, "0")}'</text>`;
     });
   }
   renderPlanets(planets) {
-    return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return import_lit21.nothing;
-      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")}'`;
-      return import_lit21.svg`<g>
+      const offset = Math.abs(displayLon - trueLon) > 0.5;
+      return import_lit22.svg`<g>
+				${offset ? import_lit22.svg`<line class="planet-leader" x1=${rimPos.x} y1=${rimPos.y} x2=${leaderInner.x} y2=${leaderInner.y} />` : import_lit22.nothing}
 				<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 ? import_lit21.svg`<tspan class="retro"> ℞</tspan>` : import_lit21.nothing}</text>
+				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? import_lit22.svg`<tspan class="retro"> ℞</tspan>` : import_lit22.nothing}</text>
 			</g>`;
     });
   }
   renderDetails() {
     const summary = this.data?.summary;
     const ai = this.data?.aspectsInterpretation;
-    if (!summary && !ai) return import_lit21.nothing;
+    if (!summary && !ai) return import_lit22.nothing;
     const retrogrades = summary?.retrogradePlanets ?? [];
-    return import_lit21.html`<div class="details">
-			${summary?.dominantElement || summary?.dominantModality ? import_lit21.html`<div class="pill-row">
-						${summary.dominantElement ? import_lit21.html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : import_lit21.nothing}
-						${summary.dominantModality ? import_lit21.html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : import_lit21.nothing}
-					</div>` : import_lit21.nothing}
-			${ai ? import_lit21.html`<div class="pill-row">
+    return import_lit22.html`<div class="details">
+			${summary?.dominantElement || summary?.dominantModality ? import_lit22.html`<div class="pill-row">
+						${summary.dominantElement ? import_lit22.html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : import_lit22.nothing}
+						${summary.dominantModality ? import_lit22.html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : import_lit22.nothing}
+					</div>` : import_lit22.nothing}
+			${ai ? import_lit22.html`<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>` : import_lit21.nothing}
-			${retrogrades.length > 0 ? import_lit21.html`<div class="pill-row">
+					</div>` : import_lit22.nothing}
+			${retrogrades.length > 0 ? import_lit22.html`<div class="pill-row">
 						${retrogrades.map((p) => {
       const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
-      return import_lit21.html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+      return import_lit22.html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
     })}
-					</div>` : import_lit21.nothing}
-			${ai?.summary ? import_lit21.html`<p class="summary">${ai.summary}</p>` : import_lit21.nothing}
+					</div>` : import_lit22.nothing}
+			${ai?.summary ? import_lit22.html`<p class="summary">${ai.summary}</p>` : import_lit22.nothing}
 			${this.renderElementModalityGrid()}
 		</div>`;
   }
@@ -4860,7 +5399,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
    */
   renderElementModalityGrid() {
     const planets = this.getPlanets();
-    if (planets.length === 0) return import_lit21.nothing;
+    if (planets.length === 0) return import_lit22.nothing;
     const ELEMENTS = ["Fire", "Earth", "Air", "Water"];
     const MODALITIES = ["Cardinal", "Fixed", "Mutable"];
     const order = SIGNS_ORDER;
@@ -4875,11 +5414,11 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? capitalize(p.name).slice(0, 2);
       cells[el]?.[mod]?.push(glyph);
     }
-    return import_lit21.html`<table class="em-grid" aria-label="Element and modality distribution">
+    return import_lit22.html`<table class="em-grid" aria-label="Element and modality distribution">
 			<thead>
 				<tr>
 					<th></th>
-					${MODALITIES.map((m) => import_lit21.html`<th scope="col">${m.slice(0, 3)}</th>`)}
+					${MODALITIES.map((m) => import_lit22.html`<th scope="col">${m.slice(0, 3)}</th>`)}
 					<th scope="col">Total</th>
 				</tr>
 			</thead>
@@ -4889,10 +5428,10 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
         (s, m) => s + (cells[el]?.[m]?.length ?? 0),
         0
       );
-      return import_lit21.html`<tr>
+      return import_lit22.html`<tr>
 						<th scope="row">${el}</th>
 						${MODALITIES.map(
-        (m) => import_lit21.html`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
+        (m) => import_lit22.html`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
       )}
 						<td class="em-total">${rowTotal}</td>
 					</tr>`;
@@ -4900,7 +5439,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
 				<tr>
 					<th scope="row">Total</th>
 					${MODALITIES.map(
-      (m) => import_lit21.html`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
+      (m) => import_lit22.html`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
     )}
 					<td class="em-total">${planets.length}</td>
 				</tr>
@@ -4909,19 +5448,19 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
   }
   renderInterpretations() {
     const planets = this.getPlanets().filter((p) => p.interpretation);
-    if (planets.length === 0) return import_lit21.nothing;
-    return import_lit21.html`<section class="interpretations">
+    if (planets.length === 0) return import_lit22.nothing;
+    return import_lit22.html`<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 import_lit21.html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
+      return import_lit22.html`<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 ? import_lit21.html`<p class="interp-summary">${interp.summary}</p>` : import_lit21.nothing}
-						${interp.detailed ? import_lit21.html`<p class="interp-detail">${interp.detailed}</p>` : import_lit21.nothing}
-						${interp.keywords?.length ? import_lit21.html`<div class="interp-keywords">${interp.keywords.map((k) => import_lit21.html`<span class="kw">${k}</span>`)}</div>` : import_lit21.nothing}
+						${interp.summary ? import_lit22.html`<p class="interp-summary">${interp.summary}</p>` : import_lit22.nothing}
+						${interp.detailed ? import_lit22.html`<p class="interp-detail">${interp.detailed}</p>` : import_lit22.nothing}
+						${interp.keywords?.length ? import_lit22.html`<div class="interp-keywords">${interp.keywords.map((k) => import_lit22.html`<span class="kw">${k}</span>`)}</div>` : import_lit22.nothing}
 					</div>
 				</details>`;
     })}
@@ -4937,7 +5476,7 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
     return aspects.map((a) => {
       const l1 = planetMap.get(capitalize(a.planet1));
       const l2 = planetMap.get(capitalize(a.planet2));
-      if (l1 === void 0 || l2 === void 0) return import_lit21.nothing;
+      if (l1 === void 0 || l2 === void 0) return import_lit22.nothing;
       const p1 = polarToCartesian(
         CENTER,
         CENTER,
@@ -4953,13 +5492,13 @@ var RoxyNatalChart = class extends import_lit21.LitElement {
       const aspectName = normalizeAspect(a);
       const aspectClass = ASPECT_CLASS[aspectName] ?? "aspect-other";
       const orbLabel = formatNumber(a.orb, 1);
-      return import_lit21.svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
+      return import_lit22.svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
     });
   }
 };
 RoxyNatalChart.styles = [
   baseStyles,
-  import_lit21.css`
+  import_lit22.css`
 			.wrap {
 				width: 100%;
 				display: grid;
@@ -4981,7 +5520,8 @@ RoxyNatalChart.styles = [
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 360px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
 				height: auto;
 				margin: 0 auto;
 			}
@@ -5010,10 +5550,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;
@@ -5288,9 +5851,9 @@ RoxyNatalChart = __decorateClass([
 ], RoxyNatalChart);
 
 // packages/ui/src/components/numerology-card.ts
-var import_lit22 = require("lit");
+var import_lit23 = require("lit");
 var import_decorators20 = require("lit/decorators.js");
-var RoxyNumerologyCard = class extends import_lit22.LitElement {
+var RoxyNumerologyCard = class extends import_lit23.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5299,7 +5862,7 @@ var RoxyNumerologyCard = class extends import_lit22.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit22.html`<div class="roxy-empty" role="status">No numerology data</div>`;
+      return import_lit23.html`<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);
@@ -5310,61 +5873,61 @@ var RoxyNumerologyCard = class extends import_lit22.LitElement {
   }
   renderNumberCard(d, headerLabel) {
     const keywords = d.meaning?.keywords ?? [];
-    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit23.html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.number === "number" ? import_lit22.html`<div class="numeral">${d.number}</div>` : import_lit22.nothing}
+				${typeof d.number === "number" ? import_lit23.html`<div class="numeral">${d.number}</div>` : import_lit23.nothing}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.meaning?.title ? import_lit22.html`<h2 class="title">${d.meaning.title}</h2>` : import_lit22.nothing}
+					${d.meaning?.title ? import_lit23.html`<h2 class="title">${d.meaning.title}</h2>` : import_lit23.nothing}
 				</div>
 			</div>
-			${d.meaning?.description ? import_lit22.html`<p class="meaning">${d.meaning.description}</p>` : import_lit22.nothing}
-			${d.calculation ? import_lit22.html`<pre class="calc">${d.calculation}</pre>` : import_lit22.nothing}
-			${keywords.length > 0 ? import_lit22.html`<div class="chips">
-						${keywords.map((k) => import_lit22.html`<span>${k}</span>`)}
-					</div>` : import_lit22.nothing}
-			${d.hasKarmicDebt && d.karmicDebtNumber ? import_lit22.html`<div class="karmic">
+			${d.meaning?.description ? import_lit23.html`<p class="meaning">${d.meaning.description}</p>` : import_lit23.nothing}
+			${d.calculation ? import_lit23.html`<pre class="calc">${d.calculation}</pre>` : import_lit23.nothing}
+			${keywords.length > 0 ? import_lit23.html`<div class="chips">
+						${keywords.map((k) => import_lit23.html`<span>${k}</span>`)}
+					</div>` : import_lit23.nothing}
+			${d.hasKarmicDebt && d.karmicDebtNumber ? import_lit23.html`<div class="karmic">
 						Karmic debt ${d.karmicDebtNumber}.
 						${karmicDebtText(d.karmicDebtMeaning)}
-					</div>` : import_lit22.nothing}
+					</div>` : import_lit23.nothing}
 		</article>`;
   }
   renderPersonalYear(d, headerLabel) {
-    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit23.html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.personalYear === "number" ? import_lit22.html`<div class="numeral">${d.personalYear}</div>` : import_lit22.nothing}
+				${typeof d.personalYear === "number" ? import_lit23.html`<div class="numeral">${d.personalYear}</div>` : import_lit23.nothing}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.theme ? import_lit22.html`<h2 class="title">${d.theme}</h2>` : import_lit22.nothing}
+					${d.theme ? import_lit23.html`<h2 class="title">${d.theme}</h2>` : import_lit23.nothing}
 				</div>
 			</div>
-			${d.forecast ? import_lit22.html`<p class="meaning">${d.forecast}</p>` : import_lit22.nothing}
-			${d.advice ? import_lit22.html`<p>${d.advice}</p>` : import_lit22.nothing}
+			${d.forecast ? import_lit23.html`<p class="meaning">${d.forecast}</p>` : import_lit23.nothing}
+			${d.advice ? import_lit23.html`<p>${d.advice}</p>` : import_lit23.nothing}
 		</article>`;
   }
   renderChart(d, headerLabel) {
     const cores = Object.entries(d.coreNumbers).filter(
       ([, v]) => v !== null && v !== void 0
     );
-    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit23.html`<article class="card" aria-label=${headerLabel}>
 			<div>
 				<p class="label">${headerLabel}</p>
-				${d.profile?.name ? import_lit22.html`<h2 class="title">${d.profile.name}</h2>` : import_lit22.nothing}
+				${d.profile?.name ? import_lit23.html`<h2 class="title">${d.profile.name}</h2>` : import_lit23.nothing}
 			</div>
-			${cores.length > 0 ? import_lit22.html`<div class="cores">
+			${cores.length > 0 ? import_lit23.html`<div class="cores">
 						${cores.map(
-      ([k, v]) => import_lit22.html`<div class="item">
+      ([k, v]) => import_lit23.html`<div class="item">
 								<span>${humanize(k)}</span>
 								<strong>${v.number ?? ""}</strong>
 							</div>`
     )}
-					</div>` : import_lit22.nothing}
+					</div>` : import_lit23.nothing}
 		</article>`;
   }
 };
 RoxyNumerologyCard.styles = [
   baseStyles,
-  import_lit22.css`
+  import_lit23.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -5483,9 +6046,9 @@ function karmicDebtText(value) {
 }
 
 // packages/ui/src/components/panchang-table.ts
-var import_lit23 = require("lit");
+var import_lit24 = require("lit");
 var import_decorators21 = require("lit/decorators.js");
-var RoxyPanchangTable = class extends import_lit23.LitElement {
+var RoxyPanchangTable = class extends import_lit24.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5494,7 +6057,7 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit23.html`<div class="roxy-empty" role="status">No panchang data</div>`;
+      return import_lit24.html`<div class="roxy-empty" role="status">No panchang data</div>`;
     const detailed = "sunrise" in d ? d : null;
     const fivefold = [
       ["Tithi", this.formatPart(d.tithi)],
@@ -5517,7 +6080,8 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
       ["Yamaganda", detailed.yamaganda],
       ["Gulika", detailed.gulika]
     ] : [];
-    return import_lit23.html`<div class="wrap" aria-label="Panchang">
+    const transitions = detailed && "transitions" in detailed ? detailed.transitions : void 0;
+    return import_lit24.html`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
 				<span class="date">${detailed ? formatDate(detailed.date) : ""}</span>
@@ -5525,35 +6089,46 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
 			<table>
 				<tbody>
 					${fivefold.map(
-      ([k, v]) => import_lit23.html`<tr>
+      ([k, v]) => import_lit24.html`<tr>
 							<th>${k}</th>
 							<td>${v}</td>
 						</tr>`
     )}
-					${detailed?.sunrise ? import_lit23.html`<tr>
+					${detailed?.sunrise ? import_lit24.html`<tr>
 								<th>Sunrise</th>
 								<td>${formatTime(detailed.sunrise)}</td>
-							</tr>` : import_lit23.nothing}
-					${detailed?.sunset ? import_lit23.html`<tr>
+							</tr>` : import_lit24.nothing}
+					${detailed?.sunset ? import_lit24.html`<tr>
 								<th>Sunset</th>
 								<td>${formatTime(detailed.sunset)}</td>
-							</tr>` : import_lit23.nothing}
-					${detailed?.moonrise ? import_lit23.html`<tr>
+							</tr>` : import_lit24.nothing}
+					${detailed?.moonrise ? import_lit24.html`<tr>
 								<th>Moonrise</th>
 								<td>${formatTime(detailed.moonrise)}</td>
-							</tr>` : import_lit23.nothing}
-					${detailed?.moonset ? import_lit23.html`<tr>
+							</tr>` : import_lit24.nothing}
+					${detailed?.moonset ? import_lit24.html`<tr>
 								<th>Moonset</th>
 								<td>${formatTime(detailed.moonset)}</td>
-							</tr>` : import_lit23.nothing}
+							</tr>` : import_lit24.nothing}
 				</tbody>
 			</table>
-			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? import_lit23.html`
+			${transitions ? import_lit24.html`
+						<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>
+					` : import_lit24.nothing}
+			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? import_lit24.html`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
 								${muhurtas.filter(([, v]) => !!v).map(
-      ([k, v]) => import_lit23.html`<tr>
+      ([k, v]) => import_lit24.html`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
@@ -5564,16 +6139,25 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
 						<table>
 							<tbody>
 								${inauspicious.filter(([, v]) => !!v).map(
-      ([k, v]) => import_lit23.html`<tr>
+      ([k, v]) => import_lit24.html`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
     )}
 							</tbody>
 						</table>
-					` : import_lit23.nothing}
+					` : import_lit24.nothing}
 		</div>`;
   }
+  renderTransitionRow(label, t) {
+    if (!t?.endsAt) return import_lit24.nothing;
+    const when = formatTime(t.endsAt);
+    const next = t.next ? ` \u2192 ${t.next}` : "";
+    return import_lit24.html`<tr>
+			<th>${label}</th>
+			<td>ends ${when}${next}</td>
+		</tr>`;
+  }
   formatPart(v) {
     if (!v) return "";
     if (typeof v === "string") return v;
@@ -5581,7 +6165,8 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
       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(" ");
@@ -5591,7 +6176,7 @@ var RoxyPanchangTable = class extends import_lit23.LitElement {
 };
 RoxyPanchangTable.styles = [
   baseStyles,
-  import_lit23.css`
+  import_lit24.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -5662,7 +6247,7 @@ RoxyPanchangTable = __decorateClass([
 ], RoxyPanchangTable);
 
 // packages/ui/src/components/shadbala-table.ts
-var import_lit24 = require("lit");
+var import_lit25 = require("lit");
 var import_decorators22 = require("lit/decorators.js");
 var BALA_COMPONENTS = [
   { key: "sthanaBala", label: "Sthana", color: "var(--roxy-info, #0284c7)" },
@@ -5676,19 +6261,19 @@ var BALA_COMPONENTS = [
   },
   { key: "drikBala", label: "Drik", color: "var(--roxy-danger, #dc2626)" }
 ];
-var RoxyShadbalaTable = class extends import_lit24.LitElement {
+var RoxyShadbalaTable = class extends import_lit25.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.planets?.length) {
-      return import_lit24.html`<div class="roxy-empty" role="status">No shadbala data</div>`;
+      return import_lit25.html`<div class="roxy-empty" role="status">No shadbala data</div>`;
     }
     const sorted = [...this.data.planets].sort(
       (a, b) => a.relativeRank - b.relativeRank
     );
-    return import_lit24.html`<div class="wrap" aria-label="Shadbala planetary strength">
+    return import_lit25.html`<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>
@@ -5700,7 +6285,7 @@ var RoxyShadbalaTable = class extends import_lit24.LitElement {
 
 			<div class="legend" aria-label="Strength component legend">
 				${BALA_COMPONENTS.map(
-      (b) => import_lit24.html`<div class="legend-row">
+      (b) => import_lit25.html`<div class="legend-row">
 						<span
 							class="legend-swatch"
 							style="background: ${b.color}"
@@ -5720,7 +6305,7 @@ var RoxyShadbalaTable = class extends import_lit24.LitElement {
     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 import_lit24.html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+    return import_lit25.html`<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}
@@ -5730,18 +6315,18 @@ var RoxyShadbalaTable = class extends import_lit24.LitElement {
 				<div class="bar" role="img" aria-label="Strength components for ${p.planet}">
 					${total > 0 ? BALA_COMPONENTS.map((b, i) => {
       const v = values[i];
-      if (v <= 0) return import_lit24.nothing;
+      if (v <= 0) return import_lit25.nothing;
       const grow = v / total * 100;
-      return import_lit24.html`<div
+      return import_lit25.html`<div
 									class="bar-segment"
 									style="flex-grow: ${grow}; background: ${b.color};"
 									title="${b.label}: ${formatNumber(v, 1)}"
 								></div>`;
-    }) : import_lit24.nothing}
+    }) : import_lit25.nothing}
 				</div>
 			</div>
 			<div class="pills">
-				${rupasStr ? import_lit24.html`<span class="rupas-label">${rupasStr}</span>` : import_lit24.nothing}
+				${rupasStr ? import_lit25.html`<span class="rupas-label">${rupasStr}</span>` : import_lit25.nothing}
 				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
 			</div>
 		</div>`;
@@ -5749,7 +6334,7 @@ var RoxyShadbalaTable = class extends import_lit24.LitElement {
 };
 RoxyShadbalaTable.styles = [
   baseStyles,
-  import_lit24.css`
+  import_lit25.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5905,7 +6490,7 @@ RoxyShadbalaTable = __decorateClass([
 ], RoxyShadbalaTable);
 
 // packages/ui/src/components/synastry-chart.ts
-var import_lit25 = require("lit");
+var import_lit26 = require("lit");
 var import_decorators23 = require("lit/decorators.js");
 var SIZE2 = 360;
 var CENTER2 = SIZE2 / 2;
@@ -5913,14 +6498,14 @@ var OUTER_R2 = 170;
 var SIGN_R2 = 154;
 var P1_R = 124;
 var P2_R = 96;
-var RoxySynastryChart = class extends import_lit25.LitElement {
+var RoxySynastryChart = class extends import_lit26.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit25.html`<div class="roxy-empty" role="status">No synastry data</div>`;
+      return import_lit26.html`<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 ?? [];
@@ -5931,15 +6516,15 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
     const challenges = analysis?.challenges ?? [];
     const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
     if (!hasPlanets) {
-      return import_lit25.html`<div
+      return import_lit26.html`<div
 				class="wrap"
 				aria-label="Synastry compatibility chart"
 			>
 				<div class="head">
 					<h2 class="title">Synastry</h2>
-					${typeof score === "number" ? import_lit25.html`<span class="score" aria-label=${`Score ${score} of 100`}
+					${typeof score === "number" ? import_lit26.html`<span class="score" aria-label=${`Score ${score} of 100`}
 								>${score} / 100</span
-							>` : import_lit25.nothing}
+							>` : import_lit26.nothing}
 				</div>
 				<div class="missing-planets" role="status">
 					Synastry response missing planet positions. Pass
@@ -5947,33 +6532,33 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
 					<code>person2.planets</code> arrays from the natal-chart endpoint, or
 					use the <code>&lt;roxy-data&gt;</code> fallback.
 				</div>
-				${summaryText ? import_lit25.html`<p class="summary">${summaryText}</p>` : import_lit25.nothing}
-				${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit25.nothing}
-				${strengths.length > 0 || challenges.length > 0 ? import_lit25.html`<div class="lists">
-							${strengths.length ? import_lit25.html`<div>
+				${summaryText ? import_lit26.html`<p class="summary">${summaryText}</p>` : import_lit26.nothing}
+				${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit26.nothing}
+				${strengths.length > 0 || challenges.length > 0 ? import_lit26.html`<div class="lists">
+							${strengths.length ? import_lit26.html`<div>
 										<h3>Strengths</h3>
 										<ul>
-											${strengths.map((s) => import_lit25.html`<li>${s}</li>`)}
+											${strengths.map((s) => import_lit26.html`<li>${s}</li>`)}
 										</ul>
-									</div>` : import_lit25.nothing}
-							${challenges.length ? import_lit25.html`<div>
+									</div>` : import_lit26.nothing}
+							${challenges.length ? import_lit26.html`<div>
 										<h3>Challenges</h3>
 										<ul>
-											${challenges.map((s) => import_lit25.html`<li>${s}</li>`)}
+											${challenges.map((s) => import_lit26.html`<li>${s}</li>`)}
 										</ul>
-									</div>` : import_lit25.nothing}
-						</div>` : import_lit25.nothing}
+									</div>` : import_lit26.nothing}
+						</div>` : import_lit26.nothing}
 			</div>`;
     }
-    return import_lit25.html`<div
+    return import_lit26.html`<div
 			class="wrap"
 			aria-label="Synastry compatibility chart"
 		>
 			<div class="head">
 				<h2 class="title">Synastry</h2>
-				${typeof score === "number" ? import_lit25.html`<span class="score" aria-label=${`Score ${score} of 100`}
+				${typeof score === "number" ? import_lit26.html`<span class="score" aria-label=${`Score ${score} of 100`}
 							>${score} / 100</span
-						>` : import_lit25.nothing}
+						>` : import_lit26.nothing}
 			</div>
 			<svg
 				viewBox="0 0 ${SIZE2} ${SIZE2}"
@@ -6004,7 +6589,8 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
 				/>
 				${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>
@@ -6012,22 +6598,22 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
 				<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 ? import_lit25.html`<p class="summary">${summaryText}</p>` : import_lit25.nothing}
-			${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit25.nothing}
-			${strengths.length > 0 || challenges.length > 0 ? import_lit25.html`<div class="lists">
-						${strengths.length ? import_lit25.html`<div>
+			${summaryText ? import_lit26.html`<p class="summary">${summaryText}</p>` : import_lit26.nothing}
+			${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit26.nothing}
+			${strengths.length > 0 || challenges.length > 0 ? import_lit26.html`<div class="lists">
+						${strengths.length ? import_lit26.html`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${strengths.map((s) => import_lit25.html`<li>${s}</li>`)}
+										${strengths.map((s) => import_lit26.html`<li>${s}</li>`)}
 									</ul>
-								</div>` : import_lit25.nothing}
-						${challenges.length ? import_lit25.html`<div>
+								</div>` : import_lit26.nothing}
+						${challenges.length ? import_lit26.html`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${challenges.map((s) => import_lit25.html`<li>${s}</li>`)}
+										${challenges.map((s) => import_lit26.html`<li>${s}</li>`)}
 									</ul>
-								</div>` : import_lit25.nothing}
-					</div>` : import_lit25.nothing}
+								</div>` : import_lit26.nothing}
+					</div>` : import_lit26.nothing}
 		</div>`;
   }
   toAngle(longitude) {
@@ -6038,29 +6624,66 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
       const angle = this.toAngle(i * 30);
       const start = polarToCartesian(CENTER2, CENTER2, P2_R - 14, angle);
       const end = polarToCartesian(CENTER2, CENTER2, OUTER_R2, angle);
-      return import_lit25.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
+      return import_lit26.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
     });
   }
   renderSigns() {
     return SIGNS_ORDER.map((s, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER2, CENTER2, SIGN_R2, angle);
-      return import_lit25.svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
+      return import_lit26.svg`<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 import_lit25.nothing;
-      const pos = polarToCartesian(
+      if (!Number.isFinite(p.longitude)) return import_lit26.nothing;
+      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 import_lit25.svg`<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 import_lit26.svg`<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 ? import_lit26.svg`<tspan class="retro"> ℞</tspan>` : import_lit26.nothing}</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(import_lit26.svg`<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);
@@ -6073,17 +6696,17 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
     return aspects.map((a) => {
       const l1 = longitudeOf(p1, a.planet1);
       const l2 = longitudeOf(p2, a.planet2);
-      if (l1 === void 0 || l2 === void 0) return import_lit25.nothing;
+      if (l1 === void 0 || l2 === void 0) return import_lit26.nothing;
       const out = polarToCartesian(CENTER2, CENTER2, P1_R - 12, this.toAngle(l1));
       const inn = polarToCartesian(CENTER2, CENTER2, P2_R + 8, this.toAngle(l2));
       const aspectName = normalizeAspect(a);
       const cls = ASPECT_CLASS[aspectName] ?? "aspect-other";
       const orbLabel = formatNumber(a.orb, 1);
-      return import_lit25.svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
+      return import_lit26.svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
     });
   }
   renderAspects(aspects) {
-    return import_lit25.html`<table>
+    return import_lit26.html`<table>
 			<thead>
 				<tr>
 					<th>Planet 1</th>
@@ -6095,7 +6718,7 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
 			</thead>
 			<tbody>
 				${aspects.slice(0, 12).map(
-      (a) => import_lit25.html`<tr>
+      (a) => import_lit26.html`<tr>
 						<td>${a.planet1}</td>
 						<td>${a.planet2}</td>
 						<td>${normalizeAspect(a) || ""}</td>
@@ -6109,7 +6732,7 @@ var RoxySynastryChart = class extends import_lit25.LitElement {
 };
 RoxySynastryChart.styles = [
   baseStyles,
-  import_lit25.css`
+  import_lit26.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6139,7 +6762,9 @@ RoxySynastryChart.styles = [
 			svg {
 				display: block;
 				width: 100%;
-				max-width: 400px;
+				max-width: 560px;
+				aspect-ratio: 1 / 1;
+				height: auto;
 				margin: 0 auto;
 			}
 
@@ -6161,6 +6786,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;
@@ -6275,9 +6925,9 @@ function formatStrength(s) {
 }
 
 // packages/ui/src/components/tarot-card.ts
-var import_lit26 = require("lit");
+var import_lit27 = require("lit");
 var import_decorators24 = require("lit/decorators.js");
-var RoxyTarotCard = class extends import_lit26.LitElement {
+var RoxyTarotCard = class extends import_lit27.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -6289,7 +6939,7 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit26.html`<div class="roxy-empty" role="status">No tarot data</div>`;
+      return import_lit27.html`<div class="roxy-empty" role="status">No tarot data</div>`;
     if ("card" in d) return this.renderDailyCard(d);
     return this.renderFullCard(d);
   }
@@ -6297,9 +6947,9 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
     const card = d.card;
     const isReversed = this.flipped !== Boolean(card.reversed);
     const keywords = card.keywords ?? [];
-    return import_lit26.html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
+    return import_lit27.html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${card.imageUrl ? import_lit26.html`<img
+				${card.imageUrl ? import_lit27.html`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${card.imageUrl}
 							alt=${card.name ?? "Tarot card"}
@@ -6311,7 +6961,7 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
         this.toggleFlip();
       }
     }}
-						/>` : import_lit26.html`<div
+						/>` : import_lit27.html`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -6320,15 +6970,15 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
 			</div>
 			<div>
 				<div class="meta">
-					${card.arcana ? import_lit26.html`${card.arcana} arcana` : import_lit26.nothing}
-					${isReversed ? import_lit26.html` · reversed` : import_lit26.nothing}
+					${card.arcana ? import_lit27.html`${card.arcana} arcana` : import_lit27.nothing}
+					${isReversed ? import_lit27.html` · reversed` : import_lit27.nothing}
 				</div>
 				<h2 class="title">${card.name ?? "Tarot card"}</h2>
-				${d.dailyMessage ? import_lit26.html`<p class="message">${d.dailyMessage}</p>` : import_lit26.nothing}
-				${card.meaning ? import_lit26.html`<p>${card.meaning}</p>` : import_lit26.nothing}
-				${keywords.length > 0 ? import_lit26.html`<div class="chips">
-							${keywords.map((k) => import_lit26.html`<span>${k}</span>`)}
-						</div>` : import_lit26.nothing}
+				${d.dailyMessage ? import_lit27.html`<p class="message">${d.dailyMessage}</p>` : import_lit27.nothing}
+				${card.meaning ? import_lit27.html`<p>${card.meaning}</p>` : import_lit27.nothing}
+				${keywords.length > 0 ? import_lit27.html`<div class="chips">
+							${keywords.map((k) => import_lit27.html`<span>${k}</span>`)}
+						</div>` : import_lit27.nothing}
 				<button
 					class="flip"
 					type="button"
@@ -6344,9 +6994,9 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
     const isReversed = this.flipped;
     const orientedMeaning = isReversed ? d.reversed : d.upright;
     const keywords = isReversed ? d.keywords?.reversed ?? [] : d.keywords?.upright ?? [];
-    return import_lit26.html`<article class="card" aria-label=${d.name ?? "Tarot card"}>
+    return import_lit27.html`<article class="card" aria-label=${d.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${d.imageUrl ? import_lit26.html`<img
+				${d.imageUrl ? import_lit27.html`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${d.imageUrl}
 							alt=${d.name ?? "Tarot card"}
@@ -6358,7 +7008,7 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
         this.toggleFlip();
       }
     }}
-						/>` : import_lit26.html`<div
+						/>` : import_lit27.html`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -6367,15 +7017,15 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
 			</div>
 			<div>
 				<div class="meta">
-					${d.arcana ? import_lit26.html`${d.arcana} arcana` : import_lit26.nothing}
-					${d.number !== void 0 && d.number !== null ? import_lit26.html` · ${d.number}` : import_lit26.nothing}
-					${isReversed ? import_lit26.html` · reversed` : import_lit26.nothing}
+					${d.arcana ? import_lit27.html`${d.arcana} arcana` : import_lit27.nothing}
+					${d.number !== void 0 && d.number !== null ? import_lit27.html` · ${d.number}` : import_lit27.nothing}
+					${isReversed ? import_lit27.html` · reversed` : import_lit27.nothing}
 				</div>
 				<h2 class="title">${d.name ?? "Tarot card"}</h2>
-				${orientedMeaning?.description ? import_lit26.html`<p>${orientedMeaning.description}</p>` : import_lit26.nothing}
-				${keywords.length > 0 ? import_lit26.html`<div class="chips">
-							${keywords.map((k) => import_lit26.html`<span>${k}</span>`)}
-						</div>` : import_lit26.nothing}
+				${orientedMeaning?.description ? import_lit27.html`<p>${orientedMeaning.description}</p>` : import_lit27.nothing}
+				${keywords.length > 0 ? import_lit27.html`<div class="chips">
+							${keywords.map((k) => import_lit27.html`<span>${k}</span>`)}
+						</div>` : import_lit27.nothing}
 				<button
 					class="flip"
 					type="button"
@@ -6390,7 +7040,7 @@ var RoxyTarotCard = class extends import_lit26.LitElement {
 };
 RoxyTarotCard.styles = [
   baseStyles,
-  import_lit26.css`
+  import_lit27.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -6493,9 +7143,9 @@ RoxyTarotCard = __decorateClass([
 ], RoxyTarotCard);
 
 // packages/ui/src/components/tarot-spread.ts
-var import_lit27 = require("lit");
+var import_lit28 = require("lit");
 var import_decorators25 = require("lit/decorators.js");
-var RoxyTarotSpread = class extends import_lit27.LitElement {
+var RoxyTarotSpread = class extends import_lit28.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -6504,7 +7154,7 @@ var RoxyTarotSpread = class extends import_lit27.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit27.html`<div class="roxy-empty" role="status">No tarot spread</div>`;
+      return import_lit28.html`<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 ?? [] : [];
@@ -6516,60 +7166,60 @@ var RoxyTarotSpread = class extends import_lit27.LitElement {
     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 import_lit27.html`<article class="wrap" aria-label="Tarot spread">
+    return import_lit28.html`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
 				<h2 class="title">${spreadLabel}</h2>
-				${question ? import_lit27.html`<span class="question">"${question}"</span>` : import_lit27.nothing}
+				${question ? import_lit28.html`<span class="question">"${question}"</span>` : import_lit28.nothing}
 			</header>
-			${isYesNo ? import_lit27.html`<div>
+			${isYesNo ? import_lit28.html`<div>
 						<span class=${`answer ${answerClass}`}>${answer}</span>
-						${strength ? import_lit27.html`<small> · ${strength}</small>` : import_lit27.nothing}
-					</div>` : import_lit27.nothing}
-			${positions.length > 0 ? import_lit27.html`<div class="grid">
+						${strength ? import_lit28.html`<small> · ${strength}</small>` : import_lit28.nothing}
+					</div>` : import_lit28.nothing}
+			${positions.length > 0 ? import_lit28.html`<div class="grid">
 						${positions.map(
-      (p) => import_lit27.html`<div class="card">
+      (p) => import_lit28.html`<div class="card">
 								<p class="label">${p.name ?? ""}</p>
 								<div class="image">
-									${p.card?.imageUrl ? import_lit27.html`<img
+									${p.card?.imageUrl ? import_lit28.html`<img
 												src=${p.card.imageUrl}
 												alt=${p.card.name ?? "tarot card"}
 												class=${p.card.reversed ? "reversed" : ""}
-											/>` : import_lit27.html`${p.card?.name ?? "?"}`}
+											/>` : import_lit28.html`${p.card?.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${p.card?.name ?? ""}
-									${p.card?.reversed ? import_lit27.html`<small>(reversed)</small>` : import_lit27.nothing}
+									${p.card?.reversed ? import_lit28.html`<small>(reversed)</small>` : import_lit28.nothing}
 								</p>
-								${p.interpretation ? import_lit27.html`<p class="interp">${p.interpretation}</p>` : import_lit27.nothing}
+								${p.interpretation ? import_lit28.html`<p class="interp">${p.interpretation}</p>` : import_lit28.nothing}
 							</div>`
     )}
-					</div>` : import_lit27.nothing}
-			${cards.length > 0 ? import_lit27.html`<div class="grid">
+					</div>` : import_lit28.nothing}
+			${cards.length > 0 ? import_lit28.html`<div class="grid">
 						${cards.map(
-      (c) => import_lit27.html`<div class="card">
+      (c) => import_lit28.html`<div class="card">
 								<div class="image">
-									${c.imageUrl ? import_lit27.html`<img
+									${c.imageUrl ? import_lit28.html`<img
 												src=${c.imageUrl}
 												alt=${c.name ?? "tarot card"}
 												class=${c.reversed ? "reversed" : ""}
-											/>` : import_lit27.html`${c.name ?? "?"}`}
+											/>` : import_lit28.html`${c.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${c.name ?? ""}
-									${c.reversed ? import_lit27.html`<small>(reversed)</small>` : import_lit27.nothing}
+									${c.reversed ? import_lit28.html`<small>(reversed)</small>` : import_lit28.nothing}
 								</p>
-								${c.meaning ? import_lit27.html`<p class="interp">${c.meaning}</p>` : import_lit27.nothing}
+								${c.meaning ? import_lit28.html`<p class="interp">${c.meaning}</p>` : import_lit28.nothing}
 							</div>`
     )}
-					</div>` : import_lit27.nothing}
-			${summary ? import_lit27.html`<p class="reading">${summary}</p>` : import_lit27.nothing}
-			${yesNoInterp ? import_lit27.html`<p class="reading">${yesNoInterp}</p>` : import_lit27.nothing}
+					</div>` : import_lit28.nothing}
+			${summary ? import_lit28.html`<p class="reading">${summary}</p>` : import_lit28.nothing}
+			${yesNoInterp ? import_lit28.html`<p class="reading">${yesNoInterp}</p>` : import_lit28.nothing}
 		</article>`;
   }
 };
 RoxyTarotSpread.styles = [
   baseStyles,
-  import_lit27.css`
+  import_lit28.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6688,16 +7338,16 @@ RoxyTarotSpread = __decorateClass([
 ], RoxyTarotSpread);
 
 // packages/ui/src/components/transits-table.ts
-var import_lit28 = require("lit");
+var import_lit29 = require("lit");
 var import_decorators26 = require("lit/decorators.js");
-var RoxyTransitsTable = class extends import_lit28.LitElement {
+var RoxyTransitsTable = class extends import_lit29.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.transitPlanets?.length) {
-      return import_lit28.html`<div class="roxy-empty" role="status">No transits data</div>`;
+      return import_lit29.html`<div class="roxy-empty" role="status">No transits data</div>`;
     }
     const {
       transitDate,
@@ -6707,13 +7357,13 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
       summary
     } = this.data;
     const dateStr = [formatDate(transitDate), formatTime(transitTime)].filter(Boolean).join(" ");
-    return import_lit28.html`<div class="wrap" aria-label="Transit positions table">
+    return import_lit29.html`<div class="wrap" aria-label="Transit positions table">
 			<div class="head">
 				<h2 class="title">Transits</h2>
-				${dateStr ? import_lit28.html`<p class="subtitle">${dateStr}</p>` : import_lit28.nothing}
+				${dateStr ? import_lit29.html`<p class="subtitle">${dateStr}</p>` : import_lit29.nothing}
 			</div>
 
-			${summary ? this.renderSummaryPills(summary) : import_lit28.nothing}
+			${summary ? this.renderSummaryPills(summary) : import_lit29.nothing}
 
 			<div>
 				<p class="section-label">Planet positions</p>
@@ -6722,16 +7372,16 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
 				</div>
 			</div>
 
-			${transitAspects?.length ? import_lit28.html`<div>
+			${transitAspects?.length ? import_lit29.html`<div>
 						<p class="section-label">Transit aspects</p>
 						<div class="overflow-scroll">
 							${this.renderAspectsList(transitAspects)}
 						</div>
-					</div>` : import_lit28.nothing}
+					</div>` : import_lit29.nothing}
 		</div>`;
   }
   renderSummaryPills(summary) {
-    return import_lit28.html`<div class="summary-pills" role="region" aria-label="Aspect summary">
+    return import_lit29.html`<div class="summary-pills" role="region" aria-label="Aspect summary">
 			<span class="pill pill--muted">
 				Total: ${summary.totalAspects}
 			</span>
@@ -6747,7 +7397,7 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
 		</div>`;
   }
   renderPlanetsTable(planets) {
-    return import_lit28.html`<table class="planets-table">
+    return import_lit29.html`<table class="planets-table">
 			<thead>
 				<tr>
 					<th scope="col">Planet</th>
@@ -6761,12 +7411,12 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
       const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? "";
       const speedArrow = p.speed >= 0 ? "\u2191" : "\u2193";
-      return import_lit28.html`<tr>
+      return import_lit29.html`<tr>
 						<td>
 							<div class="planet-cell">
 								<span class="glyph" aria-hidden="true">${pGlyph}</span>
 								${p.name}
-								${p.isRetrograde ? import_lit28.html`<span class="retro-badge" aria-label="retrograde">R</span>` : import_lit28.nothing}
+								${p.isRetrograde ? import_lit29.html`<span class="retro-badge" aria-label="retrograde">R</span>` : import_lit29.nothing}
 							</div>
 						</td>
 						<td>
@@ -6786,7 +7436,7 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
 		</table>`;
   }
   renderAspectsList(aspects) {
-    return import_lit28.html`<div role="list" aria-label="Transit aspects">
+    return import_lit29.html`<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)] ?? "";
@@ -6794,7 +7444,7 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
       const interp = a.interpretation;
       const type = (a.type ?? "").toLowerCase();
       const status = a.isApplying ? "Applying" : "Separating";
-      return import_lit28.html`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
+      return import_lit29.html`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
 					<summary>
 						<span aria-hidden="true">${tGlyph}</span>
 						${a.transitPlanet}
@@ -6806,13 +7456,13 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
 						</span>
 					</summary>
 					<div class="interp-body">
-						${interp?.summary ? import_lit28.html`<p>${interp.summary}</p>` : import_lit28.nothing}
-						${interp?.impact ? import_lit28.html`<p><strong>Impact:</strong> ${interp.impact}</p>` : import_lit28.nothing}
-						${interp?.timing ? import_lit28.html`<p><strong>Timing:</strong> ${interp.timing}</p>` : import_lit28.nothing}
-						${interp?.guidance ? import_lit28.html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : import_lit28.nothing}
-						${interp?.keywords?.length ? import_lit28.html`<div class="interp-keywords">
-										${interp.keywords.map((k) => import_lit28.html`<span class="kw">${k}</span>`)}
-									</div>` : import_lit28.nothing}
+						${interp?.summary ? import_lit29.html`<p>${interp.summary}</p>` : import_lit29.nothing}
+						${interp?.impact ? import_lit29.html`<p><strong>Impact:</strong> ${interp.impact}</p>` : import_lit29.nothing}
+						${interp?.timing ? import_lit29.html`<p><strong>Timing:</strong> ${interp.timing}</p>` : import_lit29.nothing}
+						${interp?.guidance ? import_lit29.html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : import_lit29.nothing}
+						${interp?.keywords?.length ? import_lit29.html`<div class="interp-keywords">
+										${interp.keywords.map((k) => import_lit29.html`<span class="kw">${k}</span>`)}
+									</div>` : import_lit29.nothing}
 					</div>
 				</details>`;
     })}
@@ -6821,7 +7471,7 @@ var RoxyTransitsTable = class extends import_lit28.LitElement {
 };
 RoxyTransitsTable.styles = [
   baseStyles,
-  import_lit28.css`
+  import_lit29.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -7027,93 +7677,43 @@ RoxyTransitsTable = __decorateClass([
 ], RoxyTransitsTable);
 
 // packages/ui/src/components/vedic-kundli.ts
-var import_lit29 = require("lit");
+var import_lit30 = require("lit");
 var import_decorators27 = require("lit/decorators.js");
-var RoxyVedicKundli = class extends import_lit29.LitElement {
+var RoxyVedicKundli = class extends import_lit30.LitElement {
   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 import_lit29.html`<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 import_lit29.html`<div class="wrap">
-			<h2 class="title">Vedic kundli</h2>
+    const vm = this.viewModel();
+    if (!vm)
+      return import_lit30.html`<div class="roxy-empty" role="status">No kundli data</div>`;
+    return import_lit30.html`<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,
-  import_lit29.css`
-			.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([
   (0, import_decorators27.property)({ attribute: false })
 ], RoxyVedicKundli.prototype, "data", 2);
@@ -7125,7 +7725,7 @@ RoxyVedicKundli = __decorateClass([
 ], RoxyVedicKundli);
 
 // packages/ui/src/components/vedic-planets-table.ts
-var import_lit30 = require("lit");
+var import_lit31 = require("lit");
 var import_decorators28 = require("lit/decorators.js");
 var GRAHA_ORDER = [
   "Lagna",
@@ -7139,7 +7739,7 @@ var GRAHA_ORDER = [
   "Rahu",
   "Ketu"
 ];
-var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
+var RoxyVedicPlanetsTable = class extends import_lit31.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -7163,9 +7763,9 @@ var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
   }
   render() {
     if (!this.data?.meta)
-      return import_lit30.html`<div class="roxy-empty" role="status">No chart data</div>`;
+      return import_lit31.html`<div class="roxy-empty" role="status">No chart data</div>`;
     const rows = this.orderedRows();
-    return import_lit30.html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+    return import_lit31.html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
 			<header class="head">
 				<h2 class="title">Planetary positions</h2>
 			</header>
@@ -7188,12 +7788,12 @@ var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
       const isLagna = (p.graha ?? name) === "Lagna";
       const glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? "";
       const signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? "")] ?? "";
-      return import_lit30.html`<tr class=${isLagna ? "lagna" : ""}>
+      return import_lit31.html`<tr class=${isLagna ? "lagna" : ""}>
 							<td class="graha">
-								${glyph ? import_lit30.html`<span class="glyph">${glyph}</span>` : import_lit30.nothing}${p.graha ?? name}
+								${glyph ? import_lit31.html`<span class="glyph">${glyph}</span>` : import_lit31.nothing}${p.graha ?? name}
 							</td>
 							<td>
-								${signGlyph ? import_lit30.html`<span class="glyph">${signGlyph}</span>` : import_lit30.nothing}${p.rashi ?? ""}
+								${signGlyph ? import_lit31.html`<span class="glyph">${signGlyph}</span>` : import_lit31.nothing}${p.rashi ?? ""}
 							</td>
 							<td class="num">
 								${typeof p.longitude === "number" ? formatSignPosition(p.longitude) : ""}
@@ -7203,7 +7803,7 @@ var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
 							<td>${p.nakshatra?.lord ?? ""}</td>
 							<td class="num">${typeof p.house === "number" ? p.house : ""}</td>
 							<td>${p.awastha ?? ""}</td>
-							<td>${p.isRetrograde ? import_lit30.html`<span class="retro">R</span>` : import_lit30.nothing}</td>
+							<td>${p.isRetrograde ? import_lit31.html`<span class="retro">R</span>` : import_lit31.nothing}</td>
 						</tr>`;
     })}
 				</tbody>
@@ -7213,7 +7813,7 @@ var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
 };
 RoxyVedicPlanetsTable.styles = [
   baseStyles,
-  import_lit30.css`
+  import_lit31.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -7289,9 +7889,9 @@ RoxyVedicPlanetsTable = __decorateClass([
 ], RoxyVedicPlanetsTable);
 
 // packages/ui/src/components/western-planets-table.ts
-var import_lit31 = require("lit");
+var import_lit32 = require("lit");
 var import_decorators29 = require("lit/decorators.js");
-var RoxyWesternPlanetsTable = class extends import_lit31.LitElement {
+var RoxyWesternPlanetsTable = class extends import_lit32.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -7327,9 +7927,9 @@ var RoxyWesternPlanetsTable = class extends import_lit31.LitElement {
   }
   render() {
     if (!this.data?.planets)
-      return import_lit31.html`<div class="roxy-empty" role="status">No chart data</div>`;
+      return import_lit32.html`<div class="roxy-empty" role="status">No chart data</div>`;
     const rows = this.rows();
-    return import_lit31.html`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
+    return import_lit32.html`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
 			<header class="head">
 				<h2 class="title">Planetary positions</h2>
 			</header>
@@ -7348,20 +7948,20 @@ var RoxyWesternPlanetsTable = class extends import_lit31.LitElement {
       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 import_lit31.html`<tr class=${r.isPoint ? "point" : ""}>
+      return import_lit32.html`<tr class=${r.isPoint ? "point" : ""}>
 							<td class="body">
-								${glyph ? import_lit31.html`<span class="glyph">${glyph}</span>` : import_lit31.nothing}${r.name}
+								${glyph ? import_lit32.html`<span class="glyph">${glyph}</span>` : import_lit32.nothing}${r.name}
 							</td>
 							<td>
-								${signGlyph ? import_lit31.html`<span class="glyph">${signGlyph}</span>` : import_lit31.nothing}${r.sign ?? ""}
+								${signGlyph ? import_lit32.html`<span class="glyph">${signGlyph}</span>` : import_lit32.nothing}${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 ? import_lit31.html`${speed}°/day` : import_lit31.nothing}
-								${r.isRetrograde ? import_lit31.html`<span class="retro"> ℞</span>` : import_lit31.nothing}
+								${speed ? import_lit32.html`${speed}°/day` : import_lit32.nothing}
+								${r.isRetrograde ? import_lit32.html`<span class="retro"> ℞</span>` : import_lit32.nothing}
 							</td>
 						</tr>`;
     })}
@@ -7372,7 +7972,7 @@ var RoxyWesternPlanetsTable = class extends import_lit31.LitElement {
 };
 RoxyWesternPlanetsTable.styles = [
   baseStyles,
-  import_lit31.css`
+  import_lit32.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -7442,9 +8042,9 @@ RoxyWesternPlanetsTable = __decorateClass([
 ], RoxyWesternPlanetsTable);
 
 // packages/ui/src/components/yoga-list.ts
-var import_lit32 = require("lit");
+var import_lit33 = require("lit");
 var import_decorators30 = require("lit/decorators.js");
-var RoxyYogaList = class extends import_lit32.LitElement {
+var RoxyYogaList = class extends import_lit33.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -7455,29 +8055,29 @@ var RoxyYogaList = class extends import_lit32.LitElement {
   }
   renderQualityChip(quality) {
     const cls = `quality-chip quality-${quality}`;
-    return import_lit32.html`<span class=${cls}>${quality}</span>`;
+    return import_lit33.html`<span class=${cls}>${quality}</span>`;
   }
   renderDetailCard(yoga) {
-    return import_lit32.html`<div class="detail-card">
+    return import_lit33.html`<div class="detail-card">
 			<p class="detail-name">
 				${yoga.name}
-				${yoga.quality ? this.renderQualityChip(yoga.quality) : import_lit32.nothing}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : import_lit33.nothing}
 			</p>
-			${yoga.description ? import_lit32.html`<p class="description">${yoga.description}</p>` : import_lit32.nothing}
-			${yoga.result ? import_lit32.html`<details>
+			${yoga.description ? import_lit33.html`<p class="description">${yoga.description}</p>` : import_lit33.nothing}
+			${yoga.result ? import_lit33.html`<details>
 						<summary>Effects</summary>
 						<div class="result-body">${yoga.result}</div>
-					</details>` : import_lit32.nothing}
+					</details>` : import_lit33.nothing}
 		</div>`;
   }
   render() {
     if (!this.data)
-      return import_lit32.html`<div class="roxy-empty" role="status">No yoga data</div>`;
+      return import_lit33.html`<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 import_lit32.html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+      return import_lit33.html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
     }
     if ("yogas" in d && Array.isArray(d.yogas)) {
       const allYogas = d.yogas;
@@ -7486,10 +8086,10 @@ var RoxyYogaList = class extends import_lit32.LitElement {
         const detailYogas = allYogas;
         const filtered2 = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas;
         const total2 = d.total;
-        return import_lit32.html`<div class="wrap">
+        return import_lit33.html`<div class="wrap">
 					<div class="head">
 						<h2 class="title">Yoga catalog</h2>
-						${total2 !== void 0 ? import_lit32.html`<span class="count">${total2} total</span>` : import_lit32.nothing}
+						${total2 !== void 0 ? import_lit33.html`<span class="count">${total2} total</span>` : import_lit33.nothing}
 					</div>
 					<div class="search-wrap">
 						<input
@@ -7507,17 +8107,17 @@ var RoxyYogaList = class extends import_lit32.LitElement {
 						aria-live="polite"
 						aria-label="Yoga results"
 					>
-						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : import_lit32.html`<p class="no-results">No yogas match your search.</p>`}
+						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : import_lit33.html`<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 import_lit32.html`<div class="wrap">
+      return import_lit33.html`<div class="wrap">
 				<div class="head">
 					<h2 class="title">Yoga catalog</h2>
-					${total !== void 0 ? import_lit32.html`<span class="count">${total} total</span>` : import_lit32.nothing}
+					${total !== void 0 ? import_lit33.html`<span class="count">${total} total</span>` : import_lit33.nothing}
 				</div>
 				<div class="search-wrap">
 					<input
@@ -7536,20 +8136,20 @@ var RoxyYogaList = class extends import_lit32.LitElement {
 					aria-label="Yoga results"
 				>
 					${filtered.length > 0 ? filtered.map(
-        (y) => import_lit32.html`<div class="yoga-chip">
+        (y) => import_lit33.html`<div class="yoga-chip">
 									${y.name}
 									<span class="yoga-id">${y.id}</span>
 								</div>`
-      ) : import_lit32.html`<p class="no-results">No yogas match your search.</p>`}
+      ) : import_lit33.html`<p class="no-results">No yogas match your search.</p>`}
 				</div>
 			</div>`;
     }
-    return import_lit32.html`<div class="roxy-empty" role="status">No yoga data</div>`;
+    return import_lit33.html`<div class="roxy-empty" role="status">No yoga data</div>`;
   }
 };
 RoxyYogaList.styles = [
   baseStyles,
-  import_lit32.css`
+  import_lit33.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -8047,7 +8647,7 @@ var ROXY_COMPONENTS = [
 ];
 
 // packages/ui/src/version.ts
-var ROXY_UI_VERSION = "0.3.1";
+var ROXY_UI_VERSION = "0.4.1";
 
 // packages/ui/src/index.ts
 var ROXY_UI_COMPONENTS = ROXY_COMPONENTS.map((c) => c.slug);