@roxyapi/ui 0.5.0 → 0.6.1

package/dist/components/divisional-chart.js

@@ -1,933 +1,68 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-
-// packages/ui/src/components/divisional-chart.ts
-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
-var PLANET_GLYPH = {
-  Sun: "\u2609",
-  Moon: "\u263D",
-  Mercury: "\u263F",
-  Venus: "\u2640",
-  Earth: "\u2641",
-  Mars: "\u2642",
-  Jupiter: "\u2643",
-  Saturn: "\u2644",
-  Uranus: "\u2645",
-  Neptune: "\u2646",
-  Pluto: "\u2647",
-  Rahu: "\u260A",
-  Ketu: "\u260B",
-  Ascendant: "Asc",
-  Lagna: "La",
-  NorthNode: "\u260A",
-  SouthNode: "\u260B",
-  "North node": "\u260A",
-  "South node": "\u260B",
-  Chiron: "\u26B7",
-  Lilith: "\u26B8",
-  "Black moon lilith": "\u26B8"
-};
-var PLANET_ABBR = {
-  Sun: "Su",
-  Moon: "Mo",
-  Mercury: "Me",
-  Venus: "Ve",
-  Mars: "Ma",
-  Jupiter: "Ju",
-  Saturn: "Sa",
-  Uranus: "Ur",
-  Neptune: "Ne",
-  Pluto: "Pl",
-  Rahu: "Ra",
-  Ketu: "Ke",
-  Ascendant: "Asc",
-  Lagna: "La"
-};
-var SIGN_ABBR = {
-  Aries: "Ar",
-  Taurus: "Ta",
-  Gemini: "Ge",
-  Cancer: "Cn",
-  Leo: "Le",
-  Virgo: "Vi",
-  Libra: "Li",
-  Scorpio: "Sc",
-  Sagittarius: "Sg",
-  Capricorn: "Cp",
-  Aquarius: "Aq",
-  Pisces: "Pi"
-};
-var SIGNS_ORDER = [
-  "Aries",
-  "Taurus",
-  "Gemini",
-  "Cancer",
-  "Leo",
-  "Virgo",
-  "Libra",
-  "Scorpio",
-  "Sagittarius",
-  "Capricorn",
-  "Aquarius",
-  "Pisces"
-];
-var RASHI_KEYS = SIGNS_ORDER.map(
-  (s) => s.toLowerCase()
-);
-
-// packages/ui/src/utils/base-styles.ts
-import { css } from "lit";
-var baseStyles = css`
-	:host {
-		display: block;
-		container-type: inline-size;
-		font-family: var(
-			--roxy-font-sans,
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Roboto,
-			sans-serif
-		);
-		color: var(--roxy-fg, #0a0a0a);
-		background: transparent;
-		font-size: var(--roxy-text-base, 1rem);
-		line-height: var(--roxy-leading-normal, 1.5);
-		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
-			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
-	}
-
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	@keyframes roxy-fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(2px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		:host {
-			animation: none;
-		}
-	}
-
-	.roxy-skeleton {
-		background: linear-gradient(
-			90deg,
-			var(--roxy-border, #e4e4e7) 0%,
-			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
-			var(--roxy-border, #e4e4e7) 100%
-		);
-		background-size: 200% 100%;
-		animation: roxy-shimmer 1.4s ease-in-out infinite;
-		border-radius: var(--roxy-radius-md, 8px);
-	}
-
-	@keyframes roxy-shimmer {
-		0% {
-			background-position: 200% 0;
-		}
-		100% {
-			background-position: -200% 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.roxy-skeleton {
-			animation: none;
-		}
-	}
-
-	.roxy-empty {
-		padding: var(--roxy-space-lg, 1.5rem);
-		color: var(--roxy-muted, #71717a);
-		text-align: center;
-		font-size: var(--roxy-text-sm, 0.875rem);
-	}
-
-	:host(:focus-within) .roxy-card {
-		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 { html, nothing, svg } from "lit";
-
-// packages/ui/src/utils/degree.ts
-function normalizeLongitude(lon) {
-  const wrapped = lon % 360;
-  return wrapped < 0 ? wrapped + 360 : wrapped;
-}
-function longitudeToSignPosition(longitude) {
-  const lon = normalizeLongitude(longitude);
-  const signIndex = Math.floor(lon / 30) % 12;
-  const within = lon % 30;
-  const degree = Math.floor(within);
-  const minuteFloat = (within - degree) * 60;
-  const minute = Math.floor(minuteFloat);
-  const second = Math.round((minuteFloat - minute) * 60);
-  return {
-    sign: SIGNS_ORDER[signIndex] ?? "Aries",
-    signIndex,
-    degree,
-    minute,
-    second
-  };
-}
-
-// packages/ui/src/utils/string.ts
-function capitalize(s) {
-  if (!s) return "";
-  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
-// 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 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) || isDivisionalPlacement(p, cellSign)) {
-    return `${abbr}${retro}`;
-  }
-  const { degree } = longitudeToSignPosition(p.longitude);
-  return `${abbr} ${degree}\xB0${retro}`;
-}
-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(
-      divisional ? `D1: ${sp.degree}\xB0${minute}' ${sp.sign}` : `${sp.degree}\xB0${minute}' ${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, 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,
-      cellSign
-    )}<title>${grahaTitle(p, cellSign)}</title></text>`;
-  });
-}
-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 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`
-		<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}
+var X=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var S=(e,t,r,n)=>{for(var o=n>1?void 0:n?Z(t,r):t,a=e.length-1,i;a>=0;a--)(i=e[a])&&(o=(n?i(t,r,o):i(o))||o);return n&&o&&X(t,r,o),o};import{css as Tt,html as w,LitElement as Mt,nothing as L}from"lit";import{customElement as Ct,property as U}from"lit/decorators.js";var G={Sun:"\u2609",Moon:"\u263D",Mercury:"\u263F",Venus:"\u2640",Earth:"\u2641",Mars:"\u2642",Jupiter:"\u2643",Saturn:"\u2644",Uranus:"\u2645",Neptune:"\u2646",Pluto:"\u2647",Rahu:"\u260A",Ketu:"\u260B",Ascendant:"Asc",Lagna:"La",NorthNode:"\u260A",SouthNode:"\u260B","North node":"\u260A","South node":"\u260B",Chiron:"\u26B7",Lilith:"\u26B8","Black moon lilith":"\u26B8"},K={Sun:"Su",Moon:"Mo",Mercury:"Me",Venus:"Ve",Mars:"Ma",Jupiter:"Ju",Saturn:"Sa",Uranus:"Ur",Neptune:"Ne",Pluto:"Pl",Rahu:"Ra",Ketu:"Ke",Ascendant:"Asc",Lagna:"La"};var R={Aries:"Ar",Taurus:"Ta",Gemini:"Ge",Cancer:"Cn",Leo:"Le",Virgo:"Vi",Libra:"Li",Scorpio:"Sc",Sagittarius:"Sg",Capricorn:"Cp",Aquarius:"Aq",Pisces:"Pi"},g=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],Pt=g.map(e=>e.toLowerCase());import{css as Q}from"lit";var O=Q`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){:host{animation:none}}.roxy-skeleton{background:linear-gradient(90deg, var(--roxy-border,#e4e4e7) 0%, color-mix(in srgb, var(--roxy-border,#e4e4e7) 60%, transparent) 50%, var(--roxy-border,#e4e4e7) 100%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.roxy-skeleton{animation:none}}.roxy-empty{padding:var(--roxy-space-lg,1.5rem);color:var(--roxy-muted,#71717a);text-align:center;font-size:var(--roxy-text-sm,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;import{nothing as y,svg as u}from"lit";function tt(e){let t=e%360;return t<0?t+360:t}function k(e){let t=tt(e),r=Math.floor(t/30)%12,n=t%30,o=Math.floor(n),a=(n-o)*60,i=Math.floor(a),m=Math.round((a-i)*60);return{sign:g[r]??"Aries",signIndex:r,degree:o,minute:i,second:m}}function C(e){return e?e.charAt(0).toUpperCase()+e.slice(1).toLowerCase():""}import{css as et,html as z,nothing as rt}from"lit";var H=et`.roxy-tablist{border-bottom:2px solid var(--roxy-border,#e4e4e7);gap:2px;display:flex}.roxy-tab{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);cursor:pointer;color:var(--roxy-muted,#71717a);transition:color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,ease);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-family:inherit}.roxy-tab[aria-selected=true]{color:var(--roxy-accent-fg,#b45309);border-bottom-color:var(--roxy-accent,#f59e0b);font-weight:var(--roxy-weight-bold,600)}.roxy-tab:hover:not([aria-selected=true]){color:var(--roxy-fg,#0a0a0a)}.roxy-tab:focus-visible{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-radius:4px}`;function V(e){let{items:t,active:r,onSelect:n,label:o,idPrefix:a,controls:i=!1}=e;return z`<div class="roxy-tablist" role="tablist" aria-label="${o}" @keydown="${l=>{if(l.key!=="ArrowRight"&&l.key!=="ArrowLeft")return;l.preventDefault();let $=t.findIndex(N=>N.id===r);if($===-1)return;let E=l.key==="ArrowRight"?1:-1,v=t[($+E+t.length)%t.length];if(!v)return;n(v.id);let P=l.currentTarget.getRootNode();requestAnimationFrame(()=>{P.querySelector(`#${a}-tab-${v.id}`)?.focus()})}}">${t.map(l=>z`<button type="button" class="roxy-tab" role="tab" id="${a}-tab-${l.id}" aria-selected="${r===l.id?"true":"false"}" aria-controls="${i&&r===l.id?`${a}-panel-${l.id}`:rt}" tabindex="${r===l.id?"0":"-1"}" @click="${()=>n(l.id)}">${l.label}</button>`)}</div>`}var p=400,c=20,x=p-2*c,d=p/2,nt=Object.fromEntries(g.map(e=>[e.toLowerCase(),e])),ot=[{id:"north",label:"North"},{id:"south",label:"South"},{id:"east",label:"East"}],at="\u02B3";function D(e,t){return typeof e.longitude!="number"||!Number.isFinite(e.longitude)?!1:k(e.longitude).sign.toLowerCase()!==t.toLowerCase()}function it(e,t){let r=K[C(e.graha)]??e.graha.slice(0,2),n=e.isRetrograde?at:"";if(typeof e.longitude!="number"||!Number.isFinite(e.longitude)||D(e,t))return`${r}${n}`;let{degree:o}=k(e.longitude);return`${r} ${o}\xB0${n}`}function st(e,t){let r=[C(e.graha)],n=D(e,t);if(n&&r.push(`in ${t}`),typeof e.longitude=="number"&&Number.isFinite(e.longitude)){let o=k(e.longitude),a=String(o.minute).padStart(2,"0");r.push(n?`D1: ${o.degree}\xB0${a}' ${o.sign}`:`${o.degree}\xB0${a}' ${o.sign}`)}if(e.nakshatra?.name){let o=e.nakshatra.pada?` pada ${e.nakshatra.pada}`:"";r.push(`${e.nakshatra.name}${o}`)}return e.awastha&&r.push(e.awastha),e.isRetrograde&&r.push("retrograde"),r.join(" \xB7 ")}function A(e,t,r,n,o){let a=n-(e.length-1)*o/2;return e.map((i,m)=>{let l=a+m*o;return u`<text class="planet-text" x=${r} y=${l} text-anchor="middle" dominant-baseline="central">${it(i,t)}<title>${st(i,t)}</title></text>`})}function q(e,t){let r={};for(let o of g)r[o.toLowerCase()]=[];let n="";for(let[o,a]of Object.entries(e??{})){let i=(a?.rashi??"").toLowerCase();if(o==="Lagna"||a?.graha==="Lagna"){n=nt[i]??"";continue}!i||!(i in r)||r[i]?.push({graha:a.graha??o,longitude:a.longitude,nakshatra:a.nakshatra,isRetrograde:a.isRetrograde,awastha:a.awastha})}return{lagnaSign:n,placements:r,divisionLabel:t}}var f=x/4,lt={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 ct(e){let t=lt[e]??{col:0,row:0};return{x:c+t.col*f,y:c+t.row*f,w:f,h:f}}function dt(e){let t=c,r=c+f,n=c+2*f,o=c+3*f,a=p-c;return u`
+		<rect class="line" x=${t} y=${t} width=${x} height=${x} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${t} y1=${r} x2=${a} y2=${r} stroke-width="1" />
+		<line class="line" x1=${t} y1=${o} x2=${a} y2=${o} stroke-width="1" />
+		<line class="line" x1=${r} y1=${t} x2=${r} y2=${a} stroke-width="1" />
+		<line class="line" x1=${o} y1=${t} x2=${o} y2=${a} stroke-width="1" />
+		<line class="line" x1=${t} y1=${n} x2=${r} y2=${n} stroke-width="1" />
+		<line class="line" x1=${o} y1=${n} x2=${a} y2=${n} stroke-width="1" />
+		<line class="line" x1=${n} y1=${t} x2=${n} y2=${r} stroke-width="1" />
+		<line class="line" x1=${n} y1=${o} x2=${n} y2=${a} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:y}
+	`}function B(e,t){let r=g.findIndex(o=>o===t),n=g.findIndex(o=>o===e);return r===-1||n===-1?0:(n-r+12)%12+1}function ut(e,t,r,n){let o=ct(e),a=o.x+o.w/2,i=o.y+o.h/2,m=R[e]??e.slice(0,2),l=14;return u`
+		<g class=${r?"cell lagna":"cell"}>
+			${r?u`
+						<rect class="lagna-bg" x=${o.x} y=${o.y} width=${o.w} height=${o.h} />
+						<line class="lagna-slash" x1=${o.x+o.w-l} y1=${o.y+l} x2=${o.x+l} y2=${o.y+o.h-l} stroke-width="1.2" />
+					`:y}
+			<text class="sign-text" x=${o.x+6} y=${o.y+12} text-anchor="start" dominant-baseline="central">${m}</text>
+			${n>0?u`<text class="house-num" x=${o.x+o.w-6} y=${o.y+12} text-anchor="end" dominant-baseline="central">${n}</text>`:y}
+			${r?u`<text class="lagna-marker" x=${a} y=${o.y+26} text-anchor="middle" dominant-baseline="central">Asc</text>`:y}
+			${t.length?A(t,e,a,i+4,14):y}
 		</g>
-	`;
-}
-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`
-		<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 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 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}
+	`}function xt(e){let t=e.lagnaSign.toLowerCase();return u`
+		${dt(e.divisionLabel)}
+		${g.map(r=>ut(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,B(r,e.lagnaSign)))}
+	`}var s={tl:{x:c,y:c},tr:{x:p-c,y:c},br:{x:p-c,y:p-c},bl:{x:c,y:p-c},top:{x:d,y:c},right:{x:p-c,y:d},bottom:{x:d,y:p-c},left:{x:c,y:d},tlMid:{x:d-x/4,y:d-x/4},trMid:{x:d+x/4,y:d-x/4},brMid:{x:d+x/4,y:d+x/4},blMid:{x:d-x/4,y:d+x/4}};function h(e){let t=e.reduce((n,o)=>n+o.x,0)/e.length,r=e.reduce((n,o)=>n+o.y,0)/e.length;return{x:t,y:r}}var mt={1:{x:d,y:s.tlMid.y},2:h([s.tl,s.top,s.tlMid]),3:h([s.tl,s.left,s.tlMid]),4:{x:s.tlMid.x,y:d},5:h([s.bl,s.left,s.blMid]),6:h([s.bl,s.bottom,s.blMid]),7:{x:d,y:s.blMid.y},8:h([s.br,s.bottom,s.brMid]),9:h([s.br,s.right,s.brMid]),10:{x:s.brMid.x,y:d},11:h([s.tr,s.right,s.trMid]),12:h([s.tr,s.top,s.trMid])};function yt(e,t){let r=g.findIndex(n=>n===t);return r===-1?e:(r+e-1)%12+1}function gt(e){let{tl:t,tr:r,br:n,bl:o,top:a,right:i,bottom:m,left:l}=s;return u`
+		<rect class="line" x=${t.x} y=${t.y} width=${x} height=${x} stroke-width="1.5" fill="none" />
+		<polygon class="line" points="${a.x},${a.y} ${i.x},${i.y} ${m.x},${m.y} ${l.x},${l.y}" stroke-width="1" fill="none" />
+		<line class="line" x1=${t.x} y1=${t.y} x2=${n.x} y2=${n.y} stroke-width="1" />
+		<line class="line" x1=${r.x} y1=${r.y} x2=${o.x} y2=${o.y} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:y}
+	`}function pt(e,t,r,n,o){let a=mt[e];if(!a)return u``;let i=Math.min(14,Math.abs(a.y-d)*.45+6),m=i+12,l=o?`${t} \xB7 ${R[r]??r.slice(0,2)}`:`${t}`;return u`
+		<g class=${o?"cell lagna":"cell"}>
+			<text class="rashi-num" x=${a.x} y=${a.y-i} text-anchor="middle" dominant-baseline="central">${l}</text>
+			${o?u`<text class="lagna-marker" x=${a.x} y=${a.y-m} text-anchor="middle" dominant-baseline="central">Asc</text>`:y}
+			${n.length?A(n,r,a.x,a.y+8,12):y}
 		</g>
-	`;
-}
-function renderNorthSvg(vm) {
-  const lagnaSign = vm.lagnaSign || "Aries";
-  return svg`
-		${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
-    );
-  })}
-	`;
-}
-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=${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 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 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}
+	`}function ht(e){let t=e.lagnaSign||"Aries";return u`
+		${gt(e.divisionLabel)}
+		${Array.from({length:12},(r,n)=>{let o=n+1,a=yt(o,t),i=g[a-1]??"Aries";return pt(o,a,i,e.placements[i.toLowerCase()]??[],o===1)})}
+	`}var T=x/3;function ft(){let e=c,t=c+T,r=c+2*T,n=p-c,J={Aries:[{x:t,y:e},{x:r,y:e},{x:r,y:t},{x:t,y:t}],Taurus:[{x:e,y:e},{x:t,y:e},{x:t,y:t}],Gemini:[{x:e,y:e},{x:t,y:t},{x:e,y:t}],Cancer:[{x:e,y:t},{x:t,y:t},{x:t,y:r},{x:e,y:r}],Leo:[{x:e,y:r},{x:t,y:r},{x:e,y:n}],Virgo:[{x:t,y:r},{x:t,y:n},{x:e,y:n}],Libra:[{x:t,y:r},{x:r,y:r},{x:r,y:n},{x:t,y:n}],Scorpio:[{x:r,y:r},{x:r,y:n},{x:n,y:n}],Sagittarius:[{x:r,y:r},{x:n,y:n},{x:n,y:r}],Capricorn:[{x:r,y:t},{x:n,y:t},{x:n,y:r},{x:r,y:r}],Aquarius:[{x:n,y:e},{x:n,y:t},{x:r,y:t}],Pisces:[{x:r,y:e},{x:n,y:e},{x:r,y:t}]},I={};for(let[W,_]of Object.entries(J))I[W]={points:[..._],centroid:h(_)};return I}var bt=ft();function $t(e){let t=c,r=c+T,n=c+2*T,o=p-c;return u`
+		<rect class="line" x=${t} y=${t} width=${x} height=${x} stroke-width="1.5" fill="none" />
+		<line class="line" x1=${t} y1=${r} x2=${r} y2=${r} stroke-width="1" />
+		<line class="line" x1=${n} y1=${r} x2=${o} y2=${r} stroke-width="1" />
+		<line class="line" x1=${t} y1=${n} x2=${r} y2=${n} stroke-width="1" />
+		<line class="line" x1=${n} y1=${n} x2=${o} y2=${n} stroke-width="1" />
+		<line class="line" x1=${r} y1=${t} x2=${r} y2=${r} stroke-width="1" />
+		<line class="line" x1=${r} y1=${n} x2=${r} y2=${o} stroke-width="1" />
+		<line class="line" x1=${n} y1=${t} x2=${n} y2=${r} stroke-width="1" />
+		<line class="line" x1=${n} y1=${n} x2=${n} y2=${o} stroke-width="1" />
+		<line class="line" x1=${t} y1=${t} x2=${r} y2=${r} stroke-width="1" />
+		<line class="line" x1=${o} y1=${t} x2=${n} y2=${r} stroke-width="1" />
+		<line class="line" x1=${o} y1=${o} x2=${n} y2=${n} stroke-width="1" />
+		<line class="line" x1=${t} y1=${o} x2=${r} y2=${n} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:y}
+	`}function wt(e,t,r,n){let o=bt[e];if(!o)return u``;let{centroid:a,points:i}=o,m=R[e]??e.slice(0,2),l=i.map($=>`${$.x},${$.y}`).join(" ");return u`
+		<g class=${r?"cell lagna":"cell"}>
+			${r?u`<polygon class="lagna-bg" points=${l} />`:y}
+			<text class="sign-text" x=${a.x} y=${a.y-16} text-anchor="middle" dominant-baseline="central">${m}</text>
+			${n>0?u`<text class="house-num" x=${a.x+18} y=${a.y-16} text-anchor="start" dominant-baseline="central">${n}</text>`:y}
+			${r?u`<text class="lagna-marker" x=${a.x} y=${a.y-30} text-anchor="middle" dominant-baseline="central">Asc</text>`:y}
+			${t.length?A(t,e,a.x,a.y+4,12):y}
 		</g>
-	`;
-}
-function renderEastSvg(vm) {
-  const lagnaKey = vm.lagnaSign.toLowerCase();
-  return svg`
-		${renderEastFrame(vm.divisionLabel)}
-		${SIGNS_ORDER.map(
-    (sign) => renderEastCell(
-      sign,
-      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/utils/markup-data.ts
-var ROXY_DATA_CLASS = "roxy-data";
-function isJsonScript(el) {
-  return el.nodeName === "SCRIPT" && el.getAttribute("type") === "application/json";
-}
-var MarkupDataController = class {
-  constructor(host) {
-    this.host = host;
-    host.addController(this);
-  }
-  hostConnected() {
-    if (this.host.data != null) return;
-    const parsed = this.read();
-    if (parsed === void 0) return;
-    this.host.data = parsed;
-    this.host.requestUpdate();
-  }
-  /**
-   * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.
-   */
-  read() {
-    const inline = this.findInlineScript();
-    return inline ? this.parse(inline.textContent) : void 0;
-  }
-  /**
-   * Direct-child `<script type="application/json" class="roxy-data">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.
-   */
-  findInlineScript() {
-    for (const child of Array.from(this.host.children)) {
-      if (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {
-        return child;
-      }
-    }
-    return null;
-  }
-  parse(text) {
-    if (!text?.trim()) return void 0;
-    try {
-      return JSON.parse(text);
-    } catch {
-      return void 0;
-    }
-  }
-};
-
-// packages/ui/src/components/divisional-chart.ts
-var RoxyDivisionalChart = class extends LitElement {
-  constructor() {
-    super();
-    this.data = null;
-    this.chartStyle = "north";
-    this.setStyle = (next) => {
-      this.chartStyle = next;
-    };
-    new MarkupDataController(this);
-  }
-  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() {
-    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;
-    return html2`<div class="wrap">
-			<div class="header">
-				<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 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>
-				${renderKundliSvg(vm, this.chartStyle)}
-			</svg>
-
-			${vargottama && vargottama.length > 0 ? html2`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
-						<span class="vargottama-label">Vargottama:</span>
-						${vargottama.map(
-      (planet) => html2`<span class="vargottama-pill" role="listitem">
-									${PLANET_GLYPH[planet] ?? ""} ${planet}
-								</span>`
-    )}
-					</div>` : nothing2}
-		</div>`;
-  }
-};
-RoxyDivisionalChart.styles = [
-  baseStyles,
-  kundliStyles,
-  css3`
-			.division-meta {
-				font-size: var(--roxy-text-sm, 0.875rem);
-				color: var(--roxy-muted, #71717a);
-				margin: 0;
-			}
-			.significance {
-				font-size: var(--roxy-text-sm, 0.875rem);
-				color: var(--roxy-muted, #71717a);
-				border-left: 2px solid var(--roxy-border, #e4e4e7);
-				padding-left: var(--roxy-space-sm, 0.5rem);
-				margin: 0;
-			}
-			.vargottama-row {
-				display: flex;
-				flex-wrap: wrap;
-				gap: var(--roxy-space-xs, 0.25rem);
-				align-items: center;
-			}
-			.vargottama-label {
-				font-size: var(--roxy-text-sm, 0.875rem);
-				color: var(--roxy-muted, #71717a);
-				font-weight: 500;
-				margin-right: var(--roxy-space-xs, 0.25rem);
-			}
-			.vargottama-pill {
-				display: inline-flex;
-				align-items: center;
-				gap: 0.2em;
-				font-size: var(--roxy-text-sm, 0.875rem);
-				font-weight: 600;
-				padding: 0.15em 0.6em;
-				border-radius: 999px;
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 22%, transparent);
-				color: var(--roxy-fg, #0a0a0a);
-				border: 1px solid color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
-			}
-		`
-];
-__decorateClass([
-  property({ attribute: false })
-], RoxyDivisionalChart.prototype, "data", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "chart-style" })
-], RoxyDivisionalChart.prototype, "chartStyle", 2);
-RoxyDivisionalChart = __decorateClass([
-  customElement("roxy-divisional-chart")
-], RoxyDivisionalChart);
-export {
-  RoxyDivisionalChart
-};
+	`}function vt(e){let t=e.lagnaSign.toLowerCase();return u`
+		${$t(e.divisionLabel)}
+		${g.map(r=>wt(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,B(r,e.lagnaSign)))}
+	`}function Y(e,t){switch(t){case"north":return ht(e);case"east":return vt(e);default:return xt(e)}}function j(e,t){return V({items:ot,active:e,onSelect:t,label:"Kundli style",idPrefix:"kundli"})}import{css as St}from"lit";var F=St`.wrap{gap:var(--roxy-space-md,1rem);display:grid}.header{justify-content:space-between;align-items:center;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}svg{aspect-ratio:1;width:100%;max-width:560px;height:auto;margin:0 auto;display:block}.line{fill:#0000;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:.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:.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:.02em}.lagna-marker{fill:var(--roxy-accent-fg,#b45309);font-size:10px;font-weight:700;font-family:var(--roxy-font-sans);letter-spacing:.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:.7}`;var Rt="roxy-data";function kt(e){return e.nodeName==="SCRIPT"&&e.getAttribute("type")==="application/json"}var M=class{constructor(t){this.host=t,t.addController(this)}hostConnected(){if(this.host.data!=null)return;let t=this.read();t!==void 0&&(this.host.data=t,this.host.requestUpdate())}read(){let t=this.findInlineScript();return t?this.parse(t.textContent):void 0}findInlineScript(){for(let t of Array.from(this.host.children))if(kt(t)&&t.classList.contains(Rt))return t;return null}parse(t){if(t?.trim())try{return JSON.parse(t)}catch{return}}};var b=class extends Mt{constructor(){super();this.data=null;this.chartStyle="north";this.setStyle=r=>{this.chartStyle=r};new M(this)}viewModel(){if(!this.data?.chart?.meta)return null;let{division:r}=this.data,n=`D${r.number} ${r.name}`;return q(this.data.chart.meta,n)}render(){let r=this.viewModel();if(!this.data||!r)return w`<div class="roxy-empty" role="status">No divisional chart data</div>`;let{division:n,vargottama:o}=this.data;return w`<div class="wrap"><div class="header"><div><h2 class="title">D${n.number} ${n.name} ${n.sanskritName&&n.sanskritName!==n.name?w`<span class="division-meta">· ${n.sanskritName}</span>`:L}</h2>${n.significance?w`<p class="significance">${n.significance}</p>`:L}</div>${j(this.chartStyle,this.setStyle)}</div><svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" role="img" aria-label="D${n.number} ${n.name} divisional chart with twelve sign houses"><title>D${n.number} ${n.name}</title>${Y(r,this.chartStyle)}</svg> ${o&&o.length>0?w`<div class="vargottama-row" role="list" aria-label="Vargottama planets"><span class="vargottama-label">Vargottama:</span> ${o.map(a=>w`<span class="vargottama-pill" role="listitem">${G[a]??""} ${a}</span>`)}</div>`:L}</div>`}};b.styles=[O,F,H,Tt`.division-meta{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);margin:0}.significance{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);border-left:2px solid var(--roxy-border,#e4e4e7);padding-left:var(--roxy-space-sm,.5rem);margin:0}.vargottama-row{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.vargottama-label{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);margin-right:var(--roxy-space-xs,.25rem);font-weight:500}.vargottama-pill{font-size:var(--roxy-text-sm,.875rem);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 22%, transparent);color:var(--roxy-fg,#0a0a0a);border:1px solid color-mix(in srgb, var(--roxy-accent,#f59e0b) 45%, transparent);border-radius:999px;align-items:center;gap:.2em;padding:.15em .6em;font-weight:600;display:inline-flex}`],S([U({attribute:!1})],b.prototype,"data",2),S([U({type:String,reflect:!0,attribute:"chart-style"})],b.prototype,"chartStyle",2),b=S([Ct("roxy-divisional-chart")],b);export{b as RoxyDivisionalChart};
 //# sourceMappingURL=divisional-chart.js.map