@roxyapi/ui 0.1.3 → 0.2.0

package/dist/components/panchang-table.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/panchang-table.ts", "../../src/utils/base-styles.ts", "../../src/utils/format.ts"],
-  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tGetBasicPanchangResponse,\n\tGetDetailedPanchangResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatDate, formatTime, formatTimeRange } from '../utils/format.js';\n\ntype PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;\ntype PanchangTime = GetDetailedPanchangResponse['rahuKaal'];\n\n/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */\n@customElement('roxy-panchang-table')\nexport class RoxyPanchangTable 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: hidden;\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\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\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\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\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}\n\t\t\ttbody tr:nth-child(odd) {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 24%, 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\tvertical-align: top;\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\twidth: 38%;\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.section {\n\t\t\t\tborder-top: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\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\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: PanchangData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tdetail: 'basic' | 'detailed' = 'detailed';\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 panchang data</div>`;\n\t\tconst detailed = 'sunrise' in d ? d : null;\n\n\t\tconst fivefold: Array<[string, string]> = [\n\t\t\t['Tithi', this.formatPart(d.tithi)],\n\t\t\t['Nakshatra', this.formatPart(d.nakshatra)],\n\t\t\t['Yoga', this.formatPart(d.yoga)],\n\t\t\t['Karana', this.formatPart(d.karana)],\n\t\t];\n\t\tif (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);\n\n\t\tconst muhurtas: Array<[string, PanchangTime | undefined]> = detailed\n\t\t\t? [\n\t\t\t\t\t['Brahma Muhurta', detailed.brahmaMuhurta],\n\t\t\t\t\t['Abhijit Muhurta', detailed.abhijitMuhurta],\n\t\t\t\t\t['Vijaya Muhurta', detailed.vijayaMuhurta],\n\t\t\t\t\t['Godhuli Muhurta', detailed.godhuliMuhurta],\n\t\t\t\t\t['Nishita Muhurta', detailed.nishitaMuhurta],\n\t\t\t\t\t['Pratah Sandhya', detailed.pratahSandhya],\n\t\t\t\t\t['Sayahna Sandhya', detailed.sayahnaSandhya],\n\t\t\t\t]\n\t\t\t: [];\n\n\t\tconst inauspicious: Array<[string, PanchangTime | undefined]> = detailed\n\t\t\t? [\n\t\t\t\t\t['Rahu Kaal', detailed.rahuKaal],\n\t\t\t\t\t['Yamaganda', detailed.yamaganda],\n\t\t\t\t\t['Gulika', detailed.gulika],\n\t\t\t\t]\n\t\t\t: [];\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Panchang\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Panchang</h2>\n\t\t\t\t<span class=\"date\">${detailed ? formatDate(detailed.date) : ''}</span>\n\t\t\t</header>\n\t\t\t<table>\n\t\t\t\t<tbody>\n\t\t\t\t\t${fivefold.map(\n\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t<td>${v}</td>\n\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t)}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.sunrise\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Sunrise</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.sunrise)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.sunset\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Sunset</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.sunset)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.moonrise\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Moonrise</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.moonrise)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.moonset\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Moonset</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.moonset)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t${\n\t\t\t\tthis.detail === 'detailed' &&\n\t\t\t\t(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))\n\t\t\t\t\t? html`\n\t\t\t\t\t\t<div class=\"section\">Auspicious muhurtas</div>\n\t\t\t\t\t\t<table>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t${muhurtas\n\t\t\t\t\t\t\t\t\t.filter(([, v]) => !!v)\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t\t\t\t\t<td>${formatTimeRange(v)}</td>\n\t\t\t\t\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t\t<div class=\"section\">Inauspicious periods</div>\n\t\t\t\t\t\t<table>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t${inauspicious\n\t\t\t\t\t\t\t\t\t.filter(([, v]) => !!v)\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t\t\t\t\t<td>${formatTimeRange(v)}</td>\n\t\t\t\t\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate formatPart(v: unknown): string {\n\t\tif (!v) return '';\n\t\tif (typeof v === 'string') return v;\n\t\tif (typeof v === 'object') {\n\t\t\tconst obj = v as {\n\t\t\t\tname?: string;\n\t\t\t\tlord?: string;\n\t\t\t\tphase?: string;\n\t\t\t\tend?: string;\n\t\t\t};\n\t\t\tconst parts = [\n\t\t\t\tobj.name,\n\t\t\t\tobj.lord ? `(${obj.lord})` : '',\n\t\t\t\tobj.phase,\n\t\t\t].filter(Boolean);\n\t\t\treturn parts.join(' ');\n\t\t}\n\t\treturn String(v);\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-panchang-table': RoxyPanchangTable;\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", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\nexport function formatLongitude(value: unknown): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn `${formatNumber(value, 2)}\u00B0`;\n}\n"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tGetBasicPanchangResponse,\n\tGetDetailedPanchangResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatDate, formatTime, formatTimeRange } from '../utils/format.js';\n\ntype PanchangData = GetBasicPanchangResponse | GetDetailedPanchangResponse;\ntype PanchangTime = GetDetailedPanchangResponse['rahuKaal'];\n\n/** Panchang table for /vedic-astrology/panchang/{basic,detailed}. */\n@customElement('roxy-panchang-table')\nexport class RoxyPanchangTable 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: hidden;\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\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\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\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\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}\n\t\t\ttbody tr:nth-child(odd) {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-border, #e4e4e7) 24%, 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\tvertical-align: top;\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\twidth: 38%;\n\t\t\t\ttext-transform: capitalize;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t}\n\t\t\t.section {\n\t\t\t\tborder-top: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\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\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: PanchangData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tdetail: 'basic' | 'detailed' = 'detailed';\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 panchang data</div>`;\n\t\tconst detailed = 'sunrise' in d ? d : null;\n\n\t\tconst fivefold: Array<[string, string]> = [\n\t\t\t['Tithi', this.formatPart(d.tithi)],\n\t\t\t['Nakshatra', this.formatPart(d.nakshatra)],\n\t\t\t['Yoga', this.formatPart(d.yoga)],\n\t\t\t['Karana', this.formatPart(d.karana)],\n\t\t];\n\t\tif (detailed) fivefold.push(['Vara', this.formatPart(detailed.vara)]);\n\n\t\tconst muhurtas: Array<[string, PanchangTime | undefined]> = detailed\n\t\t\t? [\n\t\t\t\t\t['Brahma Muhurta', detailed.brahmaMuhurta],\n\t\t\t\t\t['Abhijit Muhurta', detailed.abhijitMuhurta],\n\t\t\t\t\t['Vijaya Muhurta', detailed.vijayaMuhurta],\n\t\t\t\t\t['Godhuli Muhurta', detailed.godhuliMuhurta],\n\t\t\t\t\t['Nishita Muhurta', detailed.nishitaMuhurta],\n\t\t\t\t\t['Pratah Sandhya', detailed.pratahSandhya],\n\t\t\t\t\t['Sayahna Sandhya', detailed.sayahnaSandhya],\n\t\t\t\t]\n\t\t\t: [];\n\n\t\tconst inauspicious: Array<[string, PanchangTime | undefined]> = detailed\n\t\t\t? [\n\t\t\t\t\t['Rahu Kaal', detailed.rahuKaal],\n\t\t\t\t\t['Yamaganda', detailed.yamaganda],\n\t\t\t\t\t['Gulika', detailed.gulika],\n\t\t\t\t]\n\t\t\t: [];\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Panchang\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Panchang</h2>\n\t\t\t\t<span class=\"date\">${detailed ? formatDate(detailed.date) : ''}</span>\n\t\t\t</header>\n\t\t\t<table>\n\t\t\t\t<tbody>\n\t\t\t\t\t${fivefold.map(\n\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t<td>${v}</td>\n\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t)}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.sunrise\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Sunrise</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.sunrise)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.sunset\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Sunset</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.sunset)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.moonrise\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Moonrise</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.moonrise)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tdetailed?.moonset\n\t\t\t\t\t\t\t? html`<tr>\n\t\t\t\t\t\t\t\t<th>Moonset</th>\n\t\t\t\t\t\t\t\t<td>${formatTime(detailed.moonset)}</td>\n\t\t\t\t\t\t\t</tr>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t${\n\t\t\t\tthis.detail === 'detailed' &&\n\t\t\t\t(muhurtas.some((m) => !!m[1]) || inauspicious.some((m) => !!m[1]))\n\t\t\t\t\t? html`\n\t\t\t\t\t\t<div class=\"section\">Auspicious muhurtas</div>\n\t\t\t\t\t\t<table>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t${muhurtas\n\t\t\t\t\t\t\t\t\t.filter(([, v]) => !!v)\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t\t\t\t\t<td>${formatTimeRange(v)}</td>\n\t\t\t\t\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t\t<div class=\"section\">Inauspicious periods</div>\n\t\t\t\t\t\t<table>\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t${inauspicious\n\t\t\t\t\t\t\t\t\t.filter(([, v]) => !!v)\n\t\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t\t([k, v]) => html`<tr>\n\t\t\t\t\t\t\t\t\t\t\t<th>${k}</th>\n\t\t\t\t\t\t\t\t\t\t\t<td>${formatTimeRange(v)}</td>\n\t\t\t\t\t\t\t\t\t\t</tr>`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t</table>\n\t\t\t\t\t`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate formatPart(v: unknown): string {\n\t\tif (!v) return '';\n\t\tif (typeof v === 'string') return v;\n\t\tif (typeof v === 'object') {\n\t\t\tconst obj = v as {\n\t\t\t\tname?: string;\n\t\t\t\tlord?: string;\n\t\t\t\tphase?: string;\n\t\t\t\tend?: string;\n\t\t\t};\n\t\t\tconst parts = [\n\t\t\t\tobj.name,\n\t\t\t\tobj.lord ? `(${obj.lord})` : '',\n\t\t\t\tobj.phase,\n\t\t\t].filter(Boolean);\n\t\t\treturn parts.join(' ');\n\t\t}\n\t\treturn String(v);\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-panchang-table': RoxyPanchangTable;\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", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize an aspect entry's `type` field to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\n}\n"],
   "mappings": "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",
   "names": ["css", "css"]
 }

package/dist/components/shadbala-table.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import type { ShadbalaResponse } from '../types/index.js';
+/**
+ * Shadbala six-fold planetary strength table with stacked bar visualization.
+ * Pass `data` from /vedic-astrology/shadbala.
+ */
+export declare class RoxyShadbalaTable extends LitElement {
+    static styles: import("lit").CSSResult[];
+    data: ShadbalaResponse | null;
+    render(): import("lit").TemplateResult<1>;
+    private renderPlanetRow;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'roxy-shadbala-table': RoxyShadbalaTable;
+    }
+}
+//# sourceMappingURL=shadbala-table.d.ts.map

package/dist/components/shadbala-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadbala-table.d.ts","sourceRoot":"","sources":["../../src/components/shadbala-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAiC1D;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAqJX;IAGF,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAErC,MAAM;IAkCN,OAAO,CAAC,eAAe;CAiDvB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/components/shadbala-table.js

@@ -0,0 +1,400 @@
+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/shadbala-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 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/format.ts
+function formatNumber(value, dp = 1) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "";
+  return value.toFixed(dp).replace(/\.?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/shadbala-table.ts
+var BALA_COMPONENTS = [
+  { key: "sthanaBala", label: "Sthana", color: "var(--roxy-info, #0284c7)" },
+  { key: "digBala", label: "Dig", color: "var(--roxy-success, #16a34a)" },
+  { key: "kalaBala", label: "Kala", color: "var(--roxy-warning, #ea580c)" },
+  { key: "chestaBala", label: "Chesta", color: "var(--roxy-accent, #f59e0b)" },
+  {
+    key: "naisargikaBala",
+    label: "Naisargika",
+    color: "var(--roxy-secondary, #475569)"
+  },
+  { key: "drikBala", label: "Drik", color: "var(--roxy-danger, #dc2626)" }
+];
+var RoxyShadbalaTable = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = null;
+  }
+  render() {
+    if (!this.data?.planets?.length) {
+      return html`<div class="roxy-empty" role="status">No shadbala data</div>`;
+    }
+    const sorted = [...this.data.planets].sort(
+      (a, b) => a.relativeRank - b.relativeRank
+    );
+    return html`<div class="wrap" aria-label="Shadbala planetary strength">
+			<div class="head">
+				<h2 class="title">Shadbala</h2>
+				<p class="subtitle">${sorted.length} planets ranked by strength</p>
+			</div>
+
+			<div role="list" aria-label="Planet strength bars">
+				${sorted.map((p) => this.renderPlanetRow(p))}
+			</div>
+
+			<div class="legend" aria-label="Strength component legend">
+				${BALA_COMPONENTS.map(
+      (b) => html`<div class="legend-row">
+						<span
+							class="legend-swatch"
+							style="background: ${b.color}"
+							aria-hidden="true"
+						></span>
+						${b.label}
+					</div>`
+    )}
+			</div>
+		</div>`;
+  }
+  renderPlanetRow(p) {
+    const glyph = PLANET_GLYPH[capitalize(p.planet)] ?? "";
+    const values = BALA_COMPONENTS.map((b) => Math.max(0, p[b.key]));
+    const total = values.reduce((s, v) => s + v, 0);
+    const isAdequate = typeof p.strengthRatio === "number" && p.strengthRatio >= 1;
+    const badgeClass = isAdequate ? "adequacy-badge--adequate" : "adequacy-badge--weak";
+    const badgeLabel = isAdequate ? "adequate" : "weak";
+    const rupasStr = formatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2) ? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R` : "";
+    return html`<div class="planet-row" role="listitem" aria-label="${p.planet} shadbala">
+			<div class="planet-label">
+				<span class="glyph" aria-hidden="true">${glyph}</span>
+				${p.planet}
+				<span class="rank-badge" aria-label="rank ${p.relativeRank}">#${p.relativeRank}</span>
+			</div>
+			<div class="bar-wrap">
+				<div class="bar" role="img" aria-label="Strength components for ${p.planet}">
+					${total > 0 ? BALA_COMPONENTS.map((b, i) => {
+      const v = values[i];
+      if (v <= 0) return nothing;
+      const grow = v / total * 100;
+      return html`<div
+									class="bar-segment"
+									style="flex-grow: ${grow}; background: ${b.color};"
+									title="${b.label}: ${formatNumber(v, 1)}"
+								></div>`;
+    }) : nothing}
+				</div>
+			</div>
+			<div class="pills">
+				${rupasStr ? html`<span class="rupas-label">${rupasStr}</span>` : nothing}
+				<span class="${`adequacy-badge ${badgeClass}`}">${badgeLabel}</span>
+			</div>
+		</div>`;
+  }
+};
+RoxyShadbalaTable.styles = [
+  baseStyles,
+  css2`
+			.wrap {
+				display: grid;
+				gap: var(--roxy-space-md, 1rem);
+			}
+
+			.head {
+				display: flex;
+				justify-content: space-between;
+				align-items: baseline;
+				gap: var(--roxy-space-md, 1rem);
+				flex-wrap: wrap;
+			}
+
+			.title {
+				font-size: var(--roxy-text-lg, 1.125rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				margin: 0;
+			}
+
+			.subtitle {
+				color: var(--roxy-muted, #71717a);
+				font-size: var(--roxy-text-sm, 0.875rem);
+				margin: 0;
+			}
+
+			.planet-row {
+				display: grid;
+				grid-template-columns: 8rem 1fr auto;
+				align-items: center;
+				gap: var(--roxy-space-sm, 0.5rem);
+				padding: var(--roxy-space-sm, 0.5rem) 0;
+				border-bottom: 1px solid var(--roxy-border, #e4e4e7);
+			}
+
+			.planet-row:last-of-type {
+				border-bottom: none;
+			}
+
+			.planet-label {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.glyph {
+				font-size: 1.2em;
+				line-height: 1;
+			}
+
+			.bar-wrap {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.bar {
+				display: flex;
+				height: 12px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				overflow: hidden;
+				background: var(--roxy-border, #e4e4e7);
+			}
+
+			.bar-segment {
+				height: 100%;
+				transition: flex-grow var(--roxy-motion-duration, 200ms)
+					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			}
+
+			.pills {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-end;
+				gap: 4px;
+			}
+
+			.rupas-label {
+				font-variant-numeric: tabular-nums;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+				white-space: nowrap;
+			}
+
+			.adequacy-badge {
+				display: inline-block;
+				padding: 1px 6px;
+				border-radius: var(--roxy-radius-full, 9999px);
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.adequacy-badge--adequate {
+				background: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);
+				color: var(--roxy-success-fg, #166534);
+			}
+
+			.adequacy-badge--weak {
+				background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
+				color: var(--roxy-danger-fg, #991b1b);
+			}
+
+			.rank-badge {
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-accent-fg, #b45309);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+
+			.legend {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				border-top: 1px solid var(--roxy-border, #e4e4e7);
+				padding-top: var(--roxy-space-sm, 0.5rem);
+			}
+
+			.legend-row {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				color: var(--roxy-muted, #71717a);
+			}
+
+			.legend-swatch {
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				border-radius: var(--roxy-radius-sm, 4px);
+				flex-shrink: 0;
+			}
+
+			@container (max-width: 480px) {
+				.planet-row {
+					grid-template-columns: 6rem 1fr;
+					grid-template-rows: auto auto;
+				}
+				.pills {
+					grid-column: 1 / -1;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-start;
+				}
+			}
+		`
+];
+__decorateClass([
+  property({ attribute: false })
+], RoxyShadbalaTable.prototype, "data", 2);
+RoxyShadbalaTable = __decorateClass([
+  customElement("roxy-shadbala-table")
+], RoxyShadbalaTable);
+export {
+  RoxyShadbalaTable
+};
+//# sourceMappingURL=shadbala-table.js.map

package/dist/components/shadbala-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/shadbala-table.ts", "../../src/tokens/index.ts", "../../src/utils/base-styles.ts", "../../src/utils/format.ts", "../../src/utils/string.ts"],
+  "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PLANET_GLYPH } from '../tokens/index.js';\nimport type { ShadbalaResponse } from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatNumber } from '../utils/format.js';\nimport { capitalize } from '../utils/string.js';\n\ntype Planet = ShadbalaResponse['planets'][number];\n\n/** CSS variable and display name for each of the 6 bala components. */\nconst BALA_COMPONENTS: Array<{\n\tkey: keyof Pick<\n\t\tPlanet,\n\t\t| 'sthanaBala'\n\t\t| 'digBala'\n\t\t| 'kalaBala'\n\t\t| 'chestaBala'\n\t\t| 'naisargikaBala'\n\t\t| 'drikBala'\n\t>;\n\tlabel: string;\n\tcolor: string;\n}> = [\n\t{ key: 'sthanaBala', label: 'Sthana', color: 'var(--roxy-info, #0284c7)' },\n\t{ key: 'digBala', label: 'Dig', color: 'var(--roxy-success, #16a34a)' },\n\t{ key: 'kalaBala', label: 'Kala', color: 'var(--roxy-warning, #ea580c)' },\n\t{ key: 'chestaBala', label: 'Chesta', color: 'var(--roxy-accent, #f59e0b)' },\n\t{\n\t\tkey: 'naisargikaBala',\n\t\tlabel: 'Naisargika',\n\t\tcolor: 'var(--roxy-secondary, #475569)',\n\t},\n\t{ key: 'drikBala', label: 'Drik', color: 'var(--roxy-danger, #dc2626)' },\n];\n\n/**\n * Shadbala six-fold planetary strength table with stacked bar visualization.\n * Pass `data` from /vedic-astrology/shadbala.\n */\n@customElement('roxy-shadbala-table')\nexport class RoxyShadbalaTable extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.wrap {\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.head {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: baseline;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t\tflex-wrap: wrap;\n\t\t\t}\n\n\t\t\t.title {\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\tmargin: 0;\n\t\t\t}\n\n\t\t\t.subtitle {\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\tmargin: 0;\n\t\t\t}\n\n\t\t\t.planet-row {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr auto;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem) 0;\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t}\n\n\t\t\t.planet-row:last-of-type {\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\n\t\t\t.planet-label {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 6px;\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\n\t\t\t.glyph {\n\t\t\t\tfont-size: 1.2em;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\n\t\t\t.bar-wrap {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 4px;\n\t\t\t}\n\n\t\t\t.bar {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: 12px;\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\toverflow: hidden;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t}\n\n\t\t\t.bar-segment {\n\t\t\t\theight: 100%;\n\t\t\t\ttransition: flex-grow var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\n\t\t\t.pills {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: flex-end;\n\t\t\t\tgap: 4px;\n\t\t\t}\n\n\t\t\t.rupas-label {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.adequacy-badge {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpadding: 1px 6px;\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\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\n\t\t\t.adequacy-badge--adequate {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-success, #16a34a) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-success-fg, #166534);\n\t\t\t}\n\n\t\t\t.adequacy-badge--weak {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);\n\t\t\t\tcolor: var(--roxy-danger-fg, #991b1b);\n\t\t\t}\n\n\t\t\t.rank-badge {\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\n\t\t\t.legend {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);\n\t\t\t\tborder-top: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\tpadding-top: var(--roxy-space-sm, 0.5rem);\n\t\t\t}\n\n\t\t\t.legend-row {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 6px;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\n\t\t\t.legend-swatch {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t@container (max-width: 480px) {\n\t\t\t\t.planet-row {\n\t\t\t\t\tgrid-template-columns: 6rem 1fr;\n\t\t\t\t\tgrid-template-rows: auto auto;\n\t\t\t\t}\n\t\t\t\t.pills {\n\t\t\t\t\tgrid-column: 1 / -1;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: ShadbalaResponse | null = null;\n\n\trender() {\n\t\tif (!this.data?.planets?.length) {\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No shadbala data</div>`;\n\t\t}\n\n\t\tconst sorted = [...this.data.planets].sort(\n\t\t\t(a, b) => a.relativeRank - b.relativeRank,\n\t\t);\n\n\t\treturn html`<div class=\"wrap\" aria-label=\"Shadbala planetary strength\">\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2 class=\"title\">Shadbala</h2>\n\t\t\t\t<p class=\"subtitle\">${sorted.length} planets ranked by strength</p>\n\t\t\t</div>\n\n\t\t\t<div role=\"list\" aria-label=\"Planet strength bars\">\n\t\t\t\t${sorted.map((p) => this.renderPlanetRow(p))}\n\t\t\t</div>\n\n\t\t\t<div class=\"legend\" aria-label=\"Strength component legend\">\n\t\t\t\t${BALA_COMPONENTS.map(\n\t\t\t\t\t(b) => html`<div class=\"legend-row\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclass=\"legend-swatch\"\n\t\t\t\t\t\t\tstyle=\"background: ${b.color}\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t\t${b.label}\n\t\t\t\t\t</div>`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n\n\tprivate renderPlanetRow(p: Planet) {\n\t\tconst glyph = PLANET_GLYPH[capitalize(p.planet)] ?? '';\n\n\t\t// Compute positive component values (drikBala can be negative)\n\t\tconst values = BALA_COMPONENTS.map((b) => Math.max(0, p[b.key] as number));\n\t\tconst total = values.reduce((s, v) => s + v, 0);\n\n\t\tconst isAdequate =\n\t\t\ttypeof p.strengthRatio === 'number' && p.strengthRatio >= 1;\n\t\tconst badgeClass = isAdequate\n\t\t\t? 'adequacy-badge--adequate'\n\t\t\t: 'adequacy-badge--weak';\n\t\tconst badgeLabel = isAdequate ? 'adequate' : 'weak';\n\n\t\tconst rupasStr =\n\t\t\tformatNumber(p.totalRupas, 2) && formatNumber(p.minRequired, 2)\n\t\t\t\t? `${formatNumber(p.totalRupas, 2)} / ${formatNumber(p.minRequired, 2)} R`\n\t\t\t\t: '';\n\n\t\treturn html`<div class=\"planet-row\" role=\"listitem\" aria-label=\"${p.planet} shadbala\">\n\t\t\t<div class=\"planet-label\">\n\t\t\t\t<span class=\"glyph\" aria-hidden=\"true\">${glyph}</span>\n\t\t\t\t${p.planet}\n\t\t\t\t<span class=\"rank-badge\" aria-label=\"rank ${p.relativeRank}\">#${p.relativeRank}</span>\n\t\t\t</div>\n\t\t\t<div class=\"bar-wrap\">\n\t\t\t\t<div class=\"bar\" role=\"img\" aria-label=\"Strength components for ${p.planet}\">\n\t\t\t\t\t${\n\t\t\t\t\t\ttotal > 0\n\t\t\t\t\t\t\t? BALA_COMPONENTS.map((b, i) => {\n\t\t\t\t\t\t\t\t\tconst v = values[i];\n\t\t\t\t\t\t\t\t\tif (v <= 0) return nothing;\n\t\t\t\t\t\t\t\t\tconst grow = (v / total) * 100;\n\t\t\t\t\t\t\t\t\treturn html`<div\n\t\t\t\t\t\t\t\t\tclass=\"bar-segment\"\n\t\t\t\t\t\t\t\t\tstyle=\"flex-grow: ${grow}; background: ${b.color};\"\n\t\t\t\t\t\t\t\t\ttitle=\"${b.label}: ${formatNumber(v, 1)}\"\n\t\t\t\t\t\t\t\t></div>`;\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"pills\">\n\t\t\t\t${rupasStr ? html`<span class=\"rupas-label\">${rupasStr}</span>` : nothing}\n\t\t\t\t<span class=\"${`adequacy-badge ${badgeClass}`}\">${badgeLabel}</span>\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-shadbala-table': RoxyShadbalaTable;\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 * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\n/**\n * CSS class name per aspect type. Used by natal and synastry chart aspect\n * lines so the same color encoding (harmonious vs challenging) applies in\n * both wheels. Keys are lowercase canonical names, values are CSS class\n * suffixes the chart components define in their `:host` styles.\n */\nexport const ASPECT_CLASS: Record<string, string> = {\n\tconjunction: 'aspect-conjunction',\n\tsextile: 'aspect-sextile',\n\tsquare: 'aspect-square',\n\ttrine: 'aspect-trine',\n\topposition: 'aspect-opposition',\n};\n\n/**\n * Normalize an aspect entry's `type` field to a lowercase, hyphen-separated\n * canonical name (`SEMI_SEXTILE` \u2192 `semi-sextile`). Accepts any aspect-shaped\n * object so both natal and synastry inter-aspect entries can share this.\n */\nexport function normalizeAspect(a: { type?: string }): string {\n\treturn (a.type ?? '').toLowerCase().replace(/_/g, '-');\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": ";;;;;;;;;;;;AAAA,SAAS,OAAAA,MAAK,MAAM,YAAY,eAAe;AAC/C,SAAS,eAAe,gBAAgB;;;ACKjC,IAAM,eAAuC;AAAA,EACnD,KAAK;AAAA,EACL,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,qBAAqB;AACtB;AAiDO,IAAM,cAAc;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAOO,IAAM,aAAa,YAAY;AAAA,EAAI,CAAC,MAC1C,EAAE,YAAY;AACf;;;ACpGA,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;;;ACqCnB,SAAS,aAAa,OAAgB,KAAK,GAAW;AAC5D,MAAI,OAAO,UAAU,YAAY,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACjE,SAAO,MAAM,QAAQ,EAAE,EAAE,QAAQ,UAAU,EAAE;AAC9C;;;AClCO,SAAS,WAAW,GAAmB;AAC7C,MAAI,CAAC,EAAG,QAAO;AACf,SAAO,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC,EAAE,YAAY;AAC3D;;;AJJA,IAAM,kBAYD;AAAA,EACJ,EAAE,KAAK,cAAc,OAAO,UAAU,OAAO,4BAA4B;AAAA,EACzE,EAAE,KAAK,WAAW,OAAO,OAAO,OAAO,+BAA+B;AAAA,EACtE,EAAE,KAAK,YAAY,OAAO,QAAQ,OAAO,+BAA+B;AAAA,EACxE,EAAE,KAAK,cAAc,OAAO,UAAU,OAAO,8BAA8B;AAAA,EAC3E;AAAA,IACC,KAAK;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EACR;AAAA,EACA,EAAE,KAAK,YAAY,OAAO,QAAQ,OAAO,8BAA8B;AACxE;AAOO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C;AAAA;AAyJN,gBAAgC;AAAA;AAAA,EAEhC,SAAS;AACR,QAAI,CAAC,KAAK,MAAM,SAAS,QAAQ;AAChC,aAAO;AAAA,IACR;AAEA,UAAM,SAAS,CAAC,GAAG,KAAK,KAAK,OAAO,EAAE;AAAA,MACrC,CAAC,GAAG,MAAM,EAAE,eAAe,EAAE;AAAA,IAC9B;AAEA,WAAO;AAAA;AAAA;AAAA,0BAGiB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,MAIjC,OAAO,IAAI,CAAC,MAAM,KAAK,gBAAgB,CAAC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,MAI1C,gBAAgB;AAAA,MACjB,CAAC,MAAM;AAAA;AAAA;AAAA,4BAGgB,EAAE,KAAK;AAAA;AAAA;AAAA,QAG3B,EAAE,KAAK;AAAA;AAAA,IAEX,CAAC;AAAA;AAAA;AAAA,EAGJ;AAAA,EAEQ,gBAAgB,GAAW;AAClC,UAAM,QAAQ,aAAa,WAAW,EAAE,MAAM,CAAC,KAAK;AAGpD,UAAM,SAAS,gBAAgB,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,EAAE,EAAE,GAAG,CAAW,CAAC;AACzE,UAAM,QAAQ,OAAO,OAAO,CAAC,GAAG,MAAM,IAAI,GAAG,CAAC;AAE9C,UAAM,aACL,OAAO,EAAE,kBAAkB,YAAY,EAAE,iBAAiB;AAC3D,UAAM,aAAa,aAChB,6BACA;AACH,UAAM,aAAa,aAAa,aAAa;AAE7C,UAAM,WACL,aAAa,EAAE,YAAY,CAAC,KAAK,aAAa,EAAE,aAAa,CAAC,IAC3D,GAAG,aAAa,EAAE,YAAY,CAAC,CAAC,MAAM,aAAa,EAAE,aAAa,CAAC,CAAC,OACpE;AAEJ,WAAO,2DAA2D,EAAE,MAAM;AAAA;AAAA,6CAE/B,KAAK;AAAA,MAC5C,EAAE,MAAM;AAAA,gDACkC,EAAE,YAAY,MAAM,EAAE,YAAY;AAAA;AAAA;AAAA,sEAGZ,EAAE,MAAM;AAAA,OAExE,QAAQ,IACL,gBAAgB,IAAI,CAAC,GAAG,MAAM;AAC9B,YAAM,IAAI,OAAO,CAAC;AAClB,UAAI,KAAK,EAAG,QAAO;AACnB,YAAM,OAAQ,IAAI,QAAS;AAC3B,aAAO;AAAA;AAAA,6BAEa,IAAI,iBAAiB,EAAE,KAAK;AAAA,kBACvC,EAAE,KAAK,KAAK,aAAa,GAAG,CAAC,CAAC;AAAA;AAAA,IAExC,CAAC,IACA,OACJ;AAAA;AAAA;AAAA;AAAA,MAIC,WAAW,iCAAiC,QAAQ,YAAY,OAAO;AAAA,mBAC1D,kBAAkB,UAAU,EAAE,KAAK,UAAU;AAAA;AAAA;AAAA,EAG/D;AACD;AA9Oa,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;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;AAmJD;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAxJlB,kBAyJZ;AAzJY,oBAAN;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB;",
+  "names": ["css", "css"]
+}

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

@@ -1 +1 @@
-{"version":3,"file":"synastry-chart.d.ts","sourceRoot":"","sources":["../../src/components/synastry-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG1D,OAAO,KAAK,EACX,yBAAyB,EACzB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAK3B,KAAK,WAAW,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAQzD,KAAK,mBAAmB,GAAG,yBAAyB,GAAG;IACtD,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;KAAE,CAAC;IACtC,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;KAAE,CAAC;CACtC,CAAC;AASF;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BA2JX;IAGF,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAExC,MAAM;IA2JN,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,sBAAsB;IA6B9B,OAAO,CAAC,aAAa;CAwBrB;AAwBD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}
+{"version":3,"file":"synastry-chart.d.ts","sourceRoot":"","sources":["../../src/components/synastry-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;AAG1D,OAAO,KAAK,EACX,yBAAyB,EACzB,kBAAkB,EAClB,MAAM,mBAAmB,CAAC;AAU3B,KAAK,WAAW,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAQzD,KAAK,mBAAmB,GAAG,yBAAyB,GAAG;IACtD,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;KAAE,CAAC;IACtC,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;KAAE,CAAC;CACtC,CAAC;AASF;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BA2JX;IAGF,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAExC,MAAM;IA2JN,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,sBAAsB;IA6B9B,OAAO,CAAC,aAAa;CAwBrB;AAOD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}

package/dist/components/synastry-chart.js

@@ -52,6 +52,23 @@ var SIGN_GLYPH = {
   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";
@@ -153,6 +170,22 @@ function formatNumber(value, dp = 1) {
   if (typeof value !== "number" || !Number.isFinite(value)) return "";
   return value.toFixed(dp).replace(/\.?0+$/, "");
 }
+var ASPECT_CLASS = {
+  conjunction: "aspect-conjunction",
+  sextile: "aspect-sextile",
+  square: "aspect-square",
+  trine: "aspect-trine",
+  opposition: "aspect-opposition"
+};
+function normalizeAspect(a) {
+  return (a.type ?? "").toLowerCase().replace(/_/g, "-");
+}
+
+// packages/ui/src/utils/string.ts
+function capitalize(s) {
+  if (!s) return "";
+  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
 
 // packages/ui/src/components/synastry-chart.ts
 var SIZE = 360;
@@ -290,21 +323,7 @@ var RoxySynastryChart = class extends LitElement {
     });
   }
   renderSigns() {
-    const order = [
-      "Aries",
-      "Taurus",
-      "Gemini",
-      "Cancer",
-      "Leo",
-      "Virgo",
-      "Libra",
-      "Scorpio",
-      "Sagittarius",
-      "Capricorn",
-      "Aquarius",
-      "Pisces"
-    ];
-    return order.map((s, i) => {
+    return SIGNS_ORDER.map((s, i) => {
       const angle = this.toAngle(i * 30 + 15);
       const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
       return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
@@ -531,20 +550,6 @@ __decorateClass([
 RoxySynastryChart = __decorateClass([
   customElement("roxy-synastry-chart")
 ], RoxySynastryChart);
-function capitalize(s) {
-  if (!s) return "";
-  return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
-}
-var ASPECT_CLASS = {
-  conjunction: "aspect-conjunction",
-  sextile: "aspect-sextile",
-  square: "aspect-square",
-  trine: "aspect-trine",
-  opposition: "aspect-opposition"
-};
-function normalizeAspect(a) {
-  return (a.type ?? "").toLowerCase().replace(/_/g, "-");
-}
 function formatStrength(s) {
   if (typeof s === "number") return Math.round(s).toString();
   return "";