studio-engine 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -0
- data/app/assets/tailwind/studio_engine/engine-motion.css +440 -0
- data/lib/studio/version.rb +1 -1
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 382ba5d1064ff3ef73e0d5d7622b44da80477a9915a7a619a08aad9caebe40ca
|
|
4
|
+
data.tar.gz: 041e44a225267824d720079316e66dbd598402f2710dc5e668e5302cb75a47ed
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7d2a59ad47d5ee598deaf0f81a9fce457ef81a183afa109d9ab5322845140fe5e27920e893fb29df45b6d8b3c70b52bfcd1b6ead57981652466455ed8037ba3c
|
|
7
|
+
data.tar.gz: 630d7bf20e4d5a881a7efc790f4fb4ced77f6832b0608bae449a8256b129caa3b3b3b19d1b52b4b7128e5901324683514c84ffaedea6eaf593403fb62af0f22f
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package with `gem "studio-engine", "~> 0.6"`; bumping the gem version and updating consumer lockfiles is a release.
|
|
4
4
|
|
|
5
|
+
## 0.16.0 — 2026-07-26
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- **Motion / effect primitive layer** — a new, OPT-IN stylesheet at
|
|
10
|
+
`app/assets/tailwind/studio_engine/engine-motion.css` consolidating seven
|
|
11
|
+
reusable animation + visual-effect primitives that had drifted across the MS
|
|
12
|
+
and TM apps: `.studio-border-glow` (mask-composite rainbow border),
|
|
13
|
+
`.spinner` (one canonical border spinner), `.loading-dots` (three bouncing
|
|
14
|
+
dots), `.sheen` (sweep-of-light), `.ping` (expanding pulse ring),
|
|
15
|
+
`.fade-edge` (static mask-image edge fade), and `.progress-meter` (a
|
|
16
|
+
dual-layer color-flip progress bar). Plain `.class` + `@keyframes` (not
|
|
17
|
+
`@utility`), themed through the 7-role CSS custom properties, every knob a
|
|
18
|
+
tunable CSS var. It does NOT auto-bundle: `tailwindcss:engines` only
|
|
19
|
+
generates an entry for the file literally named `engine.css`, so consumers
|
|
20
|
+
adopt this layer deliberately with a single `@import` (see the file header).
|
|
21
|
+
App-side de-fork of the local copies is a follow-up task.
|
|
22
|
+
|
|
5
23
|
## 0.14.0 — 2026-07-22
|
|
6
24
|
|
|
7
25
|
### Added
|
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
/*
|
|
2
|
+
studio-engine MOTION / EFFECT primitives — the shared animation + visual-effect
|
|
3
|
+
layer. Seven reusable primitives, consolidated from the per-app copies that
|
|
4
|
+
drifted across mcritchie-studio (MS) and turf-monster (TM):
|
|
5
|
+
|
|
6
|
+
.studio-border-glow mask-composite rainbow border glow (extracted, MS)
|
|
7
|
+
.spinner one canonical border spinner (reconciled, MS+TM)
|
|
8
|
+
.loading-dots three bouncing dots (extracted, TM)
|
|
9
|
+
.sheen sweep-of-light across any element (reconciled, TM)
|
|
10
|
+
.ping expanding pulse ring (extracted, TM)
|
|
11
|
+
.fade-edge static mask-image edge fade (authored fresh)
|
|
12
|
+
.progress-meter dual-layer color-flip progress bar (authored fresh)
|
|
13
|
+
|
|
14
|
+
─────────────────────────────────────────────────────────────────────────────
|
|
15
|
+
OPT-IN — this layer does NOT auto-bundle.
|
|
16
|
+
|
|
17
|
+
tailwindcss-rails' `tailwindcss:engines` task (Tailwindcss::Engines.bundle)
|
|
18
|
+
generates a `builds/tailwind/<engine>.css` entry ONLY for the file named
|
|
19
|
+
exactly `engine.css`. This file is `engine-motion.css`, so that matcher skips
|
|
20
|
+
it BY CONSTRUCTION — it never rides the auto-generated `studio_engine.css`
|
|
21
|
+
entry that `engine.css` uses, and consumers must adopt it deliberately.
|
|
22
|
+
|
|
23
|
+
Adopt with ONE line in the consuming app's app/assets/tailwind/application.css,
|
|
24
|
+
AFTER `@import "tailwindcss";` (and after your `../builds/tailwind/studio_engine`
|
|
25
|
+
import so the theme role vars are in scope):
|
|
26
|
+
|
|
27
|
+
@import "STUDIO_ENGINE_PATH/app/assets/tailwind/studio_engine/engine-motion.css";
|
|
28
|
+
|
|
29
|
+
Resolve STUDIO_ENGINE_PATH the same way config/tailwind.config.js already
|
|
30
|
+
resolves the shared preset — `bundle show studio-engine`. A one-time helper the
|
|
31
|
+
app-side de-fork task can wire (mirrors the engines contract):
|
|
32
|
+
|
|
33
|
+
# config/tailwind.config.js already computes this:
|
|
34
|
+
# const studioPath = execSync('bundle show studio-engine').toString().trim()
|
|
35
|
+
# emit an absolute @import into your app CSS (or a tiny generated entry).
|
|
36
|
+
|
|
37
|
+
App-side wiring + removing the forked local copies lands in the follow-up
|
|
38
|
+
adoption task; until then the MS/TM local copies stay canonical.
|
|
39
|
+
|
|
40
|
+
─────────────────────────────────────────────────────────────────────────────
|
|
41
|
+
DESIGN RULES
|
|
42
|
+
|
|
43
|
+
- Plain `.class` + `@keyframes`, NOT `@utility`. A Tailwind v4 `@utility`
|
|
44
|
+
redeclaration is ADDITIVE (both definitions emit), which is the wrong shape
|
|
45
|
+
for net-new primitives a consumer might transiently co-load with a local
|
|
46
|
+
copy. Plain classes sidestep that entirely.
|
|
47
|
+
- Color flows through the 7-role theme CSS custom properties emitted by
|
|
48
|
+
studio_theme_css_tag (`--color-cta`, `--color-surface`, `--color-inset`,
|
|
49
|
+
`--color-text`, `--color-border-strong`, `--color-primary`, ...), so every
|
|
50
|
+
primitive restyles itself in dark AND light mode with zero extra work.
|
|
51
|
+
- Every tuning knob (duration, size, color, %, delay) is a CSS custom property
|
|
52
|
+
with a sensible themed default, so a caller retunes via `style="--x: ..."`
|
|
53
|
+
or a `:root` override WITHOUT forking the rule.
|
|
54
|
+
- Namespacing: the two extracted primitives keep their source names
|
|
55
|
+
(`.studio-border-glow`, `.loading-dots`) so the follow-up de-fork is a pure
|
|
56
|
+
delete-the-local-copy swap with no view churn; their gem rules are byte-
|
|
57
|
+
compatible with the app copies, so a transient co-load is a harmless
|
|
58
|
+
duplicate. The reconciled/fresh primitives use fresh generic names
|
|
59
|
+
(`.spinner`, `.sheen`, `.ping`, `.fade-edge`, `.progress-meter`) that no app
|
|
60
|
+
class currently uses. Animation names that would clash with a Tailwind
|
|
61
|
+
built-in of DIFFERENT content are namespaced (`ping-pulse`, not `ping`);
|
|
62
|
+
`spin` is kept because it is byte-identical to Tailwind's built-in.
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
/* =============================================================================
|
|
66
|
+
1. studio-border-glow — mask-composite rainbow border glow
|
|
67
|
+
Extracted verbatim from mcritchie-studio app/assets/tailwind/application.css.
|
|
68
|
+
A ::before draws the crisp animated rainbow border (masked to the padding
|
|
69
|
+
ring via mask-composite), a ::after draws a blurred halo of the same gradient.
|
|
70
|
+
|
|
71
|
+
Usage: <div class="studio-border-glow rounded-xl"> ... </div>
|
|
72
|
+
Tune: --studio-border-glow-duration / -opacity / -halo-opacity /
|
|
73
|
+
-halo-blur / -angle / -offset / -gradient
|
|
74
|
+
========================================================================== */
|
|
75
|
+
.studio-border-glow {
|
|
76
|
+
--studio-border-glow-opacity: 0.82;
|
|
77
|
+
--studio-border-glow-halo-opacity: 0.28;
|
|
78
|
+
--studio-border-glow-halo-blur: 18px;
|
|
79
|
+
--studio-border-glow-angle: 45deg;
|
|
80
|
+
--studio-border-glow-offset: 0%;
|
|
81
|
+
--studio-border-glow-duration: 20s;
|
|
82
|
+
--studio-border-glow-animation: studioBorderGlowSteam var(--studio-border-glow-duration) linear infinite;
|
|
83
|
+
--studio-border-glow-gradient:
|
|
84
|
+
linear-gradient(
|
|
85
|
+
var(--studio-border-glow-angle, 45deg),
|
|
86
|
+
#fb0094,
|
|
87
|
+
#00c4ff,
|
|
88
|
+
#34d399,
|
|
89
|
+
#fbbf24,
|
|
90
|
+
#ff2d55,
|
|
91
|
+
#fb0094,
|
|
92
|
+
#00c4ff,
|
|
93
|
+
#34d399,
|
|
94
|
+
#fbbf24,
|
|
95
|
+
#ff2d55
|
|
96
|
+
);
|
|
97
|
+
isolation: isolate;
|
|
98
|
+
position: relative;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.studio-border-glow::before,
|
|
102
|
+
.studio-border-glow::after {
|
|
103
|
+
content: "";
|
|
104
|
+
position: absolute;
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
border-radius: inherit;
|
|
107
|
+
background: var(--studio-border-glow-gradient);
|
|
108
|
+
background-size: 400%;
|
|
109
|
+
animation: var(--studio-border-glow-animation);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.studio-border-glow::before {
|
|
113
|
+
-webkit-mask:
|
|
114
|
+
linear-gradient(#000 0 0) content-box,
|
|
115
|
+
linear-gradient(#000 0 0);
|
|
116
|
+
-webkit-mask-composite: xor;
|
|
117
|
+
mask:
|
|
118
|
+
linear-gradient(#000 0 0) content-box,
|
|
119
|
+
linear-gradient(#000 0 0);
|
|
120
|
+
mask-composite: exclude;
|
|
121
|
+
inset: -2px;
|
|
122
|
+
z-index: -1;
|
|
123
|
+
padding: 2px;
|
|
124
|
+
opacity: var(--studio-border-glow-opacity);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.studio-border-glow::after {
|
|
128
|
+
-webkit-mask:
|
|
129
|
+
linear-gradient(#000 0 0) content-box,
|
|
130
|
+
linear-gradient(#000 0 0);
|
|
131
|
+
-webkit-mask-composite: xor;
|
|
132
|
+
mask:
|
|
133
|
+
linear-gradient(#000 0 0) content-box,
|
|
134
|
+
linear-gradient(#000 0 0);
|
|
135
|
+
mask-composite: exclude;
|
|
136
|
+
inset: -10px;
|
|
137
|
+
z-index: -2;
|
|
138
|
+
padding: 10px;
|
|
139
|
+
filter: blur(var(--studio-border-glow-halo-blur));
|
|
140
|
+
opacity: var(--studio-border-glow-halo-opacity);
|
|
141
|
+
transform: translateZ(0);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@keyframes studioBorderGlowSteam {
|
|
145
|
+
0% {
|
|
146
|
+
background-position: var(--studio-border-glow-offset, 0%) 0;
|
|
147
|
+
}
|
|
148
|
+
100% {
|
|
149
|
+
background-position: calc(var(--studio-border-glow-offset, 0%) + 400%) 0;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* =============================================================================
|
|
154
|
+
2. spinner — one canonical border spinner
|
|
155
|
+
Reconciles MS .hb-spinner / .aa-spinner (heartbeat.css) and TM .cta-spinner /
|
|
156
|
+
hold-spinner into a single generic border spinner. Sized + colored entirely
|
|
157
|
+
through CSS vars; defaults to the CTA role so it reads on any surface.
|
|
158
|
+
|
|
159
|
+
Usage: <span class="spinner"></span>
|
|
160
|
+
<span class="spinner" style="--spinner-size: 2rem"></span>
|
|
161
|
+
on a colored button: <span class="spinner" style="--spinner-color: currentColor"></span>
|
|
162
|
+
Tune: --spinner-size / --spinner-thickness / --spinner-track /
|
|
163
|
+
--spinner-color / --spinner-speed
|
|
164
|
+
========================================================================== */
|
|
165
|
+
.spinner {
|
|
166
|
+
display: inline-block;
|
|
167
|
+
width: var(--spinner-size, 1rem);
|
|
168
|
+
height: var(--spinner-size, 1rem);
|
|
169
|
+
border: var(--spinner-thickness, 2px) solid var(--spinner-track, var(--color-border-strong));
|
|
170
|
+
border-top-color: var(--spinner-color, var(--color-cta));
|
|
171
|
+
border-radius: 9999px;
|
|
172
|
+
animation: spin var(--spinner-speed, 0.7s) linear infinite;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@keyframes spin {
|
|
176
|
+
to {
|
|
177
|
+
transform: rotate(360deg);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* =============================================================================
|
|
182
|
+
3. loading-dots — three bouncing dots
|
|
183
|
+
Extracted verbatim from turf-monster (the modal card-header "we're working on
|
|
184
|
+
it" idiom). Emit exactly three child <span>s.
|
|
185
|
+
|
|
186
|
+
Usage: <span class="loading-dots"><span></span><span></span><span></span></span>
|
|
187
|
+
Tune: --loading-dots-color / --loading-dots-size / --loading-dots-gap /
|
|
188
|
+
--loading-dots-speed
|
|
189
|
+
========================================================================== */
|
|
190
|
+
.loading-dots {
|
|
191
|
+
display: inline-flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
justify-content: center;
|
|
194
|
+
gap: var(--loading-dots-gap, 6px);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.loading-dots span {
|
|
198
|
+
width: var(--loading-dots-size, 8px);
|
|
199
|
+
height: var(--loading-dots-size, 8px);
|
|
200
|
+
border-radius: 9999px;
|
|
201
|
+
background: var(--loading-dots-color, var(--color-primary));
|
|
202
|
+
animation: loading-dots-bounce var(--loading-dots-speed, 1.2s) ease-in-out infinite both;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
|
|
206
|
+
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
|
|
207
|
+
.loading-dots span:nth-child(3) { animation-delay: 0s; }
|
|
208
|
+
|
|
209
|
+
@keyframes loading-dots-bounce {
|
|
210
|
+
0%, 80%, 100% { transform: translateY(0) scale(0.85); opacity: 0.45; }
|
|
211
|
+
40% { transform: translateY(-6px) scale(1); opacity: 1; }
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* =============================================================================
|
|
215
|
+
4. sheen — a sweep-of-light across any element
|
|
216
|
+
Reconciles TM's badge-sheen-sweep (a one-shot diagonal wink) and seedsShimmer
|
|
217
|
+
(a repeating sweep) into one wrapper primitive. A ::after paints a moving band
|
|
218
|
+
of light clipped to the element's own radius. One-shot by default; add
|
|
219
|
+
.sheen--loop for a continuous shimmer.
|
|
220
|
+
|
|
221
|
+
Usage: <span class="sheen"> ... </span> (one wink on render)
|
|
222
|
+
<span class="sheen sheen--loop"> ... </span> (continuous)
|
|
223
|
+
Tune: --sheen-color / --sheen-duration / --sheen-delay / --sheen-width
|
|
224
|
+
========================================================================== */
|
|
225
|
+
.sheen {
|
|
226
|
+
position: relative;
|
|
227
|
+
overflow: hidden;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.sheen::after {
|
|
231
|
+
content: "";
|
|
232
|
+
position: absolute;
|
|
233
|
+
inset: 0;
|
|
234
|
+
border-radius: inherit;
|
|
235
|
+
pointer-events: none;
|
|
236
|
+
background: linear-gradient(
|
|
237
|
+
90deg,
|
|
238
|
+
transparent calc(50% - var(--sheen-width, 15%)),
|
|
239
|
+
var(--sheen-color, rgba(255, 255, 255, 0.45)) 50%,
|
|
240
|
+
transparent calc(50% + var(--sheen-width, 15%))
|
|
241
|
+
);
|
|
242
|
+
background-size: 250% 100%;
|
|
243
|
+
background-repeat: no-repeat;
|
|
244
|
+
background-position: 200% 0;
|
|
245
|
+
animation: sheen-sweep var(--sheen-duration, 2.5s) ease-in-out var(--sheen-delay, 0s) 1 both;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.sheen.sheen--loop::after {
|
|
249
|
+
animation-iteration-count: infinite;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
@keyframes sheen-sweep {
|
|
253
|
+
from { background-position: 200% 0; }
|
|
254
|
+
to { background-position: -100% 0; }
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* =============================================================================
|
|
258
|
+
5. ping — an expanding pulse ring
|
|
259
|
+
Extracted from TM's chat-live-ping ("Live" radar ping). A ring that scales up
|
|
260
|
+
and fades, richer than Tailwind's animate-ping. Place it as a sibling ring
|
|
261
|
+
behind a solid dot, or use the wrapper form for a dot + ring in one element.
|
|
262
|
+
|
|
263
|
+
Usage (ring only): <span class="ping"></span>
|
|
264
|
+
Usage (dot + ring): <span class="ping ping--dot"></span>
|
|
265
|
+
Tune: --ping-color / --ping-size / --ping-scale / --ping-speed /
|
|
266
|
+
--ping-opacity
|
|
267
|
+
NB: keyframe is `ping-pulse` (NOT `ping`) — Tailwind's built-in `ping`
|
|
268
|
+
keyframe has different content, so we namespace to avoid an override.
|
|
269
|
+
========================================================================== */
|
|
270
|
+
.ping {
|
|
271
|
+
display: inline-block;
|
|
272
|
+
width: var(--ping-size, 0.625rem);
|
|
273
|
+
height: var(--ping-size, 0.625rem);
|
|
274
|
+
border-radius: 9999px;
|
|
275
|
+
background: var(--ping-color, var(--color-cta));
|
|
276
|
+
animation: ping-pulse var(--ping-speed, 1.8s) cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Dot + ring: a solid center dot with the expanding ring animating behind it. */
|
|
280
|
+
.ping.ping--dot {
|
|
281
|
+
position: relative;
|
|
282
|
+
animation: none;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.ping.ping--dot::after {
|
|
286
|
+
content: "";
|
|
287
|
+
position: absolute;
|
|
288
|
+
inset: 0;
|
|
289
|
+
border-radius: 9999px;
|
|
290
|
+
background: var(--ping-color, var(--color-cta));
|
|
291
|
+
animation: ping-pulse var(--ping-speed, 1.8s) cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
@keyframes ping-pulse {
|
|
295
|
+
0% { transform: scale(1); opacity: var(--ping-opacity, 0.6); }
|
|
296
|
+
70%, 100% { transform: scale(var(--ping-scale, 2.6)); opacity: 0; }
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* =============================================================================
|
|
300
|
+
6. fade-edge — static mask-image edge fade (authored fresh)
|
|
301
|
+
Softens the edge of a scroll container so content fades out instead of hard-
|
|
302
|
+
clipping. Pure mask, no animation. Directional variants; -x / -y fade both
|
|
303
|
+
ends of an axis.
|
|
304
|
+
|
|
305
|
+
Usage: <div class="fade-edge-b overflow-y-auto"> ...long content... </div>
|
|
306
|
+
<div class="fade-edge-y overflow-y-auto"> ... </div>
|
|
307
|
+
Tune: --fade-edge-size (how far the fade reaches in from the edge)
|
|
308
|
+
========================================================================== */
|
|
309
|
+
.fade-edge-t,
|
|
310
|
+
.fade-edge-b,
|
|
311
|
+
.fade-edge-l,
|
|
312
|
+
.fade-edge-r,
|
|
313
|
+
.fade-edge-x,
|
|
314
|
+
.fade-edge-y {
|
|
315
|
+
--fade-edge-size: 2rem;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.fade-edge-t {
|
|
319
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-edge-size));
|
|
320
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-edge-size));
|
|
321
|
+
}
|
|
322
|
+
.fade-edge-b {
|
|
323
|
+
-webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--fade-edge-size));
|
|
324
|
+
mask-image: linear-gradient(to top, transparent 0, #000 var(--fade-edge-size));
|
|
325
|
+
}
|
|
326
|
+
.fade-edge-l {
|
|
327
|
+
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-edge-size));
|
|
328
|
+
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-edge-size));
|
|
329
|
+
}
|
|
330
|
+
.fade-edge-r {
|
|
331
|
+
-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-edge-size));
|
|
332
|
+
mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-edge-size));
|
|
333
|
+
}
|
|
334
|
+
.fade-edge-y {
|
|
335
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-edge-size), #000 calc(100% - var(--fade-edge-size)), transparent 100%);
|
|
336
|
+
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-edge-size), #000 calc(100% - var(--fade-edge-size)), transparent 100%);
|
|
337
|
+
}
|
|
338
|
+
.fade-edge-x {
|
|
339
|
+
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-edge-size), #000 calc(100% - var(--fade-edge-size)), transparent 100%);
|
|
340
|
+
mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-edge-size), #000 calc(100% - var(--fade-edge-size)), transparent 100%);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/* =============================================================================
|
|
344
|
+
7. progress-meter — dual-layer color-flip progress bar (authored fresh)
|
|
345
|
+
The label reads correctly over BOTH the track and the fill: two identical,
|
|
346
|
+
pixel-aligned text layers stack, and the FILL layer (with its on-fill label
|
|
347
|
+
color) is revealed only over the filled width via clip-path. Where fill covers
|
|
348
|
+
the label you see the on-fill color; where the track shows through you see the
|
|
349
|
+
on-track color — the text flips color exactly at the fill boundary. Drive fill
|
|
350
|
+
with the --progress custom property.
|
|
351
|
+
|
|
352
|
+
Usage:
|
|
353
|
+
<div class="progress-meter" style="--progress: 62%">
|
|
354
|
+
<div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>
|
|
355
|
+
<div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>
|
|
356
|
+
</div>
|
|
357
|
+
Indeterminate (no known %): add .progress-meter--indeterminate.
|
|
358
|
+
Tune: --progress / --progress-fill / --progress-track /
|
|
359
|
+
--progress-label / --progress-label-on-fill /
|
|
360
|
+
--progress-height / --progress-radius
|
|
361
|
+
========================================================================== */
|
|
362
|
+
.progress-meter {
|
|
363
|
+
position: relative;
|
|
364
|
+
height: var(--progress-height, 1.5rem);
|
|
365
|
+
border-radius: var(--progress-radius, 9999px);
|
|
366
|
+
overflow: hidden;
|
|
367
|
+
background: var(--progress-track, var(--color-inset));
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.progress-meter-track,
|
|
371
|
+
.progress-meter-fill {
|
|
372
|
+
position: absolute;
|
|
373
|
+
inset: 0;
|
|
374
|
+
display: flex;
|
|
375
|
+
align-items: center;
|
|
376
|
+
justify-content: center;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.progress-meter-track {
|
|
380
|
+
background: var(--progress-track, var(--color-inset));
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.progress-meter-fill {
|
|
384
|
+
background: var(--progress-fill, var(--color-cta));
|
|
385
|
+
/* Reveal the fill layer only across the filled width. */
|
|
386
|
+
clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
|
|
387
|
+
transition: clip-path 0.35s ease;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.progress-meter-label {
|
|
391
|
+
font-weight: 700;
|
|
392
|
+
font-variant-numeric: tabular-nums;
|
|
393
|
+
line-height: 1;
|
|
394
|
+
white-space: nowrap;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.progress-meter-track .progress-meter-label {
|
|
398
|
+
color: var(--progress-label, var(--color-text));
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.progress-meter-fill .progress-meter-label {
|
|
402
|
+
color: var(--progress-label-on-fill, #fff);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/* Indeterminate: sweep the fill band across the bar. */
|
|
406
|
+
.progress-meter--indeterminate .progress-meter-fill {
|
|
407
|
+
clip-path: none;
|
|
408
|
+
width: 40%;
|
|
409
|
+
inset: 0 auto 0 0;
|
|
410
|
+
animation: progress-indeterminate 1.4s ease-in-out infinite;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.progress-meter--indeterminate .progress-meter-label {
|
|
414
|
+
display: none;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
@keyframes progress-indeterminate {
|
|
418
|
+
0% { transform: translateX(-100%); }
|
|
419
|
+
100% { transform: translateX(250%); }
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* =============================================================================
|
|
423
|
+
Reduced-motion: honor the user preference. Animated primitives settle into a
|
|
424
|
+
sensible static resting state; the static primitives (fade-edge) are unaffected.
|
|
425
|
+
========================================================================== */
|
|
426
|
+
@media (prefers-reduced-motion: reduce) {
|
|
427
|
+
.studio-border-glow::before,
|
|
428
|
+
.studio-border-glow::after,
|
|
429
|
+
.spinner,
|
|
430
|
+
.loading-dots span,
|
|
431
|
+
.sheen::after,
|
|
432
|
+
.ping,
|
|
433
|
+
.ping.ping--dot::after,
|
|
434
|
+
.progress-meter--indeterminate .progress-meter-fill {
|
|
435
|
+
animation: none;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.loading-dots span { opacity: 0.85; }
|
|
439
|
+
.sheen::after { display: none; }
|
|
440
|
+
}
|
data/lib/studio/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: studio-engine
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.16.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Alex McRitchie
|
|
@@ -171,6 +171,7 @@ files:
|
|
|
171
171
|
- app/assets/images/ses-favicon.png
|
|
172
172
|
- app/assets/javascripts/studio/sticky_table_header.js
|
|
173
173
|
- app/assets/stylesheets/studio/sticky_table_header.css
|
|
174
|
+
- app/assets/tailwind/studio_engine/engine-motion.css
|
|
174
175
|
- app/assets/tailwind/studio_engine/engine.css
|
|
175
176
|
- app/controllers/concerns/solana/session_auth.rb
|
|
176
177
|
- app/controllers/concerns/studio/admin_models.rb
|