@roxyapi/ui 0.3.1 → 0.4.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.
- package/AGENTS.md +27 -1
- package/README.md +115 -14
- package/dist/cdn/components/ashtakavarga-grid.js +74 -19
- package/dist/cdn/components/ashtakavarga-grid.js.map +2 -2
- package/dist/cdn/components/biorhythm-chart.js +18 -4
- package/dist/cdn/components/biorhythm-chart.js.map +2 -2
- package/dist/cdn/components/choghadiya-grid.js +47 -12
- package/dist/cdn/components/choghadiya-grid.js.map +3 -3
- package/dist/cdn/components/compatibility-card.js +21 -7
- package/dist/cdn/components/compatibility-card.js.map +2 -2
- package/dist/cdn/components/dasha-timeline.js +113 -28
- package/dist/cdn/components/dasha-timeline.js.map +3 -3
- package/dist/cdn/components/data.js +27 -13
- package/dist/cdn/components/data.js.map +2 -2
- package/dist/cdn/components/divisional-chart.js +225 -118
- package/dist/cdn/components/divisional-chart.js.map +4 -4
- package/dist/cdn/components/dosha-card.js +18 -4
- package/dist/cdn/components/dosha-card.js.map +2 -2
- package/dist/cdn/components/endpoint-form.js +25 -11
- package/dist/cdn/components/endpoint-form.js.map +2 -2
- package/dist/cdn/components/guna-milan.js +20 -6
- package/dist/cdn/components/guna-milan.js.map +2 -2
- package/dist/cdn/components/hexagram.js +22 -8
- package/dist/cdn/components/hexagram.js.map +2 -2
- package/dist/cdn/components/horoscope-card.js +20 -6
- package/dist/cdn/components/horoscope-card.js.map +2 -2
- package/dist/cdn/components/kp-chart.js +19 -5
- package/dist/cdn/components/kp-chart.js.map +2 -2
- package/dist/cdn/components/kp-planets-table.js +17 -3
- package/dist/cdn/components/kp-planets-table.js.map +2 -2
- package/dist/cdn/components/kp-ruling-planets.js +17 -3
- package/dist/cdn/components/kp-ruling-planets.js.map +2 -2
- package/dist/cdn/components/location-search.js +18 -4
- package/dist/cdn/components/location-search.js.map +2 -2
- package/dist/cdn/components/moon-phase.js +27 -13
- package/dist/cdn/components/moon-phase.js.map +2 -2
- package/dist/cdn/components/nakshatra-card.js +16 -2
- package/dist/cdn/components/nakshatra-card.js.map +2 -2
- package/dist/cdn/components/natal-chart.js +79 -40
- package/dist/cdn/components/natal-chart.js.map +3 -3
- package/dist/cdn/components/numerology-card.js +18 -4
- package/dist/cdn/components/numerology-card.js.map +2 -2
- package/dist/cdn/components/panchang-table.js +53 -25
- package/dist/cdn/components/panchang-table.js.map +3 -3
- package/dist/cdn/components/shadbala-table.js +24 -10
- package/dist/cdn/components/shadbala-table.js.map +2 -2
- package/dist/cdn/components/synastry-chart.js +96 -48
- package/dist/cdn/components/synastry-chart.js.map +3 -3
- package/dist/cdn/components/tarot-card.js +17 -3
- package/dist/cdn/components/tarot-card.js.map +2 -2
- package/dist/cdn/components/tarot-spread.js +39 -25
- package/dist/cdn/components/tarot-spread.js.map +2 -2
- package/dist/cdn/components/transits-table.js +18 -4
- package/dist/cdn/components/transits-table.js.map +2 -2
- package/dist/cdn/components/vedic-kundli.js +215 -105
- package/dist/cdn/components/vedic-kundli.js.map +4 -4
- package/dist/cdn/components/vedic-planets-table.js +22 -8
- package/dist/cdn/components/vedic-planets-table.js.map +2 -2
- package/dist/cdn/components/western-planets-table.js +18 -4
- package/dist/cdn/components/western-planets-table.js.map +2 -2
- package/dist/cdn/components/yoga-list.js +17 -3
- package/dist/cdn/components/yoga-list.js.map +2 -2
- package/dist/cdn/roxy-ui.js +1082 -816
- package/dist/cdn/roxy-ui.js.map +4 -4
- package/dist/components/ashtakavarga-grid.d.ts +13 -1
- package/dist/components/ashtakavarga-grid.d.ts.map +1 -1
- package/dist/components/ashtakavarga-grid.js +86 -11
- package/dist/components/ashtakavarga-grid.js.map +2 -2
- package/dist/components/biorhythm-chart.js +14 -0
- package/dist/components/biorhythm-chart.js.map +2 -2
- package/dist/components/choghadiya-grid.d.ts +6 -0
- package/dist/components/choghadiya-grid.d.ts.map +1 -1
- package/dist/components/choghadiya-grid.js +50 -2
- package/dist/components/choghadiya-grid.js.map +2 -2
- package/dist/components/compatibility-card.js +14 -0
- package/dist/components/compatibility-card.js.map +2 -2
- package/dist/components/dasha-timeline.d.ts +10 -0
- package/dist/components/dasha-timeline.d.ts.map +1 -1
- package/dist/components/dasha-timeline.js +135 -4
- package/dist/components/dasha-timeline.js.map +2 -2
- package/dist/components/data.js +14 -0
- package/dist/components/data.js.map +2 -2
- package/dist/components/divisional-chart.d.ts +9 -6
- package/dist/components/divisional-chart.d.ts.map +1 -1
- package/dist/components/divisional-chart.js +546 -251
- package/dist/components/divisional-chart.js.map +4 -4
- package/dist/components/dosha-card.js +14 -0
- package/dist/components/dosha-card.js.map +2 -2
- package/dist/components/endpoint-form.js +14 -0
- package/dist/components/endpoint-form.js.map +2 -2
- package/dist/components/guna-milan.js +14 -0
- package/dist/components/guna-milan.js.map +2 -2
- package/dist/components/hexagram.js +14 -0
- package/dist/components/hexagram.js.map +2 -2
- package/dist/components/horoscope-card.js +14 -0
- package/dist/components/horoscope-card.js.map +2 -2
- package/dist/components/kp-chart.js +14 -0
- package/dist/components/kp-chart.js.map +2 -2
- package/dist/components/kp-planets-table.js +14 -0
- package/dist/components/kp-planets-table.js.map +2 -2
- package/dist/components/kp-ruling-planets.js +14 -0
- package/dist/components/kp-ruling-planets.js.map +2 -2
- package/dist/components/location-search.js +14 -0
- package/dist/components/location-search.js.map +2 -2
- package/dist/components/moon-phase.js +14 -0
- package/dist/components/moon-phase.js.map +2 -2
- package/dist/components/nakshatra-card.js +14 -0
- package/dist/components/nakshatra-card.js.map +2 -2
- package/dist/components/natal-chart.d.ts.map +1 -1
- package/dist/components/natal-chart.js +76 -6
- package/dist/components/natal-chart.js.map +2 -2
- package/dist/components/numerology-card.js +14 -0
- package/dist/components/numerology-card.js.map +2 -2
- package/dist/components/panchang-table.d.ts +1 -0
- package/dist/components/panchang-table.d.ts.map +1 -1
- package/dist/components/panchang-table.js +37 -1
- package/dist/components/panchang-table.js.map +2 -2
- package/dist/components/shadbala-table.js +14 -0
- package/dist/components/shadbala-table.js.map +2 -2
- package/dist/components/synastry-chart.d.ts +6 -0
- package/dist/components/synastry-chart.d.ts.map +1 -1
- package/dist/components/synastry-chart.js +106 -7
- package/dist/components/synastry-chart.js.map +2 -2
- package/dist/components/tarot-card.js +14 -0
- package/dist/components/tarot-card.js.map +2 -2
- package/dist/components/tarot-spread.js +14 -0
- package/dist/components/tarot-spread.js.map +2 -2
- package/dist/components/transits-table.js +14 -0
- package/dist/components/transits-table.js.map +2 -2
- package/dist/components/vedic-kundli.d.ts +14 -9
- package/dist/components/vedic-kundli.d.ts.map +1 -1
- package/dist/components/vedic-kundli.js +537 -245
- package/dist/components/vedic-kundli.js.map +4 -4
- package/dist/components/vedic-planets-table.js +14 -0
- package/dist/components/vedic-planets-table.js.map +2 -2
- package/dist/components/western-planets-table.js +14 -0
- package/dist/components/western-planets-table.js.map +2 -2
- package/dist/components/yoga-list.js +14 -0
- package/dist/components/yoga-list.js.map +2 -2
- package/dist/index.cjs +1397 -797
- package/dist/index.cjs.map +4 -4
- package/dist/index.js +1278 -678
- package/dist/index.js.map +4 -4
- package/dist/manifest.json +23 -23
- package/dist/styles/tokens.css +8 -23
- package/dist/utils/base-styles.d.ts.map +1 -1
- package/dist/utils/kundli-render.d.ts +43 -104
- package/dist/utils/kundli-render.d.ts.map +1 -1
- package/dist/utils/kundli-styles.d.ts +13 -0
- package/dist/utils/kundli-styles.d.ts.map +1 -0
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/ashtakavarga-grid.ts +73 -11
- package/src/components/choghadiya-grid.ts +37 -2
- package/src/components/dasha-timeline.ts +135 -4
- package/src/components/divisional-chart.ts +40 -97
- package/src/components/natal-chart.ts +89 -6
- package/src/components/panchang-table.ts +34 -1
- package/src/components/synastry-chart.ts +84 -8
- package/src/components/vedic-kundli.ts +35 -95
- package/src/styles/tokens.css +8 -23
- package/src/utils/base-styles.ts +14 -0
- package/src/utils/kundli-render.ts +609 -270
- package/src/utils/kundli-styles.ts +124 -0
- package/src/version.ts +1 -1
package/AGENTS.md
CHANGED
|
@@ -319,12 +319,38 @@ export default function BirthChartView({ data }: { data: unknown }) {
|
|
|
319
319
|
}
|
|
320
320
|
```
|
|
321
321
|
|
|
322
|
+
## Theming and dark mode
|
|
323
|
+
|
|
324
|
+
Components react to three signals in priority order. No events to dispatch. No JS bridge to write.
|
|
325
|
+
|
|
326
|
+
| Signal | Where | Effect |
|
|
327
|
+
|---|---|---|
|
|
328
|
+
| `prefers-color-scheme: dark` | OS | Default. Follows user system setting. |
|
|
329
|
+
| `data-theme="light"` or `data-theme="dark"` | `<html>` / `<body>` / any ancestor / the component itself | Wins over OS. Per-element override scope works. |
|
|
330
|
+
| `.dark` class | Any ancestor | Equivalent to `data-theme="dark"`. Use when the host stack already ships a `.dark` toggle (Tailwind, shadcn). |
|
|
331
|
+
|
|
332
|
+
To toggle at runtime:
|
|
333
|
+
|
|
334
|
+
```ts
|
|
335
|
+
document.documentElement.dataset.theme = 'dark'; // or 'light'
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
That single line re-themes every Roxy UI component on the page. Persist user choice in `localStorage` from your own code; the library does not own preferences.
|
|
339
|
+
|
|
340
|
+
Per-element scope is supported:
|
|
341
|
+
|
|
342
|
+
```html
|
|
343
|
+
<roxy-natal-chart data-theme="dark" .data=${chart}></roxy-natal-chart>
|
|
344
|
+
```
|
|
345
|
+
|
|
346
|
+
Every visible aspect of the chart is driven by `--roxy-*` CSS custom properties on `:host`. Override any token on `:root`, on `:host`, or per element. Do not write Tailwind utility classes inside the components; the Shadow DOM boundary stops them at the door.
|
|
347
|
+
|
|
322
348
|
## Rules every agent must follow
|
|
323
349
|
|
|
324
350
|
- Always call `/location/search` first before any chart endpoint that takes latitude, longitude, or timezone. Use `<roxy-location-search>` for the input UI.
|
|
325
351
|
- Pass the response object directly. Components are stateless; they do not fetch internally except for `<roxy-location-search>`, `<roxy-endpoint-form>`, and the widgets auto-mount script.
|
|
326
352
|
- Use the typed SDK from `@roxyapi/sdk` so prop shapes match the spec automatically.
|
|
327
|
-
- Theming is CSS custom properties on `:root` or per element. Do not write Tailwind classes inside the components; the shadow DOM ignores them.
|
|
353
|
+
- Theming is CSS custom properties on `:root` or per element. Switch light and dark via `data-theme` on any ancestor (see the table above). Do not write Tailwind classes inside the components; the shadow DOM ignores them.
|
|
328
354
|
- Honor reduced motion. The library already respects `prefers-reduced-motion: reduce` and the `--roxy-motion-duration` variable.
|
|
329
355
|
- A11y violations are CI failures. Do not paste over `role` or `aria-*` attributes; the components emit them correctly already.
|
|
330
356
|
- Component types come from the OpenAPI spec via `@hey-api/openapi-ts`. Do not redefine response shapes locally; if a field is missing, fix the spec, regenerate, propagate.
|
package/README.md
CHANGED
|
@@ -76,16 +76,39 @@ Light, dark, your brand. Override one CSS variable and every component updates.
|
|
|
76
76
|
}
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/).
|
|
79
|
+
Pick a tone, set the vars, every chart and card follows. Full token reference at [THEMING.md](https://github.com/RoxyAPI/ui/blob/main/packages/ui/THEMING.md). Live tweaker on the [demo site](https://roxyapi.github.io/ui/). See the [FAQ](#faq) for switching between light and dark at runtime.
|
|
80
80
|
|
|
81
|
-
## Gallery
|
|
81
|
+
## Gallery
|
|
82
|
+
|
|
83
|
+
Every chart, table, and card adapts to light and dark automatically. Hover any image on GitHub to inspect tooltips.
|
|
84
|
+
|
|
85
|
+
### Western astrology
|
|
82
86
|
|
|
83
87
|
<table>
|
|
84
88
|
<tr>
|
|
89
|
+
<td width="50%"><strong>Natal chart</strong> · <code><roxy-natal-chart></code><br><sub>POST /astrology/natal-chart</sub><br>
|
|
90
|
+
<picture>
|
|
91
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/natal-chart-dark.png">
|
|
92
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/natal-chart-light.png" alt="Natal chart wheel with 14 planets, real house cusps, IC DC Part of Fortune Vertex, aspect lines">
|
|
93
|
+
</picture>
|
|
94
|
+
</td>
|
|
85
95
|
<td width="50%"><strong>Synastry</strong> · <code><roxy-synastry-chart></code><br><sub>POST /astrology/synastry</sub><br>
|
|
86
96
|
<picture>
|
|
87
97
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-dark.png">
|
|
88
|
-
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png" alt="Synastry dual-wheel with inter-aspects">
|
|
98
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/synastry-chart-light.png" alt="Synastry dual-wheel with inter-aspects table">
|
|
99
|
+
</picture>
|
|
100
|
+
</td>
|
|
101
|
+
</tr>
|
|
102
|
+
</table>
|
|
103
|
+
|
|
104
|
+
### Vedic astrology
|
|
105
|
+
|
|
106
|
+
<table>
|
|
107
|
+
<tr>
|
|
108
|
+
<td width="50%"><strong>Vedic kundli</strong> · <code><roxy-vedic-kundli></code><br><sub>POST /vedic-astrology/birth-chart</sub><br>
|
|
109
|
+
<picture>
|
|
110
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/vedic-kundli-dark.png">
|
|
111
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/vedic-kundli-light.png" alt="Vedic kundli D1 rashi chart, South Indian style with Lagna marker">
|
|
89
112
|
</picture>
|
|
90
113
|
</td>
|
|
91
114
|
<td width="50%"><strong>KP chart</strong> · <code><roxy-kp-chart></code><br><sub>POST /vedic-astrology/kp/chart</sub><br>
|
|
@@ -99,27 +122,60 @@ Pick a tone, set the vars, every chart and card follows. Full token reference at
|
|
|
99
122
|
<td width="50%"><strong>Divisional chart</strong> · <code><roxy-divisional-chart></code><br><sub>POST /vedic-astrology/divisional-chart</sub><br>
|
|
100
123
|
<picture>
|
|
101
124
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-dark.png">
|
|
102
|
-
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-light.png" alt="
|
|
125
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/divisional-chart-light.png" alt="D2 to D60 varga chart, D9 navamsa shown">
|
|
103
126
|
</picture>
|
|
104
127
|
</td>
|
|
105
|
-
<td width="50%"><strong>
|
|
128
|
+
<td width="50%"><strong>Ashtakavarga grid</strong> · <code><roxy-ashtakavarga-grid></code><br><sub>POST /vedic-astrology/ashtakavarga</sub><br>
|
|
106
129
|
<picture>
|
|
107
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/
|
|
108
|
-
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/
|
|
130
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-dark.png">
|
|
131
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/ashtakavarga-grid-light.png" alt="Ashtakavarga sarva and bhinna bindu heatmap">
|
|
109
132
|
</picture>
|
|
110
133
|
</td>
|
|
111
134
|
</tr>
|
|
112
135
|
<tr>
|
|
113
|
-
<td width="50%"><strong>
|
|
136
|
+
<td width="50%"><strong>Dasha timeline</strong> · <code><roxy-dasha-timeline></code><br><sub>POST /vedic-astrology/dasha/{current,major,sub}</sub><br>
|
|
114
137
|
<picture>
|
|
115
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/
|
|
116
|
-
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/
|
|
138
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-dark.png">
|
|
139
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/dasha-timeline-light.png" alt="Vimshottari mahadasha and antardasha timeline with progress bars">
|
|
140
|
+
</picture>
|
|
141
|
+
</td>
|
|
142
|
+
<td width="50%"><strong>Shadbala table</strong> · <code><roxy-shadbala-table></code><br><sub>POST /vedic-astrology/shadbala</sub><br>
|
|
143
|
+
<picture>
|
|
144
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/shadbala-table-dark.png">
|
|
145
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/shadbala-table-light.png" alt="Six-fold planetary strength bars with rupas and adequacy badges">
|
|
117
146
|
</picture>
|
|
118
147
|
</td>
|
|
148
|
+
</tr>
|
|
149
|
+
</table>
|
|
150
|
+
|
|
151
|
+
### Other domains
|
|
152
|
+
|
|
153
|
+
<table>
|
|
154
|
+
<tr>
|
|
119
155
|
<td width="50%"><strong>Tarot spread</strong> · <code><roxy-tarot-spread></code><br><sub>POST /tarot/spreads/{three-card,celtic-cross,love}</sub><br>
|
|
120
156
|
<picture>
|
|
121
157
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-dark.png">
|
|
122
|
-
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png" alt="
|
|
158
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/tarot-spread-light.png" alt="Three-card tarot spread with position labels and reading">
|
|
159
|
+
</picture>
|
|
160
|
+
</td>
|
|
161
|
+
<td width="50%"><strong>Biorhythm</strong> · <code><roxy-biorhythm-chart></code><br><sub>POST /biorhythm/{daily,forecast,critical-days}</sub><br>
|
|
162
|
+
<picture>
|
|
163
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/biorhythm-chart-dark.png">
|
|
164
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/biorhythm-chart-light.png" alt="Physical, emotional, intellectual cycle bars">
|
|
165
|
+
</picture>
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td width="50%"><strong>I Ching hexagram</strong> · <code><roxy-hexagram></code><br><sub>GET /iching/hexagrams/{number}, /iching/cast</sub><br>
|
|
170
|
+
<picture>
|
|
171
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/hexagram-dark.png">
|
|
172
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/hexagram-light.png" alt="Hexagram with trigrams, judgment, image, changing lines">
|
|
173
|
+
</picture>
|
|
174
|
+
</td>
|
|
175
|
+
<td width="50%"><strong>Numerology</strong> · <code><roxy-numerology-card></code><br><sub>POST /numerology/{life-path,expression,personal-year,chart}</sub><br>
|
|
176
|
+
<picture>
|
|
177
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/numerology-card-dark.png">
|
|
178
|
+
<img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/screenshots/numerology-card-light.png" alt="Life path number card with archetype, keywords, and interpretation">
|
|
123
179
|
</picture>
|
|
124
180
|
</td>
|
|
125
181
|
</tr>
|
|
@@ -138,7 +194,7 @@ Tables, cards, forms, and helper components in the [live demo](https://roxyapi.g
|
|
|
138
194
|
|
|
139
195
|
## Start with one component
|
|
140
196
|
|
|
141
|
-
Vanilla HTML.
|
|
197
|
+
Vanilla HTML. No build step. Replace `YOUR_API_KEY` with a publishable key from <https://roxyapi.com/account>.
|
|
142
198
|
|
|
143
199
|
```html
|
|
144
200
|
<script
|
|
@@ -149,7 +205,7 @@ Vanilla HTML. Three lines. No build step.
|
|
|
149
205
|
<roxy-natal-chart id="chart"></roxy-natal-chart>
|
|
150
206
|
<script type="module">
|
|
151
207
|
import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
|
|
152
|
-
const roxy = createRoxy(
|
|
208
|
+
const roxy = createRoxy('YOUR_API_KEY');
|
|
153
209
|
const { data } = await roxy.astrology.generateNatalChart({
|
|
154
210
|
body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 },
|
|
155
211
|
});
|
|
@@ -157,7 +213,23 @@ Vanilla HTML. Three lines. No build step.
|
|
|
157
213
|
</script>
|
|
158
214
|
```
|
|
159
215
|
|
|
160
|
-
|
|
216
|
+
> **Unwrap `data` before passing to the component.** The SDK returns `{ data, error, request, response }`. Pass the envelope and the chart renders `[object Object]`. This is the most common integration bug.
|
|
217
|
+
|
|
218
|
+
Want a Vedic kundli instead? Same shape, different SDK method:
|
|
219
|
+
|
|
220
|
+
```html
|
|
221
|
+
<roxy-vedic-kundli id="kundli" chart-style="south"></roxy-vedic-kundli>
|
|
222
|
+
<script type="module">
|
|
223
|
+
import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
|
|
224
|
+
const roxy = createRoxy('YOUR_API_KEY');
|
|
225
|
+
const { data } = await roxy.vedicAstrology.generateBirthChart({
|
|
226
|
+
body: { date: '1990-01-15', time: '14:30:00', latitude: 19.07, longitude: 72.88, timezone: 5.5 },
|
|
227
|
+
});
|
|
228
|
+
document.getElementById('kundli').data = data;
|
|
229
|
+
</script>
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
In production, geocode the user's city with `<roxy-location-search>` (see [Quick start](#quick-start)) instead of hardcoding coordinates.
|
|
161
233
|
|
|
162
234
|
## Install
|
|
163
235
|
|
|
@@ -500,6 +572,35 @@ Roxy UI runs in any framework that supports the DOM: **React, Next.js, Vue, Svel
|
|
|
500
572
|
|
|
501
573
|
## FAQ
|
|
502
574
|
|
|
575
|
+
<details>
|
|
576
|
+
<summary><strong>How do I switch between light and dark mode?</strong></summary>
|
|
577
|
+
|
|
578
|
+
No events. No JavaScript bridge. Components read three CSS signals in priority order:
|
|
579
|
+
|
|
580
|
+
1. **`prefers-color-scheme`**: follows the operating system by default. Ship nothing, get correct behaviour.
|
|
581
|
+
2. **`data-theme="dark"` or `data-theme="light"`** on any ancestor (typically `<html>` or `<body>`). Wins over system preference.
|
|
582
|
+
3. **`.dark` class** on any ancestor. Equivalent to `data-theme="dark"`. Useful when the host stack already toggles a `.dark` class (Tailwind, shadcn).
|
|
583
|
+
|
|
584
|
+
```ts
|
|
585
|
+
// Toggle on click. No imports from this library needed.
|
|
586
|
+
document.documentElement.dataset.theme =
|
|
587
|
+
document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
|
|
588
|
+
```
|
|
589
|
+
|
|
590
|
+
```ts
|
|
591
|
+
// React: bind theme to component state.
|
|
592
|
+
useEffect(() => {
|
|
593
|
+
document.documentElement.dataset.theme = theme;
|
|
594
|
+
}, [theme]);
|
|
595
|
+
```
|
|
596
|
+
|
|
597
|
+
Persist the choice in `localStorage` from your own code; the components do not own user preferences. Per-element overrides also work, so one chart can run in dark on an otherwise light page:
|
|
598
|
+
|
|
599
|
+
```html
|
|
600
|
+
<roxy-natal-chart data-theme="dark" .data=${chart}></roxy-natal-chart>
|
|
601
|
+
```
|
|
602
|
+
</details>
|
|
603
|
+
|
|
503
604
|
<details>
|
|
504
605
|
<summary><strong>How big is each component? What is the bundle cost?</strong></summary>
|
|
505
606
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";var RoxyUI_ashtakavarga_grid=(()=>{var
|
|
2
|
-
\f\r]`,
|
|
3
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),ft=/'/g,gt=/"/g
|
|
1
|
+
"use strict";var RoxyUI_ashtakavarga_grid=(()=>{var L=Object.defineProperty;var ot=Object.getOwnPropertyDescriptor;var Et=Object.getOwnPropertyNames;var Pt=Object.prototype.hasOwnProperty;var Ct=(i,t)=>{for(var e in t)L(i,e,{get:t[e],enumerable:!0})},Tt=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Et(t))!Pt.call(i,s)&&s!==e&&L(i,s,{get:()=>t[s],enumerable:!(r=ot(t,s))||r.enumerable});return i};var kt=i=>Tt(L({},"__esModule",{value:!0}),i),B=(i,t,e,r)=>{for(var s=r>1?void 0:r?ot(t,e):t,o=i.length-1,a;o>=0;o--)(a=i[o])&&(s=(r?a(t,e,s):a(s))||s);return r&&s&&L(t,e,s),s};var Ft={};Ct(Ft,{RoxyAshtakavargaGrid:()=>v});var q=globalThis,j=q.ShadowRoot&&(q.ShadyCSS===void 0||q.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,G=Symbol(),at=new WeakMap,P=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==G)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(j&&t===void 0){let r=e!==void 0&&e.length===1;r&&(t=at.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&at.set(e,t))}return t}toString(){return this.cssText}},nt=i=>new P(typeof i=="string"?i:i+"",void 0,G),C=(i,...t)=>{let e=i.length===1?i[0]:t.reduce((r,s,o)=>r+(a=>{if(a._$cssResult$===!0)return a.cssText;if(typeof a=="number")return a;throw Error("Value passed to 'css' function must be a 'css' function result: "+a+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+i[o+1],i[0]);return new P(e,i,G)},ht=(i,t)=>{if(j)i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let r=document.createElement("style"),s=q.litNonce;s!==void 0&&r.setAttribute("nonce",s),r.textContent=e.cssText,i.appendChild(r)}},W=j?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(let r of t.cssRules)e+=r.cssText;return nt(e)})(i):i;var{is:Rt,defineProperty:Mt,getOwnPropertyDescriptor:Nt,getOwnPropertyNames:Ot,getOwnPropertySymbols:Ut,getPrototypeOf:Ht}=Object,z=globalThis,lt=z.trustedTypes,Lt=lt?lt.emptyScript:"",Bt=z.reactiveElementPolyfillSupport,T=(i,t)=>i,k={toAttribute(i,t){switch(t){case Boolean:i=i?Lt:null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch{e=null}}return e}},D=(i,t)=>!Rt(i,t),ct={attribute:!0,type:String,converter:k,reflect:!1,useDefault:!1,hasChanged:D};Symbol.metadata??=Symbol("metadata"),z.litPropertyMetadata??=new WeakMap;var f=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=ct){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){let r=Symbol(),s=this.getPropertyDescriptor(t,r,e);s!==void 0&&Mt(this.prototype,t,s)}}static getPropertyDescriptor(t,e,r){let{get:s,set:o}=Nt(this.prototype,t)??{get(){return this[e]},set(a){this[e]=a}};return{get:s,set(a){let h=s?.call(this);o?.call(this,a),this.requestUpdate(t,h,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??ct}static _$Ei(){if(this.hasOwnProperty(T("elementProperties")))return;let t=Ht(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(T("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(T("properties"))){let e=this.properties,r=[...Ot(e),...Ut(e)];for(let s of r)this.createProperty(s,e[s])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[r,s]of e)this.elementProperties.set(r,s)}this._$Eh=new Map;for(let[e,r]of this.elementProperties){let s=this._$Eu(e,r);s!==void 0&&this._$Eh.set(s,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let r=new Set(t.flat(1/0).reverse());for(let s of r)e.unshift(W(s))}else t!==void 0&&e.push(W(t));return e}static _$Eu(t,e){let r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return ht(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ET(t,e){let r=this.constructor.elementProperties.get(t),s=this.constructor._$Eu(t,r);if(s!==void 0&&r.reflect===!0){let o=(r.converter?.toAttribute!==void 0?r.converter:k).toAttribute(e,r.type);this._$Em=t,o==null?this.removeAttribute(s):this.setAttribute(s,o),this._$Em=null}}_$AK(t,e){let r=this.constructor,s=r._$Eh.get(t);if(s!==void 0&&this._$Em!==s){let o=r.getPropertyOptions(s),a=typeof o.converter=="function"?{fromAttribute:o.converter}:o.converter?.fromAttribute!==void 0?o.converter:k;this._$Em=s;let h=a.fromAttribute(e,o.type);this[s]=h??this._$Ej?.get(s)??h,this._$Em=null}}requestUpdate(t,e,r,s=!1,o){if(t!==void 0){let a=this.constructor;if(s===!1&&(o=this[t]),r??=a.getPropertyOptions(t),!((r.hasChanged??D)(o,e)||r.useDefault&&r.reflect&&o===this._$Ej?.get(t)&&!this.hasAttribute(a._$Eu(t,r))))return;this.C(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:r,reflect:s,wrapped:o},a){r&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,a??e??this[t]),o!==!0||a!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),s===!0&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[s,o]of this._$Ep)this[s]=o;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[s,o]of r){let{wrapped:a}=o,h=this[s];a!==!0||this._$AL.has(s)||h===void 0||this.C(s,void 0,o,h)}}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(e)):this._$EM()}catch(r){throw t=!1,this._$EM(),r}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(t){}firstUpdated(t){}};f.elementStyles=[],f.shadowRootOptions={mode:"open"},f[T("elementProperties")]=new Map,f[T("finalized")]=new Map,Bt?.({ReactiveElement:f}),(z.reactiveElementVersions??=[]).push("2.1.2");var tt=globalThis,dt=i=>i,I=tt.trustedTypes,pt=I?I.createPolicy("lit-html",{createHTML:i=>i}):void 0,bt="$lit$",y=`lit$${Math.random().toFixed(9).slice(2)}$`,vt="?"+y,qt=`<${vt}>`,_=document,M=()=>_.createComment(""),N=i=>i===null||typeof i!="object"&&typeof i!="function",et=Array.isArray,jt=i=>et(i)||typeof i?.[Symbol.iterator]=="function",F=`[
|
|
2
|
+
\f\r]`,R=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ut=/-->/g,mt=/>/g,$=RegExp(`>|${F}(?:([^\\s"'>=/]+)(${F}*=${F}*(?:[^
|
|
3
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),ft=/'/g,gt=/"/g,$t=/^(?:script|style|textarea|title)$/i,rt=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),u=rt(1),te=rt(2),ee=rt(3),A=Symbol.for("lit-noChange"),c=Symbol.for("lit-nothing"),yt=new WeakMap,x=_.createTreeWalker(_,129);function xt(i,t){if(!et(i)||!i.hasOwnProperty("raw"))throw Error("invalid template strings array");return pt!==void 0?pt.createHTML(t):t}var zt=(i,t)=>{let e=i.length-1,r=[],s,o=t===2?"<svg>":t===3?"<math>":"",a=R;for(let h=0;h<e;h++){let n=i[h],d,p,l=-1,m=0;for(;m<n.length&&(a.lastIndex=m,p=a.exec(n),p!==null);)m=a.lastIndex,a===R?p[1]==="!--"?a=ut:p[1]!==void 0?a=mt:p[2]!==void 0?($t.test(p[2])&&(s=RegExp("</"+p[2],"g")),a=$):p[3]!==void 0&&(a=$):a===$?p[0]===">"?(a=s??R,l=-1):p[1]===void 0?l=-2:(l=a.lastIndex-p[2].length,d=p[1],a=p[3]===void 0?$:p[3]==='"'?gt:ft):a===gt||a===ft?a=$:a===ut||a===mt?a=R:(a=$,s=void 0);let g=a===$&&i[h+1].startsWith("/>")?" ":"";o+=a===R?n+qt:l>=0?(r.push(d),n.slice(0,l)+bt+n.slice(l)+y+g):n+y+(l===-2?h:g)}return[xt(i,o+(i[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),r]},O=class i{constructor({strings:t,_$litType$:e},r){let s;this.parts=[];let o=0,a=0,h=t.length-1,n=this.parts,[d,p]=zt(t,e);if(this.el=i.createElement(d,r),x.currentNode=this.el.content,e===2||e===3){let l=this.el.content.firstChild;l.replaceWith(...l.childNodes)}for(;(s=x.nextNode())!==null&&n.length<h;){if(s.nodeType===1){if(s.hasAttributes())for(let l of s.getAttributeNames())if(l.endsWith(bt)){let m=p[a++],g=s.getAttribute(l).split(y),H=/([.?@])?(.*)/.exec(m);n.push({type:1,index:o,name:H[2],strings:g,ctor:H[1]==="."?J:H[1]==="?"?Z:H[1]==="@"?Q:E}),s.removeAttribute(l)}else l.startsWith(y)&&(n.push({type:6,index:o}),s.removeAttribute(l));if($t.test(s.tagName)){let l=s.textContent.split(y),m=l.length-1;if(m>0){s.textContent=I?I.emptyScript:"";for(let g=0;g<m;g++)s.append(l[g],M()),x.nextNode(),n.push({type:2,index:++o});s.append(l[m],M())}}}else if(s.nodeType===8)if(s.data===vt)n.push({type:2,index:o});else{let l=-1;for(;(l=s.data.indexOf(y,l+1))!==-1;)n.push({type:7,index:o}),l+=y.length-1}o++}}static createElement(t,e){let r=_.createElement("template");return r.innerHTML=t,r}};function w(i,t,e=i,r){if(t===A)return t;let s=r!==void 0?e._$Co?.[r]:e._$Cl,o=N(t)?void 0:t._$litDirective$;return s?.constructor!==o&&(s?._$AO?.(!1),o===void 0?s=void 0:(s=new o(i),s._$AT(i,e,r)),r!==void 0?(e._$Co??=[])[r]=s:e._$Cl=s),s!==void 0&&(t=w(i,s._$AS(i,t.values),s,r)),t}var Y=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:r}=this._$AD,s=(t?.creationScope??_).importNode(e,!0);x.currentNode=s;let o=x.nextNode(),a=0,h=0,n=r[0];for(;n!==void 0;){if(a===n.index){let d;n.type===2?d=new U(o,o.nextSibling,this,t):n.type===1?d=new n.ctor(o,n.name,n.strings,this,t):n.type===6&&(d=new X(o,this,t)),this._$AV.push(d),n=r[++h]}a!==n?.index&&(o=x.nextNode(),a++)}return x.currentNode=_,s}p(t){let e=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(t,r,e),e+=r.strings.length-2):r._$AI(t[e])),e++}},U=class i{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,r,s){this.type=2,this._$AH=c,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=r,this.options=s,this._$Cv=s?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=w(this,t,e),N(t)?t===c||t==null||t===""?(this._$AH!==c&&this._$AR(),this._$AH=c):t!==this._$AH&&t!==A&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):jt(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==c&&N(this._$AH)?this._$AA.nextSibling.data=t:this.T(_.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:r}=t,s=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=O.createElement(xt(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===s)this._$AH.p(e);else{let o=new Y(s,this),a=o.u(this.options);o.p(e),this.T(a),this._$AH=o}}_$AC(t){let e=yt.get(t.strings);return e===void 0&&yt.set(t.strings,e=new O(t)),e}k(t){et(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,r,s=0;for(let o of t)s===e.length?e.push(r=new i(this.O(M()),this.O(M()),this,this.options)):r=e[s],r._$AI(o),s++;s<e.length&&(this._$AR(r&&r._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){let r=dt(t).nextSibling;dt(t).remove(),t=r}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},E=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,r,s,o){this.type=1,this._$AH=c,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=o,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=c}_$AI(t,e=this,r,s){let o=this.strings,a=!1;if(o===void 0)t=w(this,t,e,0),a=!N(t)||t!==this._$AH&&t!==A,a&&(this._$AH=t);else{let h=t,n,d;for(t=o[0],n=0;n<o.length-1;n++)d=w(this,h[r+n],e,n),d===A&&(d=this._$AH[n]),a||=!N(d)||d!==this._$AH[n],d===c?t=c:t!==c&&(t+=(d??"")+o[n+1]),this._$AH[n]=d}a&&!s&&this.j(t)}j(t){t===c?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},J=class extends E{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===c?void 0:t}},Z=class extends E{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==c)}},Q=class extends E{constructor(t,e,r,s,o){super(t,e,r,s,o),this.type=5}_$AI(t,e=this){if((t=w(this,t,e,0)??c)===A)return;let r=this._$AH,s=t===c&&r!==c||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,o=t!==c&&(r===c||s);s&&this.element.removeEventListener(this.name,this,r),o&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},X=class{constructor(t,e,r){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(t){w(this,t)}};var Dt=tt.litHtmlPolyfillSupport;Dt?.(O,U),(tt.litHtmlVersions??=[]).push("3.3.2");var _t=(i,t,e)=>{let r=e?.renderBefore??t,s=r._$litPart$;if(s===void 0){let o=e?.renderBefore??null;r._$litPart$=s=new U(t.insertBefore(M(),o),o,void 0,e??{})}return s._$AI(i),s};var st=globalThis,b=class extends f{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=_t(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return A}};b._$litElement$=!0,b.finalized=!0,st.litElementHydrateSupport?.({LitElement:b});var It=st.litElementPolyfillSupport;It?.({LitElement:b});(st.litElementVersions??=[]).push("4.2.2");var At=i=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(i,t)}):customElements.define(i,t)};var Vt={attribute:!0,type:String,converter:k,reflect:!1,hasChanged:D},Kt=(i=Vt,t,e)=>{let{kind:r,metadata:s}=e,o=globalThis.litPropertyMetadata.get(s);if(o===void 0&&globalThis.litPropertyMetadata.set(s,o=new Map),r==="setter"&&((i=Object.create(i)).wrapped=!0),o.set(e.name,i),r==="accessor"){let{name:a}=e;return{set(h){let n=t.get.call(this);t.set.call(this,h),this.requestUpdate(a,n,i,!0,h)},init(h){return h!==void 0&&this.C(a,void 0,i,h),h}}}if(r==="setter"){let{name:a}=e;return function(h){let n=this[a];t.call(this,h),this.requestUpdate(a,n,i,!0,h)}}throw Error("Unsupported decorator location: "+r)};function V(i){return(t,e)=>typeof e=="object"?Kt(i,t,e):((r,s,o)=>{let a=s.hasOwnProperty(o);return s.constructor.createProperty(o,r),a?Object.getOwnPropertyDescriptor(s,o):void 0})(i,t,e)}function St(i){return V({...i,state:!0,attribute:!1})}var it={Aries:"\u2648",Taurus:"\u2649",Gemini:"\u264A",Cancer:"\u264B",Leo:"\u264C",Virgo:"\u264D",Libra:"\u264E",Scorpio:"\u264F",Sagittarius:"\u2650",Capricorn:"\u2651",Aquarius:"\u2652",Pisces:"\u2653"};var Gt=["Aries","Taurus","Gemini","Cancer","Leo","Virgo","Libra","Scorpio","Sagittarius","Capricorn","Aquarius","Pisces"],ze=Gt.map(i=>i.toLowerCase());var wt=C`
|
|
4
4
|
:host {
|
|
5
5
|
display: block;
|
|
6
6
|
container-type: inline-size;
|
|
@@ -82,7 +82,21 @@
|
|
|
82
82
|
outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
|
|
83
83
|
outline-offset: 2px;
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
|
|
86
|
+
/* Force the text-style variant on every Unicode glyph in the component.
|
|
87
|
+
* macOS and iOS substitute coloured emoji glyphs for the planetary and
|
|
88
|
+
* gender Unicode code points (Mars, Venus, Mercury, etc.) when the
|
|
89
|
+
* system colour-emoji font wins font selection. The text-style variant
|
|
90
|
+
* keeps glyphs monochrome so they inherit the surrounding fill colour
|
|
91
|
+
* and match the brand palette consistently across platforms.
|
|
92
|
+
*
|
|
93
|
+
* font-variant-emoji is part of CSS Fonts 4 (Safari 17+, Chrome 134+,
|
|
94
|
+
* Firefox 139+). On older browsers the rule is silently ignored.
|
|
95
|
+
*/
|
|
96
|
+
:host {
|
|
97
|
+
font-variant-emoji: text;
|
|
98
|
+
}
|
|
99
|
+
`;var Wt={sarva:"Sarvashtakavarga",bhinna:"Bhinnashtakavarga",pinda:"Shodhya Pinda"},S=["sarva","bhinna","pinda"],v=class extends b{constructor(){super(...arguments);this.data=null;this.activeTab="sarva"}render(){if(!this.data)return u`<div class="roxy-empty" role="status">No ashtakavarga data</div>`;let e=this.data.signs??[];return u`<div class="wrap" aria-label="Ashtakavarga grid">
|
|
86
100
|
<div class="head">
|
|
87
101
|
<h2 class="title">Ashtakavarga</h2>
|
|
88
102
|
${e.length?u`<p class="subtitle">${e.length} signs</p>`:c}
|
|
@@ -114,7 +128,7 @@
|
|
|
114
128
|
>
|
|
115
129
|
${this.activeTab==="sarva"?this.renderSarva(e):this.activeTab==="bhinna"?this.renderBhinna(e):this.renderPinda()}
|
|
116
130
|
</div>
|
|
117
|
-
</div>`}onTabKeyDown(e){let r=S.indexOf(this.activeTab);e.key==="ArrowRight"?(e.preventDefault(),this.activeTab=S[(r+1)%S.length],this.focusActiveTab()):e.key==="ArrowLeft"&&(e.preventDefault(),this.activeTab=S[(r-1+S.length)%S.length],this.focusActiveTab())}focusActiveTab(){requestAnimationFrame(()=>{this.shadowRoot?.querySelector(`#tab-${this.activeTab}`)?.focus()})}
|
|
131
|
+
</div>`}onTabKeyDown(e){let r=S.indexOf(this.activeTab);e.key==="ArrowRight"?(e.preventDefault(),this.activeTab=S[(r+1)%S.length],this.focusActiveTab()):e.key==="ArrowLeft"&&(e.preventDefault(),this.activeTab=S[(r-1+S.length)%S.length],this.focusActiveTab())}focusActiveTab(){requestAnimationFrame(()=>{this.shadowRoot?.querySelector(`#tab-${this.activeTab}`)?.focus()})}bhinnaHeat(e){return e<=1?"heat-1":e<=2?"heat-2":e<=3?"heat-3":e<=4?"heat-4":e<=5?"heat-5":e<=6?"heat-6":"heat-7"}sarvaHeat(e){return e<=18?"heat-1":e<=23?"heat-2":e<=28?"heat-3":e<=32?"heat-4":e<=37?"heat-5":e<=42?"heat-6":"heat-7"}renderSarva(e){let r=this.data.sarvashtakavarga;return r?u`<div class="overflow-scroll">
|
|
118
132
|
<table aria-label="Sarvashtakavarga bindu counts per sign">
|
|
119
133
|
<thead>
|
|
120
134
|
<tr>
|
|
@@ -123,10 +137,10 @@
|
|
|
123
137
|
</tr>
|
|
124
138
|
</thead>
|
|
125
139
|
<tbody>
|
|
126
|
-
${e.map((s,
|
|
140
|
+
${e.map((s,o)=>{let a=r.bindus[o]??0,h=this.sarvaHeat(a);return u`<tr>
|
|
127
141
|
<td>
|
|
128
142
|
<div class="planet-cell">
|
|
129
|
-
<span class="glyph" aria-hidden="true">${
|
|
143
|
+
<span class="glyph" aria-hidden="true">${it[s]??""}</span>
|
|
130
144
|
${s}
|
|
131
145
|
</div>
|
|
132
146
|
</td>
|
|
@@ -145,14 +159,14 @@
|
|
|
145
159
|
<thead>
|
|
146
160
|
<tr>
|
|
147
161
|
<th scope="col">Planet</th>
|
|
148
|
-
${e.map(s=>u`<th scope="col" title=${s}>${
|
|
162
|
+
${e.map(s=>u`<th scope="col" title=${s}>${it[s]??s.slice(0,2)}</th>`)}
|
|
149
163
|
<th scope="col">Total</th>
|
|
150
164
|
</tr>
|
|
151
165
|
</thead>
|
|
152
166
|
<tbody>
|
|
153
167
|
${r.map(s=>u`<tr>
|
|
154
168
|
<td>${s.planet}</td>
|
|
155
|
-
${s.bindus.map(
|
|
169
|
+
${s.bindus.map(o=>{let a=this.bhinnaHeat(o);return u`<td class="${`heat-cell ${a}`}">${o}</td>`})}
|
|
156
170
|
<td>${s.total}</td>
|
|
157
171
|
</tr>`)}
|
|
158
172
|
</tbody>
|
|
@@ -176,7 +190,7 @@
|
|
|
176
190
|
</tr>`)}
|
|
177
191
|
</tbody>
|
|
178
192
|
</table>
|
|
179
|
-
</div>`:u`<p class="roxy-empty">No shodhya pinda data</p>`}}
|
|
193
|
+
</div>`:u`<p class="roxy-empty">No shodhya pinda data</p>`}};v.styles=[wt,C`
|
|
180
194
|
.wrap {
|
|
181
195
|
display: grid;
|
|
182
196
|
gap: var(--roxy-space-md, 1rem);
|
|
@@ -283,28 +297,69 @@
|
|
|
283
297
|
border-bottom: none;
|
|
284
298
|
}
|
|
285
299
|
|
|
286
|
-
/* Heat cells
|
|
300
|
+
/* Heat cells. Single base hue (var --roxy-heat) mixed with
|
|
301
|
+
* transparent at increasing percentages produces seven readable
|
|
302
|
+
* tiers in both light and dark themes. Text colour stays
|
|
303
|
+
* var(--roxy-fg) so it inverts with the host theme without
|
|
304
|
+
* per-tier overrides. */
|
|
287
305
|
.heat-cell {
|
|
288
306
|
border-radius: var(--roxy-radius-sm, 4px);
|
|
289
307
|
font-weight: var(--roxy-weight-bold, 600);
|
|
290
308
|
min-width: 2rem;
|
|
291
309
|
font-variant-numeric: tabular-nums;
|
|
310
|
+
color: var(--roxy-fg, currentColor);
|
|
292
311
|
}
|
|
293
312
|
|
|
294
|
-
.heat-1 { background: var(--roxy-heat
|
|
295
|
-
.heat-2 { background: var(--roxy-heat
|
|
296
|
-
.heat-3 { background: var(--roxy-heat
|
|
297
|
-
.heat-4 { background: var(--roxy-heat
|
|
298
|
-
.heat-5 { background: var(--roxy-heat
|
|
299
|
-
.heat-6 { background: var(--roxy-heat
|
|
300
|
-
.heat-7 { background: var(--roxy-heat
|
|
313
|
+
.heat-1 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 6%, transparent); }
|
|
314
|
+
.heat-2 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 14%, transparent); }
|
|
315
|
+
.heat-3 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 26%, transparent); }
|
|
316
|
+
.heat-4 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 40%, transparent); }
|
|
317
|
+
.heat-5 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 55%, transparent); }
|
|
318
|
+
.heat-6 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 72%, transparent); }
|
|
319
|
+
.heat-7 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 90%, transparent); }
|
|
301
320
|
|
|
302
321
|
/* Bhinna grid: planet header column narrower */
|
|
303
322
|
.bhinna-table th:first-child,
|
|
304
323
|
.bhinna-table td:first-child {
|
|
305
324
|
min-width: 5rem;
|
|
306
325
|
}
|
|
307
|
-
|
|
326
|
+
|
|
327
|
+
/* Tight cells below 480px so the 14-column bhinna grid stops
|
|
328
|
+
* overflowing the viewport. The wrapper keeps overflow-x:auto as
|
|
329
|
+
* a fallback for very long content. */
|
|
330
|
+
@container (max-width: 480px) {
|
|
331
|
+
.bhinna-table th,
|
|
332
|
+
.bhinna-table td {
|
|
333
|
+
padding: 0.3rem 0.35rem;
|
|
334
|
+
font-size: var(--roxy-text-xs, 0.75rem);
|
|
335
|
+
}
|
|
336
|
+
.bhinna-table th:first-child,
|
|
337
|
+
.bhinna-table td:first-child {
|
|
338
|
+
min-width: 3.5rem;
|
|
339
|
+
}
|
|
340
|
+
.heat-cell {
|
|
341
|
+
min-width: 1.5rem;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
/* Visual cue that the bhinna table is scrollable below the breakpoint:
|
|
345
|
+
* a soft gradient at the right edge so users see there is more to scroll. */
|
|
346
|
+
.overflow-scroll {
|
|
347
|
+
mask-image: linear-gradient(
|
|
348
|
+
to right,
|
|
349
|
+
transparent 0,
|
|
350
|
+
black 0.5rem,
|
|
351
|
+
black calc(100% - 1rem),
|
|
352
|
+
transparent 100%
|
|
353
|
+
);
|
|
354
|
+
-webkit-mask-image: linear-gradient(
|
|
355
|
+
to right,
|
|
356
|
+
transparent 0,
|
|
357
|
+
black 0.5rem,
|
|
358
|
+
black calc(100% - 1rem),
|
|
359
|
+
transparent 100%
|
|
360
|
+
);
|
|
361
|
+
}
|
|
362
|
+
`],B([V({attribute:!1})],v.prototype,"data",2),B([St()],v.prototype,"activeTab",2),v=B([At("roxy-ashtakavarga-grid")],v);return kt(Ft);})();
|
|
308
363
|
/*! Bundled license information:
|
|
309
364
|
|
|
310
365
|
@lit/reactive-element/css-tag.js:
|