@roxyapi/ui 0.5.0 → 0.6.0

package/dist/components/natal-chart.js

@@ -1,1087 +1,2 @@
-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/natal-chart.ts
-import { css as css2, html, LitElement, nothing, svg } from "lit";
-import { customElement, property, state } 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 SIGN_GLYPH = {
-  Aries: "\u2648",
-  Taurus: "\u2649",
-  Gemini: "\u264A",
-  Cancer: "\u264B",
-  Leo: "\u264C",
-  Virgo: "\u264D",
-  Libra: "\u264E",
-  Scorpio: "\u264F",
-  Sagittarius: "\u2650",
-  Capricorn: "\u2651",
-  Aquarius: "\u2652",
-  Pisces: "\u2653"
-};
-var SIGNS_ORDER = [
-  "Aries",
-  "Taurus",
-  "Gemini",
-  "Cancer",
-  "Leo",
-  "Virgo",
-  "Libra",
-  "Scorpio",
-  "Sagittarius",
-  "Capricorn",
-  "Aquarius",
-  "Pisces"
-];
-var RASHI_KEYS = SIGNS_ORDER.map(
-  (s) => s.toLowerCase()
-);
-var ASPECT_SYMBOL = {
-  conjunction: "\u260C",
-  opposition: "\u260D",
-  trine: "\u25B3",
-  square: "\u25A1",
-  sextile: "\u2731",
-  quincunx: "\u22BB",
-  semisextile: "\u22BC"
-};
-
-// 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/degree.ts
-function normalizeLongitude(lon) {
-  const wrapped = lon % 360;
-  return wrapped < 0 ? wrapped + 360 : wrapped;
-}
-function longitudeToSignPosition(longitude) {
-  const lon = normalizeLongitude(longitude);
-  const signIndex = Math.floor(lon / 30) % 12;
-  const within = lon % 30;
-  const degree = Math.floor(within);
-  const minuteFloat = (within - degree) * 60;
-  const minute = Math.floor(minuteFloat);
-  const second = Math.round((minuteFloat - minute) * 60);
-  return {
-    sign: SIGNS_ORDER[signIndex] ?? "Aries",
-    signIndex,
-    degree,
-    minute,
-    second
-  };
-}
-function oppositePoint(longitude) {
-  return normalizeLongitude(longitude + 180);
-}
-function arcMidpoint(start, end) {
-  const s = normalizeLongitude(start);
-  let span = normalizeLongitude(end) - s;
-  if (span < 0) span += 360;
-  return normalizeLongitude(s + span / 2);
-}
-function polarToCartesian(cx, cy, radius, angleDeg) {
-  const angleRad = angleDeg * Math.PI / 180;
-  return {
-    x: cx + radius * Math.cos(angleRad),
-    y: cy + radius * Math.sin(angleRad)
-  };
-}
-
-// packages/ui/src/utils/format.ts
-function formatNumber(value, dp = 1) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return "";
-  return value.toFixed(dp).replace(/\.?0+$/, "");
-}
-var ASPECT_CLASS = {
-  conjunction: "aspect-conjunction",
-  sextile: "aspect-sextile",
-  square: "aspect-square",
-  trine: "aspect-trine",
-  opposition: "aspect-opposition"
-};
-function normalizeAspect(a) {
-  return (a.type ?? "").toLowerCase().replace(/_/g, "-");
-}
-
-// 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/utils/string.ts
-function capitalize(s) {
-  if (!s) return "";
-  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
-// packages/ui/src/components/natal-chart.ts
-var SIZE = 420;
-var CENTER = SIZE / 2;
-var OUTER_R = 164;
-var SIGN_R = 146;
-var HOUSE_R = 120;
-var PLANET_R = 96;
-var ANGLE_TICK_R = 178;
-var ANGLE_LABEL_R = 196;
-var RoxyNatalChart = class extends LitElement {
-  constructor() {
-    super();
-    this.data = null;
-    this.houseSystem = "placidus";
-    this.view = "wheel";
-    new MarkupDataController(this);
-  }
-  getPlanets() {
-    return this.data?.planets ?? [];
-  }
-  getAscendant() {
-    return this.data?.ascendant?.longitude ?? 0;
-  }
-  getMidheaven() {
-    const m = this.data?.midheaven?.longitude;
-    return typeof m === "number" ? m : null;
-  }
-  toAngle(lon) {
-    return 180 + this.getAscendant() - lon;
-  }
-  render() {
-    if (!this.data)
-      return html`<div class="roxy-empty" role="status">No chart data</div>`;
-    const planets = this.getPlanets();
-    const aspects = this.data.aspects ?? [];
-    const view = this.view;
-    return html`<div class="wrap">
-			<header>
-				<h2 class="title">Natal chart</h2>
-				${this.data.birthDetails ? html`<div class="meta">
-							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
-						</div>` : nothing}
-			</header>
-			<div
-				class="tablist"
-				role="tablist"
-				aria-label="Natal chart views"
-				@keydown=${this.onTabKeyDown}
-			>
-				${["wheel", "grid"].map(
-      (t) => html`<button
-						class="tab"
-						role="tab"
-						id="tab-${t}"
-						aria-selected=${view === t ? "true" : "false"}
-						aria-controls="panel-${t}"
-						tabindex=${view === t ? "0" : "-1"}
-						@click=${() => {
-        this.view = t;
-      }}
-					>
-						${t === "wheel" ? "Wheel" : "Aspect grid"}
-					</button>`
-    )}
-			</div>
-			<div id="panel-${view}" role="tabpanel" aria-labelledby="tab-${view}">
-				${view === "wheel" ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
-			</div>
-			<div class="legend">
-				<span>${planets.length} planets</span>
-				<span>${aspects.length} aspects</span>
-				${this.data.houseSystem ? html`<span>${this.data.houseSystem} houses</span>` : nothing}
-				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
-				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
-			</div>
-			${this.renderDetails()}
-			${this.renderInterpretations()}
-		</div>`;
-  }
-  onTabKeyDown(e) {
-    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
-    e.preventDefault();
-    this.view = this.view === "wheel" ? "grid" : "wheel";
-    const next = this.view;
-    requestAnimationFrame(() => {
-      this.shadowRoot?.querySelector(`#tab-${next}`)?.focus();
-    });
-  }
-  renderWheel(planets, aspects) {
-    return html`<svg
-			viewBox="0 0 ${SIZE} ${SIZE}"
-			role="img"
-			aria-label="Natal chart wheel with twelve houses, planets, and aspects"
-		>
-			<title>Natal chart wheel</title>
-			<desc>
-				Twelve zodiac sign segments around a circular wheel. Planet glyphs are
-				placed at their ecliptic longitudes. Aspect lines connect related planets.
-			</desc>
-			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${OUTER_R} stroke-width="1.5" />
-			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${SIGN_R - 14} stroke-width="0.8" />
-			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${HOUSE_R} stroke-width="1" />
-			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${PLANET_R - 16} stroke-width="0.5" />
-			${this.renderTicks()} ${this.renderSpokes()} ${this.renderSigns()}
-			${this.renderHouseNumbers()} ${this.renderCuspDegrees()}
-			${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
-			${this.renderAngles()}
-		</svg>`;
-  }
-  /**
-   * Planet-by-planet aspect grid: the lower-triangular matrix astrologers read
-   * alongside the wheel. Each filled cell shows the aspect glyph colored by
-   * nature, with the exact orb in the SVG-free `<title>` tooltip.
-   */
-  renderAspectGrid(planets, aspects) {
-    const names = planets.map((p) => capitalize(p.name));
-    const byPair = /* @__PURE__ */ new Map();
-    for (const a of aspects) {
-      const k = [capitalize(a.planet1), capitalize(a.planet2)].sort().join("|");
-      byPair.set(k, a);
-    }
-    if (names.length === 0)
-      return html`<p class="roxy-empty" role="status">No planets to grid</p>`;
-    return html`<div class="grid-scroll">
-			<table class="aspect-grid" aria-label="Planet by planet aspect grid">
-				<thead>
-					<tr>
-						<th></th>
-						${names.slice(0, -1).map((n) => {
-      const g = PLANET_GLYPH[n] ?? n.slice(0, 2);
-      return html`<th scope="col" title=${n}>${g}</th>`;
-    })}
-					</tr>
-				</thead>
-				<tbody>
-					${names.slice(1).map((rowName, ri) => {
-      const rowGlyph = PLANET_GLYPH[rowName] ?? rowName.slice(0, 2);
-      return html`<tr>
-							<th scope="row" title=${rowName}>${rowGlyph}</th>
-							${names.slice(0, ri + 1).map((colName) => {
-        const a = byPair.get([rowName, colName].sort().join("|"));
-        if (!a) return html`<td class="empty"></td>`;
-        const name = normalizeAspect(a);
-        const sym = ASPECT_SYMBOL[name] ?? ASPECT_SYMBOL[name.replace(/-/g, "")] ?? name.slice(0, 3);
-        const cls = ASPECT_CLASS[name] ?? "aspect-other";
-        const orb = formatNumber(a.orb, 1);
-        return html`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
-									<span class="asp">${sym}</span>
-								</td>`;
-      })}
-							${names.slice(ri + 1, -1).map(() => html`<td class="empty"></td>`)}
-						</tr>`;
-    })}
-				</tbody>
-			</table>
-		</div>`;
-  }
-  renderAngles() {
-    const asc = this.getAscendant();
-    const mc = this.getMidheaven();
-    const items = [
-      this.renderAngleMark(asc, "ASC"),
-      this.renderAngleMark(oppositePoint(asc), "DSC")
-    ];
-    if (mc !== null) {
-      items.push(this.renderAngleMark(mc, "MC"));
-      items.push(this.renderAngleMark(oppositePoint(mc), "IC"));
-    }
-    const pof = this.data?.partOfFortune?.longitude;
-    if (typeof pof === "number") {
-      items.push(this.renderAngleMark(normalizeLongitude(pof), "PoF"));
-    }
-    const vertex = this.data?.vertex?.longitude;
-    if (typeof vertex === "number") {
-      items.push(this.renderAngleMark(normalizeLongitude(vertex), "Vtx"));
-    }
-    return items;
-  }
-  renderAngleMark(longitude, label) {
-    const angle = this.toAngle(longitude);
-    const tickInner = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
-    const tickOuter = polarToCartesian(CENTER, CENTER, ANGLE_TICK_R, angle);
-    const labelPos = polarToCartesian(CENTER, CENTER, ANGLE_LABEL_R, angle);
-    return svg`
-			<g>
-				<line class="angle-tick" x1=${tickInner.x} y1=${tickInner.y} x2=${tickOuter.x} y2=${tickOuter.y} />
-				<text class="angle-marker" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">${label}</text>
-			</g>
-		`;
-  }
-  renderSpokes() {
-    const houses = this.data?.houses ?? [];
-    const cuspLongitudes = houses.length === 12 ? houses.map((h) => h.longitude) : Array.from({ length: 12 }, (_, i) => this.getAscendant() + i * 30);
-    return cuspLongitudes.map((lon) => {
-      const angle = this.toAngle(lon);
-      const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
-      const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
-      return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
-    });
-  }
-  renderSigns() {
-    return SIGNS_ORDER.map((sign, i) => {
-      const angle = this.toAngle(i * 30 + 15);
-      const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
-      return svg`<text class="sign-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[sign]}</text>`;
-    });
-  }
-  renderHouseNumbers() {
-    const houses = this.data?.houses ?? [];
-    if (houses.length === 12) {
-      return houses.map((house, i) => {
-        const next = houses[(i + 1) % 12];
-        const mid = arcMidpoint(
-          house.longitude,
-          next ? next.longitude : house.longitude + 30
-        );
-        const pos = polarToCartesian(
-          CENTER,
-          CENTER,
-          HOUSE_R - 12,
-          this.toAngle(mid)
-        );
-        return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${house.number}</text>`;
-      });
-    }
-    const ascSignIndex = Math.floor(this.getAscendant() / 30);
-    return Array.from({ length: 12 }, (_, i) => {
-      const angle = this.toAngle(i * 30 + 15);
-      const pos = polarToCartesian(CENTER, CENTER, HOUSE_R - 12, angle);
-      const houseNum = (i - ascSignIndex + 12) % 12 + 1;
-      return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
-    });
-  }
-  /**
-   * Degree ticks on the outer zodiac band: a short mark every 5 degrees and a
-   * longer one on each 30-degree sign cusp, so the wheel reads like a
-   * reference-grade chart rather than a bare ring of glyphs.
-   */
-  renderTicks() {
-    const ticks = [];
-    for (let deg = 0; deg < 360; deg += 5) {
-      const angle = this.toAngle(deg);
-      const isMajor = deg % 30 === 0;
-      const inner = isMajor ? SIGN_R - 14 : OUTER_R - 5;
-      const a = polarToCartesian(CENTER, CENTER, inner, angle);
-      const b = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
-      ticks.push(
-        svg`<line class=${isMajor ? "tick tick-major" : "tick"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} stroke-width=${isMajor ? 1 : 0.5} />`
-      );
-    }
-    return ticks;
-  }
-  /**
-   * Degree-and-minute label printed next to each house cusp on the wheel, so
-   * the exact cusp position is readable without leaving the chart.
-   */
-  renderCuspDegrees() {
-    const houses = this.data?.houses ?? [];
-    if (houses.length !== 12) return nothing;
-    return houses.map((house) => {
-      const angle = this.toAngle(house.longitude);
-      const pos = polarToCartesian(CENTER, CENTER, HOUSE_R + 9, angle);
-      const sp = longitudeToSignPosition(house.longitude);
-      return svg`<text class="cusp-deg" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${String(sp.minute).padStart(2, "0")}'</text>`;
-    });
-  }
-  renderPlanets(planets) {
-    const MIN_SEPARATION = 7;
-    const sorted = planets.filter((p) => Number.isFinite(p.longitude)).map((p) => ({
-      p,
-      trueLon: normalizeLongitude(p.longitude),
-      displayLon: normalizeLongitude(p.longitude)
-    })).sort((a, b) => a.trueLon - b.trueLon);
-    for (let i = 1; i < sorted.length; i++) {
-      const prev = sorted[i - 1];
-      const cur = sorted[i];
-      if (!prev || !cur) continue;
-      const wanted = prev.displayLon + MIN_SEPARATION;
-      if (cur.displayLon < wanted) cur.displayLon = wanted;
-    }
-    const last = sorted[sorted.length - 1];
-    if (last && last.displayLon > 360) {
-      const shift = last.displayLon - 360;
-      for (const s of sorted) s.displayLon -= shift;
-    }
-    return sorted.map(({ p, trueLon, displayLon }) => {
-      const trueAngle = this.toAngle(trueLon);
-      const displayAngle = this.toAngle(displayLon);
-      const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, displayAngle);
-      const degPos = polarToCartesian(
-        CENTER,
-        CENTER,
-        PLANET_R - 13,
-        displayAngle
-      );
-      const rimPos = polarToCartesian(CENTER, CENTER, OUTER_R - 4, trueAngle);
-      const leaderInner = polarToCartesian(
-        CENTER,
-        CENTER,
-        PLANET_R + 8,
-        displayAngle
-      );
-      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-      const sp = longitudeToSignPosition(p.longitude);
-      const retro = p.isRetrograde === true;
-      const degLabel = `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}'`;
-      const offset = Math.abs(displayLon - trueLon) > 0.5;
-      return svg`<g>
-				${offset ? svg`<line class="planet-leader" x1=${rimPos.x} y1=${rimPos.y} x2=${leaderInner.x} y2=${leaderInner.y} />` : nothing}
-				<text class="planet-glyph" x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${p.sign ?? ""}</title>${glyph}</text>
-				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? svg`<tspan class="retro"> ℞</tspan>` : nothing}</text>
-			</g>`;
-    });
-  }
-  renderDetails() {
-    const summary = this.data?.summary;
-    const ai = this.data?.aspectsInterpretation;
-    if (!summary && !ai) return nothing;
-    const retrogrades = summary?.retrogradePlanets ?? [];
-    return html`<div class="details">
-			${summary?.dominantElement || summary?.dominantModality ? html`<div class="pill-row">
-						${summary.dominantElement ? html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing}
-						${summary.dominantModality ? html`<span class="pill">Dominant modality: ${summary.dominantModality}</span>` : nothing}
-					</div>` : nothing}
-			${ai ? html`<div class="pill-row">
-						<span class="pill pill--success">Harmonious ${ai.harmonious}</span>
-						<span class="pill pill--danger">Challenging ${ai.challenging}</span>
-						<span class="pill pill--muted">Neutral ${ai.neutral}</span>
-					</div>` : nothing}
-			${retrogrades.length > 0 ? html`<div class="pill-row">
-						${retrogrades.map((p) => {
-      const glyph = PLANET_GLYPH[p] ?? p.slice(0, 2);
-      return html`<span class="pill pill--muted">${glyph} ${p} R</span>`;
-    })}
-					</div>` : nothing}
-			${ai?.summary ? html`<p class="summary">${ai.summary}</p>` : nothing}
-			${this.renderElementModalityGrid()}
-		</div>`;
-  }
-  /**
-   * Element by modality grid: the 4x3 cross-tab astrologers read for chart
-   * balance. Each planet is placed by its sign into one cell (Fire/Earth/Air/
-   * Water row, Cardinal/Fixed/Mutable column). Derived purely from the planet
-   * signs, with row, column, and grand totals.
-   */
-  renderElementModalityGrid() {
-    const planets = this.getPlanets();
-    if (planets.length === 0) return nothing;
-    const ELEMENTS = ["Fire", "Earth", "Air", "Water"];
-    const MODALITIES = ["Cardinal", "Fixed", "Mutable"];
-    const order = SIGNS_ORDER;
-    const cells = {};
-    for (const el of ELEMENTS)
-      cells[el] = { Cardinal: [], Fixed: [], Mutable: [] };
-    for (const p of planets) {
-      const idx = order.indexOf(capitalize(p.sign ?? ""));
-      if (idx < 0) continue;
-      const el = ELEMENTS[idx % 4];
-      const mod = MODALITIES[idx % 3];
-      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? capitalize(p.name).slice(0, 2);
-      cells[el]?.[mod]?.push(glyph);
-    }
-    return html`<table class="em-grid" aria-label="Element and modality distribution">
-			<thead>
-				<tr>
-					<th></th>
-					${MODALITIES.map((m) => html`<th scope="col">${m.slice(0, 3)}</th>`)}
-					<th scope="col">Total</th>
-				</tr>
-			</thead>
-			<tbody>
-				${ELEMENTS.map((el) => {
-      const rowTotal = MODALITIES.reduce(
-        (s, m) => s + (cells[el]?.[m]?.length ?? 0),
-        0
-      );
-      return html`<tr>
-						<th scope="row">${el}</th>
-						${MODALITIES.map(
-        (m) => html`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
-      )}
-						<td class="em-total">${rowTotal}</td>
-					</tr>`;
-    })}
-				<tr>
-					<th scope="row">Total</th>
-					${MODALITIES.map(
-      (m) => html`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
-    )}
-					<td class="em-total">${planets.length}</td>
-				</tr>
-			</tbody>
-		</table>`;
-  }
-  renderInterpretations() {
-    const planets = this.getPlanets().filter((p) => p.interpretation);
-    if (planets.length === 0) return nothing;
-    return html`<section class="interpretations">
-			<h3>Planet readings</h3>
-			${planets.map((p, idx) => {
-      const interp = p.interpretation;
-      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? "";
-      const deg = formatNumber(p.degree ?? 0, 1);
-      return html`<details class="interp-card" name="natal-planet-readings" ?open=${idx === 0}>
-					<summary>${glyph} ${p.name} <small>${p.sign ?? ""} ${deg}</small></summary>
-					<div class="interp-body">
-						${interp.summary ? html`<p class="interp-summary">${interp.summary}</p>` : nothing}
-						${interp.detailed ? html`<p class="interp-detail">${interp.detailed}</p>` : nothing}
-						${interp.keywords?.length ? html`<div class="interp-keywords">${interp.keywords.map((k) => html`<span class="kw">${k}</span>`)}</div>` : nothing}
-					</div>
-				</details>`;
-    })}
-		</section>`;
-  }
-  renderAspects(planets, aspects) {
-    const planetMap = /* @__PURE__ */ new Map();
-    for (const p of planets) {
-      if (typeof p.longitude !== "number") continue;
-      const name = capitalize(p.name);
-      if (name) planetMap.set(name, p.longitude);
-    }
-    return aspects.map((a) => {
-      const l1 = planetMap.get(capitalize(a.planet1));
-      const l2 = planetMap.get(capitalize(a.planet2));
-      if (l1 === void 0 || l2 === void 0) return nothing;
-      const p1 = polarToCartesian(
-        CENTER,
-        CENTER,
-        PLANET_R - 18,
-        this.toAngle(l1)
-      );
-      const p2 = polarToCartesian(
-        CENTER,
-        CENTER,
-        PLANET_R - 18,
-        this.toAngle(l2)
-      );
-      const aspectName = normalizeAspect(a);
-      const aspectClass = ASPECT_CLASS[aspectName] ?? "aspect-other";
-      const orbLabel = formatNumber(a.orb, 1);
-      return svg`<line class=${`aspect ${aspectClass}`} x1=${p1.x} y1=${p1.y} x2=${p2.x} y2=${p2.y}><title>${a.planet1} ${aspectName || ""} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
-    });
-  }
-};
-RoxyNatalChart.styles = [
-  baseStyles,
-  css2`
-			.wrap {
-				width: 100%;
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-				color: var(--roxy-primary, #0f172a);
-			}
-
-			.meta {
-				color: var(--roxy-muted, #71717a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-
-			svg {
-				display: block;
-				width: 100%;
-				max-width: 560px;
-				aspect-ratio: 1 / 1;
-				height: auto;
-				margin: 0 auto;
-			}
-
-			.wheel-line {
-				fill: none;
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-
-			.sign-glyph {
-				fill: var(--roxy-secondary, #475569);
-				font-size: 14px;
-				font-family: var(--roxy-font-sans);
-			}
-
-			.planet-glyph {
-				fill: var(--roxy-accent, #f59e0b);
-				font-size: 14px;
-				font-weight: 600;
-				font-family: var(--roxy-font-sans);
-			}
-
-			.planet-deg {
-				fill: var(--roxy-fg, #0a0a0a);
-				font-size: 7px;
-				font-family: var(--roxy-font-sans);
-			}
-
-			/* Below 480px the chart container shrinks to ~320px on phones.
-			 * Bump in-SVG text up proportionally so the 7px degree band
-			 * does not collapse below ~6px on screen.
-			 */
-			@container (max-width: 480px) {
-				.sign-glyph,
-				.planet-glyph {
-					font-size: 18px;
-				}
-				.planet-deg {
-					font-size: 10px;
-				}
-				.house-num {
-					font-size: 12px;
-				}
-			}
-
-			.planet-deg .retro {
-				fill: var(--roxy-danger, #dc2626);
-			}
-
-			.planet-leader {
-				stroke: var(--roxy-accent, #f59e0b);
-				stroke-width: 0.5;
-				opacity: 0.55;
-			}
-
-			.house-num {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 9px;
-				font-family: var(--roxy-font-sans);
-			}
-
-			.cusp-deg {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 6px;
-				font-family: var(--roxy-font-sans);
-			}
-
-			.tick {
-				stroke: var(--roxy-border, #e4e4e7);
-			}
-			.tick-major {
-				stroke: var(--roxy-secondary, #475569);
-			}
-
-			.aspect {
-				stroke-width: 0.8;
-				fill: none;
-				opacity: 0.55;
-			}
-			.aspect-trine,
-			.aspect-sextile {
-				stroke: var(--roxy-success, #16a34a);
-			}
-			.aspect-square,
-			.aspect-opposition {
-				stroke: var(--roxy-danger, #dc2626);
-			}
-			.aspect-conjunction {
-				stroke: var(--roxy-accent-fg, #b45309);
-			}
-			.aspect-other {
-				stroke: var(--roxy-muted, #71717a);
-				opacity: 0.4;
-			}
-
-			.angle-marker {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 10px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.04em;
-			}
-			.angle-tick {
-				stroke: var(--roxy-accent-fg, #b45309);
-				stroke-width: 1.5;
-			}
-
-			.legend {
-				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-muted, #71717a);
-				display: flex;
-				flex-wrap: wrap;
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.legend-swatch {
-				display: inline-block;
-				width: 8px;
-				height: 8px;
-				border-radius: 50%;
-				margin-right: 4px;
-				vertical-align: middle;
-			}
-
-			.tablist {
-				display: flex;
-				gap: 2px;
-				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
-			}
-			.tab {
-				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
-				font-size: var(--roxy-text-sm, 0.875rem);
-				background: none;
-				border: none;
-				border-bottom: 2px solid transparent;
-				margin-bottom: -2px;
-				cursor: pointer;
-				color: var(--roxy-muted, #71717a);
-				font-family: inherit;
-				transition: color var(--roxy-motion-duration, 200ms) var(--roxy-motion-easing, ease);
-			}
-			.tab[aria-selected='true'] {
-				color: var(--roxy-accent-fg, #b45309);
-				border-bottom-color: var(--roxy-accent, #f59e0b);
-				font-weight: var(--roxy-weight-bold, 600);
-			}
-			.tab:hover:not([aria-selected='true']) {
-				color: var(--roxy-fg, #0a0a0a);
-			}
-
-			.grid-scroll {
-				overflow-x: auto;
-				-webkit-overflow-scrolling: touch;
-			}
-			table.aspect-grid {
-				border-collapse: collapse;
-				font-size: var(--roxy-text-xs, 0.75rem);
-				margin: 0 auto;
-			}
-			table.aspect-grid th,
-			table.aspect-grid td {
-				width: 1.6rem;
-				height: 1.6rem;
-				text-align: center;
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				padding: 0;
-			}
-			table.aspect-grid th {
-				color: var(--roxy-secondary, #475569);
-				font-weight: var(--roxy-weight-bold, 600);
-			}
-			table.aspect-grid td.cell {
-				cursor: default;
-			}
-			table.aspect-grid td.empty {
-				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 18%, transparent);
-			}
-			table.aspect-grid td .asp {
-				font-size: 0.95em;
-				line-height: 1;
-			}
-			table.aspect-grid td.aspect-trine .asp,
-			table.aspect-grid td.aspect-sextile .asp {
-				color: var(--roxy-success, #16a34a);
-			}
-			table.aspect-grid td.aspect-square .asp,
-			table.aspect-grid td.aspect-opposition .asp {
-				color: var(--roxy-danger, #dc2626);
-			}
-			table.aspect-grid td.aspect-conjunction .asp {
-				color: var(--roxy-accent-fg, #b45309);
-			}
-			table.aspect-grid td.aspect-other .asp {
-				color: var(--roxy-muted, #71717a);
-			}
-
-			.details {
-				margin-top: var(--roxy-space-md, 1rem);
-			}
-
-			.pill-row {
-				display: flex;
-				flex-wrap: wrap;
-				gap: var(--roxy-space-xs, 0.25rem);
-				margin-bottom: var(--roxy-space-xs, 0.25rem);
-			}
-
-			.pill {
-				padding: 2px 8px;
-				border-radius: var(--roxy-radius-sm, 4px);
-				font-size: var(--roxy-text-xs, 0.75rem);
-				background: color-mix(in srgb, var(--roxy-fg, #0f172a) 8%, transparent);
-				color: var(--roxy-fg, #0f172a);
-			}
-
-			.pill--success {
-				background: color-mix(in srgb, var(--roxy-success, #16a34a) 15%, transparent);
-				color: var(--roxy-success, #16a34a);
-			}
-
-			.pill--danger {
-				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 15%, transparent);
-				color: var(--roxy-danger, #dc2626);
-			}
-
-			.pill--muted {
-				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent);
-				color: var(--roxy-fg, #0a0a0a);
-			}
-
-			.summary {
-				color: var(--roxy-fg, #0f172a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-				margin: var(--roxy-space-md, 1rem) 0;
-			}
-
-			.em-grid {
-				border-collapse: collapse;
-				font-size: var(--roxy-text-xs, 0.75rem);
-				width: 100%;
-			}
-			.em-grid th,
-			.em-grid td {
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				padding: 3px 5px;
-				text-align: center;
-				vertical-align: middle;
-			}
-			.em-grid th {
-				color: var(--roxy-muted, #71717a);
-				font-weight: var(--roxy-weight-bold, 600);
-				text-transform: uppercase;
-				letter-spacing: 0.04em;
-			}
-			.em-grid th[scope='row'] {
-				text-align: left;
-			}
-			.em-grid td {
-				color: var(--roxy-accent, #f59e0b);
-				font-size: 0.95em;
-				line-height: 1.4;
-				min-width: 1.4rem;
-			}
-			.em-grid .em-total {
-				color: var(--roxy-fg, #0a0a0a);
-				font-weight: var(--roxy-weight-bold, 600);
-				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 25%, transparent);
-			}
-
-			.interpretations {
-				margin-top: var(--roxy-space-md, 1rem);
-			}
-			.interpretations h3 {
-				font-size: var(--roxy-text-sm, 0.875rem);
-				font-weight: 600;
-				color: var(--roxy-muted, #71717a);
-				text-transform: uppercase;
-				letter-spacing: 0.06em;
-				margin: 0 0 var(--roxy-space-sm, 0.5rem);
-			}
-			.interp-card {
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				border-radius: var(--roxy-radius-md, 8px);
-				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
-				margin-bottom: var(--roxy-space-xs, 0.25rem);
-			}
-			.interp-card summary {
-				cursor: pointer;
-				font-weight: 500;
-				color: var(--roxy-fg, #0f172a);
-			}
-			.interp-card summary small {
-				color: var(--roxy-muted, #71717a);
-				margin-left: 0.5em;
-				font-weight: 400;
-			}
-			.interp-body {
-				margin-top: var(--roxy-space-xs, 0.25rem);
-				color: var(--roxy-fg, #0f172a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-			.interp-keywords {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 0.25rem;
-				margin-top: 0.5rem;
-			}
-			.interp-keywords .kw {
-				padding: 1px 8px;
-				border-radius: 9999px;
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
-				color: var(--roxy-accent-fg, #b45309);
-				font-size: var(--roxy-text-xs, 0.75rem);
-			}
-		`
-];
-__decorateClass([
-  property({ attribute: false })
-], RoxyNatalChart.prototype, "data", 2);
-__decorateClass([
-  property({ type: String, attribute: "house-system", reflect: true })
-], RoxyNatalChart.prototype, "houseSystem", 2);
-__decorateClass([
-  state()
-], RoxyNatalChart.prototype, "view", 2);
-RoxyNatalChart = __decorateClass([
-  customElement("roxy-natal-chart")
-], RoxyNatalChart);
-export {
-  RoxyNatalChart
-};
+var X=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var L=(c,l,r,a)=>{for(var t=a>1?void 0:a?Q(l,r):l,n=c.length-1,e;n>=0;n--)(e=c[n])&&(t=(a?e(l,r,t):e(t))||t);return a&&t&&X(l,r,t),t};import{css as ie,html as d,LitElement as le,nothing as u,svg as h}from"lit";import{customElement as ce,property as J,state as de}from"lit/decorators.js";var $={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 j={Aries:"\u2648",Taurus:"\u2649",Gemini:"\u264A",Cancer:"\u264B",Leo:"\u264C",Virgo:"\u264D",Libra:"\u264E",Scorpio:"\u264F",Sagittarius:"\u2650",Capricorn:"\u2651",Aquarius:"\u2652",Pisces:"\u2653"};var k=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],ge=k.map(c=>c.toLowerCase()),R={conjunction:"\u260C",opposition:"\u260D",trine:"\u25B3",square:"\u25A1",sextile:"\u2731",quincunx:"\u22BB",semisextile:"\u22BC"};import{css as ee}from"lit";var q=ee`: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}`;function f(c){let l=c%360;return l<0?l+360:l}function N(c){let l=f(c),r=Math.floor(l/30)%12,a=l%30,t=Math.floor(a),n=(a-t)*60,e=Math.floor(n),o=Math.round((n-e)*60);return{sign:k[r]??"Aries",signIndex:r,degree:t,minute:e,second:o}}function C(c){return f(c+180)}function B(c,l){let r=f(c),a=f(l)-r;return a<0&&(a+=360),f(r+a/2)}function m(c,l,r,a){let t=a*Math.PI/180;return{x:c+r*Math.cos(t),y:l+r*Math.sin(t)}}import{css as te,html as re}from"lit";function F(){return re`<svg class="roxy-chevron" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`}var Y=te`summary{list-style:none}summary::-webkit-details-marker{display:none}.roxy-chevron{aspect-ratio:auto;width:14px;height:14px;color:var(--roxy-muted,#71717a);transition:transform var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,ease);flex-shrink:0}details[open]>summary .roxy-chevron{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.roxy-chevron{transition:none}}`;function E(c,l=1){return typeof c!="number"||!Number.isFinite(c)?"":c.toFixed(l).replace(/\.?0+$/,"")}var z={conjunction:"aspect-conjunction",sextile:"aspect-sextile",square:"aspect-square",trine:"aspect-trine",opposition:"aspect-opposition"};function I(c){return(c.type??"").toLowerCase().replace(/_/g,"-")}var ne="roxy-data";function ae(c){return c.nodeName==="SCRIPT"&&c.getAttribute("type")==="application/json"}var M=class{constructor(l){this.host=l,l.addController(this)}hostConnected(){if(this.host.data!=null)return;let l=this.read();l!==void 0&&(this.host.data=l,this.host.requestUpdate())}read(){let l=this.findInlineScript();return l?this.parse(l.textContent):void 0}findInlineScript(){for(let l of Array.from(this.host.children))if(ae(l)&&l.classList.contains(ne))return l;return null}parse(l){if(l?.trim())try{return JSON.parse(l)}catch{return}}};function y(c){return c?c.charAt(0).toUpperCase()+c.slice(1).toLowerCase():""}import{css as oe,html as U,nothing as se}from"lit";var K=oe`.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(c){let{items:l,active:r,onSelect:a,label:t,idPrefix:n,controls:e=!1}=c;return U`<div class="roxy-tablist" role="tablist" aria-label="${t}" @keydown="${s=>{if(s.key!=="ArrowRight"&&s.key!=="ArrowLeft")return;s.preventDefault();let p=l.findIndex(w=>w.id===r);if(p===-1)return;let g=s.key==="ArrowRight"?1:-1,x=l[(p+g+l.length)%l.length];if(!x)return;a(x.id);let b=s.currentTarget.getRootNode();requestAnimationFrame(()=>{b.querySelector(`#${n}-tab-${x.id}`)?.focus()})}}">${l.map(s=>U`<button type="button" class="roxy-tab" role="tab" id="${n}-tab-${s.id}" aria-selected="${r===s.id?"true":"false"}" aria-controls="${e&&r===s.id?`${n}-panel-${s.id}`:se}" tabindex="${r===s.id?"0":"-1"}" @click="${()=>a(s.id)}">${s.label}</button>`)}</div>`}var D=420,i=D/2,A=164,_=146,P=120,S=96,pe=178,me=196,v=class extends le{constructor(){super();this.data=null;this.houseSystem="placidus";this.view="wheel";new M(this)}getPlanets(){return this.data?.planets??[]}getAscendant(){return this.data?.ascendant?.longitude??0}getMidheaven(){let r=this.data?.midheaven?.longitude;return typeof r=="number"?r:null}toAngle(r){return 180+this.getAscendant()-r}render(){if(!this.data)return d`<div class="roxy-empty" role="status">No chart data</div>`;let r=this.getPlanets(),a=this.data.aspects??[],t=this.view;return d`<div class="wrap"><header><h2 class="title">Natal chart</h2>${this.data.birthDetails?d`<div class="meta">${[this.data.birthDetails.date,this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}</div>`:u}</header>${V({items:[{id:"wheel",label:"Wheel"},{id:"grid",label:"Aspect grid"}],active:t,onSelect:n=>{this.view=n},label:"Natal chart views",idPrefix:"natal",controls:!0})}<div id="natal-panel-${t}" role="tabpanel" aria-labelledby="natal-tab-${t}">${t==="wheel"?this.renderWheel(r,a):this.renderAspectGrid(r,a)}</div><div class="legend"><span>${r.length} planets</span> <span>${a.length} aspects</span> ${this.data.houseSystem?d`<span>${this.data.houseSystem} houses</span>`:u} <span><span class="legend-swatch" style="background:var(--roxy-success)"></span>harmonious</span> <span><span class="legend-swatch" style="background:var(--roxy-danger)"></span>challenging</span></div>${this.renderDetails()} ${this.renderInterpretations()}</div>`}renderWheel(r,a){return d`<svg viewBox="0 0 ${D} ${D}" role="img" aria-label="Natal chart wheel with twelve houses, planets, and aspects"><title>Natal chart wheel</title><desc>Twelve zodiac sign segments around a circular wheel. Planet glyphs are placed at their ecliptic longitudes. Aspect lines connect related planets.</desc><circle class="wheel-line" cx="${i}" cy="${i}" r="${A}" stroke-width="1.5"/><circle class="wheel-line" cx="${i}" cy="${i}" r="${_-14}" stroke-width="0.8"/><circle class="wheel-line" cx="${i}" cy="${i}" r="${P}" stroke-width="1"/><circle class="wheel-line" cx="${i}" cy="${i}" r="${S-16}" stroke-width="0.5"/>${this.renderTicks()} ${this.renderSpokes()} ${this.renderSigns()} ${this.renderHouseNumbers()} ${this.renderCuspDegrees()} ${this.renderAspects(r,a)} ${this.renderPlanets(r)} ${this.renderAngles()}</svg>`}renderAspectGrid(r,a){let t=r.map(e=>y(e.name)),n=new Map;for(let e of a){let o=[y(e.planet1),y(e.planet2)].sort().join("|");n.set(o,e)}return t.length===0?d`<p class="roxy-empty" role="status">No planets to grid</p>`:d`<div class="grid-scroll"><table class="aspect-grid" aria-label="Planet by planet aspect grid"><thead><tr><th></th>${t.slice(0,-1).map(e=>{let o=$[e]??e.slice(0,2);return d`<th scope="col" title="${e}">${o}</th>`})}</tr></thead><tbody>${t.slice(1).map((e,o)=>{let s=$[e]??e.slice(0,2);return d`<tr><th scope="row" title="${e}">${s}</th>${t.slice(0,o+1).map(p=>{let g=n.get([e,p].sort().join("|"));if(!g)return d`<td class="empty"></td>`;let x=I(g),b=R[x]??R[x.replace(/-/g,"")]??x.slice(0,3),w=z[x]??"aspect-other",T=E(g.orb,1);return d`<td class="${`cell ${w}`}" title="${`${e} ${x} ${p}${T?` (orb ${T}\xB0)`:""}`}"><span class="asp">${b}</span></td>`})} ${t.slice(o+1,-1).map(()=>d`<td class="empty"></td>`)}</tr>`})}</tbody></table></div>`}renderAngles(){let r=this.getAscendant(),a=this.getMidheaven(),t=[this.renderAngleMark(r,"ASC"),this.renderAngleMark(C(r),"DSC")];a!==null&&(t.push(this.renderAngleMark(a,"MC")),t.push(this.renderAngleMark(C(a),"IC")));let n=this.data?.partOfFortune?.longitude;typeof n=="number"&&t.push(this.renderAngleMark(f(n),"PoF"));let e=this.data?.vertex?.longitude;return typeof e=="number"&&t.push(this.renderAngleMark(f(e),"Vtx")),t}renderAngleMark(r,a){let t=this.toAngle(r),n=m(i,i,A,t),e=m(i,i,pe,t),o=m(i,i,me,t);return h`<g><line class="angle-tick" x1="${n.x}" y1="${n.y}" x2="${e.x}" y2="${e.y}"><text class="angle-marker" x="${o.x}" y="${o.y}" text-anchor="middle" dominant-baseline="central">${a}</text></g>`}renderSpokes(){let r=this.data?.houses??[];return(r.length===12?r.map(t=>t.longitude):Array.from({length:12},(t,n)=>this.getAscendant()+n*30)).map(t=>{let n=this.toAngle(t),e=m(i,i,P,n),o=m(i,i,A,n);return h`<line class="wheel-line" x1="${e.x}" y1="${e.y}" x2="${o.x}" y2="${o.y}" stroke-width="0.8">`})}renderSigns(){return k.map((r,a)=>{let t=this.toAngle(a*30+15),n=m(i,i,_,t);return h`<text class="sign-glyph" x="${n.x}" y="${n.y}" text-anchor="middle" dominant-baseline="central">${j[r]}</text>`})}renderHouseNumbers(){let r=this.data?.houses??[];if(r.length===12)return r.map((t,n)=>{let e=r[(n+1)%12],o=B(t.longitude,e?e.longitude:t.longitude+30),s=m(i,i,P-12,this.toAngle(o));return h`<text class="house-num" x="${s.x}" y="${s.y}" text-anchor="middle" dominant-baseline="central">${t.number}</text>`});let a=Math.floor(this.getAscendant()/30);return Array.from({length:12},(t,n)=>{let e=this.toAngle(n*30+15),o=m(i,i,P-12,e),s=(n-a+12)%12+1;return h`<text class="house-num" x="${o.x}" y="${o.y}" text-anchor="middle" dominant-baseline="central">${s}</text>`})}renderTicks(){let r=[];for(let a=0;a<360;a+=5){let t=this.toAngle(a),n=a%30===0,e=n?_-14:A-5,o=m(i,i,e,t),s=m(i,i,A,t);r.push(h`<line class="${n?"tick tick-major":"tick"}" x1="${o.x}" y1="${o.y}" x2="${s.x}" y2="${s.y}" stroke-width="${n?1:.5}">`)}return r}renderCuspDegrees(){let r=this.data?.houses??[];return r.length!==12?u:r.map(a=>{let t=this.toAngle(a.longitude),n=m(i,i,P+9,t),e=N(a.longitude);return h`<text class="cusp-deg" x="${n.x}" y="${n.y}" text-anchor="middle" dominant-baseline="central">${e.degree}°${String(e.minute).padStart(2,"0")}'</text>`})}renderPlanets(r){let t=r.filter(e=>Number.isFinite(e.longitude)).map(e=>({p:e,trueLon:f(e.longitude),displayLon:f(e.longitude)})).sort((e,o)=>e.trueLon-o.trueLon);for(let e=1;e<t.length;e++){let o=t[e-1],s=t[e];if(!o||!s)continue;let p=o.displayLon+7;s.displayLon<p&&(s.displayLon=p)}let n=t[t.length-1];if(n&&n.displayLon>360){let e=n.displayLon-360;for(let o of t)o.displayLon-=e}return t.map(({p:e,trueLon:o,displayLon:s})=>{let p=this.toAngle(o),g=this.toAngle(s),x=m(i,i,S,g),b=m(i,i,S-13,g),w=m(i,i,A-4,p),T=m(i,i,S+8,g),W=$[y(e.name)]??e.name.slice(0,2),G=N(e.longitude),H=e.isRetrograde===!0,O=`${G.degree}\xB0${String(G.minute).padStart(2,"0")}'`,Z=Math.abs(s-o)>.5;return h`<g>${Z?h`<line class="planet-leader" x1="${w.x}" y1="${w.y}" x2="${T.x}" y2="${T.y}">`:u}<text class="planet-glyph" x="${x.x}" y="${x.y}" text-anchor="middle" dominant-baseline="central"><title>${e.name}${H?" retrograde":""} - ${O} ${e.sign??""}</title>${W}</text><text class="planet-deg" x="${b.x}" y="${b.y}" text-anchor="middle" dominant-baseline="central">${O}${H?h`<tspan class="retro">℞</tspan>`:u}</text></g>`})}renderDetails(){let r=this.data?.summary,a=this.data?.aspectsInterpretation;if(!r&&!a)return u;let t=r?.retrogradePlanets??[];return d`<div class="details">${r?.dominantElement||r?.dominantModality?d`<div class="pill-row">${r.dominantElement?d`<span class="pill">Dominant element: ${r.dominantElement}</span>`:u} ${r.dominantModality?d`<span class="pill">Dominant modality: ${r.dominantModality}</span>`:u}</div>`:u} ${a?d`<div class="pill-row"><span class="pill pill--success">Harmonious ${a.harmonious}</span> <span class="pill pill--danger">Challenging ${a.challenging}</span> <span class="pill pill--muted">Neutral ${a.neutral}</span></div>`:u} ${t.length>0?d`<div class="pill-row">${t.map(n=>{let e=$[n]??n.slice(0,2);return d`<span class="pill pill--muted">${e} ${n} R</span>`})}</div>`:u} ${a?.summary?d`<p class="summary">${a.summary}</p>`:u} ${this.renderElementModalityGrid()}</div>`}renderElementModalityGrid(){let r=this.getPlanets();if(r.length===0)return u;let a=["Fire","Earth","Air","Water"],t=["Cardinal","Fixed","Mutable"],n=k,e={};for(let o of a)e[o]={Cardinal:[],Fixed:[],Mutable:[]};for(let o of r){let s=n.indexOf(y(o.sign??""));if(s<0)continue;let p=a[s%4],g=t[s%3],x=$[y(o.name)]??y(o.name).slice(0,2);e[p]?.[g]?.push(x)}return d`<table class="em-grid" aria-label="Element and modality distribution"><thead><tr><th></th>${t.map(o=>d`<th scope="col">${o.slice(0,3)}</th>`)}<th scope="col">Total</th></tr></thead><tbody>${a.map(o=>{let s=t.reduce((p,g)=>p+(e[o]?.[g]?.length??0),0);return d`<tr><th scope="row">${o}</th>${t.map(p=>d`<td>${(e[o]?.[p]??[]).join(" ")}</td>`)}<td class="em-total">${s}</td></tr>`})}<tr><th scope="row">Total</th>${t.map(o=>d`<td class="em-total">${a.reduce((s,p)=>s+(e[p]?.[o]?.length??0),0)}</td>`)}<td class="em-total">${r.length}</td></tr></tbody></table>`}renderInterpretations(){let r=this.getPlanets().filter(a=>a.interpretation);return r.length===0?u:d`<section class="interpretations"><h3>Planet readings</h3>${r.map((a,t)=>{let n=a.interpretation,e=$[y(a.name)]??"",o=E(a.degree??0,1);return d`<details class="interp-card" name="natal-planet-readings" ?open="${t===0}"><summary><span>${e} ${a.name}</span> <span class="interp-aside"><small>${a.sign??""} ${o}</small> ${F()}</span></summary><div class="interp-body">${n.summary?d`<p class="interp-summary">${n.summary}</p>`:u} ${n.detailed?d`<p class="interp-detail">${n.detailed}</p>`:u} ${n.keywords?.length?d`<div class="interp-keywords">${n.keywords.map(s=>d`<span class="kw">${s}</span>`)}</div>`:u}</div></details>`})}</section>`}renderAspects(r,a){let t=new Map;for(let n of r){if(typeof n.longitude!="number")continue;let e=y(n.name);e&&t.set(e,n.longitude)}return a.map(n=>{let e=t.get(y(n.planet1)),o=t.get(y(n.planet2));if(e===void 0||o===void 0)return u;let s=m(i,i,S-18,this.toAngle(e)),p=m(i,i,S-18,this.toAngle(o)),g=I(n),x=z[g]??"aspect-other",b=E(n.orb,1);return h`<line class="${`aspect ${x}`}" x1="${s.x}" y1="${s.y}" x2="${p.x}" y2="${p.y}"><title>${n.planet1} ${g||""} ${n.planet2}${b?` (orb ${b}\xB0)`:""}</title></line>`})}};v.styles=[q,K,Y,ie`.wrap{gap:var(--roxy-space-md,1rem);width:100%;display:grid}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);color:var(--roxy-primary,#0f172a);margin:0}.meta{color:var(--roxy-muted,#71717a);font-size:var(--roxy-text-sm,.875rem)}svg{aspect-ratio:1;width:100%;max-width:560px;height:auto;margin:0 auto;display:block}.wheel-line{fill:none;stroke:var(--roxy-border,#e4e4e7)}.sign-glyph{fill:var(--roxy-secondary,#475569);font-size:14px;font-family:var(--roxy-font-sans)}.planet-glyph{fill:var(--roxy-accent,#f59e0b);font-size:14px;font-weight:600;font-family:var(--roxy-font-sans)}.planet-deg{fill:var(--roxy-fg,#0a0a0a);font-size:7px;font-family:var(--roxy-font-sans)}@container (width<=480px){.sign-glyph,.planet-glyph{font-size:18px}.planet-deg{font-size:10px}.house-num{font-size:12px}}.planet-deg .retro{fill:var(--roxy-danger,#dc2626)}.planet-leader{stroke:var(--roxy-accent,#f59e0b);stroke-width:.5px;opacity:.55}.house-num{fill:var(--roxy-muted,#71717a);font-size:9px;font-family:var(--roxy-font-sans)}.cusp-deg{fill:var(--roxy-muted,#71717a);font-size:6px;font-family:var(--roxy-font-sans)}.tick{stroke:var(--roxy-border,#e4e4e7)}.tick-major{stroke:var(--roxy-secondary,#475569)}.aspect{stroke-width:.8px;fill:none;opacity:.55}.aspect-trine,.aspect-sextile{stroke:var(--roxy-success,#16a34a)}.aspect-square,.aspect-opposition{stroke:var(--roxy-danger,#dc2626)}.aspect-conjunction{stroke:var(--roxy-accent-fg,#b45309)}.aspect-other{stroke:var(--roxy-muted,#71717a);opacity:.4}.angle-marker{fill:var(--roxy-accent-fg,#b45309);font-size:10px;font-weight:700;font-family:var(--roxy-font-sans);letter-spacing:.04em}.angle-tick{stroke:var(--roxy-accent-fg,#b45309);stroke-width:1.5px}.legend{font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);gap:var(--roxy-space-md,1rem);flex-wrap:wrap;display:flex}.legend-swatch{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.grid-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}table.aspect-grid{border-collapse:collapse;font-size:var(--roxy-text-xs,.75rem);margin:0 auto}table.aspect-grid th,table.aspect-grid td{text-align:center;border:1px solid var(--roxy-border,#e4e4e7);width:1.6rem;height:1.6rem;padding:0}table.aspect-grid th{color:var(--roxy-secondary,#475569);font-weight:var(--roxy-weight-bold,600)}table.aspect-grid td.cell{cursor:default}table.aspect-grid td.empty{background:color-mix(in srgb, var(--roxy-border,#e4e4e7) 18%, transparent)}table.aspect-grid td .asp{font-size:.95em;line-height:1}table.aspect-grid td.aspect-trine .asp,table.aspect-grid td.aspect-sextile .asp{color:var(--roxy-success,#16a34a)}table.aspect-grid td.aspect-square .asp,table.aspect-grid td.aspect-opposition .asp{color:var(--roxy-danger,#dc2626)}table.aspect-grid td.aspect-conjunction .asp{color:var(--roxy-accent-fg,#b45309)}table.aspect-grid td.aspect-other .asp{color:var(--roxy-muted,#71717a)}.details{margin-top:var(--roxy-space-md,1rem)}.pill-row{gap:var(--roxy-space-xs,.25rem);margin-bottom:var(--roxy-space-xs,.25rem);flex-wrap:wrap;display:flex}.pill{border-radius:var(--roxy-radius-sm,4px);font-size:var(--roxy-text-xs,.75rem);background:color-mix(in srgb, var(--roxy-fg,#0f172a) 8%, transparent);color:var(--roxy-fg,#0f172a);padding:2px 8px}.pill--success{background:color-mix(in srgb, var(--roxy-success,#16a34a) 15%, transparent);color:var(--roxy-success,#16a34a)}.pill--danger{background:color-mix(in srgb, var(--roxy-danger,#dc2626) 15%, transparent);color:var(--roxy-danger,#dc2626)}.pill--muted{background:color-mix(in srgb, var(--roxy-border,#e4e4e7) 60%, transparent);color:var(--roxy-fg,#0a0a0a)}.summary{color:var(--roxy-fg,#0f172a);font-size:var(--roxy-text-sm,.875rem);margin:var(--roxy-space-md,1rem) 0}.em-grid{border-collapse:collapse;font-size:var(--roxy-text-xs,.75rem);width:100%}.em-grid th,.em-grid td{border:1px solid var(--roxy-border,#e4e4e7);text-align:center;vertical-align:middle;padding:3px 5px}.em-grid th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;letter-spacing:.04em}.em-grid th[scope=row]{text-align:left}.em-grid td{color:var(--roxy-accent,#f59e0b);min-width:1.4rem;font-size:.95em;line-height:1.4}.em-grid .em-total{color:var(--roxy-fg,#0a0a0a);font-weight:var(--roxy-weight-bold,600);background:color-mix(in srgb, var(--roxy-border,#e4e4e7) 25%, transparent)}.interpretations{margin-top:var(--roxy-space-md,1rem)}.interpretations h3{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--roxy-space-sm,.5rem);font-weight:600}.interp-card{border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);padding:var(--roxy-space-sm,.5rem) var(--roxy-space-md,1rem);margin-bottom:var(--roxy-space-xs,.25rem)}.interp-card summary{cursor:pointer;color:var(--roxy-fg,#0f172a);justify-content:space-between;align-items:center;gap:var(--roxy-space-md,1rem);font-weight:500;display:flex}.interp-aside{align-items:center;gap:.6em;display:inline-flex}.interp-aside small{color:var(--roxy-muted,#71717a);font-weight:400}.interp-body{margin-top:var(--roxy-space-xs,.25rem);color:var(--roxy-fg,#0f172a);font-size:var(--roxy-text-sm,.875rem)}.interp-keywords{flex-wrap:wrap;gap:.25rem;margin-top:.5rem;display:flex}.interp-keywords .kw{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 14%, transparent);color:var(--roxy-accent-fg,#b45309);font-size:var(--roxy-text-xs,.75rem);border-radius:9999px;padding:1px 8px}`],L([J({attribute:!1})],v.prototype,"data",2),L([J({type:String,attribute:"house-system",reflect:!0})],v.prototype,"houseSystem",2),L([de()],v.prototype,"view",2),v=L([ce("roxy-natal-chart")],v);export{v as RoxyNatalChart};
 //# sourceMappingURL=natal-chart.js.map