@a4ui/core 0.3.0 โ 0.3.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/README.md +38 -7
- package/dist/index.js +2 -1
- package/dist/styles.css +340 -91
- package/package.json +15 -3
package/README.md
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
[](https://a4uikit.github.io/a4ui/)
|
|
7
7
|
[](https://a4uikit.github.io/a4ui/)
|
|
8
8
|
[](https://a4uikit.github.io/a4ui/)
|
|
9
|
+
[](https://www.npmjs.com/package/@a4ui/core)
|
|
10
|
+
[](https://bundlephobia.com/package/@a4ui/core)
|
|
9
11
|
|
|
10
12
|
**Spatial Glass** โ a design system & component library for **SolidJS**
|
|
11
13
|
(glassmorphism + starfield backdrop + light/dark themes). Named after the 4
|
|
@@ -15,11 +17,11 @@ people in the Rivera family. ๐
|
|
|
15
17
|
|
|
16
18
|
Three layers, one identity:
|
|
17
19
|
|
|
18
|
-
| Layer
|
|
19
|
-
|
|
20
|
-
| Behavior / a11y | focus, keyboard, ARIA, portals
|
|
21
|
-
| Motion
|
|
22
|
-
| Visual
|
|
20
|
+
| Layer | What it gives | Tech |
|
|
21
|
+
| --------------- | --------------------------------------- | -------------------------------------------- |
|
|
22
|
+
| Behavior / a11y | focus, keyboard, ARIA, portals | **Kobalte** |
|
|
23
|
+
| Motion | transitions, count-up, calm mode | **solid-transition-group + solid-motionone** |
|
|
24
|
+
| Visual | glass surfaces, tokens, glow, starfield | **Tailwind preset + `styles.css`** |
|
|
23
25
|
|
|
24
26
|
## Install
|
|
25
27
|
|
|
@@ -48,6 +50,31 @@ import '@a4ui/core/styles.css'
|
|
|
48
50
|
import { Button, Card, Modal } from '@a4ui/core'
|
|
49
51
|
```
|
|
50
52
|
|
|
53
|
+
## Customization
|
|
54
|
+
|
|
55
|
+
Colors, radius and fonts are driven by CSS variables (the `@a4ui/core/preset`
|
|
56
|
+
maps Tailwind's semantic names to them). Override any token in your own CSS โ
|
|
57
|
+
scope it to `:root` (or `:root[data-theme='light']`) after importing the styles:
|
|
58
|
+
|
|
59
|
+
```css
|
|
60
|
+
@import '@a4ui/core/styles.css';
|
|
61
|
+
|
|
62
|
+
:root {
|
|
63
|
+
--primary: 262 83% 58%; /* HSL channels โ makes everything primary purple */
|
|
64
|
+
--radius-xl: 0.75rem;
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
|
|
69
|
+
`toggleTheme()` / `<ThemeToggle />`) for the light palette.
|
|
70
|
+
|
|
71
|
+
## Server rendering
|
|
72
|
+
|
|
73
|
+
A4ui is **client-first** โ the components render in the browser (the glass,
|
|
74
|
+
starfield and theme rely on the DOM/`localStorage`). Importing the package is
|
|
75
|
+
SSR-safe (no crash at import), but for **SolidStart** render the components on the
|
|
76
|
+
client, e.g. via `clientOnly(() => import('...'))`.
|
|
77
|
+
|
|
51
78
|
## What's inside
|
|
52
79
|
|
|
53
80
|
~40 components across actions, forms, data, overlays, feedback, navigation and
|
|
@@ -78,12 +105,16 @@ Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
|
|
|
78
105
|
|
|
79
106
|
```bash
|
|
80
107
|
npm install
|
|
81
|
-
npm run build # library build (ESM + .d.ts)
|
|
82
108
|
npm run preview # docs site (dev server)
|
|
83
109
|
npm run typecheck
|
|
84
|
-
npm
|
|
110
|
+
npm run lint # ESLint ยท npm run format to auto-format
|
|
111
|
+
npm run test:unit # Vitest โ helper unit tests
|
|
112
|
+
npm test # Playwright โ docs render + behavior (desktop + mobile)
|
|
113
|
+
npm run build # library build (ESM + .d.ts + styles.css)
|
|
85
114
|
```
|
|
86
115
|
|
|
116
|
+
See **[CONTRIBUTING.md](./CONTRIBUTING.md)** and **[AGENTS.md](./AGENTS.md)**.
|
|
117
|
+
|
|
87
118
|
## License
|
|
88
119
|
|
|
89
120
|
[MIT](./LICENSE) ยฉ Luis Alfredo Rivera Acuรฑa
|
package/dist/index.js
CHANGED
|
@@ -50,6 +50,7 @@ function Ot() {
|
|
|
50
50
|
return zt(e) ? e : "dark";
|
|
51
51
|
}
|
|
52
52
|
function Ke(e) {
|
|
53
|
+
if (typeof document > "u") return;
|
|
53
54
|
const t = document.documentElement;
|
|
54
55
|
e === "light" ? t.setAttribute("data-theme", "light") : t.removeAttribute("data-theme");
|
|
55
56
|
}
|
|
@@ -88,7 +89,7 @@ function Yt() {
|
|
|
88
89
|
return e === null ? !0 : e === "1";
|
|
89
90
|
}
|
|
90
91
|
function tt(e) {
|
|
91
|
-
document.documentElement.classList.toggle("calm", !e);
|
|
92
|
+
typeof document > "u" || document.documentElement.classList.toggle("calm", !e);
|
|
92
93
|
}
|
|
93
94
|
const rt = Yt();
|
|
94
95
|
tt(rt);
|
package/dist/styles.css
CHANGED
|
@@ -75,57 +75,127 @@ body {
|
|
|
75
75
|
|
|
76
76
|
/* Route/page cross-fade (AppShell wraps routed content in a <Transition>). */
|
|
77
77
|
.page-enter-active,
|
|
78
|
-
.page-exit-active {
|
|
78
|
+
.page-exit-active {
|
|
79
|
+
transition: opacity 0.16s ease-out;
|
|
80
|
+
}
|
|
79
81
|
.page-enter,
|
|
80
|
-
.page-exit-to {
|
|
82
|
+
.page-exit-to {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
81
85
|
|
|
82
86
|
/* Modal โ MUST be @keyframes (Kobalte Dialog presence listens for
|
|
83
87
|
animationend, not transitionend, or the exit never resolves). */
|
|
84
|
-
@keyframes modal-overlay-in {
|
|
85
|
-
|
|
88
|
+
@keyframes modal-overlay-in {
|
|
89
|
+
from {
|
|
90
|
+
opacity: 0;
|
|
91
|
+
}
|
|
92
|
+
to {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
@keyframes modal-overlay-out {
|
|
97
|
+
from {
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
to {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
86
104
|
@keyframes modal-content-in {
|
|
87
|
-
from {
|
|
88
|
-
|
|
105
|
+
from {
|
|
106
|
+
opacity: 0;
|
|
107
|
+
transform: scale(0.96) translateY(4px);
|
|
108
|
+
}
|
|
109
|
+
to {
|
|
110
|
+
opacity: 1;
|
|
111
|
+
transform: scale(1) translateY(0);
|
|
112
|
+
}
|
|
89
113
|
}
|
|
90
114
|
@keyframes modal-content-out {
|
|
91
|
-
from {
|
|
92
|
-
|
|
115
|
+
from {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
transform: scale(1) translateY(0);
|
|
118
|
+
}
|
|
119
|
+
to {
|
|
120
|
+
opacity: 0;
|
|
121
|
+
transform: scale(0.96) translateY(4px);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
.modal-overlay[data-expanded] {
|
|
125
|
+
animation: modal-overlay-in 0.15s ease-out;
|
|
126
|
+
}
|
|
127
|
+
.modal-overlay[data-closed] {
|
|
128
|
+
animation: modal-overlay-out 0.15s ease-in;
|
|
129
|
+
}
|
|
130
|
+
.modal-content[data-expanded] {
|
|
131
|
+
animation: modal-content-in 0.18s ease-out;
|
|
132
|
+
}
|
|
133
|
+
.modal-content[data-closed] {
|
|
134
|
+
animation: modal-content-out 0.15s ease-in;
|
|
93
135
|
}
|
|
94
|
-
.modal-overlay[data-expanded] { animation: modal-overlay-in 0.15s ease-out; }
|
|
95
|
-
.modal-overlay[data-closed] { animation: modal-overlay-out 0.15s ease-in; }
|
|
96
|
-
.modal-content[data-expanded] { animation: modal-content-in 0.18s ease-out; }
|
|
97
|
-
.modal-content[data-closed] { animation: modal-content-out 0.15s ease-in; }
|
|
98
136
|
|
|
99
137
|
/* Toast โ same animationend-only presence mechanism as Dialog. */
|
|
100
138
|
@keyframes toast-in {
|
|
101
|
-
from {
|
|
102
|
-
|
|
139
|
+
from {
|
|
140
|
+
opacity: 0;
|
|
141
|
+
transform: translateX(16px);
|
|
142
|
+
}
|
|
143
|
+
to {
|
|
144
|
+
opacity: 1;
|
|
145
|
+
transform: translateX(0);
|
|
146
|
+
}
|
|
103
147
|
}
|
|
104
148
|
@keyframes toast-out {
|
|
105
|
-
from {
|
|
106
|
-
|
|
149
|
+
from {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
transform: translateX(0);
|
|
152
|
+
}
|
|
153
|
+
to {
|
|
154
|
+
opacity: 0;
|
|
155
|
+
transform: translateX(16px);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
.toast-item[data-opened] {
|
|
159
|
+
animation: toast-in 0.2s ease-out;
|
|
160
|
+
}
|
|
161
|
+
.toast-item[data-closed] {
|
|
162
|
+
animation: toast-out 0.18s ease-in;
|
|
107
163
|
}
|
|
108
|
-
.toast-item[data-opened] { animation: toast-in 0.2s ease-out; }
|
|
109
|
-
.toast-item[data-closed] { animation: toast-out 0.18s ease-in; }
|
|
110
164
|
|
|
111
165
|
/* Table row enter/exit fade. */
|
|
112
166
|
.row-enter-active,
|
|
113
|
-
.row-exit-active {
|
|
167
|
+
.row-exit-active {
|
|
168
|
+
transition: opacity 0.15s ease-out;
|
|
169
|
+
}
|
|
114
170
|
.row-enter,
|
|
115
|
-
.row-exit-to {
|
|
171
|
+
.row-exit-to {
|
|
172
|
+
opacity: 0;
|
|
173
|
+
}
|
|
116
174
|
|
|
117
175
|
/* Drawer / Modal drawer-variant slide-over (Kobalte Dialog presence โ
|
|
118
176
|
animationend keyframes, keyed off data-expanded/data-closed like Modal). */
|
|
119
177
|
@keyframes drawer-in {
|
|
120
|
-
from {
|
|
121
|
-
|
|
178
|
+
from {
|
|
179
|
+
transform: translateX(100%);
|
|
180
|
+
}
|
|
181
|
+
to {
|
|
182
|
+
transform: translateX(0);
|
|
183
|
+
}
|
|
122
184
|
}
|
|
123
185
|
@keyframes drawer-out {
|
|
124
|
-
from {
|
|
125
|
-
|
|
186
|
+
from {
|
|
187
|
+
transform: translateX(0);
|
|
188
|
+
}
|
|
189
|
+
to {
|
|
190
|
+
transform: translateX(100%);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
.drawer-content[data-expanded] {
|
|
194
|
+
animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
|
|
195
|
+
}
|
|
196
|
+
.drawer-content[data-closed] {
|
|
197
|
+
animation: drawer-out 0.2s ease-in;
|
|
126
198
|
}
|
|
127
|
-
.drawer-content[data-expanded] { animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
128
|
-
.drawer-content[data-closed] { animation: drawer-out 0.2s ease-in; }
|
|
129
199
|
|
|
130
200
|
/* Reduced motion: resolve near-instantly rather than removing outright, so
|
|
131
201
|
libraries that gate DOM unmount on transitionend/animationend (Kobalte
|
|
@@ -149,56 +219,114 @@ body {
|
|
|
149
219
|
* content at z-index >= 10 (AppShell already does this). Bundled into
|
|
150
220
|
* `a4ui/styles.css` after the component surfaces. */
|
|
151
221
|
|
|
152
|
-
#space {
|
|
222
|
+
#space {
|
|
223
|
+
position: fixed;
|
|
224
|
+
inset: 0;
|
|
225
|
+
z-index: 0;
|
|
226
|
+
pointer-events: none;
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
}
|
|
153
229
|
|
|
154
230
|
#space .sky {
|
|
155
|
-
position: absolute;
|
|
231
|
+
position: absolute;
|
|
232
|
+
inset: 0;
|
|
156
233
|
background:
|
|
157
|
-
radial-gradient(1200px 700px at 82% -8%, hsl(217 91% 60% / .34), transparent 60%),
|
|
158
|
-
radial-gradient(900px 600px at 8% 12%, hsl(275 80% 55% / .28), transparent 60%),
|
|
159
|
-
radial-gradient(1000px 800px at 50% 120%, hsl(199 89% 55% / .24), transparent 55%),
|
|
160
|
-
radial-gradient(700px 500px at 30% 55%, hsl(330 80% 55% / .14), transparent 60%),
|
|
161
|
-
hsl(var(--background));
|
|
234
|
+
radial-gradient(1200px 700px at 82% -8%, hsl(217 91% 60% / 0.34), transparent 60%),
|
|
235
|
+
radial-gradient(900px 600px at 8% 12%, hsl(275 80% 55% / 0.28), transparent 60%),
|
|
236
|
+
radial-gradient(1000px 800px at 50% 120%, hsl(199 89% 55% / 0.24), transparent 55%),
|
|
237
|
+
radial-gradient(700px 500px at 30% 55%, hsl(330 80% 55% / 0.14), transparent 60%), hsl(var(--background));
|
|
162
238
|
}
|
|
163
239
|
[data-theme='light'] #space .sky {
|
|
164
240
|
background:
|
|
165
|
-
radial-gradient(1100px 680px at 84% -10%, hsl(38 95% 70% / .38), transparent 60%),
|
|
166
|
-
radial-gradient(900px 600px at 6% 8%, hsl(217 91% 70% / .32), transparent 60%),
|
|
167
|
-
radial-gradient(1000px 820px at 50% 120%, hsl(275 70% 75% / .26), transparent 55%),
|
|
168
|
-
radial-gradient(700px 500px at 30% 55%, hsl(340 85% 70% / .18), transparent 60%),
|
|
169
|
-
|
|
241
|
+
radial-gradient(1100px 680px at 84% -10%, hsl(38 95% 70% / 0.38), transparent 60%),
|
|
242
|
+
radial-gradient(900px 600px at 6% 8%, hsl(217 91% 70% / 0.32), transparent 60%),
|
|
243
|
+
radial-gradient(1000px 820px at 50% 120%, hsl(275 70% 75% / 0.26), transparent 55%),
|
|
244
|
+
radial-gradient(700px 500px at 30% 55%, hsl(340 85% 70% / 0.18), transparent 60%), hsl(var(--background));
|
|
245
|
+
}
|
|
246
|
+
@keyframes nebulaShift {
|
|
247
|
+
0%,
|
|
248
|
+
100% {
|
|
249
|
+
filter: hue-rotate(0deg);
|
|
250
|
+
}
|
|
251
|
+
50% {
|
|
252
|
+
filter: hue-rotate(18deg);
|
|
253
|
+
}
|
|
170
254
|
}
|
|
171
|
-
@keyframes nebulaShift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(18deg); } }
|
|
172
255
|
|
|
173
256
|
/* Aurora โ dark theme only */
|
|
174
257
|
#space .aurora {
|
|
175
|
-
position: absolute;
|
|
176
|
-
|
|
177
|
-
|
|
258
|
+
position: absolute;
|
|
259
|
+
top: -10%;
|
|
260
|
+
left: -10%;
|
|
261
|
+
right: -10%;
|
|
262
|
+
height: 46%;
|
|
263
|
+
background: linear-gradient(180deg, hsl(160 84% 45% / 0.16), hsl(199 89% 55% / 0.1) 45%, transparent 80%);
|
|
264
|
+
filter: blur(40px);
|
|
265
|
+
opacity: 0.55;
|
|
266
|
+
mix-blend-mode: screen;
|
|
267
|
+
}
|
|
268
|
+
[data-theme='light'] #space .aurora {
|
|
269
|
+
display: none;
|
|
270
|
+
}
|
|
271
|
+
@keyframes auroraSway {
|
|
272
|
+
0%,
|
|
273
|
+
100% {
|
|
274
|
+
transform: translateX(-2%) scaleY(1);
|
|
275
|
+
opacity: 0.5;
|
|
276
|
+
}
|
|
277
|
+
50% {
|
|
278
|
+
transform: translateX(3%) scaleY(1.08);
|
|
279
|
+
opacity: 0.68;
|
|
280
|
+
}
|
|
178
281
|
}
|
|
179
|
-
[data-theme='light'] #space .aurora { display: none; }
|
|
180
|
-
@keyframes auroraSway { 0%,100% { transform: translateX(-2%) scaleY(1); opacity: .5; } 50% { transform: translateX(3%) scaleY(1.08); opacity: .68; } }
|
|
181
282
|
|
|
182
283
|
/* Randomized starfield โ each star is generated in SpaceBackground.tsx with a
|
|
183
284
|
random position/size/brightness/bloom, so there's no visible tiling pattern.
|
|
184
285
|
Static (no drift): moving the field behind the frosted cards re-blurs every
|
|
185
286
|
frame and felt laggy; a subset twinkles for life instead. */
|
|
186
|
-
#space #starfield {
|
|
187
|
-
|
|
287
|
+
#space #starfield {
|
|
288
|
+
position: absolute;
|
|
289
|
+
inset: 0;
|
|
290
|
+
}
|
|
291
|
+
[data-theme='light'] #space #starfield {
|
|
292
|
+
opacity: 0.85;
|
|
293
|
+
}
|
|
188
294
|
/* A few stars drift smoothly like the satellite: each is a tiny element moving
|
|
189
295
|
via its own transform (GPU-composited, cheap), NOT the whole field. Uses
|
|
190
296
|
`alternate` so it eases out and back with no loop jump. Per-star --dx/--dy. */
|
|
191
|
-
@keyframes starDrift {
|
|
297
|
+
@keyframes starDrift {
|
|
298
|
+
from {
|
|
299
|
+
transform: translate(0, 0);
|
|
300
|
+
}
|
|
301
|
+
to {
|
|
302
|
+
transform: translate(var(--dx, 0), var(--dy, 0));
|
|
303
|
+
}
|
|
304
|
+
}
|
|
192
305
|
|
|
193
306
|
/* Rocket exhaust flame (custom SVG rocket in SpaceBackground.tsx) โ flickers. */
|
|
194
|
-
.rk-flame {
|
|
195
|
-
|
|
307
|
+
.rk-flame {
|
|
308
|
+
transform-box: fill-box;
|
|
309
|
+
transform-origin: 50% 0%;
|
|
310
|
+
animation: rocketFlame 0.12s ease-in-out infinite alternate;
|
|
311
|
+
}
|
|
312
|
+
@keyframes rocketFlame {
|
|
313
|
+
from {
|
|
314
|
+
transform: scaleY(0.8);
|
|
315
|
+
opacity: 0.85;
|
|
316
|
+
}
|
|
317
|
+
to {
|
|
318
|
+
transform: scaleY(1.06);
|
|
319
|
+
opacity: 1;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
196
322
|
|
|
197
323
|
/* Legacy tiled star layers (kept for parity; the current SpaceBackground scatters
|
|
198
324
|
individual stars into #starfield instead). Sized generously: small dots nearly
|
|
199
325
|
vanish under backdrop-filter blur, so keep them >= 2.5px. */
|
|
200
326
|
#space .stars {
|
|
201
|
-
position: absolute;
|
|
327
|
+
position: absolute;
|
|
328
|
+
inset: -50%;
|
|
329
|
+
background-repeat: repeat;
|
|
202
330
|
background-image:
|
|
203
331
|
radial-gradient(4px 4px at 20px 30px, hsl(var(--foreground)), transparent),
|
|
204
332
|
radial-gradient(3.6px 3.6px at 120px 90px, hsl(var(--foreground)), transparent),
|
|
@@ -207,7 +335,9 @@ body {
|
|
|
207
335
|
radial-gradient(3.4px 3.4px at 380px 220px, hsl(330 80% 84%), transparent),
|
|
208
336
|
radial-gradient(3px 3px at 90px 190px, hsl(var(--foreground)), transparent),
|
|
209
337
|
radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 82%), transparent);
|
|
210
|
-
background-size: 420px 300px;
|
|
338
|
+
background-size: 420px 300px;
|
|
339
|
+
opacity: 1;
|
|
340
|
+
animation: drift 140s linear infinite;
|
|
211
341
|
}
|
|
212
342
|
[data-theme='light'] #space .stars {
|
|
213
343
|
background-image:
|
|
@@ -219,9 +349,15 @@ body {
|
|
|
219
349
|
radial-gradient(3px 3px at 90px 190px, hsl(40 90% 50%), transparent),
|
|
220
350
|
radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 52%), transparent);
|
|
221
351
|
}
|
|
222
|
-
#space .stars.s2 {
|
|
352
|
+
#space .stars.s2 {
|
|
353
|
+
background-size: 640px 480px;
|
|
354
|
+
opacity: 0.85;
|
|
355
|
+
animation-duration: 200s;
|
|
356
|
+
}
|
|
223
357
|
#space .stars.s3 {
|
|
224
|
-
background-size: 260px 190px;
|
|
358
|
+
background-size: 260px 190px;
|
|
359
|
+
opacity: 1;
|
|
360
|
+
animation-duration: 95s;
|
|
225
361
|
background-image:
|
|
226
362
|
radial-gradient(6px 6px at 40px 50px, hsl(var(--foreground)), transparent),
|
|
227
363
|
radial-gradient(5.6px 5.6px at 160px 130px, hsl(199 89% 85%), transparent),
|
|
@@ -229,77 +365,190 @@ body {
|
|
|
229
365
|
radial-gradient(5px 5px at 90px 20px, hsl(330 85% 85%), transparent);
|
|
230
366
|
}
|
|
231
367
|
[data-theme='light'] #space .stars.s3 {
|
|
232
|
-
opacity: .8;
|
|
368
|
+
opacity: 0.8;
|
|
233
369
|
background-image:
|
|
234
370
|
radial-gradient(6px 6px at 40px 50px, hsl(38 92% 50%), transparent),
|
|
235
371
|
radial-gradient(5.6px 5.6px at 160px 130px, hsl(45 95% 54%), transparent),
|
|
236
372
|
radial-gradient(5.8px 5.8px at 250px 40px, hsl(30 88% 48%), transparent),
|
|
237
373
|
radial-gradient(5px 5px at 90px 20px, hsl(50 92% 55%), transparent);
|
|
238
374
|
}
|
|
239
|
-
@keyframes drift {
|
|
375
|
+
@keyframes drift {
|
|
376
|
+
from {
|
|
377
|
+
transform: translate3d(0, 0, 0);
|
|
378
|
+
}
|
|
379
|
+
to {
|
|
380
|
+
transform: translate3d(-420px, -300px, 0);
|
|
381
|
+
}
|
|
382
|
+
}
|
|
240
383
|
|
|
241
384
|
/* Individually-placed twinkling stars */
|
|
242
385
|
.twinkle {
|
|
243
|
-
position: absolute;
|
|
244
|
-
|
|
386
|
+
position: absolute;
|
|
387
|
+
width: 5px;
|
|
388
|
+
height: 5px;
|
|
389
|
+
border-radius: 50%;
|
|
390
|
+
background: hsl(var(--foreground));
|
|
391
|
+
box-shadow: 0 0 14px 3px hsl(var(--foreground) / 0.9);
|
|
245
392
|
animation: twinkle 3.2s ease-in-out infinite;
|
|
246
393
|
}
|
|
247
|
-
[data-theme='light'] .twinkle {
|
|
248
|
-
|
|
394
|
+
[data-theme='light'] .twinkle {
|
|
395
|
+
background: hsl(40 92% 50%);
|
|
396
|
+
box-shadow: 0 0 14px 3px hsl(40 92% 50% / 0.85);
|
|
397
|
+
}
|
|
398
|
+
@keyframes twinkle {
|
|
399
|
+
0%,
|
|
400
|
+
100% {
|
|
401
|
+
opacity: 0.25;
|
|
402
|
+
transform: scale(0.6);
|
|
403
|
+
}
|
|
404
|
+
50% {
|
|
405
|
+
opacity: 1;
|
|
406
|
+
transform: scale(1.15);
|
|
407
|
+
}
|
|
408
|
+
}
|
|
249
409
|
|
|
250
410
|
/* Constellations โ thin line art connecting a handful of stars */
|
|
251
|
-
#space .constellation {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
411
|
+
#space .constellation {
|
|
412
|
+
position: absolute;
|
|
413
|
+
opacity: 1;
|
|
414
|
+
}
|
|
415
|
+
[data-theme='light'] #space .constellation {
|
|
416
|
+
opacity: 0.6;
|
|
417
|
+
}
|
|
418
|
+
[data-theme='light'] #space .constellation .cline {
|
|
419
|
+
stroke: hsl(38 92% 50%) !important;
|
|
420
|
+
}
|
|
421
|
+
[data-theme='light'] #space .constellation .cdot {
|
|
422
|
+
fill: hsl(222 47% 20%) !important;
|
|
423
|
+
}
|
|
255
424
|
|
|
256
425
|
/* Planets / moons โ decorative, corner-anchored, gentle float */
|
|
257
|
-
.planet {
|
|
426
|
+
.planet {
|
|
427
|
+
border-radius: 50%;
|
|
428
|
+
}
|
|
258
429
|
.planet::after {
|
|
259
|
-
content: '';
|
|
260
|
-
|
|
430
|
+
content: '';
|
|
431
|
+
position: absolute;
|
|
432
|
+
inset: -34% -55%;
|
|
433
|
+
border-radius: 50%;
|
|
434
|
+
border: 3px solid hsl(var(--foreground) / 0.18);
|
|
435
|
+
transform: rotate(-24deg);
|
|
436
|
+
}
|
|
437
|
+
.planet-glow {
|
|
438
|
+
border-radius: 50%;
|
|
439
|
+
filter: blur(2px);
|
|
440
|
+
}
|
|
441
|
+
@keyframes floaty {
|
|
442
|
+
0%,
|
|
443
|
+
100% {
|
|
444
|
+
transform: translateY(0) rotate(0deg);
|
|
445
|
+
}
|
|
446
|
+
50% {
|
|
447
|
+
transform: translateY(-14px) rotate(4deg);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
.floaty {
|
|
451
|
+
animation: floaty 12s ease-in-out infinite;
|
|
452
|
+
}
|
|
453
|
+
.floaty.slow {
|
|
454
|
+
animation-duration: 18s;
|
|
261
455
|
}
|
|
262
|
-
.planet-glow { border-radius: 50%; filter: blur(2px); }
|
|
263
|
-
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
|
|
264
|
-
.floaty { animation: floaty 12s ease-in-out infinite; }
|
|
265
|
-
.floaty.slow { animation-duration: 18s; }
|
|
266
456
|
|
|
267
457
|
/* Asteroid belt (small drifting rocks) */
|
|
268
|
-
.asteroid {
|
|
269
|
-
|
|
458
|
+
.asteroid {
|
|
459
|
+
border-radius: 40% 55% 50% 45%;
|
|
460
|
+
background: hsl(var(--foreground) / 0.35);
|
|
461
|
+
}
|
|
462
|
+
@keyframes asteroidDrift {
|
|
463
|
+
0%,
|
|
464
|
+
100% {
|
|
465
|
+
transform: translate(0, 0) rotate(0deg);
|
|
466
|
+
}
|
|
467
|
+
50% {
|
|
468
|
+
transform: translate(-8px, 6px) rotate(25deg);
|
|
469
|
+
}
|
|
470
|
+
}
|
|
270
471
|
|
|
271
472
|
/* Shooting star โ bright core + tapered glowing trail */
|
|
272
473
|
.shooter {
|
|
273
|
-
position: absolute;
|
|
274
|
-
|
|
275
|
-
|
|
474
|
+
position: absolute;
|
|
475
|
+
height: 2.5px;
|
|
476
|
+
border-radius: 999px;
|
|
477
|
+
transform-origin: left center;
|
|
478
|
+
background: linear-gradient(
|
|
479
|
+
90deg,
|
|
480
|
+
hsla(0, 0%, 100%, 0) 0%,
|
|
481
|
+
hsla(199, 90%, 85%, 0.55) 55%,
|
|
482
|
+
hsla(0, 0%, 100%, 0.98) 100%
|
|
483
|
+
);
|
|
484
|
+
filter: blur(0.2px) drop-shadow(0 0 3px hsla(199, 90%, 80%, 0.5));
|
|
276
485
|
}
|
|
277
486
|
.shooter::before {
|
|
278
|
-
content: '';
|
|
279
|
-
|
|
280
|
-
|
|
487
|
+
content: '';
|
|
488
|
+
position: absolute;
|
|
489
|
+
right: -2px;
|
|
490
|
+
top: 50%;
|
|
491
|
+
width: 6px;
|
|
492
|
+
height: 6px;
|
|
493
|
+
border-radius: 50%;
|
|
494
|
+
transform: translateY(-50%);
|
|
495
|
+
background: radial-gradient(circle, #fff 0%, hsla(199, 95%, 88%, 0.95) 50%, transparent 75%);
|
|
496
|
+
box-shadow:
|
|
497
|
+
0 0 8px 2px #fff,
|
|
498
|
+
0 0 20px 7px hsla(199, 90%, 75%, 0.85),
|
|
499
|
+
0 0 38px 14px hsla(199, 90%, 60%, 0.4);
|
|
281
500
|
}
|
|
282
501
|
.shooter::after {
|
|
283
|
-
content: '';
|
|
284
|
-
|
|
502
|
+
content: '';
|
|
503
|
+
position: absolute;
|
|
504
|
+
left: 0;
|
|
505
|
+
top: 50%;
|
|
506
|
+
width: 55%;
|
|
507
|
+
height: 1px;
|
|
508
|
+
transform: translateY(-50%);
|
|
509
|
+
background: hsla(199, 85%, 92%, 0.65);
|
|
510
|
+
filter: blur(2px);
|
|
285
511
|
}
|
|
286
512
|
|
|
287
513
|
/* Satellite (drifting glyph, e.g. a lucide "satellite" icon) */
|
|
288
|
-
@keyframes satelliteDrift {
|
|
289
|
-
|
|
514
|
+
@keyframes satelliteDrift {
|
|
515
|
+
from {
|
|
516
|
+
transform: translate(0, 0) rotate(-18deg);
|
|
517
|
+
}
|
|
518
|
+
to {
|
|
519
|
+
transform: translate(126vw, 34vh) rotate(-18deg);
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
#satellite {
|
|
523
|
+
animation: satelliteDrift 46s linear infinite;
|
|
524
|
+
}
|
|
290
525
|
|
|
291
526
|
/* Cursor-following ambient glow (nebula that trails the pointer) */
|
|
292
527
|
#cursorGlow {
|
|
293
|
-
border-radius: 50%;
|
|
294
|
-
|
|
295
|
-
|
|
528
|
+
border-radius: 50%;
|
|
529
|
+
transform: translate(-50%, -50%);
|
|
530
|
+
background: radial-gradient(circle, hsl(217 91% 60% / 0.1), transparent 70%);
|
|
531
|
+
opacity: 0;
|
|
532
|
+
transition: opacity 0.4s ease;
|
|
296
533
|
}
|
|
297
534
|
|
|
298
535
|
@media (prefers-reduced-motion: reduce) {
|
|
299
|
-
html:not(.force-motion) #space .stars,
|
|
300
|
-
html:not(.force-motion) .
|
|
301
|
-
html:not(.force-motion)
|
|
302
|
-
html:not(.force-motion)
|
|
303
|
-
html:not(.force-motion) #
|
|
304
|
-
.
|
|
536
|
+
html:not(.force-motion) #space .stars,
|
|
537
|
+
html:not(.force-motion) .twinkle,
|
|
538
|
+
html:not(.force-motion) .floaty,
|
|
539
|
+
html:not(.force-motion) .shooter,
|
|
540
|
+
html:not(.force-motion) #satellite,
|
|
541
|
+
html:not(.force-motion) .asteroid {
|
|
542
|
+
animation: none !important;
|
|
543
|
+
}
|
|
544
|
+
html:not(.force-motion) #cursorGlow {
|
|
545
|
+
display: none !important;
|
|
546
|
+
}
|
|
547
|
+
html:not(.force-motion) #space .sky,
|
|
548
|
+
html:not(.force-motion) #space .aurora {
|
|
549
|
+
animation: none !important;
|
|
550
|
+
}
|
|
551
|
+
.card.glow-edge::before {
|
|
552
|
+
display: none;
|
|
553
|
+
}
|
|
305
554
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a4ui/core",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "A4ui โ Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -52,7 +52,10 @@
|
|
|
52
52
|
"preview:build": "node scripts/gen-llms.mjs && vite build --config vite.preview.config.ts",
|
|
53
53
|
"gen:llms": "node scripts/gen-llms.mjs",
|
|
54
54
|
"typecheck": "tsc --noEmit",
|
|
55
|
-
"lint": "eslint
|
|
55
|
+
"lint": "eslint .",
|
|
56
|
+
"format": "prettier --write .",
|
|
57
|
+
"format:check": "prettier --check .",
|
|
58
|
+
"test:unit": "vitest run",
|
|
56
59
|
"test": "playwright test",
|
|
57
60
|
"test:ui": "playwright test --ui",
|
|
58
61
|
"test:report": "playwright show-report",
|
|
@@ -71,13 +74,22 @@
|
|
|
71
74
|
"tailwind-merge": "^3.6.0"
|
|
72
75
|
},
|
|
73
76
|
"devDependencies": {
|
|
77
|
+
"@eslint/js": "^9.39.5",
|
|
74
78
|
"@playwright/test": "^1.61.1",
|
|
79
|
+
"@solidjs/testing-library": "^0.8.10",
|
|
80
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
81
|
+
"eslint": "^9.39.5",
|
|
82
|
+
"eslint-config-prettier": "^10.1.8",
|
|
75
83
|
"eslint-plugin-solid": "^0.14.5",
|
|
84
|
+
"jsdom": "^29.1.1",
|
|
76
85
|
"playwright-core": "^1.61.1",
|
|
86
|
+
"prettier": "^3.9.5",
|
|
77
87
|
"tailwindcss": "^3.4.19",
|
|
78
88
|
"typescript": "^5.6.0",
|
|
89
|
+
"typescript-eslint": "^8.64.0",
|
|
79
90
|
"vite": "^6.0.0",
|
|
80
91
|
"vite-plugin-dts": "^4.3.0",
|
|
81
|
-
"vite-plugin-solid": "^2.11.12"
|
|
92
|
+
"vite-plugin-solid": "^2.11.12",
|
|
93
|
+
"vitest": "^4.1.10"
|
|
82
94
|
}
|
|
83
95
|
}
|