@roxyapi/ui 0.2.3 → 0.3.1

package/dist/index.js

@@ -99,6 +99,15 @@ var SIGNS_ORDER = [
 var RASHI_KEYS = SIGNS_ORDER.map(
   (s) => s.toLowerCase()
 );
+var ASPECT_SYMBOL = {
+  conjunction: "\u260C",
+  opposition: "\u260D",
+  trine: "\u25B3",
+  square: "\u25A1",
+  sextile: "\u2731",
+  quincunx: "\u22BB",
+  semisextile: "\u22BC"
+};
 var TRIGRAM_GLYPH = {
   heaven: "\u2630",
   lake: "\u2631",
@@ -1572,9 +1581,88 @@ import { customElement as customElement7, property as property7 } from "lit/deco
 
 // packages/ui/src/utils/kundli-render.ts
 import { nothing as nothing7, svg as svg2 } from "lit";
+
+// packages/ui/src/utils/degree.ts
+function normalizeLongitude(lon) {
+  const wrapped = lon % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+function longitudeToSignPosition(longitude) {
+  const lon = normalizeLongitude(longitude);
+  const signIndex = Math.floor(lon / 30) % 12;
+  const within = lon % 30;
+  const degree = Math.floor(within);
+  const minuteFloat = (within - degree) * 60;
+  const minute = Math.floor(minuteFloat);
+  const second = Math.round((minuteFloat - minute) * 60);
+  return {
+    sign: SIGNS_ORDER[signIndex] ?? "Aries",
+    signIndex,
+    degree,
+    minute,
+    second
+  };
+}
+function formatSignPosition(longitude) {
+  const { sign, degree, minute } = longitudeToSignPosition(longitude);
+  return `${degree}\xB0 ${sign} ${String(minute).padStart(2, "0")}'`;
+}
+function oppositePoint(longitude) {
+  return normalizeLongitude(longitude + 180);
+}
+function arcMidpoint(start, end) {
+  const s = normalizeLongitude(start);
+  let span = normalizeLongitude(end) - s;
+  if (span < 0) span += 360;
+  return normalizeLongitude(s + span / 2);
+}
+function polarToCartesian(cx, cy, radius, angleDeg) {
+  const angleRad = angleDeg * Math.PI / 180;
+  return {
+    x: cx + radius * Math.cos(angleRad),
+    y: cy + radius * Math.sin(angleRad)
+  };
+}
+
+// packages/ui/src/utils/kundli-render.ts
 var RASHI_TO_SIGN = Object.fromEntries(
   SIGNS_ORDER.map((s) => [s.toLowerCase(), s])
 );
+var RETRO_MARK = "\u02B3";
+function grahaLabel(p) {
+  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)) {
+    return `${abbr}${retro}`;
+  }
+  const { degree } = longitudeToSignPosition(p.longitude);
+  return `${abbr} ${degree}\xB0${retro}`;
+}
+function grahaTitle(p) {
+  const parts = [capitalize(p.graha)];
+  if (typeof p.longitude === "number" && Number.isFinite(p.longitude)) {
+    const sp = longitudeToSignPosition(p.longitude);
+    parts.push(
+      `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}' ${sp.sign}`
+    );
+  }
+  if (p.nakshatra?.name) {
+    const pada = p.nakshatra.pada ? ` pada ${p.nakshatra.pada}` : "";
+    parts.push(`${p.nakshatra.name}${pada}`);
+  }
+  if (p.awastha) parts.push(p.awastha);
+  if (p.isRetrograde) parts.push("retrograde");
+  return parts.join(" \xB7 ");
+}
+function renderPlanetStack(planets, cx, baseY, lineHeight) {
+  const startY = baseY - (planets.length - 1) * lineHeight / 2;
+  return planets.map((p, j) => {
+    const yPos = startY + j * lineHeight;
+    return svg2`<text class="planet-text" x=${cx} y=${yPos} text-anchor="middle" dominant-baseline="central">${grahaLabel(
+      p
+    )}<title>${grahaTitle(p)}</title></text>`;
+  });
+}
 var SOUTH_HOUSE_CENTERS = {
   1: { x: 150, y: 58 },
   2: { x: 205, y: 52 },
@@ -1617,12 +1705,52 @@ var NORTH_HOUSE_CENTERS = {
   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 renderSouthHouseGroup(h) {
   const center = SOUTH_HOUSE_CENTERS[h.number];
   const signPos = SOUTH_SIGN_POSITIONS[h.number];
   if (!center || !signPos) return nothing7;
   const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const planets = h.planets;
+  const baseY = h.isLagna ? center.y + 8 : center.y;
   return svg2`
 		<g>
 			${h.isLagna ? svg2`<rect
@@ -1632,14 +1760,7 @@ function renderSouthHouseGroup(h) {
 						/>` : nothing7}
 			${signAbbr ? svg2`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
 			${h.isLagna ? svg2`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing7}
-			${planets.map((planet, j) => {
-    const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
-    const lineHeight = 13;
-    const baseY = h.isLagna ? center.y + 8 : center.y;
-    const startY = baseY - (planets.length - 1) * lineHeight / 2;
-    const yPos = startY + j * lineHeight;
-    return svg2`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
-  })}
+			${renderPlanetStack(h.planets, center.x, baseY, 13)}
 		</g>
 	`;
 }
@@ -1658,19 +1779,12 @@ function renderNorthHouseGroup(h) {
   const center = NORTH_HOUSE_CENTERS[h.number];
   if (!center) return nothing7;
   const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const planets = h.planets;
   return svg2`
 		<g>
 			${h.isLagna ? svg2`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />` : nothing7}
 			${signAbbr ? svg2`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
 			<text class="house-num" x=${center.x} y=${center.y + 2} text-anchor="middle" dominant-baseline="central">${h.number}</text>
-			${planets.map((planet, j) => {
-    const abbr = PLANET_ABBR[capitalize(planet)] ?? planet.slice(0, 2);
-    const lineHeight = 11;
-    const startY = center.y + 14 - (planets.length - 1) * lineHeight / 2;
-    const yPos = startY + j * lineHeight;
-    return svg2`<text class="planet-text" x=${center.x} y=${yPos} text-anchor="middle" dominant-baseline="central">${abbr}</text>`;
-  })}
+			${renderPlanetStack(h.planets, center.x, center.y + 14, 11)}
 		</g>
 	`;
 }
@@ -1688,6 +1802,58 @@ function renderSouthFrame() {
 		<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
 	`;
 }
+function renderEastFrame() {
+  return svg2`
+		<rect class="line" x="10" y="10" width="280" height="280" stroke-width="1.5" fill="none" />
+		<line class="line" x1="10" y1="10" x2="290" y2="290" stroke-width="1" />
+		<line class="line" x1="290" y1="10" x2="10" y2="290" stroke-width="1" />
+		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1" fill="none" />
+	`;
+}
+function renderEastHouseGroup(h) {
+  const center = EAST_HOUSE_CENTERS[h.number];
+  const signPos = EAST_SIGN_POSITIONS[h.number];
+  if (!center || !signPos) return nothing7;
+  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+  return svg2`
+		<g>
+			${h.isLagna ? svg2`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="20" />` : nothing7}
+			${signAbbr ? svg2`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing7}
+			${h.isLagna ? svg2`<text class="lagna-marker" x=${center.x} y=${center.y - 14} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing7}
+			${renderPlanetStack(h.planets, center.x, center.y + 2, 11)}
+		</g>
+	`;
+}
+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,
+      sign,
+      planets: byRashi.get(key) ?? [],
+      isLagna: lagnaKey === key
+    };
+  });
+}
 
 // packages/ui/src/components/divisional-chart.ts
 var RoxyDivisionalChart = class extends LitElement7 {
@@ -1697,31 +1863,17 @@ var RoxyDivisionalChart = class extends LitElement7 {
     this.chartStyle = "south";
   }
   buildHouses() {
-    if (!this.data) return [];
-    const chart = this.data.chart;
-    const meta = this.data.chart.meta ?? {};
-    const lagnaSign = meta.Lagna?.rashi ?? "";
-    const houses = [];
-    for (let i = 0; i < 12; i++) {
-      const key = RASHI_KEYS[i];
-      const bucket = chart[key];
-      const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
-      const sign = RASHI_TO_SIGN[key] ?? "";
-      houses.push({
-        number: i + 1,
-        sign,
-        planets,
-        isLagna: lagnaSign ? lagnaSign.toLowerCase() === sign.toLowerCase() : false
-      });
-    }
-    return houses;
+    if (!this.data?.chart?.meta) return [];
+    return buildHousesFromMeta(this.data.chart.meta);
   }
   render() {
     if (!this.data)
       return html7`<div class="roxy-empty" role="status">No divisional chart data</div>`;
     const { division, vargottama } = this.data;
     const houses = this.buildHouses();
-    const isNorth = this.chartStyle === "north";
+    const style = this.chartStyle;
+    const frame = style === "north" ? renderNorthFrame() : style === "east" ? renderEastFrame() : renderSouthFrame();
+    const houseGroup = style === "north" ? renderNorthHouseGroup : style === "east" ? renderEastHouseGroup : renderSouthHouseGroup;
     return html7`<div class="wrap">
 			<div class="header">
 				<h2 class="title">
@@ -1737,8 +1889,8 @@ var RoxyDivisionalChart = class extends LitElement7 {
 				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
 			>
 				<title>D${division.number} ${division.name}</title>
-				${isNorth ? renderNorthFrame() : renderSouthFrame()}
-				${isNorth ? houses.map((h) => renderNorthHouseGroup(h)) : houses.map((h) => renderSouthHouseGroup(h))}
+				${frame}
+				${houses.map((h) => houseGroup(h))}
 			</svg>
 
 			${vargottama && vargottama.length > 0 ? html7`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
@@ -3111,26 +3263,300 @@ RoxyHoroscopeCard = __decorateClass([
   customElement12("roxy-horoscope-card")
 ], RoxyHoroscopeCard);
 
-// packages/ui/src/components/kp-planets-table.ts
+// packages/ui/src/components/kp-chart.ts
 import { css as css14, html as html13, LitElement as LitElement13, nothing as nothing14 } from "lit";
-import { customElement as customElement13, property as property13 } from "lit/decorators.js";
-var RoxyKpPlanetsTable = class extends LitElement13 {
+import { customElement as customElement13, property as property13, state as state3 } from "lit/decorators.js";
+var RoxyKpChart = class extends LitElement13 {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.activeTab = "planets";
+  }
+  /** Merge the 7 planets and the two nodes into one ordered body list. */
+  bodies() {
+    const d = this.data;
+    if (!d) return [];
+    const rows = (d.planets ?? []).map((p) => ({
+      name: p.planet,
+      sign: p.sign,
+      house: p.house,
+      nakshatra: p.nakshatra,
+      starLord: p.starLord,
+      subLord: p.subLord,
+      subSubLord: p.subSubLord,
+      kpNumber: p.kpNumber,
+      retrograde: p.retrograde
+    }));
+    const nodes = d.nodes;
+    for (const [name, node] of [
+      ["Rahu", nodes?.rahu],
+      ["Ketu", nodes?.ketu]
+    ]) {
+      if (node) {
+        rows.push({
+          name,
+          sign: node.sign,
+          house: node.house,
+          nakshatra: node.nakshatra,
+          starLord: node.starLord,
+          subLord: node.subLord,
+          subSubLord: node.subSubLord,
+          retrograde: true
+        });
+      }
+    }
+    return rows;
+  }
+  onTabKeyDown(e) {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+    e.preventDefault();
+    this.activeTab = this.activeTab === "planets" ? "cusps" : "planets";
+    const next = this.activeTab;
+    requestAnimationFrame(() => {
+      this.shadowRoot?.querySelector(`#tab-${next}`)?.focus();
+    });
+  }
+  render() {
+    if (!this.data)
+      return html13`<div class="roxy-empty" role="status">No KP chart data</div>`;
+    const d = this.data;
+    const asc = d.ascendant;
+    return html13`<div class="wrap" aria-label="KP chart" tabindex="0">
+			<header class="head">
+				<h2 class="title">KP chart</h2>
+				${asc ? html13`<div class="asc">
+							Ascendant: <strong>${asc.sign ?? ""}</strong>
+							${asc.nakshatra ? html13`· ${asc.nakshatra}` : nothing14}
+							${asc.subLord ? html13`· sub lord ${asc.subLord}` : nothing14}
+							${typeof asc.kpNumber === "number" ? html13`· KP ${asc.kpNumber}` : nothing14}
+						</div>` : nothing14}
+				${typeof d.meta?.ayanamsa === "number" ? html13`<div class="ayan">
+							${d.meta.ayanamsaType ?? "Ayanamsa"}: ${formatNumber(d.meta.ayanamsa, 4)}°
+							${d.meta.houseSystem ? html13`· ${d.meta.houseSystem} houses` : nothing14}
+						</div>` : nothing14}
+			</header>
+
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="KP chart views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${["planets", "cusps"].map(
+      (t) => html13`<button
+						class="tab"
+						role="tab"
+						id="tab-${t}"
+						aria-selected=${this.activeTab === t ? "true" : "false"}
+						aria-controls="panel-${t}"
+						tabindex=${this.activeTab === t ? "0" : "-1"}
+						@click=${() => {
+        this.activeTab = t;
+      }}
+					>
+						${t === "planets" ? "Planets" : "Cusps"}
+					</button>`
+    )}
+			</div>
+
+			<div id="panel-${this.activeTab}" role="tabpanel" aria-labelledby="tab-${this.activeTab}">
+				${this.activeTab === "planets" ? this.renderPlanets() : this.renderCusps()}
+			</div>
+		</div>`;
+  }
+  renderPlanets() {
+    const bodies = this.bodies();
+    if (!bodies.length)
+      return html13`<p class="roxy-empty" role="status">No planets</p>`;
+    return html13`<table role="table" aria-label="KP planets and nodes">
+			<thead>
+				<tr>
+					<th scope="col">Body</th>
+					<th scope="col">Sign</th>
+					<th scope="col">House</th>
+					<th scope="col">Nakshatra</th>
+					<th scope="col">Star lord</th>
+					<th scope="col">Sub lord</th>
+					<th scope="col">Sub sub lord</th>
+					<th scope="col">KP no.</th>
+				</tr>
+			</thead>
+			<tbody>
+				${bodies.map(
+      (b) => html13`<tr>
+						<td class="body">
+							${b.name}${b.retrograde ? html13`<span class="retro">R</span>` : nothing14}
+						</td>
+						<td>${b.sign ?? ""}</td>
+						<td class="num">${typeof b.house === "number" ? b.house : ""}</td>
+						<td>${b.nakshatra ?? ""}</td>
+						<td>${b.starLord ?? ""}</td>
+						<td>${b.subLord ?? ""}</td>
+						<td>${b.subSubLord ?? ""}</td>
+						<td class="num">${typeof b.kpNumber === "number" ? b.kpNumber : ""}</td>
+					</tr>`
+    )}
+			</tbody>
+		</table>`;
+  }
+  renderCusps() {
+    const cusps = this.data?.cusps ?? [];
+    if (!cusps.length)
+      return html13`<p class="roxy-empty" role="status">No cusps</p>`;
+    return html13`<table role="table" aria-label="KP Placidus cusps">
+			<thead>
+				<tr>
+					<th scope="col">House</th>
+					<th scope="col">Sign</th>
+					<th scope="col">Sign lord</th>
+					<th scope="col">Nakshatra</th>
+					<th scope="col">Star lord</th>
+					<th scope="col">Sub lord</th>
+					<th scope="col">Sub sub lord</th>
+					<th scope="col">KP no.</th>
+				</tr>
+			</thead>
+			<tbody>
+				${cusps.map(
+      (c) => html13`<tr>
+						<td class="body num">${c.house}</td>
+						<td>${c.sign ?? ""}</td>
+						<td>${c.signLord ?? ""}</td>
+						<td>${c.nakshatra ?? ""}</td>
+						<td>${c.starLord ?? ""}</td>
+						<td>${c.subLord ?? ""}</td>
+						<td>${c.subSubLord ?? ""}</td>
+						<td class="num">${typeof c.kpNumber === "number" ? c.kpNumber : ""}</td>
+					</tr>`
+    )}
+			</tbody>
+		</table>`;
+  }
+};
+RoxyKpChart.styles = [
+  baseStyles,
+  css14`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.asc,
+			.ayan {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.asc strong {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.tablist {
+				display: flex;
+				gap: 2px;
+				padding: 0 var(--roxy-space-md, 1rem);
+				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+			}
+			.tab {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: none;
+				border: none;
+				border-bottom: 2px solid transparent;
+				margin-bottom: -2px;
+				cursor: pointer;
+				color: var(--roxy-muted, #71717a);
+				font-family: inherit;
+			}
+			.tab[aria-selected='true'] {
+				color: var(--roxy-accent-fg, #b45309);
+				border-bottom-color: var(--roxy-accent, #f59e0b);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.tab:hover:not([aria-selected='true']) {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 620px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			td.body {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.retro {
+				color: var(--roxy-warning-fg, #9a3412);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin-left: 4px;
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`
+];
+__decorateClass([
+  property13({ attribute: false })
+], RoxyKpChart.prototype, "data", 2);
+__decorateClass([
+  state3()
+], RoxyKpChart.prototype, "activeTab", 2);
+RoxyKpChart = __decorateClass([
+  customElement13("roxy-kp-chart")
+], RoxyKpChart);
+
+// packages/ui/src/components/kp-planets-table.ts
+import { css as css15, html as html14, LitElement as LitElement14, nothing as nothing15 } from "lit";
+import { customElement as customElement14, property as property14 } from "lit/decorators.js";
+var RoxyKpPlanetsTable = class extends LitElement14 {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return html13`<div class="roxy-empty" role="status">No KP data</div>`;
+      return html14`<div class="roxy-empty" role="status">No KP data</div>`;
     const planets = this.data.planets ?? [];
-    return html13`<div
+    return html14`<div
 			class="wrap"
 			aria-label="KP planets table"
 			tabindex="0"
 		>
 			<header class="head">
 				<h2 class="title">KP planets</h2>
-				${typeof this.data.ayanamsa === "number" ? html13`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : nothing14}
+				${typeof this.data.ayanamsa === "number" ? html14`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : nothing15}
 			</header>
 			<table role="table">
 				<thead>
@@ -3147,10 +3573,10 @@ var RoxyKpPlanetsTable = class extends LitElement13 {
 				</thead>
 				<tbody>
 					${planets.map(
-      (p) => html13`<tr>
+      (p) => html14`<tr>
 							<td class="planet">
 								${p.planet}
-								${p.retrograde ? html13`<span class="retro">R</span>` : nothing14}
+								${p.retrograde ? html14`<span class="retro">R</span>` : nothing15}
 							</td>
 							<td>${p.sign ?? ""}</td>
 							<td>${p.signLord ?? ""}</td>
@@ -3168,7 +3594,7 @@ var RoxyKpPlanetsTable = class extends LitElement13 {
 };
 RoxyKpPlanetsTable.styles = [
   baseStyles,
-  css14`
+  css15`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3230,63 +3656,236 @@ RoxyKpPlanetsTable.styles = [
 		`
 ];
 __decorateClass([
-  property13({ attribute: false })
+  property14({ attribute: false })
 ], RoxyKpPlanetsTable.prototype, "data", 2);
 RoxyKpPlanetsTable = __decorateClass([
-  customElement13("roxy-kp-planets-table")
+  customElement14("roxy-kp-planets-table")
 ], RoxyKpPlanetsTable);
 
-// packages/ui/src/components/location-search.ts
-import { css as css15, html as html14, LitElement as LitElement14, nothing as nothing15 } from "lit";
-import { customElement as customElement14, property as property14, state as state3 } from "lit/decorators.js";
-
-// packages/ui/src/utils/debounce.ts
-function debounce(fn, wait) {
-  let timer;
-  const debounced = ((...args) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      timer = void 0;
-      fn(...args);
-    }, wait);
-  });
-  debounced.cancel = () => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = void 0;
-    }
-  };
-  return debounced;
-}
-
-// packages/ui/src/components/location-search.ts
-var RoxyLocationSearch = class extends LitElement14 {
+// packages/ui/src/components/kp-ruling-planets.ts
+import { css as css16, html as html15, LitElement as LitElement15, nothing as nothing16 } from "lit";
+import { customElement as customElement15, property as property15 } from "lit/decorators.js";
+var RoxyKpRulingPlanets = class extends LitElement15 {
   constructor() {
     super(...arguments);
-    this.endpoint = "https://roxyapi.com/api/v2/location/search";
-    this.placeholder = "Search city";
-    this.defaultValue = "";
-    this.query = "";
-    this.results = [];
-    this.isOpen = false;
-    this.isLoading = false;
-    this.highlight = -1;
-    this.secretKeyWarned = false;
-    this.debouncedFetch = debounce((q) => {
-      void this.fetchResults(q);
-    }, 300);
-    this.onInput = (e) => {
-      const value = e.target.value;
-      this.query = value;
-      if (value.length < 2) {
-        this.results = [];
-        this.isOpen = false;
-        this.highlight = -1;
-        return;
-      }
-      this.debouncedFetch(value);
-    };
-    this.onKeyDown = (e) => {
+    this.data = null;
+  }
+  render() {
+    if (!this.data)
+      return html15`<div class="roxy-empty" role="status">No ruling planets data</div>`;
+    const d = this.data;
+    const significators = d.significators ?? [];
+    return html15`<div class="wrap" aria-label="KP ruling planets">
+			<header>
+				<h2 class="title">KP ruling planets</h2>
+				${d.dayLord ? html15`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : nothing16}
+			</header>
+
+			<div class="groups">
+				<div class="group">
+					<h3>Moon</h3>
+					<dl>
+						<dt>Sign lord</dt><dd>${d.moonSignLord ?? ""}</dd>
+						<dt>Star lord</dt><dd>${d.moonStarLord ?? ""}</dd>
+						<dt>Sub lord</dt><dd>${d.moonSublord ?? ""}</dd>
+						<dt>Sub-sub lord</dt><dd>${d.moonSubSublord ?? ""}</dd>
+					</dl>
+				</div>
+				<div class="group">
+					<h3>Lagna</h3>
+					<dl>
+						<dt>Sign lord</dt><dd>${d.lagnaSignLord ?? ""}</dd>
+						<dt>Star lord</dt><dd>${d.lagnaStarLord ?? ""}</dd>
+						<dt>Sub lord</dt><dd>${d.lagnaSublord ?? ""}</dd>
+						<dt>Sub-sub lord</dt><dd>${d.lagnaSubSublord ?? ""}</dd>
+					</dl>
+				</div>
+			</div>
+
+			${d.rulingPlanets?.length ? html15`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
+						<span class="rp-label">Ruling planets</span>
+						${d.rulingPlanets.map(
+      (p, i) => html15`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
+    )}
+					</div>` : nothing16}
+
+			${significators.length ? html15`<table aria-label="House significators">
+						<thead>
+							<tr>
+								<th scope="col">Planet</th>
+								<th scope="col">Signifies houses</th>
+							</tr>
+						</thead>
+						<tbody>
+							${significators.map(
+      (s) => html15`<tr>
+									<td>${s.planet}</td>
+									<td>${(s.signifies ?? []).join(", ")}</td>
+								</tr>`
+    )}
+						</tbody>
+					</table>` : nothing16}
+		</div>`;
+  }
+};
+RoxyKpRulingPlanets.styles = [
+  baseStyles,
+  css16`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.day-lord {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.day-lord strong {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.groups {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.group h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.group dl {
+				margin: 0;
+				display: grid;
+				grid-template-columns: auto 1fr;
+				gap: 2px var(--roxy-space-sm, 0.5rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.group dt {
+				color: var(--roxy-muted, #71717a);
+			}
+			.group dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.rp-list {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				align-items: center;
+			}
+			.rp-label {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+				margin-right: var(--roxy-space-xs, 0.25rem);
+			}
+			.rp {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.3em;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				padding: 0.15em 0.6em;
+				border-radius: 999px;
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 18%, transparent);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.rp .rank {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-sm, 0.5rem);
+				text-align: left;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+		`
+];
+__decorateClass([
+  property15({ attribute: false })
+], RoxyKpRulingPlanets.prototype, "data", 2);
+RoxyKpRulingPlanets = __decorateClass([
+  customElement15("roxy-kp-ruling-planets")
+], RoxyKpRulingPlanets);
+
+// packages/ui/src/components/location-search.ts
+import { css as css17, html as html16, LitElement as LitElement16, nothing as nothing17 } from "lit";
+import { customElement as customElement16, property as property16, state as state4 } from "lit/decorators.js";
+
+// packages/ui/src/utils/debounce.ts
+function debounce(fn, wait) {
+  let timer;
+  const debounced = ((...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = void 0;
+      fn(...args);
+    }, wait);
+  });
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+  };
+  return debounced;
+}
+
+// packages/ui/src/components/location-search.ts
+var RoxyLocationSearch = class extends LitElement16 {
+  constructor() {
+    super(...arguments);
+    this.endpoint = "https://roxyapi.com/api/v2/location/search";
+    this.placeholder = "Search city";
+    this.defaultValue = "";
+    this.query = "";
+    this.results = [];
+    this.isOpen = false;
+    this.isLoading = false;
+    this.highlight = -1;
+    this.secretKeyWarned = false;
+    this.debouncedFetch = debounce((q) => {
+      void this.fetchResults(q);
+    }, 300);
+    this.onInput = (e) => {
+      const value = e.target.value;
+      this.query = value;
+      if (value.length < 2) {
+        this.results = [];
+        this.isOpen = false;
+        this.highlight = -1;
+        return;
+      }
+      this.debouncedFetch(value);
+    };
+    this.onKeyDown = (e) => {
       if (!this.isOpen || this.results.length === 0) {
         if (e.key === "ArrowDown" && this.query.length >= 2) {
           void this.fetchResults(this.query);
@@ -3357,8 +3956,13 @@ var RoxyLocationSearch = class extends LitElement14 {
       const headers = {
         Accept: "application/json"
       };
-      if (this.apiKey) headers["X-API-Key"] = this.apiKey;
-      if (this.publishableKey) headers["X-API-Key"] = this.publishableKey;
+      if (this.apiKey && this.publishableKey) {
+        console.warn(
+          "[roxy-location-search] both api-key and publishable-key set; using publishable-key. Remove api-key from your widget markup."
+        );
+      }
+      const key = this.publishableKey ?? this.apiKey;
+      if (key) headers["X-API-Key"] = key;
       const res = await fetch(url, { headers, signal: controller.signal });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const json = await res.json();
@@ -3390,12 +3994,13 @@ var RoxyLocationSearch = class extends LitElement14 {
     );
   }
   render() {
-    return html14`<div class="field">
+    return html16`<div class="field">
 			<input
 				type="text"
 				role="combobox"
 				aria-expanded=${this.isOpen ? "true" : "false"}
 				aria-controls="roxy-location-listbox"
+				aria-activedescendant=${this.isOpen && this.highlight >= 0 ? `roxy-location-option-${this.highlight}` : ""}
 				aria-autocomplete="list"
 				autocomplete="off"
 				placeholder=${this.placeholder}
@@ -3406,18 +4011,19 @@ var RoxyLocationSearch = class extends LitElement14 {
       if (this.results.length > 0) this.isOpen = true;
     }}
 			/>
-			${this.isLoading ? html14`<span class="spinner" role="status" aria-label="Loading"></span>` : nothing15}
-			${this.isOpen ? html14`<ul
+			${this.isLoading ? html16`<span class="spinner" role="status" aria-label="Loading"></span>` : nothing17}
+			${this.isOpen ? html16`<ul
 						id="roxy-location-listbox"
 						class="results"
 						role="listbox"
 					>
-						${this.results.length === 0 ? html14`<li class="empty" role="status">No cities found</li>` : this.results.map(
-      (city, idx) => html14`<li role="presentation">
+						${this.results.length === 0 ? html16`<li class="empty" role="status">No cities found</li>` : this.results.map(
+      (city, idx) => html16`<li role="presentation">
 										<button
 											type="button"
 											class="option"
 											role="option"
+											id=${`roxy-location-option-${idx}`}
 											aria-selected=${this.highlight === idx ? "true" : "false"}
 											@click=${() => this.select(city)}
 											@mouseenter=${() => {
@@ -3426,7 +4032,7 @@ var RoxyLocationSearch = class extends LitElement14 {
 										>
 											<span class="city">${city.city}</span>
 											<span class="where"
-												>${city.province ? html14`${city.province}, ` : ""}${city.country}</span
+												>${city.province ? html16`${city.province}, ` : ""}${city.country}</span
 											>
 											<span class="tz"
 												>UTC${city.utcOffset >= 0 ? "+" : ""}${city.utcOffset}</span
@@ -3434,13 +4040,13 @@ var RoxyLocationSearch = class extends LitElement14 {
 										</button>
 									</li>`
     )}
-					</ul>` : nothing15}
+					</ul>` : nothing17}
 		</div>`;
   }
 };
 RoxyLocationSearch.styles = [
   baseStyles,
-  css15`
+  css17`
 			:host {
 				display: block;
 				position: relative;
@@ -3544,43 +4150,43 @@ RoxyLocationSearch.styles = [
 		`
 ];
 __decorateClass([
-  property14({ type: String, attribute: "api-key" })
+  property16({ type: String, attribute: "api-key" })
 ], RoxyLocationSearch.prototype, "apiKey", 2);
 __decorateClass([
-  property14({ type: String, attribute: "publishable-key" })
+  property16({ type: String, attribute: "publishable-key" })
 ], RoxyLocationSearch.prototype, "publishableKey", 2);
 __decorateClass([
-  property14({ type: String })
+  property16({ type: String })
 ], RoxyLocationSearch.prototype, "endpoint", 2);
 __decorateClass([
-  property14({ type: String })
+  property16({ type: String })
 ], RoxyLocationSearch.prototype, "placeholder", 2);
 __decorateClass([
-  property14({ type: String, attribute: "default-value" })
+  property16({ type: String, attribute: "default-value" })
 ], RoxyLocationSearch.prototype, "defaultValue", 2);
 __decorateClass([
-  state3()
+  state4()
 ], RoxyLocationSearch.prototype, "query", 2);
 __decorateClass([
-  state3()
+  state4()
 ], RoxyLocationSearch.prototype, "results", 2);
 __decorateClass([
-  state3()
+  state4()
 ], RoxyLocationSearch.prototype, "isOpen", 2);
 __decorateClass([
-  state3()
+  state4()
 ], RoxyLocationSearch.prototype, "isLoading", 2);
 __decorateClass([
-  state3()
+  state4()
 ], RoxyLocationSearch.prototype, "highlight", 2);
 RoxyLocationSearch = __decorateClass([
-  customElement14("roxy-location-search")
+  customElement16("roxy-location-search")
 ], RoxyLocationSearch);
 
 // packages/ui/src/components/moon-phase.ts
-import { css as css16, html as html15, LitElement as LitElement15, nothing as nothing16 } from "lit";
-import { customElement as customElement15, property as property15 } from "lit/decorators.js";
-var RoxyMoonPhase = class extends LitElement15 {
+import { css as css18, html as html17, LitElement as LitElement17, nothing as nothing18 } from "lit";
+import { customElement as customElement17, property as property17 } from "lit/decorators.js";
+var RoxyMoonPhase = class extends LitElement17 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -3589,12 +4195,12 @@ var RoxyMoonPhase = class extends LitElement15 {
   render() {
     const d = this.data;
     if (!d)
-      return html15`<div class="roxy-empty" role="status">No moon phase data</div>`;
+      return html17`<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 html15`<article
+      return html17`<article
 				class="card"
 				aria-label="Moon phase calendar"
 			>
@@ -3604,46 +4210,46 @@ var RoxyMoonPhase = class extends LitElement15 {
 				</div>
 			</article>`;
     }
-    if (!("phase" in d)) return nothing16;
+    if (!("phase" in d)) return nothing18;
     return this.renderSingle(d);
   }
   renderSingle(d) {
     const emoji = phaseEmoji(d.phase);
-    return html15`<article class="card" aria-label="Current moon phase">
+    return html17`<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 ? html15`<div class="date">${d.date}</div>` : nothing16}
+					${d.date ? html17`<div class="date">${d.date}</div>` : nothing18}
 				</div>
 			</div>
 			<div class="stats">
-				${typeof d.illumination === "number" ? html15`<div>
+				${typeof d.illumination === "number" ? html17`<div>
 							<span>Illumination</span>
 							<strong>${formatIllumination(d.illumination)}</strong>
-						</div>` : nothing16}
-				${typeof d.age === "number" ? html15`<div>
+						</div>` : nothing18}
+				${typeof d.age === "number" ? html17`<div>
 							<span>Age</span>
 							<strong>${formatNumber(d.age, 1)} days</strong>
-						</div>` : nothing16}
-				${d.sign ? html15`<div>
+						</div>` : nothing18}
+				${d.sign ? html17`<div>
 							<span>Sign</span>
 							<strong>${d.sign}</strong>
-						</div>` : nothing16}
-				${typeof d.distance === "number" ? html15`<div>
+						</div>` : nothing18}
+				${typeof d.distance === "number" ? html17`<div>
 							<span>Distance</span>
 							<strong>${(d.distance / 1e3).toFixed(0)}k km</strong>
-						</div>` : nothing16}
+						</div>` : nothing18}
 			</div>
-			${d.meaning?.description ? html15`<p class="meaning">${d.meaning.description}</p>` : nothing16}
-			${d.meaning?.keywords?.length ? html15`<div class="keywords">
-						${d.meaning.keywords.map((k) => html15`<span>${k}</span>`)}
-					</div>` : nothing16}
+			${d.meaning?.description ? html17`<p class="meaning">${d.meaning.description}</p>` : nothing18}
+			${d.meaning?.keywords?.length ? html17`<div class="keywords">
+						${d.meaning.keywords.map((k) => html17`<span>${k}</span>`)}
+					</div>` : nothing18}
 		</article>`;
   }
   renderListItem(p) {
     const emoji = phaseEmoji(p.phase);
-    return html15`<div class="list-item" role="listitem">
+    return html17`<div class="list-item" role="listitem">
 			<span aria-hidden="true">${emoji}</span>
 			<span>${p.phase}</span>
 			<span>${p.date ?? ""}</span>
@@ -3652,7 +4258,7 @@ var RoxyMoonPhase = class extends LitElement15 {
 };
 RoxyMoonPhase.styles = [
   baseStyles,
-  css16`
+  css18`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3737,13 +4343,13 @@ RoxyMoonPhase.styles = [
 		`
 ];
 __decorateClass([
-  property15({ attribute: false })
+  property17({ attribute: false })
 ], RoxyMoonPhase.prototype, "data", 2);
 __decorateClass([
-  property15({ type: String, reflect: true })
+  property17({ type: String, reflect: true })
 ], RoxyMoonPhase.prototype, "mode", 2);
 RoxyMoonPhase = __decorateClass([
-  customElement15("roxy-moon-phase")
+  customElement17("roxy-moon-phase")
 ], RoxyMoonPhase);
 function phaseEmoji(phase) {
   if (!phase) return "\u{1F319}";
@@ -3754,109 +4360,312 @@ function formatIllumination(v) {
   return `${Math.round(pct)}%`;
 }
 
-// packages/ui/src/components/natal-chart.ts
-import { css as css17, html as html16, LitElement as LitElement16, nothing as nothing17, svg as svg4 } from "lit";
-import { customElement as customElement16, property as property16 } from "lit/decorators.js";
-
-// packages/ui/src/utils/degree.ts
-function polarToCartesian(cx, cy, radius, angleDeg) {
-  const angleRad = angleDeg * Math.PI / 180;
-  return {
-    x: cx + radius * Math.cos(angleRad),
-    y: cy + radius * Math.sin(angleRad)
-  };
-}
-
-// packages/ui/src/components/natal-chart.ts
-var SIZE = 420;
-var CENTER = SIZE / 2;
-var OUTER_R = 164;
-var SIGN_R = 146;
-var HOUSE_R = 120;
-var PLANET_R = 96;
-var ANGLE_TICK_R = 178;
-var ANGLE_LABEL_R = 196;
-var RoxyNatalChart = class extends LitElement16 {
+// packages/ui/src/components/nakshatra-card.ts
+import { css as css19, html as html18, LitElement as LitElement18, nothing as nothing19 } from "lit";
+import { customElement as customElement18, property as property18 } from "lit/decorators.js";
+var RoxyNakshatraCard = class extends LitElement18 {
   constructor() {
     super(...arguments);
     this.data = null;
-    this.houseSystem = "placidus";
-  }
-  getPlanets() {
-    return this.data?.planets ?? [];
-  }
-  getAscendant() {
-    return this.data?.ascendant?.longitude ?? 0;
-  }
-  getMidheaven() {
-    const m = this.data?.midheaven?.longitude;
-    return typeof m === "number" ? m : null;
-  }
-  toAngle(lon) {
-    return 180 + this.getAscendant() - lon;
   }
   render() {
     if (!this.data)
-      return html16`<div class="roxy-empty" role="status">No chart data</div>`;
-    const planets = this.getPlanets();
-    const aspects = this.data.aspects ?? [];
-    return html16`<div class="wrap">
-			<header>
-				<h2 class="title">Natal chart</h2>
-				${this.data.birthDetails ? html16`<div class="meta">
-							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
-						</div>` : nothing17}
+      return html18`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+    const n = this.data;
+    const remedies = n.remedies;
+    return html18`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+			<header class="head">
+				<h2 class="name">${n.name}</h2>
+				${typeof n.number === "number" ? html18`<span class="number">Nakshatra ${n.number} of 27</span>` : nothing19}
+				${n.range ? html18`<span class="range">${n.range}</span>` : nothing19}
 			</header>
-			<svg
-				viewBox="0 0 ${SIZE} ${SIZE}"
-				role="img"
-				aria-label="Natal chart wheel with twelve houses, planets, and aspects"
-			>
-				<title>Natal chart wheel</title>
-				<desc>
-					Twelve zodiac sign segments around a circular wheel. Planet glyphs are
-					placed at their ecliptic longitudes. Aspect lines connect related planets.
-				</desc>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${OUTER_R}
-					stroke-width="1.5"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${HOUSE_R}
-					stroke-width="1"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${PLANET_R - 16}
-					stroke-width="0.5"
-				/>
-				${this.renderSpokes()} ${this.renderSigns()} ${this.renderHouseNumbers()}
-				${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
-				${this.renderAngles()}
-			</svg>
-			<div class="legend">
-				<span>${planets.length} planets</span>
-				<span>${aspects.length} aspects</span>
-				<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>
-			${this.renderDetails()}
-			${this.renderInterpretations()}
-		</div>`;
+
+			<dl class="facts">
+				${n.lord ? html18`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing19}
+				${n.deity ? html18`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing19}
+				${n.symbol ? html18`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing19}
+			</dl>
+
+			${n.characteristics ? html18`<div class="section">
+						<h3>Characteristics</h3>
+						<p>${n.characteristics}</p>
+					</div>` : nothing19}
+
+			${remedies ? html18`<div class="section">
+						<h3>Remedies</h3>
+						<div class="remedies">
+							${remedies.mantras ? html18`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing19}
+							${remedies.gemstones ? html18`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing19}
+							${remedies.rituals ? html18`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing19}
+						</div>
+					</div>` : nothing19}
+		</article>`;
+  }
+};
+RoxyNakshatraCard.styles = [
+  baseStyles,
+  css19`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.number {
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.range {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.facts {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.fact {
+				display: grid;
+				gap: 2px;
+			}
+			.fact dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.fact dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.section h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.section p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.5;
+			}
+			.remedies {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.remedy {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.remedy strong {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+		`
+];
+__decorateClass([
+  property18({ attribute: false })
+], RoxyNakshatraCard.prototype, "data", 2);
+RoxyNakshatraCard = __decorateClass([
+  customElement18("roxy-nakshatra-card")
+], RoxyNakshatraCard);
+
+// packages/ui/src/components/natal-chart.ts
+import { css as css20, html as html19, LitElement as LitElement19, nothing as nothing20, svg as svg4 } from "lit";
+import { customElement as customElement19, property as property19, state as state5 } from "lit/decorators.js";
+var SIZE = 420;
+var CENTER = SIZE / 2;
+var OUTER_R = 164;
+var SIGN_R = 146;
+var HOUSE_R = 120;
+var PLANET_R = 96;
+var ANGLE_TICK_R = 178;
+var ANGLE_LABEL_R = 196;
+var RoxyNatalChart = class extends LitElement19 {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.houseSystem = "placidus";
+    this.view = "wheel";
+  }
+  getPlanets() {
+    return this.data?.planets ?? [];
+  }
+  getAscendant() {
+    return this.data?.ascendant?.longitude ?? 0;
+  }
+  getMidheaven() {
+    const m = this.data?.midheaven?.longitude;
+    return typeof m === "number" ? m : null;
+  }
+  toAngle(lon) {
+    return 180 + this.getAscendant() - lon;
+  }
+  render() {
+    if (!this.data)
+      return html19`<div class="roxy-empty" role="status">No chart data</div>`;
+    const planets = this.getPlanets();
+    const aspects = this.data.aspects ?? [];
+    const view = this.view;
+    return html19`<div class="wrap">
+			<header>
+				<h2 class="title">Natal chart</h2>
+				${this.data.birthDetails ? html19`<div class="meta">
+							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
+						</div>` : nothing20}
+			</header>
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="Natal chart views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${["wheel", "grid"].map(
+      (t) => html19`<button
+						class="tab"
+						role="tab"
+						id="tab-${t}"
+						aria-selected=${view === t ? "true" : "false"}
+						aria-controls="panel-${t}"
+						tabindex=${view === t ? "0" : "-1"}
+						@click=${() => {
+        this.view = t;
+      }}
+					>
+						${t === "wheel" ? "Wheel" : "Aspect grid"}
+					</button>`
+    )}
+			</div>
+			<div id="panel-${view}" role="tabpanel" aria-labelledby="tab-${view}">
+				${view === "wheel" ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
+			</div>
+			<div class="legend">
+				<span>${planets.length} planets</span>
+				<span>${aspects.length} aspects</span>
+				${this.data.houseSystem ? html19`<span>${this.data.houseSystem} houses</span>` : nothing20}
+				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
+				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
+			</div>
+			${this.renderDetails()}
+			${this.renderInterpretations()}
+		</div>`;
+  }
+  onTabKeyDown(e) {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+    e.preventDefault();
+    this.view = this.view === "wheel" ? "grid" : "wheel";
+    const next = this.view;
+    requestAnimationFrame(() => {
+      this.shadowRoot?.querySelector(`#tab-${next}`)?.focus();
+    });
+  }
+  renderWheel(planets, aspects) {
+    return html19`<svg
+			viewBox="0 0 ${SIZE} ${SIZE}"
+			role="img"
+			aria-label="Natal chart wheel with twelve houses, planets, and aspects"
+		>
+			<title>Natal chart wheel</title>
+			<desc>
+				Twelve zodiac sign segments around a circular wheel. Planet glyphs are
+				placed at their ecliptic longitudes. Aspect lines connect related planets.
+			</desc>
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${OUTER_R} stroke-width="1.5" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${SIGN_R - 14} stroke-width="0.8" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${HOUSE_R} stroke-width="1" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${PLANET_R - 16} stroke-width="0.5" />
+			${this.renderTicks()} ${this.renderSpokes()} ${this.renderSigns()}
+			${this.renderHouseNumbers()} ${this.renderCuspDegrees()}
+			${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
+			${this.renderAngles()}
+		</svg>`;
+  }
+  /**
+   * Planet-by-planet aspect grid: the lower-triangular matrix astrologers read
+   * alongside the wheel. Each filled cell shows the aspect glyph colored by
+   * nature, with the exact orb in the SVG-free `<title>` tooltip.
+   */
+  renderAspectGrid(planets, aspects) {
+    const names = planets.map((p) => capitalize(p.name));
+    const byPair = /* @__PURE__ */ new Map();
+    for (const a of aspects) {
+      const k = [capitalize(a.planet1), capitalize(a.planet2)].sort().join("|");
+      byPair.set(k, a);
+    }
+    if (names.length === 0)
+      return html19`<p class="roxy-empty" role="status">No planets to grid</p>`;
+    return html19`<div class="grid-scroll">
+			<table class="aspect-grid" aria-label="Planet by planet aspect grid">
+				<thead>
+					<tr>
+						<th></th>
+						${names.slice(0, -1).map((n) => {
+      const g = PLANET_GLYPH[n] ?? n.slice(0, 2);
+      return html19`<th scope="col" title=${n}>${g}</th>`;
+    })}
+					</tr>
+				</thead>
+				<tbody>
+					${names.slice(1).map((rowName, ri) => {
+      const rowGlyph = PLANET_GLYPH[rowName] ?? rowName.slice(0, 2);
+      return html19`<tr>
+							<th scope="row" title=${rowName}>${rowGlyph}</th>
+							${names.slice(0, ri + 1).map((colName) => {
+        const a = byPair.get([rowName, colName].sort().join("|"));
+        if (!a) return html19`<td class="empty"></td>`;
+        const name = normalizeAspect(a);
+        const sym = ASPECT_SYMBOL[name] ?? ASPECT_SYMBOL[name.replace(/-/g, "")] ?? name.slice(0, 3);
+        const cls = ASPECT_CLASS[name] ?? "aspect-other";
+        const orb = formatNumber(a.orb, 1);
+        return html19`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
+									<span class="asp">${sym}</span>
+								</td>`;
+      })}
+							${names.slice(ri + 1, -1).map(() => html19`<td class="empty"></td>`)}
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
   }
   renderAngles() {
     const asc = this.getAscendant();
     const mc = this.getMidheaven();
-    const items = [this.renderAngleMark(asc, "ASC")];
-    if (mc !== null) items.push(this.renderAngleMark(mc, "MC"));
+    const items = [
+      this.renderAngleMark(asc, "ASC"),
+      this.renderAngleMark(oppositePoint(asc), "DSC")
+    ];
+    if (mc !== null) {
+      items.push(this.renderAngleMark(mc, "MC"));
+      items.push(this.renderAngleMark(oppositePoint(mc), "IC"));
+    }
+    const pof = this.data?.partOfFortune?.longitude;
+    if (typeof pof === "number") {
+      items.push(this.renderAngleMark(normalizeLongitude(pof), "PoF"));
+    }
+    const vertex = this.data?.vertex?.longitude;
+    if (typeof vertex === "number") {
+      items.push(this.renderAngleMark(normalizeLongitude(vertex), "Vtx"));
+    }
     return items;
   }
   renderAngleMark(longitude, label) {
@@ -3872,8 +4681,10 @@ var RoxyNatalChart = class extends LitElement16 {
 		`;
   }
   renderSpokes() {
-    return Array.from({ length: 12 }, (_, i) => {
-      const angle = this.toAngle(i * 30);
+    const houses = this.data?.houses ?? [];
+    const cuspLongitudes = houses.length === 12 ? houses.map((h) => h.longitude) : Array.from({ length: 12 }, (_, i) => this.getAscendant() + i * 30);
+    return cuspLongitudes.map((lon) => {
+      const angle = this.toAngle(lon);
       const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
       const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
       return svg4`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
@@ -3887,6 +4698,23 @@ var RoxyNatalChart = class extends LitElement16 {
     });
   }
   renderHouseNumbers() {
+    const houses = this.data?.houses ?? [];
+    if (houses.length === 12) {
+      return houses.map((house, i) => {
+        const next = houses[(i + 1) % 12];
+        const mid = arcMidpoint(
+          house.longitude,
+          next ? next.longitude : house.longitude + 30
+        );
+        const pos = polarToCartesian(
+          CENTER,
+          CENTER,
+          HOUSE_R - 12,
+          this.toAngle(mid)
+        );
+        return svg4`<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);
     return Array.from({ length: 12 }, (_, i) => {
       const angle = this.toAngle(i * 30 + 15);
@@ -3895,82 +4723,150 @@ var RoxyNatalChart = class extends LitElement16 {
       return svg4`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
     });
   }
+  /**
+   * Degree ticks on the outer zodiac band: a short mark every 5 degrees and a
+   * longer one on each 30-degree sign cusp, so the wheel reads like a
+   * reference-grade chart rather than a bare ring of glyphs.
+   */
+  renderTicks() {
+    const ticks = [];
+    for (let deg = 0; deg < 360; deg += 5) {
+      const angle = this.toAngle(deg);
+      const isMajor = deg % 30 === 0;
+      const inner = isMajor ? SIGN_R - 14 : OUTER_R - 5;
+      const a = polarToCartesian(CENTER, CENTER, inner, angle);
+      const b = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
+      ticks.push(
+        svg4`<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;
+  }
+  /**
+   * Degree-and-minute label printed next to each house cusp on the wheel, so
+   * the exact cusp position is readable without leaving the chart.
+   */
+  renderCuspDegrees() {
+    const houses = this.data?.houses ?? [];
+    if (houses.length !== 12) return nothing20;
+    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 svg4`<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 nothing17;
+      if (!Number.isFinite(p.longitude)) return nothing20;
       const angle = this.toAngle(p.longitude);
-      const pos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
+      const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
+      const degPos = polarToCartesian(CENTER, CENTER, PLANET_R - 13, angle);
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-      const retro = p.isRetrograde ? " R" : "";
-      const display = retro ? `${glyph}\u1D3F` : glyph;
-      return svg4`<text class="planet-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro}</title>${display}</text>`;
+      const sp = longitudeToSignPosition(p.longitude);
+      const retro = p.isRetrograde === true;
+      const degLabel = `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}'`;
+      return svg4`<g>
+				<text class="planet-glyph" x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${p.sign ?? ""}</title>${glyph}</text>
+				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? svg4`<tspan class="retro"> ℞</tspan>` : nothing20}</text>
+			</g>`;
     });
   }
   renderDetails() {
     const summary = this.data?.summary;
     const ai = this.data?.aspectsInterpretation;
-    if (!summary && !ai) return nothing17;
+    if (!summary && !ai) return nothing20;
     const retrogrades = summary?.retrogradePlanets ?? [];
-    const elementDist = summary?.elementDistribution ?? {};
-    const modalityDist = summary?.modalityDistribution ?? {};
-    const elementMax = Math.max(1, ...Object.values(elementDist));
-    const modalityMax = Math.max(1, ...Object.values(modalityDist));
-    return html16`<div class="details">
-			${summary?.dominantElement || summary?.dominantModality ? html16`<div class="pill-row">
-						${summary.dominantElement ? html16`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing17}
-						${summary.dominantModality ? html16`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing17}
-					</div>` : nothing17}
-			${ai ? html16`<div class="pill-row">
+    return html19`<div class="details">
+			${summary?.dominantElement || summary?.dominantModality ? html19`<div class="pill-row">
+						${summary.dominantElement ? html19`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing20}
+						${summary.dominantModality ? html19`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing20}
+					</div>` : nothing20}
+			${ai ? html19`<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>` : nothing17}
-			${retrogrades.length > 0 ? html16`<div class="pill-row">
+					</div>` : nothing20}
+			${retrogrades.length > 0 ? html19`<div class="pill-row">
 						${retrogrades.map((p) => {
       const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
-      return html16`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+      return html19`<span class="pill pill--muted">${glyph} ${p} R</span>`;
     })}
-					</div>` : nothing17}
-			${ai?.summary ? html16`<p class="summary">${ai.summary}</p>` : nothing17}
-			${Object.keys(elementDist).length > 0 || Object.keys(modalityDist).length > 0 ? html16`<div class="dist-grid">
-						${Object.keys(elementDist).length > 0 ? html16`<div class="dist-section">
-									<h3>Elements</h3>
-									${Object.entries(elementDist).map(
-      ([label, count]) => html16`<div class="dist-row">
-											<span>${label}</span>
-											<div class="dist-bar"><span style="width: ${Math.round(count / elementMax * 100)}%"></span></div>
-											<span>${count}</span>
-										</div>`
-    )}
-								</div>` : nothing17}
-						${Object.keys(modalityDist).length > 0 ? html16`<div class="dist-section">
-									<h3>Modalities</h3>
-									${Object.entries(modalityDist).map(
-      ([label, count]) => html16`<div class="dist-row">
-											<span>${label}</span>
-											<div class="dist-bar"><span style="width: ${Math.round(count / modalityMax * 100)}%"></span></div>
-											<span>${count}</span>
-										</div>`
-    )}
-								</div>` : nothing17}
-					</div>` : nothing17}
+					</div>` : nothing20}
+			${ai?.summary ? html19`<p class="summary">${ai.summary}</p>` : nothing20}
+			${this.renderElementModalityGrid()}
 		</div>`;
   }
+  /**
+   * Element by modality grid: the 4x3 cross-tab astrologers read for chart
+   * balance. Each planet is placed by its sign into one cell (Fire/Earth/Air/
+   * Water row, Cardinal/Fixed/Mutable column). Derived purely from the planet
+   * signs, with row, column, and grand totals.
+   */
+  renderElementModalityGrid() {
+    const planets = this.getPlanets();
+    if (planets.length === 0) return nothing20;
+    const ELEMENTS = ["Fire", "Earth", "Air", "Water"];
+    const MODALITIES = ["Cardinal", "Fixed", "Mutable"];
+    const order = SIGNS_ORDER;
+    const cells = {};
+    for (const el of ELEMENTS)
+      cells[el] = { Cardinal: [], Fixed: [], Mutable: [] };
+    for (const p of planets) {
+      const idx = order.indexOf(capitalize(p.sign ?? ""));
+      if (idx < 0) continue;
+      const el = ELEMENTS[idx % 4];
+      const mod = MODALITIES[idx % 3];
+      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? capitalize(p.name).slice(0, 2);
+      cells[el]?.[mod]?.push(glyph);
+    }
+    return html19`<table class="em-grid" aria-label="Element and modality distribution">
+			<thead>
+				<tr>
+					<th></th>
+					${MODALITIES.map((m) => html19`<th scope="col">${m.slice(0, 3)}</th>`)}
+					<th scope="col">Total</th>
+				</tr>
+			</thead>
+			<tbody>
+				${ELEMENTS.map((el) => {
+      const rowTotal = MODALITIES.reduce(
+        (s, m) => s + (cells[el]?.[m]?.length ?? 0),
+        0
+      );
+      return html19`<tr>
+						<th scope="row">${el}</th>
+						${MODALITIES.map(
+        (m) => html19`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
+      )}
+						<td class="em-total">${rowTotal}</td>
+					</tr>`;
+    })}
+				<tr>
+					<th scope="row">Total</th>
+					${MODALITIES.map(
+      (m) => html19`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
+    )}
+					<td class="em-total">${planets.length}</td>
+				</tr>
+			</tbody>
+		</table>`;
+  }
   renderInterpretations() {
     const planets = this.getPlanets().filter((p) => p.interpretation);
-    if (planets.length === 0) return nothing17;
-    return html16`<section class="interpretations">
+    if (planets.length === 0) return nothing20;
+    return html19`<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 html16`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
+      return html19`<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 ? html16`<p class="interp-summary">${interp.summary}</p>` : nothing17}
-						${interp.detailed ? html16`<p class="interp-detail">${interp.detailed}</p>` : nothing17}
-						${interp.keywords?.length ? html16`<div class="interp-keywords">${interp.keywords.map((k) => html16`<span class="kw">${k}</span>`)}</div>` : nothing17}
+						${interp.summary ? html19`<p class="interp-summary">${interp.summary}</p>` : nothing20}
+						${interp.detailed ? html19`<p class="interp-detail">${interp.detailed}</p>` : nothing20}
+						${interp.keywords?.length ? html19`<div class="interp-keywords">${interp.keywords.map((k) => html19`<span class="kw">${k}</span>`)}</div>` : nothing20}
 					</div>
 				</details>`;
     })}
@@ -3986,7 +4882,7 @@ var RoxyNatalChart = class extends LitElement16 {
     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 nothing17;
+      if (l1 === void 0 || l2 === void 0) return nothing20;
       const p1 = polarToCartesian(
         CENTER,
         CENTER,
@@ -4008,7 +4904,7 @@ var RoxyNatalChart = class extends LitElement16 {
 };
 RoxyNatalChart.styles = [
   baseStyles,
-  css17`
+  css20`
 			.wrap {
 				width: 100%;
 				display: grid;
@@ -4053,12 +4949,35 @@ RoxyNatalChart.styles = [
 				font-family: var(--roxy-font-sans);
 			}
 
+			.planet-deg {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 7px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.planet-deg .retro {
+				fill: var(--roxy-danger, #dc2626);
+			}
+
 			.house-num {
 				fill: var(--roxy-muted, #71717a);
 				font-size: 9px;
 				font-family: var(--roxy-font-sans);
 			}
 
+			.cusp-deg {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 6px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.tick {
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.tick-major {
+				stroke: var(--roxy-secondary, #475569);
+			}
+
 			.aspect {
 				stroke-width: 0.8;
 				fill: none;
@@ -4108,6 +5027,78 @@ RoxyNatalChart.styles = [
 				vertical-align: middle;
 			}
 
+			.tablist {
+				display: flex;
+				gap: 2px;
+				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+			}
+			.tab {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: none;
+				border: none;
+				border-bottom: 2px solid transparent;
+				margin-bottom: -2px;
+				cursor: pointer;
+				color: var(--roxy-muted, #71717a);
+				font-family: inherit;
+				transition: color var(--roxy-motion-duration, 200ms) var(--roxy-motion-easing, ease);
+			}
+			.tab[aria-selected='true'] {
+				color: var(--roxy-accent-fg, #b45309);
+				border-bottom-color: var(--roxy-accent, #f59e0b);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.tab:hover:not([aria-selected='true']) {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.grid-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+			table.aspect-grid {
+				border-collapse: collapse;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin: 0 auto;
+			}
+			table.aspect-grid th,
+			table.aspect-grid td {
+				width: 1.6rem;
+				height: 1.6rem;
+				text-align: center;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				padding: 0;
+			}
+			table.aspect-grid th {
+				color: var(--roxy-secondary, #475569);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table.aspect-grid td.cell {
+				cursor: default;
+			}
+			table.aspect-grid td.empty {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 18%, transparent);
+			}
+			table.aspect-grid td .asp {
+				font-size: 0.95em;
+				line-height: 1;
+			}
+			table.aspect-grid td.aspect-trine .asp,
+			table.aspect-grid td.aspect-sextile .asp {
+				color: var(--roxy-success, #16a34a);
+			}
+			table.aspect-grid td.aspect-square .asp,
+			table.aspect-grid td.aspect-opposition .asp {
+				color: var(--roxy-danger, #dc2626);
+			}
+			table.aspect-grid td.aspect-conjunction .asp {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			table.aspect-grid td.aspect-other .asp {
+				color: var(--roxy-muted, #71717a);
+			}
+
 			.details {
 				margin-top: var(--roxy-space-md, 1rem);
 			}
@@ -4148,48 +5139,37 @@ RoxyNatalChart.styles = [
 				margin: var(--roxy-space-md, 1rem) 0;
 			}
 
-			.dist-grid {
-				display: grid;
-				grid-template-columns: 1fr 1fr;
-				gap: var(--roxy-space-md, 1rem);
+			.em-grid {
+				border-collapse: collapse;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				width: 100%;
 			}
-
-			@container (max-width: 639px) {
-				.dist-grid {
-					grid-template-columns: 1fr;
-				}
+			.em-grid th,
+			.em-grid td {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				padding: 3px 5px;
+				text-align: center;
+				vertical-align: middle;
 			}
-
-			.dist-section h3 {
-				font-size: var(--roxy-text-xs, 0.75rem);
-				font-weight: var(--roxy-weight-bold, 600);
+			.em-grid th {
 				color: var(--roxy-muted, #71717a);
-				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-weight: var(--roxy-weight-bold, 600);
 				text-transform: uppercase;
-				letter-spacing: 0.05em;
-			}
-
-			.dist-row {
-				display: grid;
-				grid-template-columns: 4rem 1fr 1.5rem;
-				align-items: center;
-				gap: var(--roxy-space-xs, 0.25rem);
-				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-fg, #0f172a);
-				margin-bottom: 4px;
+				letter-spacing: 0.04em;
 			}
-
-			.dist-bar {
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 20%, transparent);
-				height: 6px;
-				border-radius: 3px;
+			.em-grid th[scope='row'] {
+				text-align: left;
 			}
-
-			.dist-bar > span {
-				display: block;
-				height: 100%;
-				background: var(--roxy-accent, #f59e0b);
-				border-radius: 3px;
+			.em-grid td {
+				color: var(--roxy-accent, #f59e0b);
+				font-size: 0.95em;
+				line-height: 1.4;
+				min-width: 1.4rem;
+			}
+			.em-grid .em-total {
+				color: var(--roxy-fg, #0a0a0a);
+				font-weight: var(--roxy-weight-bold, 600);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 25%, transparent);
 			}
 
 			.interpretations {
@@ -4240,19 +5220,22 @@ RoxyNatalChart.styles = [
 		`
 ];
 __decorateClass([
-  property16({ attribute: false })
+  property19({ attribute: false })
 ], RoxyNatalChart.prototype, "data", 2);
 __decorateClass([
-  property16({ type: String, attribute: "house-system", reflect: true })
+  property19({ type: String, attribute: "house-system", reflect: true })
 ], RoxyNatalChart.prototype, "houseSystem", 2);
+__decorateClass([
+  state5()
+], RoxyNatalChart.prototype, "view", 2);
 RoxyNatalChart = __decorateClass([
-  customElement16("roxy-natal-chart")
+  customElement19("roxy-natal-chart")
 ], RoxyNatalChart);
 
 // packages/ui/src/components/numerology-card.ts
-import { css as css18, html as html17, LitElement as LitElement17, nothing as nothing18 } from "lit";
-import { customElement as customElement17, property as property17 } from "lit/decorators.js";
-var RoxyNumerologyCard = class extends LitElement17 {
+import { css as css21, html as html20, LitElement as LitElement20, nothing as nothing21 } from "lit";
+import { customElement as customElement20, property as property20 } from "lit/decorators.js";
+var RoxyNumerologyCard = class extends LitElement20 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4261,7 +5244,7 @@ var RoxyNumerologyCard = class extends LitElement17 {
   render() {
     const d = this.data;
     if (!d)
-      return html17`<div class="roxy-empty" role="status">No numerology data</div>`;
+      return html20`<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);
@@ -4272,61 +5255,61 @@ var RoxyNumerologyCard = class extends LitElement17 {
   }
   renderNumberCard(d, headerLabel) {
     const keywords = d.meaning?.keywords ?? [];
-    return html17`<article class="card" aria-label=${headerLabel}>
+    return html20`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.number === "number" ? html17`<div class="numeral">${d.number}</div>` : nothing18}
+				${typeof d.number === "number" ? html20`<div class="numeral">${d.number}</div>` : nothing21}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.meaning?.title ? html17`<h2 class="title">${d.meaning.title}</h2>` : nothing18}
+					${d.meaning?.title ? html20`<h2 class="title">${d.meaning.title}</h2>` : nothing21}
 				</div>
 			</div>
-			${d.meaning?.description ? html17`<p class="meaning">${d.meaning.description}</p>` : nothing18}
-			${d.calculation ? html17`<pre class="calc">${d.calculation}</pre>` : nothing18}
-			${keywords.length > 0 ? html17`<div class="chips">
-						${keywords.map((k) => html17`<span>${k}</span>`)}
-					</div>` : nothing18}
-			${d.hasKarmicDebt && d.karmicDebtNumber ? html17`<div class="karmic">
+			${d.meaning?.description ? html20`<p class="meaning">${d.meaning.description}</p>` : nothing21}
+			${d.calculation ? html20`<pre class="calc">${d.calculation}</pre>` : nothing21}
+			${keywords.length > 0 ? html20`<div class="chips">
+						${keywords.map((k) => html20`<span>${k}</span>`)}
+					</div>` : nothing21}
+			${d.hasKarmicDebt && d.karmicDebtNumber ? html20`<div class="karmic">
 						Karmic debt ${d.karmicDebtNumber}.
 						${karmicDebtText(d.karmicDebtMeaning)}
-					</div>` : nothing18}
+					</div>` : nothing21}
 		</article>`;
   }
   renderPersonalYear(d, headerLabel) {
-    return html17`<article class="card" aria-label=${headerLabel}>
+    return html20`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.personalYear === "number" ? html17`<div class="numeral">${d.personalYear}</div>` : nothing18}
+				${typeof d.personalYear === "number" ? html20`<div class="numeral">${d.personalYear}</div>` : nothing21}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.theme ? html17`<h2 class="title">${d.theme}</h2>` : nothing18}
+					${d.theme ? html20`<h2 class="title">${d.theme}</h2>` : nothing21}
 				</div>
 			</div>
-			${d.forecast ? html17`<p class="meaning">${d.forecast}</p>` : nothing18}
-			${d.advice ? html17`<p>${d.advice}</p>` : nothing18}
+			${d.forecast ? html20`<p class="meaning">${d.forecast}</p>` : nothing21}
+			${d.advice ? html20`<p>${d.advice}</p>` : nothing21}
 		</article>`;
   }
   renderChart(d, headerLabel) {
     const cores = Object.entries(d.coreNumbers).filter(
       ([, v]) => v !== null && v !== void 0
     );
-    return html17`<article class="card" aria-label=${headerLabel}>
+    return html20`<article class="card" aria-label=${headerLabel}>
 			<div>
 				<p class="label">${headerLabel}</p>
-				${d.profile?.name ? html17`<h2 class="title">${d.profile.name}</h2>` : nothing18}
+				${d.profile?.name ? html20`<h2 class="title">${d.profile.name}</h2>` : nothing21}
 			</div>
-			${cores.length > 0 ? html17`<div class="cores">
+			${cores.length > 0 ? html20`<div class="cores">
 						${cores.map(
-      ([k, v]) => html17`<div class="item">
+      ([k, v]) => html20`<div class="item">
 								<span>${humanize(k)}</span>
 								<strong>${v.number ?? ""}</strong>
 							</div>`
     )}
-					</div>` : nothing18}
+					</div>` : nothing21}
 		</article>`;
   }
 };
 RoxyNumerologyCard.styles = [
   baseStyles,
-  css18`
+  css21`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -4425,13 +5408,13 @@ RoxyNumerologyCard.styles = [
 		`
 ];
 __decorateClass([
-  property17({ attribute: false })
+  property20({ attribute: false })
 ], RoxyNumerologyCard.prototype, "data", 2);
 __decorateClass([
-  property17({ type: String, reflect: true })
+  property20({ type: String, reflect: true })
 ], RoxyNumerologyCard.prototype, "type", 2);
 RoxyNumerologyCard = __decorateClass([
-  customElement17("roxy-numerology-card")
+  customElement20("roxy-numerology-card")
 ], RoxyNumerologyCard);
 var LABELS = {
   "life-path": "Life Path",
@@ -4445,9 +5428,9 @@ function karmicDebtText(value) {
 }
 
 // packages/ui/src/components/panchang-table.ts
-import { css as css19, html as html18, LitElement as LitElement18, nothing as nothing19 } from "lit";
-import { customElement as customElement18, property as property18 } from "lit/decorators.js";
-var RoxyPanchangTable = class extends LitElement18 {
+import { css as css22, html as html21, LitElement as LitElement21, nothing as nothing22 } from "lit";
+import { customElement as customElement21, property as property21 } from "lit/decorators.js";
+var RoxyPanchangTable = class extends LitElement21 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4456,7 +5439,7 @@ var RoxyPanchangTable = class extends LitElement18 {
   render() {
     const d = this.data;
     if (!d)
-      return html18`<div class="roxy-empty" role="status">No panchang data</div>`;
+      return html21`<div class="roxy-empty" role="status">No panchang data</div>`;
     const detailed = "sunrise" in d ? d : null;
     const fivefold = [
       ["Tithi", this.formatPart(d.tithi)],
@@ -4479,7 +5462,7 @@ var RoxyPanchangTable = class extends LitElement18 {
       ["Yamaganda", detailed.yamaganda],
       ["Gulika", detailed.gulika]
     ] : [];
-    return html18`<div class="wrap" aria-label="Panchang">
+    return html21`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
 				<span class="date">${detailed ? formatDate(detailed.date) : ""}</span>
@@ -4487,35 +5470,35 @@ var RoxyPanchangTable = class extends LitElement18 {
 			<table>
 				<tbody>
 					${fivefold.map(
-      ([k, v]) => html18`<tr>
+      ([k, v]) => html21`<tr>
 							<th>${k}</th>
 							<td>${v}</td>
 						</tr>`
     )}
-					${detailed?.sunrise ? html18`<tr>
+					${detailed?.sunrise ? html21`<tr>
 								<th>Sunrise</th>
 								<td>${formatTime(detailed.sunrise)}</td>
-							</tr>` : nothing19}
-					${detailed?.sunset ? html18`<tr>
+							</tr>` : nothing22}
+					${detailed?.sunset ? html21`<tr>
 								<th>Sunset</th>
 								<td>${formatTime(detailed.sunset)}</td>
-							</tr>` : nothing19}
-					${detailed?.moonrise ? html18`<tr>
+							</tr>` : nothing22}
+					${detailed?.moonrise ? html21`<tr>
 								<th>Moonrise</th>
 								<td>${formatTime(detailed.moonrise)}</td>
-							</tr>` : nothing19}
-					${detailed?.moonset ? html18`<tr>
+							</tr>` : nothing22}
+					${detailed?.moonset ? html21`<tr>
 								<th>Moonset</th>
 								<td>${formatTime(detailed.moonset)}</td>
-							</tr>` : nothing19}
+							</tr>` : nothing22}
 				</tbody>
 			</table>
-			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? html18`
+			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? html21`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
 								${muhurtas.filter(([, v]) => !!v).map(
-      ([k, v]) => html18`<tr>
+      ([k, v]) => html21`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
@@ -4526,14 +5509,14 @@ var RoxyPanchangTable = class extends LitElement18 {
 						<table>
 							<tbody>
 								${inauspicious.filter(([, v]) => !!v).map(
-      ([k, v]) => html18`<tr>
+      ([k, v]) => html21`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
     )}
 							</tbody>
 						</table>
-					` : nothing19}
+					` : nothing22}
 		</div>`;
   }
   formatPart(v) {
@@ -4553,7 +5536,7 @@ var RoxyPanchangTable = class extends LitElement18 {
 };
 RoxyPanchangTable.styles = [
   baseStyles,
-  css19`
+  css22`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -4614,18 +5597,18 @@ RoxyPanchangTable.styles = [
 		`
 ];
 __decorateClass([
-  property18({ attribute: false })
+  property21({ attribute: false })
 ], RoxyPanchangTable.prototype, "data", 2);
 __decorateClass([
-  property18({ type: String, reflect: true })
+  property21({ type: String, reflect: true })
 ], RoxyPanchangTable.prototype, "detail", 2);
 RoxyPanchangTable = __decorateClass([
-  customElement18("roxy-panchang-table")
+  customElement21("roxy-panchang-table")
 ], RoxyPanchangTable);
 
 // packages/ui/src/components/shadbala-table.ts
-import { css as css20, html as html19, LitElement as LitElement19, nothing as nothing20 } from "lit";
-import { customElement as customElement19, property as property19 } from "lit/decorators.js";
+import { css as css23, html as html22, LitElement as LitElement22, nothing as nothing23 } from "lit";
+import { customElement as customElement22, property as property22 } from "lit/decorators.js";
 var BALA_COMPONENTS = [
   { key: "sthanaBala", label: "Sthana", color: "var(--roxy-info, #0284c7)" },
   { key: "digBala", label: "Dig", color: "var(--roxy-success, #16a34a)" },
@@ -4638,19 +5621,19 @@ var BALA_COMPONENTS = [
   },
   { key: "drikBala", label: "Drik", color: "var(--roxy-danger, #dc2626)" }
 ];
-var RoxyShadbalaTable = class extends LitElement19 {
+var RoxyShadbalaTable = class extends LitElement22 {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.planets?.length) {
-      return html19`<div class="roxy-empty" role="status">No shadbala data</div>`;
+      return html22`<div class="roxy-empty" role="status">No shadbala data</div>`;
     }
     const sorted = [...this.data.planets].sort(
       (a, b) => a.relativeRank - b.relativeRank
     );
-    return html19`<div class="wrap" aria-label="Shadbala planetary strength">
+    return html22`<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>
@@ -4662,7 +5645,7 @@ var RoxyShadbalaTable = class extends LitElement19 {
 
 			<div class="legend" aria-label="Strength component legend">
 				${BALA_COMPONENTS.map(
-      (b) => html19`<div class="legend-row">
+      (b) => html22`<div class="legend-row">
 						<span
 							class="legend-swatch"
 							style="background: ${b.color}"
@@ -4682,7 +5665,7 @@ var RoxyShadbalaTable = class extends LitElement19 {
     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 html19`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+    return html22`<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}
@@ -4692,18 +5675,18 @@ var RoxyShadbalaTable = class extends LitElement19 {
 				<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 nothing20;
+      if (v <= 0) return nothing23;
       const grow = v / total * 100;
-      return html19`<div
+      return html22`<div
 									class="bar-segment"
 									style="flex-grow: ${grow}; background: ${b.color};"
 									title="${b.label}: ${formatNumber(v, 1)}"
 								></div>`;
-    }) : nothing20}
+    }) : nothing23}
 				</div>
 			</div>
 			<div class="pills">
-				${rupasStr ? html19`<span class="rupas-label">${rupasStr}</span>` : nothing20}
+				${rupasStr ? html22`<span class="rupas-label">${rupasStr}</span>` : nothing23}
 				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
 			</div>
 		</div>`;
@@ -4711,7 +5694,7 @@ var RoxyShadbalaTable = class extends LitElement19 {
 };
 RoxyShadbalaTable.styles = [
   baseStyles,
-  css20`
+  css23`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -4860,29 +5843,29 @@ RoxyShadbalaTable.styles = [
 		`
 ];
 __decorateClass([
-  property19({ attribute: false })
+  property22({ attribute: false })
 ], RoxyShadbalaTable.prototype, "data", 2);
 RoxyShadbalaTable = __decorateClass([
-  customElement19("roxy-shadbala-table")
+  customElement22("roxy-shadbala-table")
 ], RoxyShadbalaTable);
 
 // packages/ui/src/components/synastry-chart.ts
-import { css as css21, html as html20, LitElement as LitElement20, nothing as nothing21, svg as svg5 } from "lit";
-import { customElement as customElement20, property as property20 } from "lit/decorators.js";
+import { css as css24, html as html23, LitElement as LitElement23, nothing as nothing24, svg as svg5 } from "lit";
+import { customElement as customElement23, property as property23 } from "lit/decorators.js";
 var SIZE2 = 360;
 var CENTER2 = SIZE2 / 2;
 var OUTER_R2 = 170;
 var SIGN_R2 = 154;
 var P1_R = 124;
 var P2_R = 96;
-var RoxySynastryChart = class extends LitElement20 {
+var RoxySynastryChart = class extends LitElement23 {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return html20`<div class="roxy-empty" role="status">No synastry data</div>`;
+      return html23`<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 ?? [];
@@ -4893,15 +5876,15 @@ var RoxySynastryChart = class extends LitElement20 {
     const challenges = analysis?.challenges ?? [];
     const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
     if (!hasPlanets) {
-      return html20`<div
+      return html23`<div
 				class="wrap"
 				aria-label="Synastry compatibility chart"
 			>
 				<div class="head">
 					<h2 class="title">Synastry</h2>
-					${typeof score === "number" ? html20`<span class="score" aria-label=${`Score ${score} of 100`}
+					${typeof score === "number" ? html23`<span class="score" aria-label=${`Score ${score} of 100`}
 								>${score} / 100</span
-							>` : nothing21}
+							>` : nothing24}
 				</div>
 				<div class="missing-planets" role="status">
 					Synastry response missing planet positions. Pass
@@ -4909,33 +5892,33 @@ var RoxySynastryChart = class extends LitElement20 {
 					<code>person2.planets</code> arrays from the natal-chart endpoint, or
 					use the <code>&lt;roxy-data&gt;</code> fallback.
 				</div>
-				${summaryText ? html20`<p class="summary">${summaryText}</p>` : nothing21}
-				${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing21}
-				${strengths.length > 0 || challenges.length > 0 ? html20`<div class="lists">
-							${strengths.length ? html20`<div>
+				${summaryText ? html23`<p class="summary">${summaryText}</p>` : nothing24}
+				${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing24}
+				${strengths.length > 0 || challenges.length > 0 ? html23`<div class="lists">
+							${strengths.length ? html23`<div>
 										<h3>Strengths</h3>
 										<ul>
-											${strengths.map((s) => html20`<li>${s}</li>`)}
+											${strengths.map((s) => html23`<li>${s}</li>`)}
 										</ul>
-									</div>` : nothing21}
-							${challenges.length ? html20`<div>
+									</div>` : nothing24}
+							${challenges.length ? html23`<div>
 										<h3>Challenges</h3>
 										<ul>
-											${challenges.map((s) => html20`<li>${s}</li>`)}
+											${challenges.map((s) => html23`<li>${s}</li>`)}
 										</ul>
-									</div>` : nothing21}
-						</div>` : nothing21}
+									</div>` : nothing24}
+						</div>` : nothing24}
 			</div>`;
     }
-    return html20`<div
+    return html23`<div
 			class="wrap"
 			aria-label="Synastry compatibility chart"
 		>
 			<div class="head">
 				<h2 class="title">Synastry</h2>
-				${typeof score === "number" ? html20`<span class="score" aria-label=${`Score ${score} of 100`}
+				${typeof score === "number" ? html23`<span class="score" aria-label=${`Score ${score} of 100`}
 							>${score} / 100</span
-						>` : nothing21}
+						>` : nothing24}
 			</div>
 			<svg
 				viewBox="0 0 ${SIZE2} ${SIZE2}"
@@ -4974,22 +5957,22 @@ var RoxySynastryChart = class extends LitElement20 {
 				<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 ? html20`<p class="summary">${summaryText}</p>` : nothing21}
-			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing21}
-			${strengths.length > 0 || challenges.length > 0 ? html20`<div class="lists">
-						${strengths.length ? html20`<div>
+			${summaryText ? html23`<p class="summary">${summaryText}</p>` : nothing24}
+			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing24}
+			${strengths.length > 0 || challenges.length > 0 ? html23`<div class="lists">
+						${strengths.length ? html23`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${strengths.map((s) => html20`<li>${s}</li>`)}
+										${strengths.map((s) => html23`<li>${s}</li>`)}
 									</ul>
-								</div>` : nothing21}
-						${challenges.length ? html20`<div>
+								</div>` : nothing24}
+						${challenges.length ? html23`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${challenges.map((s) => html20`<li>${s}</li>`)}
+										${challenges.map((s) => html23`<li>${s}</li>`)}
 									</ul>
-								</div>` : nothing21}
-					</div>` : nothing21}
+								</div>` : nothing24}
+					</div>` : nothing24}
 		</div>`;
   }
   toAngle(longitude) {
@@ -5012,7 +5995,7 @@ var RoxySynastryChart = class extends LitElement20 {
   }
   renderRing(planets, radius, cls) {
     return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return nothing21;
+      if (!Number.isFinite(p.longitude)) return nothing24;
       const pos = polarToCartesian(
         CENTER2,
         CENTER2,
@@ -5035,7 +6018,7 @@ var RoxySynastryChart = class extends LitElement20 {
     return aspects.map((a) => {
       const l1 = longitudeOf(p1, a.planet1);
       const l2 = longitudeOf(p2, a.planet2);
-      if (l1 === void 0 || l2 === void 0) return nothing21;
+      if (l1 === void 0 || l2 === void 0) return nothing24;
       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);
@@ -5045,7 +6028,7 @@ var RoxySynastryChart = class extends LitElement20 {
     });
   }
   renderAspects(aspects) {
-    return html20`<table>
+    return html23`<table>
 			<thead>
 				<tr>
 					<th>Planet 1</th>
@@ -5057,7 +6040,7 @@ var RoxySynastryChart = class extends LitElement20 {
 			</thead>
 			<tbody>
 				${aspects.slice(0, 12).map(
-      (a) => html20`<tr>
+      (a) => html23`<tr>
 						<td>${a.planet1}</td>
 						<td>${a.planet2}</td>
 						<td>${normalizeAspect(a) || ""}</td>
@@ -5071,7 +6054,7 @@ var RoxySynastryChart = class extends LitElement20 {
 };
 RoxySynastryChart.styles = [
   baseStyles,
-  css21`
+  css24`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5226,10 +6209,10 @@ RoxySynastryChart.styles = [
 		`
 ];
 __decorateClass([
-  property20({ attribute: false })
+  property23({ attribute: false })
 ], RoxySynastryChart.prototype, "data", 2);
 RoxySynastryChart = __decorateClass([
-  customElement20("roxy-synastry-chart")
+  customElement23("roxy-synastry-chart")
 ], RoxySynastryChart);
 function formatStrength(s) {
   if (typeof s === "number") return Math.round(s).toString();
@@ -5237,9 +6220,9 @@ function formatStrength(s) {
 }
 
 // packages/ui/src/components/tarot-card.ts
-import { css as css22, html as html21, LitElement as LitElement21, nothing as nothing22 } from "lit";
-import { customElement as customElement21, property as property21, state as state4 } from "lit/decorators.js";
-var RoxyTarotCard = class extends LitElement21 {
+import { css as css25, html as html24, LitElement as LitElement24, nothing as nothing25 } from "lit";
+import { customElement as customElement24, property as property24, state as state6 } from "lit/decorators.js";
+var RoxyTarotCard = class extends LitElement24 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5251,7 +6234,7 @@ var RoxyTarotCard = class extends LitElement21 {
   render() {
     const d = this.data;
     if (!d)
-      return html21`<div class="roxy-empty" role="status">No tarot data</div>`;
+      return html24`<div class="roxy-empty" role="status">No tarot data</div>`;
     if ("card" in d) return this.renderDailyCard(d);
     return this.renderFullCard(d);
   }
@@ -5259,9 +6242,9 @@ var RoxyTarotCard = class extends LitElement21 {
     const card = d.card;
     const isReversed = this.flipped !== Boolean(card.reversed);
     const keywords = card.keywords ?? [];
-    return html21`<article class="card" aria-label=${card.name ?? "Tarot card"}>
+    return html24`<article class="card" aria-label=${card.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${card.imageUrl ? html21`<img
+				${card.imageUrl ? html24`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${card.imageUrl}
 							alt=${card.name ?? "Tarot card"}
@@ -5273,7 +6256,7 @@ var RoxyTarotCard = class extends LitElement21 {
         this.toggleFlip();
       }
     }}
-						/>` : html21`<div
+						/>` : html24`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -5282,15 +6265,15 @@ var RoxyTarotCard = class extends LitElement21 {
 			</div>
 			<div>
 				<div class="meta">
-					${card.arcana ? html21`${card.arcana} arcana` : nothing22}
-					${isReversed ? html21` · reversed` : nothing22}
+					${card.arcana ? html24`${card.arcana} arcana` : nothing25}
+					${isReversed ? html24` · reversed` : nothing25}
 				</div>
 				<h2 class="title">${card.name ?? "Tarot card"}</h2>
-				${d.dailyMessage ? html21`<p class="message">${d.dailyMessage}</p>` : nothing22}
-				${card.meaning ? html21`<p>${card.meaning}</p>` : nothing22}
-				${keywords.length > 0 ? html21`<div class="chips">
-							${keywords.map((k) => html21`<span>${k}</span>`)}
-						</div>` : nothing22}
+				${d.dailyMessage ? html24`<p class="message">${d.dailyMessage}</p>` : nothing25}
+				${card.meaning ? html24`<p>${card.meaning}</p>` : nothing25}
+				${keywords.length > 0 ? html24`<div class="chips">
+							${keywords.map((k) => html24`<span>${k}</span>`)}
+						</div>` : nothing25}
 				<button
 					class="flip"
 					type="button"
@@ -5306,9 +6289,9 @@ var RoxyTarotCard = class extends LitElement21 {
     const isReversed = this.flipped;
     const orientedMeaning = isReversed ? d.reversed : d.upright;
     const keywords = isReversed ? d.keywords?.reversed ?? [] : d.keywords?.upright ?? [];
-    return html21`<article class="card" aria-label=${d.name ?? "Tarot card"}>
+    return html24`<article class="card" aria-label=${d.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${d.imageUrl ? html21`<img
+				${d.imageUrl ? html24`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${d.imageUrl}
 							alt=${d.name ?? "Tarot card"}
@@ -5320,7 +6303,7 @@ var RoxyTarotCard = class extends LitElement21 {
         this.toggleFlip();
       }
     }}
-						/>` : html21`<div
+						/>` : html24`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -5329,15 +6312,15 @@ var RoxyTarotCard = class extends LitElement21 {
 			</div>
 			<div>
 				<div class="meta">
-					${d.arcana ? html21`${d.arcana} arcana` : nothing22}
-					${d.number !== void 0 && d.number !== null ? html21` · ${d.number}` : nothing22}
-					${isReversed ? html21` · reversed` : nothing22}
+					${d.arcana ? html24`${d.arcana} arcana` : nothing25}
+					${d.number !== void 0 && d.number !== null ? html24` · ${d.number}` : nothing25}
+					${isReversed ? html24` · reversed` : nothing25}
 				</div>
 				<h2 class="title">${d.name ?? "Tarot card"}</h2>
-				${orientedMeaning?.description ? html21`<p>${orientedMeaning.description}</p>` : nothing22}
-				${keywords.length > 0 ? html21`<div class="chips">
-							${keywords.map((k) => html21`<span>${k}</span>`)}
-						</div>` : nothing22}
+				${orientedMeaning?.description ? html24`<p>${orientedMeaning.description}</p>` : nothing25}
+				${keywords.length > 0 ? html24`<div class="chips">
+							${keywords.map((k) => html24`<span>${k}</span>`)}
+						</div>` : nothing25}
 				<button
 					class="flip"
 					type="button"
@@ -5352,7 +6335,7 @@ var RoxyTarotCard = class extends LitElement21 {
 };
 RoxyTarotCard.styles = [
   baseStyles,
-  css22`
+  css25`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -5445,19 +6428,19 @@ RoxyTarotCard.styles = [
 		`
 ];
 __decorateClass([
-  property21({ attribute: false })
+  property24({ attribute: false })
 ], RoxyTarotCard.prototype, "data", 2);
 __decorateClass([
-  state4()
+  state6()
 ], RoxyTarotCard.prototype, "flipped", 2);
 RoxyTarotCard = __decorateClass([
-  customElement21("roxy-tarot-card")
+  customElement24("roxy-tarot-card")
 ], RoxyTarotCard);
 
 // packages/ui/src/components/tarot-spread.ts
-import { css as css23, html as html22, LitElement as LitElement22, nothing as nothing23 } from "lit";
-import { customElement as customElement22, property as property22 } from "lit/decorators.js";
-var RoxyTarotSpread = class extends LitElement22 {
+import { css as css26, html as html25, LitElement as LitElement25, nothing as nothing26 } from "lit";
+import { customElement as customElement25, property as property25 } from "lit/decorators.js";
+var RoxyTarotSpread = class extends LitElement25 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5466,7 +6449,7 @@ var RoxyTarotSpread = class extends LitElement22 {
   render() {
     const d = this.data;
     if (!d)
-      return html22`<div class="roxy-empty" role="status">No tarot spread</div>`;
+      return html25`<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 ?? [] : [];
@@ -5478,60 +6461,60 @@ var RoxyTarotSpread = class extends LitElement22 {
     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 html22`<article class="wrap" aria-label="Tarot spread">
+    return html25`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
 				<h2 class="title">${spreadLabel}</h2>
-				${question ? html22`<span class="question">"${question}"</span>` : nothing23}
+				${question ? html25`<span class="question">"${question}"</span>` : nothing26}
 			</header>
-			${isYesNo ? html22`<div>
+			${isYesNo ? html25`<div>
 						<span class=${`answer ${answerClass}`}>${answer}</span>
-						${strength ? html22`<small> · ${strength}</small>` : nothing23}
-					</div>` : nothing23}
-			${positions.length > 0 ? html22`<div class="grid">
+						${strength ? html25`<small> · ${strength}</small>` : nothing26}
+					</div>` : nothing26}
+			${positions.length > 0 ? html25`<div class="grid">
 						${positions.map(
-      (p) => html22`<div class="card">
+      (p) => html25`<div class="card">
 								<p class="label">${p.name ?? ""}</p>
 								<div class="image">
-									${p.card?.imageUrl ? html22`<img
+									${p.card?.imageUrl ? html25`<img
 												src=${p.card.imageUrl}
 												alt=${p.card.name ?? "tarot card"}
 												class=${p.card.reversed ? "reversed" : ""}
-											/>` : html22`${p.card?.name ?? "?"}`}
+											/>` : html25`${p.card?.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${p.card?.name ?? ""}
-									${p.card?.reversed ? html22`<small>(reversed)</small>` : nothing23}
+									${p.card?.reversed ? html25`<small>(reversed)</small>` : nothing26}
 								</p>
-								${p.interpretation ? html22`<p class="interp">${p.interpretation}</p>` : nothing23}
+								${p.interpretation ? html25`<p class="interp">${p.interpretation}</p>` : nothing26}
 							</div>`
     )}
-					</div>` : nothing23}
-			${cards.length > 0 ? html22`<div class="grid">
+					</div>` : nothing26}
+			${cards.length > 0 ? html25`<div class="grid">
 						${cards.map(
-      (c) => html22`<div class="card">
+      (c) => html25`<div class="card">
 								<div class="image">
-									${c.imageUrl ? html22`<img
+									${c.imageUrl ? html25`<img
 												src=${c.imageUrl}
 												alt=${c.name ?? "tarot card"}
 												class=${c.reversed ? "reversed" : ""}
-											/>` : html22`${c.name ?? "?"}`}
+											/>` : html25`${c.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${c.name ?? ""}
-									${c.reversed ? html22`<small>(reversed)</small>` : nothing23}
+									${c.reversed ? html25`<small>(reversed)</small>` : nothing26}
 								</p>
-								${c.meaning ? html22`<p class="interp">${c.meaning}</p>` : nothing23}
+								${c.meaning ? html25`<p class="interp">${c.meaning}</p>` : nothing26}
 							</div>`
     )}
-					</div>` : nothing23}
-			${summary ? html22`<p class="reading">${summary}</p>` : nothing23}
-			${yesNoInterp ? html22`<p class="reading">${yesNoInterp}</p>` : nothing23}
+					</div>` : nothing26}
+			${summary ? html25`<p class="reading">${summary}</p>` : nothing26}
+			${yesNoInterp ? html25`<p class="reading">${yesNoInterp}</p>` : nothing26}
 		</article>`;
   }
 };
 RoxyTarotSpread.styles = [
   baseStyles,
-  css23`
+  css26`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5640,26 +6623,26 @@ RoxyTarotSpread.styles = [
 		`
 ];
 __decorateClass([
-  property22({ attribute: false })
+  property25({ attribute: false })
 ], RoxyTarotSpread.prototype, "data", 2);
 __decorateClass([
-  property22({ type: String, reflect: true })
+  property25({ type: String, reflect: true })
 ], RoxyTarotSpread.prototype, "spread", 2);
 RoxyTarotSpread = __decorateClass([
-  customElement22("roxy-tarot-spread")
+  customElement25("roxy-tarot-spread")
 ], RoxyTarotSpread);
 
 // packages/ui/src/components/transits-table.ts
-import { css as css24, html as html23, LitElement as LitElement23, nothing as nothing24 } from "lit";
-import { customElement as customElement23, property as property23 } from "lit/decorators.js";
-var RoxyTransitsTable = class extends LitElement23 {
+import { css as css27, html as html26, LitElement as LitElement26, nothing as nothing27 } from "lit";
+import { customElement as customElement26, property as property26 } from "lit/decorators.js";
+var RoxyTransitsTable = class extends LitElement26 {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.transitPlanets?.length) {
-      return html23`<div class="roxy-empty" role="status">No transits data</div>`;
+      return html26`<div class="roxy-empty" role="status">No transits data</div>`;
     }
     const {
       transitDate,
@@ -5669,13 +6652,13 @@ var RoxyTransitsTable = class extends LitElement23 {
       summary
     } = this.data;
     const dateStr = [formatDate(transitDate), formatTime(transitTime)].filter(Boolean).join(" ");
-    return html23`<div class="wrap" aria-label="Transit positions table">
+    return html26`<div class="wrap" aria-label="Transit positions table">
 			<div class="head">
 				<h2 class="title">Transits</h2>
-				${dateStr ? html23`<p class="subtitle">${dateStr}</p>` : nothing24}
+				${dateStr ? html26`<p class="subtitle">${dateStr}</p>` : nothing27}
 			</div>
 
-			${summary ? this.renderSummaryPills(summary) : nothing24}
+			${summary ? this.renderSummaryPills(summary) : nothing27}
 
 			<div>
 				<p class="section-label">Planet positions</p>
@@ -5684,16 +6667,16 @@ var RoxyTransitsTable = class extends LitElement23 {
 				</div>
 			</div>
 
-			${transitAspects?.length ? html23`<div>
+			${transitAspects?.length ? html26`<div>
 						<p class="section-label">Transit aspects</p>
 						<div class="overflow-scroll">
 							${this.renderAspectsList(transitAspects)}
 						</div>
-					</div>` : nothing24}
+					</div>` : nothing27}
 		</div>`;
   }
   renderSummaryPills(summary) {
-    return html23`<div class="summary-pills" role="region" aria-label="Aspect summary">
+    return html26`<div class="summary-pills" role="region" aria-label="Aspect summary">
 			<span class="pill pill--muted">
 				Total: ${summary.totalAspects}
 			</span>
@@ -5709,7 +6692,7 @@ var RoxyTransitsTable = class extends LitElement23 {
 		</div>`;
   }
   renderPlanetsTable(planets) {
-    return html23`<table class="planets-table">
+    return html26`<table class="planets-table">
 			<thead>
 				<tr>
 					<th scope="col">Planet</th>
@@ -5723,12 +6706,12 @@ var RoxyTransitsTable = class extends LitElement23 {
       const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? "";
       const speedArrow = p.speed >= 0 ? "\u2191" : "\u2193";
-      return html23`<tr>
+      return html26`<tr>
 						<td>
 							<div class="planet-cell">
 								<span class="glyph" aria-hidden="true">${pGlyph}</span>
 								${p.name}
-								${p.isRetrograde ? html23`<span class="retro-badge" aria-label="retrograde">R</span>` : nothing24}
+								${p.isRetrograde ? html26`<span class="retro-badge" aria-label="retrograde">R</span>` : nothing27}
 							</div>
 						</td>
 						<td>
@@ -5748,7 +6731,7 @@ var RoxyTransitsTable = class extends LitElement23 {
 		</table>`;
   }
   renderAspectsList(aspects) {
-    return html23`<div role="list" aria-label="Transit aspects">
+    return html26`<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)] ?? "";
@@ -5756,7 +6739,7 @@ var RoxyTransitsTable = class extends LitElement23 {
       const interp = a.interpretation;
       const type = (a.type ?? "").toLowerCase();
       const status = a.isApplying ? "Applying" : "Separating";
-      return html23`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
+      return html26`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
 					<summary>
 						<span aria-hidden="true">${tGlyph}</span>
 						${a.transitPlanet}
@@ -5768,13 +6751,13 @@ var RoxyTransitsTable = class extends LitElement23 {
 						</span>
 					</summary>
 					<div class="interp-body">
-						${interp?.summary ? html23`<p>${interp.summary}</p>` : nothing24}
-						${interp?.impact ? html23`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing24}
-						${interp?.timing ? html23`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing24}
-						${interp?.guidance ? html23`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing24}
-						${interp?.keywords?.length ? html23`<div class="interp-keywords">
-										${interp.keywords.map((k) => html23`<span class="kw">${k}</span>`)}
-									</div>` : nothing24}
+						${interp?.summary ? html26`<p>${interp.summary}</p>` : nothing27}
+						${interp?.impact ? html26`<p><strong>Impact:</strong> ${interp.impact}</p>` : nothing27}
+						${interp?.timing ? html26`<p><strong>Timing:</strong> ${interp.timing}</p>` : nothing27}
+						${interp?.guidance ? html26`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : nothing27}
+						${interp?.keywords?.length ? html26`<div class="interp-keywords">
+										${interp.keywords.map((k) => html26`<span class="kw">${k}</span>`)}
+									</div>` : nothing27}
 					</div>
 				</details>`;
     })}
@@ -5783,7 +6766,7 @@ var RoxyTransitsTable = class extends LitElement23 {
 };
 RoxyTransitsTable.styles = [
   baseStyles,
-  css24`
+  css27`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5982,46 +6965,33 @@ RoxyTransitsTable.styles = [
 		`
 ];
 __decorateClass([
-  property23({ attribute: false })
+  property26({ attribute: false })
 ], RoxyTransitsTable.prototype, "data", 2);
 RoxyTransitsTable = __decorateClass([
-  customElement23("roxy-transits-table")
+  customElement26("roxy-transits-table")
 ], RoxyTransitsTable);
 
 // packages/ui/src/components/vedic-kundli.ts
-import { css as css25, html as html24, LitElement as LitElement24 } from "lit";
-import { customElement as customElement24, property as property24 } from "lit/decorators.js";
-var RoxyVedicKundli = class extends LitElement24 {
+import { css as css28, html as html27, LitElement as LitElement27 } from "lit";
+import { customElement as customElement27, property as property27 } from "lit/decorators.js";
+var RoxyVedicKundli = class extends LitElement27 {
   constructor() {
     super(...arguments);
     this.data = null;
     this.chartStyle = "south";
   }
   buildHouses() {
-    if (!this.data) return [];
-    const data = this.data;
-    const lagnaSign = this.data?.meta?.Lagna?.rashi ?? "";
-    const houses = [];
-    for (let i = 0; i < 12; i++) {
-      const key = RASHI_KEYS[i];
-      const bucket = data[key];
-      const planets = (bucket?.signs ?? []).map((p) => p.graha).filter(Boolean);
-      const sign = RASHI_TO_SIGN[key] ?? "";
-      houses.push({
-        number: i + 1,
-        sign,
-        planets,
-        isLagna: lagnaSign ? lagnaSign.toLowerCase() === sign.toLowerCase() : false
-      });
-    }
-    return houses;
+    if (!this.data?.meta) return [];
+    return buildHousesFromMeta(this.data.meta);
   }
   render() {
     if (!this.data)
-      return html24`<div class="roxy-empty" role="status">No kundli data</div>`;
+      return html27`<div class="roxy-empty" role="status">No kundli data</div>`;
     const houses = this.buildHouses();
-    const isNorth = this.chartStyle === "north";
-    return html24`<div class="wrap">
+    const style = this.chartStyle;
+    const frame = style === "north" ? renderNorthFrame() : style === "east" ? renderEastFrame() : renderSouthFrame();
+    const houseGroup = style === "north" ? renderNorthHouseGroup : style === "east" ? renderEastHouseGroup : renderSouthHouseGroup;
+    return html27`<div class="wrap">
 			<h2 class="title">Vedic kundli</h2>
 			<svg
 				viewBox="0 0 300 300"
@@ -6029,15 +6999,15 @@ var RoxyVedicKundli = class extends LitElement24 {
 				aria-label="Vedic birth chart with twelve sign houses"
 			>
 				<title>Vedic kundli</title>
-				${isNorth ? renderNorthFrame() : renderSouthFrame()}
-				${isNorth ? houses.map((h) => renderNorthHouseGroup(h)) : houses.map((h) => renderSouthHouseGroup(h))}
+				${frame}
+				${houses.map((h) => houseGroup(h))}
 			</svg>
 		</div>`;
   }
 };
 RoxyVedicKundli.styles = [
   baseStyles,
-  css25`
+  css28`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6045,64 +7015,381 @@ RoxyVedicKundli.styles = [
 			.title {
 				font-size: var(--roxy-text-lg, 1.125rem);
 				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
+				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;
+			}
+		`
+];
+__decorateClass([
+  property27({ attribute: false })
+], RoxyVedicKundli.prototype, "data", 2);
+__decorateClass([
+  property27({ type: String, reflect: true, attribute: "chart-style" })
+], RoxyVedicKundli.prototype, "chartStyle", 2);
+RoxyVedicKundli = __decorateClass([
+  customElement27("roxy-vedic-kundli")
+], RoxyVedicKundli);
+
+// packages/ui/src/components/vedic-planets-table.ts
+import { css as css29, html as html28, LitElement as LitElement28, nothing as nothing28 } from "lit";
+import { customElement as customElement28, property as property28 } from "lit/decorators.js";
+var GRAHA_ORDER = [
+  "Lagna",
+  "Sun",
+  "Moon",
+  "Mars",
+  "Mercury",
+  "Jupiter",
+  "Venus",
+  "Saturn",
+  "Rahu",
+  "Ketu"
+];
+var RoxyVedicPlanetsTable = class extends LitElement28 {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  /** Ordered [name, entry] pairs: GRAHA_ORDER first, then any extras. */
+  orderedRows() {
+    const meta = this.data?.meta ?? {};
+    const seen = /* @__PURE__ */ new Set();
+    const rows = [];
+    for (const name of GRAHA_ORDER) {
+      const entry = meta[name];
+      if (entry) {
+        rows.push([name, entry]);
+        seen.add(name);
+      }
+    }
+    for (const [name, entry] of Object.entries(meta)) {
+      if (!seen.has(name)) rows.push([name, entry]);
+    }
+    return rows;
+  }
+  render() {
+    if (!this.data?.meta)
+      return html28`<div class="roxy-empty" role="status">No chart data</div>`;
+    const rows = this.orderedRows();
+    return html28`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+			<header class="head">
+				<h2 class="title">Planetary positions</h2>
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Graha</th>
+						<th scope="col">Rashi</th>
+						<th scope="col">Degree</th>
+						<th scope="col">Nakshatra</th>
+						<th scope="col">Pada</th>
+						<th scope="col">Nak. lord</th>
+						<th scope="col">House</th>
+						<th scope="col">Avastha</th>
+						<th scope="col">Retro</th>
+					</tr>
+				</thead>
+				<tbody>
+					${rows.map(([name, p]) => {
+      const isLagna = (p.graha ?? name) === "Lagna";
+      const glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? "";
+      const signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? "")] ?? "";
+      return html28`<tr class=${isLagna ? "lagna" : ""}>
+							<td class="graha">
+								${glyph ? html28`<span class="glyph">${glyph}</span>` : nothing28}${p.graha ?? name}
+							</td>
+							<td>
+								${signGlyph ? html28`<span class="glyph">${signGlyph}</span>` : nothing28}${p.rashi ?? ""}
+							</td>
+							<td class="num">
+								${typeof p.longitude === "number" ? formatSignPosition(p.longitude) : ""}
+							</td>
+							<td>${p.nakshatra?.name ?? ""}</td>
+							<td class="num">${p.nakshatra?.pada ?? ""}</td>
+							<td>${p.nakshatra?.lord ?? ""}</td>
+							<td class="num">${typeof p.house === "number" ? p.house : ""}</td>
+							<td>${p.awastha ?? ""}</td>
+							<td>${p.isRetrograde ? html28`<span class="retro">R</span>` : nothing28}</td>
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+};
+RoxyVedicPlanetsTable.styles = [
+  baseStyles,
+  css29`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 620px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			tbody tr.lagna {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);
+			}
+			td.graha {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.glyph {
+				margin-right: 0.4em;
+				color: var(--roxy-muted, #71717a);
+			}
+			/* On the tinted Lagna row the muted glyph drops below the WCAG AA
+			   contrast floor, so use the accent foreground there instead. */
+			tbody tr.lagna .glyph {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.retro {
+				color: var(--roxy-warning-fg, #9a3412);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`
+];
+__decorateClass([
+  property28({ attribute: false })
+], RoxyVedicPlanetsTable.prototype, "data", 2);
+RoxyVedicPlanetsTable = __decorateClass([
+  customElement28("roxy-vedic-planets-table")
+], RoxyVedicPlanetsTable);
+
+// packages/ui/src/components/western-planets-table.ts
+import { css as css30, html as html29, LitElement as LitElement29, nothing as nothing29 } from "lit";
+import { customElement as customElement29, property as property29 } from "lit/decorators.js";
+var RoxyWesternPlanetsTable = class extends LitElement29 {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  /** Build the ordered row list: the planets array, then the four chart points. */
+  rows() {
+    const d = this.data;
+    if (!d) return [];
+    const rows = (d.planets ?? []).map((p) => ({
+      name: p.name,
+      sign: p.sign,
+      longitude: p.longitude,
+      house: p.house,
+      speed: p.speed,
+      isRetrograde: p.isRetrograde
+    }));
+    for (const [name, point] of [
+      ["Ascendant", d.ascendant],
+      ["Midheaven", d.midheaven],
+      ["Part of Fortune", d.partOfFortune],
+      ["Vertex", d.vertex]
+    ]) {
+      if (point) {
+        rows.push({
+          name,
+          sign: point.sign,
+          longitude: point.longitude,
+          isPoint: true
+        });
+      }
+    }
+    return rows;
+  }
+  render() {
+    if (!this.data?.planets)
+      return html29`<div class="roxy-empty" role="status">No chart data</div>`;
+    const rows = this.rows();
+    return html29`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
+			<header class="head">
+				<h2 class="title">Planetary positions</h2>
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Body</th>
+						<th scope="col">Sign</th>
+						<th scope="col">Degree</th>
+						<th scope="col">House</th>
+						<th scope="col">Motion</th>
+					</tr>
+				</thead>
+				<tbody>
+					${rows.map((r) => {
+      const glyph = PLANET_GLYPH[capitalize(r.name)] ?? "";
+      const signGlyph = SIGN_GLYPH[capitalize(r.sign ?? "")] ?? "";
+      const speed = typeof r.speed === "number" ? formatNumber(r.speed, 3) : "";
+      return html29`<tr class=${r.isPoint ? "point" : ""}>
+							<td class="body">
+								${glyph ? html29`<span class="glyph">${glyph}</span>` : nothing29}${r.name}
+							</td>
+							<td>
+								${signGlyph ? html29`<span class="glyph">${signGlyph}</span>` : nothing29}${r.sign ?? ""}
+							</td>
+							<td class="num">
+								${typeof r.longitude === "number" ? formatSignPosition(r.longitude) : ""}
+							</td>
+							<td class="num">${typeof r.house === "number" ? r.house : ""}</td>
+							<td class="num">
+								${speed ? html29`${speed}°/day` : nothing29}
+								${r.isRetrograde ? html29`<span class="retro"> ℞</span>` : nothing29}
+							</td>
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+};
+RoxyWesternPlanetsTable.styles = [
+  baseStyles,
+  css30`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
 			}
-			svg {
-				display: block;
+			table {
 				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 460px;
 			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
 			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
 			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 11px;
-				font-weight: 600;
-				font-family: var(--roxy-font-sans);
+			th {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: uppercase;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				letter-spacing: 0.04em;
 			}
-			.house-num {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 400;
-				font-family: var(--roxy-font-sans);
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
 			}
-			.lagna-marker {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 8px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
+			tbody tr.point {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
 			}
-			.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;
+			td.body {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.glyph {
+				margin-right: 0.4em;
+				color: var(--roxy-muted, #71717a);
+			}
+			.retro {
+				color: var(--roxy-danger, #dc2626);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
 			}
 		`
 ];
 __decorateClass([
-  property24({ attribute: false })
-], RoxyVedicKundli.prototype, "data", 2);
-__decorateClass([
-  property24({ type: String, reflect: true, attribute: "chart-style" })
-], RoxyVedicKundli.prototype, "chartStyle", 2);
-RoxyVedicKundli = __decorateClass([
-  customElement24("roxy-vedic-kundli")
-], RoxyVedicKundli);
+  property29({ attribute: false })
+], RoxyWesternPlanetsTable.prototype, "data", 2);
+RoxyWesternPlanetsTable = __decorateClass([
+  customElement29("roxy-western-planets-table")
+], RoxyWesternPlanetsTable);
 
 // packages/ui/src/components/yoga-list.ts
-import { css as css26, html as html25, LitElement as LitElement25, nothing as nothing25 } from "lit";
-import { customElement as customElement25, property as property25, state as state5 } from "lit/decorators.js";
-var RoxyYogaList = class extends LitElement25 {
+import { css as css31, html as html30, LitElement as LitElement30, nothing as nothing30 } from "lit";
+import { customElement as customElement30, property as property30, state as state7 } from "lit/decorators.js";
+var RoxyYogaList = class extends LitElement30 {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -6113,29 +7400,29 @@ var RoxyYogaList = class extends LitElement25 {
   }
   renderQualityChip(quality) {
     const cls = `quality-chip quality-${quality}`;
-    return html25`<span class=${cls}>${quality}</span>`;
+    return html30`<span class=${cls}>${quality}</span>`;
   }
   renderDetailCard(yoga) {
-    return html25`<div class="detail-card">
+    return html30`<div class="detail-card">
 			<p class="detail-name">
 				${yoga.name}
-				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing25}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : nothing30}
 			</p>
-			${yoga.description ? html25`<p class="description">${yoga.description}</p>` : nothing25}
-			${yoga.result ? html25`<details>
+			${yoga.description ? html30`<p class="description">${yoga.description}</p>` : nothing30}
+			${yoga.result ? html30`<details>
 						<summary>Effects</summary>
 						<div class="result-body">${yoga.result}</div>
-					</details>` : nothing25}
+					</details>` : nothing30}
 		</div>`;
   }
   render() {
     if (!this.data)
-      return html25`<div class="roxy-empty" role="status">No yoga data</div>`;
+      return html30`<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 html25`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+      return html30`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
     }
     if ("yogas" in d && Array.isArray(d.yogas)) {
       const allYogas = d.yogas;
@@ -6144,10 +7431,10 @@ var RoxyYogaList = class extends LitElement25 {
         const detailYogas = allYogas;
         const filtered2 = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas;
         const total2 = d.total;
-        return html25`<div class="wrap">
+        return html30`<div class="wrap">
 					<div class="head">
 						<h2 class="title">Yoga catalog</h2>
-						${total2 !== void 0 ? html25`<span class="count">${total2} total</span>` : nothing25}
+						${total2 !== void 0 ? html30`<span class="count">${total2} total</span>` : nothing30}
 					</div>
 					<div class="search-wrap">
 						<input
@@ -6165,17 +7452,17 @@ var RoxyYogaList = class extends LitElement25 {
 						aria-live="polite"
 						aria-label="Yoga results"
 					>
-						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : html25`<p class="no-results">No yogas match your search.</p>`}
+						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : html30`<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 html25`<div class="wrap">
+      return html30`<div class="wrap">
 				<div class="head">
 					<h2 class="title">Yoga catalog</h2>
-					${total !== void 0 ? html25`<span class="count">${total} total</span>` : nothing25}
+					${total !== void 0 ? html30`<span class="count">${total} total</span>` : nothing30}
 				</div>
 				<div class="search-wrap">
 					<input
@@ -6194,20 +7481,20 @@ var RoxyYogaList = class extends LitElement25 {
 					aria-label="Yoga results"
 				>
 					${filtered.length > 0 ? filtered.map(
-        (y) => html25`<div class="yoga-chip">
+        (y) => html30`<div class="yoga-chip">
 									${y.name}
 									<span class="yoga-id">${y.id}</span>
 								</div>`
-      ) : html25`<p class="no-results">No yogas match your search.</p>`}
+      ) : html30`<p class="no-results">No yogas match your search.</p>`}
 				</div>
 			</div>`;
     }
-    return html25`<div class="roxy-empty" role="status">No yoga data</div>`;
+    return html30`<div class="roxy-empty" role="status">No yoga data</div>`;
   }
 };
 RoxyYogaList.styles = [
   baseStyles,
-  css26`
+  css31`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6358,13 +7645,13 @@ RoxyYogaList.styles = [
 		`
 ];
 __decorateClass([
-  property25({ attribute: false })
+  property30({ attribute: false })
 ], RoxyYogaList.prototype, "data", 2);
 __decorateClass([
-  state5()
+  state7()
 ], RoxyYogaList.prototype, "filter", 2);
 RoxyYogaList = __decorateClass([
-  customElement25("roxy-yoga-list")
+  customElement30("roxy-yoga-list")
 ], RoxyYogaList);
 
 // packages/ui/src/manifest.ts
@@ -6380,17 +7667,6 @@ var ROXY_COMPONENTS = [
     docsSummary: "Natal chart wheel with planet glyphs and aspect lines",
     topic: "Astrology"
   },
-  {
-    pascal: "RoxyHoroscopeCard",
-    tag: "roxy-horoscope-card",
-    slug: "horoscope-card",
-    heading: "Daily horoscope",
-    description: "Daily, weekly, or monthly horoscope card for /astrology/horoscope/...",
-    docsLabel: "Western",
-    endpointLabel: "GET /astrology/horoscope/{sign}/{daily,weekly,monthly}",
-    docsSummary: "Daily, weekly, or monthly horoscope card",
-    topic: "Astrology"
-  },
   {
     pascal: "RoxySynastryChart",
     tag: "roxy-synastry-chart",
@@ -6403,14 +7679,25 @@ var ROXY_COMPONENTS = [
     topic: "Astrology"
   },
   {
-    pascal: "RoxyCompatibilityCard",
-    tag: "roxy-compatibility-card",
-    slug: "compatibility-card",
-    heading: "Compatibility score",
-    description: "Cross-domain compatibility score card",
-    docsLabel: "Cross",
-    endpointLabel: "POST /astrology/compatibility-score, /numerology/compatibility, /biorhythm/compatibility",
-    docsSummary: "Score card with category breakdown",
+    pascal: "RoxyWesternPlanetsTable",
+    tag: "roxy-western-planets-table",
+    slug: "western-planets-table",
+    heading: "Western planets",
+    description: "Western planetary positions table with sign, degree, house, and motion plus the chart angles",
+    docsLabel: "Western",
+    endpointLabel: "POST /astrology/natal-chart",
+    docsSummary: "Sign, degree, house, motion columns plus ASC, MC, PoF, Vertex",
+    topic: "Astrology"
+  },
+  {
+    pascal: "RoxyTransitsTable",
+    tag: "roxy-transits-table",
+    slug: "transits-table",
+    heading: "Transits",
+    description: "Live planet positions plus aspects to a natal chart",
+    docsLabel: "Western",
+    endpointLabel: "POST /astrology/transits",
+    docsSummary: "Transit planet positions plus optional aspects to a natal chart",
     topic: "Astrology"
   },
   {
@@ -6424,59 +7711,70 @@ var ROXY_COMPONENTS = [
     docsSummary: "Moon phase card and calendar",
     topic: "Astrology"
   },
+  {
+    pascal: "RoxyHoroscopeCard",
+    tag: "roxy-horoscope-card",
+    slug: "horoscope-card",
+    heading: "Daily horoscope",
+    description: "Daily, weekly, or monthly horoscope card for /astrology/horoscope/...",
+    docsLabel: "Western",
+    endpointLabel: "GET /astrology/horoscope/{sign}/{daily,weekly,monthly}",
+    docsSummary: "Daily, weekly, or monthly horoscope card",
+    topic: "Astrology"
+  },
+  {
+    pascal: "RoxyCompatibilityCard",
+    tag: "roxy-compatibility-card",
+    slug: "compatibility-card",
+    heading: "Compatibility score",
+    description: "Cross-domain compatibility score card",
+    docsLabel: "Cross",
+    endpointLabel: "POST /astrology/compatibility-score, /numerology/compatibility, /biorhythm/compatibility",
+    docsSummary: "Score card with category breakdown",
+    topic: "Astrology"
+  },
   {
     pascal: "RoxyVedicKundli",
     tag: "roxy-vedic-kundli",
     slug: "vedic-kundli",
     heading: "Vedic kundli",
-    description: "South or North Indian Vedic kundli for /vedic-astrology/birth-chart",
+    description: "South, North, or East Indian Vedic kundli for /vedic-astrology/birth-chart with per-planet degree and nakshatra detail",
     docsLabel: "Vedic",
     endpointLabel: "POST /vedic-astrology/birth-chart",
-    docsSummary: "South or North Indian kundli",
-    topic: "Vedic"
-  },
-  {
-    pascal: "RoxyPanchangTable",
-    tag: "roxy-panchang-table",
-    slug: "panchang-table",
-    heading: "Panchang",
-    description: "Panchang muhurta table with auspicious and inauspicious periods",
-    docsLabel: "Vedic",
-    endpointLabel: "POST /vedic-astrology/panchang/{basic,detailed}",
-    docsSummary: "15+ muhurtas in detailed mode",
+    docsSummary: "South, North, or East Indian kundli with degree detail",
     topic: "Vedic"
   },
   {
-    pascal: "RoxyDashaTimeline",
-    tag: "roxy-dasha-timeline",
-    slug: "dasha-timeline",
-    heading: "Vimshottari dasha",
-    description: "Vimshottari dasha timeline with active mahadasha highlighted",
+    pascal: "RoxyDivisionalChart",
+    tag: "roxy-divisional-chart",
+    slug: "divisional-chart",
+    heading: "Divisional chart",
+    description: "D2 to D60 varga chart wheel with Vargottama markers",
     docsLabel: "Vedic",
-    endpointLabel: "POST /vedic-astrology/dasha/{current,major,sub/...}",
-    docsSummary: "Vimshottari mahadasha + antardasha + pratyantardasha",
+    endpointLabel: "POST /vedic-astrology/divisional-chart",
+    docsSummary: "Generic divisional varga wheel from D2 Hora to D60 Shashtiamsa",
     topic: "Vedic"
   },
   {
-    pascal: "RoxyDoshaCard",
-    tag: "roxy-dosha-card",
-    slug: "dosha-card",
-    heading: "Manglik dosha",
-    description: "Manglik, Kaal Sarp, or Sade Sati presence card",
-    docsLabel: "Vedic",
-    endpointLabel: "POST /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati}",
-    docsSummary: "Presence, severity, remedies, scoped effects",
+    pascal: "RoxyKpChart",
+    tag: "roxy-kp-chart",
+    slug: "kp-chart",
+    heading: "KP chart",
+    description: "Full KP chart with Ascendant, Placidus cusps, and planets in tabbed stellar-hierarchy tables",
+    docsLabel: "Vedic (KP)",
+    endpointLabel: "POST /vedic-astrology/kp/chart",
+    docsSummary: "Ascendant, cusps, and planets with KP stellar hierarchy",
     topic: "Vedic"
   },
   {
-    pascal: "RoxyGunaMilan",
-    tag: "roxy-guna-milan",
-    slug: "guna-milan",
-    heading: "Guna milan",
-    description: "36-point Ashtakoota matrimonial compatibility breakdown",
+    pascal: "RoxyVedicPlanetsTable",
+    tag: "roxy-vedic-planets-table",
+    slug: "vedic-planets-table",
+    heading: "Vedic planets",
+    description: "Vedic planetary positions table with degree, nakshatra, pada, nakshatra lord, bhava, and avastha",
     docsLabel: "Vedic",
-    endpointLabel: "POST /vedic-astrology/compatibility",
-    docsSummary: "36-point Ashtakoota with eight sub-scores",
+    endpointLabel: "POST /vedic-astrology/birth-chart",
+    docsSummary: "Degree, nakshatra, pada, lord, bhava, avastha columns",
     topic: "Vedic"
   },
   {
@@ -6491,25 +7789,14 @@ var ROXY_COMPONENTS = [
     topic: "Vedic"
   },
   {
-    pascal: "RoxyTransitsTable",
-    tag: "roxy-transits-table",
-    slug: "transits-table",
-    heading: "Transits",
-    description: "Live planet positions plus aspects to a natal chart",
-    docsLabel: "Western",
-    endpointLabel: "POST /astrology/transits",
-    docsSummary: "Transit planet positions plus optional aspects to a natal chart",
-    topic: "Astrology"
-  },
-  {
-    pascal: "RoxyDivisionalChart",
-    tag: "roxy-divisional-chart",
-    slug: "divisional-chart",
-    heading: "Divisional chart",
-    description: "D2 to D60 varga chart wheel with Vargottama markers",
-    docsLabel: "Vedic",
-    endpointLabel: "POST /vedic-astrology/divisional-chart",
-    docsSummary: "Generic divisional varga wheel from D2 Hora to D60 Shashtiamsa",
+    pascal: "RoxyKpRulingPlanets",
+    tag: "roxy-kp-ruling-planets",
+    slug: "kp-ruling-planets",
+    heading: "KP ruling planets",
+    description: "KP ruling planets with day lord, Moon and Lagna stellar hierarchies, and house significators",
+    docsLabel: "Vedic (KP)",
+    endpointLabel: "POST /vedic-astrology/kp/ruling-planets",
+    docsSummary: "Day lord, Moon/Lagna hierarchies, ruling planets, significators",
     topic: "Vedic"
   },
   {
@@ -6535,14 +7822,36 @@ var ROXY_COMPONENTS = [
     topic: "Vedic"
   },
   {
-    pascal: "RoxyYogaList",
-    tag: "roxy-yoga-list",
-    slug: "yoga-list",
-    heading: "Yoga catalog",
-    description: "Yoga reference cards from the catalog with optional detail mode",
+    pascal: "RoxyDashaTimeline",
+    tag: "roxy-dasha-timeline",
+    slug: "dasha-timeline",
+    heading: "Vimshottari dasha",
+    description: "Vimshottari dasha timeline with active mahadasha highlighted",
     docsLabel: "Vedic",
-    endpointLabel: "GET /vedic-astrology/yoga, /yoga/{id}",
-    docsSummary: "Filterable yoga cards from the 300 plus yoga catalog",
+    endpointLabel: "POST /vedic-astrology/dasha/{current,major,sub/...}",
+    docsSummary: "Vimshottari mahadasha + antardasha + pratyantardasha",
+    topic: "Vedic"
+  },
+  {
+    pascal: "RoxyGunaMilan",
+    tag: "roxy-guna-milan",
+    slug: "guna-milan",
+    heading: "Guna milan",
+    description: "36-point Ashtakoota matrimonial compatibility breakdown",
+    docsLabel: "Vedic",
+    endpointLabel: "POST /vedic-astrology/compatibility",
+    docsSummary: "36-point Ashtakoota with eight sub-scores",
+    topic: "Vedic"
+  },
+  {
+    pascal: "RoxyPanchangTable",
+    tag: "roxy-panchang-table",
+    slug: "panchang-table",
+    heading: "Panchang",
+    description: "Panchang muhurta table with auspicious and inauspicious periods",
+    docsLabel: "Vedic",
+    endpointLabel: "POST /vedic-astrology/panchang/{basic,detailed}",
+    docsSummary: "15+ muhurtas in detailed mode",
     topic: "Vedic"
   },
   {
@@ -6556,6 +7865,39 @@ var ROXY_COMPONENTS = [
     docsSummary: "Day and night Choghadiya muhurta tiles colored by effect",
     topic: "Vedic"
   },
+  {
+    pascal: "RoxyYogaList",
+    tag: "roxy-yoga-list",
+    slug: "yoga-list",
+    heading: "Yoga catalog",
+    description: "Yoga reference cards from the catalog with optional detail mode",
+    docsLabel: "Vedic",
+    endpointLabel: "GET /vedic-astrology/yoga, /yoga/{id}",
+    docsSummary: "Filterable yoga cards from the 300 plus yoga catalog",
+    topic: "Vedic"
+  },
+  {
+    pascal: "RoxyNakshatraCard",
+    tag: "roxy-nakshatra-card",
+    slug: "nakshatra-card",
+    heading: "Nakshatra",
+    description: "Nakshatra reference card with lord, deity, symbol, characteristics, and remedies",
+    docsLabel: "Vedic",
+    endpointLabel: "GET /vedic-astrology/nakshatras/{id}",
+    docsSummary: "Lord, deity, symbol, characteristics, remedies",
+    topic: "Vedic"
+  },
+  {
+    pascal: "RoxyDoshaCard",
+    tag: "roxy-dosha-card",
+    slug: "dosha-card",
+    heading: "Manglik dosha",
+    description: "Manglik, Kaal Sarp, or Sade Sati presence card",
+    docsLabel: "Vedic",
+    endpointLabel: "POST /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati}",
+    docsSummary: "Presence, severity, remedies, scoped effects",
+    topic: "Vedic"
+  },
   {
     pascal: "RoxyNumerologyCard",
     tag: "roxy-numerology-card",
@@ -6650,7 +7992,7 @@ var ROXY_COMPONENTS = [
 ];
 
 // packages/ui/src/version.ts
-var ROXY_UI_VERSION = "0.2.3";
+var ROXY_UI_VERSION = "0.3.1";
 
 // packages/ui/src/index.ts
 var ROXY_UI_COMPONENTS = ROXY_COMPONENTS.map((c) => c.slug);
@@ -6670,9 +8012,12 @@ export {
   RoxyGunaMilan,
   RoxyHexagram,
   RoxyHoroscopeCard,
+  RoxyKpChart,
   RoxyKpPlanetsTable,
+  RoxyKpRulingPlanets,
   RoxyLocationSearch,
   RoxyMoonPhase,
+  RoxyNakshatraCard,
   RoxyNatalChart,
   RoxyNumerologyCard,
   RoxyPanchangTable,
@@ -6682,6 +8027,8 @@ export {
   RoxyTarotSpread,
   RoxyTransitsTable,
   RoxyVedicKundli,
+  RoxyVedicPlanetsTable,
+  RoxyWesternPlanetsTable,
   RoxyYogaList
 };
 //# sourceMappingURL=index.js.map