@roxyapi/ui 0.0.1 → 0.1.1

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 (166) hide show
  1. package/AGENTS.md +169 -0
  2. package/THEMING.md +129 -0
  3. package/dist/cdn/components/biorhythm-chart.js +261 -0
  4. package/dist/cdn/components/biorhythm-chart.js.map +7 -0
  5. package/dist/cdn/components/compatibility-card.js +257 -0
  6. package/dist/cdn/components/compatibility-card.js.map +7 -0
  7. package/dist/cdn/components/dasha-timeline.js +244 -0
  8. package/dist/cdn/components/dasha-timeline.js.map +7 -0
  9. package/dist/cdn/components/data.js +258 -0
  10. package/dist/cdn/components/data.js.map +7 -0
  11. package/dist/cdn/components/dosha-card.js +254 -0
  12. package/dist/cdn/components/dosha-card.js.map +7 -0
  13. package/dist/cdn/components/endpoint-form.js +253 -0
  14. package/dist/cdn/components/endpoint-form.js.map +7 -0
  15. package/dist/cdn/components/guna-milan.js +256 -0
  16. package/dist/cdn/components/guna-milan.js.map +7 -0
  17. package/dist/cdn/components/hexagram.js +275 -0
  18. package/dist/cdn/components/hexagram.js.map +7 -0
  19. package/dist/cdn/components/horoscope-card.js +302 -0
  20. package/dist/cdn/components/horoscope-card.js.map +7 -0
  21. package/dist/cdn/components/kp-planets-table.js +224 -0
  22. package/dist/cdn/components/kp-planets-table.js.map +7 -0
  23. package/dist/cdn/components/location-search.js +267 -0
  24. package/dist/cdn/components/location-search.js.map +7 -0
  25. package/dist/cdn/components/moon-phase.js +251 -0
  26. package/dist/cdn/components/moon-phase.js.map +7 -0
  27. package/dist/cdn/components/natal-chart.js +237 -0
  28. package/dist/cdn/components/natal-chart.js.map +7 -0
  29. package/dist/cdn/components/numerology-card.js +252 -0
  30. package/dist/cdn/components/numerology-card.js.map +7 -0
  31. package/dist/cdn/components/panchang-table.js +234 -0
  32. package/dist/cdn/components/panchang-table.js.map +7 -0
  33. package/dist/cdn/components/synastry-chart.js +303 -0
  34. package/dist/cdn/components/synastry-chart.js.map +7 -0
  35. package/dist/cdn/components/tarot-card.js +260 -0
  36. package/dist/cdn/components/tarot-card.js.map +7 -0
  37. package/dist/cdn/components/tarot-spread.js +261 -0
  38. package/dist/cdn/components/tarot-spread.js.map +7 -0
  39. package/dist/cdn/components/vedic-kundli.js +189 -0
  40. package/dist/cdn/components/vedic-kundli.js.map +7 -0
  41. package/dist/cdn/roxy-ui.js +2552 -0
  42. package/dist/cdn/roxy-ui.js.map +7 -0
  43. package/dist/cdn/widgets.js +114 -0
  44. package/dist/components/biorhythm-chart.d.ts +66 -0
  45. package/dist/components/biorhythm-chart.d.ts.map +1 -0
  46. package/dist/components/biorhythm-chart.js +318 -0
  47. package/dist/components/biorhythm-chart.js.map +7 -0
  48. package/dist/components/compatibility-card.d.ts +46 -0
  49. package/dist/components/compatibility-card.d.ts.map +1 -0
  50. package/dist/components/compatibility-card.js +279 -0
  51. package/dist/components/compatibility-card.js.map +7 -0
  52. package/dist/components/dasha-timeline.d.ts +53 -0
  53. package/dist/components/dasha-timeline.d.ts.map +1 -0
  54. package/dist/components/dasha-timeline.js +269 -0
  55. package/dist/components/dasha-timeline.js.map +7 -0
  56. package/dist/components/data.d.ts +40 -0
  57. package/dist/components/data.d.ts.map +1 -0
  58. package/dist/components/data.js +339 -0
  59. package/dist/components/data.js.map +7 -0
  60. package/dist/components/dosha-card.d.ts +35 -0
  61. package/dist/components/dosha-card.d.ts.map +1 -0
  62. package/dist/components/dosha-card.js +278 -0
  63. package/dist/components/dosha-card.js.map +7 -0
  64. package/dist/components/endpoint-form.d.ts +39 -0
  65. package/dist/components/endpoint-form.d.ts.map +1 -0
  66. package/dist/components/endpoint-form.js +432 -0
  67. package/dist/components/endpoint-form.js.map +7 -0
  68. package/dist/components/guna-milan.d.ts +35 -0
  69. package/dist/components/guna-milan.d.ts.map +1 -0
  70. package/dist/components/guna-milan.js +302 -0
  71. package/dist/components/guna-milan.js.map +7 -0
  72. package/dist/components/hexagram.d.ts +47 -0
  73. package/dist/components/hexagram.d.ts.map +1 -0
  74. package/dist/components/hexagram.js +334 -0
  75. package/dist/components/hexagram.js.map +7 -0
  76. package/dist/components/horoscope-card.d.ts +38 -0
  77. package/dist/components/horoscope-card.d.ts.map +1 -0
  78. package/dist/components/horoscope-card.js +332 -0
  79. package/dist/components/horoscope-card.js.map +7 -0
  80. package/dist/components/kp-planets-table.d.ts +36 -0
  81. package/dist/components/kp-planets-table.d.ts.map +1 -0
  82. package/dist/components/kp-planets-table.js +227 -0
  83. package/dist/components/kp-planets-table.js.map +7 -0
  84. package/dist/components/location-search.d.ts +56 -0
  85. package/dist/components/location-search.d.ts.map +1 -0
  86. package/dist/components/location-search.js +401 -0
  87. package/dist/components/location-search.js.map +7 -0
  88. package/dist/components/moon-phase.d.ts +38 -0
  89. package/dist/components/moon-phase.d.ts.map +1 -0
  90. package/dist/components/moon-phase.js +284 -0
  91. package/dist/components/moon-phase.js.map +7 -0
  92. package/dist/components/natal-chart.d.ts +65 -0
  93. package/dist/components/natal-chart.d.ts.map +1 -0
  94. package/dist/components/natal-chart.js +407 -0
  95. package/dist/components/natal-chart.js.map +7 -0
  96. package/dist/components/numerology-card.d.ts +55 -0
  97. package/dist/components/numerology-card.d.ts.map +1 -0
  98. package/dist/components/numerology-card.js +274 -0
  99. package/dist/components/numerology-card.js.map +7 -0
  100. package/dist/components/panchang-table.d.ts +77 -0
  101. package/dist/components/panchang-table.d.ts.map +1 -0
  102. package/dist/components/panchang-table.js +285 -0
  103. package/dist/components/panchang-table.js.map +7 -0
  104. package/dist/components/synastry-chart.d.ts +52 -0
  105. package/dist/components/synastry-chart.d.ts.map +1 -0
  106. package/dist/components/synastry-chart.js +415 -0
  107. package/dist/components/synastry-chart.js.map +7 -0
  108. package/dist/components/tarot-card.d.ts +47 -0
  109. package/dist/components/tarot-card.d.ts.map +1 -0
  110. package/dist/components/tarot-card.js +281 -0
  111. package/dist/components/tarot-card.js.map +7 -0
  112. package/dist/components/tarot-spread.d.ts +42 -0
  113. package/dist/components/tarot-spread.d.ts.map +1 -0
  114. package/dist/components/tarot-spread.js +271 -0
  115. package/dist/components/tarot-spread.js.map +7 -0
  116. package/dist/components/vedic-kundli.d.ts +45 -0
  117. package/dist/components/vedic-kundli.d.ts.map +1 -0
  118. package/dist/components/vedic-kundli.js +325 -0
  119. package/dist/components/vedic-kundli.js.map +7 -0
  120. package/dist/index.cjs +4174 -0
  121. package/dist/index.cjs.map +7 -0
  122. package/dist/index.d.ts +30 -0
  123. package/dist/index.d.ts.map +1 -0
  124. package/dist/index.js +4154 -0
  125. package/dist/index.js.map +7 -0
  126. package/dist/manifest.json +24 -0
  127. package/dist/styles/tokens.css +147 -0
  128. package/dist/tokens/index.d.ts +17 -0
  129. package/dist/tokens/index.d.ts.map +1 -0
  130. package/dist/utils/base-styles.d.ts +6 -0
  131. package/dist/utils/base-styles.d.ts.map +1 -0
  132. package/dist/utils/debounce.d.ts +5 -0
  133. package/dist/utils/debounce.d.ts.map +1 -0
  134. package/dist/utils/degree.d.ts +29 -0
  135. package/dist/utils/degree.d.ts.map +1 -0
  136. package/dist/utils/motion.d.ts +13 -0
  137. package/dist/utils/motion.d.ts.map +1 -0
  138. package/package.json +69 -3
  139. package/src/components/biorhythm-chart.ts +290 -0
  140. package/src/components/compatibility-card.ts +231 -0
  141. package/src/components/dasha-timeline.ts +251 -0
  142. package/src/components/data.ts +287 -0
  143. package/src/components/dosha-card.ts +215 -0
  144. package/src/components/endpoint-form.ts +433 -0
  145. package/src/components/guna-milan.ts +245 -0
  146. package/src/components/hexagram.ts +279 -0
  147. package/src/components/horoscope-card.ts +291 -0
  148. package/src/components/kp-planets-table.ts +156 -0
  149. package/src/components/location-search.ts +335 -0
  150. package/src/components/moon-phase.ts +221 -0
  151. package/src/components/natal-chart.ts +298 -0
  152. package/src/components/numerology-card.ts +243 -0
  153. package/src/components/panchang-table.ts +265 -0
  154. package/src/components/synastry-chart.ts +341 -0
  155. package/src/components/tarot-card.ts +235 -0
  156. package/src/components/tarot-spread.ts +224 -0
  157. package/src/components/vedic-kundli.ts +257 -0
  158. package/src/index.ts +61 -0
  159. package/src/styles/tokens.css +147 -0
  160. package/src/tokens/index.ts +130 -0
  161. package/src/types/index.ts +3 -0
  162. package/src/types/types.gen.ts +28526 -0
  163. package/src/utils/base-styles.ts +89 -0
  164. package/src/utils/debounce.ts +13 -0
  165. package/src/utils/degree.ts +64 -0
  166. package/src/utils/motion.ts +18 -0
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/panchang-table.ts", "../../src/utils/base-styles.ts"],
4
+ "sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface PanchangTime {\n\tstart?: string;\n\tend?: string;\n}\n\ninterface PanchangData {\n\tdate?: string;\n\tlocation?: { name?: string; latitude?: number; longitude?: number };\n\tvara?: string;\n\tsunrise?: string;\n\tsunset?: string;\n\tmoonrise?: string;\n\tmoonset?: string;\n\tsunSign?: string;\n\tmoonSign?: string;\n\tsunNakshatra?: string;\n\ttithi?: string | { name?: string; phase?: string; end?: string };\n\tnakshatra?: string | { name?: string; lord?: string; end?: string };\n\tyoga?: string | { name?: string; end?: string };\n\tkarana?: string | { name?: string; end?: string };\n\thora?: string;\n\trahuKaal?: PanchangTime;\n\tyamaganda?: PanchangTime;\n\tgulika?: PanchangTime;\n\tabhijitMuhurta?: PanchangTime;\n\tbrahmaMuhurta?: PanchangTime;\n\tvijayaMuhurta?: PanchangTime;\n\tnishitaMuhurta?: PanchangTime;\n\tgodhuliMuhurta?: PanchangTime;\n\tpratahSandhya?: PanchangTime;\n\tsayahnaSandhya?: PanchangTime;\n\tdurMuhurta?: PanchangTime[];\n\tvarjyam?: PanchangTime[];\n\tamritKalam?: PanchangTime[];\n\tchandrabalam?: string | string[];\n\ttarabalam?: string;\n\tpanchaka?: string;\n\tbhadra?: string;\n\tsunLongitude?: number;\n\tmoonLongitude?: number;\n}\n\n/**\n * Panchang table for /vedic-astrology/panchang/{basic,detailed}. Detailed mode\n * renders 15+ muhurtas. Basic mode renders the five elements only.\n */\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\n\t\tconst fivefold = [\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\t['Vara', d.vara ?? ''],\n\t\t];\n\n\t\tconst muhurtas: Array<[string, PanchangTime | undefined]> = [\n\t\t\t['Brahma Muhurta', d.brahmaMuhurta],\n\t\t\t['Abhijit Muhurta', d.abhijitMuhurta],\n\t\t\t['Vijaya Muhurta', d.vijayaMuhurta],\n\t\t\t['Godhuli Muhurta', d.godhuliMuhurta],\n\t\t\t['Nishita Muhurta', d.nishitaMuhurta],\n\t\t\t['Pratah Sandhya', d.pratahSandhya],\n\t\t\t['Sayahna Sandhya', d.sayahnaSandhya],\n\t\t];\n\n\t\tconst inauspicious: Array<[string, PanchangTime | undefined]> = [\n\t\t\t['Rahu Kaal', d.rahuKaal],\n\t\t\t['Yamaganda', d.yamaganda],\n\t\t\t['Gulika', d.gulika],\n\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\">${d.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\td.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>${d.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\td.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>${d.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\td.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>${d.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\td.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>${d.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>${formatRange(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>${formatRange(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\nfunction formatRange(t: PanchangTime | undefined): string {\n\tif (!t) return '';\n\tif (t.start && t.end) return `${t.start} - ${t.end}`;\n\treturn t.start ?? t.end ?? '';\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"],
5
+ "mappings": "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",
6
+ "names": ["css", "css"]
7
+ }
@@ -0,0 +1,52 @@
1
+ import { LitElement } from 'lit';
2
+ interface PlanetEntry {
3
+ name?: string;
4
+ planet?: string;
5
+ longitude?: number;
6
+ degree?: number;
7
+ sign?: string;
8
+ }
9
+ interface InterAspect {
10
+ planet1?: string;
11
+ planet2?: string;
12
+ aspect?: string;
13
+ orb?: number;
14
+ strength?: string;
15
+ interpretation?: string;
16
+ }
17
+ interface SynastryData {
18
+ person1?: {
19
+ planets?: PlanetEntry[] | Record<string, PlanetEntry>;
20
+ name?: string;
21
+ };
22
+ person2?: {
23
+ planets?: PlanetEntry[] | Record<string, PlanetEntry>;
24
+ name?: string;
25
+ };
26
+ compatibilityScore?: number;
27
+ summary?: string;
28
+ interAspects?: InterAspect[];
29
+ strengths?: string[];
30
+ challenges?: string[];
31
+ }
32
+ /**
33
+ * Dual-wheel synastry chart with inter-aspects table. Pass `data` from
34
+ * /astrology/synastry.
35
+ */
36
+ export declare class RoxySynastryChart extends LitElement {
37
+ static styles: import("lit").CSSResult[];
38
+ data: SynastryData | null;
39
+ render(): import("lit").TemplateResult<1>;
40
+ private normalizePlanets;
41
+ private renderSpokes;
42
+ private renderSigns;
43
+ private renderRing;
44
+ private renderAspects;
45
+ }
46
+ declare global {
47
+ interface HTMLElementTagNameMap {
48
+ 'roxy-synastry-chart': RoxySynastryChart;
49
+ }
50
+ }
51
+ export {};
52
+ //# sourceMappingURL=synastry-chart.d.ts.map
@@ -0,0 +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;AAM1D,UAAU,WAAW;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,WAAW;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,YAAY;IACrB,OAAO,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACtD,IAAI,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,OAAO,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACtD,IAAI,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AASD;;;GAGG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAsGX;IAGF,IAAI,EAAE,YAAY,GAAG,IAAI,CAAQ;IAEjC,MAAM;IAyFN,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,aAAa;CA0BrB;AAOD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}
@@ -0,0 +1,415 @@
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/synastry-chart.ts
13
+ import { css as css2, html, LitElement, nothing, svg } 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
+ };
36
+ var SIGN_GLYPH = {
37
+ Aries: "\u2648",
38
+ Taurus: "\u2649",
39
+ Gemini: "\u264A",
40
+ Cancer: "\u264B",
41
+ Leo: "\u264C",
42
+ Virgo: "\u264D",
43
+ Libra: "\u264E",
44
+ Scorpio: "\u264F",
45
+ Sagittarius: "\u2650",
46
+ Capricorn: "\u2651",
47
+ Aquarius: "\u2652",
48
+ Pisces: "\u2653"
49
+ };
50
+
51
+ // packages/ui/src/utils/base-styles.ts
52
+ import { css } from "lit";
53
+ var baseStyles = css`
54
+ :host {
55
+ display: block;
56
+ container-type: inline-size;
57
+ font-family: var(
58
+ --roxy-font-sans,
59
+ system-ui,
60
+ -apple-system,
61
+ BlinkMacSystemFont,
62
+ 'Segoe UI',
63
+ Roboto,
64
+ sans-serif
65
+ );
66
+ color: var(--roxy-fg, #0a0a0a);
67
+ background: transparent;
68
+ font-size: var(--roxy-text-base, 1rem);
69
+ line-height: var(--roxy-leading-normal, 1.5);
70
+ animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
71
+ var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
72
+ }
73
+
74
+ *,
75
+ *::before,
76
+ *::after {
77
+ box-sizing: border-box;
78
+ }
79
+
80
+ @keyframes roxy-fade-in {
81
+ from {
82
+ opacity: 0;
83
+ transform: translateY(2px);
84
+ }
85
+ to {
86
+ opacity: 1;
87
+ transform: translateY(0);
88
+ }
89
+ }
90
+
91
+ @media (prefers-reduced-motion: reduce) {
92
+ :host {
93
+ animation: none;
94
+ }
95
+ }
96
+
97
+ .roxy-skeleton {
98
+ background: linear-gradient(
99
+ 90deg,
100
+ var(--roxy-border, #e4e4e7) 0%,
101
+ color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
102
+ var(--roxy-border, #e4e4e7) 100%
103
+ );
104
+ background-size: 200% 100%;
105
+ animation: roxy-shimmer 1.4s ease-in-out infinite;
106
+ border-radius: var(--roxy-radius-md, 8px);
107
+ }
108
+
109
+ @keyframes roxy-shimmer {
110
+ 0% {
111
+ background-position: 200% 0;
112
+ }
113
+ 100% {
114
+ background-position: -200% 0;
115
+ }
116
+ }
117
+
118
+ @media (prefers-reduced-motion: reduce) {
119
+ .roxy-skeleton {
120
+ animation: none;
121
+ }
122
+ }
123
+
124
+ .roxy-empty {
125
+ padding: var(--roxy-space-lg, 1.5rem);
126
+ color: var(--roxy-muted, #71717a);
127
+ text-align: center;
128
+ font-size: var(--roxy-text-sm, 0.875rem);
129
+ }
130
+
131
+ :host(:focus-within) .roxy-card {
132
+ outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
133
+ outline-offset: 2px;
134
+ }
135
+ `;
136
+
137
+ // packages/ui/src/utils/degree.ts
138
+ function polarToCartesian(cx, cy, radius, angleDeg) {
139
+ const angleRad = angleDeg * Math.PI / 180;
140
+ return {
141
+ x: cx + radius * Math.cos(angleRad),
142
+ y: cy + radius * Math.sin(angleRad)
143
+ };
144
+ }
145
+
146
+ // packages/ui/src/components/synastry-chart.ts
147
+ var SIZE = 360;
148
+ var CENTER = SIZE / 2;
149
+ var OUTER_R = 170;
150
+ var SIGN_R = 154;
151
+ var P1_R = 124;
152
+ var P2_R = 96;
153
+ var RoxySynastryChart = class extends LitElement {
154
+ constructor() {
155
+ super(...arguments);
156
+ this.data = null;
157
+ }
158
+ render() {
159
+ if (!this.data)
160
+ return html`<div class="roxy-empty" role="status">No synastry data</div>`;
161
+ const {
162
+ person1,
163
+ person2,
164
+ compatibilityScore,
165
+ summary,
166
+ interAspects = []
167
+ } = this.data;
168
+ const p1Planets = this.normalizePlanets(person1?.planets);
169
+ const p2Planets = this.normalizePlanets(person2?.planets);
170
+ return html`<div
171
+ class="wrap"
172
+ aria-label="Synastry compatibility chart"
173
+ >
174
+ <div class="head">
175
+ <h2 class="title">Synastry</h2>
176
+ ${typeof compatibilityScore === "number" ? html`<span class="score" aria-label=${`Score ${compatibilityScore} of 100`}
177
+ >${compatibilityScore} / 100</span
178
+ >` : nothing}
179
+ </div>
180
+ <svg
181
+ viewBox="0 0 ${SIZE} ${SIZE}"
182
+ role="img"
183
+ aria-label="Dual chart wheel comparing two natal charts"
184
+ >
185
+ <title>Synastry dual wheel</title>
186
+ <circle
187
+ class="wheel-line"
188
+ cx=${CENTER}
189
+ cy=${CENTER}
190
+ r=${OUTER_R}
191
+ stroke-width="1.5"
192
+ />
193
+ <circle
194
+ class="wheel-line"
195
+ cx=${CENTER}
196
+ cy=${CENTER}
197
+ r=${P2_R + 14}
198
+ stroke-width="0.8"
199
+ />
200
+ <circle
201
+ class="wheel-line"
202
+ cx=${CENTER}
203
+ cy=${CENTER}
204
+ r=${P2_R - 14}
205
+ stroke-width="0.6"
206
+ />
207
+ ${this.renderSpokes()} ${this.renderSigns()}
208
+ ${this.renderRing(p1Planets, P1_R, "p1")} ${this.renderRing(p2Planets, P2_R, "p2")}
209
+ </svg>
210
+ ${summary ? html`<p class="summary">${summary}</p>` : nothing}
211
+ ${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}
212
+ ${(this.data.strengths?.length ?? 0) > 0 || (this.data.challenges?.length ?? 0) > 0 ? html`<div class="lists">
213
+ ${this.data.strengths?.length ? html`<div>
214
+ <h3>Strengths</h3>
215
+ <ul>
216
+ ${this.data.strengths.map((s) => html`<li>${s}</li>`)}
217
+ </ul>
218
+ </div>` : nothing}
219
+ ${this.data.challenges?.length ? html`<div>
220
+ <h3>Challenges</h3>
221
+ <ul>
222
+ ${this.data.challenges.map((s) => html`<li>${s}</li>`)}
223
+ </ul>
224
+ </div>` : nothing}
225
+ </div>` : nothing}
226
+ </div>`;
227
+ }
228
+ normalizePlanets(p) {
229
+ if (!p) return [];
230
+ if (Array.isArray(p)) return p;
231
+ return Object.entries(p).map(([name, e]) => ({ ...e, name }));
232
+ }
233
+ renderSpokes() {
234
+ return Array.from({ length: 12 }, (_, i) => {
235
+ const angle = i * 30 - 90;
236
+ const start = polarToCartesian(CENTER, CENTER, P2_R - 14, angle);
237
+ const end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);
238
+ return svg`<line class="wheel-line" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width="0.6" />`;
239
+ });
240
+ }
241
+ renderSigns() {
242
+ const order = [
243
+ "Aries",
244
+ "Taurus",
245
+ "Gemini",
246
+ "Cancer",
247
+ "Leo",
248
+ "Virgo",
249
+ "Libra",
250
+ "Scorpio",
251
+ "Sagittarius",
252
+ "Capricorn",
253
+ "Aquarius",
254
+ "Pisces"
255
+ ];
256
+ return order.map((s, i) => {
257
+ const angle = i * 30 + 15 - 90;
258
+ const pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);
259
+ return svg`<text class="sign" x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central">${SIGN_GLYPH[s]}</text>`;
260
+ });
261
+ }
262
+ renderRing(planets, radius, cls) {
263
+ return planets.map((p) => {
264
+ const lon = typeof p.longitude === "number" ? p.longitude : typeof p.degree === "number" ? p.degree : NaN;
265
+ if (!Number.isFinite(lon)) return nothing;
266
+ const pos = polarToCartesian(CENTER, CENTER, radius, lon - 90);
267
+ const name = p.name ?? p.planet ?? "";
268
+ const glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);
269
+ return svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor="middle" dominant-baseline="central"><title>${name}</title>${glyph}</text>`;
270
+ });
271
+ }
272
+ renderAspects(aspects) {
273
+ return html`<table>
274
+ <thead>
275
+ <tr>
276
+ <th>Planet 1</th>
277
+ <th>Planet 2</th>
278
+ <th>Aspect</th>
279
+ <th>Orb</th>
280
+ <th>Strength</th>
281
+ </tr>
282
+ </thead>
283
+ <tbody>
284
+ ${aspects.slice(0, 16).map(
285
+ (a) => html`<tr>
286
+ <td>${a.planet1 ?? ""}</td>
287
+ <td>${a.planet2 ?? ""}</td>
288
+ <td>${a.aspect ?? ""}</td>
289
+ <td class="orb">
290
+ ${typeof a.orb === "number" ? a.orb.toFixed(1) : ""}
291
+ </td>
292
+ <td>${a.strength ?? ""}</td>
293
+ </tr>`
294
+ )}
295
+ </tbody>
296
+ </table>`;
297
+ }
298
+ };
299
+ RoxySynastryChart.styles = [
300
+ baseStyles,
301
+ css2`
302
+ .wrap {
303
+ display: grid;
304
+ gap: var(--roxy-space-md, 1rem);
305
+ }
306
+
307
+ .head {
308
+ display: flex;
309
+ justify-content: space-between;
310
+ align-items: center;
311
+ gap: var(--roxy-space-md, 1rem);
312
+ flex-wrap: wrap;
313
+ }
314
+
315
+ .title {
316
+ font-size: var(--roxy-text-lg, 1.125rem);
317
+ font-weight: var(--roxy-weight-bold, 600);
318
+ margin: 0;
319
+ }
320
+
321
+ .score {
322
+ font-variant-numeric: tabular-nums;
323
+ font-weight: var(--roxy-weight-bold, 600);
324
+ color: var(--roxy-accent-fg, #b45309);
325
+ font-size: var(--roxy-text-xl, 1.5rem);
326
+ }
327
+
328
+ svg {
329
+ display: block;
330
+ width: 100%;
331
+ max-width: 400px;
332
+ margin: 0 auto;
333
+ }
334
+
335
+ .wheel-line {
336
+ fill: none;
337
+ stroke: var(--roxy-border, #e4e4e7);
338
+ }
339
+ .sign {
340
+ fill: var(--roxy-secondary, #475569);
341
+ font-size: 14px;
342
+ }
343
+ .p1 {
344
+ fill: var(--roxy-accent, #f59e0b);
345
+ font-weight: 600;
346
+ font-size: 13px;
347
+ }
348
+ .p2 {
349
+ fill: var(--roxy-info, #0284c7);
350
+ font-weight: 600;
351
+ font-size: 13px;
352
+ }
353
+
354
+ .summary {
355
+ margin: 0;
356
+ color: var(--roxy-fg, #0a0a0a);
357
+ font-size: var(--roxy-text-base, 1rem);
358
+ }
359
+
360
+ table {
361
+ width: 100%;
362
+ border-collapse: collapse;
363
+ font-size: var(--roxy-text-sm, 0.875rem);
364
+ }
365
+ th,
366
+ td {
367
+ padding: var(--roxy-space-sm, 0.5rem);
368
+ border-bottom: 1px solid var(--roxy-border, #e4e4e7);
369
+ text-align: left;
370
+ }
371
+ th {
372
+ color: var(--roxy-muted, #71717a);
373
+ font-weight: var(--roxy-weight-bold, 600);
374
+ text-transform: uppercase;
375
+ font-size: var(--roxy-text-xs, 0.75rem);
376
+ letter-spacing: 0.06em;
377
+ }
378
+ td.orb {
379
+ font-variant-numeric: tabular-nums;
380
+ color: var(--roxy-muted, #71717a);
381
+ }
382
+
383
+ .lists {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
386
+ gap: var(--roxy-space-md, 1rem);
387
+ }
388
+ .lists h3 {
389
+ margin: 0 0 var(--roxy-space-xs, 0.25rem) 0;
390
+ font-size: var(--roxy-text-xs, 0.75rem);
391
+ color: var(--roxy-muted, #71717a);
392
+ text-transform: uppercase;
393
+ letter-spacing: 0.06em;
394
+ }
395
+ .lists ul {
396
+ margin: 0;
397
+ padding-left: var(--roxy-space-md, 1rem);
398
+ font-size: var(--roxy-text-sm, 0.875rem);
399
+ }
400
+ `
401
+ ];
402
+ __decorateClass([
403
+ property({ attribute: false })
404
+ ], RoxySynastryChart.prototype, "data", 2);
405
+ RoxySynastryChart = __decorateClass([
406
+ customElement("roxy-synastry-chart")
407
+ ], RoxySynastryChart);
408
+ function capitalize(s) {
409
+ if (!s) return "";
410
+ return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
411
+ }
412
+ export {
413
+ RoxySynastryChart
414
+ };
415
+ //# sourceMappingURL=synastry-chart.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/synastry-chart.ts", "../../src/tokens/index.ts", "../../src/utils/base-styles.ts", "../../src/utils/degree.ts"],
4
+ "sourcesContent": ["import { css, html, LitElement, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PLANET_GLYPH, SIGN_GLYPH } from '../tokens/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { polarToCartesian } from '../utils/degree.js';\n\ninterface PlanetEntry {\n\tname?: string;\n\tplanet?: string;\n\tlongitude?: number;\n\tdegree?: number;\n\tsign?: string;\n}\n\ninterface InterAspect {\n\tplanet1?: string;\n\tplanet2?: string;\n\taspect?: string;\n\torb?: number;\n\tstrength?: string;\n\tinterpretation?: string;\n}\n\ninterface SynastryData {\n\tperson1?: {\n\t\tplanets?: PlanetEntry[] | Record<string, PlanetEntry>;\n\t\tname?: string;\n\t};\n\tperson2?: {\n\t\tplanets?: PlanetEntry[] | Record<string, PlanetEntry>;\n\t\tname?: string;\n\t};\n\tcompatibilityScore?: number;\n\tsummary?: string;\n\tinterAspects?: InterAspect[];\n\tstrengths?: string[];\n\tchallenges?: string[];\n}\n\nconst SIZE = 360;\nconst CENTER = SIZE / 2;\nconst OUTER_R = 170;\nconst SIGN_R = 154;\nconst P1_R = 124;\nconst P2_R = 96;\n\n/**\n * Dual-wheel synastry chart with inter-aspects table. Pass `data` from\n * /astrology/synastry.\n */\n@customElement('roxy-synastry-chart')\nexport class RoxySynastryChart 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: center;\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.score {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-size: var(--roxy-text-xl, 1.5rem);\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 400px;\n\t\t\t\tmargin: 0 auto;\n\t\t\t}\n\n\t\t\t.wheel-line {\n\t\t\t\tfill: none;\n\t\t\t\tstroke: var(--roxy-border, #e4e4e7);\n\t\t\t}\n\t\t\t.sign {\n\t\t\t\tfill: var(--roxy-secondary, #475569);\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t.p1 {\n\t\t\t\tfill: var(--roxy-accent, #f59e0b);\n\t\t\t\tfont-weight: 600;\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\t\t\t.p2 {\n\t\t\t\tfill: var(--roxy-info, #0284c7);\n\t\t\t\tfont-weight: 600;\n\t\t\t\tfont-size: 13px;\n\t\t\t}\n\n\t\t\t.summary {\n\t\t\t\tmargin: 0;\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\t\t}\n\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\tth,\n\t\t\ttd {\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tborder-bottom: 1px solid var(--roxy-border, #e4e4e7);\n\t\t\t\ttext-align: left;\n\t\t\t}\n\t\t\tth {\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\ttd.orb {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\n\t\t\t.lists {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.lists h3 {\n\t\t\t\tmargin: 0 0 var(--roxy-space-xs, 0.25rem) 0;\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\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.06em;\n\t\t\t}\n\t\t\t.lists ul {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-left: var(--roxy-space-md, 1rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: SynastryData | null = null;\n\n\trender() {\n\t\tif (!this.data)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No synastry data</div>`;\n\t\tconst {\n\t\t\tperson1,\n\t\t\tperson2,\n\t\t\tcompatibilityScore,\n\t\t\tsummary,\n\t\t\tinterAspects = [],\n\t\t} = this.data;\n\t\tconst p1Planets = this.normalizePlanets(person1?.planets);\n\t\tconst p2Planets = this.normalizePlanets(person2?.planets);\n\n\t\treturn html`<div\n\t\t\tclass=\"wrap\"\n\t\t\taria-label=\"Synastry compatibility chart\"\n\t\t>\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2 class=\"title\">Synastry</h2>\n\t\t\t\t${\n\t\t\t\t\ttypeof compatibilityScore === 'number'\n\t\t\t\t\t\t? html`<span class=\"score\" aria-label=${`Score ${compatibilityScore} of 100`}\n\t\t\t\t\t\t\t>${compatibilityScore} / 100</span\n\t\t\t\t\t\t>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 ${SIZE} ${SIZE}\"\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label=\"Dual chart wheel comparing two natal charts\"\n\t\t\t>\n\t\t\t\t<title>Synastry dual wheel</title>\n\t\t\t\t<circle\n\t\t\t\t\tclass=\"wheel-line\"\n\t\t\t\t\tcx=${CENTER}\n\t\t\t\t\tcy=${CENTER}\n\t\t\t\t\tr=${OUTER_R}\n\t\t\t\t\tstroke-width=\"1.5\"\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tclass=\"wheel-line\"\n\t\t\t\t\tcx=${CENTER}\n\t\t\t\t\tcy=${CENTER}\n\t\t\t\t\tr=${P2_R + 14}\n\t\t\t\t\tstroke-width=\"0.8\"\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tclass=\"wheel-line\"\n\t\t\t\t\tcx=${CENTER}\n\t\t\t\t\tcy=${CENTER}\n\t\t\t\t\tr=${P2_R - 14}\n\t\t\t\t\tstroke-width=\"0.6\"\n\t\t\t\t/>\n\t\t\t\t${this.renderSpokes()} ${this.renderSigns()}\n\t\t\t\t${this.renderRing(p1Planets, P1_R, 'p1')} ${this.renderRing(p2Planets, P2_R, 'p2')}\n\t\t\t</svg>\n\t\t\t${summary ? html`<p class=\"summary\">${summary}</p>` : nothing}\n\t\t\t${interAspects.length > 0 ? this.renderAspects(interAspects) : nothing}\n\t\t\t${\n\t\t\t\t(this.data.strengths?.length ?? 0) > 0 ||\n\t\t\t\t(this.data.challenges?.length ?? 0) > 0\n\t\t\t\t\t? html`<div class=\"lists\">\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tthis.data.strengths?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Strengths</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${this.data.strengths.map((s) => html`<li>${s}</li>`)}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\tthis.data.challenges?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Challenges</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${this.data.challenges.map((s) => html`<li>${s}</li>`)}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</div>`;\n\t}\n\n\tprivate normalizePlanets(\n\t\tp: PlanetEntry[] | Record<string, PlanetEntry> | undefined,\n\t) {\n\t\tif (!p) return [];\n\t\tif (Array.isArray(p)) return p;\n\t\treturn Object.entries(p).map(([name, e]) => ({ ...e, name }));\n\t}\n\n\tprivate renderSpokes() {\n\t\treturn Array.from({ length: 12 }, (_, i) => {\n\t\t\tconst angle = i * 30 - 90;\n\t\t\tconst start = polarToCartesian(CENTER, CENTER, P2_R - 14, angle);\n\t\t\tconst end = polarToCartesian(CENTER, CENTER, OUTER_R, angle);\n\t\t\treturn svg`<line class=\"wheel-line\" x1=${start.x} y1=${start.y} x2=${end.x} y2=${end.y} stroke-width=\"0.6\" />`;\n\t\t});\n\t}\n\n\tprivate renderSigns() {\n\t\tconst order = [\n\t\t\t'Aries',\n\t\t\t'Taurus',\n\t\t\t'Gemini',\n\t\t\t'Cancer',\n\t\t\t'Leo',\n\t\t\t'Virgo',\n\t\t\t'Libra',\n\t\t\t'Scorpio',\n\t\t\t'Sagittarius',\n\t\t\t'Capricorn',\n\t\t\t'Aquarius',\n\t\t\t'Pisces',\n\t\t];\n\t\treturn order.map((s, i) => {\n\t\t\tconst angle = i * 30 + 15 - 90;\n\t\t\tconst pos = polarToCartesian(CENTER, CENTER, SIGN_R, angle);\n\t\t\treturn svg`<text class=\"sign\" x=${pos.x} y=${pos.y} text-anchor=\"middle\" dominant-baseline=\"central\">${SIGN_GLYPH[s]}</text>`;\n\t\t});\n\t}\n\n\tprivate renderRing(planets: PlanetEntry[], radius: number, cls: string) {\n\t\treturn planets.map((p) => {\n\t\t\tconst lon =\n\t\t\t\ttypeof p.longitude === 'number'\n\t\t\t\t\t? p.longitude\n\t\t\t\t\t: typeof p.degree === 'number'\n\t\t\t\t\t\t? p.degree\n\t\t\t\t\t\t: NaN;\n\t\t\tif (!Number.isFinite(lon)) return nothing;\n\t\t\tconst pos = polarToCartesian(CENTER, CENTER, radius, lon - 90);\n\t\t\tconst name = p.name ?? p.planet ?? '';\n\t\t\tconst glyph = PLANET_GLYPH[capitalize(name)] ?? name.slice(0, 2);\n\t\t\treturn svg`<text class=${cls} x=${pos.x} y=${pos.y} text-anchor=\"middle\" dominant-baseline=\"central\"><title>${name}</title>${glyph}</text>`;\n\t\t});\n\t}\n\n\tprivate renderAspects(aspects: InterAspect[]) {\n\t\treturn html`<table>\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th>Planet 1</th>\n\t\t\t\t\t<th>Planet 2</th>\n\t\t\t\t\t<th>Aspect</th>\n\t\t\t\t\t<th>Orb</th>\n\t\t\t\t\t<th>Strength</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t${aspects.slice(0, 16).map(\n\t\t\t\t\t(a) => html`<tr>\n\t\t\t\t\t\t<td>${a.planet1 ?? ''}</td>\n\t\t\t\t\t\t<td>${a.planet2 ?? ''}</td>\n\t\t\t\t\t\t<td>${a.aspect ?? ''}</td>\n\t\t\t\t\t\t<td class=\"orb\">\n\t\t\t\t\t\t\t${typeof a.orb === 'number' ? a.orb.toFixed(1) : ''}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t\t<td>${a.strength ?? ''}</td>\n\t\t\t\t\t</tr>`,\n\t\t\t\t)}\n\t\t\t</tbody>\n\t\t</table>`;\n\t}\n}\n\nfunction capitalize(s: string): string {\n\tif (!s) return '';\n\treturn s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-synastry-chart': RoxySynastryChart;\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};\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/** Aspect symbols. Used by synastry and natal chart aspect tables. */\nexport const ASPECT_SYMBOL: Record<string, string> = {\n\tconjunction: '\u260C',\n\topposition: '\u260D',\n\ttrine: '\u25B3',\n\tsquare: '\u25A1',\n\tsextile: '\u2731',\n\tquincunx: '\u22BB',\n\tsemisextile: '\u22BC',\n};\n\n/** Trigrams used by I Ching hexagrams. Eight trigrams compose 64 hexagrams. */\nexport const TRIGRAM_GLYPH: Record<string, string> = {\n\theaven: '\u2630',\n\tlake: '\u2631',\n\tfire: '\u2632',\n\tthunder: '\u2633',\n\twind: '\u2634',\n\twater: '\u2635',\n\tmountain: '\u2636',\n\tearth: '\u2637',\n\tHeaven: '\u2630',\n\tLake: '\u2631',\n\tFire: '\u2632',\n\tThunder: '\u2633',\n\tWind: '\u2634',\n\tWater: '\u2635',\n\tMountain: '\u2636',\n\tEarth: '\u2637',\n};\n\n/** Moon phase emoji set. Used by moon phase card. */\nexport const MOON_PHASE_EMOJI: Record<string, string> = {\n\t'new moon': '\uD83C\uDF11',\n\t'waxing crescent': '\uD83C\uDF12',\n\t'first quarter': '\uD83C\uDF13',\n\t'waxing gibbous': '\uD83C\uDF14',\n\t'full moon': '\uD83C\uDF15',\n\t'waning gibbous': '\uD83C\uDF16',\n\t'last quarter': '\uD83C\uDF17',\n\t'waning crescent': '\uD83C\uDF18',\n};\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n", "/**\n * Math helpers for converting raw ecliptic longitude decimals into the\n * sign / degree / minute / second triplet used across chart components.\n */\n\nimport { SIGNS_ORDER } from '../tokens/index.js';\n\nexport interface SignPosition {\n\tsign: string;\n\tsignIndex: number;\n\tdegree: number;\n\tminute: number;\n\tsecond: number;\n}\n\n/**\n * Wrap longitude into [0, 360) so negative or out-of-range values still\n * resolve to a real sign. Robust to wonky upstream data.\n */\nexport function normalizeLongitude(lon: number): number {\n\tconst wrapped = lon % 360;\n\treturn wrapped < 0 ? wrapped + 360 : wrapped;\n}\n\n/**\n * Convert decimal ecliptic longitude (0-360) into sign/degree/minute/second.\n * Used by every chart wheel and aspect table.\n */\nexport function longitudeToSignPosition(longitude: number): SignPosition {\n\tconst lon = normalizeLongitude(longitude);\n\tconst signIndex = Math.floor(lon / 30) % 12;\n\tconst within = lon % 30;\n\tconst degree = Math.floor(within);\n\tconst minuteFloat = (within - degree) * 60;\n\tconst minute = Math.floor(minuteFloat);\n\tconst second = Math.round((minuteFloat - minute) * 60);\n\treturn {\n\t\tsign: SIGNS_ORDER[signIndex] ?? 'Aries',\n\t\tsignIndex,\n\t\tdegree,\n\t\tminute,\n\t\tsecond,\n\t};\n}\n\n/** Compact display string like \"12\u00B0 Leo 34'\". Used in chart labels. */\nexport function formatSignPosition(longitude: number): string {\n\tconst { sign, degree, minute } = longitudeToSignPosition(longitude);\n\treturn `${degree}\u00B0 ${sign} ${String(minute).padStart(2, '0')}'`;\n}\n\n/** Polar to cartesian for SVG wheel positioning. Angle in degrees, 0 at 3 o'clock. */\nexport function polarToCartesian(\n\tcx: number,\n\tcy: number,\n\tradius: number,\n\tangleDeg: number,\n): { x: number; y: number } {\n\tconst angleRad = (angleDeg * Math.PI) / 180;\n\treturn {\n\t\tx: cx + radius * Math.cos(angleRad),\n\t\ty: cy + radius * Math.sin(angleRad),\n\t};\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["css", "css"]
7
+ }
@@ -0,0 +1,47 @@
1
+ import { LitElement } from 'lit';
2
+ interface TarotCard {
3
+ id?: string;
4
+ name?: string;
5
+ arcana?: 'major' | 'minor' | string;
6
+ number?: number | string;
7
+ position?: string;
8
+ reversed?: boolean;
9
+ keywords?: string[];
10
+ meaning?: string | {
11
+ upright?: string;
12
+ reversed?: string;
13
+ spiritual?: string;
14
+ emotional?: string;
15
+ physical?: string;
16
+ };
17
+ imageUrl?: string;
18
+ upright?: {
19
+ meaning?: string;
20
+ keywords?: string[];
21
+ };
22
+ }
23
+ interface TarotData {
24
+ date?: string;
25
+ seed?: string;
26
+ card?: TarotCard;
27
+ dailyMessage?: string;
28
+ }
29
+ /**
30
+ * Tarot card. Renders /tarot/cards/{id} or /tarot/daily. Click to flip
31
+ * between upright and reversed where the data shape supports it.
32
+ */
33
+ export declare class RoxyTarotCard extends LitElement {
34
+ static styles: import("lit").CSSResult[];
35
+ data: TarotData | TarotCard | null;
36
+ private flipped;
37
+ private getCard;
38
+ private toggleFlip;
39
+ render(): import("lit").TemplateResult<1>;
40
+ }
41
+ declare global {
42
+ interface HTMLElementTagNameMap {
43
+ 'roxy-tarot-card': RoxyTarotCard;
44
+ }
45
+ }
46
+ export {};
47
+ //# sourceMappingURL=tarot-card.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tarot-card.d.ts","sourceRoot":"","sources":["../../src/components/tarot-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,UAAU,SAAS;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EACL,MAAM,GACN;QACA,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACpD;AAED,UAAU,SAAS;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAkGX;IAGF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAQ;IAG1C,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,UAAU,CAEhB;IAEF,MAAM;CA0EN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}