@markgrafhq/markgraf-embed 0.0.25
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/LICENSE +21 -0
- package/README.md +72 -0
- package/dist/CommitMono-Regular.woff2 +0 -0
- package/dist/markgraf-embed.css +288 -0
- package/dist/markgraf-embed.js +36 -0
- package/package.json +45 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Mark Eibes
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# @markgrafhq/markgraf-embed
|
|
2
|
+
|
|
3
|
+
Drop-in Canvas2D player for [markgraf](https://github.com/i-am-the-slime/markgraf) animations.
|
|
4
|
+
|
|
5
|
+
Decorate any element with `data-markgraf` containing markgraf source text and
|
|
6
|
+
the script replaces it with an interactive player — scrub bar, keyframe ticks,
|
|
7
|
+
play/pause, speed control, single-active-player coordination across multiple
|
|
8
|
+
embeds on the same page, and Space toggles whichever player is currently
|
|
9
|
+
active.
|
|
10
|
+
|
|
11
|
+
## From a CDN (no build step)
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<link rel="stylesheet" href="https://unpkg.com/@markgrafhq/markgraf-embed/dist/markgraf-embed.css">
|
|
15
|
+
<script src="https://unpkg.com/@markgrafhq/markgraf-embed/dist/markgraf-embed.js"></script>
|
|
16
|
+
|
|
17
|
+
<div data-markgraf>
|
|
18
|
+
seed 1
|
|
19
|
+
keyframe v1 {
|
|
20
|
+
+node client "Client"
|
|
21
|
+
+node api "API"
|
|
22
|
+
+edge client api
|
|
23
|
+
client -> api "GET /user/42"
|
|
24
|
+
}
|
|
25
|
+
</div>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## From a bundler
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import "@markgrafhq/markgraf-embed/dist/markgraf-embed.css";
|
|
32
|
+
import "@markgrafhq/markgraf-embed"; // side-effect: registers window.markgraf, auto-mounts
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Sizing
|
|
36
|
+
|
|
37
|
+
Set inline CSS on the embed element:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<!-- Cap canvas height at 320px -->
|
|
41
|
+
<div data-markgraf style="--mg-max-height: 320px">…</div>
|
|
42
|
+
|
|
43
|
+
<!-- Cap the embed width -->
|
|
44
|
+
<div data-markgraf style="max-width: 420px">…</div>
|
|
45
|
+
|
|
46
|
+
<!-- Use most of the viewport for a deep diagram -->
|
|
47
|
+
<div data-markgraf style="--mg-max-height: 80svh">…</div>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Programmatic mount
|
|
51
|
+
|
|
52
|
+
The script also exposes `window.markgraf`:
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
markgraf.mount(element, "seed 1\nkeyframe v1 { +node a \"A\" }");
|
|
56
|
+
markgraf.mountAll(); // scan the whole document
|
|
57
|
+
markgraf.mountAll(myContainer); // scan a subtree
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Auto-mount details
|
|
61
|
+
|
|
62
|
+
- Runs on `DOMContentLoaded`, or immediately if the script is loaded after.
|
|
63
|
+
- Each `[data-markgraf]` is mounted exactly once; subsequent calls to
|
|
64
|
+
`mountAll` are idempotent.
|
|
65
|
+
- Source text can come from (in order of preference):
|
|
66
|
+
1. `data-markgraf-src-b64` attribute (base64-encoded UTF-8)
|
|
67
|
+
2. `data-markgraf-src` attribute
|
|
68
|
+
3. the element's `textContent`
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT.
|
|
Binary file
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'CommitMono';
|
|
3
|
+
src: url('./CommitMono-Regular.woff2') format('woff2');
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
font-display: swap;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.markgraf-embed {
|
|
9
|
+
--mg-bg: #ffffff;
|
|
10
|
+
--mg-fg: #111111;
|
|
11
|
+
--mg-bar-bg: #111111;
|
|
12
|
+
--mg-bar-fg: #ffffff;
|
|
13
|
+
--mg-muted: #9a9a9a;
|
|
14
|
+
--mg-accent: #ffffff;
|
|
15
|
+
--mg-track: #111111;
|
|
16
|
+
--mg-track-hover: #111111;
|
|
17
|
+
position: relative;
|
|
18
|
+
border-radius: 10px;
|
|
19
|
+
background: transparent;
|
|
20
|
+
color: var(--mg-fg);
|
|
21
|
+
font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.markgraf-embed canvas[data-mg="stage"] {
|
|
26
|
+
width: 100%;
|
|
27
|
+
display: block;
|
|
28
|
+
max-height: var(--mg-max-height, 90svh);
|
|
29
|
+
object-fit: contain;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.markgraf-embed :focus,
|
|
33
|
+
.markgraf-embed :focus-visible {
|
|
34
|
+
outline: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Big centered play hint shown while paused. Hidden as soon as a play
|
|
38
|
+
button anywhere in the embed flips to data-mg-playing="1". */
|
|
39
|
+
.markgraf-embed [data-mg="play-overlay"] {
|
|
40
|
+
position: absolute;
|
|
41
|
+
inset: 0;
|
|
42
|
+
margin: auto;
|
|
43
|
+
width: 72px;
|
|
44
|
+
height: 72px;
|
|
45
|
+
border-radius: 50%;
|
|
46
|
+
background: rgba(0, 0, 0, 0.55);
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
opacity: 0;
|
|
49
|
+
transform: scale(0.85);
|
|
50
|
+
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.markgraf-embed [data-mg="play-overlay"]::before {
|
|
54
|
+
content: "";
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
margin: auto;
|
|
58
|
+
width: 32px;
|
|
59
|
+
height: 32px;
|
|
60
|
+
background: #fff;
|
|
61
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
62
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.markgraf-embed:has([data-mg="play"][data-mg-playing="0"]) [data-mg="play-overlay"] {
|
|
66
|
+
opacity: 1;
|
|
67
|
+
transform: scale(1);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.markgraf-embed [data-mg="bar"] {
|
|
71
|
+
position: absolute;
|
|
72
|
+
left: 0;
|
|
73
|
+
right: 0;
|
|
74
|
+
bottom: 0;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 8px;
|
|
78
|
+
padding: 6px 8px;
|
|
79
|
+
background: rgba(255, 255, 255, 0.92);
|
|
80
|
+
color: var(--mg-fg);
|
|
81
|
+
opacity: 0;
|
|
82
|
+
transform: translateY(2px);
|
|
83
|
+
transition: opacity 0.08s ease, transform 0.08s ease;
|
|
84
|
+
pointer-events: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.markgraf-embed:hover [data-mg="bar"],
|
|
88
|
+
.markgraf-embed:focus-within [data-mg="bar"] {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transform: translateY(0);
|
|
91
|
+
pointer-events: auto;
|
|
92
|
+
transition: opacity 0.16s ease, transform 0.16s ease;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.markgraf-embed [data-mg="play"] {
|
|
96
|
+
background: transparent;
|
|
97
|
+
color: var(--mg-fg);
|
|
98
|
+
border: 0;
|
|
99
|
+
border-radius: 999px;
|
|
100
|
+
width: 22px;
|
|
101
|
+
height: 22px;
|
|
102
|
+
padding: 0;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
display: inline-flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
transition: background 0.1s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.markgraf-embed [data-mg="play"]:hover {
|
|
111
|
+
background: rgba(0, 0, 0, 0.08);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Heroicons v2 solid play / pause, rendered as a mask so the icon picks up
|
|
115
|
+
currentColor (light-mode black, dark-mode white via the bar override). */
|
|
116
|
+
.markgraf-embed [data-mg="play"]::before {
|
|
117
|
+
content: "";
|
|
118
|
+
display: block;
|
|
119
|
+
width: 14px;
|
|
120
|
+
height: 14px;
|
|
121
|
+
background: currentColor;
|
|
122
|
+
-webkit-mask: var(--mg-icon-play) center / contain no-repeat;
|
|
123
|
+
mask: var(--mg-icon-play) center / contain no-repeat;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.markgraf-embed [data-mg="play"][data-mg-playing="1"]::before {
|
|
127
|
+
-webkit-mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
128
|
+
mask: var(--mg-icon-pause) center / contain no-repeat;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.markgraf-embed {
|
|
132
|
+
--mg-icon-play: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653Z'/></svg>");
|
|
133
|
+
--mg-icon-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.75 5.25a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H7.5a.75.75 0 0 1-.75-.75V5.25Zm7.5 0A.75.75 0 0 1 15 4.5h1.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H15a.75.75 0 0 1-.75-.75V5.25Z'/></svg>");
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.markgraf-embed [data-mg="time"] {
|
|
137
|
+
font-variant-numeric: tabular-nums;
|
|
138
|
+
font-size: 11px;
|
|
139
|
+
color: var(--mg-fg);
|
|
140
|
+
white-space: nowrap;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.markgraf-embed [data-mg="speed"] {
|
|
144
|
+
background: transparent;
|
|
145
|
+
border: 1px solid currentColor;
|
|
146
|
+
border-radius: 4px;
|
|
147
|
+
padding: 1px 4px;
|
|
148
|
+
color: var(--mg-fg);
|
|
149
|
+
font: 11px/1 inherit;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.markgraf-embed [data-mg="speed"] option {
|
|
154
|
+
color: var(--mg-fg);
|
|
155
|
+
background: var(--mg-bg);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.markgraf-embed [data-mg="scrub-wrap"] {
|
|
159
|
+
position: relative;
|
|
160
|
+
flex: 1;
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.markgraf-embed [data-mg="ticks"] {
|
|
166
|
+
position: absolute;
|
|
167
|
+
left: 7px;
|
|
168
|
+
right: 7px;
|
|
169
|
+
top: 50%;
|
|
170
|
+
transform: translateY(-50%);
|
|
171
|
+
height: 18px;
|
|
172
|
+
pointer-events: none;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.markgraf-embed .mg-tick {
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: 50%;
|
|
178
|
+
width: 4px;
|
|
179
|
+
height: 4px;
|
|
180
|
+
margin-left: -2px;
|
|
181
|
+
margin-top: -2px;
|
|
182
|
+
border-radius: 50%;
|
|
183
|
+
background: #fff;
|
|
184
|
+
opacity: 0.7;
|
|
185
|
+
pointer-events: auto;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
transition: transform 0.1s ease, opacity 0.1s ease;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.markgraf-embed .mg-tick:hover {
|
|
191
|
+
opacity: 1;
|
|
192
|
+
transform: scale(1.6);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.markgraf-embed .mg-tick::after {
|
|
196
|
+
content: attr(data-label);
|
|
197
|
+
position: absolute;
|
|
198
|
+
bottom: 100%;
|
|
199
|
+
left: 50%;
|
|
200
|
+
transform: translate(-50%, -4px);
|
|
201
|
+
background: rgba(15, 23, 42, 0.95);
|
|
202
|
+
color: #fff;
|
|
203
|
+
font-size: 11px;
|
|
204
|
+
padding: 2px 6px;
|
|
205
|
+
border-radius: 4px;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
opacity: 0;
|
|
208
|
+
pointer-events: none;
|
|
209
|
+
transition: opacity 0.1s ease;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.markgraf-embed .mg-tick:hover::after {
|
|
213
|
+
opacity: 1;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Custom-styled scrubber. Cross-browser range inputs are notoriously ugly,
|
|
217
|
+
so we strip the native chrome and rebuild from CSS primitives. */
|
|
218
|
+
.markgraf-embed [data-mg="scrub"] {
|
|
219
|
+
-webkit-appearance: none;
|
|
220
|
+
appearance: none;
|
|
221
|
+
width: 100%;
|
|
222
|
+
height: 18px;
|
|
223
|
+
background: transparent;
|
|
224
|
+
cursor: pointer;
|
|
225
|
+
margin: 0;
|
|
226
|
+
position: relative;
|
|
227
|
+
z-index: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-runnable-track {
|
|
231
|
+
height: 4px;
|
|
232
|
+
background: var(--mg-track);
|
|
233
|
+
border-radius: 999px;
|
|
234
|
+
transition: background 0.15s ease;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-runnable-track {
|
|
238
|
+
background: var(--mg-track-hover);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-track {
|
|
242
|
+
height: 4px;
|
|
243
|
+
background: var(--mg-track);
|
|
244
|
+
border-radius: 999px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb {
|
|
248
|
+
-webkit-appearance: none;
|
|
249
|
+
appearance: none;
|
|
250
|
+
width: 14px;
|
|
251
|
+
height: 14px;
|
|
252
|
+
border-radius: 50%;
|
|
253
|
+
background: #111;
|
|
254
|
+
border: 2px solid #fff;
|
|
255
|
+
margin-top: -5px;
|
|
256
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
257
|
+
transition: transform 0.08s ease;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.markgraf-embed [data-mg="scrub"]:hover::-webkit-slider-thumb {
|
|
261
|
+
transform: scale(1.15);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
265
|
+
width: 14px;
|
|
266
|
+
height: 14px;
|
|
267
|
+
border-radius: 50%;
|
|
268
|
+
background: #111;
|
|
269
|
+
border: 2px solid #fff;
|
|
270
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@media (prefers-color-scheme: dark) {
|
|
274
|
+
.markgraf-embed {
|
|
275
|
+
--mg-bg: #111111;
|
|
276
|
+
--mg-fg: #ffffff;
|
|
277
|
+
--mg-track: #ffffff;
|
|
278
|
+
--mg-track-hover: #ffffff;
|
|
279
|
+
}
|
|
280
|
+
.markgraf-embed [data-mg="bar"] {
|
|
281
|
+
background: rgba(17, 17, 17, 0.92);
|
|
282
|
+
}
|
|
283
|
+
.markgraf-embed [data-mg="scrub"]::-webkit-slider-thumb,
|
|
284
|
+
.markgraf-embed [data-mg="scrub"]::-moz-range-thumb {
|
|
285
|
+
background: #fff;
|
|
286
|
+
border-color: #111;
|
|
287
|
+
}
|
|
288
|
+
}
|