@roxyapi/ui 0.4.1 → 0.6.0

package/dist/components/synastry-chart.js

@@ -1,659 +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/synastry-chart.ts
-import { css as css2, html, LitElement, nothing, svg } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-// packages/ui/src/tokens/index.ts
-var PLANET_GLYPH = {
-  Sun: "\u2609",
-  Moon: "\u263D",
-  Mercury: "\u263F",
-  Venus: "\u2640",
-  Earth: "\u2641",
-  Mars: "\u2642",
-  Jupiter: "\u2643",
-  Saturn: "\u2644",
-  Uranus: "\u2645",
-  Neptune: "\u2646",
-  Pluto: "\u2647",
-  Rahu: "\u260A",
-  Ketu: "\u260B",
-  Ascendant: "Asc",
-  Lagna: "La",
-  NorthNode: "\u260A",
-  SouthNode: "\u260B",
-  "North node": "\u260A",
-  "South node": "\u260B",
-  Chiron: "\u26B7",
-  Lilith: "\u26B8",
-  "Black moon lilith": "\u26B8"
-};
-var 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()
-);
-
-// 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 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/string.ts
-function capitalize(s) {
-  if (!s) return "";
-  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-
-// packages/ui/src/components/synastry-chart.ts
-var SIZE = 360;
-var CENTER = SIZE / 2;
-var OUTER_R = 170;
-var SIGN_R = 154;
-var P1_R = 124;
-var P2_R = 96;
-var RoxySynastryChart = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.data = null;
-  }
-  render() {
-    if (!this.data)
-      return html`<div class="roxy-empty" role="status">No synastry data</div>`;
-    const { person1, person2, compatibilityScore, analysis } = this.data;
-    const interAspects = this.data.interAspects ?? [];
-    const p1Planets = person1?.planets ?? [];
-    const p2Planets = person2?.planets ?? [];
-    const score = typeof compatibilityScore === "number" ? Math.round(compatibilityScore) : void 0;
-    const summaryText = analysis?.overall;
-    const strengths = analysis?.strengths ?? [];
-    const challenges = analysis?.challenges ?? [];
-    const hasPlanets = p1Planets.length > 0 && p2Planets.length > 0;
-    if (!hasPlanets) {
-      return html`<div
-				class="wrap"
-				aria-label="Synastry compatibility chart"
-			>
-				<div class="head">
-					<h2 class="title">Synastry</h2>
-					${typeof score === "number" ? html`<span class="score" aria-label=${`Score ${score} of 100`}
-								>${score} / 100</span
-							>` : nothing}
-				</div>
-				<div class="missing-planets" role="status">
-					Synastry response missing planet positions. Pass
-					<code>data</code> with <code>person1.planets</code> and
-					<code>person2.planets</code> arrays from the natal-chart endpoint, or
-					use the <code>&lt;roxy-data&gt;</code> fallback.
-				</div>
-				${summaryText ? html`<p class="summary">${summaryText}</p>` : nothing}
-				${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
-				${strengths.length > 0 || challenges.length > 0 ? html`<div class="lists">
-							${strengths.length ? html`<div>
-										<h3>Strengths</h3>
-										<ul>
-											${strengths.map((s) => html`<li>${s}</li>`)}
-										</ul>
-									</div>` : nothing}
-							${challenges.length ? html`<div>
-										<h3>Challenges</h3>
-										<ul>
-											${challenges.map((s) => html`<li>${s}</li>`)}
-										</ul>
-									</div>` : nothing}
-						</div>` : nothing}
-			</div>`;
-    }
-    return html`<div
-			class="wrap"
-			aria-label="Synastry compatibility chart"
-		>
-			<div class="head">
-				<h2 class="title">Synastry</h2>
-				${typeof score === "number" ? html`<span class="score" aria-label=${`Score ${score} of 100`}
-							>${score} / 100</span
-						>` : nothing}
-			</div>
-			<svg
-				viewBox="0 0 ${SIZE} ${SIZE}"
-				role="img"
-				aria-label="Dual chart wheel comparing two natal charts"
-			>
-				<title>Synastry dual wheel</title>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${OUTER_R}
-					stroke-width="1.5"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${P2_R + 14}
-					stroke-width="0.8"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${P2_R - 14}
-					stroke-width="0.6"
-				/>
-				${this.renderSpokes()} ${this.renderSigns()}
-				${this.renderInterAspectLines(p1Planets, p2Planets, interAspects)}
-				${this.renderRing(p1Planets, P1_R, "p1", 1)} ${this.renderRing(p2Planets, P2_R, "p2", 2)}
-				${this.renderAscendants(this.data)}
-			</svg>
-			<div class="legend-row">
-				<span><span class="swatch" style="background: var(--roxy-accent)"></span>Person 1</span>
-				<span><span class="swatch" style="background: var(--roxy-info)"></span>Person 2</span>
-				<span><span class="swatch" style="background: var(--roxy-success)"></span>harmonious</span>
-				<span><span class="swatch" style="background: var(--roxy-danger)"></span>challenging</span>
-			</div>
-			${summaryText ? html`<p class="summary">${summaryText}</p>` : nothing}
-			${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
-			${strengths.length > 0 || challenges.length > 0 ? html`<div class="lists">
-						${strengths.length ? html`<div>
-									<h3>Strengths</h3>
-									<ul>
-										${strengths.map((s) => html`<li>${s}</li>`)}
-									</ul>
-								</div>` : nothing}
-						${challenges.length ? html`<div>
-									<h3>Challenges</h3>
-									<ul>
-										${challenges.map((s) => html`<li>${s}</li>`)}
-									</ul>
-								</div>` : nothing}
-					</div>` : nothing}
-		</div>`;
-  }
-  toAngle(longitude) {
-    return 180 - longitude;
-  }
-  renderSpokes() {
-    return Array.from({ length: 12 }, (_, i) => {
-      const angle = this.toAngle(i * 30);
-      const start = polarToCartesian(CENTER, CENTER, P2_R - 14, 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.6" />`;
-    });
-  }
-  renderSigns() {
-    return SIGNS_ORDER.map((s, i) => {
-      const angle = this.toAngle(i * 30 + 15);
-      const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
-      return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
-    });
-  }
-  renderRing(planets, radius, cls, personIndex) {
-    return planets.map((p) => {
-      if (!Number.isFinite(p.longitude)) return nothing;
-      const angle = this.toAngle(p.longitude);
-      const pos = polarToCartesian(CENTER, CENTER, radius, angle);
-      const degOffset = personIndex === 1 ? -12 : -10;
-      const degPos = polarToCartesian(
-        CENTER,
-        CENTER,
-        radius + degOffset,
-        angle
-      );
-      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 tooltip = `${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${sp.sign}`;
-      return svg`<g>
-				<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${tooltip}</title>${glyph}<tspan class="person-tag" dy="-0.55em" dx="0.15em">${personIndex}</tspan></text>
-				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${retro ? svg`<tspan class="retro"> ℞</tspan>` : nothing}</text>
-			</g>`;
-    });
-  }
-  /**
-   * Ascendant markers for both people. Drawn as small spokes at the inner
-   * rim with the label outside, so the two rising signs are immediately
-   * scannable on the wheel without depending on tooltips.
-   */
-  renderAscendants(data) {
-    const items = [];
-    const make = (asc, personIndex) => {
-      if (!asc) return;
-      const signIdx = SIGNS_ORDER.findIndex(
-        (s) => s.toLowerCase() === asc.sign.toLowerCase()
-      );
-      if (signIdx === -1) return;
-      const longitude = signIdx * 30 + asc.degree;
-      const angle = this.toAngle(longitude);
-      const innerR = personIndex === 1 ? P1_R + 14 : P2_R + 14;
-      const tickPos = polarToCartesian(CENTER, CENTER, innerR, angle);
-      const labelPos = polarToCartesian(CENTER, CENTER, OUTER_R + 14, angle);
-      items.push(svg`<g>
-				<line class="asc-tick" x1=${tickPos.x} y1=${tickPos.y} x2=${labelPos.x} y2=${labelPos.y} />
-				<text class="asc-label" x=${labelPos.x} y=${labelPos.y} text-anchor="middle" dominant-baseline="central">Asc${personIndex}</text>
-			</g>`);
-    };
-    make(data.person1?.ascendant, 1);
-    make(data.person2?.ascendant, 2);
-    return items;
-  }
-  renderInterAspectLines(p1, p2, aspects) {
-    const longitudeOf = (list, name) => {
-      const target = capitalize(name);
-      for (const p of list) {
-        if (capitalize(p.name) !== target) continue;
-        if (typeof p.longitude === "number") return p.longitude;
-      }
-      return void 0;
-    };
-    return aspects.map((a) => {
-      const l1 = longitudeOf(p1, a.planet1);
-      const l2 = longitudeOf(p2, a.planet2);
-      if (l1 === void 0 || l2 === void 0) return nothing;
-      const out = polarToCartesian(CENTER, CENTER, P1_R - 12, this.toAngle(l1));
-      const inn = polarToCartesian(CENTER, CENTER, P2_R + 8, this.toAngle(l2));
-      const aspectName = normalizeAspect(a);
-      const cls = ASPECT_CLASS[aspectName] ?? "aspect-other";
-      const orbLabel = formatNumber(a.orb, 1);
-      return svg`<line class=${`aspect ${cls}`} x1=${out.x} y1=${out.y} x2=${inn.x} y2=${inn.y}><title>${a.planet1} ${aspectName} ${a.planet2}${orbLabel ? ` (orb ${orbLabel}\xB0)` : ""}</title></line>`;
-    });
-  }
-  renderAspects(aspects) {
-    return html`<table>
-			<thead>
-				<tr>
-					<th>Planet 1</th>
-					<th>Planet 2</th>
-					<th>Aspect</th>
-					<th>Orb</th>
-					<th>Strength</th>
-				</tr>
-			</thead>
-			<tbody>
-				${aspects.slice(0, 12).map(
-      (a) => html`<tr>
-						<td>${a.planet1}</td>
-						<td>${a.planet2}</td>
-						<td>${normalizeAspect(a) || ""}</td>
-						<td class="orb">${formatNumber(a.orb, 1)}</td>
-						<td>${formatStrength(a.strength)}</td>
-					</tr>`
-    )}
-			</tbody>
-		</table>`;
-  }
-};
-RoxySynastryChart.styles = [
-  baseStyles,
-  css2`
-			.wrap {
-				display: grid;
-				gap: var(--roxy-space-md, 1rem);
-			}
-
-			.head {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				gap: var(--roxy-space-md, 1rem);
-				flex-wrap: wrap;
-			}
-
-			.title {
-				font-size: var(--roxy-text-lg, 1.125rem);
-				font-weight: var(--roxy-weight-bold, 600);
-				margin: 0;
-			}
-
-			.score {
-				font-variant-numeric: tabular-nums;
-				font-weight: var(--roxy-weight-bold, 600);
-				color: var(--roxy-accent-fg, #b45309);
-				font-size: var(--roxy-text-xl, 1.5rem);
-			}
-
-			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 {
-				fill: var(--roxy-secondary, #475569);
-				font-size: 14px;
-			}
-			.p1 {
-				fill: var(--roxy-accent, #f59e0b);
-				font-weight: 600;
-				font-size: 13px;
-			}
-			.p2 {
-				fill: var(--roxy-info, #0284c7);
-				font-weight: 600;
-				font-size: 13px;
-			}
-			.person-tag {
-				font-size: 7px;
-				font-weight: 700;
-				opacity: 0.85;
-			}
-			.planet-deg {
-				fill: var(--roxy-muted, #71717a);
-				font-size: 7px;
-				font-family: var(--roxy-font-sans);
-			}
-			.planet-deg .retro {
-				fill: var(--roxy-danger, #dc2626);
-			}
-			.asc-tick {
-				stroke: var(--roxy-accent-fg, #b45309);
-				stroke-width: 1;
-				opacity: 0.75;
-			}
-			.asc-label {
-				fill: var(--roxy-accent-fg, #b45309);
-				font-size: 9px;
-				font-weight: 700;
-				font-family: var(--roxy-font-sans);
-				letter-spacing: 0.04em;
-			}
-			.aspect {
-				stroke-width: 0.8;
-				fill: none;
-				opacity: 0.5;
-			}
-			.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.35;
-			}
-			.legend-row {
-				display: flex;
-				flex-wrap: wrap;
-				gap: var(--roxy-space-md, 1rem);
-				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-muted, #71717a);
-				margin-top: calc(var(--roxy-space-xs, 0.25rem) * -1);
-			}
-			.legend-row .swatch {
-				display: inline-block;
-				width: 8px;
-				height: 8px;
-				border-radius: 50%;
-				margin-right: 4px;
-				vertical-align: middle;
-			}
-
-			.summary {
-				margin: 0;
-				color: var(--roxy-fg, #0a0a0a);
-				font-size: var(--roxy-text-base, 1rem);
-			}
-
-			table {
-				width: 100%;
-				border-collapse: collapse;
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-			th,
-			td {
-				padding: var(--roxy-space-sm, 0.5rem);
-				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
-				text-align: left;
-			}
-			th {
-				color: var(--roxy-muted, #71717a);
-				font-weight: var(--roxy-weight-bold, 600);
-				text-transform: uppercase;
-				font-size: var(--roxy-text-xs, 0.75rem);
-				letter-spacing: 0.06em;
-			}
-			td.orb {
-				font-variant-numeric: tabular-nums;
-				color: var(--roxy-muted, #71717a);
-			}
-
-			.lists {
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-				gap: var(--roxy-space-md, 1rem);
-			}
-			.lists h3 {
-				margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
-				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-muted, #71717a);
-				text-transform: uppercase;
-				letter-spacing: 0.06em;
-			}
-			.lists ul {
-				margin: 0;
-				padding-left: var(--roxy-space-md, 1rem);
-				font-size: var(--roxy-text-sm, 0.875rem);
-			}
-
-			.missing-planets {
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 8%, transparent);
-				border: 1px solid var(--roxy-border, #e4e4e7);
-				border-radius: var(--roxy-radius-md, 8px);
-				padding: var(--roxy-space-md, 1rem);
-				color: var(--roxy-fg, #0a0a0a);
-				font-size: var(--roxy-text-sm, 0.875rem);
-				line-height: 1.5;
-			}
-			.missing-planets code {
-				font-family: var(--roxy-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-				font-size: 0.95em;
-				background: color-mix(in srgb, var(--roxy-fg, #0a0a0a) 6%, transparent);
-				padding: 0 4px;
-				border-radius: 4px;
-			}
-		`
-];
-__decorateClass([
-  property({ attribute: false })
-], RoxySynastryChart.prototype, "data", 2);
-RoxySynastryChart = __decorateClass([
-  customElement("roxy-synastry-chart")
-], RoxySynastryChart);
-function formatStrength(s) {
-  if (typeof s === "number") return Math.round(s).toString();
-  return "";
-}
-export {
-  RoxySynastryChart
-};
+var G=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var P=(n,t,a,r)=>{for(var o=r>1?void 0:r?H(t,a):t,s=n.length-1,e;s>=0;s--)(e=n[s])&&(o=(r?e(t,a,o):e(o))||o);return r&&o&&G(t,a,o),o};import{css as j,html as c,LitElement as B,nothing as u,svg as v}from"lit";import{customElement as U,property as F}from"lit/decorators.js";var C={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 E={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 b=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],K=b.map(n=>n.toLowerCase());import{css as O}from"lit";var M=O`: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 D(n){let t=n%360;return t<0?t+360:t}function z(n){let t=D(n),a=Math.floor(t/30)%12,r=t%30,o=Math.floor(r),s=(r-o)*60,e=Math.floor(s),p=Math.round((s-e)*60);return{sign:b[a]??"Aries",signIndex:a,degree:o,minute:e,second:p}}function y(n,t,a,r){let o=r*Math.PI/180;return{x:n+a*Math.cos(o),y:t+a*Math.sin(o)}}function k(n,t=1){return typeof n!="number"||!Number.isFinite(n)?"":n.toFixed(t).replace(/\.?0+$/,"")}var _={conjunction:"aspect-conjunction",sextile:"aspect-sextile",square:"aspect-square",trine:"aspect-trine",opposition:"aspect-opposition"};function R(n){return(n.type??"").toLowerCase().replace(/_/g,"-")}var q="roxy-data";function Y(n){return n.nodeName==="SCRIPT"&&n.getAttribute("type")==="application/json"}var w=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(Y(t)&&t.classList.contains(q))return t;return null}parse(t){if(t?.trim())try{return JSON.parse(t)}catch{return}}};function A(n){return n?n.charAt(0).toUpperCase()+n.slice(1).toLowerCase():""}var N=360,i=N/2,L=170,V=154,T=124,$=96,S=class extends B{constructor(){super();this.data=null;new w(this)}render(){if(!this.data)return c`<div class="roxy-empty" role="status">No synastry data</div>`;let{person1:a,person2:r,compatibilityScore:o,analysis:s}=this.data,e=this.data.interAspects??[],p=a?.planets??[],g=r?.planets??[],d=typeof o=="number"?Math.round(o):void 0,x=s?.overall,m=s?.strengths??[],l=s?.challenges??[];return p.length>0&&g.length>0?c`<div class="wrap" aria-label="Synastry compatibility chart"><div class="head"><h2 class="title">Synastry</h2>${typeof d=="number"?c`<span class="score" aria-label="${`Score ${d} of 100`}">${d} / 100</span>`:u}</div><svg viewBox="0 0 ${N} ${N}" role="img" aria-label="Dual chart wheel comparing two natal charts"><title>Synastry dual wheel</title><circle class="wheel-line" cx="${i}" cy="${i}" r="${L}" 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="${$-14}" stroke-width="0.6"/>${this.renderSpokes()} ${this.renderSigns()} ${this.renderInterAspectLines(p,g,e)} ${this.renderRing(p,T,"p1",1)} ${this.renderRing(g,$,"p2",2)} ${this.renderAscendants(this.data)}</svg><div class="legend-row"><span><span class="swatch" style="background:var(--roxy-accent)"></span>Person 1</span> <span><span class="swatch" style="background:var(--roxy-info)"></span>Person 2</span> <span><span class="swatch" style="background:var(--roxy-success)"></span>harmonious</span> <span><span class="swatch" style="background:var(--roxy-danger)"></span>challenging</span></div>${x?c`<p class="summary">${x}</p>`:u} ${e.length>0?this.renderAspects(e):u} ${m.length>0||l.length>0?c`<div class="lists">${m.length?c`<div><h3>Strengths</h3><ul>${m.map(f=>c`<li>${f}</li>`)}</ul></div>`:u} ${l.length?c`<div><h3>Challenges</h3><ul>${l.map(f=>c`<li>${f}</li>`)}</ul></div>`:u}</div>`:u}</div>`:c`<div class="wrap" aria-label="Synastry compatibility chart"><div class="head"><h2 class="title">Synastry</h2>${typeof d=="number"?c`<span class="score" aria-label="${`Score ${d} of 100`}">${d} / 100</span>`:u}</div><div class="missing-planets" role="status">Synastry response missing planet positions. Pass <code>data</code> with <code>person1.planets</code> and <code>person2.planets</code> arrays from the natal-chart endpoint, or use the <code>&lt;roxy-data></code> fallback.</div>${x?c`<p class="summary">${x}</p>`:u} ${e.length>0?this.renderAspects(e):u} ${m.length>0||l.length>0?c`<div class="lists">${m.length?c`<div><h3>Strengths</h3><ul>${m.map(f=>c`<li>${f}</li>`)}</ul></div>`:u} ${l.length?c`<div><h3>Challenges</h3><ul>${l.map(f=>c`<li>${f}</li>`)}</ul></div>`:u}</div>`:u}</div>`}toAngle(a){return 180-a}renderSpokes(){return Array.from({length:12},(a,r)=>{let o=this.toAngle(r*30),s=y(i,i,$-14,o),e=y(i,i,L,o);return v`<line class="wheel-line" x1="${s.x}" y1="${s.y}" x2="${e.x}" y2="${e.y}" stroke-width="0.6">`})}renderSigns(){return b.map((a,r)=>{let o=this.toAngle(r*30+15),s=y(i,i,V,o);return v`<text class="sign" x="${s.x}" y="${s.y}" text-anchor="middle" dominant-baseline="central">${E[a]}</text>`})}renderRing(a,r,o,s){return a.map(e=>{if(!Number.isFinite(e.longitude))return u;let p=this.toAngle(e.longitude),g=y(i,i,r,p),x=y(i,i,r+(s===1?-12:-10),p),m=C[A(e.name)]??e.name.slice(0,2),l=z(e.longitude),h=e.isRetrograde===!0,f=`${l.degree}\xB0${String(l.minute).padStart(2,"0")}'`,I=`${e.name}${h?" retrograde":""} - ${f} ${l.sign}`;return v`<g><text class="${o}" x="${g.x}" y="${g.y}" text-anchor="middle" dominant-baseline="central"><title>${I}</title>${m}<tspan class="person-tag" dy="-0.55em" dx="0.15em">${s}</tspan></text><text class="planet-deg" x="${x.x}" y="${x.y}" text-anchor="middle" dominant-baseline="central">${l.degree}°${h?v`<tspan class="retro">℞</tspan>`:u}</text></g>`})}renderAscendants(a){let r=[],o=(s,e)=>{if(!s)return;let p=b.findIndex(h=>h.toLowerCase()===s.sign.toLowerCase());if(p===-1)return;let g=p*30+s.degree,d=this.toAngle(g),x=e===1?T+14:$+14,m=y(i,i,x,d),l=y(i,i,L+14,d);r.push(v`<g><line class="asc-tick" x1="${m.x}" y1="${m.y}" x2="${l.x}" y2="${l.y}"><text class="asc-label" x="${l.x}" y="${l.y}" text-anchor="middle" dominant-baseline="central">Asc${e}</text></g>`)};return o(a.person1?.ascendant,1),o(a.person2?.ascendant,2),r}renderInterAspectLines(a,r,o){let s=(e,p)=>{let g=A(p);for(let d of e)if(A(d.name)===g&&typeof d.longitude=="number")return d.longitude};return o.map(e=>{let p=s(a,e.planet1),g=s(r,e.planet2);if(p===void 0||g===void 0)return u;let d=y(i,i,T-12,this.toAngle(p)),x=y(i,i,$+8,this.toAngle(g)),m=R(e),l=_[m]??"aspect-other",h=k(e.orb,1);return v`<line class="${`aspect ${l}`}" x1="${d.x}" y1="${d.y}" x2="${x.x}" y2="${x.y}"><title>${e.planet1} ${m} ${e.planet2}${h?` (orb ${h}\xB0)`:""}</title></line>`})}renderAspects(a){return c`<table><thead><tr><th>Planet 1</th><th>Planet 2</th><th>Aspect</th><th>Orb</th><th>Strength</th></tr></thead><tbody>${a.slice(0,12).map(r=>c`<tr><td>${r.planet1}</td><td>${r.planet2}</td><td>${R(r)||""}</td><td class="orb">${k(r.orb,1)}</td><td>${J(r.strength)}</td></tr>`)}</tbody></table>`}};S.styles=[M,j`.wrap{gap:var(--roxy-space-md,1rem);display:grid}.head{justify-content:space-between;align-items:center;gap:var(--roxy-space-md,1rem);flex-wrap:wrap;display:flex}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}.score{font-variant-numeric:tabular-nums;font-weight:var(--roxy-weight-bold,600);color:var(--roxy-accent-fg,#b45309);font-size:var(--roxy-text-xl,1.5rem)}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{fill:var(--roxy-secondary,#475569);font-size:14px}.p1{fill:var(--roxy-accent,#f59e0b);font-size:13px;font-weight:600}.p2{fill:var(--roxy-info,#0284c7);font-size:13px;font-weight:600}.person-tag{opacity:.85;font-size:7px;font-weight:700}.planet-deg{fill:var(--roxy-muted,#71717a);font-size:7px;font-family:var(--roxy-font-sans)}.planet-deg .retro{fill:var(--roxy-danger,#dc2626)}.asc-tick{stroke:var(--roxy-accent-fg,#b45309);stroke-width:1px;opacity:.75}.asc-label{fill:var(--roxy-accent-fg,#b45309);font-size:9px;font-weight:700;font-family:var(--roxy-font-sans);letter-spacing:.04em}.aspect{stroke-width:.8px;fill:none;opacity:.5}.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:.35}.legend-row{gap:var(--roxy-space-md,1rem);font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);margin-top:calc(var(--roxy-space-xs,.25rem) * -1);flex-wrap:wrap;display:flex}.legend-row .swatch{vertical-align:middle;border-radius:50%;width:8px;height:8px;margin-right:4px;display:inline-block}.summary{color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);margin:0}table{border-collapse:collapse;width:100%;font-size:var(--roxy-text-sm,.875rem)}th,td{padding:var(--roxy-space-sm,.5rem);border-bottom:1px solid var(--roxy-border,#e4e4e7);text-align:left}th{color:var(--roxy-muted,#71717a);font-weight:var(--roxy-weight-bold,600);text-transform:uppercase;font-size:var(--roxy-text-xs,.75rem);letter-spacing:.06em}td.orb{font-variant-numeric:tabular-nums;color:var(--roxy-muted,#71717a)}.lists{gap:var(--roxy-space-md,1rem);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));display:grid}.lists h3{margin:0 0 var(--roxy-space-xs,.25rem) 0;font-size:var(--roxy-text-xs,.75rem);color:var(--roxy-muted,#71717a);text-transform:uppercase;letter-spacing:.06em}.lists ul{padding-left:var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);margin:0}.missing-planets{background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 8%, transparent);border:1px solid var(--roxy-border,#e4e4e7);border-radius:var(--roxy-radius-md,8px);padding:var(--roxy-space-md,1rem);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-sm,.875rem);line-height:1.5}.missing-planets code{font-family:var(--roxy-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace);background:color-mix(in srgb, var(--roxy-fg,#0a0a0a) 6%, transparent);border-radius:4px;padding:0 4px;font-size:.95em}`],P([F({attribute:!1})],S.prototype,"data",2),S=P([U("roxy-synastry-chart")],S);function J(n){return typeof n=="number"?Math.round(n).toString():""}export{S as RoxySynastryChart};
 //# sourceMappingURL=synastry-chart.js.map