Skip to content

Commit 8aca222

Browse files
ph33nxph33nx
committed
feat(ui): minify template literal css and html, add chart view tabs and chevron accordions, label kundli ascendant
1 parent 0056528 commit 8aca222

16 files changed

Lines changed: 665 additions & 309 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -628,7 +628,7 @@ Persist the choice in `localStorage` from your own code; the components do not o
628628
<details>
629629
<summary><strong>How big is each component? What is the bundle cost?</strong></summary>
630630

631-
Per-component bundles run 8-10 KB gzipped, capped at 30 KB by CI. The full bundle (every component, helpers, base styles) is around 26 KB gzipped, capped at 150 KB. The React package loads the runtime on mount, so a route that renders one chart pays for one component, not the whole catalog. Pin a concrete version in production for byte-stable cache hits.
631+
Per-component bundles run 6-10 KB gzipped, capped at 30 KB by CI. The full bundle (every component, helpers, base styles) stays well under the 150 KB CI cap, around 45 KB gzipped today. The React package loads the runtime on mount, so a route that renders one chart pays for one component, not the whole catalog. Pin a concrete version in production for byte-stable cache hits.
632632
</details>
633633

634634
<details>

‎bun.lock‎

Lines changed: 147 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@biomejs/biome": "^2.4.9",
3535
"@hey-api/client-fetch": "0.13.1",
3636
"@hey-api/openapi-ts": "0.97.2",
37+
"@lit-labs/rollup-plugin-minify-html-literals": "^0.2.0",
3738
"@playwright/test": "^1.49.0",
3839
"@roxyapi/sdk": "^1.2.23",
3940
"@types/bun": "^1.2.0",

‎packages/ui-react/package.json‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,74 @@
11
{
2-
"name": "@roxyapi/ui-react",
3-
"version": "0.5.0",
4-
"description": "React components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, and more. One key, beautiful in 30 minutes.",
5-
"type": "module",
6-
"main": "./dist/index.cjs",
7-
"module": "./dist/index.js",
8-
"types": "./dist/index.d.ts",
9-
"sideEffects": false,
10-
"exports": {
11-
".": {
12-
"types": "./dist/index.d.ts",
13-
"import": "./dist/index.js",
14-
"require": "./dist/index.cjs"
15-
},
16-
"./components/*": {
17-
"types": "./dist/components/*.d.ts",
18-
"import": "./dist/components/*.js"
19-
}
20-
},
21-
"files": [
22-
"dist",
23-
"README.md",
24-
"LICENSE",
25-
"AGENTS.md"
26-
],
27-
"keywords": [
28-
"astrology",
29-
"vedic",
30-
"tarot",
31-
"numerology",
32-
"biorhythm",
33-
"iching",
34-
"kundli",
35-
"natal-chart",
36-
"birth-chart",
37-
"horoscope",
38-
"panchang",
39-
"react",
40-
"react-components",
41-
"web-components",
42-
"shadow-dom",
43-
"lit",
44-
"shadcn",
45-
"jsdelivr",
46-
"roxyapi"
47-
],
48-
"license": "MIT",
49-
"repository": {
50-
"type": "git",
51-
"url": "git+https://github.com/RoxyAPI/ui.git",
52-
"directory": "packages/ui-react"
53-
},
54-
"homepage": "https://roxyapi.com/ui",
55-
"bugs": {
56-
"url": "https://github.com/RoxyAPI/ui/issues"
57-
},
58-
"engines": {
59-
"node": ">=18"
60-
},
61-
"peerDependencies": {
62-
"react": ">=18 <20",
63-
"react-dom": ">=18 <20"
64-
},
65-
"peerDependenciesMeta": {
66-
"react-dom": {
67-
"optional": true
68-
}
69-
},
70-
"publishConfig": {
71-
"access": "public",
72-
"provenance": true
73-
}
2+
"name": "@roxyapi/ui-react",
3+
"version": "0.5.0",
4+
"description": "React components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, and more. One key, beautiful in 30 minutes.",
5+
"type": "module",
6+
"main": "./dist/index.cjs",
7+
"module": "./dist/index.js",
8+
"types": "./dist/index.d.ts",
9+
"sideEffects": false,
10+
"exports": {
11+
".": {
12+
"types": "./dist/index.d.ts",
13+
"import": "./dist/index.js",
14+
"require": "./dist/index.cjs"
15+
},
16+
"./components/*": {
17+
"types": "./dist/components/*.d.ts",
18+
"import": "./dist/components/*.js"
19+
}
20+
},
21+
"files": [
22+
"dist",
23+
"README.md",
24+
"LICENSE",
25+
"AGENTS.md"
26+
],
27+
"keywords": [
28+
"astrology",
29+
"vedic",
30+
"tarot",
31+
"numerology",
32+
"biorhythm",
33+
"iching",
34+
"kundli",
35+
"natal-chart",
36+
"birth-chart",
37+
"horoscope",
38+
"panchang",
39+
"react",
40+
"react-components",
41+
"web-components",
42+
"shadow-dom",
43+
"lit",
44+
"shadcn",
45+
"jsdelivr",
46+
"roxyapi"
47+
],
48+
"license": "MIT",
49+
"repository": {
50+
"type": "git",
51+
"url": "git+https://github.com/RoxyAPI/ui.git",
52+
"directory": "packages/ui-react"
53+
},
54+
"homepage": "https://roxyapi.com/ui",
55+
"bugs": {
56+
"url": "https://github.com/RoxyAPI/ui/issues"
57+
},
58+
"engines": {
59+
"node": ">=18"
60+
},
61+
"peerDependencies": {
62+
"react": ">=18 <20",
63+
"react-dom": ">=18 <20"
64+
},
65+
"peerDependenciesMeta": {
66+
"react-dom": {
67+
"optional": true
68+
}
69+
},
70+
"publishConfig": {
71+
"access": "public",
72+
"provenance": true
73+
}
7474
}

‎packages/ui/package.json‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
11
{
2-
"name": "@roxyapi/ui",
3-
"version": "0.5.0",
4-
"description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
5-
"type": "module",
6-
"main": "./dist/index.cjs",
7-
"module": "./dist/index.js",
8-
"types": "./dist/index.d.ts",
9-
"exports": {
10-
".": {
11-
"types": "./dist/index.d.ts",
12-
"import": "./dist/index.js",
13-
"require": "./dist/index.cjs"
14-
},
15-
"./components/*": {
16-
"types": "./dist/components/*.d.ts",
17-
"import": "./dist/components/*.js"
18-
},
19-
"./types": {
20-
"types": "./dist/types/index.d.ts"
21-
},
22-
"./styles/tokens.css": "./dist/styles/tokens.css",
23-
"./registry/*": "./dist/registry/*.json"
24-
},
25-
"files": [
26-
"dist",
27-
"src",
28-
"README.md",
29-
"LICENSE",
30-
"AGENTS.md",
31-
"THEMING.md"
32-
],
33-
"keywords": [
34-
"web-components",
35-
"lit",
36-
"custom-elements",
37-
"shadow-dom",
38-
"astrology",
39-
"vedic",
40-
"tarot",
41-
"numerology",
42-
"horoscope",
43-
"kundli",
44-
"natal-chart",
45-
"birth-chart",
46-
"iching",
47-
"crystals",
48-
"angel-numbers",
49-
"dreams",
50-
"biorhythm",
51-
"shadcn",
52-
"jsdelivr",
53-
"roxyapi"
54-
],
55-
"license": "MIT",
56-
"repository": {
57-
"type": "git",
58-
"url": "git+https://github.com/RoxyAPI/ui.git",
59-
"directory": "packages/ui"
60-
},
61-
"homepage": "https://roxyapi.com/ui",
62-
"bugs": {
63-
"url": "https://github.com/RoxyAPI/ui/issues"
64-
},
65-
"sideEffects": [
66-
"./dist/components/*.js",
67-
"./dist/cdn/*.js"
68-
],
69-
"engines": {
70-
"node": ">=18"
71-
},
72-
"peerDependencies": {
73-
"lit": "^3.0.0"
74-
},
75-
"dependencies": {
76-
"lit": "^3.2.0"
77-
},
78-
"publishConfig": {
79-
"access": "public",
80-
"provenance": true
81-
}
2+
"name": "@roxyapi/ui",
3+
"version": "0.5.0",
4+
"description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
5+
"type": "module",
6+
"main": "./dist/index.cjs",
7+
"module": "./dist/index.js",
8+
"types": "./dist/index.d.ts",
9+
"jsdelivr": "./dist/cdn/roxy-ui.js",
10+
"unpkg": "./dist/cdn/roxy-ui.js",
11+
"exports": {
12+
".": {
13+
"types": "./dist/index.d.ts",
14+
"import": "./dist/index.js",
15+
"require": "./dist/index.cjs"
16+
},
17+
"./components/*": {
18+
"types": "./dist/components/*.d.ts",
19+
"import": "./dist/components/*.js"
20+
},
21+
"./types": {
22+
"types": "./dist/types/index.d.ts"
23+
},
24+
"./styles/tokens.css": "./dist/styles/tokens.css",
25+
"./registry/*": "./dist/registry/*.json"
26+
},
27+
"files": [
28+
"dist",
29+
"src",
30+
"README.md",
31+
"LICENSE",
32+
"AGENTS.md",
33+
"THEMING.md"
34+
],
35+
"keywords": [
36+
"web-components",
37+
"lit",
38+
"custom-elements",
39+
"shadow-dom",
40+
"astrology",
41+
"vedic",
42+
"tarot",
43+
"numerology",
44+
"horoscope",
45+
"kundli",
46+
"natal-chart",
47+
"birth-chart",
48+
"iching",
49+
"crystals",
50+
"angel-numbers",
51+
"dreams",
52+
"biorhythm",
53+
"shadcn",
54+
"jsdelivr",
55+
"roxyapi"
56+
],
57+
"license": "MIT",
58+
"repository": {
59+
"type": "git",
60+
"url": "git+https://github.com/RoxyAPI/ui.git",
61+
"directory": "packages/ui"
62+
},
63+
"homepage": "https://roxyapi.com/ui",
64+
"bugs": {
65+
"url": "https://github.com/RoxyAPI/ui/issues"
66+
},
67+
"sideEffects": [
68+
"./dist/components/*.js",
69+
"./dist/cdn/*.js"
70+
],
71+
"engines": {
72+
"node": ">=18"
73+
},
74+
"peerDependencies": {
75+
"lit": "^3.0.0"
76+
},
77+
"dependencies": {
78+
"lit": "^3.2.0"
79+
},
80+
"publishConfig": {
81+
"access": "public",
82+
"provenance": true
83+
}
8284
}

‎packages/ui/src/components/dasha-timeline.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type {
66
GetSubDashasResponse,
77
} from '../types/index.js';
88
import { baseStyles } from '../utils/base-styles.js';
9+
import { chevron, disclosureStyles } from '../utils/disclosure.js';
910
import { formatNumber } from '../utils/format.js';
1011
import { MarkupDataController } from '../utils/markup-data.js';
1112

@@ -25,6 +26,7 @@ type DashaPeriod = GetMajorDashasResponse['mahadashas'][number];
2526
export class RoxyDashaTimeline extends LitElement {
2627
static styles = [
2728
baseStyles,
29+
disclosureStyles,
2830
css`
2931
.wrap {
3032
display: grid;
@@ -144,6 +146,10 @@ export class RoxyDashaTimeline extends LitElement {
144146
cursor: pointer;
145147
font-size: var(--roxy-text-sm, 0.875rem);
146148
font-weight: var(--roxy-weight-bold, 600);
149+
display: flex;
150+
align-items: center;
151+
justify-content: space-between;
152+
gap: var(--roxy-space-md, 1rem);
147153
}
148154
details.interp p {
149155
margin: var(--roxy-space-sm, 0.5rem) 0 0;
@@ -233,7 +239,10 @@ export class RoxyDashaTimeline extends LitElement {
233239
const active = periods.find((p) => this.isCurrent(p));
234240
if (!active?.interpretation) return nothing;
235241
return html`<details class="interp">
236-
<summary>${active.planet} mahadasha interpretation</summary>
242+
<summary>
243+
<span>${active.planet} mahadasha interpretation</span>
244+
${chevron()}
245+
</summary>
237246
<p>${active.interpretation}</p>
238247
</details>`;
239248
}

‎packages/ui/src/components/divisional-chart.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from '../utils/kundli-render.js';
1313
import { kundliStyles } from '../utils/kundli-styles.js';
1414
import { MarkupDataController } from '../utils/markup-data.js';
15+
import { tablistStyles } from '../utils/tablist.js';
1516

1617
/**
1718
* Divisional chart renderer (D2-D60). Accepts a DivisionalChartResponse and
@@ -26,6 +27,7 @@ export class RoxyDivisionalChart extends LitElement {
2627
static styles = [
2728
baseStyles,
2829
kundliStyles,
30+
tablistStyles,
2931
css`
3032
.division-meta {
3133
font-size: var(--roxy-text-sm, 0.875rem);

0 commit comments

Comments
 (0)