@roxyapi/ui 0.2.3 → 0.3.0

package/dist/components/nakshatra-card.js

@@ -0,0 +1,231 @@
+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/nakshatra-card.ts
+import { css as css2, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// packages/ui/src/utils/base-styles.ts
+import { css } from "lit";
+var baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;
+
+// packages/ui/src/components/nakshatra-card.ts
+var RoxyNakshatraCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  render() {
+    if (!this.data)
+      return html`<div class="roxy-empty" role="status">No nakshatra data</div>`;
+    const n = this.data;
+    const remedies = n.remedies;
+    return html`<article class="wrap" aria-label=${`Nakshatra ${n.name}`}>
+			<header class="head">
+				<h2 class="name">${n.name}</h2>
+				${typeof n.number === "number" ? html`<span class="number">Nakshatra ${n.number} of 27</span>` : nothing}
+				${n.range ? html`<span class="range">${n.range}</span>` : nothing}
+			</header>
+
+			<dl class="facts">
+				${n.lord ? html`<div class="fact"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing}
+				${n.deity ? html`<div class="fact"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing}
+				${n.symbol ? html`<div class="fact"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing}
+			</dl>
+
+			${n.characteristics ? html`<div class="section">
+						<h3>Characteristics</h3>
+						<p>${n.characteristics}</p>
+					</div>` : nothing}
+
+			${remedies ? html`<div class="section">
+						<h3>Remedies</h3>
+						<div class="remedies">
+							${remedies.mantras ? html`<div class="remedy"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing}
+							${remedies.gemstones ? html`<div class="remedy"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing}
+							${remedies.rituals ? html`<div class="remedy"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing}
+						</div>
+					</div>` : nothing}
+		</article>`;
+  }
+};
+RoxyNakshatraCard.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				background: var(--roxy-bg, #fff);
+				padding: var(--roxy-space-md, 1rem);
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+				box-shadow: var(--roxy-shadow-sm);
+			}
+			.head {
+				display: flex;
+				align-items: baseline;
+				gap: var(--roxy-space-sm, 0.5rem);
+				flex-wrap: wrap;
+			}
+			.name {
+				margin: 0;
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.number {
+				color: var(--roxy-accent-fg, #b45309);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.range {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.facts {
+				display: grid;
+				grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+				gap: var(--roxy-space-sm, 0.5rem);
+			}
+			.fact {
+				display: grid;
+				gap: 2px;
+			}
+			.fact dt {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.fact dd {
+				margin: 0;
+				color: var(--roxy-fg, #0a0a0a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+			}
+			.section h3 {
+				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-muted, #71717a);
+				text-transform: uppercase;
+				letter-spacing: 0.05em;
+			}
+			.section p {
+				margin: 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+				line-height: 1.5;
+			}
+			.remedies {
+				display: grid;
+				gap: var(--roxy-space-xs, 0.25rem);
+			}
+			.remedy {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-fg, #0a0a0a);
+			}
+			.remedy strong {
+				color: var(--roxy-muted, #71717a);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyNakshatraCard.prototype, "data", 2);
+RoxyNakshatraCard = __decorateClass([
+  customElement("roxy-nakshatra-card")
+], RoxyNakshatraCard);
+export {
+  RoxyNakshatraCard
+};
+//# sourceMappingURL=nakshatra-card.js.map

package/dist/components/nakshatra-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nakshatra-card.ts", "../../src/utils/base-styles.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { NakshatraResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\n/**\n * Nakshatra reference card. Renders /vedic-astrology/nakshatras/{id}: the\n * lunar mansion number, longitude range, ruling planet, presiding deity,\n * symbol, native characteristics, and traditional remedies.\n */\n@customElement('roxy-nakshatra-card')\nexport class RoxyNakshatraCard 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\tpadding: var(--roxy-space-md, 1rem);\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\n\t\t\t}\n\t\t\t.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\t\t\t.name {\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\t.number {\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.range {\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\t\t\t.facts {\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-sm, 0.5rem);\n\t\t\t}\n\t\t\t.fact {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: 2px;\n\t\t\t}\n\t\t\t.fact dt {\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.05em;\n\t\t\t}\n\t\t\t.fact dd {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.section h3 {\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.05em;\n\t\t\t}\n\t\t\t.section p {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tline-height: 1.5;\n\t\t\t}\n\t\t\t.remedies {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.remedy {\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t\t.remedy strong {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: NakshatraResponse | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No nakshatra data</div>`;\n\t\tconst n = this.data;\n\t\tconst remedies = n.remedies;\n\n\t\treturn html`<article class=\"wrap\" aria-label=${`Nakshatra ${n.name}`}>\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"name\">${n.name}</h2>\n\t\t\t\t${\n\t\t\t\t\ttypeof n.number === 'number'\n\t\t\t\t\t\t? html`<span class=\"number\">Nakshatra ${n.number} of 27</span>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t\t${n.range ? html`<span class=\"range\">${n.range}</span>` : nothing}\n\t\t\t</header>\n\n\t\t\t<dl class=\"facts\">\n\t\t\t\t${n.lord ? html`<div class=\"fact\"><dt>Lord</dt><dd>${n.lord}</dd></div>` : nothing}\n\t\t\t\t${n.deity ? html`<div class=\"fact\"><dt>Deity</dt><dd>${n.deity}</dd></div>` : nothing}\n\t\t\t\t${n.symbol ? html`<div class=\"fact\"><dt>Symbol</dt><dd>${n.symbol}</dd></div>` : nothing}\n\t\t\t</dl>\n\n\t\t\t${\n\t\t\t\tn.characteristics\n\t\t\t\t\t? html`<div class=\"section\">\n\t\t\t\t\t\t<h3>Characteristics</h3>\n\t\t\t\t\t\t<p>${n.characteristics}</p>\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\n\t\t\t${\n\t\t\t\tremedies\n\t\t\t\t\t? html`<div class=\"section\">\n\t\t\t\t\t\t<h3>Remedies</h3>\n\t\t\t\t\t\t<div class=\"remedies\">\n\t\t\t\t\t\t\t${remedies.mantras ? html`<div class=\"remedy\"><strong>Mantras:</strong> ${remedies.mantras}</div>` : nothing}\n\t\t\t\t\t\t\t${remedies.gemstones ? html`<div class=\"remedy\"><strong>Gemstones:</strong> ${remedies.gemstones}</div>` : nothing}\n\t\t\t\t\t\t\t${remedies.rituals ? html`<div class=\"remedy\"><strong>Rituals:</strong> ${remedies.rituals}</div>` : nothing}\n\t\t\t\t\t\t</div>\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\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-nakshatra-card': RoxyNakshatraCard;\n\t}\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;;;ACDxC,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;;;ADKnB,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C;AAAA;AAmFN,gBAAiC;AAAA;AAAA,EAEjC,SAAS;AACR,QAAI,CAAC,KAAK;AACT,aAAO;AACR,UAAM,IAAI,KAAK;AACf,UAAM,WAAW,EAAE;AAEnB,WAAO,wCAAwC,aAAa,EAAE,IAAI,EAAE;AAAA;AAAA,uBAE/C,EAAE,IAAI;AAAA,MAExB,OAAO,EAAE,WAAW,WACjB,sCAAsC,EAAE,MAAM,kBAC9C,OACJ;AAAA,MACE,EAAE,QAAQ,2BAA2B,EAAE,KAAK,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,MAI/D,EAAE,OAAO,0CAA0C,EAAE,IAAI,gBAAgB,OAAO;AAAA,MAChF,EAAE,QAAQ,2CAA2C,EAAE,KAAK,gBAAgB,OAAO;AAAA,MACnF,EAAE,SAAS,4CAA4C,EAAE,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA,KAIxF,EAAE,kBACC;AAAA;AAAA,WAEI,EAAE,eAAe;AAAA,eAErB,OACJ;AAAA;AAAA,KAGC,WACG;AAAA;AAAA;AAAA,SAGE,SAAS,UAAU,qDAAqD,SAAS,OAAO,WAAW,OAAO;AAAA,SAC1G,SAAS,YAAY,uDAAuD,SAAS,SAAS,WAAW,OAAO;AAAA,SAChH,SAAS,UAAU,qDAAqD,SAAS,OAAO,WAAW,OAAO;AAAA;AAAA,eAG5G,OACJ;AAAA;AAAA,EAEF;AACD;AAnIa,kBACL,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;AA6ED;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlFlB,kBAmFZ;AAnFY,oBAAN;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB;",
+  "names": ["css", "css"]
+}

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

@@ -8,18 +8,46 @@ export declare class RoxyNatalChart extends LitElement {
     static styles: import("lit").CSSResult[];
     data: NatalChartResponse | null;
     houseSystem: 'placidus' | 'whole-sign' | 'equal' | 'koch';
+    /** Which view is showing: the wheel or the planet-by-planet aspect grid. */
+    private view;
     private getPlanets;
     private getAscendant;
     private getMidheaven;
     private toAngle;
     render(): import("lit").TemplateResult<1>;
+    private onTabKeyDown;
+    private renderWheel;
+    /**
+     * 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.
+     */
+    private renderAspectGrid;
     private renderAngles;
     private renderAngleMark;
     private renderSpokes;
     private renderSigns;
     private renderHouseNumbers;
+    /**
+     * 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.
+     */
+    private renderTicks;
+    /**
+     * Degree-and-minute label printed next to each house cusp on the wheel, so
+     * the exact cusp position is readable without leaving the chart.
+     */
+    private renderCuspDegrees;
     private renderPlanets;
     private renderDetails;
+    /**
+     * 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.
+     */
+    private renderElementModalityGrid;
     private renderInterpretations;
     private renderAspects;
 }

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

@@ -1 +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;AAG1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAsB5D;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BAwOX;IAGF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAGvC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAc;IAEvE,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,OAAO;IAIf,MAAM;IAiEN,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,aAAa;IA8ErB,OAAO,CAAC,qBAAqB;IAyB7B,OAAO,CAAC,aAAa;CA6BrB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}
+{"version":3,"file":"natal-chart.d.ts","sourceRoot":"","sources":["../../src/components/natal-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;AAQ1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA4B5D;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BA4TX;IAGF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAGvC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAc;IAEvE,4EAA4E;IAE5E,OAAO,CAAC,IAAI,CAA6B;IAEzC,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,OAAO;IAIf,MAAM;IA6DN,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,WAAW;IAsBnB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAkDxB,OAAO,CAAC,YAAY;IAuBpB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,kBAAkB;IA8B1B;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,aAAa;IAwCrB;;;;;OAKG;IACH,OAAO,CAAC,yBAAyB;IAsDjC,OAAO,CAAC,qBAAqB;IAyB7B,OAAO,CAAC,aAAa;CA6BrB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}