@roxyapi/ui 0.5.0 → 0.6.1

package/dist/components/vedic-kundli.js

@@ -1,849 +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/vedic-kundli.ts
-import { html as html2, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-// 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/tokens/index.ts
-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/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 J=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var S=(e,t,r,o)=>{for(var n=o>1?void 0:o?W(t,r):t,i=e.length-1,a;i>=0;i--)(a=e[i])&&(n=(o?a(t,r,n):a(n))||n);return o&&n&&J(t,r,n),n};import{html as Y,LitElement as Rt}from"lit";import{customElement as kt,property as j}from"lit/decorators.js";import{css as X}from"lit";var I=X`: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 m,svg as u}from"lit";var _={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 v={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"],Et=g.map(e=>e.toLowerCase());function Z(e){let t=e%360;return t<0?t+360:t}function R(e){let t=Z(e),r=Math.floor(t/30)%12,o=t%30,n=Math.floor(o),i=(o-n)*60,a=Math.floor(i),y=Math.round((i-a)*60);return{sign:g[r]??"Aries",signIndex:r,degree:n,minute:a,second:y}}function C(e){return e?e.charAt(0).toUpperCase()+e.slice(1).toLowerCase():""}import{css as Q,html as G,nothing as tt}from"lit";var O=Q`.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 H(e){let{items:t,active:r,onSelect:o,label:n,idPrefix:i,controls:a=!1}=e;return G`<div class="roxy-tablist" role="tablist" aria-label="${n}" @keydown="${l=>{if(l.key!=="ArrowRight"&&l.key!=="ArrowLeft")return;l.preventDefault();let $=t.findIndex(E=>E.id===r);if($===-1)return;let A=l.key==="ArrowRight"?1:-1,w=t[($+A+t.length)%t.length];if(!w)return;o(w.id);let L=l.currentTarget.getRootNode();requestAnimationFrame(()=>{L.querySelector(`#${i}-tab-${w.id}`)?.focus()})}}">${t.map(l=>G`<button type="button" class="roxy-tab" role="tab" id="${i}-tab-${l.id}" aria-selected="${r===l.id?"true":"false"}" aria-controls="${a&&r===l.id?`${i}-panel-${l.id}`:tt}" tabindex="${r===l.id?"0":"-1"}" @click="${()=>o(l.id)}">${l.label}</button>`)}</div>`}var h=400,c=20,x=h-2*c,d=h/2,et=Object.fromEntries(g.map(e=>[e.toLowerCase(),e])),rt=[{id:"north",label:"North"},{id:"south",label:"South"},{id:"east",label:"East"}],nt="\u02B3";function K(e,t){return typeof e.longitude!="number"||!Number.isFinite(e.longitude)?!1:R(e.longitude).sign.toLowerCase()!==t.toLowerCase()}function ot(e,t){let r=_[C(e.graha)]??e.graha.slice(0,2),o=e.isRetrograde?nt:"";if(typeof e.longitude!="number"||!Number.isFinite(e.longitude)||K(e,t))return`${r}${o}`;let{degree:n}=R(e.longitude);return`${r} ${n}\xB0${o}`}function it(e,t){let r=[C(e.graha)],o=K(e,t);if(o&&r.push(`in ${t}`),typeof e.longitude=="number"&&Number.isFinite(e.longitude)){let n=R(e.longitude),i=String(n.minute).padStart(2,"0");r.push(o?`D1: ${n.degree}\xB0${i}' ${n.sign}`:`${n.degree}\xB0${i}' ${n.sign}`)}if(e.nakshatra?.name){let n=e.nakshatra.pada?` pada ${e.nakshatra.pada}`:"";r.push(`${e.nakshatra.name}${n}`)}return e.awastha&&r.push(e.awastha),e.isRetrograde&&r.push("retrograde"),r.join(" \xB7 ")}function M(e,t,r,o,n){let i=o-(e.length-1)*n/2;return e.map((a,y)=>{let l=i+y*n;return u`<text class="planet-text" x=${r} y=${l} text-anchor="middle" dominant-baseline="central">${ot(a,t)}<title>${it(a,t)}</title></text>`})}function z(e,t){let r={};for(let n of g)r[n.toLowerCase()]=[];let o="";for(let[n,i]of Object.entries(e??{})){let a=(i?.rashi??"").toLowerCase();if(n==="Lagna"||i?.graha==="Lagna"){o=et[a]??"";continue}!a||!(a in r)||r[a]?.push({graha:i.graha??n,longitude:i.longitude,nakshatra:i.nakshatra,isRetrograde:i.isRetrograde,awastha:i.awastha})}return{lagnaSign:o,placements:r,divisionLabel:t}}var f=x/4,at={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 st(e){let t=at[e]??{col:0,row:0};return{x:c+t.col*f,y:c+t.row*f,w:f,h:f}}function lt(e){let t=c,r=c+f,o=c+2*f,n=c+3*f,i=h-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=${i} y2=${r} stroke-width="1" />
+		<line class="line" x1=${t} y1=${n} x2=${i} y2=${n} stroke-width="1" />
+		<line class="line" x1=${r} y1=${t} x2=${r} y2=${i} stroke-width="1" />
+		<line class="line" x1=${n} y1=${t} x2=${n} y2=${i} stroke-width="1" />
+		<line class="line" x1=${t} y1=${o} x2=${r} y2=${o} stroke-width="1" />
+		<line class="line" x1=${n} y1=${o} x2=${i} y2=${o} stroke-width="1" />
+		<line class="line" x1=${o} y1=${t} x2=${o} y2=${r} stroke-width="1" />
+		<line class="line" x1=${o} y1=${n} x2=${o} y2=${i} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:m}
+	`}function V(e,t){let r=g.findIndex(n=>n===t),o=g.findIndex(n=>n===e);return r===-1||o===-1?0:(o-r+12)%12+1}function ct(e,t,r,o){let n=st(e),i=n.x+n.w/2,a=n.y+n.h/2,y=v[e]??e.slice(0,2),l=14;return u`
+		<g class=${r?"cell lagna":"cell"}>
+			${r?u`
+						<rect class="lagna-bg" x=${n.x} y=${n.y} width=${n.w} height=${n.h} />
+						<line class="lagna-slash" x1=${n.x+n.w-l} y1=${n.y+l} x2=${n.x+l} y2=${n.y+n.h-l} stroke-width="1.2" />
+					`:m}
+			<text class="sign-text" x=${n.x+6} y=${n.y+12} text-anchor="start" dominant-baseline="central">${y}</text>
+			${o>0?u`<text class="house-num" x=${n.x+n.w-6} y=${n.y+12} text-anchor="end" dominant-baseline="central">${o}</text>`:m}
+			${r?u`<text class="lagna-marker" x=${i} y=${n.y+26} text-anchor="middle" dominant-baseline="central">Asc</text>`:m}
+			${t.length?M(t,e,i,a+4,14):m}
 		</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 dt(e){let t=e.lagnaSign.toLowerCase();return u`
+		${lt(e.divisionLabel)}
+		${g.map(r=>ct(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,V(r,e.lagnaSign)))}
+	`}var s={tl:{x:c,y:c},tr:{x:h-c,y:c},br:{x:h-c,y:h-c},bl:{x:c,y:h-c},top:{x:d,y:c},right:{x:h-c,y:d},bottom:{x:d,y:h-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 p(e){let t=e.reduce((o,n)=>o+n.x,0)/e.length,r=e.reduce((o,n)=>o+n.y,0)/e.length;return{x:t,y:r}}var ut={1:{x:d,y:s.tlMid.y},2:p([s.tl,s.top,s.tlMid]),3:p([s.tl,s.left,s.tlMid]),4:{x:s.tlMid.x,y:d},5:p([s.bl,s.left,s.blMid]),6:p([s.bl,s.bottom,s.blMid]),7:{x:d,y:s.blMid.y},8:p([s.br,s.bottom,s.brMid]),9:p([s.br,s.right,s.brMid]),10:{x:s.brMid.x,y:d},11:p([s.tr,s.right,s.trMid]),12:p([s.tr,s.top,s.trMid])};function xt(e,t){let r=g.findIndex(o=>o===t);return r===-1?e:(r+e-1)%12+1}function yt(e){let{tl:t,tr:r,br:o,bl:n,top:i,right:a,bottom:y,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="${i.x},${i.y} ${a.x},${a.y} ${y.x},${y.y} ${l.x},${l.y}" stroke-width="1" fill="none" />
+		<line class="line" x1=${t.x} y1=${t.y} x2=${o.x} y2=${o.y} stroke-width="1" />
+		<line class="line" x1=${r.x} y1=${r.y} x2=${n.x} y2=${n.y} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:m}
+	`}function mt(e,t,r,o,n){let i=ut[e];if(!i)return u``;let a=Math.min(14,Math.abs(i.y-d)*.45+6),y=a+12,l=n?`${t} \xB7 ${v[r]??r.slice(0,2)}`:`${t}`;return u`
+		<g class=${n?"cell lagna":"cell"}>
+			<text class="rashi-num" x=${i.x} y=${i.y-a} text-anchor="middle" dominant-baseline="central">${l}</text>
+			${n?u`<text class="lagna-marker" x=${i.x} y=${i.y-y} text-anchor="middle" dominant-baseline="central">Asc</text>`:m}
+			${o.length?M(o,r,i.x,i.y+8,12):m}
 		</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 gt(e){let t=e.lagnaSign||"Aries";return u`
+		${yt(e.divisionLabel)}
+		${Array.from({length:12},(r,o)=>{let n=o+1,i=xt(n,t),a=g[i-1]??"Aries";return mt(n,i,a,e.placements[a.toLowerCase()]??[],n===1)})}
+	`}var k=x/3;function ht(){let e=c,t=c+k,r=c+2*k,o=h-c,F={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:o}],Virgo:[{x:t,y:r},{x:t,y:o},{x:e,y:o}],Libra:[{x:t,y:r},{x:r,y:r},{x:r,y:o},{x:t,y:o}],Scorpio:[{x:r,y:r},{x:r,y:o},{x:o,y:o}],Sagittarius:[{x:r,y:r},{x:o,y:o},{x:o,y:r}],Capricorn:[{x:r,y:t},{x:o,y:t},{x:o,y:r},{x:r,y:r}],Aquarius:[{x:o,y:e},{x:o,y:t},{x:r,y:t}],Pisces:[{x:r,y:e},{x:o,y:e},{x:r,y:t}]},P={};for(let[U,N]of Object.entries(F))P[U]={points:[...N],centroid:p(N)};return P}var pt=ht();function ft(e){let t=c,r=c+k,o=c+2*k,n=h-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=${o} y1=${r} x2=${n} y2=${r} stroke-width="1" />
+		<line class="line" x1=${t} y1=${o} x2=${r} y2=${o} stroke-width="1" />
+		<line class="line" x1=${o} y1=${o} x2=${n} y2=${o} stroke-width="1" />
+		<line class="line" x1=${r} y1=${t} x2=${r} y2=${r} stroke-width="1" />
+		<line class="line" x1=${r} y1=${o} x2=${r} y2=${n} stroke-width="1" />
+		<line class="line" x1=${o} y1=${t} x2=${o} y2=${r} stroke-width="1" />
+		<line class="line" x1=${o} y1=${o} x2=${o} y2=${n} stroke-width="1" />
+		<line class="line" x1=${t} y1=${t} x2=${r} y2=${r} stroke-width="1" />
+		<line class="line" x1=${n} y1=${t} x2=${o} y2=${r} stroke-width="1" />
+		<line class="line" x1=${n} y1=${n} x2=${o} y2=${o} stroke-width="1" />
+		<line class="line" x1=${t} y1=${n} x2=${r} y2=${o} stroke-width="1" />
+		${e?u`<text class="centre-label" x=${d} y=${d} text-anchor="middle" dominant-baseline="central">${e}</text>`:m}
+	`}function bt(e,t,r,o){let n=pt[e];if(!n)return u``;let{centroid:i,points:a}=n,y=v[e]??e.slice(0,2),l=a.map($=>`${$.x},${$.y}`).join(" ");return u`
+		<g class=${r?"cell lagna":"cell"}>
+			${r?u`<polygon class="lagna-bg" points=${l} />`:m}
+			<text class="sign-text" x=${i.x} y=${i.y-16} text-anchor="middle" dominant-baseline="central">${y}</text>
+			${o>0?u`<text class="house-num" x=${i.x+18} y=${i.y-16} text-anchor="start" dominant-baseline="central">${o}</text>`:m}
+			${r?u`<text class="lagna-marker" x=${i.x} y=${i.y-30} text-anchor="middle" dominant-baseline="central">Asc</text>`:m}
+			${t.length?M(t,e,i.x,i.y+4,12):m}
 		</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/vedic-kundli.ts
-var RoxyVedicKundli = class extends LitElement {
-  constructor() {
-    super();
-    this.data = null;
-    this.chartStyle = "north";
-    this.setStyle = (next) => {
-      this.chartStyle = next;
-    };
-    new MarkupDataController(this);
-  }
-  viewModel() {
-    if (!this.data?.meta) return null;
-    return toKundliViewModel(this.data.meta, "D1 Rashi");
-  }
-  render() {
-    const vm = this.viewModel();
-    if (!vm)
-      return html2`<div class="roxy-empty" role="status">No kundli data</div>`;
-    return html2`<div class="wrap">
-			<div class="header">
-				<h2 class="title">Vedic kundli</h2>
-				${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
-			</div>
-			<svg
-				viewBox="0 0 400 400"
-				preserveAspectRatio="xMidYMid meet"
-				role="img"
-				aria-label="Vedic birth chart with twelve sign houses"
-			>
-				<title>Vedic kundli</title>
-				${renderKundliSvg(vm, this.chartStyle)}
-			</svg>
-		</div>`;
-  }
-};
-RoxyVedicKundli.styles = [baseStyles, kundliStyles];
-__decorateClass([
-  property({ attribute: false })
-], RoxyVedicKundli.prototype, "data", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "chart-style" })
-], RoxyVedicKundli.prototype, "chartStyle", 2);
-RoxyVedicKundli = __decorateClass([
-  customElement("roxy-vedic-kundli")
-], RoxyVedicKundli);
-export {
-  RoxyVedicKundli
-};
+	`}function $t(e){let t=e.lagnaSign.toLowerCase();return u`
+		${ft(e.divisionLabel)}
+		${g.map(r=>bt(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,V(r,e.lagnaSign)))}
+	`}function B(e,t){switch(t){case"north":return gt(e);case"east":return $t(e);default:return dt(e)}}function D(e,t){return H({items:rt,active:e,onSelect:t,label:"Kundli style",idPrefix:"kundli"})}import{css as wt}from"lit";var q=wt`.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 St="roxy-data";function vt(e){return e.nodeName==="SCRIPT"&&e.getAttribute("type")==="application/json"}var T=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(vt(t)&&t.classList.contains(St))return t;return null}parse(t){if(t?.trim())try{return JSON.parse(t)}catch{return}}};var b=class extends Rt{constructor(){super();this.data=null;this.chartStyle="north";this.setStyle=r=>{this.chartStyle=r};new T(this)}viewModel(){return this.data?.meta?z(this.data.meta,"D1 Rashi"):null}render(){let r=this.viewModel();return r?Y`<div class="wrap"><div class="header"><h2 class="title">Vedic kundli</h2>${D(this.chartStyle,this.setStyle)}</div><svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Vedic birth chart with twelve sign houses"><title>Vedic kundli</title>${B(r,this.chartStyle)}</svg></div>`:Y`<div class="roxy-empty" role="status">No kundli data</div>`}};b.styles=[I,q,O],S([j({attribute:!1})],b.prototype,"data",2),S([j({type:String,reflect:!0,attribute:"chart-style"})],b.prototype,"chartStyle",2),b=S([kt("roxy-vedic-kundli")],b);export{b as RoxyVedicKundli};
 //# sourceMappingURL=vedic-kundli.js.map