@roxyapi/ui 0.1.1 → 0.1.3
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 +2 -2
- package/LICENSE +21 -0
- package/README.md +505 -0
- package/THEMING.md +24 -7
- package/dist/cdn/components/biorhythm-chart.js +15 -22
- package/dist/cdn/components/biorhythm-chart.js.map +3 -3
- package/dist/cdn/components/compatibility-card.js +36 -34
- package/dist/cdn/components/compatibility-card.js.map +4 -4
- package/dist/cdn/components/dasha-timeline.js +35 -39
- package/dist/cdn/components/dasha-timeline.js.map +4 -4
- package/dist/cdn/components/data.js +6 -6
- package/dist/cdn/components/data.js.map +3 -3
- package/dist/cdn/components/dosha-card.js +13 -13
- package/dist/cdn/components/dosha-card.js.map +2 -2
- package/dist/cdn/components/endpoint-form.js +47 -28
- package/dist/cdn/components/endpoint-form.js.map +3 -3
- package/dist/cdn/components/guna-milan.js +18 -18
- package/dist/cdn/components/guna-milan.js.map +4 -4
- package/dist/cdn/components/hexagram.js +26 -26
- package/dist/cdn/components/hexagram.js.map +3 -3
- package/dist/cdn/components/horoscope-card.js +38 -38
- package/dist/cdn/components/horoscope-card.js.map +3 -3
- package/dist/cdn/components/kp-planets-table.js +10 -10
- package/dist/cdn/components/kp-planets-table.js.map +4 -4
- package/dist/cdn/components/location-search.js +6 -6
- package/dist/cdn/components/location-search.js.map +3 -3
- package/dist/cdn/components/moon-phase.js +21 -21
- package/dist/cdn/components/moon-phase.js.map +4 -4
- package/dist/cdn/components/natal-chart.js +61 -19
- package/dist/cdn/components/natal-chart.js.map +4 -4
- package/dist/cdn/components/numerology-card.js +40 -31
- package/dist/cdn/components/numerology-card.js.map +3 -3
- package/dist/cdn/components/panchang-table.js +25 -25
- package/dist/cdn/components/panchang-table.js.map +4 -4
- package/dist/cdn/components/synastry-chart.js +129 -39
- package/dist/cdn/components/synastry-chart.js.map +4 -4
- package/dist/cdn/components/tarot-card.js +49 -20
- package/dist/cdn/components/tarot-card.js.map +3 -3
- package/dist/cdn/components/tarot-spread.js +43 -27
- package/dist/cdn/components/tarot-spread.js.map +3 -3
- package/dist/cdn/components/vedic-kundli.js +23 -9
- package/dist/cdn/components/vedic-kundli.js.map +3 -3
- package/dist/cdn/roxy-ui.js +560 -350
- package/dist/cdn/roxy-ui.js.map +4 -4
- package/dist/components/biorhythm-chart.d.ts +2 -46
- package/dist/components/biorhythm-chart.d.ts.map +1 -1
- package/dist/components/biorhythm-chart.js +24 -23
- package/dist/components/biorhythm-chart.js.map +2 -2
- package/dist/components/compatibility-card.d.ts +2 -27
- package/dist/components/compatibility-card.d.ts.map +1 -1
- package/dist/components/compatibility-card.js +50 -29
- package/dist/components/compatibility-card.js.map +3 -3
- package/dist/components/dasha-timeline.d.ts +2 -31
- package/dist/components/dasha-timeline.d.ts.map +1 -1
- package/dist/components/dasha-timeline.js +32 -30
- package/dist/components/dasha-timeline.js.map +3 -3
- package/dist/components/data.d.ts +6 -0
- package/dist/components/data.d.ts.map +1 -1
- package/dist/components/data.js +9 -1
- package/dist/components/data.js.map +2 -2
- package/dist/components/dosha-card.d.ts +2 -16
- package/dist/components/dosha-card.d.ts.map +1 -1
- package/dist/components/dosha-card.js +12 -13
- package/dist/components/dosha-card.js.map +2 -2
- package/dist/components/endpoint-form.d.ts +2 -0
- package/dist/components/endpoint-form.d.ts.map +1 -1
- package/dist/components/endpoint-form.js +66 -8
- package/dist/components/endpoint-form.js.map +2 -2
- package/dist/components/guna-milan.d.ts +2 -20
- package/dist/components/guna-milan.d.ts.map +1 -1
- package/dist/components/guna-milan.js +22 -12
- package/dist/components/guna-milan.js.map +3 -3
- package/dist/components/hexagram.d.ts +3 -27
- package/dist/components/hexagram.d.ts.map +1 -1
- package/dist/components/hexagram.js +31 -15
- package/dist/components/hexagram.js.map +2 -2
- package/dist/components/horoscope-card.d.ts +2 -20
- package/dist/components/horoscope-card.d.ts.map +1 -1
- package/dist/components/horoscope-card.js +24 -15
- package/dist/components/horoscope-card.js.map +2 -2
- package/dist/components/kp-planets-table.d.ts +2 -21
- package/dist/components/kp-planets-table.d.ts.map +1 -1
- package/dist/components/kp-planets-table.js +10 -4
- package/dist/components/kp-planets-table.js.map +3 -3
- package/dist/components/location-search.d.ts +3 -11
- package/dist/components/location-search.d.ts.map +1 -1
- package/dist/components/location-search.js +45 -5
- package/dist/components/location-search.js.map +2 -2
- package/dist/components/moon-phase.d.ts +4 -21
- package/dist/components/moon-phase.d.ts.map +1 -1
- package/dist/components/moon-phase.js +17 -4
- package/dist/components/moon-phase.js.map +3 -3
- package/dist/components/natal-chart.d.ts +7 -43
- package/dist/components/natal-chart.d.ts.map +1 -1
- package/dist/components/natal-chart.js +130 -70
- package/dist/components/natal-chart.js.map +3 -3
- package/dist/components/numerology-card.d.ts +5 -37
- package/dist/components/numerology-card.d.ts.map +1 -1
- package/dist/components/numerology-card.js +54 -28
- package/dist/components/numerology-card.js.map +2 -2
- package/dist/components/panchang-table.d.ts +3 -62
- package/dist/components/panchang-table.d.ts.map +1 -1
- package/dist/components/panchang-table.js +62 -32
- package/dist/components/panchang-table.js.map +3 -3
- package/dist/components/synastry-chart.d.ts +9 -28
- package/dist/components/synastry-chart.d.ts.map +1 -1
- package/dist/components/synastry-chart.js +178 -38
- package/dist/components/synastry-chart.js.map +3 -3
- package/dist/components/tarot-card.d.ts +5 -29
- package/dist/components/tarot-card.d.ts.map +1 -1
- package/dist/components/tarot-card.js +59 -20
- package/dist/components/tarot-card.js.map +2 -2
- package/dist/components/tarot-spread.d.ts +2 -24
- package/dist/components/tarot-spread.d.ts.map +1 -1
- package/dist/components/tarot-spread.js +39 -13
- package/dist/components/tarot-spread.js.map +2 -2
- package/dist/components/vedic-kundli.d.ts +3 -23
- package/dist/components/vedic-kundli.d.ts.map +1 -1
- package/dist/components/vedic-kundli.js +25 -13
- package/dist/components/vedic-kundli.js.map +2 -2
- package/dist/index.cjs +1149 -358
- package/dist/index.cjs.map +4 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1149 -358
- package/dist/index.js.map +4 -4
- package/dist/manifest.d.ts +49 -0
- package/dist/manifest.d.ts.map +1 -0
- package/dist/manifest.json +1 -1
- package/dist/styles/tokens.css +47 -1
- package/dist/tokens/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/types.gen.d.ts +27811 -0
- package/dist/types/types.gen.d.ts.map +1 -0
- package/dist/utils/debounce.d.ts +9 -1
- package/dist/utils/debounce.d.ts.map +1 -1
- package/dist/utils/format.d.ts +15 -0
- package/dist/utils/format.d.ts.map +1 -0
- package/dist/version.d.ts +2 -0
- package/dist/version.d.ts.map +1 -0
- package/package.json +9 -1
- package/src/components/biorhythm-chart.ts +39 -84
- package/src/components/compatibility-card.ts +85 -52
- package/src/components/dasha-timeline.ts +55 -73
- package/src/components/data.ts +20 -1
- package/src/components/dosha-card.ts +18 -31
- package/src/components/endpoint-form.ts +79 -11
- package/src/components/guna-milan.ts +16 -34
- package/src/components/hexagram.ts +53 -43
- package/src/components/horoscope-card.ts +51 -39
- package/src/components/kp-planets-table.ts +8 -27
- package/src/components/location-search.ts +45 -20
- package/src/components/moon-phase.ts +28 -25
- package/src/components/natal-chart.ts +129 -84
- package/src/components/numerology-card.ts +87 -79
- package/src/components/panchang-table.ts +40 -78
- package/src/components/synastry-chart.ts +220 -78
- package/src/components/tarot-card.ts +76 -62
- package/src/components/tarot-spread.ts +72 -45
- package/src/components/vedic-kundli.ts +42 -51
- package/src/index.ts +14 -24
- package/src/manifest.ts +366 -0
- package/src/styles/tokens.css +47 -1
- package/src/tokens/index.ts +5 -0
- package/src/types/types.gen.ts +1 -1
- package/src/utils/debounce.ts +23 -4
- package/src/utils/format.ts +57 -0
- package/src/version.ts +2 -0
|
@@ -1,50 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
targetDate?: string;
|
|
5
|
-
daysSinceBirth?: number;
|
|
6
|
-
cycles?: Record<string, number>;
|
|
7
|
-
energyRating?: number;
|
|
8
|
-
overallPhase?: string;
|
|
9
|
-
interpretation?: string;
|
|
10
|
-
advice?: string;
|
|
11
|
-
criticalAlerts?: string[];
|
|
12
|
-
}
|
|
13
|
-
interface BiorhythmDay {
|
|
14
|
-
date?: string;
|
|
15
|
-
cycles?: Record<string, number>;
|
|
16
|
-
energyRating?: number;
|
|
17
|
-
}
|
|
18
|
-
interface BiorhythmForecast {
|
|
19
|
-
birthDate?: string;
|
|
20
|
-
startDate?: string;
|
|
21
|
-
endDate?: string;
|
|
22
|
-
totalDays?: number;
|
|
23
|
-
summary?: {
|
|
24
|
-
bestDay?: string;
|
|
25
|
-
worstDay?: string;
|
|
26
|
-
criticalDayCount?: number;
|
|
27
|
-
averageEnergy?: number;
|
|
28
|
-
periodAdvice?: string;
|
|
29
|
-
};
|
|
30
|
-
days?: BiorhythmDay[];
|
|
31
|
-
}
|
|
32
|
-
interface CriticalDay {
|
|
33
|
-
date?: string;
|
|
34
|
-
cycle?: string;
|
|
35
|
-
period?: string;
|
|
36
|
-
direction?: string;
|
|
37
|
-
severity?: string;
|
|
38
|
-
advisory?: string;
|
|
39
|
-
}
|
|
40
|
-
interface CriticalDays {
|
|
41
|
-
birthDate?: string;
|
|
42
|
-
startDate?: string;
|
|
43
|
-
endDate?: string;
|
|
44
|
-
totalCriticalDays?: number;
|
|
45
|
-
criticalDays?: CriticalDay[];
|
|
46
|
-
}
|
|
47
|
-
type BiorhythmData = DailyBiorhythm & BiorhythmForecast & CriticalDays;
|
|
2
|
+
import type { GetCriticalDaysResponse, GetDailyBiorhythmResponse, GetForecastResponse } from '../types/index.js';
|
|
3
|
+
type BiorhythmData = GetDailyBiorhythmResponse | GetForecastResponse | GetCriticalDaysResponse;
|
|
48
4
|
/**
|
|
49
5
|
* Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.
|
|
50
6
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"biorhythm-chart.d.ts","sourceRoot":"","sources":["../../src/components/biorhythm-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"biorhythm-chart.d.ts","sourceRoot":"","sources":["../../src/components/biorhythm-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAgB,MAAM,KAAK,CAAC;AAE1D,OAAO,KAAK,EACX,uBAAuB,EACvB,yBAAyB,EACzB,mBAAmB,EACnB,MAAM,mBAAmB,CAAC;AAG3B,KAAK,aAAa,GACf,yBAAyB,GACzB,mBAAmB,GACnB,uBAAuB,CAAC;AAe3B;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,4BA+EX;IAGF,IAAI,EAAE,aAAa,GAAG,IAAI,CAAQ;IAGlC,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,eAAe,CAAW;IAEvD,MAAM;IAcN,OAAO,CAAC,WAAW;IAqCnB,OAAO,CAAC,cAAc;IAqDtB,OAAO,CAAC,cAAc;CAetB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}
|
|
@@ -122,25 +122,28 @@ var RoxyBiorhythmChart = class extends LitElement {
|
|
|
122
122
|
const d = this.data;
|
|
123
123
|
if (!d)
|
|
124
124
|
return html`<div class="roxy-empty" role="status">No biorhythm data</div>`;
|
|
125
|
-
if (this.mode === "critical-days" && d
|
|
125
|
+
if (this.mode === "critical-days" && "criticalDays" in d) {
|
|
126
126
|
return this.renderCritical(d);
|
|
127
127
|
}
|
|
128
|
-
if (this.mode === "forecast" && d
|
|
128
|
+
if (this.mode === "forecast" && "days" in d) {
|
|
129
129
|
return this.renderForecast(d);
|
|
130
130
|
}
|
|
131
131
|
return this.renderDaily(d);
|
|
132
132
|
}
|
|
133
133
|
renderDaily(d) {
|
|
134
|
-
const
|
|
135
|
-
const entries = Object.entries(
|
|
134
|
+
const raw = d.quickRead ?? {};
|
|
135
|
+
const entries = Object.entries(raw).map(([cycle, value]) => {
|
|
136
|
+
const v = typeof value === "number" ? value : 0;
|
|
137
|
+
const normalized = Math.abs(v) > 1 ? v / 100 : v;
|
|
138
|
+
return [cycle, normalized];
|
|
139
|
+
});
|
|
136
140
|
return html`<section class="wrap" aria-label="Daily biorhythm">
|
|
137
141
|
<header class="head">
|
|
138
142
|
<h2 class="title">Biorhythm</h2>
|
|
139
143
|
${typeof d.energyRating === "number" ? html`<span class="energy">Energy ${d.energyRating}/10</span>` : nothing}
|
|
140
144
|
</header>
|
|
141
145
|
<div class="bars" role="list">
|
|
142
|
-
${entries.map(([cycle,
|
|
143
|
-
const v = typeof value === "number" ? value : 0;
|
|
146
|
+
${entries.map(([cycle, v]) => {
|
|
144
147
|
const pct = (v + 1) / 2 * 100;
|
|
145
148
|
const color = CYCLE_COLOR[cycle] ?? "var(--roxy-accent, #f59e0b)";
|
|
146
149
|
return html`<div class="bar" role="listitem">
|
|
@@ -151,15 +154,12 @@ var RoxyBiorhythmChart = class extends LitElement {
|
|
|
151
154
|
style="width: ${pct}%; background: ${color}"
|
|
152
155
|
></span>
|
|
153
156
|
</span>
|
|
154
|
-
<span class="value">${(v * 100)
|
|
157
|
+
<span class="value">${Math.round(v * 100)}%</span>
|
|
155
158
|
</div>`;
|
|
156
159
|
})}
|
|
157
160
|
</div>
|
|
158
|
-
${d.
|
|
161
|
+
${d.dailyMessage ? html`<p class="advice">${d.dailyMessage}</p>` : nothing}
|
|
159
162
|
${d.advice ? html`<p class="advice">${d.advice}</p>` : nothing}
|
|
160
|
-
${d.criticalAlerts?.length ? html`<div>
|
|
161
|
-
${d.criticalAlerts.map((a) => html`<p class="alert">${a}</p>`)}
|
|
162
|
-
</div>` : nothing}
|
|
163
163
|
</section>`;
|
|
164
164
|
}
|
|
165
165
|
renderForecast(d) {
|
|
@@ -169,13 +169,16 @@ var RoxyBiorhythmChart = class extends LitElement {
|
|
|
169
169
|
const w = 600;
|
|
170
170
|
const h = 160;
|
|
171
171
|
const xStep = w / Math.max(days.length - 1, 1);
|
|
172
|
-
const
|
|
172
|
+
const cycleKeys = [
|
|
173
|
+
"physical",
|
|
174
|
+
"emotional",
|
|
175
|
+
"intellectual",
|
|
176
|
+
"intuitive"
|
|
177
|
+
];
|
|
173
178
|
return html`<section class="wrap" aria-label="Biorhythm forecast">
|
|
174
179
|
<header class="head">
|
|
175
180
|
<h2 class="title">Forecast</h2>
|
|
176
|
-
<span class="energy"
|
|
177
|
-
>${d.startDate ?? ""} - ${d.endDate ?? ""}</span
|
|
178
|
-
>
|
|
181
|
+
<span class="energy">${d.startDate} - ${d.endDate}</span>
|
|
179
182
|
</header>
|
|
180
183
|
<svg
|
|
181
184
|
viewBox="0 0 ${w} ${h}"
|
|
@@ -191,11 +194,11 @@ var RoxyBiorhythmChart = class extends LitElement {
|
|
|
191
194
|
stroke="var(--roxy-border, #e4e4e7)"
|
|
192
195
|
stroke-width="1"
|
|
193
196
|
/>
|
|
194
|
-
${
|
|
197
|
+
${cycleKeys.map((cycle) => {
|
|
195
198
|
const points = days.map((day, i) => {
|
|
196
|
-
const v = day
|
|
199
|
+
const v = day[cycle] ?? 0;
|
|
197
200
|
const x = i * xStep;
|
|
198
|
-
const y = h / 2 - v * (h / 2 - 8);
|
|
201
|
+
const y = h / 2 - v / 100 * (h / 2 - 8);
|
|
199
202
|
return `${x.toFixed(2)},${y.toFixed(2)}`;
|
|
200
203
|
}).join(" ");
|
|
201
204
|
const color = CYCLE_COLOR[cycle] ?? "#475569";
|
|
@@ -209,14 +212,12 @@ var RoxyBiorhythmChart = class extends LitElement {
|
|
|
209
212
|
return html`<section class="wrap" aria-label="Critical days">
|
|
210
213
|
<header class="head">
|
|
211
214
|
<h2 class="title">Critical days</h2>
|
|
212
|
-
<span class="energy"
|
|
213
|
-
>${d.totalCriticalDays ?? d.criticalDays?.length ?? 0} total</span
|
|
214
|
-
>
|
|
215
|
+
<span class="energy">${d.totalCriticalDays} total</span>
|
|
215
216
|
</header>
|
|
216
217
|
<div>
|
|
217
|
-
${
|
|
218
|
+
${d.criticalDays.map(
|
|
218
219
|
(day) => html`<span class="crit"
|
|
219
|
-
>${day.date} · ${day.cycle
|
|
220
|
+
>${day.date} · ${day.cycle} ${day.severity}</span
|
|
220
221
|
>`
|
|
221
222
|
)}
|
|
222
223
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/biorhythm-chart.ts", "../../src/utils/base-styles.ts"],
|
|
4
|
-
"sourcesContent": ["import { css, html, LitElement, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ninterface DailyBiorhythm {\n\tbirthDate?: string;\n\ttargetDate?: string;\n\tdaysSinceBirth?: number;\n\tcycles?: Record<string, number>;\n\tenergyRating?: number;\n\toverallPhase?: string;\n\tinterpretation?: string;\n\tadvice?: string;\n\tcriticalAlerts?: string[];\n}\n\ninterface BiorhythmDay {\n\tdate?: string;\n\tcycles?: Record<string, number>;\n\tenergyRating?: number;\n}\n\ninterface BiorhythmForecast {\n\tbirthDate?: string;\n\tstartDate?: string;\n\tendDate?: string;\n\ttotalDays?: number;\n\tsummary?: {\n\t\tbestDay?: string;\n\t\tworstDay?: string;\n\t\tcriticalDayCount?: number;\n\t\taverageEnergy?: number;\n\t\tperiodAdvice?: string;\n\t};\n\tdays?: BiorhythmDay[];\n}\n\ninterface CriticalDay {\n\tdate?: string;\n\tcycle?: string;\n\tperiod?: string;\n\tdirection?: string;\n\tseverity?: string;\n\tadvisory?: string;\n}\n\ninterface CriticalDays {\n\tbirthDate?: string;\n\tstartDate?: string;\n\tendDate?: string;\n\ttotalCriticalDays?: number;\n\tcriticalDays?: CriticalDay[];\n}\n\ntype BiorhythmData = DailyBiorhythm & BiorhythmForecast & CriticalDays;\n\nconst CYCLE_COLOR: Record<string, string> = {\n\tphysical: '#dc2626',\n\temotional: '#0284c7',\n\tintellectual: '#16a34a',\n\tintuitive: '#a855f7',\n\taesthetic: '#f59e0b',\n\tawareness: '#ec4899',\n\tspiritual: '#14b8a6',\n\tpassion: '#ef4444',\n\tmastery: '#6366f1',\n\twisdom: '#475569',\n};\n\n/**\n * Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.\n */\n@customElement('roxy-biorhythm-chart')\nexport class RoxyBiorhythmChart 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\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\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.energy {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.bars {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr 3.5rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.track {\n\t\t\t\theight: 14px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.fill {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.value {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\ttext-align: right;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\t\t\t.advice {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t\t.alert {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\tsvg {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t}\n\t\t\t.crit {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tpadding: 4px 8px;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin: 2px;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: BiorhythmData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'daily' | 'forecast' | 'critical-days' = 'daily';\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 biorhythm data</div>`;\n\n\t\tif (this.mode === 'critical-days' && d.criticalDays?.length) {\n\t\t\treturn this.renderCritical(d);\n\t\t}\n\t\tif (this.mode === 'forecast' && d.days?.length) {\n\t\t\treturn this.renderForecast(d);\n\t\t}\n\t\treturn this.renderDaily(d);\n\t}\n\n\tprivate renderDaily(d: DailyBiorhythm) {\n\t\tconst cycles = d.cycles ?? {};\n\t\tconst entries = Object.entries(cycles);\n\t\treturn html`<section class=\"wrap\" aria-label=\"Daily biorhythm\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Biorhythm</h2>\n\t\t\t\t${\n\t\t\t\t\ttypeof d.energyRating === 'number'\n\t\t\t\t\t\t? html`<span class=\"energy\">Energy ${d.energyRating}/10</span>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t</header>\n\t\t\t<div class=\"bars\" role=\"list\">\n\t\t\t\t${entries.map(([cycle, value]) => {\n\t\t\t\t\tconst v = typeof value === 'number' ? value : 0;\n\t\t\t\t\tconst pct = ((v + 1) / 2) * 100; // -1..1 -> 0..100\n\t\t\t\t\tconst color = CYCLE_COLOR[cycle] ?? 'var(--roxy-accent, #f59e0b)';\n\t\t\t\t\treturn html`<div class=\"bar\" role=\"listitem\">\n\t\t\t\t\t\t<span style=\"text-transform: capitalize\">${cycle}</span>\n\t\t\t\t\t\t<span class=\"track\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"fill\"\n\t\t\t\t\t\t\t\tstyle=\"width: ${pct}%; background: ${color}\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span class=\"value\">${(v * 100).toFixed(0)}%</span>\n\t\t\t\t\t</div>`;\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t${d.interpretation ? html`<p class=\"advice\">${d.interpretation}</p>` : nothing}\n\t\t\t${d.advice ? html`<p class=\"advice\">${d.advice}</p>` : nothing}\n\t\t\t${\n\t\t\t\td.criticalAlerts?.length\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t${d.criticalAlerts.map((a) => html`<p class=\"alert\">${a}</p>`)}\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</section>`;\n\t}\n\n\tprivate renderForecast(d: BiorhythmForecast) {\n\t\tconst days = d.days ?? [];\n\t\tif (days.length === 0)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No forecast</div>`;\n\t\tconst w = 600;\n\t\tconst h = 160;\n\t\tconst xStep = w / Math.max(days.length - 1, 1);\n\t\tconst cycles = Object.keys(days[0]?.cycles ?? {});\n\t\treturn html`<section class=\"wrap\" aria-label=\"Biorhythm forecast\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Forecast</h2>\n\t\t\t\t<span class=\"energy\"\n\t\t\t\t\t>${d.startDate ?? ''} - ${d.endDate ?? ''}</span\n\t\t\t\t>\n\t\t\t</header>\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 ${w} ${h}\"\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label=\"Biorhythm cycle lines across the forecast window\"\n\t\t\t>\n\t\t\t\t<title>Biorhythm forecast</title>\n\t\t\t\t<line\n\t\t\t\t\tx1=\"0\"\n\t\t\t\t\ty1=${h / 2}\n\t\t\t\t\tx2=${w}\n\t\t\t\t\ty2=${h / 2}\n\t\t\t\t\tstroke=\"var(--roxy-border, #e4e4e7)\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t/>\n\t\t\t\t${cycles.map((cycle) => {\n\t\t\t\t\tconst points = days\n\t\t\t\t\t\t.map((day, i) => {\n\t\t\t\t\t\t\tconst v = day.cycles?.[cycle] ?? 0;\n\t\t\t\t\t\t\tconst x = i * xStep;\n\t\t\t\t\t\t\tconst y = h / 2 - v * (h / 2 - 8);\n\t\t\t\t\t\t\treturn `${x.toFixed(2)},${y.toFixed(2)}`;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.join(' ');\n\t\t\t\t\tconst color = CYCLE_COLOR[cycle] ?? '#475569';\n\t\t\t\t\treturn svg`<polyline points=${points} fill=\"none\" stroke=${color} stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />`;\n\t\t\t\t})}\n\t\t\t</svg>\n\t\t\t${\n\t\t\t\td.summary?.periodAdvice\n\t\t\t\t\t? html`<p class=\"advice\">${d.summary.periodAdvice}</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</section>`;\n\t}\n\n\tprivate renderCritical(d: CriticalDays) {\n\t\treturn html`<section class=\"wrap\" aria-label=\"Critical days\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Critical days</h2>\n\t\t\t\t<span class=\"energy\"\n\t\t\t\t\t>${d.totalCriticalDays ?? d.criticalDays?.length ?? 0} total</span\n\t\t\t\t>\n\t\t\t</header>\n\t\t\t<div>\n\t\t\t\t${(d.criticalDays ?? []).map(\n\t\t\t\t\t(day) => html`<span class=\"crit\"\n\t\t\t\t\t\t>${day.date} \u00B7 ${day.cycle ?? ''} ${day.severity ?? ''}</span\n\t\t\t\t\t>`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</section>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-biorhythm-chart': RoxyBiorhythmChart;\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": ";;;;;;;;;;;;AAAA,SAAS,OAAAA,MAAK,MAAM,YAAY,SAAS,WAAW;AACpD,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAMb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tGetCriticalDaysResponse,\n\tGetDailyBiorhythmResponse,\n\tGetForecastResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\n\ntype BiorhythmData =\n\t| GetDailyBiorhythmResponse\n\t| GetForecastResponse\n\t| GetCriticalDaysResponse;\n\nconst CYCLE_COLOR: Record<string, string> = {\n\tphysical: '#dc2626',\n\temotional: '#0284c7',\n\tintellectual: '#16a34a',\n\tintuitive: '#a855f7',\n\taesthetic: '#f59e0b',\n\tawareness: '#ec4899',\n\tspiritual: '#14b8a6',\n\tpassion: '#ef4444',\n\tmastery: '#6366f1',\n\twisdom: '#475569',\n};\n\n/**\n * Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.\n */\n@customElement('roxy-biorhythm-chart')\nexport class RoxyBiorhythmChart 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\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\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.energy {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\t\t\t.bars {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgap: var(--roxy-space-xs, 0.25rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr 3.5rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.track {\n\t\t\t\theight: 14px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.fill {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.value {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\ttext-align: right;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t}\n\t\t\t.advice {\n\t\t\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\t\t}\n\t\t\t.alert {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);\n\t\t\t\tborder: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t\t\t\tpadding: var(--roxy-space-sm, 0.5rem);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\tsvg {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t}\n\t\t\t.crit {\n\t\t\t\tbackground: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);\n\t\t\t\tborder-radius: var(--roxy-radius-sm, 4px);\n\t\t\t\tpadding: 4px 8px;\n\t\t\t\tfont-size: var(--roxy-text-xs, 0.75rem);\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin: 2px;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: BiorhythmData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'daily' | 'forecast' | 'critical-days' = 'daily';\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 biorhythm data</div>`;\n\n\t\tif (this.mode === 'critical-days' && 'criticalDays' in d) {\n\t\t\treturn this.renderCritical(d as GetCriticalDaysResponse);\n\t\t}\n\t\tif (this.mode === 'forecast' && 'days' in d) {\n\t\t\treturn this.renderForecast(d as GetForecastResponse);\n\t\t}\n\t\treturn this.renderDaily(d as GetDailyBiorhythmResponse);\n\t}\n\n\tprivate renderDaily(d: GetDailyBiorhythmResponse) {\n\t\tconst raw = d.quickRead ?? {};\n\t\tconst entries = Object.entries(raw).map(([cycle, value]) => {\n\t\t\tconst v = typeof value === 'number' ? value : 0;\n\t\t\tconst normalized = Math.abs(v) > 1 ? v / 100 : v;\n\t\t\treturn [cycle, normalized] as const;\n\t\t});\n\t\treturn html`<section class=\"wrap\" aria-label=\"Daily biorhythm\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Biorhythm</h2>\n\t\t\t\t${\n\t\t\t\t\ttypeof d.energyRating === 'number'\n\t\t\t\t\t\t? html`<span class=\"energy\">Energy ${d.energyRating}/10</span>`\n\t\t\t\t\t\t: nothing\n\t\t\t\t}\n\t\t\t</header>\n\t\t\t<div class=\"bars\" role=\"list\">\n\t\t\t\t${entries.map(([cycle, v]) => {\n\t\t\t\t\tconst pct = ((v + 1) / 2) * 100; // -1..1 -> 0..100\n\t\t\t\t\tconst color = CYCLE_COLOR[cycle] ?? 'var(--roxy-accent, #f59e0b)';\n\t\t\t\t\treturn html`<div class=\"bar\" role=\"listitem\">\n\t\t\t\t\t\t<span style=\"text-transform: capitalize\">${cycle}</span>\n\t\t\t\t\t\t<span class=\"track\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclass=\"fill\"\n\t\t\t\t\t\t\t\tstyle=\"width: ${pct}%; background: ${color}\"\n\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span class=\"value\">${Math.round(v * 100)}%</span>\n\t\t\t\t\t</div>`;\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t${d.dailyMessage ? html`<p class=\"advice\">${d.dailyMessage}</p>` : nothing}\n\t\t\t${d.advice ? html`<p class=\"advice\">${d.advice}</p>` : nothing}\n\t\t</section>`;\n\t}\n\n\tprivate renderForecast(d: GetForecastResponse) {\n\t\tconst days = d.days ?? [];\n\t\tif (days.length === 0)\n\t\t\treturn html`<div class=\"roxy-empty\" role=\"status\">No forecast</div>`;\n\t\tconst w = 600;\n\t\tconst h = 160;\n\t\tconst xStep = w / Math.max(days.length - 1, 1);\n\t\tconst cycleKeys = [\n\t\t\t'physical',\n\t\t\t'emotional',\n\t\t\t'intellectual',\n\t\t\t'intuitive',\n\t\t] as const;\n\t\treturn html`<section class=\"wrap\" aria-label=\"Biorhythm forecast\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Forecast</h2>\n\t\t\t\t<span class=\"energy\">${d.startDate} - ${d.endDate}</span>\n\t\t\t</header>\n\t\t\t<svg\n\t\t\t\tviewBox=\"0 0 ${w} ${h}\"\n\t\t\t\trole=\"img\"\n\t\t\t\taria-label=\"Biorhythm cycle lines across the forecast window\"\n\t\t\t>\n\t\t\t\t<title>Biorhythm forecast</title>\n\t\t\t\t<line\n\t\t\t\t\tx1=\"0\"\n\t\t\t\t\ty1=${h / 2}\n\t\t\t\t\tx2=${w}\n\t\t\t\t\ty2=${h / 2}\n\t\t\t\t\tstroke=\"var(--roxy-border, #e4e4e7)\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t/>\n\t\t\t\t${cycleKeys.map((cycle) => {\n\t\t\t\t\tconst points = days\n\t\t\t\t\t\t.map((day, i) => {\n\t\t\t\t\t\t\tconst v = day[cycle] ?? 0;\n\t\t\t\t\t\t\tconst x = i * xStep;\n\t\t\t\t\t\t\tconst y = h / 2 - (v / 100) * (h / 2 - 8);\n\t\t\t\t\t\t\treturn `${x.toFixed(2)},${y.toFixed(2)}`;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.join(' ');\n\t\t\t\t\tconst color = CYCLE_COLOR[cycle] ?? '#475569';\n\t\t\t\t\treturn svg`<polyline points=${points} fill=\"none\" stroke=${color} stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />`;\n\t\t\t\t})}\n\t\t\t</svg>\n\t\t\t${\n\t\t\t\td.summary?.periodAdvice\n\t\t\t\t\t? html`<p class=\"advice\">${d.summary.periodAdvice}</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</section>`;\n\t}\n\n\tprivate renderCritical(d: GetCriticalDaysResponse) {\n\t\treturn html`<section class=\"wrap\" aria-label=\"Critical days\">\n\t\t\t<header class=\"head\">\n\t\t\t\t<h2 class=\"title\">Critical days</h2>\n\t\t\t\t<span class=\"energy\">${d.totalCriticalDays} total</span>\n\t\t\t</header>\n\t\t\t<div>\n\t\t\t\t${d.criticalDays.map(\n\t\t\t\t\t(day) => html`<span class=\"crit\"\n\t\t\t\t\t\t>${day.date} \u00B7 ${day.cycle} ${day.severity}</span\n\t\t\t\t\t>`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</section>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-biorhythm-chart': RoxyBiorhythmChart;\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
6
|
"names": ["css", "css"]
|
|
7
7
|
}
|
|
@@ -1,31 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
score?: number;
|
|
5
|
-
rating?: string;
|
|
6
|
-
relationshipArchetype?: string;
|
|
7
|
-
advice?: string;
|
|
8
|
-
summary?: string;
|
|
9
|
-
categoryScores?: Record<string, number>;
|
|
10
|
-
categoryBreakdown?: Record<string, number>;
|
|
11
|
-
emotional?: number;
|
|
12
|
-
communication?: number;
|
|
13
|
-
romance?: number;
|
|
14
|
-
strengths?: string[];
|
|
15
|
-
challenges?: string[];
|
|
16
|
-
keyAspects?: string[];
|
|
17
|
-
elementBalance?: Record<string, number>;
|
|
18
|
-
person1?: {
|
|
19
|
-
name?: string;
|
|
20
|
-
sign?: string;
|
|
21
|
-
lifePath?: number;
|
|
22
|
-
};
|
|
23
|
-
person2?: {
|
|
24
|
-
name?: string;
|
|
25
|
-
sign?: string;
|
|
26
|
-
lifePath?: number;
|
|
27
|
-
};
|
|
28
|
-
}
|
|
2
|
+
import type { CalculateBioCompatibilityResponse, CalculateCompatibilityResponse, CalculateNumCompatibilityResponse } from '../types/index.js';
|
|
3
|
+
type CompatibilityData = CalculateCompatibilityResponse | CalculateNumCompatibilityResponse | CalculateBioCompatibilityResponse;
|
|
29
4
|
/**
|
|
30
5
|
* Cross-domain compatibility card. Renders /astrology/compatibility-score,
|
|
31
6
|
* /numerology/compatibility, or /biorhythm/compatibility responses.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compatibility-card.d.ts","sourceRoot":"","sources":["../../src/components/compatibility-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"compatibility-card.d.ts","sourceRoot":"","sources":["../../src/components/compatibility-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EACX,iCAAiC,EACjC,8BAA8B,EAC9B,iCAAiC,EACjC,MAAM,mBAAmB,CAAC;AAI3B,KAAK,iBAAiB,GACnB,8BAA8B,GAC9B,iCAAiC,GACjC,iCAAiC,CAAC;AAErC;;;GAGG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAuFX;IAGF,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAGtC,IAAI,EAAE,WAAW,GAAG,YAAY,GAAG,WAAW,CAAe;IAE7D,OAAO,CAAC,YAAY;IAapB,MAAM;CAkHN;AAgBD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
|
|
@@ -99,6 +99,12 @@ var baseStyles = css`
|
|
|
99
99
|
}
|
|
100
100
|
`;
|
|
101
101
|
|
|
102
|
+
// packages/ui/src/utils/format.ts
|
|
103
|
+
function formatNumber(value, dp = 1) {
|
|
104
|
+
if (typeof value !== "number" || !Number.isFinite(value)) return "";
|
|
105
|
+
return value.toFixed(dp).replace(/\.?0+$/, "");
|
|
106
|
+
}
|
|
107
|
+
|
|
102
108
|
// packages/ui/src/components/compatibility-card.ts
|
|
103
109
|
var RoxyCompatibilityCard = class extends LitElement {
|
|
104
110
|
constructor() {
|
|
@@ -109,22 +115,29 @@ var RoxyCompatibilityCard = class extends LitElement {
|
|
|
109
115
|
getBreakdown() {
|
|
110
116
|
const d = this.data;
|
|
111
117
|
if (!d) return {};
|
|
112
|
-
if (d
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
return inferred;
|
|
118
|
+
if ("categories" in d && d.categories) {
|
|
119
|
+
const out = {};
|
|
120
|
+
for (const [k, v] of Object.entries(d.categories)) {
|
|
121
|
+
if (typeof v === "number" && Number.isFinite(v)) out[k] = v;
|
|
122
|
+
}
|
|
123
|
+
return out;
|
|
124
|
+
}
|
|
125
|
+
return {};
|
|
121
126
|
}
|
|
122
127
|
render() {
|
|
123
128
|
const d = this.data;
|
|
124
129
|
if (!d)
|
|
125
130
|
return html`<div class="roxy-empty" role="status">No compatibility data</div>`;
|
|
126
|
-
const score = d.overallScore
|
|
131
|
+
const score = d.overallScore;
|
|
127
132
|
const breakdown = this.getBreakdown();
|
|
133
|
+
const rating = "rating" in d ? d.rating : void 0;
|
|
134
|
+
const archetype = "archetype" in d ? d.archetype : void 0;
|
|
135
|
+
const advice = "advice" in d ? d.advice : void 0;
|
|
136
|
+
const summary = "summary" in d ? d.summary : void 0;
|
|
137
|
+
const interpretation = "interpretation" in d ? d.interpretation : void 0;
|
|
138
|
+
const strengths = "strengths" in d ? d.strengths : void 0;
|
|
139
|
+
const challenges = "challenges" in d ? d.challenges : void 0;
|
|
140
|
+
const keyAspects = "keyAspects" in d ? d.keyAspects : void 0;
|
|
128
141
|
return html`<article
|
|
129
142
|
class="card"
|
|
130
143
|
aria-label=${`Compatibility (${this.mode})`}
|
|
@@ -132,8 +145,8 @@ var RoxyCompatibilityCard = class extends LitElement {
|
|
|
132
145
|
<div class="head">
|
|
133
146
|
<h2>${this.mode} compatibility</h2>
|
|
134
147
|
<div>
|
|
135
|
-
${typeof score === "number" ? html`<div class="score">${score}</div>` : nothing}
|
|
136
|
-
${
|
|
148
|
+
${typeof score === "number" ? html`<div class="score">${formatNumber(score, 0)}</div>` : nothing}
|
|
149
|
+
${rating ? html`<div class="rating">${rating}</div>` : nothing}
|
|
137
150
|
</div>
|
|
138
151
|
</div>
|
|
139
152
|
|
|
@@ -144,35 +157,37 @@ var RoxyCompatibilityCard = class extends LitElement {
|
|
|
144
157
|
<span class="bar"
|
|
145
158
|
><span style="width: ${Math.max(0, Math.min(100, v))}%"></span
|
|
146
159
|
></span>
|
|
147
|
-
<span>${v}</span>
|
|
160
|
+
<span>${formatNumber(v, 0)}</span>
|
|
148
161
|
</div>`
|
|
149
162
|
)}
|
|
150
163
|
</div>` : nothing}
|
|
151
|
-
${
|
|
152
|
-
<span class="archetype">${
|
|
164
|
+
${archetype ? html`<p>
|
|
165
|
+
<span class="archetype">${archetype.label}</span>
|
|
166
|
+
${archetype.description ? html` · ${archetype.description}` : nothing}
|
|
153
167
|
</p>` : nothing}
|
|
154
|
-
${
|
|
155
|
-
${
|
|
156
|
-
${
|
|
157
|
-
|
|
168
|
+
${summary ? html`<p>${summary}</p>` : nothing}
|
|
169
|
+
${interpretation && !summary ? html`<p>${interpretation}</p>` : nothing}
|
|
170
|
+
${advice ? html`<p>${advice}</p>` : nothing}
|
|
171
|
+
${(strengths?.length ?? 0) > 0 || (challenges?.length ?? 0) > 0 ? html`<div class="lists">
|
|
172
|
+
${strengths?.length ? html`<div>
|
|
158
173
|
<h3>Strengths</h3>
|
|
159
174
|
<ul>
|
|
160
|
-
${
|
|
175
|
+
${strengths.map((s) => html`<li>${s}</li>`)}
|
|
161
176
|
</ul>
|
|
162
177
|
</div>` : nothing}
|
|
163
|
-
${
|
|
178
|
+
${challenges?.length ? html`<div>
|
|
164
179
|
<h3>Challenges</h3>
|
|
165
180
|
<ul>
|
|
166
|
-
${
|
|
167
|
-
</ul>
|
|
168
|
-
</div>` : nothing}
|
|
169
|
-
${d.keyAspects?.length ? html`<div>
|
|
170
|
-
<h3>Key aspects</h3>
|
|
171
|
-
<ul>
|
|
172
|
-
${d.keyAspects.map((s) => html`<li>${s}</li>`)}
|
|
181
|
+
${challenges.map((s) => html`<li>${s}</li>`)}
|
|
173
182
|
</ul>
|
|
174
183
|
</div>` : nothing}
|
|
175
184
|
</div>` : nothing}
|
|
185
|
+
${keyAspects?.length ? html`<div>
|
|
186
|
+
<h3 style="margin: 0 0 0.25rem; font-size: var(--roxy-text-xs); color: var(--roxy-muted); text-transform: uppercase; letter-spacing: 0.06em;">Key aspects</h3>
|
|
187
|
+
<ul style="margin: 0; padding-left: 1rem; font-size: var(--roxy-text-sm);">
|
|
188
|
+
${keyAspects.slice(0, 6).map((a) => html`<li>${formatAspect(a)}</li>`)}
|
|
189
|
+
</ul>
|
|
190
|
+
</div>` : nothing}
|
|
176
191
|
</article>`;
|
|
177
192
|
}
|
|
178
193
|
};
|
|
@@ -242,7 +257,7 @@ RoxyCompatibilityCard.styles = [
|
|
|
242
257
|
}
|
|
243
258
|
|
|
244
259
|
.archetype {
|
|
245
|
-
color: var(--roxy-
|
|
260
|
+
color: var(--roxy-accent-fg, #b45309);
|
|
246
261
|
font-weight: var(--roxy-weight-bold, 600);
|
|
247
262
|
}
|
|
248
263
|
|
|
@@ -273,6 +288,12 @@ __decorateClass([
|
|
|
273
288
|
RoxyCompatibilityCard = __decorateClass([
|
|
274
289
|
customElement("roxy-compatibility-card")
|
|
275
290
|
], RoxyCompatibilityCard);
|
|
291
|
+
function formatAspect(a) {
|
|
292
|
+
const aspect = a.type.toLowerCase().replace(/_/g, "-");
|
|
293
|
+
const orb = typeof a.orb === "number" ? ` (orb ${formatNumber(a.orb, 1)}\xB0)` : "";
|
|
294
|
+
const head = [a.planet1, aspect, a.planet2].filter(Boolean).join(" ");
|
|
295
|
+
return a.description ? `${head}${orb} \xB7 ${a.description}` : `${head}${orb}`;
|
|
296
|
+
}
|
|
276
297
|
export {
|
|
277
298
|
RoxyCompatibilityCard
|
|
278
299
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/components/compatibility-card.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 CompatibilityData {\n\toverallScore?: number;\n\tscore?: number;\n\trating?: string;\n\trelationshipArchetype?: string;\n\tadvice?: string;\n\tsummary?: string;\n\tcategoryScores?: Record<string, number>;\n\tcategoryBreakdown?: Record<string, number>;\n\temotional?: number;\n\tcommunication?: number;\n\tromance?: number;\n\tstrengths?: string[];\n\tchallenges?: string[];\n\tkeyAspects?: string[];\n\telementBalance?: Record<string, number>;\n\tperson1?: { name?: string; sign?: string; lifePath?: number };\n\tperson2?: { name?: string; sign?: string; lifePath?: number };\n}\n\n/**\n * Cross-domain compatibility card. Renders /astrology/compatibility-score,\n * /numerology/compatibility, or /biorhythm/compatibility responses.\n */\n@customElement('roxy-compatibility-card')\nexport class RoxyCompatibilityCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\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\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\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: grid;\n\t\t\t\tgrid-template-columns: 1fr auto;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.head h2 {\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\ttext-transform: capitalize;\n\t\t\t}\n\n\t\t\t.score {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-size: 2rem;\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\tline-height: 1;\n\t\t\t}\n\t\t\t.rating {\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\t.bar-row {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr 3.5rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\theight: 8px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.bar > span {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\tbackground: var(--roxy-accent, #f59e0b);\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.bar-row > span:last-child {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t.archetype {\n\t\t\t\tcolor: var(--roxy-info, #0284c7);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\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(12rem, 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);\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}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: CompatibilityData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'astrology' | 'numerology' | 'biorhythm' = 'astrology';\n\n\tprivate getBreakdown(): Record<string, number> {\n\t\tconst d = this.data;\n\t\tif (!d) return {};\n\t\tif (d.categoryScores) return d.categoryScores;\n\t\tif (d.categoryBreakdown) return d.categoryBreakdown;\n\t\tconst inferred: Record<string, number> = {};\n\t\tif (typeof d.emotional === 'number') inferred.emotional = d.emotional;\n\t\tif (typeof d.communication === 'number')\n\t\t\tinferred.communication = d.communication;\n\t\tif (typeof d.romance === 'number') inferred.romance = d.romance;\n\t\tif (d.elementBalance) Object.assign(inferred, d.elementBalance);\n\t\treturn inferred;\n\t}\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 compatibility data</div>`;\n\t\tconst score = d.overallScore ?? d.score;\n\t\tconst breakdown = this.getBreakdown();\n\n\t\treturn html`<article\n\t\t\tclass=\"card\"\n\t\t\taria-label=${`Compatibility (${this.mode})`}\n\t\t>\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2>${this.mode} compatibility</h2>\n\t\t\t\t<div>\n\t\t\t\t\t${\n\t\t\t\t\t\ttypeof score === 'number'\n\t\t\t\t\t\t\t? html`<div class=\"score\">${score}</div>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${d.rating ? html`<div class=\"rating\">${d.rating}</div>` : nothing}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t${\n\t\t\t\tObject.keys(breakdown).length > 0\n\t\t\t\t\t? html`<div role=\"list\">\n\t\t\t\t\t\t${Object.entries(breakdown).map(\n\t\t\t\t\t\t\t([k, v]) => html`<div class=\"bar-row\" role=\"listitem\">\n\t\t\t\t\t\t\t\t<span style=\"text-transform: capitalize\">${k}</span>\n\t\t\t\t\t\t\t\t<span class=\"bar\"\n\t\t\t\t\t\t\t\t\t><span style=\"width: ${Math.max(0, Math.min(100, v))}%\"></span\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span>${v}</span>\n\t\t\t\t\t\t\t</div>`,\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\t${\n\t\t\t\td.relationshipArchetype\n\t\t\t\t\t? html`<p>\n\t\t\t\t\t\t<span class=\"archetype\">${d.relationshipArchetype}</span>\n\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${d.summary ? html`<p>${d.summary}</p>` : nothing}\n\t\t\t${d.advice ? html`<p>${d.advice}</p>` : nothing}\n\t\t\t${\n\t\t\t\t(d.strengths?.length ?? 0) > 0 || (d.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\td.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${d.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\td.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${d.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\t${\n\t\t\t\t\t\t\td.keyAspects?.length\n\t\t\t\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t\t\t\t<h3>Key aspects</h3>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t${d.keyAspects.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</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-compatibility-card': RoxyCompatibilityCard;\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": ";;;;;;;;;;;;AAAA,SAAS,OAAAA,MAAK,MAAM,YAAY,eAAe;AAC/C,SAAS,eAAe,gBAAgB;;;ACDxC,SAAS,WAAW;AAMb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;
|
|
3
|
+
"sources": ["../../src/components/compatibility-card.ts", "../../src/utils/base-styles.ts", "../../src/utils/format.ts"],
|
|
4
|
+
"sourcesContent": ["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n\tCalculateBioCompatibilityResponse,\n\tCalculateCompatibilityResponse,\n\tCalculateNumCompatibilityResponse,\n} from '../types/index.js';\nimport { baseStyles } from '../utils/base-styles.js';\nimport { formatNumber } from '../utils/format.js';\n\ntype CompatibilityData =\n\t| CalculateCompatibilityResponse\n\t| CalculateNumCompatibilityResponse\n\t| CalculateBioCompatibilityResponse;\n\n/**\n * Cross-domain compatibility card. Renders /astrology/compatibility-score,\n * /numerology/compatibility, or /biorhythm/compatibility responses.\n */\n@customElement('roxy-compatibility-card')\nexport class RoxyCompatibilityCard extends LitElement {\n\tstatic styles = [\n\t\tbaseStyles,\n\t\tcss`\n\t\t\t.card {\n\t\t\t\tbackground: var(--roxy-bg, #fff);\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\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\t\t\tbox-shadow: var(--roxy-shadow-sm);\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: grid;\n\t\t\t\tgrid-template-columns: 1fr auto;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: var(--roxy-space-md, 1rem);\n\t\t\t}\n\t\t\t.head h2 {\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\ttext-transform: capitalize;\n\t\t\t}\n\n\t\t\t.score {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tfont-size: 2rem;\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\tline-height: 1;\n\t\t\t}\n\t\t\t.rating {\n\t\t\t\tcolor: var(--roxy-secondary, #475569);\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\n\t\t\t.bar-row {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: 8rem 1fr 3.5rem;\n\t\t\t\tgap: var(--roxy-space-sm, 0.5rem);\n\t\t\t\talign-items: center;\n\t\t\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t\t\t}\n\t\t\t.bar {\n\t\t\t\theight: 8px;\n\t\t\t\tbackground: var(--roxy-border, #e4e4e7);\n\t\t\t\tborder-radius: var(--roxy-radius-full, 9999px);\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t.bar > span {\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 100%;\n\t\t\t\tbackground: var(--roxy-accent, #f59e0b);\n\t\t\t\ttransition:\n\t\t\t\t\twidth var(--roxy-motion-duration, 200ms)\n\t\t\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));\n\t\t\t}\n\t\t\t.bar-row > span:last-child {\n\t\t\t\tfont-variant-numeric: tabular-nums;\n\t\t\t\tcolor: var(--roxy-muted, #71717a);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t.archetype {\n\t\t\t\tcolor: var(--roxy-accent-fg, #b45309);\n\t\t\t\tfont-weight: var(--roxy-weight-bold, 600);\n\t\t\t}\n\n\t\t\t.lists {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(auto-fit, minmax(12rem, 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);\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}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\tdata: CompatibilityData | null = null;\n\n\t@property({ type: String, reflect: true })\n\tmode: 'astrology' | 'numerology' | 'biorhythm' = 'astrology';\n\n\tprivate getBreakdown(): Record<string, number> {\n\t\tconst d = this.data;\n\t\tif (!d) return {};\n\t\tif ('categories' in d && d.categories) {\n\t\t\tconst out: Record<string, number> = {};\n\t\t\tfor (const [k, v] of Object.entries(d.categories)) {\n\t\t\t\tif (typeof v === 'number' && Number.isFinite(v)) out[k] = v;\n\t\t\t}\n\t\t\treturn out;\n\t\t}\n\t\treturn {};\n\t}\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 compatibility data</div>`;\n\n\t\tconst score = d.overallScore;\n\t\tconst breakdown = this.getBreakdown();\n\t\tconst rating =\n\t\t\t'rating' in d\n\t\t\t\t? (d as CalculateNumCompatibilityResponse).rating\n\t\t\t\t: undefined;\n\t\tconst archetype =\n\t\t\t'archetype' in d\n\t\t\t\t? (d as CalculateCompatibilityResponse).archetype\n\t\t\t\t: undefined;\n\t\tconst advice =\n\t\t\t'advice' in d\n\t\t\t\t? (d as CalculateNumCompatibilityResponse).advice\n\t\t\t\t: undefined;\n\t\tconst summary =\n\t\t\t'summary' in d\n\t\t\t\t? (d as CalculateCompatibilityResponse).summary\n\t\t\t\t: undefined;\n\t\tconst interpretation =\n\t\t\t'interpretation' in d\n\t\t\t\t? (d as CalculateCompatibilityResponse).interpretation\n\t\t\t\t: undefined;\n\t\tconst strengths = 'strengths' in d ? d.strengths : undefined;\n\t\tconst challenges = 'challenges' in d ? d.challenges : undefined;\n\t\tconst keyAspects =\n\t\t\t'keyAspects' in d\n\t\t\t\t? (d as CalculateCompatibilityResponse).keyAspects\n\t\t\t\t: undefined;\n\n\t\treturn html`<article\n\t\t\tclass=\"card\"\n\t\t\taria-label=${`Compatibility (${this.mode})`}\n\t\t>\n\t\t\t<div class=\"head\">\n\t\t\t\t<h2>${this.mode} compatibility</h2>\n\t\t\t\t<div>\n\t\t\t\t\t${\n\t\t\t\t\t\ttypeof score === 'number'\n\t\t\t\t\t\t\t? html`<div class=\"score\">${formatNumber(score, 0)}</div>`\n\t\t\t\t\t\t\t: nothing\n\t\t\t\t\t}\n\t\t\t\t\t${rating ? html`<div class=\"rating\">${rating}</div>` : nothing}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t${\n\t\t\t\tObject.keys(breakdown).length > 0\n\t\t\t\t\t? html`<div role=\"list\">\n\t\t\t\t\t\t${Object.entries(breakdown).map(\n\t\t\t\t\t\t\t([k, v]) => html`<div class=\"bar-row\" role=\"listitem\">\n\t\t\t\t\t\t\t\t<span style=\"text-transform: capitalize\">${k}</span>\n\t\t\t\t\t\t\t\t<span class=\"bar\"\n\t\t\t\t\t\t\t\t\t><span style=\"width: ${Math.max(0, Math.min(100, v))}%\"></span\n\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t<span>${formatNumber(v, 0)}</span>\n\t\t\t\t\t\t\t</div>`,\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\t${\n\t\t\t\tarchetype\n\t\t\t\t\t? html`<p>\n\t\t\t\t\t\t<span class=\"archetype\">${archetype.label}</span>\n\t\t\t\t\t\t${archetype.description ? html` \u00B7 ${archetype.description}` : nothing}\n\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t\t${summary ? html`<p>${summary}</p>` : nothing}\n\t\t\t${interpretation && !summary ? html`<p>${interpretation}</p>` : nothing}\n\t\t\t${advice ? html`<p>${advice}</p>` : nothing}\n\t\t\t${\n\t\t\t\t(strengths?.length ?? 0) > 0 || (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\tstrengths?.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${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\tchallenges?.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${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\t${\n\t\t\t\tkeyAspects?.length\n\t\t\t\t\t? html`<div>\n\t\t\t\t\t\t<h3 style=\"margin: 0 0 0.25rem; font-size: var(--roxy-text-xs); color: var(--roxy-muted); text-transform: uppercase; letter-spacing: 0.06em;\">Key aspects</h3>\n\t\t\t\t\t\t<ul style=\"margin: 0; padding-left: 1rem; font-size: var(--roxy-text-sm);\">\n\t\t\t\t\t\t\t${keyAspects.slice(0, 6).map((a) => html`<li>${formatAspect(a)}</li>`)}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>`\n\t\t\t\t\t: nothing\n\t\t\t}\n\t\t</article>`;\n\t}\n}\n\ntype KeyAspect = CalculateCompatibilityResponse extends {\n\tkeyAspects: Array<infer T>;\n}\n\t? T\n\t: never;\n\nfunction formatAspect(a: KeyAspect): string {\n\tconst aspect = a.type.toLowerCase().replace(/_/g, '-');\n\tconst orb =\n\t\ttypeof a.orb === 'number' ? ` (orb ${formatNumber(a.orb, 1)}\u00B0)` : '';\n\tconst head = [a.planet1, aspect, a.planet2].filter(Boolean).join(' ');\n\treturn a.description ? `${head}${orb} \u00B7 ${a.description}` : `${head}${orb}`;\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'roxy-compatibility-card': RoxyCompatibilityCard;\n\t}\n}\n", "import { css } from 'lit';\n\n/**\n * Shared host styles every component pulls in. Sets default font, color,\n * container query support, and the entry fade-in.\n */\nexport const baseStyles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontainer-type: inline-size;\n\t\tfont-family: var(\n\t\t\t--roxy-font-sans,\n\t\t\tsystem-ui,\n\t\t\t-apple-system,\n\t\t\tBlinkMacSystemFont,\n\t\t\t'Segoe UI',\n\t\t\tRoboto,\n\t\t\tsans-serif\n\t\t);\n\t\tcolor: var(--roxy-fg, #0a0a0a);\n\t\tbackground: transparent;\n\t\tfont-size: var(--roxy-text-base, 1rem);\n\t\tline-height: var(--roxy-leading-normal, 1.5);\n\t\tanimation: roxy-fade-in var(--roxy-motion-duration, 200ms)\n\t\t\tvar(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t@keyframes roxy-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(2px);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-skeleton {\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--roxy-border, #e4e4e7) 0%,\n\t\t\tcolor-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,\n\t\t\tvar(--roxy-border, #e4e4e7) 100%\n\t\t);\n\t\tbackground-size: 200% 100%;\n\t\tanimation: roxy-shimmer 1.4s ease-in-out infinite;\n\t\tborder-radius: var(--roxy-radius-md, 8px);\n\t}\n\n\t@keyframes roxy-shimmer {\n\t\t0% {\n\t\t\tbackground-position: 200% 0;\n\t\t}\n\t\t100% {\n\t\t\tbackground-position: -200% 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.roxy-skeleton {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t.roxy-empty {\n\t\tpadding: var(--roxy-space-lg, 1.5rem);\n\t\tcolor: var(--roxy-muted, #71717a);\n\t\ttext-align: center;\n\t\tfont-size: var(--roxy-text-sm, 0.875rem);\n\t}\n\n\t:host(:focus-within) .roxy-card {\n\t\toutline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));\n\t\toutline-offset: 2px;\n\t}\n`;\n", "/**\n * Display formatters for ISO timestamps and floats coming back from the API.\n * Every helper returns \"\" for nullish or unparseable input so it falls out of\n * template literals cleanly.\n */\n\nexport function formatTime(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tif (/^\\d{4}-\\d{2}-\\d{2}$/.test(input)) return '';\n\tconst bareTime = /^\\d{2}:\\d{2}(:\\d{2})?$/.test(input);\n\tconst iso = bareTime ? `1970-01-01T${input}` : input;\n\tconst d = new Date(iso);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleTimeString(undefined, {\n\t\thour: 'numeric',\n\t\tminute: '2-digit',\n\t\thour12: true,\n\t});\n}\n\nexport function formatDate(input: unknown): string {\n\tif (typeof input !== 'string' || input.length === 0) return '';\n\tconst d = new Date(\n\t\t/^\\d{4}-\\d{2}-\\d{2}$/.test(input) ? `${input}T00:00:00` : input,\n\t);\n\tif (Number.isNaN(d.getTime())) return input;\n\treturn d.toLocaleDateString(undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t\tyear: 'numeric',\n\t});\n}\n\nexport function formatTimeRange(\n\tt: { start?: string; end?: string } | undefined,\n): string {\n\tif (!t) return '';\n\tconst start = formatTime(t.start);\n\tconst end = formatTime(t.end);\n\tif (start && end) return `${start} - ${end}`;\n\treturn start || end || '';\n}\n\nexport function formatNumber(value: unknown, dp = 1): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn value.toFixed(dp).replace(/\\.?0+$/, '');\n}\n\nexport function formatPercent(value: unknown, dp = 1): string {\n\tconst n = formatNumber(value, dp);\n\treturn n ? `${n}%` : '';\n}\n\nexport function formatLongitude(value: unknown): string {\n\tif (typeof value !== 'number' || !Number.isFinite(value)) return '';\n\treturn `${formatNumber(value, 2)}\u00B0`;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["css", "css"]
|
|
7
7
|
}
|
|
@@ -1,35 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
antardashaLord?: string;
|
|
5
|
-
pratyantardashaLord?: string;
|
|
6
|
-
lord?: string;
|
|
7
|
-
planet?: string;
|
|
8
|
-
startDate?: string;
|
|
9
|
-
endDate?: string;
|
|
10
|
-
years?: number;
|
|
11
|
-
durationYears?: number;
|
|
12
|
-
}
|
|
13
|
-
interface DashaData {
|
|
14
|
-
moonNakshatra?: string;
|
|
15
|
-
nakshatraName?: string;
|
|
16
|
-
nakshatraLord?: string;
|
|
17
|
-
mahadasha?: DashaPeriod;
|
|
18
|
-
antardasha?: DashaPeriod;
|
|
19
|
-
pratyantardasha?: DashaPeriod;
|
|
20
|
-
mahadashas?: DashaPeriod[];
|
|
21
|
-
antardashas?: DashaPeriod[];
|
|
22
|
-
mahadashaLord?: string;
|
|
23
|
-
mahadashaPeriod?: DashaPeriod;
|
|
24
|
-
birthDashaBalance?: {
|
|
25
|
-
lord?: string;
|
|
26
|
-
years?: number;
|
|
27
|
-
};
|
|
28
|
-
totalYears?: number;
|
|
29
|
-
remainingInMahadasha?: number;
|
|
30
|
-
remainingInAntardasha?: number;
|
|
31
|
-
remainingInPratyantardasha?: number;
|
|
32
|
-
}
|
|
2
|
+
import type { GetCurrentDashaResponse, GetMajorDashasResponse, GetSubDashasResponse } from '../types/index.js';
|
|
3
|
+
type DashaData = GetCurrentDashaResponse | GetMajorDashasResponse | GetSubDashasResponse;
|
|
33
4
|
/**
|
|
34
5
|
* Dasha timeline. Renders /vedic-astrology/dasha/{current,major,sub/{...}}.
|
|
35
6
|
* Default mode shows the active mahadasha + antardasha + pratyantardasha.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dasha-timeline.d.ts","sourceRoot":"","sources":["../../src/components/dasha-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"dasha-timeline.d.ts","sourceRoot":"","sources":["../../src/components/dasha-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EACX,uBAAuB,EACvB,sBAAsB,EACtB,oBAAoB,EACpB,MAAM,mBAAmB,CAAC;AAI3B,KAAK,SAAS,GACX,uBAAuB,GACvB,sBAAsB,GACtB,oBAAoB,CAAC;AAUxB;;;;GAIG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BA8EX;IAGF,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAG9B,MAAM,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,CAAa;IAEhD,MAAM;IA0CN,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,SAAS;CAYjB;AAOD,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD"}
|