@roxyapi/ui 0.2.3 → 0.3.1

package/dist/components/vedic-planets-table.js

@@ -0,0 +1,355 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// packages/ui/src/components/vedic-planets-table.ts
+import { css as css2, html, LitElement, nothing } 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;
+	}
+`;
+
+// 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 formatSignPosition(longitude) {
+  const { sign, degree, minute } = longitudeToSignPosition(longitude);
+  return `${degree}\xB0 ${sign} ${String(minute).padStart(2, "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/vedic-planets-table.ts
+var GRAHA_ORDER = [
+  "Lagna",
+  "Sun",
+  "Moon",
+  "Mars",
+  "Mercury",
+  "Jupiter",
+  "Venus",
+  "Saturn",
+  "Rahu",
+  "Ketu"
+];
+var RoxyVedicPlanetsTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  /** Ordered [name, entry] pairs: GRAHA_ORDER first, then any extras. */
+  orderedRows() {
+    const meta = this.data?.meta ?? {};
+    const seen = /* @__PURE__ */ new Set();
+    const rows = [];
+    for (const name of GRAHA_ORDER) {
+      const entry = meta[name];
+      if (entry) {
+        rows.push([name, entry]);
+        seen.add(name);
+      }
+    }
+    for (const [name, entry] of Object.entries(meta)) {
+      if (!seen.has(name)) rows.push([name, entry]);
+    }
+    return rows;
+  }
+  render() {
+    if (!this.data?.meta)
+      return html`<div class="roxy-empty" role="status">No chart data</div>`;
+    const rows = this.orderedRows();
+    return html`<div class="wrap" aria-label="Vedic planetary positions" tabindex="0">
+			<header class="head">
+				<h2 class="title">Planetary positions</h2>
+			</header>
+			<table role="table">
+				<thead>
+					<tr>
+						<th scope="col">Graha</th>
+						<th scope="col">Rashi</th>
+						<th scope="col">Degree</th>
+						<th scope="col">Nakshatra</th>
+						<th scope="col">Pada</th>
+						<th scope="col">Nak. lord</th>
+						<th scope="col">House</th>
+						<th scope="col">Avastha</th>
+						<th scope="col">Retro</th>
+					</tr>
+				</thead>
+				<tbody>
+					${rows.map(([name, p]) => {
+      const isLagna = (p.graha ?? name) === "Lagna";
+      const glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? "";
+      const signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? "")] ?? "";
+      return html`<tr class=${isLagna ? "lagna" : ""}>
+							<td class="graha">
+								${glyph ? html`<span class="glyph">${glyph}</span>` : nothing}${p.graha ?? name}
+							</td>
+							<td>
+								${signGlyph ? html`<span class="glyph">${signGlyph}</span>` : nothing}${p.rashi ?? ""}
+							</td>
+							<td class="num">
+								${typeof p.longitude === "number" ? formatSignPosition(p.longitude) : ""}
+							</td>
+							<td>${p.nakshatra?.name ?? ""}</td>
+							<td class="num">${p.nakshatra?.pada ?? ""}</td>
+							<td>${p.nakshatra?.lord ?? ""}</td>
+							<td class="num">${typeof p.house === "number" ? p.house : ""}</td>
+							<td>${p.awastha ?? ""}</td>
+							<td>${p.isRetrograde ? html`<span class="retro">R</span>` : nothing}</td>
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
+};
+RoxyVedicPlanetsTable.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				overflow: auto;
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				padding: var(--roxy-space-md, 1rem);
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			.title {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				min-width: 620px;
+			}
+			thead {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);
+			}
+			th,
+			td {
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				text-align: left;
+				white-space: nowrap;
+			}
+			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.04em;
+			}
+			tbody tr {
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+			}
+			tbody tr.lagna {
+				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);
+			}
+			td.graha {
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.glyph {
+				margin-right: 0.4em;
+				color: var(--roxy-muted, #71717a);
+			}
+			/* On the tinted Lagna row the muted glyph drops below the WCAG AA
+			   contrast floor, so use the accent foreground there instead. */
+			tbody tr.lagna .glyph {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.retro {
+				color: var(--roxy-warning-fg, #9a3412);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.num {
+				font-variant-numeric: tabular-nums;
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyVedicPlanetsTable.prototype, "data", 2);
+RoxyVedicPlanetsTable = __decorateClass([
+  customElement("roxy-vedic-planets-table")
+], RoxyVedicPlanetsTable);
+export {
+  RoxyVedicPlanetsTable
+};
+//# sourceMappingURL=vedic-planets-table.js.map

package/dist/components/vedic-planets-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/vedic-planets-table.ts", "../../src/tokens/index.ts", "../../src/utils/base-styles.ts", "../../src/utils/degree.ts", "../../src/utils/string.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';\nimport type { BirthChartResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatSignPosition } from '../utils/degree.js';\nimport { capitalize } from '../utils/string.js';\n\n/**\n * Fixed display order: Lagna pinned first as the chart frame, then the nine\n * grahas in classical sequence. Any graha not in this list is appended.\n */\nconst GRAHA_ORDER = [\n\t'Lagna',\n\t'Sun',\n\t'Moon',\n\t'Mars',\n\t'Mercury',\n\t'Jupiter',\n\t'Venus',\n\t'Saturn',\n\t'Rahu',\n\t'Ketu',\n];\n\ntype MetaEntry = BirthChartResponse['meta'][string];\n\n/**\n * Vedic planetary positions table. Renders /vedic-astrology/birth-chart `meta`\n * as the full reference-grade positions grid a practitioner reads alongside\n * the kundli wheel: graha, rashi, exact degree, nakshatra and pada, nakshatra\n * lord, bhava (house), Baladi avastha, and retrograde.\n */\n@customElement('roxy-vedic-planets-table')\nexport class RoxyVedicPlanetsTable extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\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\tbackground: var(--roxy-bg, #fff);\n\t\t\t\toverflow: auto;\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t}\n\t\t\t.head {\n\t\t\t\tpadding: var(--roxy-space-md, 1rem);\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t}\n\t\t\t.title {\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}\n\t\t\ttable {\n\t\t\t\twidth: 100%;\n\t\t\t\tborder-collapse: collapse;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tmin-width: 620px;\n\t\t\t}\n\t\t\tthead {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 20%, transparent);\n\t\t\t}\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\ttext-align: left;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\t\t\tth {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tletter-spacing: 0.04em;\n\t\t\t}\n\t\t\ttbody tr {\n\t\t\t\tborder-top: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t}\n\t\t\ttbody tr.lagna {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-accent, #f59e0b) 10%, transparent);\n\t\t\t}\n\t\t\ttd.graha {\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t\t.glyph {\n\t\t\t\tmargin-right: 0.4em;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\t\t\t/* On the tinted Lagna row the muted glyph drops below the WCAG AA\n\t\t\t   contrast floor, so use the accent foreground there instead. */\n\t\t\ttbody tr.lagna .glyph {\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t}\n\t\t\t.retro {\n\t\t\t\tcolor: var(--roxy-warning-fg, #9a3412);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.num {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: BirthChartResponse | null = null;\n\n\t/** Ordered [name, entry] pairs: GRAHA_ORDER first, then any extras. */\n\tprivate orderedRows(): Array<[string, MetaEntry]> {\n\t\tconst meta = this.data?.meta ?? {};\n\t\tconst seen = new Set<string>();\n\t\tconst rows: Array<[string, MetaEntry]> = [];\n\t\tfor (const name of GRAHA_ORDER) {\n\t\t\tconst entry = meta[name];\n\t\t\tif (entry) {\n\t\t\t\trows.push([name, entry]);\n\t\t\t\tseen.add(name);\n\t\t\t}\n\t\t}\n\t\tfor (const [name, entry] of Object.entries(meta)) {\n\t\t\tif (!seen.has(name)) rows.push([name, entry]);\n\t\t}\n\t\treturn rows;\n\t}\n\n\trender() {\n\t\tif (!this.data?.meta)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No chart data</div>`;\n\t\tconst rows = this.orderedRows();\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Vedic planetary positions\" tabindex=\"0\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Planetary positions</h2>\n\t\t\t</header>\n\t\t\t<table role=\"table\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th scope=\"col\">Graha</th>\n\t\t\t\t\t\t<th scope=\"col\">Rashi</th>\n\t\t\t\t\t\t<th scope=\"col\">Degree</th>\n\t\t\t\t\t\t<th scope=\"col\">Nakshatra</th>\n\t\t\t\t\t\t<th scope=\"col\">Pada</th>\n\t\t\t\t\t\t<th scope=\"col\">Nak. lord</th>\n\t\t\t\t\t\t<th scope=\"col\">House</th>\n\t\t\t\t\t\t<th scope=\"col\">Avastha</th>\n\t\t\t\t\t\t<th scope=\"col\">Retro</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t${rows.map(([name, p]) => {\n\t\t\t\t\t\tconst isLagna = (p.graha ?? name) === 'Lagna';\n\t\t\t\t\t\tconst glyph = PLANET_GLYPH[capitalize(p.graha ?? name)] ?? '';\n\t\t\t\t\t\tconst signGlyph = SIGN_GLYPH[capitalize(p.rashi ?? '')] ?? '';\n\t\t\t\t\t\treturn html`<tr class=${isLagna ? 'lagna' : ''}>\n\t\t\t\t\t\t\t<td class=\"graha\">\n\t\t\t\t\t\t\t\t${glyph ? html`<span class=\"glyph\">${glyph}</span>` : nothing}${p.graha ?? name}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td>\n\t\t\t\t\t\t\t\t${signGlyph ? html`<span class=\"glyph\">${signGlyph}</span>` : nothing}${p.rashi ?? ''}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td class=\"num\">\n\t\t\t\t\t\t\t\t${typeof p.longitude === 'number' ? formatSignPosition(p.longitude) : ''}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t<td>${p.nakshatra?.name ?? ''}</td>\n\t\t\t\t\t\t\t<td class=\"num\">${p.nakshatra?.pada ?? ''}</td>\n\t\t\t\t\t\t\t<td>${p.nakshatra?.lord ?? ''}</td>\n\t\t\t\t\t\t\t<td class=\"num\">${typeof p.house === 'number' ? p.house : ''}</td>\n\t\t\t\t\t\t\t<td>${p.awastha ?? ''}</td>\n\t\t\t\t\t\t\t<td>${p.isRetrograde ? html`<span class=\"retro\">R</span>` : nothing}</td>\n\t\t\t\t\t\t</tr>`;\n\t\t\t\t\t})}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-vedic-planets-table': RoxyVedicPlanetsTable;\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\t'North node': '\u260A',\n\t'South node': '\u260B',\n\tChiron: '\u26B7',\n\tLilith: '\u26B8',\n\t'Black moon lilith': '\u26B8',\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/**\n * Lowercase rashi keys in canonical zodiac order. Derived from `SIGNS_ORDER`\n * so the two stay in lockstep. The /vedic-astrology/birth-chart response\n * carries planet buckets keyed by these names.\n */\nexport const RASHI_KEYS = SIGNS_ORDER.map((s) =>\n\ts.toLowerCase(),\n) as readonly Lowercase<(typeof SIGNS_ORDER)[number]>[];\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", "/**\n * Math helpers for converting raw ecliptic longitude decimals into the\n * sign / degree / minute / second triplet used across chart components.\n */\n\nimport { SIGNS_ORDER } from '../tokens/index.js';\n\nexport interface SignPosition {\n\tsign: string;\n\tsignIndex: number;\n\tdegree: number;\n\tminute: number;\n\tsecond: number;\n}\n\n/**\n * Wrap longitude into [0, 360) so negative or out-of-range values still\n * resolve to a real sign. Robust to wonky upstream data.\n */\nexport function normalizeLongitude(lon: number): number {\n\tconst wrapped = lon % 360;\n\treturn wrapped < 0 ? wrapped + 360 : wrapped;\n}\n\n/**\n * Convert decimal ecliptic longitude (0-360) into sign/degree/minute/second.\n * Used by every chart wheel and aspect table.\n */\nexport function longitudeToSignPosition(longitude: number): SignPosition {\n\tconst lon = normalizeLongitude(longitude);\n\tconst signIndex = Math.floor(lon / 30) % 12;\n\tconst within = lon % 30;\n\tconst degree = Math.floor(within);\n\tconst minuteFloat = (within - degree) * 60;\n\tconst minute = Math.floor(minuteFloat);\n\tconst second = Math.round((minuteFloat - minute) * 60);\n\treturn {\n\t\tsign: SIGNS_ORDER[signIndex] ?? 'Aries',\n\t\tsignIndex,\n\t\tdegree,\n\t\tminute,\n\t\tsecond,\n\t};\n}\n\n/** Compact display string like \"12\u00B0 Leo 34'\". Used in chart labels. */\nexport function formatSignPosition(longitude: number): string {\n\tconst { sign, degree, minute } = longitudeToSignPosition(longitude);\n\treturn `${degree}\u00B0 ${sign} ${String(minute).padStart(2, '0')}'`;\n}\n\n/**\n * The point diametrically opposite a longitude (e.g. Descendant from\n * Ascendant, IC from MC). Exact derivation, always 180 degrees away.\n */\nexport function oppositePoint(longitude: number): number {\n\treturn normalizeLongitude(longitude + 180);\n}\n\n/**\n * Midpoint of the forward arc from `start` to `end` (both ecliptic\n * longitudes). Handles the 360/0 wrap, so a house spanning 350 to 20 degrees\n * yields a midpoint of 5, not 185. Used to place house numbers between two\n * cusps regardless of how unequal the house is.\n */\nexport function arcMidpoint(start: number, end: number): number {\n\tconst s = normalizeLongitude(start);\n\tlet span = normalizeLongitude(end) - s;\n\tif (span < 0) span += 360;\n\treturn normalizeLongitude(s + span / 2);\n}\n\n/** Polar to cartesian for SVG wheel positioning. Angle in degrees, 0 at 3 o'clock. */\nexport function polarToCartesian(\n\tcx: number,\n\tcy: number,\n\tradius: number,\n\tangleDeg: number,\n): { x: number; y: number } {\n\tconst angleRad = (angleDeg * Math.PI) / 180;\n\treturn {\n\t\tx: cx + radius * Math.cos(angleRad),\n\t\ty: cy + radius * Math.sin(angleRad),\n\t};\n}\n", "/**\n * Shared string helpers used across components. Single source of truth so the\n * same formatting rules apply to every key/label/title that surfaces in the\n * shadow tree.\n *\n *  - `capitalize`: title-cases the first character, lowercases the rest. Used\n *    when matching API-supplied planet/sign names against the glyph maps in\n *    `tokens/index.ts`, which use canonical TitleCase keys.\n *  - `humanize`: turns an API key (`birth_date`, `birthDate`, `mahadasha-end`)\n *    into a label suitable for display (\"Birth date\", \"Mahadasha end\").\n */\n\nexport function capitalize(s: string): string {\n\tif (!s) return '';\n\treturn s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();\n}\n\nexport function humanize(s: string): string {\n\treturn s\n\t\t.replace(/[_-]+/g, ' ')\n\t\t.replace(/([a-z])([A-Z])/g, '$1 $2')\n\t\t.replace(/^\\w/, (c) => c.toUpperCase());\n}\n"],
+  "mappings": "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",
+  "names": ["css", "css"]
+}

package/dist/components/western-planets-table.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import type { NatalChartResponse } from '../types/index.js';
+/**
+ * Western planetary positions table. Renders a /astrology/natal-chart response
+ * as the reference-grade positions grid astrologers read alongside the wheel:
+ * every body with its sign, exact degree, house, and daily motion, followed by
+ * the four chart points (Ascendant, Midheaven, Part of Fortune, Vertex).
+ */
+export declare class RoxyWesternPlanetsTable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: NatalChartResponse | null;
+    /** Build the ordered row list: the planets array, then the four chart points. */
+    private rows;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-western-planets-table': RoxyWesternPlanetsTable;
+    }
+}
+//# sourceMappingURL=western-planets-table.d.ts.map

package/dist/components/western-planets-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"western-planets-table.d.ts","sourceRoot":"","sources":["../../src/components/western-planets-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAkB5D;;;;;GAKG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACtD,MAAM,CAAC,MAAM,4BA+DX;IAGF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAEvC,iFAAiF;IACjF,OAAO,CAAC,IAAI;IA6BZ,MAAM;CA8CN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,4BAA4B,EAAE,uBAAuB,CAAC;KACtD;CACD"}