@roxyapi/ui 0.3.1 → 0.4.0

package/dist/components/divisional-chart.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // packages/ui/src/components/divisional-chart.ts
-import { css as css2, html, LitElement, nothing as nothing2 } from "lit";
+import { css as css3, html as html2, LitElement, nothing as nothing2 } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 // packages/ui/src/tokens/index.ts
@@ -170,10 +170,24 @@ var baseStyles = css`
 		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
 		outline-offset: 2px;
 	}
+
+	/* Force the text-style variant on every Unicode glyph in the component.
+	 * macOS and iOS substitute coloured emoji glyphs for the planetary and
+	 * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
+	 * system colour-emoji font wins font selection. The text-style variant
+	 * keeps glyphs monochrome so they inherit the surrounding fill colour
+	 * and match the brand palette consistently across platforms.
+	 *
+	 * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
+	 * Firefox 139+). On older browsers the rule is silently ignored.
+	 */
+	:host {
+		font-variant-emoji: text;
+	}
 `;
 
 // packages/ui/src/utils/kundli-render.ts
-import { nothing, svg } from "lit";
+import { html, nothing, svg } from "lit";
 
 // packages/ui/src/utils/degree.ts
 function normalizeLongitude(lon) {
@@ -204,25 +218,45 @@ function capitalize(s) {
 }
 
 // packages/ui/src/utils/kundli-render.ts
+var VIEW_BOX = 400;
+var MARGIN = 20;
+var INNER = VIEW_BOX - 2 * MARGIN;
+var CENTRE = VIEW_BOX / 2;
 var RASHI_TO_SIGN = Object.fromEntries(
   SIGNS_ORDER.map((s) => [s.toLowerCase(), s])
 );
+var CHART_STYLES = [
+  { id: "north", label: "North" },
+  { id: "south", label: "South" },
+  { id: "east", label: "East" }
+];
 var RETRO_MARK = "\u02B3";
-function grahaLabel(p) {
+function isDivisionalPlacement(p, cellSign) {
+  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude)) {
+    return false;
+  }
+  return longitudeToSignPosition(p.longitude).sign.toLowerCase() !== cellSign.toLowerCase();
+}
+function grahaLabel(p, cellSign) {
   const abbr = PLANET_ABBR[capitalize(p.graha)] ?? p.graha.slice(0, 2);
   const retro = p.isRetrograde ? RETRO_MARK : "";
-  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude)) {
+  if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude) || isDivisionalPlacement(p, cellSign)) {
     return `${abbr}${retro}`;
   }
   const { degree } = longitudeToSignPosition(p.longitude);
   return `${abbr} ${degree}\xB0${retro}`;
 }
-function grahaTitle(p) {
+function grahaTitle(p, cellSign) {
   const parts = [capitalize(p.graha)];
+  const divisional = isDivisionalPlacement(p, cellSign);
+  if (divisional) {
+    parts.push(`in ${cellSign}`);
+  }
   if (typeof p.longitude === "number" && Number.isFinite(p.longitude)) {
     const sp = longitudeToSignPosition(p.longitude);
+    const minute = String(sp.minute).padStart(2, "0");
     parts.push(
-      `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}' ${sp.sign}`
+      divisional ? `D1: ${sp.degree}\xB0${minute}' ${sp.sign}` : `${sp.degree}\xB0${minute}' ${sp.sign}`
     );
   }
   if (p.nakshatra?.name) {
@@ -233,249 +267,562 @@ function grahaTitle(p) {
   if (p.isRetrograde) parts.push("retrograde");
   return parts.join(" \xB7 ");
 }
-function renderPlanetStack(planets, cx, baseY, lineHeight) {
+function renderPlanetStack(planets, cellSign, cx, baseY, lineHeight) {
   const startY = baseY - (planets.length - 1) * lineHeight / 2;
   return planets.map((p, j) => {
     const yPos = startY + j * lineHeight;
     return svg`<text class="planet-text" x=${cx} y=${yPos} text-anchor="middle" dominant-baseline="central">${grahaLabel(
-      p
-    )}<title>${grahaTitle(p)}</title></text>`;
+      p,
+      cellSign
+    )}<title>${grahaTitle(p, cellSign)}</title></text>`;
   });
 }
-var SOUTH_HOUSE_CENTERS = {
-  1: { x: 150, y: 58 },
-  2: { x: 205, y: 52 },
-  3: { x: 253, y: 112 },
-  4: { x: 243, y: 150 },
-  5: { x: 253, y: 188 },
-  6: { x: 205, y: 248 },
-  7: { x: 150, y: 242 },
-  8: { x: 95, y: 248 },
-  9: { x: 47, y: 188 },
-  10: { x: 57, y: 150 },
-  11: { x: 47, y: 112 },
-  12: { x: 95, y: 52 }
-};
-var SOUTH_SIGN_POSITIONS = {
-  1: { x: 150, y: 35 },
-  2: { x: 222, y: 40 },
-  3: { x: 265, y: 100 },
-  4: { x: 265, y: 150 },
-  5: { x: 265, y: 200 },
-  6: { x: 222, y: 260 },
-  7: { x: 150, y: 265 },
-  8: { x: 78, y: 260 },
-  9: { x: 35, y: 200 },
-  10: { x: 35, y: 150 },
-  11: { x: 35, y: 100 },
-  12: { x: 78, y: 40 }
-};
-var NORTH_HOUSE_CENTERS = {
-  1: { x: 150, y: 60 },
-  2: { x: 225, y: 100 },
-  3: { x: 255, y: 150 },
-  4: { x: 225, y: 200 },
-  5: { x: 150, y: 240 },
-  6: { x: 75, y: 200 },
-  7: { x: 45, y: 150 },
-  8: { x: 75, y: 100 },
-  9: { x: 100, y: 80 },
-  10: { x: 150, y: 108 },
-  11: { x: 200, y: 80 },
-  12: { x: 200, y: 220 }
-};
-var EAST_HOUSE_CENTERS = {
-  1: { x: 150, y: 80 },
-  // inner diamond, top
-  2: { x: 220, y: 33 },
-  // top-right corner, upper triangle
-  3: { x: 267, y: 80 },
-  // top-right corner, right triangle
-  4: { x: 220, y: 150 },
-  // inner diamond, right
-  5: { x: 267, y: 220 },
-  // bottom-right corner, right triangle
-  6: { x: 220, y: 267 },
-  // bottom-right corner, lower triangle
-  7: { x: 150, y: 220 },
-  // inner diamond, bottom
-  8: { x: 80, y: 267 },
-  // bottom-left corner, lower triangle
-  9: { x: 33, y: 220 },
-  // bottom-left corner, left triangle
-  10: { x: 80, y: 150 },
-  // inner diamond, left
-  11: { x: 33, y: 80 },
-  // top-left corner, left triangle
-  12: { x: 80, y: 33 }
-  // top-left corner, upper triangle
-};
-var EAST_SIGN_POSITIONS = {
-  1: { x: 150, y: 55 },
-  2: { x: 235, y: 24 },
-  3: { x: 276, y: 62 },
-  4: { x: 242, y: 150 },
-  5: { x: 276, y: 238 },
-  6: { x: 235, y: 276 },
-  7: { x: 150, y: 245 },
-  8: { x: 65, y: 276 },
-  9: { x: 24, y: 238 },
-  10: { x: 58, y: 150 },
-  11: { x: 24, y: 62 },
-  12: { x: 65, y: 24 }
+function toKundliViewModel(meta, divisionLabel) {
+  const placements = {};
+  for (const sign of SIGNS_ORDER) placements[sign.toLowerCase()] = [];
+  let lagnaSign = "";
+  for (const [name, pos] of Object.entries(meta ?? {})) {
+    const rashiKey = (pos?.rashi ?? "").toLowerCase();
+    if (name === "Lagna" || pos?.graha === "Lagna") {
+      lagnaSign = RASHI_TO_SIGN[rashiKey] ?? "";
+      continue;
+    }
+    if (!rashiKey || !(rashiKey in placements)) continue;
+    placements[rashiKey]?.push({
+      graha: pos.graha ?? name,
+      longitude: pos.longitude,
+      nakshatra: pos.nakshatra,
+      isRetrograde: pos.isRetrograde,
+      awastha: pos.awastha
+    });
+  }
+  return { lagnaSign, placements, divisionLabel };
+}
+var SOUTH_CELL = INNER / 4;
+var SOUTH_CELL_GRID = {
+  Pisces: { col: 0, row: 0 },
+  Aries: { col: 1, row: 0 },
+  Taurus: { col: 2, row: 0 },
+  Gemini: { col: 3, row: 0 },
+  Cancer: { col: 3, row: 1 },
+  Leo: { col: 3, row: 2 },
+  Virgo: { col: 3, row: 3 },
+  Libra: { col: 2, row: 3 },
+  Scorpio: { col: 1, row: 3 },
+  Sagittarius: { col: 0, row: 3 },
+  Capricorn: { col: 0, row: 2 },
+  Aquarius: { col: 0, row: 1 }
 };
-function renderSouthHouseGroup(h) {
-  const center = SOUTH_HOUSE_CENTERS[h.number];
-  const signPos = SOUTH_SIGN_POSITIONS[h.number];
-  if (!center || !signPos) return nothing;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
-  const baseY = h.isLagna ? center.y + 8 : center.y;
+function southCellRect(sign) {
+  const g = SOUTH_CELL_GRID[sign] ?? { col: 0, row: 0 };
+  return {
+    x: MARGIN + g.col * SOUTH_CELL,
+    y: MARGIN + g.row * SOUTH_CELL,
+    w: SOUTH_CELL,
+    h: SOUTH_CELL
+  };
+}
+function renderSouthFrame(divisionLabel) {
+  const a = MARGIN;
+  const b = MARGIN + SOUTH_CELL;
+  const c = MARGIN + 2 * SOUTH_CELL;
+  const d = MARGIN + 3 * SOUTH_CELL;
+  const e = VIEW_BOX - MARGIN;
   return svg`
-		<g>
-			${h.isLagna ? svg`<rect
-							class="lagna-bg"
-							x=${center.x - 30} y=${center.y - 28}
-							width="60" height="56" rx="6"
-						/>` : nothing}
-			${signAbbr ? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing}
-			${h.isLagna ? svg`<text class="lagna-marker" x=${center.x} y=${center.y - 18} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing}
-			${renderPlanetStack(h.planets, center.x, baseY, 13)}
+		<rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${a} y1=${b} x2=${e} y2=${b} stroke-width="1" />
+		<line class="line" x1=${a} y1=${d} x2=${e} y2=${d} stroke-width="1" />
+		<line class="line" x1=${b} y1=${a} x2=${b} y2=${e} stroke-width="1" />
+		<line class="line" x1=${d} y1=${a} x2=${d} y2=${e} stroke-width="1" />
+		<line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
+		<line class="line" x1=${d} y1=${c} x2=${e} y2=${c} stroke-width="1" />
+		<line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${d} x2=${c} y2=${e} stroke-width="1" />
+		${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
+	`;
+}
+function houseNumberInSign(sign, lagnaSign) {
+  const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
+  const signIdx = SIGNS_ORDER.findIndex((s) => s === sign);
+  if (lagnaIdx === -1 || signIdx === -1) return 0;
+  return (signIdx - lagnaIdx + 12) % 12 + 1;
+}
+function renderSouthCell(sign, planets, isLagna, houseNum) {
+  const r = southCellRect(sign);
+  const cx = r.x + r.w / 2;
+  const cy = r.y + r.h / 2;
+  const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
+  const slashInset = 14;
+  return svg`
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? svg`
+						<rect class="lagna-bg" x=${r.x} y=${r.y} width=${r.w} height=${r.h} />
+						<line class="lagna-slash" x1=${r.x + r.w - slashInset} y1=${r.y + slashInset} x2=${r.x + slashInset} y2=${r.y + r.h - slashInset} stroke-width="1.2" />
+					` : nothing}
+			<text class="sign-text" x=${r.x + 6} y=${r.y + 12} text-anchor="start" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? svg`<text class="house-num" x=${r.x + r.w - 6} y=${r.y + 12} text-anchor="end" dominant-baseline="central">${houseNum}</text>` : nothing}
+			${planets.length ? renderPlanetStack(planets, sign, cx, cy + 4, 14) : nothing}
 		</g>
 	`;
 }
-function renderNorthFrame() {
+function renderSouthSvg(vm) {
+  const lagnaKey = vm.lagnaSign.toLowerCase();
+  return svg`
+		${renderSouthFrame(vm.divisionLabel)}
+		${SIGNS_ORDER.map(
+    (sign) => renderSouthCell(
+      sign,
+      vm.placements[sign.toLowerCase()] ?? [],
+      sign.toLowerCase() === lagnaKey,
+      houseNumberInSign(sign, vm.lagnaSign)
+    )
+  )}
+	`;
+}
+var NORTH_VERTICES = {
+  tl: { x: MARGIN, y: MARGIN },
+  tr: { x: VIEW_BOX - MARGIN, y: MARGIN },
+  br: { x: VIEW_BOX - MARGIN, y: VIEW_BOX - MARGIN },
+  bl: { x: MARGIN, y: VIEW_BOX - MARGIN },
+  top: { x: CENTRE, y: MARGIN },
+  right: { x: VIEW_BOX - MARGIN, y: CENTRE },
+  bottom: { x: CENTRE, y: VIEW_BOX - MARGIN },
+  left: { x: MARGIN, y: CENTRE },
+  tlMid: { x: CENTRE - INNER / 4, y: CENTRE - INNER / 4 },
+  trMid: { x: CENTRE + INNER / 4, y: CENTRE - INNER / 4 },
+  brMid: { x: CENTRE + INNER / 4, y: CENTRE + INNER / 4 },
+  blMid: { x: CENTRE - INNER / 4, y: CENTRE + INNER / 4 }
+};
+function centroidOf(pts) {
+  const x = pts.reduce((s, p) => s + p.x, 0) / pts.length;
+  const y = pts.reduce((s, p) => s + p.y, 0) / pts.length;
+  return { x, y };
+}
+var NORTH_HOUSE_CENTERS = {
+  1: { x: CENTRE, y: NORTH_VERTICES.tlMid.y },
+  2: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.top, NORTH_VERTICES.tlMid]),
+  3: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.left, NORTH_VERTICES.tlMid]),
+  4: { x: NORTH_VERTICES.tlMid.x, y: CENTRE },
+  5: centroidOf([NORTH_VERTICES.bl, NORTH_VERTICES.left, NORTH_VERTICES.blMid]),
+  6: centroidOf([
+    NORTH_VERTICES.bl,
+    NORTH_VERTICES.bottom,
+    NORTH_VERTICES.blMid
+  ]),
+  7: { x: CENTRE, y: NORTH_VERTICES.blMid.y },
+  8: centroidOf([
+    NORTH_VERTICES.br,
+    NORTH_VERTICES.bottom,
+    NORTH_VERTICES.brMid
+  ]),
+  9: centroidOf([
+    NORTH_VERTICES.br,
+    NORTH_VERTICES.right,
+    NORTH_VERTICES.brMid
+  ]),
+  10: { x: NORTH_VERTICES.brMid.x, y: CENTRE },
+  11: centroidOf([
+    NORTH_VERTICES.tr,
+    NORTH_VERTICES.right,
+    NORTH_VERTICES.trMid
+  ]),
+  12: centroidOf([NORTH_VERTICES.tr, NORTH_VERTICES.top, NORTH_VERTICES.trMid])
+};
+function rashiInHouse(houseNum, lagnaSign) {
+  const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
+  if (lagnaIdx === -1) return houseNum;
+  return (lagnaIdx + houseNum - 1) % 12 + 1;
+}
+function renderNorthFrame(divisionLabel) {
+  const { tl, tr, br, bl, top, right, bottom, left } = NORTH_VERTICES;
   return svg`
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
-		<line class="line" x1="150" y1="10" x2="150" y2="290" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="290" y2="150" stroke-width="1" />
-		<line class="line" x1="150" y1="10" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="10" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="290" x2="10" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
-		<line class="line" x1="150" y1="290" x2="290" y2="150" stroke-width="0.6" stroke-dasharray="3,3" />
+		<rect class="line" x=${tl.x} y=${tl.y} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<polygon class="line" points="${top.x},${top.y} ${right.x},${right.y} ${bottom.x},${bottom.y} ${left.x},${left.y}" stroke-width="1" fill="none" />
+		<line class="line" x1=${tl.x} y1=${tl.y} x2=${br.x} y2=${br.y} stroke-width="1" />
+		<line class="line" x1=${tr.x} y1=${tr.y} x2=${bl.x} y2=${bl.y} stroke-width="1" />
+		${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
 	`;
 }
-function renderNorthHouseGroup(h) {
-  const center = NORTH_HOUSE_CENTERS[h.number];
-  if (!center) return nothing;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+function renderNorthCell(houseNum, rashiNum, sign, planets, isLagna) {
+  const c = NORTH_HOUSE_CENTERS[houseNum];
+  if (!c) return svg``;
+  const rashiOffsetY = Math.min(14, Math.abs(c.y - CENTRE) * 0.45 + 6);
+  const ascOffsetY = rashiOffsetY + 12;
   return svg`
-		<g>
-			${h.isLagna ? svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="22" />` : nothing}
-			${signAbbr ? svg`<text class="sign-text" x=${center.x} y=${center.y - 10} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing}
-			<text class="house-num" x=${center.x} y=${center.y + 2} text-anchor="middle" dominant-baseline="central">${h.number}</text>
-			${renderPlanetStack(h.planets, center.x, center.y + 14, 11)}
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			<text class="rashi-num" x=${c.x} y=${c.y - rashiOffsetY} text-anchor="middle" dominant-baseline="central">${rashiNum}</text>
+			${isLagna ? svg`<text class="lagna-marker" x=${c.x} y=${c.y - ascOffsetY} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing}
+			${planets.length ? renderPlanetStack(planets, sign, c.x, c.y + 8, 12) : nothing}
 		</g>
 	`;
 }
-function renderSouthFrame() {
+function renderNorthSvg(vm) {
+  const lagnaSign = vm.lagnaSign || "Aries";
   return svg`
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1.5" />
-		<polygon class="line" points="220,80 220,220 80,220 80,80" stroke-width="1" fill="none" />
-		<line class="line" x1="150" y1="10" x2="80" y2="80" stroke-width="1" />
-		<line class="line" x1="150" y1="10" x2="220" y2="80" stroke-width="1" />
-		<line class="line" x1="290" y1="150" x2="220" y2="80" stroke-width="1" />
-		<line class="line" x1="290" y1="150" x2="220" y2="220" stroke-width="1" />
-		<line class="line" x1="150" y1="290" x2="220" y2="220" stroke-width="1" />
-		<line class="line" x1="150" y1="290" x2="80" y2="220" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="80" y2="220" stroke-width="1" />
-		<line class="line" x1="10" y1="150" x2="80" y2="80" stroke-width="1" />
+		${renderNorthFrame(vm.divisionLabel)}
+		${Array.from({ length: 12 }, (_, i) => {
+    const houseNum = i + 1;
+    const rashiNum = rashiInHouse(houseNum, lagnaSign);
+    const sign = SIGNS_ORDER[rashiNum - 1] ?? "Aries";
+    return renderNorthCell(
+      houseNum,
+      rashiNum,
+      sign,
+      vm.placements[sign.toLowerCase()] ?? [],
+      houseNum === 1
+    );
+  })}
 	`;
 }
-function renderEastFrame() {
+var EAST_CELL = INNER / 3;
+function eastCells() {
+  const a = MARGIN;
+  const b = MARGIN + EAST_CELL;
+  const c = MARGIN + 2 * EAST_CELL;
+  const d = VIEW_BOX - MARGIN;
+  const aries = [
+    { x: b, y: a },
+    { x: c, y: a },
+    { x: c, y: b },
+    { x: b, y: b }
+  ];
+  const cancer = [
+    { x: a, y: b },
+    { x: b, y: b },
+    { x: b, y: c },
+    { x: a, y: c }
+  ];
+  const libra = [
+    { x: b, y: c },
+    { x: c, y: c },
+    { x: c, y: d },
+    { x: b, y: d }
+  ];
+  const capricorn = [
+    { x: c, y: b },
+    { x: d, y: b },
+    { x: d, y: c },
+    { x: c, y: c }
+  ];
+  const taurus = [
+    { x: a, y: a },
+    { x: b, y: a },
+    { x: b, y: b }
+  ];
+  const gemini = [
+    { x: a, y: a },
+    { x: b, y: b },
+    { x: a, y: b }
+  ];
+  const leo = [
+    { x: a, y: c },
+    { x: b, y: c },
+    { x: a, y: d }
+  ];
+  const virgo = [
+    { x: b, y: c },
+    { x: b, y: d },
+    { x: a, y: d }
+  ];
+  const scorpio = [
+    { x: c, y: c },
+    { x: c, y: d },
+    { x: d, y: d }
+  ];
+  const sagittarius = [
+    { x: c, y: c },
+    { x: d, y: d },
+    { x: d, y: c }
+  ];
+  const aquarius = [
+    { x: d, y: a },
+    { x: d, y: b },
+    { x: c, y: b }
+  ];
+  const pisces = [
+    { x: c, y: a },
+    { x: d, y: a },
+    { x: c, y: b }
+  ];
+  const polys = {
+    Aries: aries,
+    Taurus: taurus,
+    Gemini: gemini,
+    Cancer: cancer,
+    Leo: leo,
+    Virgo: virgo,
+    Libra: libra,
+    Scorpio: scorpio,
+    Sagittarius: sagittarius,
+    Capricorn: capricorn,
+    Aquarius: aquarius,
+    Pisces: pisces
+  };
+  const out = {};
+  for (const [sign, points] of Object.entries(polys)) {
+    out[sign] = { points: [...points], centroid: centroidOf(points) };
+  }
+  return out;
+}
+var EAST_CELLS = eastCells();
+function renderEastFrame(divisionLabel) {
+  const a = MARGIN;
+  const b = MARGIN + EAST_CELL;
+  const c = MARGIN + 2 * EAST_CELL;
+  const d = VIEW_BOX - MARGIN;
   return svg`
-		<rect class="line" x="10" y="10" width="280" height="280" stroke-width="1.5" fill="none" />
-		<line class="line" x1="10" y1="10" x2="290" y2="290" stroke-width="1" />
-		<line class="line" x1="290" y1="10" x2="10" y2="290" stroke-width="1" />
-		<polygon class="line" points="150,10 290,150 150,290 10,150" stroke-width="1" fill="none" />
+		<rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${a} y1=${b} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${b} x2=${d} y2=${b} stroke-width="1" />
+		<line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
+		<line class="line" x1=${c} y1=${c} x2=${d} y2=${c} stroke-width="1" />
+		<line class="line" x1=${b} y1=${a} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${b} y1=${c} x2=${b} y2=${d} stroke-width="1" />
+		<line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${c} y1=${c} x2=${c} y2=${d} stroke-width="1" />
+		<line class="line" x1=${a} y1=${a} x2=${b} y2=${b} stroke-width="1" />
+		<line class="line" x1=${d} y1=${a} x2=${c} y2=${b} stroke-width="1" />
+		<line class="line" x1=${d} y1=${d} x2=${c} y2=${c} stroke-width="1" />
+		<line class="line" x1=${a} y1=${d} x2=${b} y2=${c} stroke-width="1" />
+		${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
 	`;
 }
-function renderEastHouseGroup(h) {
-  const center = EAST_HOUSE_CENTERS[h.number];
-  const signPos = EAST_SIGN_POSITIONS[h.number];
-  if (!center || !signPos) return nothing;
-  const signAbbr = SIGN_ABBR[h.sign] ?? "";
+function renderEastCell(sign, planets, isLagna, houseNum) {
+  const cell = EAST_CELLS[sign];
+  if (!cell) return svg``;
+  const { centroid: cen, points } = cell;
+  const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
+  const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
   return svg`
-		<g>
-			${h.isLagna ? svg`<circle class="lagna-bg" cx=${center.x} cy=${center.y} r="20" />` : nothing}
-			${signAbbr ? svg`<text class="sign-text" x=${signPos.x} y=${signPos.y} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>` : nothing}
-			${h.isLagna ? svg`<text class="lagna-marker" x=${center.x} y=${center.y - 14} text-anchor="middle" dominant-baseline="central">LAGNA</text>` : nothing}
-			${renderPlanetStack(h.planets, center.x, center.y + 2, 11)}
+		<g class=${isLagna ? "cell lagna" : "cell"}>
+			${isLagna ? svg`<polygon class="lagna-bg" points=${polyPoints} />` : nothing}
+			<text class="sign-text" x=${cen.x} y=${cen.y - 16} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>
+			${houseNum > 0 ? svg`<text class="house-num" x=${cen.x + 18} y=${cen.y - 16} text-anchor="start" dominant-baseline="central">${houseNum}</text>` : nothing}
+			${isLagna ? svg`<text class="lagna-marker" x=${cen.x} y=${cen.y - 30} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing}
+			${planets.length ? renderPlanetStack(planets, sign, cen.x, cen.y + 4, 12) : nothing}
 		</g>
 	`;
 }
-function buildHousesFromMeta(meta) {
-  const byRashi = /* @__PURE__ */ new Map();
-  let lagnaKey = "";
-  for (const [name, pos] of Object.entries(meta)) {
-    const rashiKey = (pos?.rashi ?? "").toLowerCase();
-    if (name === "Lagna" || pos?.graha === "Lagna") {
-      lagnaKey = rashiKey;
-      continue;
-    }
-    if (!rashiKey) continue;
-    const list = byRashi.get(rashiKey) ?? [];
-    list.push({
-      graha: pos.graha ?? name,
-      longitude: pos.longitude,
-      nakshatra: pos.nakshatra,
-      isRetrograde: pos.isRetrograde,
-      awastha: pos.awastha
-    });
-    byRashi.set(rashiKey, list);
-  }
-  return SIGNS_ORDER.map((sign, i) => {
-    const key = sign.toLowerCase();
-    return {
-      number: i + 1,
+function renderEastSvg(vm) {
+  const lagnaKey = vm.lagnaSign.toLowerCase();
+  return svg`
+		${renderEastFrame(vm.divisionLabel)}
+		${SIGNS_ORDER.map(
+    (sign) => renderEastCell(
       sign,
-      planets: byRashi.get(key) ?? [],
-      isLagna: lagnaKey === key
-    };
-  });
+      vm.placements[sign.toLowerCase()] ?? [],
+      sign.toLowerCase() === lagnaKey,
+      houseNumberInSign(sign, vm.lagnaSign)
+    )
+  )}
+	`;
 }
+function renderKundliSvg(vm, style) {
+  switch (style) {
+    case "north":
+      return renderNorthSvg(vm);
+    case "east":
+      return renderEastSvg(vm);
+    default:
+      return renderSouthSvg(vm);
+  }
+}
+function renderKundliStyleTablist(active, setStyle) {
+  const onKeyDown = (e) => {
+    const idx = CHART_STYLES.findIndex((s) => s.id === active);
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const next = CHART_STYLES[(idx + 1) % CHART_STYLES.length];
+      if (next) setStyle(next.id);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const next = CHART_STYLES[(idx - 1 + CHART_STYLES.length) % CHART_STYLES.length];
+      if (next) setStyle(next.id);
+    }
+  };
+  return html`<div
+		class="kundli-tablist"
+		role="tablist"
+		aria-label="Kundli style"
+		@keydown=${onKeyDown}
+	>
+		${CHART_STYLES.map(
+    (s) => html`<button
+				type="button"
+				class="kundli-tab"
+				role="tab"
+				id="kundli-tab-${s.id}"
+				aria-selected=${active === s.id ? "true" : "false"}
+				tabindex=${active === s.id ? "0" : "-1"}
+				@click=${() => setStyle(s.id)}
+			>
+				${s.label}
+			</button>`
+  )}
+	</div>`;
+}
+
+// packages/ui/src/utils/kundli-styles.ts
+import { css as css2 } from "lit";
+var kundliStyles = css2`
+	.wrap {
+		display: grid;
+		gap: var(--roxy-space-md, 1rem);
+	}
+	.header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--roxy-space-sm, 0.5rem);
+	}
+	.title {
+		font-size: var(--roxy-text-lg, 1.125rem);
+		font-weight: var(--roxy-weight-bold, 600);
+		margin: 0;
+	}
+	.kundli-tablist {
+		display: inline-flex;
+		gap: 2px;
+		border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+	}
+	.kundli-tab {
+		padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+		font-size: var(--roxy-text-sm, 0.875rem);
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		margin-bottom: -2px;
+		cursor: pointer;
+		color: var(--roxy-muted, #71717a);
+		font-family: inherit;
+		transition: color var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, ease);
+	}
+	.kundli-tab[aria-selected='true'] {
+		color: var(--roxy-accent-fg, #b45309);
+		border-bottom-color: var(--roxy-accent, #f59e0b);
+		font-weight: var(--roxy-weight-bold, 600);
+	}
+	.kundli-tab:hover:not([aria-selected='true']) {
+		color: var(--roxy-fg, #0a0a0a);
+	}
+	.kundli-tab:focus-visible {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
+	svg {
+		display: block;
+		width: 100%;
+		max-width: 560px;
+		aspect-ratio: 1 / 1;
+		height: auto;
+		margin: 0 auto;
+	}
+	.line {
+		fill: transparent;
+		stroke: var(--roxy-border, #d4d4d8);
+	}
+	.sign-text {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 11px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.rashi-num {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 12px;
+		font-weight: 500;
+		font-family: var(--roxy-font-sans);
+	}
+	.house-num {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 11px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		opacity: 0.85;
+	}
+	.planet-text {
+		fill: var(--roxy-fg, #0a0a0a);
+		font-size: 13px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+	}
+	.centre-label {
+		fill: var(--roxy-muted, #71717a);
+		font-size: 14px;
+		font-weight: 600;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.02em;
+	}
+	.lagna-marker {
+		fill: var(--roxy-accent-fg, #b45309);
+		font-size: 10px;
+		font-weight: 700;
+		font-family: var(--roxy-font-sans);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+	.lagna-bg {
+		fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+	}
+	.lagna-slash {
+		stroke: var(--roxy-accent, #f59e0b);
+		stroke-linecap: round;
+		opacity: 0.7;
+	}
+`;
 
 // packages/ui/src/components/divisional-chart.ts
 var RoxyDivisionalChart = class extends LitElement {
   constructor() {
     super(...arguments);
     this.data = null;
-    this.chartStyle = "south";
+    this.chartStyle = "north";
+    this.setStyle = (next) => {
+      this.chartStyle = next;
+    };
   }
-  buildHouses() {
-    if (!this.data?.chart?.meta) return [];
-    return buildHousesFromMeta(this.data.chart.meta);
+  viewModel() {
+    if (!this.data?.chart?.meta) return null;
+    const { division } = this.data;
+    const label = `D${division.number} ${division.name}`;
+    return toKundliViewModel(this.data.chart.meta, label);
   }
   render() {
-    if (!this.data)
-      return html`<div class="roxy-empty" role="status">No divisional chart data</div>`;
+    const vm = this.viewModel();
+    if (!this.data || !vm)
+      return html2`<div class="roxy-empty" role="status">No divisional chart data</div>`;
     const { division, vargottama } = this.data;
-    const houses = this.buildHouses();
-    const style = this.chartStyle;
-    const frame = style === "north" ? renderNorthFrame() : style === "east" ? renderEastFrame() : renderSouthFrame();
-    const houseGroup = style === "north" ? renderNorthHouseGroup : style === "east" ? renderEastHouseGroup : renderSouthHouseGroup;
-    return html`<div class="wrap">
+    return html2`<div class="wrap">
 			<div class="header">
-				<h2 class="title">
-					D${division.number} ${division.name}
-					${division.sanskritName && division.sanskritName !== division.name ? html`<span class="division-meta"> · ${division.sanskritName}</span>` : nothing2}
-				</h2>
-				${division.significance ? html`<p class="significance">${division.significance}</p>` : nothing2}
+				<div>
+					<h2 class="title">
+						D${division.number} ${division.name}
+						${division.sanskritName && division.sanskritName !== division.name ? html2`<span class="division-meta"> · ${division.sanskritName}</span>` : nothing2}
+					</h2>
+					${division.significance ? html2`<p class="significance">${division.significance}</p>` : nothing2}
+				</div>
+				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
 			</div>
 
 			<svg
-				viewBox="0 0 300 300"
+				viewBox="0 0 400 400"
+				preserveAspectRatio="xMidYMid meet"
 				role="img"
 				aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
 			>
 				<title>D${division.number} ${division.name}</title>
-				${frame}
-				${houses.map((h) => houseGroup(h))}
+				${renderKundliSvg(vm, this.chartStyle)}
 			</svg>
 
-			${vargottama && vargottama.length > 0 ? html`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
+			${vargottama && vargottama.length > 0 ? html2`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
 						<span class="vargottama-label">Vargottama:</span>
 						${vargottama.map(
-      (planet) => html`<span class="vargottama-pill" role="listitem">
+      (planet) => html2`<span class="vargottama-pill" role="listitem">
 									${PLANET_GLYPH[planet] ?? ""} ${planet}
 								</span>`
     )}
@@ -485,20 +832,8 @@ var RoxyDivisionalChart = class extends LitElement {
 };
 RoxyDivisionalChart.styles = [
   baseStyles,
-  css2`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.header {
-				display: grid;
-				gap: var(--roxy-space-xs, 0.25rem);
-			}
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
+  kundliStyles,
+  css3`
 			.division-meta {
 				font-size: var(--roxy-text-sm, 0.875rem);
 				color: var(--roxy-muted, #71717a);
@@ -511,46 +846,6 @@ RoxyDivisionalChart.styles = [
 				padding-left: var(--roxy-space-sm, 0.5rem);
 				margin: 0;
 			}
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 360px;
-				margin: 0 auto;
-			}
-			.line {
-				fill: transparent;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.sign-text {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 500;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-text {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 11px;
-				font-weight: 600;
-				font-family: var(--roxy-font-sans);
-			}
-			.house-num {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-weight: 400;
-				font-family: var(--roxy-font-sans);
-			}
-			.lagna-marker {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 8px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.05em;
-			}
-			.lagna-bg {
-				fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 12%, transparent);
-				stroke: color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-				stroke-width: 0.8;
-			}
 			.vargottama-row {
 				display: flex;
 				flex-wrap: wrap;