@roxyapi/ui 0.0.1 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +169 -0
- package/THEMING.md +129 -0
- package/dist/cdn/components/biorhythm-chart.js +261 -0
- package/dist/cdn/components/biorhythm-chart.js.map +7 -0
- package/dist/cdn/components/compatibility-card.js +257 -0
- package/dist/cdn/components/compatibility-card.js.map +7 -0
- package/dist/cdn/components/dasha-timeline.js +244 -0
- package/dist/cdn/components/dasha-timeline.js.map +7 -0
- package/dist/cdn/components/data.js +258 -0
- package/dist/cdn/components/data.js.map +7 -0
- package/dist/cdn/components/dosha-card.js +254 -0
- package/dist/cdn/components/dosha-card.js.map +7 -0
- package/dist/cdn/components/endpoint-form.js +253 -0
- package/dist/cdn/components/endpoint-form.js.map +7 -0
- package/dist/cdn/components/guna-milan.js +256 -0
- package/dist/cdn/components/guna-milan.js.map +7 -0
- package/dist/cdn/components/hexagram.js +275 -0
- package/dist/cdn/components/hexagram.js.map +7 -0
- package/dist/cdn/components/horoscope-card.js +302 -0
- package/dist/cdn/components/horoscope-card.js.map +7 -0
- package/dist/cdn/components/kp-planets-table.js +224 -0
- package/dist/cdn/components/kp-planets-table.js.map +7 -0
- package/dist/cdn/components/location-search.js +267 -0
- package/dist/cdn/components/location-search.js.map +7 -0
- package/dist/cdn/components/moon-phase.js +251 -0
- package/dist/cdn/components/moon-phase.js.map +7 -0
- package/dist/cdn/components/natal-chart.js +237 -0
- package/dist/cdn/components/natal-chart.js.map +7 -0
- package/dist/cdn/components/numerology-card.js +252 -0
- package/dist/cdn/components/numerology-card.js.map +7 -0
- package/dist/cdn/components/panchang-table.js +234 -0
- package/dist/cdn/components/panchang-table.js.map +7 -0
- package/dist/cdn/components/synastry-chart.js +303 -0
- package/dist/cdn/components/synastry-chart.js.map +7 -0
- package/dist/cdn/components/tarot-card.js +260 -0
- package/dist/cdn/components/tarot-card.js.map +7 -0
- package/dist/cdn/components/tarot-spread.js +261 -0
- package/dist/cdn/components/tarot-spread.js.map +7 -0
- package/dist/cdn/components/vedic-kundli.js +189 -0
- package/dist/cdn/components/vedic-kundli.js.map +7 -0
- package/dist/cdn/roxy-ui.js +2552 -0
- package/dist/cdn/roxy-ui.js.map +7 -0
- package/dist/cdn/widgets.js +114 -0
- package/dist/components/biorhythm-chart.d.ts +66 -0
- package/dist/components/biorhythm-chart.d.ts.map +1 -0
- package/dist/components/biorhythm-chart.js +318 -0
- package/dist/components/biorhythm-chart.js.map +7 -0
- package/dist/components/compatibility-card.d.ts +46 -0
- package/dist/components/compatibility-card.d.ts.map +1 -0
- package/dist/components/compatibility-card.js +279 -0
- package/dist/components/compatibility-card.js.map +7 -0
- package/dist/components/dasha-timeline.d.ts +53 -0
- package/dist/components/dasha-timeline.d.ts.map +1 -0
- package/dist/components/dasha-timeline.js +269 -0
- package/dist/components/dasha-timeline.js.map +7 -0
- package/dist/components/data.d.ts +40 -0
- package/dist/components/data.d.ts.map +1 -0
- package/dist/components/data.js +339 -0
- package/dist/components/data.js.map +7 -0
- package/dist/components/dosha-card.d.ts +35 -0
- package/dist/components/dosha-card.d.ts.map +1 -0
- package/dist/components/dosha-card.js +278 -0
- package/dist/components/dosha-card.js.map +7 -0
- package/dist/components/endpoint-form.d.ts +39 -0
- package/dist/components/endpoint-form.d.ts.map +1 -0
- package/dist/components/endpoint-form.js +432 -0
- package/dist/components/endpoint-form.js.map +7 -0
- package/dist/components/guna-milan.d.ts +35 -0
- package/dist/components/guna-milan.d.ts.map +1 -0
- package/dist/components/guna-milan.js +302 -0
- package/dist/components/guna-milan.js.map +7 -0
- package/dist/components/hexagram.d.ts +47 -0
- package/dist/components/hexagram.d.ts.map +1 -0
- package/dist/components/hexagram.js +334 -0
- package/dist/components/hexagram.js.map +7 -0
- package/dist/components/horoscope-card.d.ts +38 -0
- package/dist/components/horoscope-card.d.ts.map +1 -0
- package/dist/components/horoscope-card.js +332 -0
- package/dist/components/horoscope-card.js.map +7 -0
- package/dist/components/kp-planets-table.d.ts +36 -0
- package/dist/components/kp-planets-table.d.ts.map +1 -0
- package/dist/components/kp-planets-table.js +227 -0
- package/dist/components/kp-planets-table.js.map +7 -0
- package/dist/components/location-search.d.ts +56 -0
- package/dist/components/location-search.d.ts.map +1 -0
- package/dist/components/location-search.js +401 -0
- package/dist/components/location-search.js.map +7 -0
- package/dist/components/moon-phase.d.ts +38 -0
- package/dist/components/moon-phase.d.ts.map +1 -0
- package/dist/components/moon-phase.js +284 -0
- package/dist/components/moon-phase.js.map +7 -0
- package/dist/components/natal-chart.d.ts +65 -0
- package/dist/components/natal-chart.d.ts.map +1 -0
- package/dist/components/natal-chart.js +407 -0
- package/dist/components/natal-chart.js.map +7 -0
- package/dist/components/numerology-card.d.ts +55 -0
- package/dist/components/numerology-card.d.ts.map +1 -0
- package/dist/components/numerology-card.js +274 -0
- package/dist/components/numerology-card.js.map +7 -0
- package/dist/components/panchang-table.d.ts +77 -0
- package/dist/components/panchang-table.d.ts.map +1 -0
- package/dist/components/panchang-table.js +285 -0
- package/dist/components/panchang-table.js.map +7 -0
- package/dist/components/synastry-chart.d.ts +52 -0
- package/dist/components/synastry-chart.d.ts.map +1 -0
- package/dist/components/synastry-chart.js +415 -0
- package/dist/components/synastry-chart.js.map +7 -0
- package/dist/components/tarot-card.d.ts +47 -0
- package/dist/components/tarot-card.d.ts.map +1 -0
- package/dist/components/tarot-card.js +281 -0
- package/dist/components/tarot-card.js.map +7 -0
- package/dist/components/tarot-spread.d.ts +42 -0
- package/dist/components/tarot-spread.d.ts.map +1 -0
- package/dist/components/tarot-spread.js +271 -0
- package/dist/components/tarot-spread.js.map +7 -0
- package/dist/components/vedic-kundli.d.ts +45 -0
- package/dist/components/vedic-kundli.d.ts.map +1 -0
- package/dist/components/vedic-kundli.js +325 -0
- package/dist/components/vedic-kundli.js.map +7 -0
- package/dist/index.cjs +4174 -0
- package/dist/index.cjs.map +7 -0
- package/dist/index.d.ts +30 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +4154 -0
- package/dist/index.js.map +7 -0
- package/dist/manifest.json +24 -0
- package/dist/styles/tokens.css +147 -0
- package/dist/tokens/index.d.ts +17 -0
- package/dist/tokens/index.d.ts.map +1 -0
- package/dist/utils/base-styles.d.ts +6 -0
- package/dist/utils/base-styles.d.ts.map +1 -0
- package/dist/utils/debounce.d.ts +5 -0
- package/dist/utils/debounce.d.ts.map +1 -0
- package/dist/utils/degree.d.ts +29 -0
- package/dist/utils/degree.d.ts.map +1 -0
- package/dist/utils/motion.d.ts +13 -0
- package/dist/utils/motion.d.ts.map +1 -0
- package/package.json +69 -3
- package/src/components/biorhythm-chart.ts +290 -0
- package/src/components/compatibility-card.ts +231 -0
- package/src/components/dasha-timeline.ts +251 -0
- package/src/components/data.ts +287 -0
- package/src/components/dosha-card.ts +215 -0
- package/src/components/endpoint-form.ts +433 -0
- package/src/components/guna-milan.ts +245 -0
- package/src/components/hexagram.ts +279 -0
- package/src/components/horoscope-card.ts +291 -0
- package/src/components/kp-planets-table.ts +156 -0
- package/src/components/location-search.ts +335 -0
- package/src/components/moon-phase.ts +221 -0
- package/src/components/natal-chart.ts +298 -0
- package/src/components/numerology-card.ts +243 -0
- package/src/components/panchang-table.ts +265 -0
- package/src/components/synastry-chart.ts +341 -0
- package/src/components/tarot-card.ts +235 -0
- package/src/components/tarot-spread.ts +224 -0
- package/src/components/vedic-kundli.ts +257 -0
- package/src/index.ts +61 -0
- package/src/styles/tokens.css +147 -0
- package/src/tokens/index.ts +130 -0
- package/src/types/index.ts +3 -0
- package/src/types/types.gen.ts +28526 -0
- package/src/utils/base-styles.ts +89 -0
- package/src/utils/debounce.ts +13 -0
- package/src/utils/degree.ts +64 -0
- package/src/utils/motion.ts +18 -0
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
(function () {
|
|
2
|
+
'use strict';
|
|
3
|
+
if (window.__ROXY_WIDGETS_LOADED__) return;
|
|
4
|
+
window.__ROXY_WIDGETS_LOADED__ = true;
|
|
5
|
+
|
|
6
|
+
var CDN = 'https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js';
|
|
7
|
+
var API = 'https://roxyapi.com/api/v2';
|
|
8
|
+
|
|
9
|
+
var WIDGET_ENDPOINTS = {
|
|
10
|
+
'natal-chart': { path: '/astrology/natal-chart', method: 'POST' },
|
|
11
|
+
'horoscope-card': { path: '/astrology/horoscope/{sign}/daily', method: 'GET' },
|
|
12
|
+
'synastry-chart': { path: '/astrology/synastry', method: 'POST' },
|
|
13
|
+
'compatibility-card': { path: '/astrology/compatibility-score', method: 'POST' },
|
|
14
|
+
'moon-phase': { path: '/astrology/moon-phase/current', method: 'GET' },
|
|
15
|
+
'vedic-kundli': { path: '/vedic-astrology/birth-chart', method: 'POST' },
|
|
16
|
+
'panchang-table': { path: '/vedic-astrology/panchang/detailed', method: 'POST' },
|
|
17
|
+
'dasha-timeline': { path: '/vedic-astrology/dasha/current', method: 'POST' },
|
|
18
|
+
'dosha-card': { path: '/vedic-astrology/dosha/manglik', method: 'POST' },
|
|
19
|
+
'guna-milan': { path: '/vedic-astrology/compatibility', method: 'POST' },
|
|
20
|
+
'kp-planets-table': { path: '/vedic-astrology/kp/planets', method: 'POST' },
|
|
21
|
+
'numerology-card': { path: '/numerology/life-path', method: 'POST' },
|
|
22
|
+
'tarot-card': { path: '/tarot/daily', method: 'POST' },
|
|
23
|
+
'tarot-spread': { path: '/tarot/spreads/three-card', method: 'POST' },
|
|
24
|
+
'biorhythm-chart': { path: '/biorhythm/daily', method: 'POST' },
|
|
25
|
+
hexagram: { path: '/iching/cast', method: 'GET' },
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
function ensureLoaded() {
|
|
29
|
+
if (document.getElementById('roxy-ui-loader')) return Promise.resolve();
|
|
30
|
+
return new Promise(function (resolve, reject) {
|
|
31
|
+
var s = document.createElement('script');
|
|
32
|
+
s.id = 'roxy-ui-loader';
|
|
33
|
+
s.src = CDN;
|
|
34
|
+
s.async = true;
|
|
35
|
+
s.crossOrigin = 'anonymous';
|
|
36
|
+
s.onload = function () { resolve(); };
|
|
37
|
+
s.onerror = function () { reject(new Error('roxy-ui load failed')); };
|
|
38
|
+
document.head.appendChild(s);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function fillTemplate(path, attrs) {
|
|
43
|
+
return path.replace(/\{([^}]+)\}/g, function (_, key) {
|
|
44
|
+
return encodeURIComponent(attrs[key] || '');
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function collectAttrs(el) {
|
|
49
|
+
var out = {};
|
|
50
|
+
for (var i = 0; i < el.attributes.length; i++) {
|
|
51
|
+
var a = el.attributes[i];
|
|
52
|
+
if (a.name.indexOf('data-') === 0 && a.name !== 'data-roxy-widget' && a.name !== 'data-publishable-key') {
|
|
53
|
+
out[a.name.slice('data-'.length).replace(/-([a-z])/g, function (_, c) { return c.toUpperCase(); })] = a.value;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return out;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function mount(host) {
|
|
60
|
+
var name = host.getAttribute('data-roxy-widget');
|
|
61
|
+
var pk = host.getAttribute('data-publishable-key');
|
|
62
|
+
if (!name || !WIDGET_ENDPOINTS[name]) return;
|
|
63
|
+
|
|
64
|
+
var endpoint = WIDGET_ENDPOINTS[name];
|
|
65
|
+
var attrs = collectAttrs(host);
|
|
66
|
+
var url = API + fillTemplate(endpoint.path, attrs);
|
|
67
|
+
|
|
68
|
+
ensureLoaded().then(function () {
|
|
69
|
+
var element = document.createElement('roxy-' + name);
|
|
70
|
+
Object.keys(attrs).forEach(function (k) {
|
|
71
|
+
if (k === 'sign' || k === 'period' || k === 'mode' || k === 'type' || k === 'spread') {
|
|
72
|
+
element.setAttribute(k, attrs[k]);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
host.innerHTML = '';
|
|
76
|
+
host.appendChild(element);
|
|
77
|
+
|
|
78
|
+
if (!pk) {
|
|
79
|
+
console.warn('roxy-widget', name, 'is missing data-publishable-key, skipping fetch');
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
var headers = { Accept: 'application/json' };
|
|
84
|
+
headers['X-API-Key'] = pk;
|
|
85
|
+
var init = { headers: headers, method: endpoint.method };
|
|
86
|
+
if (endpoint.method === 'POST') {
|
|
87
|
+
init.headers['Content-Type'] = 'application/json';
|
|
88
|
+
init.body = JSON.stringify(attrs);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
fetch(url, init)
|
|
92
|
+
.then(function (res) { return res.json(); })
|
|
93
|
+
.then(function (json) { element.data = json; })
|
|
94
|
+
.catch(function (err) {
|
|
95
|
+
element.setAttribute('aria-invalid', 'true');
|
|
96
|
+
console.error('roxy-widget', name, err);
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function scan() {
|
|
102
|
+
var nodes = document.querySelectorAll('[data-roxy-widget]:not([data-roxy-mounted])');
|
|
103
|
+
for (var i = 0; i < nodes.length; i++) {
|
|
104
|
+
nodes[i].setAttribute('data-roxy-mounted', 'true');
|
|
105
|
+
mount(nodes[i]);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
if (document.readyState === 'loading') {
|
|
110
|
+
document.addEventListener('DOMContentLoaded', scan);
|
|
111
|
+
} else {
|
|
112
|
+
scan();
|
|
113
|
+
}
|
|
114
|
+
})();
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
interface DailyBiorhythm {
|
|
3
|
+
birthDate?: string;
|
|
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;
|
|
48
|
+
/**
|
|
49
|
+
* Biorhythm chart. Renders /biorhythm/{daily,forecast,critical-days}.
|
|
50
|
+
*/
|
|
51
|
+
export declare class RoxyBiorhythmChart extends LitElement {
|
|
52
|
+
static styles: import("lit").CSSResult[];
|
|
53
|
+
data: BiorhythmData | null;
|
|
54
|
+
mode: 'daily' | 'forecast' | 'critical-days';
|
|
55
|
+
render(): import("lit").TemplateResult<1>;
|
|
56
|
+
private renderDaily;
|
|
57
|
+
private renderForecast;
|
|
58
|
+
private renderCritical;
|
|
59
|
+
}
|
|
60
|
+
declare global {
|
|
61
|
+
interface HTMLElementTagNameMap {
|
|
62
|
+
'roxy-biorhythm-chart': RoxyBiorhythmChart;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
export {};
|
|
66
|
+
//# sourceMappingURL=biorhythm-chart.d.ts.map
|
|
@@ -0,0 +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;AAI1D,UAAU,cAAc;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,iBAAiB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,YAAY,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;CACtB;AAED,UAAU,WAAW;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,YAAY;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;CAC7B;AAED,KAAK,aAAa,GAAG,cAAc,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAevE;;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;IAyCnB,OAAO,CAAC,cAAc;IAkDtB,OAAO,CAAC,cAAc;CAiBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}
|
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result) __defProp(target, key, result);
|
|
9
|
+
return result;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// packages/ui/src/components/biorhythm-chart.ts
|
|
13
|
+
import { css as css2, html, LitElement, nothing, svg } from "lit";
|
|
14
|
+
import { customElement, property } from "lit/decorators.js";
|
|
15
|
+
|
|
16
|
+
// packages/ui/src/utils/base-styles.ts
|
|
17
|
+
import { css } from "lit";
|
|
18
|
+
var baseStyles = css`
|
|
19
|
+
:host {
|
|
20
|
+
display: block;
|
|
21
|
+
container-type: inline-size;
|
|
22
|
+
font-family: var(
|
|
23
|
+
--roxy-font-sans,
|
|
24
|
+
system-ui,
|
|
25
|
+
-apple-system,
|
|
26
|
+
BlinkMacSystemFont,
|
|
27
|
+
'Segoe UI',
|
|
28
|
+
Roboto,
|
|
29
|
+
sans-serif
|
|
30
|
+
);
|
|
31
|
+
color: var(--roxy-fg, #0a0a0a);
|
|
32
|
+
background: transparent;
|
|
33
|
+
font-size: var(--roxy-text-base, 1rem);
|
|
34
|
+
line-height: var(--roxy-leading-normal, 1.5);
|
|
35
|
+
animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
|
|
36
|
+
var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
*,
|
|
40
|
+
*::before,
|
|
41
|
+
*::after {
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes roxy-fade-in {
|
|
46
|
+
from {
|
|
47
|
+
opacity: 0;
|
|
48
|
+
transform: translateY(2px);
|
|
49
|
+
}
|
|
50
|
+
to {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transform: translateY(0);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (prefers-reduced-motion: reduce) {
|
|
57
|
+
:host {
|
|
58
|
+
animation: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.roxy-skeleton {
|
|
63
|
+
background: linear-gradient(
|
|
64
|
+
90deg,
|
|
65
|
+
var(--roxy-border, #e4e4e7) 0%,
|
|
66
|
+
color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
|
|
67
|
+
var(--roxy-border, #e4e4e7) 100%
|
|
68
|
+
);
|
|
69
|
+
background-size: 200% 100%;
|
|
70
|
+
animation: roxy-shimmer 1.4s ease-in-out infinite;
|
|
71
|
+
border-radius: var(--roxy-radius-md, 8px);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes roxy-shimmer {
|
|
75
|
+
0% {
|
|
76
|
+
background-position: 200% 0;
|
|
77
|
+
}
|
|
78
|
+
100% {
|
|
79
|
+
background-position: -200% 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media (prefers-reduced-motion: reduce) {
|
|
84
|
+
.roxy-skeleton {
|
|
85
|
+
animation: none;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.roxy-empty {
|
|
90
|
+
padding: var(--roxy-space-lg, 1.5rem);
|
|
91
|
+
color: var(--roxy-muted, #71717a);
|
|
92
|
+
text-align: center;
|
|
93
|
+
font-size: var(--roxy-text-sm, 0.875rem);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:host(:focus-within) .roxy-card {
|
|
97
|
+
outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
|
|
98
|
+
outline-offset: 2px;
|
|
99
|
+
}
|
|
100
|
+
`;
|
|
101
|
+
|
|
102
|
+
// packages/ui/src/components/biorhythm-chart.ts
|
|
103
|
+
var CYCLE_COLOR = {
|
|
104
|
+
physical: "#dc2626",
|
|
105
|
+
emotional: "#0284c7",
|
|
106
|
+
intellectual: "#16a34a",
|
|
107
|
+
intuitive: "#a855f7",
|
|
108
|
+
aesthetic: "#f59e0b",
|
|
109
|
+
awareness: "#ec4899",
|
|
110
|
+
spiritual: "#14b8a6",
|
|
111
|
+
passion: "#ef4444",
|
|
112
|
+
mastery: "#6366f1",
|
|
113
|
+
wisdom: "#475569"
|
|
114
|
+
};
|
|
115
|
+
var RoxyBiorhythmChart = class extends LitElement {
|
|
116
|
+
constructor() {
|
|
117
|
+
super(...arguments);
|
|
118
|
+
this.data = null;
|
|
119
|
+
this.mode = "daily";
|
|
120
|
+
}
|
|
121
|
+
render() {
|
|
122
|
+
const d = this.data;
|
|
123
|
+
if (!d)
|
|
124
|
+
return html`<div class="roxy-empty" role="status">No biorhythm data</div>`;
|
|
125
|
+
if (this.mode === "critical-days" && d.criticalDays?.length) {
|
|
126
|
+
return this.renderCritical(d);
|
|
127
|
+
}
|
|
128
|
+
if (this.mode === "forecast" && d.days?.length) {
|
|
129
|
+
return this.renderForecast(d);
|
|
130
|
+
}
|
|
131
|
+
return this.renderDaily(d);
|
|
132
|
+
}
|
|
133
|
+
renderDaily(d) {
|
|
134
|
+
const cycles = d.cycles ?? {};
|
|
135
|
+
const entries = Object.entries(cycles);
|
|
136
|
+
return html`<section class="wrap" aria-label="Daily biorhythm">
|
|
137
|
+
<header class="head">
|
|
138
|
+
<h2 class="title">Biorhythm</h2>
|
|
139
|
+
${typeof d.energyRating === "number" ? html`<span class="energy">Energy ${d.energyRating}/10</span>` : nothing}
|
|
140
|
+
</header>
|
|
141
|
+
<div class="bars" role="list">
|
|
142
|
+
${entries.map(([cycle, value]) => {
|
|
143
|
+
const v = typeof value === "number" ? value : 0;
|
|
144
|
+
const pct = (v + 1) / 2 * 100;
|
|
145
|
+
const color = CYCLE_COLOR[cycle] ?? "var(--roxy-accent, #f59e0b)";
|
|
146
|
+
return html`<div class="bar" role="listitem">
|
|
147
|
+
<span style="text-transform: capitalize">${cycle}</span>
|
|
148
|
+
<span class="track">
|
|
149
|
+
<span
|
|
150
|
+
class="fill"
|
|
151
|
+
style="width: ${pct}%; background: ${color}"
|
|
152
|
+
></span>
|
|
153
|
+
</span>
|
|
154
|
+
<span class="value">${(v * 100).toFixed(0)}%</span>
|
|
155
|
+
</div>`;
|
|
156
|
+
})}
|
|
157
|
+
</div>
|
|
158
|
+
${d.interpretation ? html`<p class="advice">${d.interpretation}</p>` : nothing}
|
|
159
|
+
${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
|
+
</section>`;
|
|
164
|
+
}
|
|
165
|
+
renderForecast(d) {
|
|
166
|
+
const days = d.days ?? [];
|
|
167
|
+
if (days.length === 0)
|
|
168
|
+
return html`<div class="roxy-empty" role="status">No forecast</div>`;
|
|
169
|
+
const w = 600;
|
|
170
|
+
const h = 160;
|
|
171
|
+
const xStep = w / Math.max(days.length - 1, 1);
|
|
172
|
+
const cycles = Object.keys(days[0]?.cycles ?? {});
|
|
173
|
+
return html`<section class="wrap" aria-label="Biorhythm forecast">
|
|
174
|
+
<header class="head">
|
|
175
|
+
<h2 class="title">Forecast</h2>
|
|
176
|
+
<span class="energy"
|
|
177
|
+
>${d.startDate ?? ""} - ${d.endDate ?? ""}</span
|
|
178
|
+
>
|
|
179
|
+
</header>
|
|
180
|
+
<svg
|
|
181
|
+
viewBox="0 0 ${w} ${h}"
|
|
182
|
+
role="img"
|
|
183
|
+
aria-label="Biorhythm cycle lines across the forecast window"
|
|
184
|
+
>
|
|
185
|
+
<title>Biorhythm forecast</title>
|
|
186
|
+
<line
|
|
187
|
+
x1="0"
|
|
188
|
+
y1=${h / 2}
|
|
189
|
+
x2=${w}
|
|
190
|
+
y2=${h / 2}
|
|
191
|
+
stroke="var(--roxy-border, #e4e4e7)"
|
|
192
|
+
stroke-width="1"
|
|
193
|
+
/>
|
|
194
|
+
${cycles.map((cycle) => {
|
|
195
|
+
const points = days.map((day, i) => {
|
|
196
|
+
const v = day.cycles?.[cycle] ?? 0;
|
|
197
|
+
const x = i * xStep;
|
|
198
|
+
const y = h / 2 - v * (h / 2 - 8);
|
|
199
|
+
return `${x.toFixed(2)},${y.toFixed(2)}`;
|
|
200
|
+
}).join(" ");
|
|
201
|
+
const color = CYCLE_COLOR[cycle] ?? "#475569";
|
|
202
|
+
return svg`<polyline points=${points} fill="none" stroke=${color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />`;
|
|
203
|
+
})}
|
|
204
|
+
</svg>
|
|
205
|
+
${d.summary?.periodAdvice ? html`<p class="advice">${d.summary.periodAdvice}</p>` : nothing}
|
|
206
|
+
</section>`;
|
|
207
|
+
}
|
|
208
|
+
renderCritical(d) {
|
|
209
|
+
return html`<section class="wrap" aria-label="Critical days">
|
|
210
|
+
<header class="head">
|
|
211
|
+
<h2 class="title">Critical days</h2>
|
|
212
|
+
<span class="energy"
|
|
213
|
+
>${d.totalCriticalDays ?? d.criticalDays?.length ?? 0} total</span
|
|
214
|
+
>
|
|
215
|
+
</header>
|
|
216
|
+
<div>
|
|
217
|
+
${(d.criticalDays ?? []).map(
|
|
218
|
+
(day) => html`<span class="crit"
|
|
219
|
+
>${day.date} · ${day.cycle ?? ""} ${day.severity ?? ""}</span
|
|
220
|
+
>`
|
|
221
|
+
)}
|
|
222
|
+
</div>
|
|
223
|
+
</section>`;
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
RoxyBiorhythmChart.styles = [
|
|
227
|
+
baseStyles,
|
|
228
|
+
css2`
|
|
229
|
+
.wrap {
|
|
230
|
+
display: grid;
|
|
231
|
+
gap: var(--roxy-space-md, 1rem);
|
|
232
|
+
}
|
|
233
|
+
.head {
|
|
234
|
+
display: flex;
|
|
235
|
+
justify-content: space-between;
|
|
236
|
+
align-items: center;
|
|
237
|
+
flex-wrap: wrap;
|
|
238
|
+
gap: var(--roxy-space-sm, 0.5rem);
|
|
239
|
+
}
|
|
240
|
+
.title {
|
|
241
|
+
margin: 0;
|
|
242
|
+
font-size: var(--roxy-text-lg, 1.125rem);
|
|
243
|
+
font-weight: var(--roxy-weight-bold, 600);
|
|
244
|
+
}
|
|
245
|
+
.energy {
|
|
246
|
+
font-variant-numeric: tabular-nums;
|
|
247
|
+
color: var(--roxy-accent-fg, #b45309);
|
|
248
|
+
font-weight: var(--roxy-weight-bold, 600);
|
|
249
|
+
}
|
|
250
|
+
.bars {
|
|
251
|
+
display: grid;
|
|
252
|
+
gap: var(--roxy-space-xs, 0.25rem);
|
|
253
|
+
}
|
|
254
|
+
.bar {
|
|
255
|
+
display: grid;
|
|
256
|
+
grid-template-columns: 8rem 1fr 3.5rem;
|
|
257
|
+
gap: var(--roxy-space-sm, 0.5rem);
|
|
258
|
+
align-items: center;
|
|
259
|
+
font-size: var(--roxy-text-sm, 0.875rem);
|
|
260
|
+
}
|
|
261
|
+
.track {
|
|
262
|
+
height: 14px;
|
|
263
|
+
background: var(--roxy-border, #e4e4e7);
|
|
264
|
+
border-radius: var(--roxy-radius-full, 9999px);
|
|
265
|
+
overflow: hidden;
|
|
266
|
+
position: relative;
|
|
267
|
+
}
|
|
268
|
+
.fill {
|
|
269
|
+
display: block;
|
|
270
|
+
height: 100%;
|
|
271
|
+
transition:
|
|
272
|
+
width var(--roxy-motion-duration, 200ms)
|
|
273
|
+
var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
274
|
+
}
|
|
275
|
+
.value {
|
|
276
|
+
font-variant-numeric: tabular-nums;
|
|
277
|
+
text-align: right;
|
|
278
|
+
color: var(--roxy-muted, #71717a);
|
|
279
|
+
}
|
|
280
|
+
.advice {
|
|
281
|
+
color: var(--roxy-fg, #0a0a0a);
|
|
282
|
+
}
|
|
283
|
+
.alert {
|
|
284
|
+
background: color-mix(in srgb, var(--roxy-warning, #ea580c) 12%, transparent);
|
|
285
|
+
border: 1px solid color-mix(in srgb, var(--roxy-warning, #ea580c) 32%, transparent);
|
|
286
|
+
border-radius: var(--roxy-radius-md, 8px);
|
|
287
|
+
padding: var(--roxy-space-sm, 0.5rem);
|
|
288
|
+
font-size: var(--roxy-text-sm, 0.875rem);
|
|
289
|
+
margin: 0;
|
|
290
|
+
}
|
|
291
|
+
svg {
|
|
292
|
+
display: block;
|
|
293
|
+
width: 100%;
|
|
294
|
+
height: auto;
|
|
295
|
+
}
|
|
296
|
+
.crit {
|
|
297
|
+
background: color-mix(in srgb, var(--roxy-danger, #dc2626) 12%, transparent);
|
|
298
|
+
border-radius: var(--roxy-radius-sm, 4px);
|
|
299
|
+
padding: 4px 8px;
|
|
300
|
+
font-size: var(--roxy-text-xs, 0.75rem);
|
|
301
|
+
display: inline-block;
|
|
302
|
+
margin: 2px;
|
|
303
|
+
}
|
|
304
|
+
`
|
|
305
|
+
];
|
|
306
|
+
__decorateClass([
|
|
307
|
+
property({ attribute: false })
|
|
308
|
+
], RoxyBiorhythmChart.prototype, "data", 2);
|
|
309
|
+
__decorateClass([
|
|
310
|
+
property({ type: String, reflect: true })
|
|
311
|
+
], RoxyBiorhythmChart.prototype, "mode", 2);
|
|
312
|
+
RoxyBiorhythmChart = __decorateClass([
|
|
313
|
+
customElement("roxy-biorhythm-chart")
|
|
314
|
+
], RoxyBiorhythmChart);
|
|
315
|
+
export {
|
|
316
|
+
RoxyBiorhythmChart
|
|
317
|
+
};
|
|
318
|
+
//# sourceMappingURL=biorhythm-chart.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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": "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",
|
|
6
|
+
"names": ["css", "css"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
interface CompatibilityData {
|
|
3
|
+
overallScore?: number;
|
|
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
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Cross-domain compatibility card. Renders /astrology/compatibility-score,
|
|
31
|
+
* /numerology/compatibility, or /biorhythm/compatibility responses.
|
|
32
|
+
*/
|
|
33
|
+
export declare class RoxyCompatibilityCard extends LitElement {
|
|
34
|
+
static styles: import("lit").CSSResult[];
|
|
35
|
+
data: CompatibilityData | null;
|
|
36
|
+
mode: 'astrology' | 'numerology' | 'biorhythm';
|
|
37
|
+
private getBreakdown;
|
|
38
|
+
render(): import("lit").TemplateResult<1>;
|
|
39
|
+
}
|
|
40
|
+
declare global {
|
|
41
|
+
interface HTMLElementTagNameMap {
|
|
42
|
+
'roxy-compatibility-card': RoxyCompatibilityCard;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
export {};
|
|
46
|
+
//# sourceMappingURL=compatibility-card.d.ts.map
|
|
@@ -0,0 +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;AAIrD,UAAU,iBAAiB;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9D;AAED;;;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;IAcpB,MAAM;CAqFN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
|