@roxyapi/ui 0.2.3 → 0.3.1

package/dist/index.cjs

@@ -43,9 +43,12 @@ __export(src_exports, {
   RoxyGunaMilan: () => RoxyGunaMilan,
   RoxyHexagram: () => RoxyHexagram,
   RoxyHoroscopeCard: () => RoxyHoroscopeCard,
+  RoxyKpChart: () => RoxyKpChart,
   RoxyKpPlanetsTable: () => RoxyKpPlanetsTable,
+  RoxyKpRulingPlanets: () => RoxyKpRulingPlanets,
   RoxyLocationSearch: () => RoxyLocationSearch,
   RoxyMoonPhase: () => RoxyMoonPhase,
+  RoxyNakshatraCard: () => RoxyNakshatraCard,
   RoxyNatalChart: () => RoxyNatalChart,
   RoxyNumerologyCard: () => RoxyNumerologyCard,
   RoxyPanchangTable: () => RoxyPanchangTable,
@@ -55,6 +58,8 @@ __export(src_exports, {
   RoxyTarotSpread: () => RoxyTarotSpread,
   RoxyTransitsTable: () => RoxyTransitsTable,
   RoxyVedicKundli: () => RoxyVedicKundli,
+  RoxyVedicPlanetsTable: () => RoxyVedicPlanetsTable,
+  RoxyWesternPlanetsTable: () => RoxyWesternPlanetsTable,
   RoxyYogaList: () => RoxyYogaList
 });
 module.exports = __toCommonJS(src_exports);
@@ -149,6 +154,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",
@@ -1622,9 +1636,88 @@ var import_decorators7 = require("lit/decorators.js");
 
 // packages/ui/src/utils/kundli-render.ts
 var import_lit8 = require("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 import_lit8.svg`<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 },
@@ -1667,12 +1760,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 import_lit8.nothing;
   const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const planets = h.planets;
+  const baseY = h.isLagna ? center.y + 8 : center.y;
   return import_lit8.svg`
 		<g>
 			${h.isLagna ? import_lit8.svg`<rect
@@ -1682,14 +1815,7 @@ function renderSouthHouseGroup(h) {
 						/>` : import_lit8.nothing}
 			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
 			${h.isLagna ? import_lit8.svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : import_lit8.nothing}
-			${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 import_lit8.svg`<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>
 	`;
 }
@@ -1708,19 +1834,12 @@ function renderNorthHouseGroup(h) {
   const center = NORTH_HOUSE_CENTERS[h.number];
   if (!center) return import_lit8.nothing;
   const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const planets = h.planets;
   return import_lit8.svg`
 		<g>
 			${h.isLagna ? import_lit8.svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />` : import_lit8.nothing}
 			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
 			<text class="house-num" x=${center.x} y=${center.y + 2} text-anchor="middle" dominant-baseline="central">${h.number}</text>
-			${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 import_lit8.svg`<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>
 	`;
 }
@@ -1738,6 +1857,58 @@ function renderSouthFrame() {
 		<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
 	`;
 }
+function renderEastFrame() {
+  return import_lit8.svg`
+		<rect class="line" x="10" y="10" width="280" height="280" stroke-width="1.5" fill="none" />
+		<line class="line" x1="10" y1="10" x2="290" y2="290" stroke-width="1" />
+		<line class="line" x1="290" y1="10" x2="10" y2="290" stroke-width="1" />
+		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1" fill="none" />
+	`;
+}
+function renderEastHouseGroup(h) {
+  const center = EAST_HOUSE_CENTERS[h.number];
+  const signPos = EAST_SIGN_POSITIONS[h.number];
+  if (!center || !signPos) return import_lit8.nothing;
+  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+  return import_lit8.svg`
+		<g>
+			${h.isLagna ? import_lit8.svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="20" />` : import_lit8.nothing}
+			${signAbbr ? import_lit8.svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : import_lit8.nothing}
+			${h.isLagna ? import_lit8.svg`<text class="lagna-marker" x=${center.x} y=${center.y - 14} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : import_lit8.nothing}
+			${renderPlanetStack(h.planets, center.x, center.y + 2, 11)}
+		</g>
+	`;
+}
+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 import_lit9.LitElement {
@@ -1747,31 +1918,17 @@ var RoxyDivisionalChart = class extends import_lit9.LitElement {
     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 import_lit9.html`<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 import_lit9.html`<div class="wrap">
 			<div class="header">
 				<h2 class="title">
@@ -1787,8 +1944,8 @@ var RoxyDivisionalChart = class extends import_lit9.LitElement {
 				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 ? import_lit9.html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
@@ -3161,26 +3318,300 @@ RoxyHoroscopeCard = __decorateClass([
   (0, import_decorators12.customElement)("roxy-horoscope-card")
 ], RoxyHoroscopeCard);
 
-// packages/ui/src/components/kp-planets-table.ts
+// packages/ui/src/components/kp-chart.ts
 var import_lit15 = require("lit");
 var import_decorators13 = require("lit/decorators.js");
-var RoxyKpPlanetsTable = class extends import_lit15.LitElement {
+var RoxyKpChart = class extends import_lit15.LitElement {
+  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 import_lit15.html`<div class="roxy-empty" role="status">No KP chart data</div>`;
+    const d = this.data;
+    const asc = d.ascendant;
+    return import_lit15.html`<div class="wrap" aria-label="KP chart" tabindex="0">
+			<header class="head">
+				<h2 class="title">KP chart</h2>
+				${asc ? import_lit15.html`<div class="asc">
+							Ascendant: <strong>${asc.sign ?? ""}</strong>
+							${asc.nakshatra ? import_lit15.html`· ${asc.nakshatra}` : import_lit15.nothing}
+							${asc.subLord ? import_lit15.html`· sub lord ${asc.subLord}` : import_lit15.nothing}
+							${typeof asc.kpNumber === "number" ? import_lit15.html`· KP ${asc.kpNumber}` : import_lit15.nothing}
+						</div>` : import_lit15.nothing}
+				${typeof d.meta?.ayanamsa === "number" ? import_lit15.html`<div class="ayan">
+							${d.meta.ayanamsaType ?? "Ayanamsa"}: ${formatNumber(d.meta.ayanamsa, 4)}°
+							${d.meta.houseSystem ? import_lit15.html`· ${d.meta.houseSystem} houses` : import_lit15.nothing}
+						</div>` : import_lit15.nothing}
+			</header>
+
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="KP chart views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${["planets", "cusps"].map(
+      (t) => import_lit15.html`<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 import_lit15.html`<p class="roxy-empty" role="status">No planets</p>`;
+    return import_lit15.html`<table role="table" aria-label="KP planets and nodes">
+			<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) => import_lit15.html`<tr>
+						<td class="body">
+							${b.name}${b.retrograde ? import_lit15.html`<span class="retro">R</span>` : import_lit15.nothing}
+						</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 import_lit15.html`<p class="roxy-empty" role="status">No cusps</p>`;
+    return import_lit15.html`<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) => import_lit15.html`<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,
+  import_lit15.css`
+			.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([
+  (0, import_decorators13.property)({ attribute: false })
+], RoxyKpChart.prototype, "data", 2);
+__decorateClass([
+  (0, import_decorators13.state)()
+], RoxyKpChart.prototype, "activeTab", 2);
+RoxyKpChart = __decorateClass([
+  (0, import_decorators13.customElement)("roxy-kp-chart")
+], RoxyKpChart);
+
+// packages/ui/src/components/kp-planets-table.ts
+var import_lit16 = require("lit");
+var import_decorators14 = require("lit/decorators.js");
+var RoxyKpPlanetsTable = class extends import_lit16.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit15.html`<div class="roxy-empty" role="status">No KP data</div>`;
+      return import_lit16.html`<div class="roxy-empty" role="status">No KP data</div>`;
     const planets = this.data.planets ?? [];
-    return import_lit15.html`<div
+    return import_lit16.html`<div
 			class="wrap"
 			aria-label="KP planets table"
 			tabindex="0"
 		>
 			<header class="head">
 				<h2 class="title">KP planets</h2>
-				${typeof this.data.ayanamsa === "number" ? import_lit15.html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : import_lit15.nothing}
+				${typeof this.data.ayanamsa === "number" ? import_lit16.html`<span class="ayanamsa">Ayanamsa: ${formatNumber(this.data.ayanamsa, 2)}°</span>` : import_lit16.nothing}
 			</header>
 			<table role="table">
 				<thead>
@@ -3197,10 +3628,10 @@ var RoxyKpPlanetsTable = class extends import_lit15.LitElement {
 				</thead>
 				<tbody>
 					${planets.map(
-      (p) => import_lit15.html`<tr>
+      (p) => import_lit16.html`<tr>
 							<td class="planet">
 								${p.planet}
-								${p.retrograde ? import_lit15.html`<span class="retro">R</span>` : import_lit15.nothing}
+								${p.retrograde ? import_lit16.html`<span class="retro">R</span>` : import_lit16.nothing}
 							</td>
 							<td>${p.sign ?? ""}</td>
 							<td>${p.signLord ?? ""}</td>
@@ -3218,7 +3649,7 @@ var RoxyKpPlanetsTable = class extends import_lit15.LitElement {
 };
 RoxyKpPlanetsTable.styles = [
   baseStyles,
-  import_lit15.css`
+  import_lit16.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -3280,62 +3711,235 @@ RoxyKpPlanetsTable.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators13.property)({ attribute: false })
+  (0, import_decorators14.property)({ attribute: false })
 ], RoxyKpPlanetsTable.prototype, "data", 2);
 RoxyKpPlanetsTable = __decorateClass([
-  (0, import_decorators13.customElement)("roxy-kp-planets-table")
+  (0, import_decorators14.customElement)("roxy-kp-planets-table")
 ], RoxyKpPlanetsTable);
 
-// packages/ui/src/components/location-search.ts
-var import_lit16 = require("lit");
-var import_decorators14 = require("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 import_lit16.LitElement {
+// packages/ui/src/components/kp-ruling-planets.ts
+var import_lit17 = require("lit");
+var import_decorators15 = require("lit/decorators.js");
+var RoxyKpRulingPlanets = class extends import_lit17.LitElement {
   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.data = null;
+  }
+  render() {
+    if (!this.data)
+      return import_lit17.html`<div class="roxy-empty" role="status">No ruling planets data</div>`;
+    const d = this.data;
+    const significators = d.significators ?? [];
+    return import_lit17.html`<div class="wrap" aria-label="KP ruling planets">
+			<header>
+				<h2 class="title">KP ruling planets</h2>
+				${d.dayLord ? import_lit17.html`<div class="day-lord">Day lord: <strong>${d.dayLord}</strong></div>` : import_lit17.nothing}
+			</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 ? import_lit17.html`<div class="rp-list" role="list" aria-label="Ruling planets by strength">
+						<span class="rp-label">Ruling planets</span>
+						${d.rulingPlanets.map(
+      (p, i) => import_lit17.html`<span class="rp" role="listitem"><span class="rank">${i + 1}</span> ${p}</span>`
+    )}
+					</div>` : import_lit17.nothing}
+
+			${significators.length ? import_lit17.html`<table aria-label="House significators">
+						<thead>
+							<tr>
+								<th scope="col">Planet</th>
+								<th scope="col">Signifies houses</th>
+							</tr>
+						</thead>
+						<tbody>
+							${significators.map(
+      (s) => import_lit17.html`<tr>
+									<td>${s.planet}</td>
+									<td>${(s.signifies ?? []).join(", ")}</td>
+								</tr>`
+    )}
+						</tbody>
+					</table>` : import_lit17.nothing}
+		</div>`;
+  }
+};
+RoxyKpRulingPlanets.styles = [
+  baseStyles,
+  import_lit17.css`
+			.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([
+  (0, import_decorators15.property)({ attribute: false })
+], RoxyKpRulingPlanets.prototype, "data", 2);
+RoxyKpRulingPlanets = __decorateClass([
+  (0, import_decorators15.customElement)("roxy-kp-ruling-planets")
+], RoxyKpRulingPlanets);
+
+// packages/ui/src/components/location-search.ts
+var import_lit18 = require("lit");
+var import_decorators16 = require("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 import_lit18.LitElement {
+  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) {
@@ -3407,8 +4011,13 @@ var RoxyLocationSearch = class extends import_lit16.LitElement {
       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();
@@ -3440,12 +4049,13 @@ var RoxyLocationSearch = class extends import_lit16.LitElement {
     );
   }
   render() {
-    return import_lit16.html`<div class="field">
+    return import_lit18.html`<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}
@@ -3456,18 +4066,19 @@ var RoxyLocationSearch = class extends import_lit16.LitElement {
       if (this.results.length > 0) this.isOpen = true;
     }}
 			/>
-			${this.isLoading ? import_lit16.html`<span class="spinner" role="status" aria-label="Loading"></span>` : import_lit16.nothing}
-			${this.isOpen ? import_lit16.html`<ul
+			${this.isLoading ? import_lit18.html`<span class="spinner" role="status" aria-label="Loading"></span>` : import_lit18.nothing}
+			${this.isOpen ? import_lit18.html`<ul
 						id="roxy-location-listbox"
 						class="results"
 						role="listbox"
 					>
-						${this.results.length === 0 ? import_lit16.html`<li class="empty" role="status">No cities found</li>` : this.results.map(
-      (city, idx) => import_lit16.html`<li role="presentation">
+						${this.results.length === 0 ? import_lit18.html`<li class="empty" role="status">No cities found</li>` : this.results.map(
+      (city, idx) => import_lit18.html`<li role="presentation">
 										<button
 											type="button"
 											class="option"
 											role="option"
+											id=${`roxy-location-option-${idx}`}
 											aria-selected=${this.highlight === idx ? "true" : "false"}
 											@click=${() => this.select(city)}
 											@mouseenter=${() => {
@@ -3476,7 +4087,7 @@ var RoxyLocationSearch = class extends import_lit16.LitElement {
 										>
 											<span class="city">${city.city}</span>
 											<span class="where"
-												>${city.province ? import_lit16.html`${city.province}, ` : ""}${city.country}</span
+												>${city.province ? import_lit18.html`${city.province}, ` : ""}${city.country}</span
 											>
 											<span class="tz"
 												>UTC${city.utcOffset >= 0 ? "+" : ""}${city.utcOffset}</span
@@ -3484,13 +4095,13 @@ var RoxyLocationSearch = class extends import_lit16.LitElement {
 										</button>
 									</li>`
     )}
-					</ul>` : import_lit16.nothing}
+					</ul>` : import_lit18.nothing}
 		</div>`;
   }
 };
 RoxyLocationSearch.styles = [
   baseStyles,
-  import_lit16.css`
+  import_lit18.css`
 			:host {
 				display: block;
 				position: relative;
@@ -3594,43 +4205,43 @@ RoxyLocationSearch.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators14.property)({ type: String, attribute: "api-key" })
+  (0, import_decorators16.property)({ type: String, attribute: "api-key" })
 ], RoxyLocationSearch.prototype, "apiKey", 2);
 __decorateClass([
-  (0, import_decorators14.property)({ type: String, attribute: "publishable-key" })
+  (0, import_decorators16.property)({ type: String, attribute: "publishable-key" })
 ], RoxyLocationSearch.prototype, "publishableKey", 2);
 __decorateClass([
-  (0, import_decorators14.property)({ type: String })
+  (0, import_decorators16.property)({ type: String })
 ], RoxyLocationSearch.prototype, "endpoint", 2);
 __decorateClass([
-  (0, import_decorators14.property)({ type: String })
+  (0, import_decorators16.property)({ type: String })
 ], RoxyLocationSearch.prototype, "placeholder", 2);
 __decorateClass([
-  (0, import_decorators14.property)({ type: String, attribute: "default-value" })
+  (0, import_decorators16.property)({ type: String, attribute: "default-value" })
 ], RoxyLocationSearch.prototype, "defaultValue", 2);
 __decorateClass([
-  (0, import_decorators14.state)()
+  (0, import_decorators16.state)()
 ], RoxyLocationSearch.prototype, "query", 2);
 __decorateClass([
-  (0, import_decorators14.state)()
+  (0, import_decorators16.state)()
 ], RoxyLocationSearch.prototype, "results", 2);
 __decorateClass([
-  (0, import_decorators14.state)()
+  (0, import_decorators16.state)()
 ], RoxyLocationSearch.prototype, "isOpen", 2);
 __decorateClass([
-  (0, import_decorators14.state)()
+  (0, import_decorators16.state)()
 ], RoxyLocationSearch.prototype, "isLoading", 2);
 __decorateClass([
-  (0, import_decorators14.state)()
+  (0, import_decorators16.state)()
 ], RoxyLocationSearch.prototype, "highlight", 2);
 RoxyLocationSearch = __decorateClass([
-  (0, import_decorators14.customElement)("roxy-location-search")
+  (0, import_decorators16.customElement)("roxy-location-search")
 ], RoxyLocationSearch);
 
 // packages/ui/src/components/moon-phase.ts
-var import_lit17 = require("lit");
-var import_decorators15 = require("lit/decorators.js");
-var RoxyMoonPhase = class extends import_lit17.LitElement {
+var import_lit19 = require("lit");
+var import_decorators17 = require("lit/decorators.js");
+var RoxyMoonPhase = class extends import_lit19.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -3639,12 +4250,12 @@ var RoxyMoonPhase = class extends import_lit17.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit17.html`<div class="roxy-empty" role="status">No moon phase data</div>`;
+      return import_lit19.html`<div class="roxy-empty" role="status">No moon phase data</div>`;
     const list = "phases" in d ? d.phases : "calendar" in d ? d.calendar : [];
     if (this.mode !== "current" && list.length > 0) {
       const month = "month" in d ? d.month : void 0;
       const year = "year" in d ? d.year : void 0;
-      return import_lit17.html`<article
+      return import_lit19.html`<article
 				class="card"
 				aria-label="Moon phase calendar"
 			>
@@ -3654,46 +4265,46 @@ var RoxyMoonPhase = class extends import_lit17.LitElement {
 				</div>
 			</article>`;
     }
-    if (!("phase" in d)) return import_lit17.nothing;
+    if (!("phase" in d)) return import_lit19.nothing;
     return this.renderSingle(d);
   }
   renderSingle(d) {
     const emoji = phaseEmoji(d.phase);
-    return import_lit17.html`<article class="card" aria-label="Current moon phase">
+    return import_lit19.html`<article class="card" aria-label="Current moon phase">
 			<div class="hero">
 				<span class="emoji" aria-hidden="true">${emoji}</span>
 				<div>
 					<h2 class="label">${d.phase ?? "Moon"}</h2>
-					${d.date ? import_lit17.html`<div class="date">${d.date}</div>` : import_lit17.nothing}
+					${d.date ? import_lit19.html`<div class="date">${d.date}</div>` : import_lit19.nothing}
 				</div>
 			</div>
 			<div class="stats">
-				${typeof d.illumination === "number" ? import_lit17.html`<div>
+				${typeof d.illumination === "number" ? import_lit19.html`<div>
 							<span>Illumination</span>
 							<strong>${formatIllumination(d.illumination)}</strong>
-						</div>` : import_lit17.nothing}
-				${typeof d.age === "number" ? import_lit17.html`<div>
+						</div>` : import_lit19.nothing}
+				${typeof d.age === "number" ? import_lit19.html`<div>
 							<span>Age</span>
 							<strong>${formatNumber(d.age, 1)} days</strong>
-						</div>` : import_lit17.nothing}
-				${d.sign ? import_lit17.html`<div>
+						</div>` : import_lit19.nothing}
+				${d.sign ? import_lit19.html`<div>
 							<span>Sign</span>
 							<strong>${d.sign}</strong>
-						</div>` : import_lit17.nothing}
-				${typeof d.distance === "number" ? import_lit17.html`<div>
+						</div>` : import_lit19.nothing}
+				${typeof d.distance === "number" ? import_lit19.html`<div>
 							<span>Distance</span>
 							<strong>${(d.distance / 1e3).toFixed(0)}k km</strong>
-						</div>` : import_lit17.nothing}
+						</div>` : import_lit19.nothing}
 			</div>
-			${d.meaning?.description ? import_lit17.html`<p class="meaning">${d.meaning.description}</p>` : import_lit17.nothing}
-			${d.meaning?.keywords?.length ? import_lit17.html`<div class="keywords">
-						${d.meaning.keywords.map((k) => import_lit17.html`<span>${k}</span>`)}
-					</div>` : import_lit17.nothing}
+			${d.meaning?.description ? import_lit19.html`<p class="meaning">${d.meaning.description}</p>` : import_lit19.nothing}
+			${d.meaning?.keywords?.length ? import_lit19.html`<div class="keywords">
+						${d.meaning.keywords.map((k) => import_lit19.html`<span>${k}</span>`)}
+					</div>` : import_lit19.nothing}
 		</article>`;
   }
   renderListItem(p) {
     const emoji = phaseEmoji(p.phase);
-    return import_lit17.html`<div class="list-item" role="listitem">
+    return import_lit19.html`<div class="list-item" role="listitem">
 			<span aria-hidden="true">${emoji}</span>
 			<span>${p.phase}</span>
 			<span>${p.date ?? ""}</span>
@@ -3702,7 +4313,7 @@ var RoxyMoonPhase = class extends import_lit17.LitElement {
 };
 RoxyMoonPhase.styles = [
   baseStyles,
-  import_lit17.css`
+  import_lit19.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -3787,13 +4398,13 @@ RoxyMoonPhase.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators15.property)({ attribute: false })
+  (0, import_decorators17.property)({ attribute: false })
 ], RoxyMoonPhase.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators15.property)({ type: String, reflect: true })
+  (0, import_decorators17.property)({ type: String, reflect: true })
 ], RoxyMoonPhase.prototype, "mode", 2);
 RoxyMoonPhase = __decorateClass([
-  (0, import_decorators15.customElement)("roxy-moon-phase")
+  (0, import_decorators17.customElement)("roxy-moon-phase")
 ], RoxyMoonPhase);
 function phaseEmoji(phase) {
   if (!phase) return "\u{1F319}";
@@ -3804,117 +4415,320 @@ function formatIllumination(v) {
   return `${Math.round(pct)}%`;
 }
 
-// packages/ui/src/components/natal-chart.ts
-var import_lit18 = require("lit");
-var import_decorators16 = require("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 import_lit18.LitElement {
+// packages/ui/src/components/nakshatra-card.ts
+var import_lit20 = require("lit");
+var import_decorators18 = require("lit/decorators.js");
+var RoxyNakshatraCard = class extends import_lit20.LitElement {
   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 import_lit18.html`<div class="roxy-empty" role="status">No chart data</div>`;
-    const planets = this.getPlanets();
-    const aspects = this.data.aspects ?? [];
-    return import_lit18.html`<div class="wrap">
-			<header>
-				<h2 class="title">Natal chart</h2>
-				${this.data.birthDetails ? import_lit18.html`<div class="meta">
-							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
-						</div>` : import_lit18.nothing}
+      return import_lit20.html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+    const n = this.data;
+    const remedies = n.remedies;
+    return import_lit20.html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+			<header class="head">
+				<h2 class="name">${n.name}</h2>
+				${typeof n.number === "number" ? import_lit20.html`<span class="number">Nakshatra ${n.number} of 27</span>` : import_lit20.nothing}
+				${n.range ? import_lit20.html`<span class="range">${n.range}</span>` : import_lit20.nothing}
 			</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>`;
-  }
-  renderAngles() {
-    const asc = this.getAscendant();
-    const mc = this.getMidheaven();
-    const items = [this.renderAngleMark(asc, "ASC")];
-    if (mc !== null) items.push(this.renderAngleMark(mc, "MC"));
-    return items;
+
+			<dl class="facts">
+				${n.lord ? import_lit20.html`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : import_lit20.nothing}
+				${n.deity ? import_lit20.html`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : import_lit20.nothing}
+				${n.symbol ? import_lit20.html`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : import_lit20.nothing}
+			</dl>
+
+			${n.characteristics ? import_lit20.html`<div class="section">
+						<h3>Characteristics</h3>
+						<p>${n.characteristics}</p>
+					</div>` : import_lit20.nothing}
+
+			${remedies ? import_lit20.html`<div class="section">
+						<h3>Remedies</h3>
+						<div class="remedies">
+							${remedies.mantras ? import_lit20.html`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : import_lit20.nothing}
+							${remedies.gemstones ? import_lit20.html`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : import_lit20.nothing}
+							${remedies.rituals ? import_lit20.html`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : import_lit20.nothing}
+						</div>
+					</div>` : import_lit20.nothing}
+		</article>`;
   }
-  renderAngleMark(longitude, label) {
-    const angle = this.toAngle(longitude);
+};
+RoxyNakshatraCard.styles = [
+  baseStyles,
+  import_lit20.css`
+			.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([
+  (0, import_decorators18.property)({ attribute: false })
+], RoxyNakshatraCard.prototype, "data", 2);
+RoxyNakshatraCard = __decorateClass([
+  (0, import_decorators18.customElement)("roxy-nakshatra-card")
+], RoxyNakshatraCard);
+
+// packages/ui/src/components/natal-chart.ts
+var import_lit21 = require("lit");
+var import_decorators19 = require("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 import_lit21.LitElement {
+  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 import_lit21.html`<div class="roxy-empty" role="status">No chart data</div>`;
+    const planets = this.getPlanets();
+    const aspects = this.data.aspects ?? [];
+    const view = this.view;
+    return import_lit21.html`<div class="wrap">
+			<header>
+				<h2 class="title">Natal chart</h2>
+				${this.data.birthDetails ? import_lit21.html`<div class="meta">
+							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
+						</div>` : import_lit21.nothing}
+			</header>
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="Natal chart views"
+				@keydown=${this.onTabKeyDown}
+			>
+				${["wheel", "grid"].map(
+      (t) => import_lit21.html`<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 ? import_lit21.html`<span>${this.data.houseSystem} houses</span>` : import_lit21.nothing}
+				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
+				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
+			</div>
+			${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 import_lit21.html`<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 import_lit21.html`<p class="roxy-empty" role="status">No planets to grid</p>`;
+    return import_lit21.html`<div class="grid-scroll">
+			<table class="aspect-grid" aria-label="Planet by planet aspect grid">
+				<thead>
+					<tr>
+						<th></th>
+						${names.slice(0, -1).map((n) => {
+      const g = PLANET_GLYPH[n] ?? n.slice(0, 2);
+      return import_lit21.html`<th scope="col" title=${n}>${g}</th>`;
+    })}
+					</tr>
+				</thead>
+				<tbody>
+					${names.slice(1).map((rowName, ri) => {
+      const rowGlyph = PLANET_GLYPH[rowName] ?? rowName.slice(0, 2);
+      return import_lit21.html`<tr>
+							<th scope="row" title=${rowName}>${rowGlyph}</th>
+							${names.slice(0, ri + 1).map((colName) => {
+        const a = byPair.get([rowName, colName].sort().join("|"));
+        if (!a) return import_lit21.html`<td class="empty"></td>`;
+        const name = normalizeAspect(a);
+        const sym = ASPECT_SYMBOL[name] ?? ASPECT_SYMBOL[name.replace(/-/g, "")] ?? name.slice(0, 3);
+        const cls = ASPECT_CLASS[name] ?? "aspect-other";
+        const orb = formatNumber(a.orb, 1);
+        return import_lit21.html`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
+									<span class="asp">${sym}</span>
+								</td>`;
+      })}
+							${names.slice(ri + 1, -1).map(() => import_lit21.html`<td class="empty"></td>`)}
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+  renderAngles() {
+    const asc = this.getAscendant();
+    const mc = this.getMidheaven();
+    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) {
+    const angle = this.toAngle(longitude);
     const tickInner = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
     const tickOuter = polarToCartesian(CENTER, CENTER, ANGLE_TICK_R, angle);
     const labelPos = polarToCartesian(CENTER, CENTER, ANGLE_LABEL_R, angle);
-    return import_lit18.svg`
+    return import_lit21.svg`
 			<g>
 				<line class="angle-tick" x1=${tickInner.x} y1=${tickInner.y} x2=${tickOuter.x} y2=${tickOuter.y} />
 				<text class="angle-marker" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">${label}</text>
@@ -3922,105 +4736,192 @@ var RoxyNatalChart = class extends import_lit18.LitElement {
 		`;
   }
   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 import_lit18.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
+      return import_lit21.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
     });
   }
   renderSigns() {
     return SIGNS_ORDER.map((sign, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
-      return import_lit18.svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
+      return import_lit21.svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
     });
   }
   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 import_lit21.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${house.number}</text>`;
+      });
+    }
     const ascSignIndex = Math.floor(this.getAscendant() / 30);
     return Array.from({ length: 12 }, (_, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, HOUSE_R - 12, angle);
       const houseNum = (i - ascSignIndex + 12) % 12 + 1;
-      return import_lit18.svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
+      return import_lit21.svg`<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(
+        import_lit21.svg`<line class=${isMajor ? "tick tick-major" : "tick"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} stroke-width=${isMajor ? 1 : 0.5} />`
+      );
+    }
+    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 import_lit21.nothing;
+    return houses.map((house) => {
+      const angle = this.toAngle(house.longitude);
+      const pos = polarToCartesian(CENTER, CENTER, HOUSE_R + 9, angle);
+      const sp = longitudeToSignPosition(house.longitude);
+      return import_lit21.svg`<text class="cusp-deg" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${String(sp.minute).padStart(2, "0")}'</text>`;
     });
   }
   renderPlanets(planets) {
     return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return import_lit18.nothing;
+      if (!Number.isFinite(p.longitude)) return import_lit21.nothing;
       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 import_lit18.svg`<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 import_lit21.svg`<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 ? import_lit21.svg`<tspan class="retro"> ℞</tspan>` : import_lit21.nothing}</text>
+			</g>`;
     });
   }
   renderDetails() {
     const summary = this.data?.summary;
     const ai = this.data?.aspectsInterpretation;
-    if (!summary && !ai) return import_lit18.nothing;
+    if (!summary && !ai) return import_lit21.nothing;
     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 import_lit18.html`<div class="details">
-			${summary?.dominantElement || summary?.dominantModality ? import_lit18.html`<div class="pill-row">
-						${summary.dominantElement ? import_lit18.html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : import_lit18.nothing}
-						${summary.dominantModality ? import_lit18.html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : import_lit18.nothing}
-					</div>` : import_lit18.nothing}
-			${ai ? import_lit18.html`<div class="pill-row">
+    return import_lit21.html`<div class="details">
+			${summary?.dominantElement || summary?.dominantModality ? import_lit21.html`<div class="pill-row">
+						${summary.dominantElement ? import_lit21.html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : import_lit21.nothing}
+						${summary.dominantModality ? import_lit21.html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : import_lit21.nothing}
+					</div>` : import_lit21.nothing}
+			${ai ? import_lit21.html`<div class="pill-row">
 						<span class="pill pill--success">Harmonious ${ai.harmonious}</span>
 						<span class="pill pill--danger">Challenging ${ai.challenging}</span>
 						<span class="pill pill--muted">Neutral ${ai.neutral}</span>
-					</div>` : import_lit18.nothing}
-			${retrogrades.length > 0 ? import_lit18.html`<div class="pill-row">
+					</div>` : import_lit21.nothing}
+			${retrogrades.length > 0 ? import_lit21.html`<div class="pill-row">
 						${retrogrades.map((p) => {
       const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
-      return import_lit18.html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
+      return import_lit21.html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
     })}
-					</div>` : import_lit18.nothing}
-			${ai?.summary ? import_lit18.html`<p class="summary">${ai.summary}</p>` : import_lit18.nothing}
-			${Object.keys(elementDist).length > 0 || Object.keys(modalityDist).length > 0 ? import_lit18.html`<div class="dist-grid">
-						${Object.keys(elementDist).length > 0 ? import_lit18.html`<div class="dist-section">
-									<h3>Elements</h3>
-									${Object.entries(elementDist).map(
-      ([label, count]) => import_lit18.html`<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>` : import_lit18.nothing}
-						${Object.keys(modalityDist).length > 0 ? import_lit18.html`<div class="dist-section">
-									<h3>Modalities</h3>
-									${Object.entries(modalityDist).map(
-      ([label, count]) => import_lit18.html`<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>` : import_lit18.nothing}
-					</div>` : import_lit18.nothing}
+					</div>` : import_lit21.nothing}
+			${ai?.summary ? import_lit21.html`<p class="summary">${ai.summary}</p>` : import_lit21.nothing}
+			${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 import_lit21.nothing;
+    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 import_lit21.html`<table class="em-grid" aria-label="Element and modality distribution">
+			<thead>
+				<tr>
+					<th></th>
+					${MODALITIES.map((m) => import_lit21.html`<th scope="col">${m.slice(0, 3)}</th>`)}
+					<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 import_lit21.html`<tr>
+						<th scope="row">${el}</th>
+						${MODALITIES.map(
+        (m) => import_lit21.html`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
+      )}
+						<td class="em-total">${rowTotal}</td>
+					</tr>`;
+    })}
+				<tr>
+					<th scope="row">Total</th>
+					${MODALITIES.map(
+      (m) => import_lit21.html`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
+    )}
+					<td class="em-total">${planets.length}</td>
+				</tr>
+			</tbody>
+		</table>`;
+  }
   renderInterpretations() {
     const planets = this.getPlanets().filter((p) => p.interpretation);
-    if (planets.length === 0) return import_lit18.nothing;
-    return import_lit18.html`<section class="interpretations">
+    if (planets.length === 0) return import_lit21.nothing;
+    return import_lit21.html`<section class="interpretations">
 			<h3>Planet readings</h3>
 			${planets.map((p, idx) => {
       const interp = p.interpretation;
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const deg = formatNumber(p.degree ?? 0, 1);
-      return import_lit18.html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
+      return import_lit21.html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
 					<summary>${glyph} ${p.name} <small>${p.sign ?? ""} ${deg}</small></summary>
 					<div class="interp-body">
-						${interp.summary ? import_lit18.html`<p class="interp-summary">${interp.summary}</p>` : import_lit18.nothing}
-						${interp.detailed ? import_lit18.html`<p class="interp-detail">${interp.detailed}</p>` : import_lit18.nothing}
-						${interp.keywords?.length ? import_lit18.html`<div class="interp-keywords">${interp.keywords.map((k) => import_lit18.html`<span class="kw">${k}</span>`)}</div>` : import_lit18.nothing}
+						${interp.summary ? import_lit21.html`<p class="interp-summary">${interp.summary}</p>` : import_lit21.nothing}
+						${interp.detailed ? import_lit21.html`<p class="interp-detail">${interp.detailed}</p>` : import_lit21.nothing}
+						${interp.keywords?.length ? import_lit21.html`<div class="interp-keywords">${interp.keywords.map((k) => import_lit21.html`<span class="kw">${k}</span>`)}</div>` : import_lit21.nothing}
 					</div>
 				</details>`;
     })}
@@ -4036,7 +4937,7 @@ var RoxyNatalChart = class extends import_lit18.LitElement {
     return aspects.map((a) => {
       const l1 = planetMap.get(capitalize(a.planet1));
       const l2 = planetMap.get(capitalize(a.planet2));
-      if (l1 === void 0 || l2 === void 0) return import_lit18.nothing;
+      if (l1 === void 0 || l2 === void 0) return import_lit21.nothing;
       const p1 = polarToCartesian(
         CENTER,
         CENTER,
@@ -4052,13 +4953,13 @@ var RoxyNatalChart = class extends import_lit18.LitElement {
       const aspectName = normalizeAspect(a);
       const aspectClass = ASPECT_CLASS[aspectName] ?? "aspect-other";
       const orbLabel = formatNumber(a.orb, 1);
-      return import_lit18.svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
+      return import_lit21.svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
     });
   }
 };
 RoxyNatalChart.styles = [
   baseStyles,
-  import_lit18.css`
+  import_lit21.css`
 			.wrap {
 				width: 100%;
 				display: grid;
@@ -4103,12 +5004,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;
@@ -4158,6 +5082,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);
 			}
@@ -4198,48 +5194,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;
+				letter-spacing: 0.04em;
 			}
-
-			.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;
+			.em-grid th[scope='row'] {
+				text-align: left;
 			}
-
-			.dist-bar {
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 20%, transparent);
-				height: 6px;
-				border-radius: 3px;
+			.em-grid td {
+				color: var(--roxy-accent, #f59e0b);
+				font-size: 0.95em;
+				line-height: 1.4;
+				min-width: 1.4rem;
 			}
-
-			.dist-bar > span {
-				display: block;
-				height: 100%;
-				background: var(--roxy-accent, #f59e0b);
-				border-radius: 3px;
+			.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 {
@@ -4290,19 +5275,22 @@ RoxyNatalChart.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators16.property)({ attribute: false })
+  (0, import_decorators19.property)({ attribute: false })
 ], RoxyNatalChart.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators16.property)({ type: String, attribute: "house-system", reflect: true })
+  (0, import_decorators19.property)({ type: String, attribute: "house-system", reflect: true })
 ], RoxyNatalChart.prototype, "houseSystem", 2);
+__decorateClass([
+  (0, import_decorators19.state)()
+], RoxyNatalChart.prototype, "view", 2);
 RoxyNatalChart = __decorateClass([
-  (0, import_decorators16.customElement)("roxy-natal-chart")
+  (0, import_decorators19.customElement)("roxy-natal-chart")
 ], RoxyNatalChart);
 
 // packages/ui/src/components/numerology-card.ts
-var import_lit19 = require("lit");
-var import_decorators17 = require("lit/decorators.js");
-var RoxyNumerologyCard = class extends import_lit19.LitElement {
+var import_lit22 = require("lit");
+var import_decorators20 = require("lit/decorators.js");
+var RoxyNumerologyCard = class extends import_lit22.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4311,7 +5299,7 @@ var RoxyNumerologyCard = class extends import_lit19.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit19.html`<div class="roxy-empty" role="status">No numerology data</div>`;
+      return import_lit22.html`<div class="roxy-empty" role="status">No numerology data</div>`;
     const headerLabel = LABELS[this.type] ?? this.type;
     if ("coreNumbers" in d) return this.renderChart(d, headerLabel);
     if ("personalYear" in d) return this.renderPersonalYear(d, headerLabel);
@@ -4322,61 +5310,61 @@ var RoxyNumerologyCard = class extends import_lit19.LitElement {
   }
   renderNumberCard(d, headerLabel) {
     const keywords = d.meaning?.keywords ?? [];
-    return import_lit19.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.number === "number" ? import_lit19.html`<div class="numeral">${d.number}</div>` : import_lit19.nothing}
+				${typeof d.number === "number" ? import_lit22.html`<div class="numeral">${d.number}</div>` : import_lit22.nothing}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.meaning?.title ? import_lit19.html`<h2 class="title">${d.meaning.title}</h2>` : import_lit19.nothing}
+					${d.meaning?.title ? import_lit22.html`<h2 class="title">${d.meaning.title}</h2>` : import_lit22.nothing}
 				</div>
 			</div>
-			${d.meaning?.description ? import_lit19.html`<p class="meaning">${d.meaning.description}</p>` : import_lit19.nothing}
-			${d.calculation ? import_lit19.html`<pre class="calc">${d.calculation}</pre>` : import_lit19.nothing}
-			${keywords.length > 0 ? import_lit19.html`<div class="chips">
-						${keywords.map((k) => import_lit19.html`<span>${k}</span>`)}
-					</div>` : import_lit19.nothing}
-			${d.hasKarmicDebt && d.karmicDebtNumber ? import_lit19.html`<div class="karmic">
+			${d.meaning?.description ? import_lit22.html`<p class="meaning">${d.meaning.description}</p>` : import_lit22.nothing}
+			${d.calculation ? import_lit22.html`<pre class="calc">${d.calculation}</pre>` : import_lit22.nothing}
+			${keywords.length > 0 ? import_lit22.html`<div class="chips">
+						${keywords.map((k) => import_lit22.html`<span>${k}</span>`)}
+					</div>` : import_lit22.nothing}
+			${d.hasKarmicDebt && d.karmicDebtNumber ? import_lit22.html`<div class="karmic">
 						Karmic debt ${d.karmicDebtNumber}.
 						${karmicDebtText(d.karmicDebtMeaning)}
-					</div>` : import_lit19.nothing}
+					</div>` : import_lit22.nothing}
 		</article>`;
   }
   renderPersonalYear(d, headerLabel) {
-    return import_lit19.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
 			<div class="hero">
-				${typeof d.personalYear === "number" ? import_lit19.html`<div class="numeral">${d.personalYear}</div>` : import_lit19.nothing}
+				${typeof d.personalYear === "number" ? import_lit22.html`<div class="numeral">${d.personalYear}</div>` : import_lit22.nothing}
 				<div>
 					<p class="label">${headerLabel}</p>
-					${d.theme ? import_lit19.html`<h2 class="title">${d.theme}</h2>` : import_lit19.nothing}
+					${d.theme ? import_lit22.html`<h2 class="title">${d.theme}</h2>` : import_lit22.nothing}
 				</div>
 			</div>
-			${d.forecast ? import_lit19.html`<p class="meaning">${d.forecast}</p>` : import_lit19.nothing}
-			${d.advice ? import_lit19.html`<p>${d.advice}</p>` : import_lit19.nothing}
+			${d.forecast ? import_lit22.html`<p class="meaning">${d.forecast}</p>` : import_lit22.nothing}
+			${d.advice ? import_lit22.html`<p>${d.advice}</p>` : import_lit22.nothing}
 		</article>`;
   }
   renderChart(d, headerLabel) {
     const cores = Object.entries(d.coreNumbers).filter(
       ([, v]) => v !== null && v !== void 0
     );
-    return import_lit19.html`<article class="card" aria-label=${headerLabel}>
+    return import_lit22.html`<article class="card" aria-label=${headerLabel}>
 			<div>
 				<p class="label">${headerLabel}</p>
-				${d.profile?.name ? import_lit19.html`<h2 class="title">${d.profile.name}</h2>` : import_lit19.nothing}
+				${d.profile?.name ? import_lit22.html`<h2 class="title">${d.profile.name}</h2>` : import_lit22.nothing}
 			</div>
-			${cores.length > 0 ? import_lit19.html`<div class="cores">
+			${cores.length > 0 ? import_lit22.html`<div class="cores">
 						${cores.map(
-      ([k, v]) => import_lit19.html`<div class="item">
+      ([k, v]) => import_lit22.html`<div class="item">
 								<span>${humanize(k)}</span>
 								<strong>${v.number ?? ""}</strong>
 							</div>`
     )}
-					</div>` : import_lit19.nothing}
+					</div>` : import_lit22.nothing}
 		</article>`;
   }
 };
 RoxyNumerologyCard.styles = [
   baseStyles,
-  import_lit19.css`
+  import_lit22.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -4475,13 +5463,13 @@ RoxyNumerologyCard.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators17.property)({ attribute: false })
+  (0, import_decorators20.property)({ attribute: false })
 ], RoxyNumerologyCard.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators17.property)({ type: String, reflect: true })
+  (0, import_decorators20.property)({ type: String, reflect: true })
 ], RoxyNumerologyCard.prototype, "type", 2);
 RoxyNumerologyCard = __decorateClass([
-  (0, import_decorators17.customElement)("roxy-numerology-card")
+  (0, import_decorators20.customElement)("roxy-numerology-card")
 ], RoxyNumerologyCard);
 var LABELS = {
   "life-path": "Life Path",
@@ -4495,9 +5483,9 @@ function karmicDebtText(value) {
 }
 
 // packages/ui/src/components/panchang-table.ts
-var import_lit20 = require("lit");
-var import_decorators18 = require("lit/decorators.js");
-var RoxyPanchangTable = class extends import_lit20.LitElement {
+var import_lit23 = require("lit");
+var import_decorators21 = require("lit/decorators.js");
+var RoxyPanchangTable = class extends import_lit23.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -4506,7 +5494,7 @@ var RoxyPanchangTable = class extends import_lit20.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit20.html`<div class="roxy-empty" role="status">No panchang data</div>`;
+      return import_lit23.html`<div class="roxy-empty" role="status">No panchang data</div>`;
     const detailed = "sunrise" in d ? d : null;
     const fivefold = [
       ["Tithi", this.formatPart(d.tithi)],
@@ -4529,7 +5517,7 @@ var RoxyPanchangTable = class extends import_lit20.LitElement {
       ["Yamaganda", detailed.yamaganda],
       ["Gulika", detailed.gulika]
     ] : [];
-    return import_lit20.html`<div class="wrap" aria-label="Panchang">
+    return import_lit23.html`<div class="wrap" aria-label="Panchang">
 			<header class="head">
 				<h2 class="title">Panchang</h2>
 				<span class="date">${detailed ? formatDate(detailed.date) : ""}</span>
@@ -4537,35 +5525,35 @@ var RoxyPanchangTable = class extends import_lit20.LitElement {
 			<table>
 				<tbody>
 					${fivefold.map(
-      ([k, v]) => import_lit20.html`<tr>
+      ([k, v]) => import_lit23.html`<tr>
 							<th>${k}</th>
 							<td>${v}</td>
 						</tr>`
     )}
-					${detailed?.sunrise ? import_lit20.html`<tr>
+					${detailed?.sunrise ? import_lit23.html`<tr>
 								<th>Sunrise</th>
 								<td>${formatTime(detailed.sunrise)}</td>
-							</tr>` : import_lit20.nothing}
-					${detailed?.sunset ? import_lit20.html`<tr>
+							</tr>` : import_lit23.nothing}
+					${detailed?.sunset ? import_lit23.html`<tr>
 								<th>Sunset</th>
 								<td>${formatTime(detailed.sunset)}</td>
-							</tr>` : import_lit20.nothing}
-					${detailed?.moonrise ? import_lit20.html`<tr>
+							</tr>` : import_lit23.nothing}
+					${detailed?.moonrise ? import_lit23.html`<tr>
 								<th>Moonrise</th>
 								<td>${formatTime(detailed.moonrise)}</td>
-							</tr>` : import_lit20.nothing}
-					${detailed?.moonset ? import_lit20.html`<tr>
+							</tr>` : import_lit23.nothing}
+					${detailed?.moonset ? import_lit23.html`<tr>
 								<th>Moonset</th>
 								<td>${formatTime(detailed.moonset)}</td>
-							</tr>` : import_lit20.nothing}
+							</tr>` : import_lit23.nothing}
 				</tbody>
 			</table>
-			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? import_lit20.html`
+			${this.detail === "detailed" && (muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1])) ? import_lit23.html`
 						<div class="section">Auspicious muhurtas</div>
 						<table>
 							<tbody>
 								${muhurtas.filter(([, v]) => !!v).map(
-      ([k, v]) => import_lit20.html`<tr>
+      ([k, v]) => import_lit23.html`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
@@ -4576,14 +5564,14 @@ var RoxyPanchangTable = class extends import_lit20.LitElement {
 						<table>
 							<tbody>
 								${inauspicious.filter(([, v]) => !!v).map(
-      ([k, v]) => import_lit20.html`<tr>
+      ([k, v]) => import_lit23.html`<tr>
 											<th>${k}</th>
 											<td>${formatTimeRange(v)}</td>
 										</tr>`
     )}
 							</tbody>
 						</table>
-					` : import_lit20.nothing}
+					` : import_lit23.nothing}
 		</div>`;
   }
   formatPart(v) {
@@ -4603,7 +5591,7 @@ var RoxyPanchangTable = class extends import_lit20.LitElement {
 };
 RoxyPanchangTable.styles = [
   baseStyles,
-  import_lit20.css`
+  import_lit23.css`
 			.wrap {
 				border: 1px solid var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-md, 8px);
@@ -4664,18 +5652,18 @@ RoxyPanchangTable.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators18.property)({ attribute: false })
+  (0, import_decorators21.property)({ attribute: false })
 ], RoxyPanchangTable.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators18.property)({ type: String, reflect: true })
+  (0, import_decorators21.property)({ type: String, reflect: true })
 ], RoxyPanchangTable.prototype, "detail", 2);
 RoxyPanchangTable = __decorateClass([
-  (0, import_decorators18.customElement)("roxy-panchang-table")
+  (0, import_decorators21.customElement)("roxy-panchang-table")
 ], RoxyPanchangTable);
 
 // packages/ui/src/components/shadbala-table.ts
-var import_lit21 = require("lit");
-var import_decorators19 = require("lit/decorators.js");
+var import_lit24 = require("lit");
+var import_decorators22 = require("lit/decorators.js");
 var BALA_COMPONENTS = [
   { key: "sthanaBala", label: "Sthana", color: "var(--roxy-info, #0284c7)" },
   { key: "digBala", label: "Dig", color: "var(--roxy-success, #16a34a)" },
@@ -4688,19 +5676,19 @@ var BALA_COMPONENTS = [
   },
   { key: "drikBala", label: "Drik", color: "var(--roxy-danger, #dc2626)" }
 ];
-var RoxyShadbalaTable = class extends import_lit21.LitElement {
+var RoxyShadbalaTable = class extends import_lit24.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.planets?.length) {
-      return import_lit21.html`<div class="roxy-empty" role="status">No shadbala data</div>`;
+      return import_lit24.html`<div class="roxy-empty" role="status">No shadbala data</div>`;
     }
     const sorted = [...this.data.planets].sort(
       (a, b) => a.relativeRank - b.relativeRank
     );
-    return import_lit21.html`<div class="wrap" aria-label="Shadbala planetary strength">
+    return import_lit24.html`<div class="wrap" aria-label="Shadbala planetary strength">
 			<div class="head">
 				<h2 class="title">Shadbala</h2>
 				<p class="subtitle">${sorted.length} planets ranked by strength</p>
@@ -4712,7 +5700,7 @@ var RoxyShadbalaTable = class extends import_lit21.LitElement {
 
 			<div class="legend" aria-label="Strength component legend">
 				${BALA_COMPONENTS.map(
-      (b) => import_lit21.html`<div class="legend-row">
+      (b) => import_lit24.html`<div class="legend-row">
 						<span
 							class="legend-swatch"
 							style="background: ${b.color}"
@@ -4732,7 +5720,7 @@ var RoxyShadbalaTable = class extends import_lit21.LitElement {
     const badgeClass = isAdequate ? "adequacy-badge--adequate" : "adequacy-badge--weak";
     const badgeLabel = isAdequate ? "adequate" : "weak";
     const rupasStr = formatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2) ? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R` : "";
-    return import_lit21.html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+    return import_lit24.html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
 			<div class="planet-label">
 				<span class="glyph" aria-hidden="true">${glyph}</span>
 				${p.planet}
@@ -4742,18 +5730,18 @@ var RoxyShadbalaTable = class extends import_lit21.LitElement {
 				<div class="bar" role="img" aria-label="Strength components for ${p.planet}">
 					${total > 0 ? BALA_COMPONENTS.map((b, i) => {
       const v = values[i];
-      if (v <= 0) return import_lit21.nothing;
+      if (v <= 0) return import_lit24.nothing;
       const grow = v / total * 100;
-      return import_lit21.html`<div
+      return import_lit24.html`<div
 									class="bar-segment"
 									style="flex-grow: ${grow}; background: ${b.color};"
 									title="${b.label}: ${formatNumber(v, 1)}"
 								></div>`;
-    }) : import_lit21.nothing}
+    }) : import_lit24.nothing}
 				</div>
 			</div>
 			<div class="pills">
-				${rupasStr ? import_lit21.html`<span class="rupas-label">${rupasStr}</span>` : import_lit21.nothing}
+				${rupasStr ? import_lit24.html`<span class="rupas-label">${rupasStr}</span>` : import_lit24.nothing}
 				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
 			</div>
 		</div>`;
@@ -4761,7 +5749,7 @@ var RoxyShadbalaTable = class extends import_lit21.LitElement {
 };
 RoxyShadbalaTable.styles = [
   baseStyles,
-  import_lit21.css`
+  import_lit24.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -4910,29 +5898,29 @@ RoxyShadbalaTable.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators19.property)({ attribute: false })
+  (0, import_decorators22.property)({ attribute: false })
 ], RoxyShadbalaTable.prototype, "data", 2);
 RoxyShadbalaTable = __decorateClass([
-  (0, import_decorators19.customElement)("roxy-shadbala-table")
+  (0, import_decorators22.customElement)("roxy-shadbala-table")
 ], RoxyShadbalaTable);
 
 // packages/ui/src/components/synastry-chart.ts
-var import_lit22 = require("lit");
-var import_decorators20 = require("lit/decorators.js");
+var import_lit25 = require("lit");
+var import_decorators23 = require("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 import_lit22.LitElement {
+var RoxySynastryChart = class extends import_lit25.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data)
-      return import_lit22.html`<div class="roxy-empty" role="status">No synastry data</div>`;
+      return import_lit25.html`<div class="roxy-empty" role="status">No synastry data</div>`;
     const { person1, person2, compatibilityScore, analysis } = this.data;
     const interAspects = this.data.interAspects ?? [];
     const p1Planets = person1?.planets ?? [];
@@ -4943,15 +5931,15 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
     const challenges = analysis?.challenges ?? [];
     const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
     if (!hasPlanets) {
-      return import_lit22.html`<div
+      return import_lit25.html`<div
 				class="wrap"
 				aria-label="Synastry compatibility chart"
 			>
 				<div class="head">
 					<h2 class="title">Synastry</h2>
-					${typeof score === "number" ? import_lit22.html`<span class="score" aria-label=${`Score ${score} of 100`}
+					${typeof score === "number" ? import_lit25.html`<span class="score" aria-label=${`Score ${score} of 100`}
 								>${score} / 100</span
-							>` : import_lit22.nothing}
+							>` : import_lit25.nothing}
 				</div>
 				<div class="missing-planets" role="status">
 					Synastry response missing planet positions. Pass
@@ -4959,33 +5947,33 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
 					<code>person2.planets</code> arrays from the natal-chart endpoint, or
 					use the <code>&lt;roxy-data&gt;</code> fallback.
 				</div>
-				${summaryText ? import_lit22.html`<p class="summary">${summaryText}</p>` : import_lit22.nothing}
-				${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit22.nothing}
-				${strengths.length > 0 || challenges.length > 0 ? import_lit22.html`<div class="lists">
-							${strengths.length ? import_lit22.html`<div>
+				${summaryText ? import_lit25.html`<p class="summary">${summaryText}</p>` : import_lit25.nothing}
+				${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit25.nothing}
+				${strengths.length > 0 || challenges.length > 0 ? import_lit25.html`<div class="lists">
+							${strengths.length ? import_lit25.html`<div>
 										<h3>Strengths</h3>
 										<ul>
-											${strengths.map((s) => import_lit22.html`<li>${s}</li>`)}
+											${strengths.map((s) => import_lit25.html`<li>${s}</li>`)}
 										</ul>
-									</div>` : import_lit22.nothing}
-							${challenges.length ? import_lit22.html`<div>
+									</div>` : import_lit25.nothing}
+							${challenges.length ? import_lit25.html`<div>
 										<h3>Challenges</h3>
 										<ul>
-											${challenges.map((s) => import_lit22.html`<li>${s}</li>`)}
+											${challenges.map((s) => import_lit25.html`<li>${s}</li>`)}
 										</ul>
-									</div>` : import_lit22.nothing}
-						</div>` : import_lit22.nothing}
+									</div>` : import_lit25.nothing}
+						</div>` : import_lit25.nothing}
 			</div>`;
     }
-    return import_lit22.html`<div
+    return import_lit25.html`<div
 			class="wrap"
 			aria-label="Synastry compatibility chart"
 		>
 			<div class="head">
 				<h2 class="title">Synastry</h2>
-				${typeof score === "number" ? import_lit22.html`<span class="score" aria-label=${`Score ${score} of 100`}
+				${typeof score === "number" ? import_lit25.html`<span class="score" aria-label=${`Score ${score} of 100`}
 							>${score} / 100</span
-						>` : import_lit22.nothing}
+						>` : import_lit25.nothing}
 			</div>
 			<svg
 				viewBox="0 0 ${SIZE2} ${SIZE2}"
@@ -5024,22 +6012,22 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
 				<span><span class="swatch" style="background: var(--roxy-success)"></span>harmonious</span>
 				<span><span class="swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
-			${summaryText ? import_lit22.html`<p class="summary">${summaryText}</p>` : import_lit22.nothing}
-			${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit22.nothing}
-			${strengths.length > 0 || challenges.length > 0 ? import_lit22.html`<div class="lists">
-						${strengths.length ? import_lit22.html`<div>
+			${summaryText ? import_lit25.html`<p class="summary">${summaryText}</p>` : import_lit25.nothing}
+			${interAspects.length > 0 ? this.renderAspects(interAspects) : import_lit25.nothing}
+			${strengths.length > 0 || challenges.length > 0 ? import_lit25.html`<div class="lists">
+						${strengths.length ? import_lit25.html`<div>
 									<h3>Strengths</h3>
 									<ul>
-										${strengths.map((s) => import_lit22.html`<li>${s}</li>`)}
+										${strengths.map((s) => import_lit25.html`<li>${s}</li>`)}
 									</ul>
-								</div>` : import_lit22.nothing}
-						${challenges.length ? import_lit22.html`<div>
+								</div>` : import_lit25.nothing}
+						${challenges.length ? import_lit25.html`<div>
 									<h3>Challenges</h3>
 									<ul>
-										${challenges.map((s) => import_lit22.html`<li>${s}</li>`)}
+										${challenges.map((s) => import_lit25.html`<li>${s}</li>`)}
 									</ul>
-								</div>` : import_lit22.nothing}
-					</div>` : import_lit22.nothing}
+								</div>` : import_lit25.nothing}
+					</div>` : import_lit25.nothing}
 		</div>`;
   }
   toAngle(longitude) {
@@ -5050,19 +6038,19 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
       const angle = this.toAngle(i * 30);
       const start = polarToCartesian(CENTER2, CENTER2, P2_R - 14, angle);
       const end = polarToCartesian(CENTER2, CENTER2, OUTER_R2, angle);
-      return import_lit22.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
+      return import_lit25.svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
     });
   }
   renderSigns() {
     return SIGNS_ORDER.map((s, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER2, CENTER2, SIGN_R2, angle);
-      return import_lit22.svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
+      return import_lit25.svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
     });
   }
   renderRing(planets, radius, cls) {
     return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return import_lit22.nothing;
+      if (!Number.isFinite(p.longitude)) return import_lit25.nothing;
       const pos = polarToCartesian(
         CENTER2,
         CENTER2,
@@ -5070,7 +6058,7 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
         this.toAngle(p.longitude)
       );
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-      return import_lit22.svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}</title>${glyph}</text>`;
+      return import_lit25.svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}</title>${glyph}</text>`;
     });
   }
   renderInterAspectLines(p1, p2, aspects) {
@@ -5085,17 +6073,17 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
     return aspects.map((a) => {
       const l1 = longitudeOf(p1, a.planet1);
       const l2 = longitudeOf(p2, a.planet2);
-      if (l1 === void 0 || l2 === void 0) return import_lit22.nothing;
+      if (l1 === void 0 || l2 === void 0) return import_lit25.nothing;
       const out = polarToCartesian(CENTER2, CENTER2, P1_R - 12, this.toAngle(l1));
       const inn = polarToCartesian(CENTER2, CENTER2, P2_R + 8, this.toAngle(l2));
       const aspectName = normalizeAspect(a);
       const cls = ASPECT_CLASS[aspectName] ?? "aspect-other";
       const orbLabel = formatNumber(a.orb, 1);
-      return import_lit22.svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
+      return import_lit25.svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
     });
   }
   renderAspects(aspects) {
-    return import_lit22.html`<table>
+    return import_lit25.html`<table>
 			<thead>
 				<tr>
 					<th>Planet 1</th>
@@ -5107,7 +6095,7 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
 			</thead>
 			<tbody>
 				${aspects.slice(0, 12).map(
-      (a) => import_lit22.html`<tr>
+      (a) => import_lit25.html`<tr>
 						<td>${a.planet1}</td>
 						<td>${a.planet2}</td>
 						<td>${normalizeAspect(a) || ""}</td>
@@ -5121,7 +6109,7 @@ var RoxySynastryChart = class extends import_lit22.LitElement {
 };
 RoxySynastryChart.styles = [
   baseStyles,
-  import_lit22.css`
+  import_lit25.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5276,10 +6264,10 @@ RoxySynastryChart.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators20.property)({ attribute: false })
+  (0, import_decorators23.property)({ attribute: false })
 ], RoxySynastryChart.prototype, "data", 2);
 RoxySynastryChart = __decorateClass([
-  (0, import_decorators20.customElement)("roxy-synastry-chart")
+  (0, import_decorators23.customElement)("roxy-synastry-chart")
 ], RoxySynastryChart);
 function formatStrength(s) {
   if (typeof s === "number") return Math.round(s).toString();
@@ -5287,9 +6275,9 @@ function formatStrength(s) {
 }
 
 // packages/ui/src/components/tarot-card.ts
-var import_lit23 = require("lit");
-var import_decorators21 = require("lit/decorators.js");
-var RoxyTarotCard = class extends import_lit23.LitElement {
+var import_lit26 = require("lit");
+var import_decorators24 = require("lit/decorators.js");
+var RoxyTarotCard = class extends import_lit26.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5301,7 +6289,7 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit23.html`<div class="roxy-empty" role="status">No tarot data</div>`;
+      return import_lit26.html`<div class="roxy-empty" role="status">No tarot data</div>`;
     if ("card" in d) return this.renderDailyCard(d);
     return this.renderFullCard(d);
   }
@@ -5309,9 +6297,9 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
     const card = d.card;
     const isReversed = this.flipped !== Boolean(card.reversed);
     const keywords = card.keywords ?? [];
-    return import_lit23.html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
+    return import_lit26.html`<article class="card" aria-label=${card.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${card.imageUrl ? import_lit23.html`<img
+				${card.imageUrl ? import_lit26.html`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${card.imageUrl}
 							alt=${card.name ?? "Tarot card"}
@@ -5323,7 +6311,7 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
         this.toggleFlip();
       }
     }}
-						/>` : import_lit23.html`<div
+						/>` : import_lit26.html`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -5332,15 +6320,15 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
 			</div>
 			<div>
 				<div class="meta">
-					${card.arcana ? import_lit23.html`${card.arcana} arcana` : import_lit23.nothing}
-					${isReversed ? import_lit23.html` · reversed` : import_lit23.nothing}
+					${card.arcana ? import_lit26.html`${card.arcana} arcana` : import_lit26.nothing}
+					${isReversed ? import_lit26.html` · reversed` : import_lit26.nothing}
 				</div>
 				<h2 class="title">${card.name ?? "Tarot card"}</h2>
-				${d.dailyMessage ? import_lit23.html`<p class="message">${d.dailyMessage}</p>` : import_lit23.nothing}
-				${card.meaning ? import_lit23.html`<p>${card.meaning}</p>` : import_lit23.nothing}
-				${keywords.length > 0 ? import_lit23.html`<div class="chips">
-							${keywords.map((k) => import_lit23.html`<span>${k}</span>`)}
-						</div>` : import_lit23.nothing}
+				${d.dailyMessage ? import_lit26.html`<p class="message">${d.dailyMessage}</p>` : import_lit26.nothing}
+				${card.meaning ? import_lit26.html`<p>${card.meaning}</p>` : import_lit26.nothing}
+				${keywords.length > 0 ? import_lit26.html`<div class="chips">
+							${keywords.map((k) => import_lit26.html`<span>${k}</span>`)}
+						</div>` : import_lit26.nothing}
 				<button
 					class="flip"
 					type="button"
@@ -5356,9 +6344,9 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
     const isReversed = this.flipped;
     const orientedMeaning = isReversed ? d.reversed : d.upright;
     const keywords = isReversed ? d.keywords?.reversed ?? [] : d.keywords?.upright ?? [];
-    return import_lit23.html`<article class="card" aria-label=${d.name ?? "Tarot card"}>
+    return import_lit26.html`<article class="card" aria-label=${d.name ?? "Tarot card"}>
 			<div class="image-wrap">
-				${d.imageUrl ? import_lit23.html`<img
+				${d.imageUrl ? import_lit26.html`<img
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							src=${d.imageUrl}
 							alt=${d.name ?? "Tarot card"}
@@ -5370,7 +6358,7 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
         this.toggleFlip();
       }
     }}
-						/>` : import_lit23.html`<div
+						/>` : import_lit26.html`<div
 							class=${`image ${isReversed ? "reversed" : ""}`}
 							style="aspect-ratio: 0.6; display: flex; align-items: center; justify-content: center; color: var(--roxy-muted)"
 						>
@@ -5379,15 +6367,15 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
 			</div>
 			<div>
 				<div class="meta">
-					${d.arcana ? import_lit23.html`${d.arcana} arcana` : import_lit23.nothing}
-					${d.number !== void 0 && d.number !== null ? import_lit23.html` · ${d.number}` : import_lit23.nothing}
-					${isReversed ? import_lit23.html` · reversed` : import_lit23.nothing}
+					${d.arcana ? import_lit26.html`${d.arcana} arcana` : import_lit26.nothing}
+					${d.number !== void 0 && d.number !== null ? import_lit26.html` · ${d.number}` : import_lit26.nothing}
+					${isReversed ? import_lit26.html` · reversed` : import_lit26.nothing}
 				</div>
 				<h2 class="title">${d.name ?? "Tarot card"}</h2>
-				${orientedMeaning?.description ? import_lit23.html`<p>${orientedMeaning.description}</p>` : import_lit23.nothing}
-				${keywords.length > 0 ? import_lit23.html`<div class="chips">
-							${keywords.map((k) => import_lit23.html`<span>${k}</span>`)}
-						</div>` : import_lit23.nothing}
+				${orientedMeaning?.description ? import_lit26.html`<p>${orientedMeaning.description}</p>` : import_lit26.nothing}
+				${keywords.length > 0 ? import_lit26.html`<div class="chips">
+							${keywords.map((k) => import_lit26.html`<span>${k}</span>`)}
+						</div>` : import_lit26.nothing}
 				<button
 					class="flip"
 					type="button"
@@ -5402,7 +6390,7 @@ var RoxyTarotCard = class extends import_lit23.LitElement {
 };
 RoxyTarotCard.styles = [
   baseStyles,
-  import_lit23.css`
+  import_lit26.css`
 			.card {
 				background: var(--roxy-bg, #fff);
 				border: 1px solid var(--roxy-border, #e4e4e7);
@@ -5495,19 +6483,19 @@ RoxyTarotCard.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators21.property)({ attribute: false })
+  (0, import_decorators24.property)({ attribute: false })
 ], RoxyTarotCard.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators21.state)()
+  (0, import_decorators24.state)()
 ], RoxyTarotCard.prototype, "flipped", 2);
 RoxyTarotCard = __decorateClass([
-  (0, import_decorators21.customElement)("roxy-tarot-card")
+  (0, import_decorators24.customElement)("roxy-tarot-card")
 ], RoxyTarotCard);
 
 // packages/ui/src/components/tarot-spread.ts
-var import_lit24 = require("lit");
-var import_decorators22 = require("lit/decorators.js");
-var RoxyTarotSpread = class extends import_lit24.LitElement {
+var import_lit27 = require("lit");
+var import_decorators25 = require("lit/decorators.js");
+var RoxyTarotSpread = class extends import_lit27.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -5516,7 +6504,7 @@ var RoxyTarotSpread = class extends import_lit24.LitElement {
   render() {
     const d = this.data;
     if (!d)
-      return import_lit24.html`<div class="roxy-empty" role="status">No tarot spread</div>`;
+      return import_lit27.html`<div class="roxy-empty" role="status">No tarot spread</div>`;
     const isYesNo = "answer" in d;
     const isDrawn = "cards" in d && !("spread" in d);
     const positions = isDrawn ? [] : "positions" in d ? d.positions ?? [] : [];
@@ -5528,60 +6516,60 @@ var RoxyTarotSpread = class extends import_lit24.LitElement {
     const summary = "summary" in d ? d.summary : void 0;
     const yesNoInterp = isYesNo ? d.interpretation : void 0;
     const answerClass = answer ? answer.toLowerCase().replace(/[^a-z]/g, "") : "";
-    return import_lit24.html`<article class="wrap" aria-label="Tarot spread">
+    return import_lit27.html`<article class="wrap" aria-label="Tarot spread">
 			<header class="head">
 				<h2 class="title">${spreadLabel}</h2>
-				${question ? import_lit24.html`<span class="question">"${question}"</span>` : import_lit24.nothing}
+				${question ? import_lit27.html`<span class="question">"${question}"</span>` : import_lit27.nothing}
 			</header>
-			${isYesNo ? import_lit24.html`<div>
+			${isYesNo ? import_lit27.html`<div>
 						<span class=${`answer ${answerClass}`}>${answer}</span>
-						${strength ? import_lit24.html`<small> · ${strength}</small>` : import_lit24.nothing}
-					</div>` : import_lit24.nothing}
-			${positions.length > 0 ? import_lit24.html`<div class="grid">
+						${strength ? import_lit27.html`<small> · ${strength}</small>` : import_lit27.nothing}
+					</div>` : import_lit27.nothing}
+			${positions.length > 0 ? import_lit27.html`<div class="grid">
 						${positions.map(
-      (p) => import_lit24.html`<div class="card">
+      (p) => import_lit27.html`<div class="card">
 								<p class="label">${p.name ?? ""}</p>
 								<div class="image">
-									${p.card?.imageUrl ? import_lit24.html`<img
+									${p.card?.imageUrl ? import_lit27.html`<img
 												src=${p.card.imageUrl}
 												alt=${p.card.name ?? "tarot card"}
 												class=${p.card.reversed ? "reversed" : ""}
-											/>` : import_lit24.html`${p.card?.name ?? "?"}`}
+											/>` : import_lit27.html`${p.card?.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${p.card?.name ?? ""}
-									${p.card?.reversed ? import_lit24.html`<small>(reversed)</small>` : import_lit24.nothing}
+									${p.card?.reversed ? import_lit27.html`<small>(reversed)</small>` : import_lit27.nothing}
 								</p>
-								${p.interpretation ? import_lit24.html`<p class="interp">${p.interpretation}</p>` : import_lit24.nothing}
+								${p.interpretation ? import_lit27.html`<p class="interp">${p.interpretation}</p>` : import_lit27.nothing}
 							</div>`
     )}
-					</div>` : import_lit24.nothing}
-			${cards.length > 0 ? import_lit24.html`<div class="grid">
+					</div>` : import_lit27.nothing}
+			${cards.length > 0 ? import_lit27.html`<div class="grid">
 						${cards.map(
-      (c) => import_lit24.html`<div class="card">
+      (c) => import_lit27.html`<div class="card">
 								<div class="image">
-									${c.imageUrl ? import_lit24.html`<img
+									${c.imageUrl ? import_lit27.html`<img
 												src=${c.imageUrl}
 												alt=${c.name ?? "tarot card"}
 												class=${c.reversed ? "reversed" : ""}
-											/>` : import_lit24.html`${c.name ?? "?"}`}
+											/>` : import_lit27.html`${c.name ?? "?"}`}
 								</div>
 								<p class="name">
 									${c.name ?? ""}
-									${c.reversed ? import_lit24.html`<small>(reversed)</small>` : import_lit24.nothing}
+									${c.reversed ? import_lit27.html`<small>(reversed)</small>` : import_lit27.nothing}
 								</p>
-								${c.meaning ? import_lit24.html`<p class="interp">${c.meaning}</p>` : import_lit24.nothing}
+								${c.meaning ? import_lit27.html`<p class="interp">${c.meaning}</p>` : import_lit27.nothing}
 							</div>`
     )}
-					</div>` : import_lit24.nothing}
-			${summary ? import_lit24.html`<p class="reading">${summary}</p>` : import_lit24.nothing}
-			${yesNoInterp ? import_lit24.html`<p class="reading">${yesNoInterp}</p>` : import_lit24.nothing}
+					</div>` : import_lit27.nothing}
+			${summary ? import_lit27.html`<p class="reading">${summary}</p>` : import_lit27.nothing}
+			${yesNoInterp ? import_lit27.html`<p class="reading">${yesNoInterp}</p>` : import_lit27.nothing}
 		</article>`;
   }
 };
 RoxyTarotSpread.styles = [
   baseStyles,
-  import_lit24.css`
+  import_lit27.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -5690,26 +6678,26 @@ RoxyTarotSpread.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators22.property)({ attribute: false })
+  (0, import_decorators25.property)({ attribute: false })
 ], RoxyTarotSpread.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators22.property)({ type: String, reflect: true })
+  (0, import_decorators25.property)({ type: String, reflect: true })
 ], RoxyTarotSpread.prototype, "spread", 2);
 RoxyTarotSpread = __decorateClass([
-  (0, import_decorators22.customElement)("roxy-tarot-spread")
+  (0, import_decorators25.customElement)("roxy-tarot-spread")
 ], RoxyTarotSpread);
 
 // packages/ui/src/components/transits-table.ts
-var import_lit25 = require("lit");
-var import_decorators23 = require("lit/decorators.js");
-var RoxyTransitsTable = class extends import_lit25.LitElement {
+var import_lit28 = require("lit");
+var import_decorators26 = require("lit/decorators.js");
+var RoxyTransitsTable = class extends import_lit28.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
   }
   render() {
     if (!this.data?.transitPlanets?.length) {
-      return import_lit25.html`<div class="roxy-empty" role="status">No transits data</div>`;
+      return import_lit28.html`<div class="roxy-empty" role="status">No transits data</div>`;
     }
     const {
       transitDate,
@@ -5719,13 +6707,13 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
       summary
     } = this.data;
     const dateStr = [formatDate(transitDate), formatTime(transitTime)].filter(Boolean).join(" ");
-    return import_lit25.html`<div class="wrap" aria-label="Transit positions table">
+    return import_lit28.html`<div class="wrap" aria-label="Transit positions table">
 			<div class="head">
 				<h2 class="title">Transits</h2>
-				${dateStr ? import_lit25.html`<p class="subtitle">${dateStr}</p>` : import_lit25.nothing}
+				${dateStr ? import_lit28.html`<p class="subtitle">${dateStr}</p>` : import_lit28.nothing}
 			</div>
 
-			${summary ? this.renderSummaryPills(summary) : import_lit25.nothing}
+			${summary ? this.renderSummaryPills(summary) : import_lit28.nothing}
 
 			<div>
 				<p class="section-label">Planet positions</p>
@@ -5734,16 +6722,16 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
 				</div>
 			</div>
 
-			${transitAspects?.length ? import_lit25.html`<div>
+			${transitAspects?.length ? import_lit28.html`<div>
 						<p class="section-label">Transit aspects</p>
 						<div class="overflow-scroll">
 							${this.renderAspectsList(transitAspects)}
 						</div>
-					</div>` : import_lit25.nothing}
+					</div>` : import_lit28.nothing}
 		</div>`;
   }
   renderSummaryPills(summary) {
-    return import_lit25.html`<div class="summary-pills" role="region" aria-label="Aspect summary">
+    return import_lit28.html`<div class="summary-pills" role="region" aria-label="Aspect summary">
 			<span class="pill pill--muted">
 				Total: ${summary.totalAspects}
 			</span>
@@ -5759,7 +6747,7 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
 		</div>`;
   }
   renderPlanetsTable(planets) {
-    return import_lit25.html`<table class="planets-table">
+    return import_lit28.html`<table class="planets-table">
 			<thead>
 				<tr>
 					<th scope="col">Planet</th>
@@ -5773,12 +6761,12 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
       const pGlyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
       const sGlyph = SIGN_GLYPH[capitalize(p.sign)] ?? "";
       const speedArrow = p.speed >= 0 ? "\u2191" : "\u2193";
-      return import_lit25.html`<tr>
+      return import_lit28.html`<tr>
 						<td>
 							<div class="planet-cell">
 								<span class="glyph" aria-hidden="true">${pGlyph}</span>
 								${p.name}
-								${p.isRetrograde ? import_lit25.html`<span class="retro-badge" aria-label="retrograde">R</span>` : import_lit25.nothing}
+								${p.isRetrograde ? import_lit28.html`<span class="retro-badge" aria-label="retrograde">R</span>` : import_lit28.nothing}
 							</div>
 						</td>
 						<td>
@@ -5798,7 +6786,7 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
 		</table>`;
   }
   renderAspectsList(aspects) {
-    return import_lit25.html`<div role="list" aria-label="Transit aspects">
+    return import_lit28.html`<div role="list" aria-label="Transit aspects">
 			${aspects.map((a, idx) => {
       const tGlyph = PLANET_GLYPH[capitalize(a.transitPlanet)] ?? "";
       const nGlyph = PLANET_GLYPH[capitalize(a.natalPlanet)] ?? "";
@@ -5806,7 +6794,7 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
       const interp = a.interpretation;
       const type = (a.type ?? "").toLowerCase();
       const status = a.isApplying ? "Applying" : "Separating";
-      return import_lit25.html`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
+      return import_lit28.html`<details class="aspect-card" role="listitem" name="transit-aspects" ?open=${idx === 0}>
 					<summary>
 						<span aria-hidden="true">${tGlyph}</span>
 						${a.transitPlanet}
@@ -5818,13 +6806,13 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
 						</span>
 					</summary>
 					<div class="interp-body">
-						${interp?.summary ? import_lit25.html`<p>${interp.summary}</p>` : import_lit25.nothing}
-						${interp?.impact ? import_lit25.html`<p><strong>Impact:</strong> ${interp.impact}</p>` : import_lit25.nothing}
-						${interp?.timing ? import_lit25.html`<p><strong>Timing:</strong> ${interp.timing}</p>` : import_lit25.nothing}
-						${interp?.guidance ? import_lit25.html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : import_lit25.nothing}
-						${interp?.keywords?.length ? import_lit25.html`<div class="interp-keywords">
-										${interp.keywords.map((k) => import_lit25.html`<span class="kw">${k}</span>`)}
-									</div>` : import_lit25.nothing}
+						${interp?.summary ? import_lit28.html`<p>${interp.summary}</p>` : import_lit28.nothing}
+						${interp?.impact ? import_lit28.html`<p><strong>Impact:</strong> ${interp.impact}</p>` : import_lit28.nothing}
+						${interp?.timing ? import_lit28.html`<p><strong>Timing:</strong> ${interp.timing}</p>` : import_lit28.nothing}
+						${interp?.guidance ? import_lit28.html`<p><strong>Guidance:</strong> ${interp.guidance}</p>` : import_lit28.nothing}
+						${interp?.keywords?.length ? import_lit28.html`<div class="interp-keywords">
+										${interp.keywords.map((k) => import_lit28.html`<span class="kw">${k}</span>`)}
+									</div>` : import_lit28.nothing}
 					</div>
 				</details>`;
     })}
@@ -5833,7 +6821,7 @@ var RoxyTransitsTable = class extends import_lit25.LitElement {
 };
 RoxyTransitsTable.styles = [
   baseStyles,
-  import_lit25.css`
+  import_lit28.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6032,46 +7020,33 @@ RoxyTransitsTable.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators23.property)({ attribute: false })
+  (0, import_decorators26.property)({ attribute: false })
 ], RoxyTransitsTable.prototype, "data", 2);
 RoxyTransitsTable = __decorateClass([
-  (0, import_decorators23.customElement)("roxy-transits-table")
+  (0, import_decorators26.customElement)("roxy-transits-table")
 ], RoxyTransitsTable);
 
 // packages/ui/src/components/vedic-kundli.ts
-var import_lit26 = require("lit");
-var import_decorators24 = require("lit/decorators.js");
-var RoxyVedicKundli = class extends import_lit26.LitElement {
+var import_lit29 = require("lit");
+var import_decorators27 = require("lit/decorators.js");
+var RoxyVedicKundli = class extends import_lit29.LitElement {
   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 import_lit26.html`<div class="roxy-empty" role="status">No kundli data</div>`;
+      return import_lit29.html`<div class="roxy-empty" role="status">No kundli data</div>`;
     const houses = this.buildHouses();
-    const isNorth = this.chartStyle === "north";
-    return import_lit26.html`<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 import_lit29.html`<div class="wrap">
 			<h2 class="title">Vedic kundli</h2>
 			<svg
 				viewBox="0 0 300 300"
@@ -6079,15 +7054,15 @@ var RoxyVedicKundli = class extends import_lit26.LitElement {
 				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,
-  import_lit26.css`
+  import_lit29.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6095,64 +7070,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([
+  (0, import_decorators27.property)({ attribute: false })
+], RoxyVedicKundli.prototype, "data", 2);
+__decorateClass([
+  (0, import_decorators27.property)({ type: String, reflect: true, attribute: "chart-style" })
+], RoxyVedicKundli.prototype, "chartStyle", 2);
+RoxyVedicKundli = __decorateClass([
+  (0, import_decorators27.customElement)("roxy-vedic-kundli")
+], RoxyVedicKundli);
+
+// packages/ui/src/components/vedic-planets-table.ts
+var import_lit30 = require("lit");
+var import_decorators28 = require("lit/decorators.js");
+var GRAHA_ORDER = [
+  "Lagna",
+  "Sun",
+  "Moon",
+  "Mars",
+  "Mercury",
+  "Jupiter",
+  "Venus",
+  "Saturn",
+  "Rahu",
+  "Ketu"
+];
+var RoxyVedicPlanetsTable = class extends import_lit30.LitElement {
+  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 import_lit30.html`<div class="roxy-empty" role="status">No chart data</div>`;
+    const rows = this.orderedRows();
+    return import_lit30.html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+			<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 import_lit30.html`<tr class=${isLagna ? "lagna" : ""}>
+							<td class="graha">
+								${glyph ? import_lit30.html`<span class="glyph">${glyph}</span>` : import_lit30.nothing}${p.graha ?? name}
+							</td>
+							<td>
+								${signGlyph ? import_lit30.html`<span class="glyph">${signGlyph}</span>` : import_lit30.nothing}${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 ? import_lit30.html`<span class="retro">R</span>` : import_lit30.nothing}</td>
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+};
+RoxyVedicPlanetsTable.styles = [
+  baseStyles,
+  import_lit30.css`
+			.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([
+  (0, import_decorators28.property)({ attribute: false })
+], RoxyVedicPlanetsTable.prototype, "data", 2);
+RoxyVedicPlanetsTable = __decorateClass([
+  (0, import_decorators28.customElement)("roxy-vedic-planets-table")
+], RoxyVedicPlanetsTable);
+
+// packages/ui/src/components/western-planets-table.ts
+var import_lit31 = require("lit");
+var import_decorators29 = require("lit/decorators.js");
+var RoxyWesternPlanetsTable = class extends import_lit31.LitElement {
+  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 import_lit31.html`<div class="roxy-empty" role="status">No chart data</div>`;
+    const rows = this.rows();
+    return import_lit31.html`<div class="wrap" aria-label="Western planetary positions" tabindex="0">
+			<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 import_lit31.html`<tr class=${r.isPoint ? "point" : ""}>
+							<td class="body">
+								${glyph ? import_lit31.html`<span class="glyph">${glyph}</span>` : import_lit31.nothing}${r.name}
+							</td>
+							<td>
+								${signGlyph ? import_lit31.html`<span class="glyph">${signGlyph}</span>` : import_lit31.nothing}${r.sign ?? ""}
+							</td>
+							<td class="num">
+								${typeof r.longitude === "number" ? formatSignPosition(r.longitude) : ""}
+							</td>
+							<td class="num">${typeof r.house === "number" ? r.house : ""}</td>
+							<td class="num">
+								${speed ? import_lit31.html`${speed}°/day` : import_lit31.nothing}
+								${r.isRetrograde ? import_lit31.html`<span class="retro"> ℞</span>` : import_lit31.nothing}
+							</td>
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+};
+RoxyWesternPlanetsTable.styles = [
+  baseStyles,
+  import_lit31.css`
+			.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([
-  (0, import_decorators24.property)({ attribute: false })
-], RoxyVedicKundli.prototype, "data", 2);
-__decorateClass([
-  (0, import_decorators24.property)({ type: String, reflect: true, attribute: "chart-style" })
-], RoxyVedicKundli.prototype, "chartStyle", 2);
-RoxyVedicKundli = __decorateClass([
-  (0, import_decorators24.customElement)("roxy-vedic-kundli")
-], RoxyVedicKundli);
+  (0, import_decorators29.property)({ attribute: false })
+], RoxyWesternPlanetsTable.prototype, "data", 2);
+RoxyWesternPlanetsTable = __decorateClass([
+  (0, import_decorators29.customElement)("roxy-western-planets-table")
+], RoxyWesternPlanetsTable);
 
 // packages/ui/src/components/yoga-list.ts
-var import_lit27 = require("lit");
-var import_decorators25 = require("lit/decorators.js");
-var RoxyYogaList = class extends import_lit27.LitElement {
+var import_lit32 = require("lit");
+var import_decorators30 = require("lit/decorators.js");
+var RoxyYogaList = class extends import_lit32.LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
@@ -6163,29 +7455,29 @@ var RoxyYogaList = class extends import_lit27.LitElement {
   }
   renderQualityChip(quality) {
     const cls = `quality-chip quality-${quality}`;
-    return import_lit27.html`<span class=${cls}>${quality}</span>`;
+    return import_lit32.html`<span class=${cls}>${quality}</span>`;
   }
   renderDetailCard(yoga) {
-    return import_lit27.html`<div class="detail-card">
+    return import_lit32.html`<div class="detail-card">
 			<p class="detail-name">
 				${yoga.name}
-				${yoga.quality ? this.renderQualityChip(yoga.quality) : import_lit27.nothing}
+				${yoga.quality ? this.renderQualityChip(yoga.quality) : import_lit32.nothing}
 			</p>
-			${yoga.description ? import_lit27.html`<p class="description">${yoga.description}</p>` : import_lit27.nothing}
-			${yoga.result ? import_lit27.html`<details>
+			${yoga.description ? import_lit32.html`<p class="description">${yoga.description}</p>` : import_lit32.nothing}
+			${yoga.result ? import_lit32.html`<details>
 						<summary>Effects</summary>
 						<div class="result-body">${yoga.result}</div>
-					</details>` : import_lit27.nothing}
+					</details>` : import_lit32.nothing}
 		</div>`;
   }
   render() {
     if (!this.data)
-      return import_lit27.html`<div class="roxy-empty" role="status">No yoga data</div>`;
+      return import_lit32.html`<div class="roxy-empty" role="status">No yoga data</div>`;
     const d = this.data;
     const lc = this.filter.toLowerCase();
     if ("description" in d && typeof d.description === "string") {
       const yoga = d;
-      return import_lit27.html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
+      return import_lit32.html`<div class="wrap">${this.renderDetailCard(yoga)}</div>`;
     }
     if ("yogas" in d && Array.isArray(d.yogas)) {
       const allYogas = d.yogas;
@@ -6194,10 +7486,10 @@ var RoxyYogaList = class extends import_lit27.LitElement {
         const detailYogas = allYogas;
         const filtered2 = lc ? detailYogas.filter((y) => y.name.toLowerCase().includes(lc)) : detailYogas;
         const total2 = d.total;
-        return import_lit27.html`<div class="wrap">
+        return import_lit32.html`<div class="wrap">
 					<div class="head">
 						<h2 class="title">Yoga catalog</h2>
-						${total2 !== void 0 ? import_lit27.html`<span class="count">${total2} total</span>` : import_lit27.nothing}
+						${total2 !== void 0 ? import_lit32.html`<span class="count">${total2} total</span>` : import_lit32.nothing}
 					</div>
 					<div class="search-wrap">
 						<input
@@ -6215,17 +7507,17 @@ var RoxyYogaList = class extends import_lit27.LitElement {
 						aria-live="polite"
 						aria-label="Yoga results"
 					>
-						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : import_lit27.html`<p class="no-results">No yogas match your search.</p>`}
+						${filtered2.length > 0 ? filtered2.map((y) => this.renderDetailCard(y)) : import_lit32.html`<p class="no-results">No yogas match your search.</p>`}
 					</div>
 				</div>`;
       }
       const catalogYogas = allYogas;
       const filtered = lc ? catalogYogas.filter((y) => y.name.toLowerCase().includes(lc)) : catalogYogas;
       const total = d.total;
-      return import_lit27.html`<div class="wrap">
+      return import_lit32.html`<div class="wrap">
 				<div class="head">
 					<h2 class="title">Yoga catalog</h2>
-					${total !== void 0 ? import_lit27.html`<span class="count">${total} total</span>` : import_lit27.nothing}
+					${total !== void 0 ? import_lit32.html`<span class="count">${total} total</span>` : import_lit32.nothing}
 				</div>
 				<div class="search-wrap">
 					<input
@@ -6244,20 +7536,20 @@ var RoxyYogaList = class extends import_lit27.LitElement {
 					aria-label="Yoga results"
 				>
 					${filtered.length > 0 ? filtered.map(
-        (y) => import_lit27.html`<div class="yoga-chip">
+        (y) => import_lit32.html`<div class="yoga-chip">
 									${y.name}
 									<span class="yoga-id">${y.id}</span>
 								</div>`
-      ) : import_lit27.html`<p class="no-results">No yogas match your search.</p>`}
+      ) : import_lit32.html`<p class="no-results">No yogas match your search.</p>`}
 				</div>
 			</div>`;
     }
-    return import_lit27.html`<div class="roxy-empty" role="status">No yoga data</div>`;
+    return import_lit32.html`<div class="roxy-empty" role="status">No yoga data</div>`;
   }
 };
 RoxyYogaList.styles = [
   baseStyles,
-  import_lit27.css`
+  import_lit32.css`
 			.wrap {
 				display: grid;
 				gap: var(--roxy-space-md, 1rem);
@@ -6408,13 +7700,13 @@ RoxyYogaList.styles = [
 		`
 ];
 __decorateClass([
-  (0, import_decorators25.property)({ attribute: false })
+  (0, import_decorators30.property)({ attribute: false })
 ], RoxyYogaList.prototype, "data", 2);
 __decorateClass([
-  (0, import_decorators25.state)()
+  (0, import_decorators30.state)()
 ], RoxyYogaList.prototype, "filter", 2);
 RoxyYogaList = __decorateClass([
-  (0, import_decorators25.customElement)("roxy-yoga-list")
+  (0, import_decorators30.customElement)("roxy-yoga-list")
 ], RoxyYogaList);
 
 // packages/ui/src/manifest.ts
@@ -6430,17 +7722,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",
@@ -6453,14 +7734,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"
   },
   {
@@ -6474,59 +7766,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"
   },
   {
@@ -6541,25 +7844,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"
   },
   {
@@ -6585,14 +7877,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"
   },
   {
@@ -6606,6 +7920,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",
@@ -6700,7 +8047,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);