@roxyapi/ui 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/README.md +1 -1
  2. package/dist/cdn/components/ashtakavarga-grid.js +3 -362
  3. package/dist/cdn/components/ashtakavarga-grid.js.map +2 -2
  4. package/dist/cdn/components/biorhythm-chart.js +2 -225
  5. package/dist/cdn/components/biorhythm-chart.js.map +2 -2
  6. package/dist/cdn/components/choghadiya-grid.js +2 -231
  7. package/dist/cdn/components/choghadiya-grid.js.map +2 -2
  8. package/dist/cdn/components/compatibility-card.js +2 -230
  9. package/dist/cdn/components/compatibility-card.js.map +2 -2
  10. package/dist/cdn/components/dasha-timeline.js +3 -283
  11. package/dist/cdn/components/dasha-timeline.js.map +4 -4
  12. package/dist/cdn/components/data.js +3 -230
  13. package/dist/cdn/components/data.js.map +2 -2
  14. package/dist/cdn/components/divisional-chart.js +3 -356
  15. package/dist/cdn/components/divisional-chart.js.map +4 -4
  16. package/dist/cdn/components/dosha-card.js +2 -225
  17. package/dist/cdn/components/dosha-card.js.map +2 -2
  18. package/dist/cdn/components/endpoint-form.js +2 -243
  19. package/dist/cdn/components/endpoint-form.js.map +2 -2
  20. package/dist/cdn/components/guna-milan.js +2 -269
  21. package/dist/cdn/components/guna-milan.js.map +2 -2
  22. package/dist/cdn/components/hexagram.js +3 -247
  23. package/dist/cdn/components/hexagram.js.map +2 -2
  24. package/dist/cdn/components/horoscope-card.js +3 -281
  25. package/dist/cdn/components/horoscope-card.js.map +2 -2
  26. package/dist/cdn/components/kp-chart.js +2 -277
  27. package/dist/cdn/components/kp-chart.js.map +2 -2
  28. package/dist/cdn/components/kp-planets-table.js +2 -195
  29. package/dist/cdn/components/kp-planets-table.js.map +2 -2
  30. package/dist/cdn/components/kp-ruling-planets.js +2 -240
  31. package/dist/cdn/components/kp-ruling-planets.js.map +2 -2
  32. package/dist/cdn/components/location-search.js +2 -240
  33. package/dist/cdn/components/location-search.js.map +2 -2
  34. package/dist/cdn/components/moon-phase.js +3 -223
  35. package/dist/cdn/components/moon-phase.js.map +2 -2
  36. package/dist/cdn/components/nakshatra-card.js +2 -200
  37. package/dist/cdn/components/nakshatra-card.js.map +2 -2
  38. package/dist/cdn/components/natal-chart.js +3 -563
  39. package/dist/cdn/components/natal-chart.js.map +4 -4
  40. package/dist/cdn/components/numerology-card.js +2 -232
  41. package/dist/cdn/components/numerology-card.js.map +2 -2
  42. package/dist/cdn/components/panchang-table.js +3 -220
  43. package/dist/cdn/components/panchang-table.js.map +2 -2
  44. package/dist/cdn/components/shadbala-table.js +3 -284
  45. package/dist/cdn/components/shadbala-table.js.map +2 -2
  46. package/dist/cdn/components/synastry-chart.js +2 -398
  47. package/dist/cdn/components/synastry-chart.js.map +2 -2
  48. package/dist/cdn/components/tarot-card.js +3 -261
  49. package/dist/cdn/components/tarot-card.js.map +2 -2
  50. package/dist/cdn/components/tarot-spread.js +2 -248
  51. package/dist/cdn/components/tarot-spread.js.map +2 -2
  52. package/dist/cdn/components/transits-table.js +3 -382
  53. package/dist/cdn/components/transits-table.js.map +4 -4
  54. package/dist/cdn/components/vedic-kundli.js +3 -305
  55. package/dist/cdn/components/vedic-kundli.js.map +4 -4
  56. package/dist/cdn/components/vedic-planets-table.js +2 -202
  57. package/dist/cdn/components/vedic-planets-table.js.map +2 -2
  58. package/dist/cdn/components/western-planets-table.js +3 -192
  59. package/dist/cdn/components/western-planets-table.js.map +2 -2
  60. package/dist/cdn/components/yoga-list.js +2 -305
  61. package/dist/cdn/components/yoga-list.js.map +2 -2
  62. package/dist/cdn/roxy-ui.js +3 -5102
  63. package/dist/cdn/roxy-ui.js.map +4 -4
  64. package/dist/cdn/widgets.js +1 -114
  65. package/dist/components/ashtakavarga-grid.js +1 -577
  66. package/dist/components/ashtakavarga-grid.js.map +3 -3
  67. package/dist/components/biorhythm-chart.js +1 -378
  68. package/dist/components/biorhythm-chart.js.map +3 -3
  69. package/dist/components/choghadiya-grid.js +1 -397
  70. package/dist/components/choghadiya-grid.js.map +3 -3
  71. package/dist/components/compatibility-card.js +1 -359
  72. package/dist/components/compatibility-card.js.map +3 -3
  73. package/dist/components/dasha-timeline.d.ts.map +1 -1
  74. package/dist/components/dasha-timeline.js +1 -447
  75. package/dist/components/dasha-timeline.js.map +4 -4
  76. package/dist/components/data.js +1 -408
  77. package/dist/components/data.js.map +3 -3
  78. package/dist/components/divisional-chart.d.ts.map +1 -1
  79. package/dist/components/divisional-chart.js +1 -932
  80. package/dist/components/divisional-chart.js.map +4 -4
  81. package/dist/components/dosha-card.js +1 -339
  82. package/dist/components/dosha-card.js.map +3 -3
  83. package/dist/components/endpoint-form.js +1 -505
  84. package/dist/components/endpoint-form.js.map +3 -3
  85. package/dist/components/guna-milan.js +1 -420
  86. package/dist/components/guna-milan.js.map +3 -3
  87. package/dist/components/hexagram.js +1 -426
  88. package/dist/components/hexagram.js.map +3 -3
  89. package/dist/components/horoscope-card.js +1 -427
  90. package/dist/components/horoscope-card.js.map +3 -3
  91. package/dist/components/kp-chart.js +1 -441
  92. package/dist/components/kp-chart.js.map +3 -3
  93. package/dist/components/kp-planets-table.js +1 -292
  94. package/dist/components/kp-planets-table.js.map +3 -3
  95. package/dist/components/kp-ruling-planets.js +1 -334
  96. package/dist/components/kp-ruling-planets.js.map +3 -3
  97. package/dist/components/location-search.js +1 -461
  98. package/dist/components/location-search.js.map +3 -3
  99. package/dist/components/moon-phase.js +1 -373
  100. package/dist/components/moon-phase.js.map +3 -3
  101. package/dist/components/nakshatra-card.js +1 -290
  102. package/dist/components/nakshatra-card.js.map +3 -3
  103. package/dist/components/natal-chart.d.ts +0 -1
  104. package/dist/components/natal-chart.d.ts.map +1 -1
  105. package/dist/components/natal-chart.js +1 -1086
  106. package/dist/components/natal-chart.js.map +4 -4
  107. package/dist/components/numerology-card.js +1 -361
  108. package/dist/components/numerology-card.js.map +3 -3
  109. package/dist/components/panchang-table.js +1 -396
  110. package/dist/components/panchang-table.js.map +3 -3
  111. package/dist/components/shadbala-table.js +1 -459
  112. package/dist/components/shadbala-table.js.map +3 -3
  113. package/dist/components/synastry-chart.js +1 -704
  114. package/dist/components/synastry-chart.js.map +3 -3
  115. package/dist/components/tarot-card.js +1 -379
  116. package/dist/components/tarot-card.js.map +3 -3
  117. package/dist/components/tarot-spread.js +1 -356
  118. package/dist/components/tarot-spread.js.map +3 -3
  119. package/dist/components/transits-table.d.ts +2 -0
  120. package/dist/components/transits-table.d.ts.map +1 -1
  121. package/dist/components/transits-table.js +1 -594
  122. package/dist/components/transits-table.js.map +4 -4
  123. package/dist/components/vedic-kundli.d.ts.map +1 -1
  124. package/dist/components/vedic-kundli.js +1 -848
  125. package/dist/components/vedic-kundli.js.map +4 -4
  126. package/dist/components/vedic-planets-table.js +1 -414
  127. package/dist/components/vedic-planets-table.js.map +3 -3
  128. package/dist/components/western-planets-table.js +1 -409
  129. package/dist/components/western-planets-table.js.map +3 -3
  130. package/dist/components/yoga-list.js +1 -429
  131. package/dist/components/yoga-list.js.map +3 -3
  132. package/dist/index.cjs +1 -8726
  133. package/dist/index.cjs.map +4 -4
  134. package/dist/index.js +1 -8706
  135. package/dist/index.js.map +4 -4
  136. package/dist/utils/disclosure.d.ts +16 -0
  137. package/dist/utils/disclosure.d.ts.map +1 -0
  138. package/dist/utils/kundli-render.d.ts.map +1 -1
  139. package/dist/utils/kundli-styles.d.ts.map +1 -1
  140. package/dist/utils/tablist.d.ts +44 -0
  141. package/dist/utils/tablist.d.ts.map +1 -0
  142. package/dist/version.d.ts +1 -1
  143. package/package.json +3 -1
  144. package/src/components/dasha-timeline.ts +10 -1
  145. package/src/components/divisional-chart.ts +2 -0
  146. package/src/components/natal-chart.ts +37 -62
  147. package/src/components/transits-table.ts +45 -18
  148. package/src/components/vedic-kundli.ts +2 -1
  149. package/src/utils/disclosure.ts +62 -0
  150. package/src/utils/kundli-render.ts +21 -35
  151. package/src/utils/kundli-styles.ts +0 -31
  152. package/src/utils/tablist.ts +124 -0
  153. package/src/version.ts +1 -1
@@ -1,933 +1,2 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __decorateClass = (decorators, target, key, kind) => {
4
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
5
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
6
- if (decorator = decorators[i])
7
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
8
- if (kind && result) __defProp(target, key, result);
9
- return result;
10
- };
11
-
12
- // packages/ui/src/components/divisional-chart.ts
13
- import { css as css3, html as html2, LitElement, nothing as nothing2 } from "lit";
14
- import { customElement, property } from "lit/decorators.js";
15
-
16
- // packages/ui/src/tokens/index.ts
17
- var PLANET_GLYPH = {
18
- Sun: "\u2609",
19
- Moon: "\u263D",
20
- Mercury: "\u263F",
21
- Venus: "\u2640",
22
- Earth: "\u2641",
23
- Mars: "\u2642",
24
- Jupiter: "\u2643",
25
- Saturn: "\u2644",
26
- Uranus: "\u2645",
27
- Neptune: "\u2646",
28
- Pluto: "\u2647",
29
- Rahu: "\u260A",
30
- Ketu: "\u260B",
31
- Ascendant: "Asc",
32
- Lagna: "La",
33
- NorthNode: "\u260A",
34
- SouthNode: "\u260B",
35
- "North node": "\u260A",
36
- "South node": "\u260B",
37
- Chiron: "\u26B7",
38
- Lilith: "\u26B8",
39
- "Black moon lilith": "\u26B8"
40
- };
41
- var PLANET_ABBR = {
42
- Sun: "Su",
43
- Moon: "Mo",
44
- Mercury: "Me",
45
- Venus: "Ve",
46
- Mars: "Ma",
47
- Jupiter: "Ju",
48
- Saturn: "Sa",
49
- Uranus: "Ur",
50
- Neptune: "Ne",
51
- Pluto: "Pl",
52
- Rahu: "Ra",
53
- Ketu: "Ke",
54
- Ascendant: "Asc",
55
- Lagna: "La"
56
- };
57
- var SIGN_ABBR = {
58
- Aries: "Ar",
59
- Taurus: "Ta",
60
- Gemini: "Ge",
61
- Cancer: "Cn",
62
- Leo: "Le",
63
- Virgo: "Vi",
64
- Libra: "Li",
65
- Scorpio: "Sc",
66
- Sagittarius: "Sg",
67
- Capricorn: "Cp",
68
- Aquarius: "Aq",
69
- Pisces: "Pi"
70
- };
71
- var SIGNS_ORDER = [
72
- "Aries",
73
- "Taurus",
74
- "Gemini",
75
- "Cancer",
76
- "Leo",
77
- "Virgo",
78
- "Libra",
79
- "Scorpio",
80
- "Sagittarius",
81
- "Capricorn",
82
- "Aquarius",
83
- "Pisces"
84
- ];
85
- var RASHI_KEYS = SIGNS_ORDER.map(
86
- (s) => s.toLowerCase()
87
- );
88
-
89
- // packages/ui/src/utils/base-styles.ts
90
- import { css } from "lit";
91
- var baseStyles = css`
92
- :host {
93
- display: block;
94
- container-type: inline-size;
95
- font-family: var(
96
- --roxy-font-sans,
97
- system-ui,
98
- -apple-system,
99
- BlinkMacSystemFont,
100
- 'Segoe UI',
101
- Roboto,
102
- sans-serif
103
- );
104
- color: var(--roxy-fg, #0a0a0a);
105
- background: transparent;
106
- font-size: var(--roxy-text-base, 1rem);
107
- line-height: var(--roxy-leading-normal, 1.5);
108
- animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
109
- var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
110
- }
111
-
112
- *,
113
- *::before,
114
- *::after {
115
- box-sizing: border-box;
116
- }
117
-
118
- @keyframes roxy-fade-in {
119
- from {
120
- opacity: 0;
121
- transform: translateY(2px);
122
- }
123
- to {
124
- opacity: 1;
125
- transform: translateY(0);
126
- }
127
- }
128
-
129
- @media (prefers-reduced-motion: reduce) {
130
- :host {
131
- animation: none;
132
- }
133
- }
134
-
135
- .roxy-skeleton {
136
- background: linear-gradient(
137
- 90deg,
138
- var(--roxy-border, #e4e4e7) 0%,
139
- color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
140
- var(--roxy-border, #e4e4e7) 100%
141
- );
142
- background-size: 200% 100%;
143
- animation: roxy-shimmer 1.4s ease-in-out infinite;
144
- border-radius: var(--roxy-radius-md, 8px);
145
- }
146
-
147
- @keyframes roxy-shimmer {
148
- 0% {
149
- background-position: 200% 0;
150
- }
151
- 100% {
152
- background-position: -200% 0;
153
- }
154
- }
155
-
156
- @media (prefers-reduced-motion: reduce) {
157
- .roxy-skeleton {
158
- animation: none;
159
- }
160
- }
161
-
162
- .roxy-empty {
163
- padding: var(--roxy-space-lg, 1.5rem);
164
- color: var(--roxy-muted, #71717a);
165
- text-align: center;
166
- font-size: var(--roxy-text-sm, 0.875rem);
167
- }
168
-
169
- :host(:focus-within) .roxy-card {
170
- outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
171
- outline-offset: 2px;
172
- }
173
-
174
- /* Force the text-style variant on every Unicode glyph in the component.
175
- * macOS and iOS substitute coloured emoji glyphs for the planetary and
176
- * gender Unicode code points (Mars, Venus, Mercury, etc.) when the
177
- * system colour-emoji font wins font selection. The text-style variant
178
- * keeps glyphs monochrome so they inherit the surrounding fill colour
179
- * and match the brand palette consistently across platforms.
180
- *
181
- * font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
182
- * Firefox 139+). On older browsers the rule is silently ignored.
183
- */
184
- :host {
185
- font-variant-emoji: text;
186
- }
187
- `;
188
-
189
- // packages/ui/src/utils/kundli-render.ts
190
- import { html, nothing, svg } from "lit";
191
-
192
- // packages/ui/src/utils/degree.ts
193
- function normalizeLongitude(lon) {
194
- const wrapped = lon % 360;
195
- return wrapped < 0 ? wrapped + 360 : wrapped;
196
- }
197
- function longitudeToSignPosition(longitude) {
198
- const lon = normalizeLongitude(longitude);
199
- const signIndex = Math.floor(lon / 30) % 12;
200
- const within = lon % 30;
201
- const degree = Math.floor(within);
202
- const minuteFloat = (within - degree) * 60;
203
- const minute = Math.floor(minuteFloat);
204
- const second = Math.round((minuteFloat - minute) * 60);
205
- return {
206
- sign: SIGNS_ORDER[signIndex] ?? "Aries",
207
- signIndex,
208
- degree,
209
- minute,
210
- second
211
- };
212
- }
213
-
214
- // packages/ui/src/utils/string.ts
215
- function capitalize(s) {
216
- if (!s) return "";
217
- return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
218
- }
219
-
220
- // packages/ui/src/utils/kundli-render.ts
221
- var VIEW_BOX = 400;
222
- var MARGIN = 20;
223
- var INNER = VIEW_BOX - 2 * MARGIN;
224
- var CENTRE = VIEW_BOX / 2;
225
- var RASHI_TO_SIGN = Object.fromEntries(
226
- SIGNS_ORDER.map((s) => [s.toLowerCase(), s])
227
- );
228
- var CHART_STYLES = [
229
- { id: "north", label: "North" },
230
- { id: "south", label: "South" },
231
- { id: "east", label: "East" }
232
- ];
233
- var RETRO_MARK = "\u02B3";
234
- function isDivisionalPlacement(p, cellSign) {
235
- if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude)) {
236
- return false;
237
- }
238
- return longitudeToSignPosition(p.longitude).sign.toLowerCase() !== cellSign.toLowerCase();
239
- }
240
- function grahaLabel(p, cellSign) {
241
- const abbr = PLANET_ABBR[capitalize(p.graha)] ?? p.graha.slice(0, 2);
242
- const retro = p.isRetrograde ? RETRO_MARK : "";
243
- if (typeof p.longitude !== "number" || !Number.isFinite(p.longitude) || isDivisionalPlacement(p, cellSign)) {
244
- return `${abbr}${retro}`;
245
- }
246
- const { degree } = longitudeToSignPosition(p.longitude);
247
- return `${abbr} ${degree}\xB0${retro}`;
248
- }
249
- function grahaTitle(p, cellSign) {
250
- const parts = [capitalize(p.graha)];
251
- const divisional = isDivisionalPlacement(p, cellSign);
252
- if (divisional) {
253
- parts.push(`in ${cellSign}`);
254
- }
255
- if (typeof p.longitude === "number" && Number.isFinite(p.longitude)) {
256
- const sp = longitudeToSignPosition(p.longitude);
257
- const minute = String(sp.minute).padStart(2, "0");
258
- parts.push(
259
- divisional ? `D1: ${sp.degree}\xB0${minute}' ${sp.sign}` : `${sp.degree}\xB0${minute}' ${sp.sign}`
260
- );
261
- }
262
- if (p.nakshatra?.name) {
263
- const pada = p.nakshatra.pada ? ` pada ${p.nakshatra.pada}` : "";
264
- parts.push(`${p.nakshatra.name}${pada}`);
265
- }
266
- if (p.awastha) parts.push(p.awastha);
267
- if (p.isRetrograde) parts.push("retrograde");
268
- return parts.join(" \xB7 ");
269
- }
270
- function renderPlanetStack(planets, cellSign, cx, baseY, lineHeight) {
271
- const startY = baseY - (planets.length - 1) * lineHeight / 2;
272
- return planets.map((p, j) => {
273
- const yPos = startY + j * lineHeight;
274
- return svg`<text class="planet-text" x=${cx} y=${yPos} text-anchor="middle" dominant-baseline="central">${grahaLabel(
275
- p,
276
- cellSign
277
- )}<title>${grahaTitle(p, cellSign)}</title></text>`;
278
- });
279
- }
280
- function toKundliViewModel(meta, divisionLabel) {
281
- const placements = {};
282
- for (const sign of SIGNS_ORDER) placements[sign.toLowerCase()] = [];
283
- let lagnaSign = "";
284
- for (const [name, pos] of Object.entries(meta ?? {})) {
285
- const rashiKey = (pos?.rashi ?? "").toLowerCase();
286
- if (name === "Lagna" || pos?.graha === "Lagna") {
287
- lagnaSign = RASHI_TO_SIGN[rashiKey] ?? "";
288
- continue;
289
- }
290
- if (!rashiKey || !(rashiKey in placements)) continue;
291
- placements[rashiKey]?.push({
292
- graha: pos.graha ?? name,
293
- longitude: pos.longitude,
294
- nakshatra: pos.nakshatra,
295
- isRetrograde: pos.isRetrograde,
296
- awastha: pos.awastha
297
- });
298
- }
299
- return { lagnaSign, placements, divisionLabel };
300
- }
301
- var SOUTH_CELL = INNER / 4;
302
- var SOUTH_CELL_GRID = {
303
- Pisces: { col: 0, row: 0 },
304
- Aries: { col: 1, row: 0 },
305
- Taurus: { col: 2, row: 0 },
306
- Gemini: { col: 3, row: 0 },
307
- Cancer: { col: 3, row: 1 },
308
- Leo: { col: 3, row: 2 },
309
- Virgo: { col: 3, row: 3 },
310
- Libra: { col: 2, row: 3 },
311
- Scorpio: { col: 1, row: 3 },
312
- Sagittarius: { col: 0, row: 3 },
313
- Capricorn: { col: 0, row: 2 },
314
- Aquarius: { col: 0, row: 1 }
315
- };
316
- function southCellRect(sign) {
317
- const g = SOUTH_CELL_GRID[sign] ?? { col: 0, row: 0 };
318
- return {
319
- x: MARGIN + g.col * SOUTH_CELL,
320
- y: MARGIN + g.row * SOUTH_CELL,
321
- w: SOUTH_CELL,
322
- h: SOUTH_CELL
323
- };
324
- }
325
- function renderSouthFrame(divisionLabel) {
326
- const a = MARGIN;
327
- const b = MARGIN + SOUTH_CELL;
328
- const c = MARGIN + 2 * SOUTH_CELL;
329
- const d = MARGIN + 3 * SOUTH_CELL;
330
- const e = VIEW_BOX - MARGIN;
331
- return svg`
332
- <rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
333
- <line class="line" x1=${a} y1=${b} x2=${e} y2=${b} stroke-width="1" />
334
- <line class="line" x1=${a} y1=${d} x2=${e} y2=${d} stroke-width="1" />
335
- <line class="line" x1=${b} y1=${a} x2=${b} y2=${e} stroke-width="1" />
336
- <line class="line" x1=${d} y1=${a} x2=${d} y2=${e} stroke-width="1" />
337
- <line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
338
- <line class="line" x1=${d} y1=${c} x2=${e} y2=${c} stroke-width="1" />
339
- <line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
340
- <line class="line" x1=${c} y1=${d} x2=${c} y2=${e} stroke-width="1" />
341
- ${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
342
- `;
343
- }
344
- function houseNumberInSign(sign, lagnaSign) {
345
- const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
346
- const signIdx = SIGNS_ORDER.findIndex((s) => s === sign);
347
- if (lagnaIdx === -1 || signIdx === -1) return 0;
348
- return (signIdx - lagnaIdx + 12) % 12 + 1;
349
- }
350
- function renderSouthCell(sign, planets, isLagna, houseNum) {
351
- const r = southCellRect(sign);
352
- const cx = r.x + r.w / 2;
353
- const cy = r.y + r.h / 2;
354
- const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
355
- const slashInset = 14;
356
- return svg`
357
- <g class=${isLagna ? "cell lagna" : "cell"}>
358
- ${isLagna ? svg`
359
- <rect class="lagna-bg" x=${r.x} y=${r.y} width=${r.w} height=${r.h} />
360
- <line class="lagna-slash" x1=${r.x + r.w - slashInset} y1=${r.y + slashInset} x2=${r.x + slashInset} y2=${r.y + r.h - slashInset} stroke-width="1.2" />
361
- ` : nothing}
362
- <text class="sign-text" x=${r.x + 6} y=${r.y + 12} text-anchor="start" dominant-baseline="central">${signAbbr}</text>
363
- ${houseNum > 0 ? svg`<text class="house-num" x=${r.x + r.w - 6} y=${r.y + 12} text-anchor="end" dominant-baseline="central">${houseNum}</text>` : nothing}
364
- ${planets.length ? renderPlanetStack(planets, sign, cx, cy + 4, 14) : nothing}
365
- </g>
366
- `;
367
- }
368
- function renderSouthSvg(vm) {
369
- const lagnaKey = vm.lagnaSign.toLowerCase();
370
- return svg`
371
- ${renderSouthFrame(vm.divisionLabel)}
372
- ${SIGNS_ORDER.map(
373
- (sign) => renderSouthCell(
374
- sign,
375
- vm.placements[sign.toLowerCase()] ?? [],
376
- sign.toLowerCase() === lagnaKey,
377
- houseNumberInSign(sign, vm.lagnaSign)
378
- )
379
- )}
380
- `;
381
- }
382
- var NORTH_VERTICES = {
383
- tl: { x: MARGIN, y: MARGIN },
384
- tr: { x: VIEW_BOX - MARGIN, y: MARGIN },
385
- br: { x: VIEW_BOX - MARGIN, y: VIEW_BOX - MARGIN },
386
- bl: { x: MARGIN, y: VIEW_BOX - MARGIN },
387
- top: { x: CENTRE, y: MARGIN },
388
- right: { x: VIEW_BOX - MARGIN, y: CENTRE },
389
- bottom: { x: CENTRE, y: VIEW_BOX - MARGIN },
390
- left: { x: MARGIN, y: CENTRE },
391
- tlMid: { x: CENTRE - INNER / 4, y: CENTRE - INNER / 4 },
392
- trMid: { x: CENTRE + INNER / 4, y: CENTRE - INNER / 4 },
393
- brMid: { x: CENTRE + INNER / 4, y: CENTRE + INNER / 4 },
394
- blMid: { x: CENTRE - INNER / 4, y: CENTRE + INNER / 4 }
395
- };
396
- function centroidOf(pts) {
397
- const x = pts.reduce((s, p) => s + p.x, 0) / pts.length;
398
- const y = pts.reduce((s, p) => s + p.y, 0) / pts.length;
399
- return { x, y };
400
- }
401
- var NORTH_HOUSE_CENTERS = {
402
- 1: { x: CENTRE, y: NORTH_VERTICES.tlMid.y },
403
- 2: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.top, NORTH_VERTICES.tlMid]),
404
- 3: centroidOf([NORTH_VERTICES.tl, NORTH_VERTICES.left, NORTH_VERTICES.tlMid]),
405
- 4: { x: NORTH_VERTICES.tlMid.x, y: CENTRE },
406
- 5: centroidOf([NORTH_VERTICES.bl, NORTH_VERTICES.left, NORTH_VERTICES.blMid]),
407
- 6: centroidOf([
408
- NORTH_VERTICES.bl,
409
- NORTH_VERTICES.bottom,
410
- NORTH_VERTICES.blMid
411
- ]),
412
- 7: { x: CENTRE, y: NORTH_VERTICES.blMid.y },
413
- 8: centroidOf([
414
- NORTH_VERTICES.br,
415
- NORTH_VERTICES.bottom,
416
- NORTH_VERTICES.brMid
417
- ]),
418
- 9: centroidOf([
419
- NORTH_VERTICES.br,
420
- NORTH_VERTICES.right,
421
- NORTH_VERTICES.brMid
422
- ]),
423
- 10: { x: NORTH_VERTICES.brMid.x, y: CENTRE },
424
- 11: centroidOf([
425
- NORTH_VERTICES.tr,
426
- NORTH_VERTICES.right,
427
- NORTH_VERTICES.trMid
428
- ]),
429
- 12: centroidOf([NORTH_VERTICES.tr, NORTH_VERTICES.top, NORTH_VERTICES.trMid])
430
- };
431
- function rashiInHouse(houseNum, lagnaSign) {
432
- const lagnaIdx = SIGNS_ORDER.findIndex((s) => s === lagnaSign);
433
- if (lagnaIdx === -1) return houseNum;
434
- return (lagnaIdx + houseNum - 1) % 12 + 1;
435
- }
436
- function renderNorthFrame(divisionLabel) {
437
- const { tl, tr, br, bl, top, right, bottom, left } = NORTH_VERTICES;
438
- return svg`
439
- <rect class="line" x=${tl.x} y=${tl.y} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
440
- <polygon class="line" points="${top.x},${top.y} ${right.x},${right.y} ${bottom.x},${bottom.y} ${left.x},${left.y}" stroke-width="1" fill="none" />
441
- <line class="line" x1=${tl.x} y1=${tl.y} x2=${br.x} y2=${br.y} stroke-width="1" />
442
- <line class="line" x1=${tr.x} y1=${tr.y} x2=${bl.x} y2=${bl.y} stroke-width="1" />
443
- ${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
444
- `;
445
- }
446
- function renderNorthCell(houseNum, rashiNum, sign, planets, isLagna) {
447
- const c = NORTH_HOUSE_CENTERS[houseNum];
448
- if (!c) return svg``;
449
- const rashiOffsetY = Math.min(14, Math.abs(c.y - CENTRE) * 0.45 + 6);
450
- const ascOffsetY = rashiOffsetY + 12;
451
- return svg`
452
- <g class=${isLagna ? "cell lagna" : "cell"}>
453
- <text class="rashi-num" x=${c.x} y=${c.y - rashiOffsetY} text-anchor="middle" dominant-baseline="central">${rashiNum}</text>
454
- ${isLagna ? svg`<text class="lagna-marker" x=${c.x} y=${c.y - ascOffsetY} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing}
455
- ${planets.length ? renderPlanetStack(planets, sign, c.x, c.y + 8, 12) : nothing}
456
- </g>
457
- `;
458
- }
459
- function renderNorthSvg(vm) {
460
- const lagnaSign = vm.lagnaSign || "Aries";
461
- return svg`
462
- ${renderNorthFrame(vm.divisionLabel)}
463
- ${Array.from({ length: 12 }, (_, i) => {
464
- const houseNum = i + 1;
465
- const rashiNum = rashiInHouse(houseNum, lagnaSign);
466
- const sign = SIGNS_ORDER[rashiNum - 1] ?? "Aries";
467
- return renderNorthCell(
468
- houseNum,
469
- rashiNum,
470
- sign,
471
- vm.placements[sign.toLowerCase()] ?? [],
472
- houseNum === 1
473
- );
474
- })}
475
- `;
476
- }
477
- var EAST_CELL = INNER / 3;
478
- function eastCells() {
479
- const a = MARGIN;
480
- const b = MARGIN + EAST_CELL;
481
- const c = MARGIN + 2 * EAST_CELL;
482
- const d = VIEW_BOX - MARGIN;
483
- const aries = [
484
- { x: b, y: a },
485
- { x: c, y: a },
486
- { x: c, y: b },
487
- { x: b, y: b }
488
- ];
489
- const cancer = [
490
- { x: a, y: b },
491
- { x: b, y: b },
492
- { x: b, y: c },
493
- { x: a, y: c }
494
- ];
495
- const libra = [
496
- { x: b, y: c },
497
- { x: c, y: c },
498
- { x: c, y: d },
499
- { x: b, y: d }
500
- ];
501
- const capricorn = [
502
- { x: c, y: b },
503
- { x: d, y: b },
504
- { x: d, y: c },
505
- { x: c, y: c }
506
- ];
507
- const taurus = [
508
- { x: a, y: a },
509
- { x: b, y: a },
510
- { x: b, y: b }
511
- ];
512
- const gemini = [
513
- { x: a, y: a },
514
- { x: b, y: b },
515
- { x: a, y: b }
516
- ];
517
- const leo = [
518
- { x: a, y: c },
519
- { x: b, y: c },
520
- { x: a, y: d }
521
- ];
522
- const virgo = [
523
- { x: b, y: c },
524
- { x: b, y: d },
525
- { x: a, y: d }
526
- ];
527
- const scorpio = [
528
- { x: c, y: c },
529
- { x: c, y: d },
530
- { x: d, y: d }
531
- ];
532
- const sagittarius = [
533
- { x: c, y: c },
534
- { x: d, y: d },
535
- { x: d, y: c }
536
- ];
537
- const aquarius = [
538
- { x: d, y: a },
539
- { x: d, y: b },
540
- { x: c, y: b }
541
- ];
542
- const pisces = [
543
- { x: c, y: a },
544
- { x: d, y: a },
545
- { x: c, y: b }
546
- ];
547
- const polys = {
548
- Aries: aries,
549
- Taurus: taurus,
550
- Gemini: gemini,
551
- Cancer: cancer,
552
- Leo: leo,
553
- Virgo: virgo,
554
- Libra: libra,
555
- Scorpio: scorpio,
556
- Sagittarius: sagittarius,
557
- Capricorn: capricorn,
558
- Aquarius: aquarius,
559
- Pisces: pisces
560
- };
561
- const out = {};
562
- for (const [sign, points] of Object.entries(polys)) {
563
- out[sign] = { points: [...points], centroid: centroidOf(points) };
564
- }
565
- return out;
566
- }
567
- var EAST_CELLS = eastCells();
568
- function renderEastFrame(divisionLabel) {
569
- const a = MARGIN;
570
- const b = MARGIN + EAST_CELL;
571
- const c = MARGIN + 2 * EAST_CELL;
572
- const d = VIEW_BOX - MARGIN;
573
- return svg`
574
- <rect class="line" x=${a} y=${a} width=${INNER} height=${INNER} stroke-width="1.5" fill="none" />
575
- <line class="line" x1=${a} y1=${b} x2=${b} y2=${b} stroke-width="1" />
576
- <line class="line" x1=${c} y1=${b} x2=${d} y2=${b} stroke-width="1" />
577
- <line class="line" x1=${a} y1=${c} x2=${b} y2=${c} stroke-width="1" />
578
- <line class="line" x1=${c} y1=${c} x2=${d} y2=${c} stroke-width="1" />
579
- <line class="line" x1=${b} y1=${a} x2=${b} y2=${b} stroke-width="1" />
580
- <line class="line" x1=${b} y1=${c} x2=${b} y2=${d} stroke-width="1" />
581
- <line class="line" x1=${c} y1=${a} x2=${c} y2=${b} stroke-width="1" />
582
- <line class="line" x1=${c} y1=${c} x2=${c} y2=${d} stroke-width="1" />
583
- <line class="line" x1=${a} y1=${a} x2=${b} y2=${b} stroke-width="1" />
584
- <line class="line" x1=${d} y1=${a} x2=${c} y2=${b} stroke-width="1" />
585
- <line class="line" x1=${d} y1=${d} x2=${c} y2=${c} stroke-width="1" />
586
- <line class="line" x1=${a} y1=${d} x2=${b} y2=${c} stroke-width="1" />
587
- ${divisionLabel ? svg`<text class="centre-label" x=${CENTRE} y=${CENTRE} text-anchor="middle" dominant-baseline="central">${divisionLabel}</text>` : nothing}
588
- `;
589
- }
590
- function renderEastCell(sign, planets, isLagna, houseNum) {
591
- const cell = EAST_CELLS[sign];
592
- if (!cell) return svg``;
593
- const { centroid: cen, points } = cell;
594
- const signAbbr = SIGN_ABBR[sign] ?? sign.slice(0, 2);
595
- const polyPoints = points.map((p) => `${p.x},${p.y}`).join(" ");
596
- return svg`
597
- <g class=${isLagna ? "cell lagna" : "cell"}>
598
- ${isLagna ? svg`<polygon class="lagna-bg" points=${polyPoints} />` : nothing}
599
- <text class="sign-text" x=${cen.x} y=${cen.y - 16} text-anchor="middle" dominant-baseline="central">${signAbbr}</text>
600
- ${houseNum > 0 ? svg`<text class="house-num" x=${cen.x + 18} y=${cen.y - 16} text-anchor="start" dominant-baseline="central">${houseNum}</text>` : nothing}
601
- ${isLagna ? svg`<text class="lagna-marker" x=${cen.x} y=${cen.y - 30} text-anchor="middle" dominant-baseline="central">Asc</text>` : nothing}
602
- ${planets.length ? renderPlanetStack(planets, sign, cen.x, cen.y + 4, 12) : nothing}
603
- </g>
604
- `;
605
- }
606
- function renderEastSvg(vm) {
607
- const lagnaKey = vm.lagnaSign.toLowerCase();
608
- return svg`
609
- ${renderEastFrame(vm.divisionLabel)}
610
- ${SIGNS_ORDER.map(
611
- (sign) => renderEastCell(
612
- sign,
613
- vm.placements[sign.toLowerCase()] ?? [],
614
- sign.toLowerCase() === lagnaKey,
615
- houseNumberInSign(sign, vm.lagnaSign)
616
- )
617
- )}
618
- `;
619
- }
620
- function renderKundliSvg(vm, style) {
621
- switch (style) {
622
- case "north":
623
- return renderNorthSvg(vm);
624
- case "east":
625
- return renderEastSvg(vm);
626
- default:
627
- return renderSouthSvg(vm);
628
- }
629
- }
630
- function renderKundliStyleTablist(active, setStyle) {
631
- const onKeyDown = (e) => {
632
- const idx = CHART_STYLES.findIndex((s) => s.id === active);
633
- if (e.key === "ArrowRight") {
634
- e.preventDefault();
635
- const next = CHART_STYLES[(idx + 1) % CHART_STYLES.length];
636
- if (next) setStyle(next.id);
637
- } else if (e.key === "ArrowLeft") {
638
- e.preventDefault();
639
- const next = CHART_STYLES[(idx - 1 + CHART_STYLES.length) % CHART_STYLES.length];
640
- if (next) setStyle(next.id);
641
- }
642
- };
643
- return html`<div
644
- class="kundli-tablist"
645
- role="tablist"
646
- aria-label="Kundli style"
647
- @keydown=${onKeyDown}
648
- >
649
- ${CHART_STYLES.map(
650
- (s) => html`<button
651
- type="button"
652
- class="kundli-tab"
653
- role="tab"
654
- id="kundli-tab-${s.id}"
655
- aria-selected=${active === s.id ? "true" : "false"}
656
- tabindex=${active === s.id ? "0" : "-1"}
657
- @click=${() => setStyle(s.id)}
658
- >
659
- ${s.label}
660
- </button>`
661
- )}
662
- </div>`;
663
- }
664
-
665
- // packages/ui/src/utils/kundli-styles.ts
666
- import { css as css2 } from "lit";
667
- var kundliStyles = css2`
668
- .wrap {
669
- display: grid;
670
- gap: var(--roxy-space-md, 1rem);
671
- }
672
- .header {
673
- display: flex;
674
- flex-wrap: wrap;
675
- align-items: center;
676
- justify-content: space-between;
677
- gap: var(--roxy-space-sm, 0.5rem);
678
- }
679
- .title {
680
- font-size: var(--roxy-text-lg, 1.125rem);
681
- font-weight: var(--roxy-weight-bold, 600);
682
- margin: 0;
683
- }
684
- .kundli-tablist {
685
- display: inline-flex;
686
- gap: 2px;
687
- border-bottom: 2px solid var(--roxy-border, #e4e4e7);
688
- }
689
- .kundli-tab {
690
- padding: var(--roxy-space-xs, 0.25rem) var(--roxy-space-md, 1rem);
691
- font-size: var(--roxy-text-sm, 0.875rem);
692
- background: none;
693
- border: none;
694
- border-bottom: 2px solid transparent;
695
- margin-bottom: -2px;
696
- cursor: pointer;
697
- color: var(--roxy-muted, #71717a);
698
- font-family: inherit;
699
- transition: color var(--roxy-motion-duration, 200ms)
700
- var(--roxy-motion-easing, ease);
701
- }
702
- .kundli-tab[aria-selected='true'] {
703
- color: var(--roxy-accent-fg, #b45309);
704
- border-bottom-color: var(--roxy-accent, #f59e0b);
705
- font-weight: var(--roxy-weight-bold, 600);
706
- }
707
- .kundli-tab:hover:not([aria-selected='true']) {
708
- color: var(--roxy-fg, #0a0a0a);
709
- }
710
- .kundli-tab:focus-visible {
711
- outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
712
- outline-offset: 2px;
713
- border-radius: 4px;
714
- }
715
- svg {
716
- display: block;
717
- width: 100%;
718
- max-width: 560px;
719
- aspect-ratio: 1 / 1;
720
- height: auto;
721
- margin: 0 auto;
722
- }
723
- .line {
724
- fill: transparent;
725
- stroke: var(--roxy-border, #d4d4d8);
726
- }
727
- .sign-text {
728
- fill: var(--roxy-muted, #71717a);
729
- font-size: 11px;
730
- font-weight: 500;
731
- font-family: var(--roxy-font-sans);
732
- text-transform: uppercase;
733
- letter-spacing: 0.04em;
734
- }
735
- .rashi-num {
736
- fill: var(--roxy-muted, #71717a);
737
- font-size: 12px;
738
- font-weight: 500;
739
- font-family: var(--roxy-font-sans);
740
- }
741
- .house-num {
742
- fill: var(--roxy-accent-fg, #b45309);
743
- font-size: 11px;
744
- font-weight: 600;
745
- font-family: var(--roxy-font-sans);
746
- opacity: 0.85;
747
- }
748
- .planet-text {
749
- fill: var(--roxy-fg, #0a0a0a);
750
- font-size: 13px;
751
- font-weight: 600;
752
- font-family: var(--roxy-font-sans);
753
- }
754
- .centre-label {
755
- fill: var(--roxy-muted, #71717a);
756
- font-size: 14px;
757
- font-weight: 600;
758
- font-family: var(--roxy-font-sans);
759
- letter-spacing: 0.02em;
760
- }
761
- .lagna-marker {
762
- fill: var(--roxy-accent-fg, #b45309);
763
- font-size: 10px;
764
- font-weight: 700;
765
- font-family: var(--roxy-font-sans);
766
- letter-spacing: 0.08em;
767
- text-transform: uppercase;
768
- }
769
- .lagna-bg {
770
- fill: color-mix(in srgb, var(--roxy-accent, #f59e0b) 14%, transparent);
771
- }
772
- .lagna-slash {
773
- stroke: var(--roxy-accent, #f59e0b);
774
- stroke-linecap: round;
775
- opacity: 0.7;
776
- }
777
- `;
778
-
779
- // packages/ui/src/utils/markup-data.ts
780
- var ROXY_DATA_CLASS = "roxy-data";
781
- function isJsonScript(el) {
782
- return el.nodeName === "SCRIPT" && el.getAttribute("type") === "application/json";
783
- }
784
- var MarkupDataController = class {
785
- constructor(host) {
786
- this.host = host;
787
- host.addController(this);
788
- }
789
- hostConnected() {
790
- if (this.host.data != null) return;
791
- const parsed = this.read();
792
- if (parsed === void 0) return;
793
- this.host.data = parsed;
794
- this.host.requestUpdate();
795
- }
796
- /**
797
- * Resolve the embedded payload. Returns `undefined` when there is nothing valid to read so the caller can leave `host.data` untouched.
798
- */
799
- read() {
800
- const inline = this.findInlineScript();
801
- return inline ? this.parse(inline.textContent) : void 0;
802
- }
803
- /**
804
- * Direct-child `<script type="application/json" class="roxy-data">`. Scoped to immediate children so a nested data-driven component never has its script read by an ancestor, and so sibling fallback markup is ignored.
805
- */
806
- findInlineScript() {
807
- for (const child of Array.from(this.host.children)) {
808
- if (isJsonScript(child) && child.classList.contains(ROXY_DATA_CLASS)) {
809
- return child;
810
- }
811
- }
812
- return null;
813
- }
814
- parse(text) {
815
- if (!text?.trim()) return void 0;
816
- try {
817
- return JSON.parse(text);
818
- } catch {
819
- return void 0;
820
- }
821
- }
822
- };
823
-
824
- // packages/ui/src/components/divisional-chart.ts
825
- var RoxyDivisionalChart = class extends LitElement {
826
- constructor() {
827
- super();
828
- this.data = null;
829
- this.chartStyle = "north";
830
- this.setStyle = (next) => {
831
- this.chartStyle = next;
832
- };
833
- new MarkupDataController(this);
834
- }
835
- viewModel() {
836
- if (!this.data?.chart?.meta) return null;
837
- const { division } = this.data;
838
- const label = `D${division.number} ${division.name}`;
839
- return toKundliViewModel(this.data.chart.meta, label);
840
- }
841
- render() {
842
- const vm = this.viewModel();
843
- if (!this.data || !vm)
844
- return html2`<div class="roxy-empty" role="status">No divisional chart data</div>`;
845
- const { division, vargottama } = this.data;
846
- return html2`<div class="wrap">
847
- <div class="header">
848
- <div>
849
- <h2 class="title">
850
- D${division.number} ${division.name}
851
- ${division.sanskritName && division.sanskritName !== division.name ? html2`<span class="division-meta"> · ${division.sanskritName}</span>` : nothing2}
852
- </h2>
853
- ${division.significance ? html2`<p class="significance">${division.significance}</p>` : nothing2}
854
- </div>
855
- ${renderKundliStyleTablist(this.chartStyle, this.setStyle)}
856
- </div>
857
-
858
- <svg
859
- viewBox="0 0 400 400"
860
- preserveAspectRatio="xMidYMid meet"
861
- role="img"
862
- aria-label="D${division.number} ${division.name} divisional chart with twelve sign houses"
863
- >
864
- <title>D${division.number} ${division.name}</title>
865
- ${renderKundliSvg(vm, this.chartStyle)}
866
- </svg>
867
-
868
- ${vargottama && vargottama.length > 0 ? html2`<div class="vargottama-row" role="list" aria-label="Vargottama planets">
869
- <span class="vargottama-label">Vargottama:</span>
870
- ${vargottama.map(
871
- (planet) => html2`<span class="vargottama-pill" role="listitem">
872
- ${PLANET_GLYPH[planet] ?? ""} ${planet}
873
- </span>`
874
- )}
875
- </div>` : nothing2}
876
- </div>`;
877
- }
878
- };
879
- RoxyDivisionalChart.styles = [
880
- baseStyles,
881
- kundliStyles,
882
- css3`
883
- .division-meta {
884
- font-size: var(--roxy-text-sm, 0.875rem);
885
- color: var(--roxy-muted, #71717a);
886
- margin: 0;
887
- }
888
- .significance {
889
- font-size: var(--roxy-text-sm, 0.875rem);
890
- color: var(--roxy-muted, #71717a);
891
- border-left: 2px solid var(--roxy-border, #e4e4e7);
892
- padding-left: var(--roxy-space-sm, 0.5rem);
893
- margin: 0;
894
- }
895
- .vargottama-row {
896
- display: flex;
897
- flex-wrap: wrap;
898
- gap: var(--roxy-space-xs, 0.25rem);
899
- align-items: center;
900
- }
901
- .vargottama-label {
902
- font-size: var(--roxy-text-sm, 0.875rem);
903
- color: var(--roxy-muted, #71717a);
904
- font-weight: 500;
905
- margin-right: var(--roxy-space-xs, 0.25rem);
906
- }
907
- .vargottama-pill {
908
- display: inline-flex;
909
- align-items: center;
910
- gap: 0.2em;
911
- font-size: var(--roxy-text-sm, 0.875rem);
912
- font-weight: 600;
913
- padding: 0.15em 0.6em;
914
- border-radius: 999px;
915
- background: color-mix(in srgb, var(--roxy-accent, #f59e0b) 22%, transparent);
916
- color: var(--roxy-fg, #0a0a0a);
917
- border: 1px solid color-mix(in srgb, var(--roxy-accent, #f59e0b) 45%, transparent);
918
- }
919
- `
920
- ];
921
- __decorateClass([
922
- property({ attribute: false })
923
- ], RoxyDivisionalChart.prototype, "data", 2);
924
- __decorateClass([
925
- property({ type: String, reflect: true, attribute: "chart-style" })
926
- ], RoxyDivisionalChart.prototype, "chartStyle", 2);
927
- RoxyDivisionalChart = __decorateClass([
928
- customElement("roxy-divisional-chart")
929
- ], RoxyDivisionalChart);
930
- export {
931
- RoxyDivisionalChart
932
- };
1
+ var X=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var S=(e,t,r,n)=>{for(var o=n>1?void 0:n?Z(t,r):t,a=e.length-1,i;a>=0;a--)(i=e[a])&&(o=(n?i(t,r,o):i(o))||o);return n&&o&&X(t,r,o),o};import{css as Tt,html as w,LitElement as Mt,nothing as L}from"lit";import{customElement as Ct,property as U}from"lit/decorators.js";var G={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"},K={Sun:"Su",Moon:"Mo",Mercury:"Me",Venus:"Ve",Mars:"Ma",Jupiter:"Ju",Saturn:"Sa",Uranus:"Ur",Neptune:"Ne",Pluto:"Pl",Rahu:"Ra",Ketu:"Ke",Ascendant:"Asc",Lagna:"La"};var R={Aries:"Ar",Taurus:"Ta",Gemini:"Ge",Cancer:"Cn",Leo:"Le",Virgo:"Vi",Libra:"Li",Scorpio:"Sc",Sagittarius:"Sg",Capricorn:"Cp",Aquarius:"Aq",Pisces:"Pi"},g=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],Pt=g.map(e=>e.toLowerCase());import{css as Q}from"lit";var O=Q`:host{font-family:var(--roxy-font-sans,system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:var(--roxy-fg,#0a0a0a);font-size:var(--roxy-text-base,1rem);line-height:var(--roxy-leading-normal,1.5);animation:roxy-fade-in var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,cubic-bezier(.4, 0, .2, 1)) both;background:0 0;display:block;container-type:inline-size}*,:before,:after{box-sizing:border-box}@keyframes roxy-fade-in{0%{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%);border-radius:var(--roxy-radius-md,8px);background-size:200% 100%;animation:1.4s ease-in-out infinite roxy-shimmer}@keyframes roxy-shimmer{0%{background-position:200% 0}to{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,.875rem)}:host(:focus-within) .roxy-card{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px}:host{font-variant-emoji:text}`;import{nothing as y,svg as u}from"lit";function tt(e){let t=e%360;return t<0?t+360:t}function k(e){let t=tt(e),r=Math.floor(t/30)%12,n=t%30,o=Math.floor(n),a=(n-o)*60,i=Math.floor(a),m=Math.round((a-i)*60);return{sign:g[r]??"Aries",signIndex:r,degree:o,minute:i,second:m}}function C(e){return e?e.charAt(0).toUpperCase()+e.slice(1).toLowerCase():""}import{css as et,html as z,nothing as rt}from"lit";var H=et`.roxy-tablist{border-bottom:2px solid var(--roxy-border,#e4e4e7);gap:2px;display:flex}.roxy-tab{padding:var(--roxy-space-xs,.25rem) var(--roxy-space-md,1rem);font-size:var(--roxy-text-sm,.875rem);cursor:pointer;color:var(--roxy-muted,#71717a);transition:color var(--roxy-motion-duration,.2s) var(--roxy-motion-easing,ease);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-family:inherit}.roxy-tab[aria-selected=true]{color:var(--roxy-accent-fg,#b45309);border-bottom-color:var(--roxy-accent,#f59e0b);font-weight:var(--roxy-weight-bold,600)}.roxy-tab:hover:not([aria-selected=true]){color:var(--roxy-fg,#0a0a0a)}.roxy-tab:focus-visible{outline:2px solid var(--roxy-ring,#f59e0b66);outline-offset:2px;border-radius:4px}`;function V(e){let{items:t,active:r,onSelect:n,label:o,idPrefix:a,controls:i=!1}=e;return z`<div class="roxy-tablist" role="tablist" aria-label="${o}" @keydown="${l=>{if(l.key!=="ArrowRight"&&l.key!=="ArrowLeft")return;l.preventDefault();let $=t.findIndex(N=>N.id===r);if($===-1)return;let E=l.key==="ArrowRight"?1:-1,v=t[($+E+t.length)%t.length];if(!v)return;n(v.id);let P=l.currentTarget.getRootNode();requestAnimationFrame(()=>{P.querySelector(`#${a}-tab-${v.id}`)?.focus()})}}">${t.map(l=>z`<button type="button" class="roxy-tab" role="tab" id="${a}-tab-${l.id}" aria-selected="${r===l.id?"true":"false"}" aria-controls="${i&&r===l.id?`${a}-panel-${l.id}`:rt}" tabindex="${r===l.id?"0":"-1"}" @click="${()=>n(l.id)}">${l.label}</button>`)}</div>`}var p=400,c=20,x=p-2*c,d=p/2,nt=Object.fromEntries(g.map(e=>[e.toLowerCase(),e])),ot=[{id:"north",label:"North"},{id:"south",label:"South"},{id:"east",label:"East"}],at="\u02B3";function D(e,t){return typeof e.longitude!="number"||!Number.isFinite(e.longitude)?!1:k(e.longitude).sign.toLowerCase()!==t.toLowerCase()}function it(e,t){let r=K[C(e.graha)]??e.graha.slice(0,2),n=e.isRetrograde?at:"";if(typeof e.longitude!="number"||!Number.isFinite(e.longitude)||D(e,t))return`${r}${n}`;let{degree:o}=k(e.longitude);return`${r} ${o}\xB0${n}`}function st(e,t){let r=[C(e.graha)],n=D(e,t);if(n&&r.push(`in ${t}`),typeof e.longitude=="number"&&Number.isFinite(e.longitude)){let o=k(e.longitude),a=String(o.minute).padStart(2,"0");r.push(n?`D1: ${o.degree}\xB0${a}' ${o.sign}`:`${o.degree}\xB0${a}' ${o.sign}`)}if(e.nakshatra?.name){let o=e.nakshatra.pada?` pada ${e.nakshatra.pada}`:"";r.push(`${e.nakshatra.name}${o}`)}return e.awastha&&r.push(e.awastha),e.isRetrograde&&r.push("retrograde"),r.join(" \xB7 ")}function A(e,t,r,n,o){let a=n-(e.length-1)*o/2;return e.map((i,m)=>{let l=a+m*o;return u`<text class="planet-text" x="${r}" y="${l}" text-anchor="middle" dominant-baseline="central">${it(i,t)}<title>${st(i,t)}</title></text>`})}function q(e,t){let r={};for(let o of g)r[o.toLowerCase()]=[];let n="";for(let[o,a]of Object.entries(e??{})){let i=(a?.rashi??"").toLowerCase();if(o==="Lagna"||a?.graha==="Lagna"){n=nt[i]??"";continue}!i||!(i in r)||r[i]?.push({graha:a.graha??o,longitude:a.longitude,nakshatra:a.nakshatra,isRetrograde:a.isRetrograde,awastha:a.awastha})}return{lagnaSign:n,placements:r,divisionLabel:t}}var f=x/4,lt={Pisces:{col:0,row:0},Aries:{col:1,row:0},Taurus:{col:2,row:0},Gemini:{col:3,row:0},Cancer:{col:3,row:1},Leo:{col:3,row:2},Virgo:{col:3,row:3},Libra:{col:2,row:3},Scorpio:{col:1,row:3},Sagittarius:{col:0,row:3},Capricorn:{col:0,row:2},Aquarius:{col:0,row:1}};function ct(e){let t=lt[e]??{col:0,row:0};return{x:c+t.col*f,y:c+t.row*f,w:f,h:f}}function dt(e){let t=c,r=c+f,n=c+2*f,o=c+3*f,a=p-c;return u`<rect class="line" x="${t}" y="${t}" width="${x}" height="${x}" stroke-width="1.5" fill="none"><line class="line" x1="${t}" y1="${r}" x2="${a}" y2="${r}" stroke-width="1"><line class="line" x1="${t}" y1="${o}" x2="${a}" y2="${o}" stroke-width="1"><line class="line" x1="${r}" y1="${t}" x2="${r}" y2="${a}" stroke-width="1"><line class="line" x1="${o}" y1="${t}" x2="${o}" y2="${a}" stroke-width="1"><line class="line" x1="${t}" y1="${n}" x2="${r}" y2="${n}" stroke-width="1"><line class="line" x1="${o}" y1="${n}" x2="${a}" y2="${n}" stroke-width="1"><line class="line" x1="${n}" y1="${t}" x2="${n}" y2="${r}" stroke-width="1"><line class="line" x1="${n}" y1="${o}" x2="${n}" y2="${a}" stroke-width="1">${e?u`<text class="centre-label" x="${d}" y="${d}" text-anchor="middle" dominant-baseline="central">${e}</text>`:y}`}function B(e,t){let r=g.findIndex(o=>o===t),n=g.findIndex(o=>o===e);return r===-1||n===-1?0:(n-r+12)%12+1}function ut(e,t,r,n){let o=ct(e),a=o.x+o.w/2,i=o.y+o.h/2,m=R[e]??e.slice(0,2),l=14;return u`<g class="${r?"cell lagna":"cell"}">${r?u`<rect class="lagna-bg" x="${o.x}" y="${o.y}" width="${o.w}" height="${o.h}"><line class="lagna-slash" x1="${o.x+o.w-l}" y1="${o.y+l}" x2="${o.x+l}" y2="${o.y+o.h-l}" stroke-width="1.2">`:y}<text class="sign-text" x="${o.x+6}" y="${o.y+12}" text-anchor="start" dominant-baseline="central">${m}</text>${n>0?u`<text class="house-num" x="${o.x+o.w-6}" y="${o.y+12}" text-anchor="end" dominant-baseline="central">${n}</text>`:y} ${r?u`<text class="lagna-marker" x="${a}" y="${o.y+26}" text-anchor="middle" dominant-baseline="central">Asc</text>`:y} ${t.length?A(t,e,a,i+4,14):y}</g>`}function xt(e){let t=e.lagnaSign.toLowerCase();return u`${dt(e.divisionLabel)} ${g.map(r=>ut(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,B(r,e.lagnaSign)))}`}var s={tl:{x:c,y:c},tr:{x:p-c,y:c},br:{x:p-c,y:p-c},bl:{x:c,y:p-c},top:{x:d,y:c},right:{x:p-c,y:d},bottom:{x:d,y:p-c},left:{x:c,y:d},tlMid:{x:d-x/4,y:d-x/4},trMid:{x:d+x/4,y:d-x/4},brMid:{x:d+x/4,y:d+x/4},blMid:{x:d-x/4,y:d+x/4}};function h(e){let t=e.reduce((n,o)=>n+o.x,0)/e.length,r=e.reduce((n,o)=>n+o.y,0)/e.length;return{x:t,y:r}}var mt={1:{x:d,y:s.tlMid.y},2:h([s.tl,s.top,s.tlMid]),3:h([s.tl,s.left,s.tlMid]),4:{x:s.tlMid.x,y:d},5:h([s.bl,s.left,s.blMid]),6:h([s.bl,s.bottom,s.blMid]),7:{x:d,y:s.blMid.y},8:h([s.br,s.bottom,s.brMid]),9:h([s.br,s.right,s.brMid]),10:{x:s.brMid.x,y:d},11:h([s.tr,s.right,s.trMid]),12:h([s.tr,s.top,s.trMid])};function yt(e,t){let r=g.findIndex(n=>n===t);return r===-1?e:(r+e-1)%12+1}function gt(e){let{tl:t,tr:r,br:n,bl:o,top:a,right:i,bottom:m,left:l}=s;return u`<rect class="line" x="${t.x}" y="${t.y}" width="${x}" height="${x}" stroke-width="1.5" fill="none"><polygon class="line" points="${a.x},${a.y} ${i.x},${i.y} ${m.x},${m.y} ${l.x},${l.y}" stroke-width="1" fill="none"><line class="line" x1="${t.x}" y1="${t.y}" x2="${n.x}" y2="${n.y}" stroke-width="1"><line class="line" x1="${r.x}" y1="${r.y}" x2="${o.x}" y2="${o.y}" stroke-width="1">${e?u`<text class="centre-label" x="${d}" y="${d}" text-anchor="middle" dominant-baseline="central">${e}</text>`:y}`}function pt(e,t,r,n,o){let a=mt[e];if(!a)return u``;let i=Math.min(14,Math.abs(a.y-d)*.45+6),m=i+12,l=o?`${t} \xB7 ${R[r]??r.slice(0,2)}`:`${t}`;return u`<g class="${o?"cell lagna":"cell"}"><text class="rashi-num" x="${a.x}" y="${a.y-i}" text-anchor="middle" dominant-baseline="central">${l}</text>${o?u`<text class="lagna-marker" x="${a.x}" y="${a.y-m}" text-anchor="middle" dominant-baseline="central">Asc</text>`:y} ${n.length?A(n,r,a.x,a.y+8,12):y}</g>`}function ht(e){let t=e.lagnaSign||"Aries";return u`${gt(e.divisionLabel)} ${Array.from({length:12},(r,n)=>{let o=n+1,a=yt(o,t),i=g[a-1]??"Aries";return pt(o,a,i,e.placements[i.toLowerCase()]??[],o===1)})}`}var T=x/3;function ft(){let e=c,t=c+T,r=c+2*T,n=p-c,J={Aries:[{x:t,y:e},{x:r,y:e},{x:r,y:t},{x:t,y:t}],Taurus:[{x:e,y:e},{x:t,y:e},{x:t,y:t}],Gemini:[{x:e,y:e},{x:t,y:t},{x:e,y:t}],Cancer:[{x:e,y:t},{x:t,y:t},{x:t,y:r},{x:e,y:r}],Leo:[{x:e,y:r},{x:t,y:r},{x:e,y:n}],Virgo:[{x:t,y:r},{x:t,y:n},{x:e,y:n}],Libra:[{x:t,y:r},{x:r,y:r},{x:r,y:n},{x:t,y:n}],Scorpio:[{x:r,y:r},{x:r,y:n},{x:n,y:n}],Sagittarius:[{x:r,y:r},{x:n,y:n},{x:n,y:r}],Capricorn:[{x:r,y:t},{x:n,y:t},{x:n,y:r},{x:r,y:r}],Aquarius:[{x:n,y:e},{x:n,y:t},{x:r,y:t}],Pisces:[{x:r,y:e},{x:n,y:e},{x:r,y:t}]},I={};for(let[W,_]of Object.entries(J))I[W]={points:[..._],centroid:h(_)};return I}var bt=ft();function $t(e){let t=c,r=c+T,n=c+2*T,o=p-c;return u`<rect class="line" x="${t}" y="${t}" width="${x}" height="${x}" stroke-width="1.5" fill="none"><line class="line" x1="${t}" y1="${r}" x2="${r}" y2="${r}" stroke-width="1"><line class="line" x1="${n}" y1="${r}" x2="${o}" y2="${r}" stroke-width="1"><line class="line" x1="${t}" y1="${n}" x2="${r}" y2="${n}" stroke-width="1"><line class="line" x1="${n}" y1="${n}" x2="${o}" y2="${n}" stroke-width="1"><line class="line" x1="${r}" y1="${t}" x2="${r}" y2="${r}" stroke-width="1"><line class="line" x1="${r}" y1="${n}" x2="${r}" y2="${o}" stroke-width="1"><line class="line" x1="${n}" y1="${t}" x2="${n}" y2="${r}" stroke-width="1"><line class="line" x1="${n}" y1="${n}" x2="${n}" y2="${o}" stroke-width="1"><line class="line" x1="${t}" y1="${t}" x2="${r}" y2="${r}" stroke-width="1"><line class="line" x1="${o}" y1="${t}" x2="${n}" y2="${r}" stroke-width="1"><line class="line" x1="${o}" y1="${o}" x2="${n}" y2="${n}" stroke-width="1"><line class="line" x1="${t}" y1="${o}" x2="${r}" y2="${n}" stroke-width="1">${e?u`<text class="centre-label" x="${d}" y="${d}" text-anchor="middle" dominant-baseline="central">${e}</text>`:y}`}function wt(e,t,r,n){let o=bt[e];if(!o)return u``;let{centroid:a,points:i}=o,m=R[e]??e.slice(0,2),l=i.map($=>`${$.x},${$.y}`).join(" ");return u`<g class="${r?"cell lagna":"cell"}">${r?u`<polygon class="lagna-bg" points="${l}">`:y}<text class="sign-text" x="${a.x}" y="${a.y-16}" text-anchor="middle" dominant-baseline="central">${m}</text>${n>0?u`<text class="house-num" x="${a.x+18}" y="${a.y-16}" text-anchor="start" dominant-baseline="central">${n}</text>`:y} ${r?u`<text class="lagna-marker" x="${a.x}" y="${a.y-30}" text-anchor="middle" dominant-baseline="central">Asc</text>`:y} ${t.length?A(t,e,a.x,a.y+4,12):y}</g>`}function vt(e){let t=e.lagnaSign.toLowerCase();return u`${$t(e.divisionLabel)} ${g.map(r=>wt(r,e.placements[r.toLowerCase()]??[],r.toLowerCase()===t,B(r,e.lagnaSign)))}`}function Y(e,t){switch(t){case"north":return ht(e);case"east":return vt(e);default:return xt(e)}}function j(e,t){return V({items:ot,active:e,onSelect:t,label:"Kundli style",idPrefix:"kundli"})}import{css as St}from"lit";var F=St`.wrap{gap:var(--roxy-space-md,1rem);display:grid}.header{justify-content:space-between;align-items:center;gap:var(--roxy-space-sm,.5rem);flex-wrap:wrap;display:flex}.title{font-size:var(--roxy-text-lg,1.125rem);font-weight:var(--roxy-weight-bold,600);margin:0}svg{aspect-ratio:1;width:100%;max-width:560px;height:auto;margin:0 auto;display:block}.line{fill:#0000;stroke:var(--roxy-border,#d4d4d8)}.sign-text{fill:var(--roxy-muted,#71717a);font-size:11px;font-weight:500;font-family:var(--roxy-font-sans);text-transform:uppercase;letter-spacing:.04em}.rashi-num{fill:var(--roxy-muted,#71717a);font-size:12px;font-weight:500;font-family:var(--roxy-font-sans)}.house-num{fill:var(--roxy-accent-fg,#b45309);font-size:11px;font-weight:600;font-family:var(--roxy-font-sans);opacity:.85}.planet-text{fill:var(--roxy-fg,#0a0a0a);font-size:13px;font-weight:600;font-family:var(--roxy-font-sans)}.centre-label{fill:var(--roxy-muted,#71717a);font-size:14px;font-weight:600;font-family:var(--roxy-font-sans);letter-spacing:.02em}.lagna-marker{fill:var(--roxy-accent-fg,#b45309);font-size:10px;font-weight:700;font-family:var(--roxy-font-sans);letter-spacing:.08em;text-transform:uppercase}.lagna-bg{fill:color-mix(in srgb, var(--roxy-accent,#f59e0b) 14%, transparent)}.lagna-slash{stroke:var(--roxy-accent,#f59e0b);stroke-linecap:round;opacity:.7}`;var Rt="roxy-data";function kt(e){return e.nodeName==="SCRIPT"&&e.getAttribute("type")==="application/json"}var M=class{constructor(t){this.host=t,t.addController(this)}hostConnected(){if(this.host.data!=null)return;let t=this.read();t!==void 0&&(this.host.data=t,this.host.requestUpdate())}read(){let t=this.findInlineScript();return t?this.parse(t.textContent):void 0}findInlineScript(){for(let t of Array.from(this.host.children))if(kt(t)&&t.classList.contains(Rt))return t;return null}parse(t){if(t?.trim())try{return JSON.parse(t)}catch{return}}};var b=class extends Mt{constructor(){super();this.data=null;this.chartStyle="north";this.setStyle=r=>{this.chartStyle=r};new M(this)}viewModel(){if(!this.data?.chart?.meta)return null;let{division:r}=this.data,n=`D${r.number} ${r.name}`;return q(this.data.chart.meta,n)}render(){let r=this.viewModel();if(!this.data||!r)return w`<div class="roxy-empty" role="status">No divisional chart data</div>`;let{division:n,vargottama:o}=this.data;return w`<div class="wrap"><div class="header"><div><h2 class="title">D${n.number} ${n.name} ${n.sanskritName&&n.sanskritName!==n.name?w`<span class="division-meta">· ${n.sanskritName}</span>`:L}</h2>${n.significance?w`<p class="significance">${n.significance}</p>`:L}</div>${j(this.chartStyle,this.setStyle)}</div><svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" role="img" aria-label="D${n.number} ${n.name} divisional chart with twelve sign houses"><title>D${n.number} ${n.name}</title>${Y(r,this.chartStyle)}</svg> ${o&&o.length>0?w`<div class="vargottama-row" role="list" aria-label="Vargottama planets"><span class="vargottama-label">Vargottama:</span> ${o.map(a=>w`<span class="vargottama-pill" role="listitem">${G[a]??""} ${a}</span>`)}</div>`:L}</div>`}};b.styles=[O,F,H,Tt`.division-meta{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);margin:0}.significance{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);border-left:2px solid var(--roxy-border,#e4e4e7);padding-left:var(--roxy-space-sm,.5rem);margin:0}.vargottama-row{gap:var(--roxy-space-xs,.25rem);flex-wrap:wrap;align-items:center;display:flex}.vargottama-label{font-size:var(--roxy-text-sm,.875rem);color:var(--roxy-muted,#71717a);margin-right:var(--roxy-space-xs,.25rem);font-weight:500}.vargottama-pill{font-size:var(--roxy-text-sm,.875rem);background:color-mix(in srgb, var(--roxy-accent,#f59e0b) 22%, transparent);color:var(--roxy-fg,#0a0a0a);border:1px solid color-mix(in srgb, var(--roxy-accent,#f59e0b) 45%, transparent);border-radius:999px;align-items:center;gap:.2em;padding:.15em .6em;font-weight:600;display:inline-flex}`],S([U({attribute:!1})],b.prototype,"data",2),S([U({type:String,reflect:!0,attribute:"chart-style"})],b.prototype,"chartStyle",2),b=S([Ct("roxy-divisional-chart")],b);export{b as RoxyDivisionalChart};
933
2
  //# sourceMappingURL=divisional-chart.js.map