@roxyapi/ui 0.0.1 → 0.1.2

package/dist/components/moon-phase.js

@@ -0,0 +1,284 @@
+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/moon-phase.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/tokens/index.ts
+var MOON_PHASE_EMOJI = {
+  "new moon": "\u{1F311}",
+  "waxing crescent": "\u{1F312}",
+  "first quarter": "\u{1F313}",
+  "waxing gibbous": "\u{1F314}",
+  "full moon": "\u{1F315}",
+  "waning gibbous": "\u{1F316}",
+  "last quarter": "\u{1F317}",
+  "waning crescent": "\u{1F318}"
+};
+
+// 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;
+	}
+`;
+
+// packages/ui/src/components/moon-phase.ts
+var RoxyMoonPhase = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+    this.mode = "current";
+  }
+  render() {
+    const d = this.data;
+    if (!d)
+      return html`<div class="roxy-empty" role="status">No moon phase data</div>`;
+    const list = d.phases ?? d.upcoming ?? [];
+    if (this.mode !== "current" && list.length > 0) {
+      return html`<article
+				class="card"
+				aria-label="Moon phase calendar"
+			>
+				<h2 class="label">${d.month ?? "Moon phases"} ${d.year ?? ""}</h2>
+				<div class="list" role="list">
+					${list.map((phase) => this.renderListItem(phase))}
+				</div>
+			</article>`;
+    }
+    return this.renderSingle(d);
+  }
+  renderSingle(d) {
+    const emoji = phaseEmoji(d.phase);
+    return html`<article class="card" aria-label="Current moon phase">
+			<div class="hero">
+				<span class="emoji" aria-hidden="true">${emoji}</span>
+				<div>
+					<h2 class="label">${d.phase ?? "Moon"}</h2>
+					${d.date ? html`<div class="date">${d.date}</div>` : nothing}
+				</div>
+			</div>
+			<div class="stats">
+				${typeof d.illumination === "number" ? html`<div>
+							<span>Illumination</span>
+							<strong>${(d.illumination * 100).toFixed(0)}%</strong>
+						</div>` : nothing}
+				${typeof d.age === "number" ? html`<div>
+							<span>Age</span>
+							<strong>${d.age.toFixed(1)} days</strong>
+						</div>` : nothing}
+				${d.sign ? html`<div>
+							<span>Sign</span>
+							<strong>${d.sign}</strong>
+						</div>` : nothing}
+				${typeof d.distance === "number" ? html`<div>
+							<span>Distance</span>
+							<strong>${(d.distance / 1e3).toFixed(0)}k km</strong>
+						</div>` : nothing}
+			</div>
+			${d.meaning?.description ? html`<p class="meaning">${d.meaning.description}</p>` : nothing}
+			${d.meaning?.keywords?.length ? html`<div class="keywords">
+						${d.meaning.keywords.map((k) => html`<span>${k}</span>`)}
+					</div>` : nothing}
+		</article>`;
+  }
+  renderListItem(p) {
+    const emoji = phaseEmoji(p.phase);
+    return html`<div class="list-item" role="listitem">
+			<span aria-hidden="true">${emoji}</span>
+			<span>${p.phase}</span>
+			<span>${p.date ?? ""}</span>
+		</div>`;
+  }
+};
+RoxyMoonPhase.styles = [
+  baseStyles,
+  css2`
+			.card {
+				background: var(--roxy-bg, #fff);
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-lg, 1.5rem);
+				box-shadow: var(--roxy-shadow-sm);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.hero {
+				display: flex;
+				align-items: center;
+				gap: var(--roxy-space-md, 1rem);
+			}
+			.emoji {
+				font-size: 3rem;
+				line-height: 1;
+			}
+			.label {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				text-transform: capitalize;
+			}
+			.date {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+
+			.stats {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-secondary, #475569);
+			}
+			.stats div span:first-child {
+				display: block;
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
+			.stats strong {
+				color: var(--roxy-fg, #0a0a0a);
+				font-variant-numeric: tabular-nums;
+			}
+
+			.meaning {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.keywords {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-xs, 0.25rem);
+				margin-top: var(--roxy-space-sm, 0.5rem);
+			}
+			.keywords span {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
+				padding: 2px 8px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+			}
+
+			.list {
+				display: grid;
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.list-item {
+				display: grid;
+				grid-template-columns: 2.5rem 1fr auto;
+				gap: var(--roxy-space-sm, 0.5rem);
+				align-items: center;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+				padding: var(--roxy-space-sm, 0.5rem) 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.list-item:last-child {
+				border-bottom: none;
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyMoonPhase.prototype, "data", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RoxyMoonPhase.prototype, "mode", 2);
+RoxyMoonPhase = __decorateClass([
+  customElement("roxy-moon-phase")
+], RoxyMoonPhase);
+function phaseEmoji(phase) {
+  if (!phase) return "\u{1F319}";
+  return MOON_PHASE_EMOJI[phase.toLowerCase()] ?? "\u{1F319}";
+}
+export {
+  RoxyMoonPhase
+};
+//# sourceMappingURL=moon-phase.js.map

package/dist/components/moon-phase.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/moon-phase.ts", "../../src/tokens/index.ts", "../../src/utils/base-styles.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MOON_PHASE_EMOJI } from '../tokens/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface MoonPhaseData {\n\tdate?: string;\n\tphase?: string;\n\tillumination?: number;\n\tage?: number;\n\tsign?: string;\n\tdegree?: number;\n\tdistance?: number;\n\tmeaning?: {\n\t\tname?: string;\n\t\tsymbol?: string;\n\t\tdescription?: string;\n\t\tkeywords?: string[];\n\t};\n\tmonth?: string;\n\tyear?: number;\n\tphases?: Array<MoonPhaseData>;\n\tupcoming?: Array<MoonPhaseData>;\n}\n\n/**\n * Moon phase card. Renders /astrology/moon-phase/{current,upcoming,calendar/...}.\n */\n@customElement('roxy-moon-phase')\nexport class RoxyMoonPhase extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\n\t\t\t\tborder: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\n\t\t\t.hero {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.emoji {\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\t\t\t.label {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-lg, 1.125rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\t.date {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\t.stats {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t}\n\t\t\t.stats div span:first-child {\n\t\t\t\tdisplay: block;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.stats strong {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\n\t\t\t.meaning {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t\t.keywords {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t\tmargin-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.keywords span {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);\n\t\t\t\tpadding: 2px 8px;\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t}\n\n\t\t\t.list {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\t\t\t.list-item {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 2.5rem 1fr auto;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.list-item:last-child {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: MoonPhaseData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'current' | 'upcoming' | 'calendar' = 'current';\n\n\trender() {\n\t\tconst d = this.data;\n\t\tif (!d)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No moon phase data</div>`;\n\t\tconst list = d.phases ?? d.upcoming ?? [];\n\t\tif (this.mode !== 'current' && list.length > 0) {\n\t\t\treturn html`<article\n\t\t\t\tclass=\"card\"\n\t\t\t\taria-label=\"Moon phase calendar\"\n\t\t\t>\n\t\t\t\t<h2 class=\"label\">${d.month ?? 'Moon phases'} ${d.year ?? ''}</h2>\n\t\t\t\t<div class=\"list\" role=\"list\">\n\t\t\t\t\t${list.map((phase) => this.renderListItem(phase))}\n\t\t\t\t</div>\n\t\t\t</article>`;\n\t\t}\n\t\treturn this.renderSingle(d);\n\t}\n\n\tprivate renderSingle(d: MoonPhaseData) {\n\t\tconst emoji = phaseEmoji(d.phase);\n\t\treturn html`<article class=\"card\" aria-label=\"Current moon phase\">\n\t\t\t<div class=\"hero\">\n\t\t\t\t<span class=\"emoji\" aria-hidden=\"true\">${emoji}</span>\n\t\t\t\t<div>\n\t\t\t\t\t<h2 class=\"label\">${d.phase ?? 'Moon'}</h2>\n\t\t\t\t\t${d.date ? html`<div class=\"date\">${d.date}</div>` : nothing}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"stats\">\n\t\t\t\t${\n\t\t\t\t\ttypeof d.illumination === 'number'\n\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t<span>Illumination</span>\n\t\t\t\t\t\t\t<strong>${(d.illumination * 100).toFixed(0)}%</strong>\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\ttypeof d.age === 'number'\n\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t<span>Age</span>\n\t\t\t\t\t\t\t<strong>${d.age.toFixed(1)} days</strong>\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\td.sign\n\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t<span>Sign</span>\n\t\t\t\t\t\t\t<strong>${d.sign}</strong>\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\ttypeof d.distance === 'number'\n\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t<span>Distance</span>\n\t\t\t\t\t\t\t<strong>${(d.distance / 1000).toFixed(0)}k km</strong>\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t${\n\t\t\t\td.meaning?.description\n\t\t\t\t\t? html`<p class=\"meaning\">${d.meaning.description}</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${\n\t\t\t\td.meaning?.keywords?.length\n\t\t\t\t\t? html`<div class=\"keywords\">\n\t\t\t\t\t\t${d.meaning.keywords.map((k) => html`<span>${k}</span>`)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</article>`;\n\t}\n\n\tprivate renderListItem(p: MoonPhaseData) {\n\t\tconst emoji = phaseEmoji(p.phase);\n\t\treturn html`<div class=\"list-item\" role=\"listitem\">\n\t\t\t<span aria-hidden=\"true\">${emoji}</span>\n\t\t\t<span>${p.phase}</span>\n\t\t\t<span>${p.date ?? ''}</span>\n\t\t</div>`;\n\t}\n}\n\nfunction phaseEmoji(phase: string | undefined): string {\n\tif (!phase) return '\uD83C\uDF19';\n\treturn MOON_PHASE_EMOJI[phase.toLowerCase()] ?? '\uD83C\uDF19';\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-moon-phase': RoxyMoonPhase;\n\t}\n}\n", "/**\n * Symbol constants used across components. Single source of truth so chart\n * wheels, card headers, hexagram displays, and panchang tables stay visually\n * consistent.\n */\n\nexport const PLANET_GLYPH: Record<string, string> = {\n\tSun: '\u2609',\n\tMoon: '\u263D',\n\tMercury: '\u263F',\n\tVenus: '\u2640',\n\tEarth: '\u2641',\n\tMars: '\u2642',\n\tJupiter: '\u2643',\n\tSaturn: '\u2644',\n\tUranus: '\u2645',\n\tNeptune: '\u2646',\n\tPluto: '\u2647',\n\tRahu: '\u260A',\n\tKetu: '\u260B',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n\tNorthNode: '\u260A',\n\tSouthNode: '\u260B',\n};\n\nexport const PLANET_ABBR: Record<string, string> = {\n\tSun: 'Su',\n\tMoon: 'Mo',\n\tMercury: 'Me',\n\tVenus: 'Ve',\n\tMars: 'Ma',\n\tJupiter: 'Ju',\n\tSaturn: 'Sa',\n\tUranus: 'Ur',\n\tNeptune: 'Ne',\n\tPluto: 'Pl',\n\tRahu: 'Ra',\n\tKetu: 'Ke',\n\tAscendant: 'Asc',\n\tLagna: 'La',\n};\n\nexport const SIGN_GLYPH: Record<string, string> = {\n\tAries: '\u2648',\n\tTaurus: '\u2649',\n\tGemini: '\u264A',\n\tCancer: '\u264B',\n\tLeo: '\u264C',\n\tVirgo: '\u264D',\n\tLibra: '\u264E',\n\tScorpio: '\u264F',\n\tSagittarius: '\u2650',\n\tCapricorn: '\u2651',\n\tAquarius: '\u2652',\n\tPisces: '\u2653',\n};\n\nexport const SIGN_ABBR: Record<string, string> = {\n\tAries: 'Ar',\n\tTaurus: 'Ta',\n\tGemini: 'Ge',\n\tCancer: 'Cn',\n\tLeo: 'Le',\n\tVirgo: 'Vi',\n\tLibra: 'Li',\n\tScorpio: 'Sc',\n\tSagittarius: 'Sg',\n\tCapricorn: 'Cp',\n\tAquarius: 'Aq',\n\tPisces: 'Pi',\n};\n\nexport const SIGNS_ORDER = [\n\t'Aries',\n\t'Taurus',\n\t'Gemini',\n\t'Cancer',\n\t'Leo',\n\t'Virgo',\n\t'Libra',\n\t'Scorpio',\n\t'Sagittarius',\n\t'Capricorn',\n\t'Aquarius',\n\t'Pisces',\n] as const;\n\n/** Aspect symbols. Used by synastry and natal chart aspect tables. */\nexport const ASPECT_SYMBOL: Record<string, string> = {\n\tconjunction: '\u260C',\n\topposition: '\u260D',\n\ttrine: '\u25B3',\n\tsquare: '\u25A1',\n\tsextile: '\u2731',\n\tquincunx: '\u22BB',\n\tsemisextile: '\u22BC',\n};\n\n/** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */\nexport const TRIGRAM_GLYPH: Record<string, string> = {\n\theaven: '\u2630',\n\tlake: '\u2631',\n\tfire: '\u2632',\n\tthunder: '\u2633',\n\twind: '\u2634',\n\twater: '\u2635',\n\tmountain: '\u2636',\n\tearth: '\u2637',\n\tHeaven: '\u2630',\n\tLake: '\u2631',\n\tFire: '\u2632',\n\tThunder: '\u2633',\n\tWind: '\u2634',\n\tWater: '\u2635',\n\tMountain: '\u2636',\n\tEarth: '\u2637',\n};\n\n/** Moon phase emoji set. Used by moon phase card. */\nexport const MOON_PHASE_EMOJI: Record<string, string> = {\n\t'new moon': '\uD83C\uDF11',\n\t'waxing crescent': '\uD83C\uDF12',\n\t'first quarter': '\uD83C\uDF13',\n\t'waxing gibbous': '\uD83C\uDF14',\n\t'full moon': '\uD83C\uDF15',\n\t'waning gibbous': '\uD83C\uDF16',\n\t'last quarter': '\uD83C\uDF17',\n\t'waning crescent': '\uD83C\uDF18',\n};\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;AAAA,SAAS,OAAAA,MAAK,MAAM,YAAY,eAAe;AAC/C,SAAS,eAAe,gBAAgB;;;ACuHjC,IAAM,mBAA2C;AAAA,EACvD,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,mBAAmB;AACpB;;;ACjIA,SAAS,WAAW;AAMb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AFuBnB,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC;AAAA;AAyFN,gBAA6B;AAG7B,gBAA4C;AAAA;AAAA,EAE5C,SAAS;AACR,UAAM,IAAI,KAAK;AACf,QAAI,CAAC;AACJ,aAAO;AACR,UAAM,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC;AACxC,QAAI,KAAK,SAAS,aAAa,KAAK,SAAS,GAAG;AAC/C,aAAO;AAAA;AAAA;AAAA;AAAA,wBAIc,EAAE,SAAS,aAAa,IAAI,EAAE,QAAQ,EAAE;AAAA;AAAA,OAEzD,KAAK,IAAI,CAAC,UAAU,KAAK,eAAe,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA,IAGpD;AACA,WAAO,KAAK,aAAa,CAAC;AAAA,EAC3B;AAAA,EAEQ,aAAa,GAAkB;AACtC,UAAM,QAAQ,WAAW,EAAE,KAAK;AAChC,WAAO;AAAA;AAAA,6CAEoC,KAAK;AAAA;AAAA,yBAEzB,EAAE,SAAS,MAAM;AAAA,OACnC,EAAE,OAAO,yBAAyB,EAAE,IAAI,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA,MAK5D,OAAO,EAAE,iBAAiB,WACvB;AAAA;AAAA,kBAEU,EAAE,eAAe,KAAK,QAAQ,CAAC,CAAC;AAAA,gBAE1C,OACJ;AAAA,MAEC,OAAO,EAAE,QAAQ,WACd;AAAA;AAAA,iBAES,EAAE,IAAI,QAAQ,CAAC,CAAC;AAAA,gBAEzB,OACJ;AAAA,MAEC,EAAE,OACC;AAAA;AAAA,iBAES,EAAE,IAAI;AAAA,gBAEf,OACJ;AAAA,MAEC,OAAO,EAAE,aAAa,WACnB;AAAA;AAAA,kBAEU,EAAE,WAAW,KAAM,QAAQ,CAAC,CAAC;AAAA,gBAEvC,OACJ;AAAA;AAAA,KAGA,EAAE,SAAS,cACR,0BAA0B,EAAE,QAAQ,WAAW,SAC/C,OACJ;AAAA,KAEC,EAAE,SAAS,UAAU,SAClB;AAAA,QACC,EAAE,QAAQ,SAAS,IAAI,CAAC,MAAM,aAAa,CAAC,SAAS,CAAC;AAAA,eAEvD,OACJ;AAAA;AAAA,EAEF;AAAA,EAEQ,eAAe,GAAkB;AACxC,UAAM,QAAQ,WAAW,EAAE,KAAK;AAChC,WAAO;AAAA,8BACqB,KAAK;AAAA,WACxB,EAAE,KAAK;AAAA,WACP,EAAE,QAAQ,EAAE;AAAA;AAAA,EAEtB;AACD;AApLa,cACL,SAAS;AAAA,EACf;AAAA,EACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmFD;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAxFlB,cAyFZ;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3F7B,cA4FZ;AA5FY,gBAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;AAsLb,SAAS,WAAW,OAAmC;AACtD,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,iBAAiB,MAAM,YAAY,CAAC,KAAK;AACjD;",
+  "names": ["css", "css"]
+}

package/dist/components/natal-chart.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+import { longitudeToSignPosition } from '../utils/degree.js';
+interface PlanetEntry {
+    name?: string;
+    planet?: string;
+    longitude?: number;
+    degree?: number;
+    sign?: string;
+    house?: number;
+    retrograde?: boolean;
+    isRetrograde?: boolean;
+}
+interface AspectEntry {
+    planet1?: string;
+    planet2?: string;
+    aspect?: string;
+    orb?: number;
+}
+interface HouseEntry {
+    house?: number;
+    number?: number;
+    cusp?: number;
+    sign?: string;
+}
+interface NatalChartData {
+    planets?: PlanetEntry[] | Record<string, PlanetEntry>;
+    houses?: HouseEntry[];
+    aspects?: AspectEntry[];
+    ascendant?: number | {
+        longitude?: number;
+        sign?: string;
+    };
+    midheaven?: number | {
+        longitude?: number;
+        sign?: string;
+    };
+    birthDetails?: {
+        date?: string;
+        time?: string;
+        location?: string;
+    };
+}
+/**
+ * Western natal chart wheel. Renders the 12 zodiac signs, 12 houses, planet
+ * markers, and aspect lines from a /astrology/natal-chart response.
+ */
+export declare class RoxyNatalChart extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: NatalChartData | null;
+    houseSystem: 'placidus' | 'whole-sign' | 'equal' | 'koch';
+    private getPlanets;
+    render(): import("lit").TemplateResult<1>;
+    private renderSpokes;
+    private renderSigns;
+    private renderHouseNumbers;
+    private renderPlanets;
+    private renderAspects;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-natal-chart': RoxyNatalChart;
+    }
+}
+export { longitudeToSignPosition };
+//# sourceMappingURL=natal-chart.d.ts.map

package/dist/components/natal-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"natal-chart.d.ts","sourceRoot":"","sources":["../../src/components/natal-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,uBAAuB,EAAoB,MAAM,oBAAoB,CAAC;AAE/E,UAAU,WAAW;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,WAAW;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,UAAU;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,YAAY,CAAC,EAAE;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACF;AASD;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BAmEX;IAGF,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IAGnC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAc;IAEvE,OAAO,CAAC,UAAU;IAOlB,MAAM;IAiEN,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,aAAa;CAsBrB;AAOD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD;AAGD,OAAO,EAAE,uBAAuB,EAAE,CAAC"}