@roxyapi/ui 0.2.2 → 0.3.0

package/dist/components/natal-chart.js

@@ -11,7 +11,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // packages/ui/src/components/natal-chart.ts
 import { css as css2, html, LitElement, nothing, svg } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 // packages/ui/src/tokens/index.ts
 var PLANET_GLYPH = {
@@ -69,6 +69,15 @@ var SIGNS_ORDER = [
 var RASHI_KEYS = SIGNS_ORDER.map(
   (s) => s.toLowerCase()
 );
+var ASPECT_SYMBOL = {
+  conjunction: "\u260C",
+  opposition: "\u260D",
+  trine: "\u25B3",
+  square: "\u25A1",
+  sextile: "\u2731",
+  quincunx: "\u22BB",
+  semisextile: "\u22BC"
+};
 
 // packages/ui/src/utils/base-styles.ts
 import { css } from "lit";
@@ -157,6 +166,35 @@ var baseStyles = css`
 `;
 
 // packages/ui/src/utils/degree.ts
+function normalizeLongitude(lon) {
+  const wrapped = lon % 360;
+  return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+function longitudeToSignPosition(longitude) {
+  const lon = normalizeLongitude(longitude);
+  const signIndex = Math.floor(lon / 30) % 12;
+  const within = lon % 30;
+  const degree = Math.floor(within);
+  const minuteFloat = (within - degree) * 60;
+  const minute = Math.floor(minuteFloat);
+  const second = Math.round((minuteFloat - minute) * 60);
+  return {
+    sign: SIGNS_ORDER[signIndex] ?? "Aries",
+    signIndex,
+    degree,
+    minute,
+    second
+  };
+}
+function oppositePoint(longitude) {
+  return normalizeLongitude(longitude + 180);
+}
+function arcMidpoint(start, end) {
+  const s = normalizeLongitude(start);
+  let span = normalizeLongitude(end) - s;
+  if (span < 0) span += 360;
+  return normalizeLongitude(s + span / 2);
+}
 function polarToCartesian(cx, cy, radius, angleDeg) {
   const angleRad = angleDeg * Math.PI / 180;
   return {
@@ -201,6 +239,7 @@ var RoxyNatalChart = class extends LitElement {
     super(...arguments);
     this.data = null;
     this.houseSystem = "placidus";
+    this.view = "wheel";
   }
   getPlanets() {
     return this.data?.planets ?? [];
@@ -220,6 +259,7 @@ var RoxyNatalChart = class extends LitElement {
       return html`<div class="roxy-empty" role="status">No chart data</div>`;
     const planets = this.getPlanets();
     const aspects = this.data.aspects ?? [];
+    const view = this.view;
     return html`<div class="wrap">
 			<header>
 				<h2 class="title">Natal chart</h2>
@@ -227,44 +267,35 @@ var RoxyNatalChart = class extends LitElement {
 							${[this.data.birthDetails.date, this.data.birthDetails.time].filter(Boolean).join(" \xB7 ")}
 						</div>` : nothing}
 			</header>
-			<svg
-				viewBox="0 0 ${SIZE} ${SIZE}"
-				role="img"
-				aria-label="Natal chart wheel with twelve houses, planets, and aspects"
+			<div
+				class="tablist"
+				role="tablist"
+				aria-label="Natal chart views"
+				@keydown=${this.onTabKeyDown}
 			>
-				<title>Natal chart wheel</title>
-				<desc>
-					Twelve zodiac sign segments around a circular wheel. Planet glyphs are
-					placed at their ecliptic longitudes. Aspect lines connect related planets.
-				</desc>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${OUTER_R}
-					stroke-width="1.5"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${HOUSE_R}
-					stroke-width="1"
-				/>
-				<circle
-					class="wheel-line"
-					cx=${CENTER}
-					cy=${CENTER}
-					r=${PLANET_R - 16}
-					stroke-width="0.5"
-				/>
-				${this.renderSpokes()} ${this.renderSigns()} ${this.renderHouseNumbers()}
-				${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
-				${this.renderAngles()}
-			</svg>
+				${["wheel", "grid"].map(
+      (t) => html`<button
+						class="tab"
+						role="tab"
+						id="tab-${t}"
+						aria-selected=${view === t ? "true" : "false"}
+						aria-controls="panel-${t}"
+						tabindex=${view === t ? "0" : "-1"}
+						@click=${() => {
+        this.view = t;
+      }}
+					>
+						${t === "wheel" ? "Wheel" : "Aspect grid"}
+					</button>`
+    )}
+			</div>
+			<div id="panel-${view}" role="tabpanel" aria-labelledby="tab-${view}">
+				${view === "wheel" ? this.renderWheel(planets, aspects) : this.renderAspectGrid(planets, aspects)}
+			</div>
 			<div class="legend">
 				<span>${planets.length} planets</span>
 				<span>${aspects.length} aspects</span>
+				${this.data.houseSystem ? html`<span>${this.data.houseSystem} houses</span>` : nothing}
 				<span><span class="legend-swatch" style="background: var(--roxy-success)"></span>harmonious</span>
 				<span><span class="legend-swatch" style="background: var(--roxy-danger)"></span>challenging</span>
 			</div>
@@ -272,11 +303,103 @@ var RoxyNatalChart = class extends LitElement {
 			${this.renderInterpretations()}
 		</div>`;
   }
+  onTabKeyDown(e) {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+    e.preventDefault();
+    this.view = this.view === "wheel" ? "grid" : "wheel";
+    const next = this.view;
+    requestAnimationFrame(() => {
+      this.shadowRoot?.querySelector(`#tab-${next}`)?.focus();
+    });
+  }
+  renderWheel(planets, aspects) {
+    return html`<svg
+			viewBox="0 0 ${SIZE} ${SIZE}"
+			role="img"
+			aria-label="Natal chart wheel with twelve houses, planets, and aspects"
+		>
+			<title>Natal chart wheel</title>
+			<desc>
+				Twelve zodiac sign segments around a circular wheel. Planet glyphs are
+				placed at their ecliptic longitudes. Aspect lines connect related planets.
+			</desc>
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${OUTER_R} stroke-width="1.5" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${SIGN_R - 14} stroke-width="0.8" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${HOUSE_R} stroke-width="1" />
+			<circle class="wheel-line" cx=${CENTER} cy=${CENTER} r=${PLANET_R - 16} stroke-width="0.5" />
+			${this.renderTicks()} ${this.renderSpokes()} ${this.renderSigns()}
+			${this.renderHouseNumbers()} ${this.renderCuspDegrees()}
+			${this.renderAspects(planets, aspects)} ${this.renderPlanets(planets)}
+			${this.renderAngles()}
+		</svg>`;
+  }
+  /**
+   * Planet-by-planet aspect grid: the lower-triangular matrix astrologers read
+   * alongside the wheel. Each filled cell shows the aspect glyph colored by
+   * nature, with the exact orb in the SVG-free `<title>` tooltip.
+   */
+  renderAspectGrid(planets, aspects) {
+    const names = planets.map((p) => capitalize(p.name));
+    const byPair = /* @__PURE__ */ new Map();
+    for (const a of aspects) {
+      const k = [capitalize(a.planet1), capitalize(a.planet2)].sort().join("|");
+      byPair.set(k, a);
+    }
+    if (names.length === 0)
+      return html`<p class="roxy-empty" role="status">No planets to grid</p>`;
+    return html`<div class="grid-scroll">
+			<table class="aspect-grid" aria-label="Planet by planet aspect grid">
+				<thead>
+					<tr>
+						<th></th>
+						${names.slice(0, -1).map((n) => {
+      const g = PLANET_GLYPH[n] ?? n.slice(0, 2);
+      return html`<th scope="col" title=${n}>${g}</th>`;
+    })}
+					</tr>
+				</thead>
+				<tbody>
+					${names.slice(1).map((rowName, ri) => {
+      const rowGlyph = PLANET_GLYPH[rowName] ?? rowName.slice(0, 2);
+      return html`<tr>
+							<th scope="row" title=${rowName}>${rowGlyph}</th>
+							${names.slice(0, ri + 1).map((colName) => {
+        const a = byPair.get([rowName, colName].sort().join("|"));
+        if (!a) return html`<td class="empty"></td>`;
+        const name = normalizeAspect(a);
+        const sym = ASPECT_SYMBOL[name] ?? ASPECT_SYMBOL[name.replace(/-/g, "")] ?? name.slice(0, 3);
+        const cls = ASPECT_CLASS[name] ?? "aspect-other";
+        const orb = formatNumber(a.orb, 1);
+        return html`<td class=${`cell ${cls}`} title=${`${rowName} ${name} ${colName}${orb ? ` (orb ${orb}\xB0)` : ""}`}>
+									<span class="asp">${sym}</span>
+								</td>`;
+      })}
+							${names.slice(ri + 1, -1).map(() => html`<td class="empty"></td>`)}
+						</tr>`;
+    })}
+				</tbody>
+			</table>
+		</div>`;
+  }
   renderAngles() {
     const asc = this.getAscendant();
     const mc = this.getMidheaven();
-    const items = [this.renderAngleMark(asc, "ASC")];
-    if (mc !== null) items.push(this.renderAngleMark(mc, "MC"));
+    const items = [
+      this.renderAngleMark(asc, "ASC"),
+      this.renderAngleMark(oppositePoint(asc), "DSC")
+    ];
+    if (mc !== null) {
+      items.push(this.renderAngleMark(mc, "MC"));
+      items.push(this.renderAngleMark(oppositePoint(mc), "IC"));
+    }
+    const pof = this.data?.partOfFortune?.longitude;
+    if (typeof pof === "number") {
+      items.push(this.renderAngleMark(normalizeLongitude(pof), "PoF"));
+    }
+    const vertex = this.data?.vertex?.longitude;
+    if (typeof vertex === "number") {
+      items.push(this.renderAngleMark(normalizeLongitude(vertex), "Vtx"));
+    }
     return items;
   }
   renderAngleMark(longitude, label) {
@@ -292,8 +415,10 @@ var RoxyNatalChart = class extends LitElement {
 		`;
   }
   renderSpokes() {
-    return Array.from({ length: 12 }, (_, i) => {
-      const angle = this.toAngle(i * 30);
+    const houses = this.data?.houses ?? [];
+    const cuspLongitudes = houses.length === 12 ? houses.map((h) => h.longitude) : Array.from({ length: 12 }, (_, i) => this.getAscendant() + i * 30);
+    return cuspLongitudes.map((lon) => {
+      const angle = this.toAngle(lon);
       const start = polarToCartesian(CENTER, CENTER, HOUSE_R, angle);
       const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
       return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.8" />`;
@@ -307,6 +432,23 @@ var RoxyNatalChart = class extends LitElement {
     });
   }
   renderHouseNumbers() {
+    const houses = this.data?.houses ?? [];
+    if (houses.length === 12) {
+      return houses.map((house, i) => {
+        const next = houses[(i + 1) % 12];
+        const mid = arcMidpoint(
+          house.longitude,
+          next ? next.longitude : house.longitude + 30
+        );
+        const pos = polarToCartesian(
+          CENTER,
+          CENTER,
+          HOUSE_R - 12,
+          this.toAngle(mid)
+        );
+        return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${house.number}</text>`;
+      });
+    }
     const ascSignIndex = Math.floor(this.getAscendant() / 30);
     return Array.from({ length: 12 }, (_, i) => {
       const angle = this.toAngle(i * 30 + 15);
@@ -315,15 +457,53 @@ var RoxyNatalChart = class extends LitElement {
       return svg`<text class="house-num" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${houseNum}</text>`;
     });
   }
+  /**
+   * Degree ticks on the outer zodiac band: a short mark every 5 degrees and a
+   * longer one on each 30-degree sign cusp, so the wheel reads like a
+   * reference-grade chart rather than a bare ring of glyphs.
+   */
+  renderTicks() {
+    const ticks = [];
+    for (let deg = 0; deg < 360; deg += 5) {
+      const angle = this.toAngle(deg);
+      const isMajor = deg % 30 === 0;
+      const inner = isMajor ? SIGN_R - 14 : OUTER_R - 5;
+      const a = polarToCartesian(CENTER, CENTER, inner, angle);
+      const b = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
+      ticks.push(
+        svg`<line class=${isMajor ? "tick tick-major" : "tick"} x1=${a.x} y1=${a.y} x2=${b.x} y2=${b.y} stroke-width=${isMajor ? 1 : 0.5} />`
+      );
+    }
+    return ticks;
+  }
+  /**
+   * Degree-and-minute label printed next to each house cusp on the wheel, so
+   * the exact cusp position is readable without leaving the chart.
+   */
+  renderCuspDegrees() {
+    const houses = this.data?.houses ?? [];
+    if (houses.length !== 12) return nothing;
+    return houses.map((house) => {
+      const angle = this.toAngle(house.longitude);
+      const pos = polarToCartesian(CENTER, CENTER, HOUSE_R + 9, angle);
+      const sp = longitudeToSignPosition(house.longitude);
+      return svg`<text class="cusp-deg" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${sp.degree}°${String(sp.minute).padStart(2, "0")}'</text>`;
+    });
+  }
   renderPlanets(planets) {
     return planets.map((p) => {
       if (!Number.isFinite(p.longitude)) return nothing;
       const angle = this.toAngle(p.longitude);
-      const pos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
+      const glyphPos = polarToCartesian(CENTER, CENTER, PLANET_R, angle);
+      const degPos = polarToCartesian(CENTER, CENTER, PLANET_R - 13, angle);
       const glyph = PLANET_GLYPH[capitalize(p.name)] ?? p.name.slice(0, 2);
-      const retro = p.isRetrograde ? " R" : "";
-      const display = retro ? `${glyph}\u1D3F` : glyph;
-      return svg`<text class="planet-glyph" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro}</title>${display}</text>`;
+      const sp = longitudeToSignPosition(p.longitude);
+      const retro = p.isRetrograde === true;
+      const degLabel = `${sp.degree}\xB0${String(sp.minute).padStart(2, "0")}'`;
+      return svg`<g>
+				<text class="planet-glyph" x=${glyphPos.x} y=${glyphPos.y} text-anchor="middle" dominant-baseline="central"><title>${p.name}${retro ? " retrograde" : ""} - ${degLabel} ${p.sign ?? ""}</title>${glyph}</text>
+				<text class="planet-deg" x=${degPos.x} y=${degPos.y} text-anchor="middle" dominant-baseline="central">${degLabel}${retro ? svg`<tspan class="retro"> ℞</tspan>` : nothing}</text>
+			</g>`;
     });
   }
   renderDetails() {
@@ -331,10 +511,6 @@ var RoxyNatalChart = class extends LitElement {
     const ai = this.data?.aspectsInterpretation;
     if (!summary && !ai) return nothing;
     const retrogrades = summary?.retrogradePlanets ?? [];
-    const elementDist = summary?.elementDistribution ?? {};
-    const modalityDist = summary?.modalityDistribution ?? {};
-    const elementMax = Math.max(1, ...Object.values(elementDist));
-    const modalityMax = Math.max(1, ...Object.values(modalityDist));
     return html`<div class="details">
 			${summary?.dominantElement || summary?.dominantModality ? html`<div class="pill-row">
 						${summary.dominantElement ? html`<span class="pill">Dominant element: ${summary.dominantElement}</span>` : nothing}
@@ -352,30 +528,64 @@ var RoxyNatalChart = class extends LitElement {
     })}
 					</div>` : nothing}
 			${ai?.summary ? html`<p class="summary">${ai.summary}</p>` : nothing}
-			${Object.keys(elementDist).length > 0 || Object.keys(modalityDist).length > 0 ? html`<div class="dist-grid">
-						${Object.keys(elementDist).length > 0 ? html`<div class="dist-section">
-									<h3>Elements</h3>
-									${Object.entries(elementDist).map(
-      ([label, count]) => html`<div class="dist-row">
-											<span>${label}</span>
-											<div class="dist-bar"><span style="width: ${Math.round(count / elementMax * 100)}%"></span></div>
-											<span>${count}</span>
-										</div>`
-    )}
-								</div>` : nothing}
-						${Object.keys(modalityDist).length > 0 ? html`<div class="dist-section">
-									<h3>Modalities</h3>
-									${Object.entries(modalityDist).map(
-      ([label, count]) => html`<div class="dist-row">
-											<span>${label}</span>
-											<div class="dist-bar"><span style="width: ${Math.round(count / modalityMax * 100)}%"></span></div>
-											<span>${count}</span>
-										</div>`
-    )}
-								</div>` : nothing}
-					</div>` : nothing}
+			${this.renderElementModalityGrid()}
 		</div>`;
   }
+  /**
+   * Element by modality grid: the 4x3 cross-tab astrologers read for chart
+   * balance. Each planet is placed by its sign into one cell (Fire/Earth/Air/
+   * Water row, Cardinal/Fixed/Mutable column). Derived purely from the planet
+   * signs, with row, column, and grand totals.
+   */
+  renderElementModalityGrid() {
+    const planets = this.getPlanets();
+    if (planets.length === 0) return nothing;
+    const ELEMENTS = ["Fire", "Earth", "Air", "Water"];
+    const MODALITIES = ["Cardinal", "Fixed", "Mutable"];
+    const order = SIGNS_ORDER;
+    const cells = {};
+    for (const el of ELEMENTS)
+      cells[el] = { Cardinal: [], Fixed: [], Mutable: [] };
+    for (const p of planets) {
+      const idx = order.indexOf(capitalize(p.sign ?? ""));
+      if (idx < 0) continue;
+      const el = ELEMENTS[idx % 4];
+      const mod = MODALITIES[idx % 3];
+      const glyph = PLANET_GLYPH[capitalize(p.name)] ?? capitalize(p.name).slice(0, 2);
+      cells[el]?.[mod]?.push(glyph);
+    }
+    return html`<table class="em-grid" aria-label="Element and modality distribution">
+			<thead>
+				<tr>
+					<th></th>
+					${MODALITIES.map((m) => html`<th scope="col">${m.slice(0, 3)}</th>`)}
+					<th scope="col">Total</th>
+				</tr>
+			</thead>
+			<tbody>
+				${ELEMENTS.map((el) => {
+      const rowTotal = MODALITIES.reduce(
+        (s, m) => s + (cells[el]?.[m]?.length ?? 0),
+        0
+      );
+      return html`<tr>
+						<th scope="row">${el}</th>
+						${MODALITIES.map(
+        (m) => html`<td>${(cells[el]?.[m] ?? []).join(" ")}</td>`
+      )}
+						<td class="em-total">${rowTotal}</td>
+					</tr>`;
+    })}
+				<tr>
+					<th scope="row">Total</th>
+					${MODALITIES.map(
+      (m) => html`<td class="em-total">${ELEMENTS.reduce((s, el) => s + (cells[el]?.[m]?.length ?? 0), 0)}</td>`
+    )}
+					<td class="em-total">${planets.length}</td>
+				</tr>
+			</tbody>
+		</table>`;
+  }
   renderInterpretations() {
     const planets = this.getPlanets().filter((p) => p.interpretation);
     if (planets.length === 0) return nothing;
@@ -473,12 +683,35 @@ RoxyNatalChart.styles = [
 				font-family: var(--roxy-font-sans);
 			}
 
+			.planet-deg {
+				fill: var(--roxy-fg, #0a0a0a);
+				font-size: 7px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.planet-deg .retro {
+				fill: var(--roxy-danger, #dc2626);
+			}
+
 			.house-num {
 				fill: var(--roxy-muted, #71717a);
 				font-size: 9px;
 				font-family: var(--roxy-font-sans);
 			}
 
+			.cusp-deg {
+				fill: var(--roxy-muted, #71717a);
+				font-size: 6px;
+				font-family: var(--roxy-font-sans);
+			}
+
+			.tick {
+				stroke: var(--roxy-border, #e4e4e7);
+			}
+			.tick-major {
+				stroke: var(--roxy-secondary, #475569);
+			}
+
 			.aspect {
 				stroke-width: 0.8;
 				fill: none;
@@ -528,6 +761,78 @@ RoxyNatalChart.styles = [
 				vertical-align: middle;
 			}
 
+			.tablist {
+				display: flex;
+				gap: 2px;
+				border-bottom: 2px solid var(--roxy-border, #e4e4e7);
+			}
+			.tab {
+				padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				background: none;
+				border: none;
+				border-bottom: 2px solid transparent;
+				margin-bottom: -2px;
+				cursor: pointer;
+				color: var(--roxy-muted, #71717a);
+				font-family: inherit;
+				transition: color var(--roxy-motion-duration, 200ms) var(--roxy-motion-easing, ease);
+			}
+			.tab[aria-selected='true'] {
+				color: var(--roxy-accent-fg, #b45309);
+				border-bottom-color: var(--roxy-accent, #f59e0b);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			.tab:hover:not([aria-selected='true']) {
+				color: var(--roxy-fg, #0a0a0a);
+			}
+
+			.grid-scroll {
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
+			}
+			table.aspect-grid {
+				border-collapse: collapse;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				margin: 0 auto;
+			}
+			table.aspect-grid th,
+			table.aspect-grid td {
+				width: 1.6rem;
+				height: 1.6rem;
+				text-align: center;
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				padding: 0;
+			}
+			table.aspect-grid th {
+				color: var(--roxy-secondary, #475569);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			table.aspect-grid td.cell {
+				cursor: default;
+			}
+			table.aspect-grid td.empty {
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 18%, transparent);
+			}
+			table.aspect-grid td .asp {
+				font-size: 0.95em;
+				line-height: 1;
+			}
+			table.aspect-grid td.aspect-trine .asp,
+			table.aspect-grid td.aspect-sextile .asp {
+				color: var(--roxy-success, #16a34a);
+			}
+			table.aspect-grid td.aspect-square .asp,
+			table.aspect-grid td.aspect-opposition .asp {
+				color: var(--roxy-danger, #dc2626);
+			}
+			table.aspect-grid td.aspect-conjunction .asp {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			table.aspect-grid td.aspect-other .asp {
+				color: var(--roxy-muted, #71717a);
+			}
+
 			.details {
 				margin-top: var(--roxy-space-md, 1rem);
 			}
@@ -568,48 +873,37 @@ RoxyNatalChart.styles = [
 				margin: var(--roxy-space-md, 1rem) 0;
 			}
 
-			.dist-grid {
-				display: grid;
-				grid-template-columns: 1fr 1fr;
-				gap: var(--roxy-space-md, 1rem);
+			.em-grid {
+				border-collapse: collapse;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				width: 100%;
 			}
-
-			@container (max-width: 639px) {
-				.dist-grid {
-					grid-template-columns: 1fr;
-				}
+			.em-grid th,
+			.em-grid td {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				padding: 3px 5px;
+				text-align: center;
+				vertical-align: middle;
 			}
-
-			.dist-section h3 {
-				font-size: var(--roxy-text-xs, 0.75rem);
-				font-weight: var(--roxy-weight-bold, 600);
+			.em-grid th {
 				color: var(--roxy-muted, #71717a);
-				margin: 0 0 var(--roxy-space-xs, 0.25rem);
+				font-weight: var(--roxy-weight-bold, 600);
 				text-transform: uppercase;
-				letter-spacing: 0.05em;
+				letter-spacing: 0.04em;
 			}
-
-			.dist-row {
-				display: grid;
-				grid-template-columns: 4rem 1fr 1.5rem;
-				align-items: center;
-				gap: var(--roxy-space-xs, 0.25rem);
-				font-size: var(--roxy-text-xs, 0.75rem);
-				color: var(--roxy-fg, #0f172a);
-				margin-bottom: 4px;
+			.em-grid th[scope='row'] {
+				text-align: left;
 			}
-
-			.dist-bar {
-				background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 20%, transparent);
-				height: 6px;
-				border-radius: 3px;
+			.em-grid td {
+				color: var(--roxy-accent, #f59e0b);
+				font-size: 0.95em;
+				line-height: 1.4;
+				min-width: 1.4rem;
 			}
-
-			.dist-bar > span {
-				display: block;
-				height: 100%;
-				background: var(--roxy-accent, #f59e0b);
-				border-radius: 3px;
+			.em-grid .em-total {
+				color: var(--roxy-fg, #0a0a0a);
+				font-weight: var(--roxy-weight-bold, 600);
+				background: color-mix(in srgb, var(--roxy-border, #e4e4e7) 25%, transparent);
 			}
 
 			.interpretations {
@@ -665,6 +959,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "house-system", reflect: true })
 ], RoxyNatalChart.prototype, "houseSystem", 2);
+__decorateClass([
+  state()
+], RoxyNatalChart.prototype, "view", 2);
 RoxyNatalChart = __decorateClass([
   customElement("roxy-natal-chart")
 ], RoxyNatalChart);