@rogieking/figui3 2.31.2 → 2.33.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.
Files changed (7) hide show
  1. package/.cursor/skills/figui3/SKILL.md +1 -1
  2. package/.cursor/skills/propkit/SKILL.md +4 -4
  3. package/README.md +2 -1
  4. package/components.css +33 -12
  5. package/fig.js +21 -6
  6. package/package.json +4 -6
  7. package/propkit.html +0 -1642
package/propkit.html DELETED
@@ -1,1642 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport"
7
- content="width=device-width, initial-scale=1.0">
8
- <title>PropKit — Figma UI3 Property Fields</title>
9
- <link rel="stylesheet"
10
- type="text/css"
11
- href="fig.css">
12
- <link rel="preconnect" href="https://fonts.googleapis.com">
13
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap">
15
- <script src="fig.js"></script>
16
- <script type="importmap">
17
- {
18
- "imports": {
19
- "style-mod": "https://esm.sh/style-mod@4.1.2",
20
- "w3c-keyname": "https://esm.sh/w3c-keyname@2.2.8",
21
- "crelt": "https://esm.sh/crelt@1.0.6",
22
- "@marijn/find-cluster-break": "https://esm.sh/@marijn/find-cluster-break@1.0.2",
23
- "@lezer/": "https://esm.sh/*@lezer/",
24
- "@codemirror/": "https://esm.sh/*@codemirror/",
25
- "codemirror": "https://esm.sh/*codemirror"
26
- }
27
- }
28
- </script>
29
- <style>
30
- * {
31
- box-sizing: border-box;
32
- }
33
-
34
- body {
35
- margin: 0;
36
- height: 100vh;
37
- font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
38
- overflow: hidden;
39
- display: flex;
40
- }
41
-
42
- nav {
43
- width: 220px;
44
- min-width: 220px;
45
- height: 100vh;
46
- overflow-y: auto;
47
- background: var(--figma-color-bg-secondary);
48
- border-right: 1px solid var(--figma-color-border);
49
- padding: 16px 0 0 0;
50
- display: flex;
51
- flex-direction: column;
52
- }
53
-
54
- nav .nav-links {
55
- flex: 1;
56
- overflow-y: auto;
57
- padding: 0 8px;
58
- }
59
-
60
- nav .nav-links h1 {
61
- font-size: 11px;
62
- font-weight: 600;
63
- text-transform: uppercase;
64
- letter-spacing: 0.05em;
65
- color: var(--figma-color-text-secondary);
66
- padding: 8px 12px;
67
- margin: 0 0 4px 0;
68
- }
69
-
70
- nav fig-layer>.fig-layer-row>label {
71
- font-weight: 600;
72
- }
73
-
74
- nav .theme-switch {
75
- padding: 12px 16px;
76
- border-top: 1px solid var(--figma-color-border);
77
- display: flex;
78
- align-items: center;
79
- gap: 8px;
80
- font-size: 13px;
81
- color: var(--figma-color-text-secondary);
82
-
83
- &:has([checked="true"]) {
84
- #theme-dark-btn {
85
- color: var(--figma-color-icon-selected);
86
- }
87
-
88
- #theme-light-btn {
89
- color: var(--figma-color-icon-secondary);
90
- }
91
- }
92
-
93
- &:not(:has([checked="true"])) {
94
- #theme-light-btn {
95
- color: var(--figma-color-icon-selected);
96
- }
97
-
98
- #theme-dark-btn {
99
- color: var(--figma-color-icon-secondary);
100
- }
101
- }
102
- }
103
-
104
- main {
105
- flex: 1;
106
- padding: 24px 32px;
107
- max-width: 600px;
108
- height: 100vh;
109
- overflow-y: auto;
110
- display: flex;
111
- flex-direction: column;
112
- }
113
-
114
- section {
115
- display: none;
116
- }
117
-
118
- section.active {
119
- display: block;
120
- }
121
-
122
- section h2 {
123
- font-size: 18px;
124
- font-weight: 600;
125
- color: var(--figma-color-text);
126
- margin: 0 0 8px 0;
127
- }
128
-
129
- section>p.description {
130
- font-size: 13px;
131
- color: var(--figma-color-text-secondary);
132
- margin: 0 0 24px 0;
133
- }
134
-
135
- .propkit-example {
136
- display: none;
137
- }
138
-
139
- .propkit-example.active {
140
- display: block;
141
- }
142
-
143
- .prop-panel {
144
- width: 240px;
145
- flex-shrink: 0;
146
- display: flex;
147
- flex-direction: column;
148
- gap: 2px;
149
- border: 1px solid var(--figma-color-border);
150
- border-radius: var(--radius-large);
151
- padding: var(--spacer-2) 0;
152
- background: var(--figma-color-bg);
153
- margin-bottom: 0.5rem;
154
- }
155
-
156
- .placeholder-field {
157
- display: flex;
158
- align-items: center;
159
- justify-content: center;
160
- height: 32px;
161
- border: 1px dashed var(--figma-color-border);
162
- border-radius: var(--radius-medium);
163
- font-size: 11px;
164
- color: var(--figma-color-text-tertiary);
165
- }
166
-
167
- code {
168
- font-family: "SF Mono", Monaco, Consolas, monospace;
169
- font-size: 11px;
170
- background: var(--figma-color-bg-secondary);
171
- padding: 2px 6px;
172
- border-radius: 4px;
173
- color: var(--figma-color-text);
174
- }
175
-
176
- .event-dump {
177
- margin-top: var(--spacer-2);
178
- width: 240px;
179
- }
180
-
181
- .event-dump .cm-editor,
182
- .propkit-code-view .cm-editor {
183
- border: 1px solid var(--figma-color-border);
184
- border-radius: var(--radius-large);
185
- overflow: hidden;
186
- }
187
-
188
- .propkit-code-view {
189
- margin-top: 24px;
190
- }
191
-
192
- .propkit-code-view-actions {
193
- display: flex;
194
- gap: var(--spacer-2);
195
- margin-bottom: var(--spacer-2);
196
- }
197
-
198
- .propkit-code-view .cm-editor {
199
- max-width: 100%;
200
- }
201
- </style>
202
- </head>
203
-
204
- <body>
205
- <nav>
206
- <div class="nav-links">
207
- <h1>PropKit</h1>
208
-
209
- <fig-layer data-section="image">
210
- <div class="fig-layer-row"><label>Image</label></div>
211
- <fig-layer data-section="image"
212
- data-example="upload">
213
- <div class="fig-layer-row"><label>Upload</label></div>
214
- </fig-layer>
215
- <fig-layer data-section="image"
216
- data-example="auto-aspect-ratio">
217
- <div class="fig-layer-row"><label>Auto Aspect Ratio</label></div>
218
- </fig-layer>
219
- <fig-layer data-section="image"
220
- data-example="16-9">
221
- <div class="fig-layer-row"><label>16:9</label></div>
222
- </fig-layer>
223
- <fig-layer data-section="image"
224
- data-example="4-3">
225
- <div class="fig-layer-row"><label>4:3</label></div>
226
- </fig-layer>
227
- <fig-layer data-section="image"
228
- data-example="cover">
229
- <div class="fig-layer-row"><label>Cover</label></div>
230
- </fig-layer>
231
- <fig-layer data-section="image"
232
- data-example="contain">
233
- <div class="fig-layer-row"><label>Contain</label></div>
234
- </fig-layer>
235
- </fig-layer>
236
-
237
- <fig-layer data-section="color">
238
- <div class="fig-layer-row"><label>Color</label></div>
239
- <fig-layer data-section="color"
240
- data-example="default">
241
- <div class="fig-layer-row"><label>Default</label></div>
242
- </fig-layer>
243
- <fig-layer data-section="color"
244
- data-example="with-alpha">
245
- <div class="fig-layer-row"><label>With Alpha</label></div>
246
- </fig-layer>
247
- </fig-layer>
248
-
249
- <fig-layer data-section="fill">
250
- <div class="fig-layer-row"><label>Fill</label></div>
251
- <fig-layer data-section="fill"
252
- data-example="solid">
253
- <div class="fig-layer-row"><label>Solid</label></div>
254
- </fig-layer>
255
- <fig-layer data-section="fill"
256
- data-example="linear-gradient">
257
- <div class="fig-layer-row"><label>Linear Gradient</label></div>
258
- </fig-layer>
259
- <fig-layer data-section="fill"
260
- data-example="radial-gradient">
261
- <div class="fig-layer-row"><label>Radial Gradient</label></div>
262
- </fig-layer>
263
- <fig-layer data-section="fill"
264
- data-example="angular-gradient">
265
- <div class="fig-layer-row"><label>Angular Gradient</label></div>
266
- </fig-layer>
267
- <fig-layer data-section="fill"
268
- data-example="image">
269
- <div class="fig-layer-row"><label>Image</label></div>
270
- </fig-layer>
271
- </fig-layer>
272
-
273
- <fig-layer data-section="slider">
274
- <div class="fig-layer-row"><label>Slider</label></div>
275
- <fig-layer data-section="slider"
276
- data-example="default">
277
- <div class="fig-layer-row"><label>Default</label></div>
278
- </fig-layer>
279
- <fig-layer data-section="slider"
280
- data-example="units">
281
- <div class="fig-layer-row"><label>Units</label></div>
282
- </fig-layer>
283
- <fig-layer data-section="slider"
284
- data-example="opacity">
285
- <div class="fig-layer-row"><label>Opacity</label></div>
286
- </fig-layer>
287
- <fig-layer data-section="slider"
288
- data-example="hue">
289
- <div class="fig-layer-row"><label>Hue</label></div>
290
- </fig-layer>
291
- <fig-layer data-section="slider"
292
- data-example="stepper">
293
- <div class="fig-layer-row"><label>Stepper</label></div>
294
- </fig-layer>
295
- <fig-layer data-section="slider"
296
- data-example="delta">
297
- <div class="fig-layer-row"><label>Delta</label></div>
298
- </fig-layer>
299
- <fig-layer data-section="slider"
300
- data-example="transform">
301
- <div class="fig-layer-row"><label>Transform</label></div>
302
- </fig-layer>
303
- </fig-layer>
304
-
305
- <fig-layer data-section="switch">
306
- <div class="fig-layer-row"><label>Switch</label></div>
307
- <fig-layer data-section="switch"
308
- data-example="default">
309
- <div class="fig-layer-row"><label>Default</label></div>
310
- </fig-layer>
311
- </fig-layer>
312
-
313
- <fig-layer data-section="dropdown">
314
- <div class="fig-layer-row"><label>Dropdown</label></div>
315
- <fig-layer data-section="dropdown"
316
- data-example="default">
317
- <div class="fig-layer-row"><label>Default</label></div>
318
- </fig-layer>
319
- </fig-layer>
320
-
321
- <fig-layer data-section="segment">
322
- <div class="fig-layer-row"><label>Segment</label></div>
323
- <fig-layer data-section="segment"
324
- data-example="default">
325
- <div class="fig-layer-row"><label>Default</label></div>
326
- </fig-layer>
327
- </fig-layer>
328
-
329
- <fig-layer data-section="dial">
330
- <div class="fig-layer-row"><label>Dial</label></div>
331
- <fig-layer data-section="dial"
332
- data-example="default">
333
- <div class="fig-layer-row"><label>Default</label></div>
334
- </fig-layer>
335
- </fig-layer>
336
-
337
- <fig-layer data-section="easing">
338
- <div class="fig-layer-row"><label>Easing Curve</label></div>
339
- <fig-layer data-section="easing"
340
- data-example="default">
341
- <div class="fig-layer-row"><label>Default</label></div>
342
- </fig-layer>
343
- <fig-layer data-section="easing"
344
- data-example="no-dropdown">
345
- <div class="fig-layer-row"><label>No Dropdown</label></div>
346
- </fig-layer>
347
- <fig-layer data-section="easing"
348
- data-example="16-9-horizontal">
349
- <div class="fig-layer-row"><label>16:9 Horizontal</label></div>
350
- </fig-layer>
351
- <fig-layer data-section="easing"
352
- data-example="no-label">
353
- <div class="fig-layer-row"><label>No Label</label></div>
354
- </fig-layer>
355
- </fig-layer>
356
-
357
- <fig-layer data-section="3d-rotate">
358
- <div class="fig-layer-row"><label>3D Rotate</label></div>
359
- <fig-layer data-section="3d-rotate"
360
- data-example="default">
361
- <div class="fig-layer-row"><label>Default</label></div>
362
- </fig-layer>
363
- <fig-layer data-section="3d-rotate"
364
- data-example="16-9-horizontal">
365
- <div class="fig-layer-row"><label>16:9 Horizontal</label></div>
366
- </fig-layer>
367
- <fig-layer data-section="3d-rotate"
368
- data-example="4-3">
369
- <div class="fig-layer-row"><label>4:3</label></div>
370
- </fig-layer>
371
- <fig-layer data-section="3d-rotate"
372
- data-example="no-label">
373
- <div class="fig-layer-row"><label>No Label</label></div>
374
- </fig-layer>
375
- <fig-layer data-section="3d-rotate"
376
- data-example="fields-all-axes">
377
- <div class="fig-layer-row"><label>Fields (All Axes)</label></div>
378
- </fig-layer>
379
- <fig-layer data-section="3d-rotate"
380
- data-example="fields-y-only">
381
- <div class="fig-layer-row"><label>Fields (Y Only)</label></div>
382
- </fig-layer>
383
- <fig-layer data-section="3d-rotate"
384
- data-example="fields-x-y">
385
- <div class="fig-layer-row"><label>Fields (X &amp; Y)</label></div>
386
- </fig-layer>
387
- <fig-layer data-section="3d-rotate"
388
- data-example="fields-16-9-preset">
389
- <div class="fig-layer-row"><label>Fields + 16:9 + Preset</label></div>
390
- </fig-layer>
391
- <fig-layer data-section="3d-rotate"
392
- data-example="fields-no-label">
393
- <div class="fig-layer-row"><label>Fields, No Label</label></div>
394
- </fig-layer>
395
- </fig-layer>
396
-
397
- <fig-layer data-section="angle">
398
- <div class="fig-layer-row"><label>Angle</label></div>
399
- <fig-layer data-section="angle"
400
- data-example="default">
401
- <div class="fig-layer-row"><label>Default</label></div>
402
- </fig-layer>
403
- </fig-layer>
404
-
405
- <fig-layer data-section="combined">
406
- <div class="fig-layer-row"><label>Combined Panel</label></div>
407
- <fig-layer data-section="combined"
408
- data-example="default">
409
- <div class="fig-layer-row"><label>Default</label></div>
410
- </fig-layer>
411
- </fig-layer>
412
- </div>
413
- <div class="theme-switch">
414
- <fig-button id="theme-light-btn"
415
- variant="ghost"
416
- icon>
417
- <svg width="24"
418
- height="24"
419
- viewBox="0 0 24 24"
420
- fill="none">
421
- <path fill-rule="evenodd"
422
- clip-rule="evenodd"
423
- d="M12 5C12.2761 5 12.5 5.22386 12.5 5.5V6.5C12.5 6.77614 12.2761 7 12 7C11.7239 7 11.5 6.77614 11.5 6.5V5.5C11.5 5.22386 11.7239 5 12 5ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15ZM7.75687 7.05026C7.56161 6.85499 7.24503 6.85499 7.04977 7.05026C6.8545 7.24552 6.8545 7.5621 7.04977 7.75736L7.75687 8.46447C7.95214 8.65973 8.26872 8.65973 8.46398 8.46447C8.65924 8.26921 8.65924 7.95262 8.46398 7.75736L7.75687 7.05026ZM19 12C19 12.2761 18.7761 12.5 18.5 12.5H17.5C17.2239 12.5 17 12.2761 17 12C17 11.7239 17.2239 11.5 17.5 11.5H18.5C18.7761 11.5 19 11.7239 19 12ZM16.9502 7.75736C17.1455 7.5621 17.1455 7.24552 16.9502 7.05026C16.755 6.85499 16.4384 6.85499 16.2431 7.05026L15.536 7.75736C15.3408 7.95262 15.3408 8.26921 15.536 8.46447C15.7313 8.65973 16.0479 8.65973 16.2431 8.46447L16.9502 7.75736ZM12 17C12.2761 17 12.5 17.2239 12.5 17.5V18.5C12.5 18.7761 12.2761 19 12 19C11.7239 19 11.5 18.7761 11.5 18.5V17.5C11.5 17.2239 11.7239 17 12 17ZM16.2422 15.5356C16.047 15.3403 15.7304 15.3403 15.5351 15.5356C15.3399 15.7309 15.3399 16.0475 15.5351 16.2427L16.2422 16.9498C16.4375 17.1451 16.7541 17.1451 16.9493 16.9498C17.1446 16.7546 17.1446 16.438 16.9493 16.2427L16.2422 15.5356ZM7 12C7 12.2761 6.77614 12.5 6.5 12.5H5.5C5.22386 12.5 5 12.2761 5 12C5 11.7239 5.22386 11.5 5.5 11.5H6.5C6.77614 11.5 7 11.7239 7 12ZM8.46488 16.2427C8.66014 16.0475 8.66014 15.7309 8.46488 15.5356C8.26962 15.3403 7.95304 15.3403 7.75777 15.5356L7.05067 16.2427C6.85541 16.438 6.85541 16.7546 7.05067 16.9498C7.24593 17.1451 7.56251 17.1451 7.75777 16.9498L8.46488 16.2427Z"
424
- fill="currentColor" />
425
- </svg>
426
- </fig-button>
427
- <fig-switch id="theme-toggle"></fig-switch>
428
- <fig-button id="theme-dark-btn"
429
- variant="ghost"
430
- icon>
431
- <svg width="24"
432
- height="24"
433
- viewBox="0 0 24 24"
434
- fill="none">
435
- <path fill-rule="evenodd"
436
- clip-rule="evenodd"
437
- d="M15 14.9999C15.3647 14.9999 15.7224 14.9672 16.0703 14.9045C15.1624 16.1743 13.677 16.9997 12 16.9997C9.23858 16.9997 7 14.7611 7 11.9997C7 10.3226 7.82546 8.8371 9.09542 7.92923C9.03267 8.27722 9 8.63509 9 8.99986C9 12.3136 11.6863 14.9999 15 14.9999ZM17.3039 14.8075C17.6193 14.2129 16.8933 13.678 16.2412 13.8446C15.8443 13.946 15.4285 13.9999 15 13.9999C12.2386 13.9999 10 11.7613 10 8.99986C10 8.57132 10.0539 8.15537 10.1553 7.75842C10.3219 7.10631 9.78711 6.38032 9.19252 6.6957C7.29348 7.70298 6 9.70029 6 11.9997C6 15.3134 8.68629 17.9997 12 17.9997C14.2993 17.9997 16.2965 16.7064 17.3039 14.8075ZM16 7.49993C16 7.22379 15.7761 6.99993 15.5 6.99993C15.2239 6.99993 15 7.22379 15 7.49993V7.99993H14.5C14.2239 7.99993 14 8.22379 14 8.49993C14 8.77607 14.2239 8.99993 14.5 8.99993H15V9.49993C15 9.77607 15.2239 9.99993 15.5 9.99993C15.7761 9.99993 16 9.77607 16 9.49993V8.99993H16.5C16.7761 8.99993 17 8.77607 17 8.49993C17 8.22379 16.7761 7.99993 16.5 7.99993H16V7.49993Z"
438
- fill="currentColor" />
439
- </svg>
440
- </fig-button>
441
- </div>
442
- </nav>
443
-
444
- <main>
445
- <!-- Image -->
446
- <section id="image">
447
- <h2>Image</h2>
448
- <p class="description">An image upload field for selecting or previewing image assets.</p>
449
-
450
- <div class="propkit-example"
451
- data-example="upload">
452
- <hstack>
453
- <div class="prop-panel">
454
- <fig-field direction="horizontal">
455
- <label>Image</label>
456
- <fig-image full="true"
457
- upload="true"
458
- label="Upload"
459
- size="auto"></fig-image>
460
- </fig-field>
461
- </div>
462
- <div class="prop-panel">
463
- <fig-field direction="horizontal">
464
- <label>Image</label>
465
- <fig-image full="true"
466
- upload="true"
467
- src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=260&h=400&fit=crop"
468
- size="auto"></fig-image>
469
- </fig-field>
470
- </div>
471
- </hstack>
472
- </div>
473
-
474
- <div class="propkit-example"
475
- data-example="auto-aspect-ratio">
476
- <div class="prop-panel">
477
- <fig-field direction="horizontal">
478
- <label>Image</label>
479
- <fig-image full="true"
480
- src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=260&h=400&fit=crop"
481
- aspect-ratio="auto"></fig-image>
482
- </fig-field>
483
- </div>
484
- </div>
485
-
486
- <div class="propkit-example"
487
- data-example="16-9">
488
- <div class="prop-panel">
489
- <fig-field direction="horizontal">
490
- <label>Image</label>
491
- <fig-image full="true"
492
- src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=480&h=270&fit=crop"
493
- aspect-ratio="16/9"></fig-image>
494
- </fig-field>
495
- </div>
496
- </div>
497
-
498
- <div class="propkit-example"
499
- data-example="4-3">
500
- <div class="prop-panel">
501
- <fig-field direction="horizontal">
502
- <label>Image</label>
503
- <fig-image full="true"
504
- src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=300&fit=crop"
505
- aspect-ratio="4/3"></fig-image>
506
- </fig-field>
507
- </div>
508
- </div>
509
-
510
- <div class="propkit-example"
511
- data-example="cover">
512
- <hstack>
513
- <div class="prop-panel">
514
- <fig-field direction="horizontal">
515
- <label>Portrait</label>
516
- <fig-image full="true"
517
- src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=260&h=400&fit=crop"
518
- fit="cover"
519
- size="auto"
520
- aspect-ratio="4/3"></fig-image>
521
- </fig-field>
522
- </div>
523
- <div class="prop-panel">
524
- <fig-field direction="horizontal">
525
- <label>Landscape</label>
526
- <fig-image full="true"
527
- src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=480&h=270&fit=crop"
528
- fit="cover"
529
- size="auto"
530
- aspect-ratio="4/3"></fig-image>
531
- </fig-field>
532
- </div>
533
- </hstack>
534
- </div>
535
-
536
- <div class="propkit-example"
537
- data-example="contain">
538
- <hstack>
539
- <div class="prop-panel">
540
- <fig-field direction="horizontal">
541
- <label>Portrait</label>
542
- <fig-image full="true"
543
- src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=260&h=400&fit=crop"
544
- fit="contain"
545
- size="auto"
546
- aspect-ratio="4/3"></fig-image>
547
- </fig-field>
548
- </div>
549
- <div class="prop-panel">
550
- <fig-field direction="horizontal">
551
- <label>Landscape</label>
552
- <fig-image full="true"
553
- src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=480&h=270&fit=crop"
554
- fit="contain"
555
- size="auto"
556
- aspect-ratio="4/3"></fig-image>
557
- </fig-field>
558
- </div>
559
- </hstack>
560
- </div>
561
- </section>
562
-
563
- <!-- Color -->
564
- <section id="color">
565
- <h2>Color</h2>
566
- <p class="description">A solid color picker field with hex input and optional alpha.</p>
567
-
568
- <div class="propkit-example"
569
- data-example="default">
570
- <div class="prop-panel">
571
- <fig-field direction="horizontal">
572
- <label>Color</label>
573
- <fig-input-color value="#0D99FF"
574
- text="true"
575
- picker="figma"
576
- picker-anchor="self"
577
- full></fig-input-color>
578
- </fig-field>
579
- </div>
580
- </div>
581
-
582
- <div class="propkit-example"
583
- data-example="with-alpha">
584
- <div class="prop-panel">
585
- <fig-field direction="horizontal">
586
- <label>Color</label>
587
- <fig-input-color value="#0D99FF80"
588
- text="true"
589
- alpha="true"
590
- picker="figma"
591
- picker-anchor="self"
592
- full></fig-input-color>
593
- </fig-field>
594
- </div>
595
- </div>
596
- </section>
597
-
598
- <!-- Fill -->
599
- <section id="fill">
600
- <h2>Fill</h2>
601
- <p class="description">A multi-mode fill field supporting solid, gradient, and image fills.</p>
602
-
603
- <div class="propkit-example"
604
- data-example="solid">
605
- <hstack>
606
- <div class="prop-panel">
607
- <fig-field direction="horizontal">
608
- <label>Fill</label>
609
- <fig-input-fill value='{"type":"solid","color":"#667eea"}'
610
- experimental="modern"></fig-input-fill>
611
- </fig-field>
612
- </div>
613
- <div class="prop-panel">
614
- <fig-field direction="horizontal">
615
- <label>Fill</label>
616
- <fig-input-fill value='{"type":"solid","color":"#667eea"}'
617
- alpha="false"
618
- experimental="modern"></fig-input-fill>
619
- </fig-field>
620
- </div>
621
- </hstack>
622
- </div>
623
-
624
- <div class="propkit-example"
625
- data-example="linear-gradient">
626
- <hstack>
627
- <div class="prop-panel">
628
- <fig-field direction="horizontal">
629
- <label>Fill</label>
630
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":135,"stops":[{"position":0,"color":"#667eea","opacity":100},{"position":100,"color":"#764ba2","opacity":100}]}}'
631
- experimental="modern"></fig-input-fill>
632
- </fig-field>
633
- </div>
634
- <div class="prop-panel">
635
- <fig-field direction="horizontal">
636
- <label>Fill</label>
637
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":90,"stops":[{"position":0,"color":"#f093fb","opacity":100},{"position":50,"color":"#f5576c","opacity":100},{"position":100,"color":"#ffd868","opacity":100}]}}'
638
- experimental="modern"></fig-input-fill>
639
- </fig-field>
640
- </div>
641
- </hstack>
642
- </div>
643
-
644
- <div class="propkit-example"
645
- data-example="radial-gradient">
646
- <hstack>
647
- <div class="prop-panel">
648
- <fig-field direction="horizontal">
649
- <label>Fill</label>
650
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"radial","centerX":50,"centerY":50,"stops":[{"position":0,"color":"#ff6b6b","opacity":100},{"position":100,"color":"#4ecdc4","opacity":100}]}}'
651
- experimental="modern"></fig-input-fill>
652
- </fig-field>
653
- </div>
654
- <div class="prop-panel">
655
- <fig-field direction="horizontal">
656
- <label>Fill</label>
657
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"radial","centerX":50,"centerY":50,"stops":[{"position":0,"color":"#ffffff","opacity":100},{"position":100,"color":"#0D99FF","opacity":100}]}}'
658
- experimental="modern"></fig-input-fill>
659
- </fig-field>
660
- </div>
661
- </hstack>
662
- </div>
663
-
664
- <div class="propkit-example"
665
- data-example="angular-gradient">
666
- <hstack>
667
- <div class="prop-panel">
668
- <fig-field direction="horizontal">
669
- <label>Fill</label>
670
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"angular","stops":[{"position":0,"color":"#ff0000","opacity":100},{"position":33,"color":"#00ff00","opacity":100},{"position":66,"color":"#0000ff","opacity":100},{"position":100,"color":"#ff0000","opacity":100}]}}'
671
- experimental="modern"></fig-input-fill>
672
- </fig-field>
673
- </div>
674
- <div class="prop-panel">
675
- <fig-field direction="horizontal">
676
- <label>Fill</label>
677
- <fig-input-fill value='{"type":"gradient","gradient":{"type":"angular","stops":[{"position":0,"color":"#f7971e","opacity":100},{"position":100,"color":"#ffd200","opacity":100}]}}'
678
- experimental="modern"></fig-input-fill>
679
- </fig-field>
680
- </div>
681
- </hstack>
682
- </div>
683
-
684
- <div class="propkit-example"
685
- data-example="image">
686
- <hstack>
687
- <div class="prop-panel">
688
- <fig-field direction="horizontal">
689
- <label>Fill</label>
690
- <fig-input-fill value='{"type":"image","image":{"url":"https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=200&h=200&fit=crop","scaleMode":"fill","scale":50,"opacity":1}}'
691
- experimental="modern"></fig-input-fill>
692
- </fig-field>
693
- </div>
694
- <div class="prop-panel">
695
- <fig-field direction="horizontal">
696
- <label>Fill</label>
697
- <fig-input-fill value='{"type":"image","image":{"url":"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop","scaleMode":"fill","scale":50,"opacity":0.5}}'
698
- experimental="modern"></fig-input-fill>
699
- </fig-field>
700
- </div>
701
- </hstack>
702
- </div>
703
- </section>
704
-
705
- <!-- Slider -->
706
- <section id="slider">
707
- <h2>Slider</h2>
708
- <p class="description">A range slider with optional text input for precise numeric values.</p>
709
-
710
- <div class="propkit-example"
711
- data-example="default">
712
- <hstack>
713
- <div class="prop-panel">
714
- <fig-field direction="horizontal">
715
- <label>Amount</label>
716
- <fig-slider value="50"
717
- min="0"
718
- max="100"
719
- text="true"
720
- full></fig-slider>
721
- </fig-field>
722
- </div>
723
- <div class="prop-panel">
724
- <fig-field direction="horizontal">
725
- <label>Amount</label>
726
- <fig-slider value="50"
727
- min="0"
728
- max="100"
729
- full></fig-slider>
730
- </fig-field>
731
- </div>
732
- </hstack>
733
- </div>
734
-
735
- <div class="propkit-example"
736
- data-example="units">
737
- <hstack>
738
- <div class="prop-panel">
739
- <fig-field direction="horizontal">
740
- <label>Opacity</label>
741
- <fig-slider value="75"
742
- min="0"
743
- max="100"
744
- text="true"
745
- units="%"
746
- full></fig-slider>
747
- </fig-field>
748
- </div>
749
- <div class="prop-panel">
750
- <fig-field direction="horizontal">
751
- <label>Opacity</label>
752
- <fig-slider value="75"
753
- min="0"
754
- max="100"
755
- units="%"
756
- full></fig-slider>
757
- </fig-field>
758
- </div>
759
- </hstack>
760
- </div>
761
-
762
- <div class="propkit-example"
763
- data-example="opacity">
764
- <hstack>
765
- <div class="prop-panel">
766
- <fig-field direction="horizontal">
767
- <label>Opacity</label>
768
- <fig-slider type="opacity"
769
- value="0.75"
770
- color="#ff0000"
771
- units="%"
772
- text="true"
773
- full></fig-slider>
774
- </fig-field>
775
- </div>
776
- <div class="prop-panel">
777
- <fig-field direction="horizontal">
778
- <label>Opacity</label>
779
- <fig-slider type="opacity"
780
- value="0.75"
781
- color="#ff0000"
782
- units="%"
783
- full></fig-slider>
784
- </fig-field>
785
- </div>
786
- </hstack>
787
- </div>
788
-
789
- <div class="propkit-example"
790
- data-example="hue">
791
- <hstack>
792
- <div class="prop-panel">
793
- <fig-field direction="horizontal">
794
- <label>Hue</label>
795
- <fig-slider type="hue"
796
- value="180"
797
- text="true"
798
- full></fig-slider>
799
- </fig-field>
800
- </div>
801
- <div class="prop-panel">
802
- <fig-field direction="horizontal">
803
- <label>Hue</label>
804
- <fig-slider type="hue"
805
- value="180"
806
- full></fig-slider>
807
- </fig-field>
808
- </div>
809
- </hstack>
810
- </div>
811
-
812
- <div class="propkit-example"
813
- data-example="stepper">
814
- <hstack>
815
- <div class="prop-panel">
816
- <fig-field direction="horizontal">
817
- <label>Steps</label>
818
- <fig-slider type="stepper"
819
- value="50"
820
- step="25"
821
- text="true"
822
- full>
823
- <datalist>
824
- <option value="0"></option>
825
- <option value="25"></option>
826
- <option value="50"></option>
827
- <option value="75"></option>
828
- <option value="100"></option>
829
- </datalist>
830
- </fig-slider>
831
- </fig-field>
832
- </div>
833
- <div class="prop-panel">
834
- <fig-field direction="horizontal">
835
- <label>Steps</label>
836
- <fig-slider type="stepper"
837
- value="50"
838
- step="25"
839
- full>
840
- <datalist>
841
- <option value="0"></option>
842
- <option value="25"></option>
843
- <option value="50"></option>
844
- <option value="75"></option>
845
- <option value="100"></option>
846
- </datalist>
847
- </fig-slider>
848
- </fig-field>
849
- </div>
850
- </hstack>
851
- </div>
852
-
853
- <div class="propkit-example"
854
- data-example="delta">
855
- <hstack>
856
- <div class="prop-panel">
857
- <fig-field direction="horizontal">
858
- <label>Offset</label>
859
- <fig-slider type="delta"
860
- value="0"
861
- default="0"
862
- step="0.25"
863
- min="-5"
864
- max="5"
865
- text="true"
866
- full>
867
- <datalist>
868
- <option value="0"></option>
869
- </datalist>
870
- </fig-slider>
871
- </fig-field>
872
- </div>
873
- <div class="prop-panel">
874
- <fig-field direction="horizontal">
875
- <label>Offset</label>
876
- <fig-slider type="delta"
877
- value="0"
878
- default="0"
879
- step="0.25"
880
- min="-5"
881
- max="5"
882
- full>
883
- <datalist>
884
- <option value="0"></option>
885
- </datalist>
886
- </fig-slider>
887
- </fig-field>
888
- </div>
889
- </hstack>
890
- </div>
891
-
892
- <div class="propkit-example"
893
- data-example="transform">
894
- <hstack>
895
- <div class="prop-panel">
896
- <fig-field direction="horizontal">
897
- <label>Scale</label>
898
- <fig-slider min="0"
899
- max="1"
900
- value="0.5"
901
- step="0.01"
902
- transform="100"
903
- text="true"
904
- units="%"
905
- full></fig-slider>
906
- </fig-field>
907
- </div>
908
- <div class="prop-panel">
909
- <fig-field direction="horizontal">
910
- <label>Scale</label>
911
- <fig-slider min="0"
912
- max="1"
913
- value="0.5"
914
- step="0.01"
915
- transform="100"
916
- units="%"
917
- full></fig-slider>
918
- </fig-field>
919
- </div>
920
- </hstack>
921
- </div>
922
- </section>
923
-
924
- <!-- Switch -->
925
- <section id="switch">
926
- <h2>Switch</h2>
927
- <p class="description">A toggle switch for boolean on/off properties.</p>
928
-
929
- <div class="propkit-example"
930
- data-example="default">
931
- <div class="prop-panel">
932
- <fig-field direction="horizontal">
933
- <label>Visible</label>
934
- <fig-switch checked="true"></fig-switch>
935
- </fig-field>
936
- </div>
937
- </div>
938
- </section>
939
-
940
- <!-- Dropdown -->
941
- <section id="dropdown">
942
- <h2>Dropdown</h2>
943
- <p class="description">A dropdown select field for choosing from a set of options.</p>
944
-
945
- <div class="propkit-example"
946
- data-example="default">
947
- <div class="prop-panel">
948
- <fig-field direction="horizontal">
949
- <label>Blend Mode</label>
950
- <fig-dropdown full
951
- experimental="modern">
952
- <option selected>Normal</option>
953
- <option>Multiply</option>
954
- <option>Screen</option>
955
- <option>Overlay</option>
956
- <option>Darken</option>
957
- <option>Lighten</option>
958
- </fig-dropdown>
959
- </fig-field>
960
- </div>
961
- </div>
962
- </section>
963
-
964
- <!-- Segment -->
965
- <section id="segment">
966
- <h2>Segment</h2>
967
- <p class="description">A segmented control for mutually exclusive choices.</p>
968
-
969
- <div class="propkit-example"
970
- data-example="default">
971
- <div class="prop-panel">
972
- <fig-field direction="horizontal">
973
- <label>Align</label>
974
- <fig-segmented-control full>
975
- <fig-segment value="left"
976
- selected>Left</fig-segment>
977
- <fig-segment value="center">Center</fig-segment>
978
- <fig-segment value="right">Right</fig-segment>
979
- </fig-segmented-control>
980
- </fig-field>
981
- </div>
982
- </div>
983
- </section>
984
-
985
- <!-- Dial -->
986
- <section id="dial">
987
- <h2>Dial</h2>
988
- <p class="description">A rotary dial for continuous value input. <em>Not yet built.</em></p>
989
-
990
- <div class="propkit-example"
991
- data-example="default">
992
- <div class="prop-panel">
993
- <fig-field direction="horizontal">
994
- <label>Amount</label>
995
- <div class="placeholder-field">fig-input-dial</div>
996
- </fig-field>
997
- </div>
998
- </div>
999
- </section>
1000
-
1001
- <!-- Easing Curve -->
1002
- <section id="easing">
1003
- <h2>Easing Curve</h2>
1004
- <p class="description">A bezier curve editor for animation easing with preset dropdown.</p>
1005
-
1006
- <div class="propkit-example"
1007
- data-example="default">
1008
- <div class="prop-panel">
1009
- <fig-field direction="horizontal">
1010
- <label>Easing</label>
1011
- <fig-easing-curve value="0.42, 0, 0.58, 1"
1012
- id="easing-curve-observed"
1013
- dropdown="true"></fig-easing-curve>
1014
- </fig-field>
1015
- </div>
1016
- <div class="event-dump" id="easing-curve-dump"></div>
1017
- </div>
1018
-
1019
- <div class="propkit-example"
1020
- data-example="no-dropdown">
1021
- <div class="prop-panel">
1022
- <fig-field direction="horizontal">
1023
- <label>Easing</label>
1024
- <fig-easing-curve value="0.25, 0.1, 0.25, 1"></fig-easing-curve>
1025
- </fig-field>
1026
- </div>
1027
- </div>
1028
-
1029
- <div class="propkit-example"
1030
- data-example="16-9-horizontal">
1031
- <div class="prop-panel">
1032
- <fig-field direction="horizontal">
1033
- <label>Easing</label>
1034
- <fig-easing-curve value="0.25, 0.1, 0.25, 1"
1035
- aspect-ratio="16/9"></fig-easing-curve>
1036
- </fig-field>
1037
- </div>
1038
- </div>
1039
-
1040
- <div class="propkit-example"
1041
- data-example="no-label">
1042
- <div class="prop-panel">
1043
- <fig-field direction="horizontal">
1044
- <fig-easing-curve value="spring(250, 8, 1)"
1045
- dropdown="true"></fig-easing-curve>
1046
- </fig-field>
1047
- </div>
1048
- </div>
1049
- </section>
1050
-
1051
- <!-- 3D Rotate -->
1052
- <section id="3d-rotate">
1053
- <h2>3D Rotate</h2>
1054
- <p class="description">An interactive 3D rotation control with a draggable cube preview.</p>
1055
-
1056
- <div class="propkit-example"
1057
- data-example="default">
1058
- <div class="prop-panel">
1059
- <fig-field direction="horizontal">
1060
- <label>Rotation</label>
1061
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1062
- id="3d-rotate-observed"></fig-3d-rotate>
1063
- </fig-field>
1064
- </div>
1065
- <div class="event-dump" id="3d-rotate-dump"></div>
1066
- </div>
1067
-
1068
- <div class="propkit-example"
1069
- data-example="16-9-horizontal">
1070
- <div class="prop-panel">
1071
- <fig-field direction="horizontal">
1072
- <label>Rotation</label>
1073
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1074
- aspect-ratio="16/9"></fig-3d-rotate>
1075
- </fig-field>
1076
- </div>
1077
- </div>
1078
-
1079
- <div class="propkit-example"
1080
- data-example="4-3">
1081
- <div class="prop-panel">
1082
- <fig-field direction="horizontal">
1083
- <label>Rotation</label>
1084
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1085
- aspect-ratio="4/3"></fig-3d-rotate>
1086
- </fig-field>
1087
- </div>
1088
- </div>
1089
-
1090
- <div class="propkit-example"
1091
- data-example="no-label">
1092
- <div class="prop-panel">
1093
- <fig-field direction="horizontal">
1094
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1095
- aspect-ratio="16/9"></fig-3d-rotate>
1096
- </fig-field>
1097
- </div>
1098
- </div>
1099
-
1100
- <div class="propkit-example"
1101
- data-example="fields-all-axes">
1102
- <div class="prop-panel">
1103
- <fig-field direction="horizontal">
1104
- <label>Rotation</label>
1105
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1106
- fields="rotateX,rotateY,rotateZ"></fig-3d-rotate>
1107
- </fig-field>
1108
- </div>
1109
- </div>
1110
-
1111
- <div class="propkit-example"
1112
- data-example="fields-y-only">
1113
- <div class="prop-panel">
1114
- <fig-field direction="horizontal">
1115
- <label>Rotation</label>
1116
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1117
- fields="rotateY"></fig-3d-rotate>
1118
- </fig-field>
1119
- </div>
1120
- </div>
1121
-
1122
- <div class="propkit-example"
1123
- data-example="fields-x-y">
1124
- <div class="prop-panel">
1125
- <fig-field direction="horizontal">
1126
- <label>Rotation</label>
1127
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1128
- fields="rotateX,rotateY"></fig-3d-rotate>
1129
- </fig-field>
1130
- </div>
1131
- </div>
1132
-
1133
- <div class="propkit-example"
1134
- data-example="fields-16-9-preset">
1135
- <div class="prop-panel">
1136
- <fig-field direction="horizontal">
1137
- <label>Rotation</label>
1138
- <fig-3d-rotate value="rotateX(25deg) rotateY(-35deg) rotateZ(10deg)"
1139
- fields="rotateX,rotateY,rotateZ"
1140
- aspect-ratio="16/9"></fig-3d-rotate>
1141
- </fig-field>
1142
- </div>
1143
- </div>
1144
-
1145
- <div class="propkit-example"
1146
- data-example="fields-no-label">
1147
- <div class="prop-panel">
1148
- <fig-field direction="horizontal">
1149
- <fig-3d-rotate value="rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
1150
- fields="rotateX,rotateY,rotateZ"></fig-3d-rotate>
1151
- </fig-field>
1152
- </div>
1153
- </div>
1154
- </section>
1155
-
1156
- <!-- Angle -->
1157
- <section id="angle">
1158
- <h2>Angle</h2>
1159
- <p class="description">An angle input with a visual dial and numeric text field.</p>
1160
-
1161
- <div class="propkit-example"
1162
- data-example="default">
1163
- <div class="prop-panel">
1164
- <fig-field direction="horizontal">
1165
- <label>Rotation</label>
1166
- <fig-input-angle value="45"
1167
- text="true"
1168
- full></fig-input-angle>
1169
- </fig-field>
1170
- </div>
1171
- </div>
1172
- </section>
1173
-
1174
- <!-- Combined Panel -->
1175
- <section id="combined">
1176
- <h2>Combined Panel</h2>
1177
- <p class="description">A realistic property panel combining multiple field types.</p>
1178
-
1179
- <div class="propkit-example"
1180
- data-example="default">
1181
- <div class="prop-panel">
1182
- <fig-field direction="horizontal">
1183
- <label>Fill</label>
1184
- <fig-input-fill value='{"type":"solid","color":"#667eea"}'
1185
- experimental="modern"></fig-input-fill>
1186
- </fig-field>
1187
- <fig-field direction="horizontal">
1188
- <label>Opacity</label>
1189
- <fig-slider value="100"
1190
- min="0"
1191
- max="100"
1192
- text="true"
1193
- full></fig-slider>
1194
- </fig-field>
1195
- <fig-field direction="horizontal">
1196
- <label>Blend</label>
1197
- <fig-dropdown full
1198
- experimental="modern">
1199
- <option selected>Normal</option>
1200
- <option>Multiply</option>
1201
- <option>Screen</option>
1202
- <option>Overlay</option>
1203
- </fig-dropdown>
1204
- </fig-field>
1205
- <fig-field direction="horizontal">
1206
- <label>Visible</label>
1207
- <fig-switch checked="true"></fig-switch>
1208
- </fig-field>
1209
- <fig-field direction="horizontal">
1210
- <label>Rotation</label>
1211
- <fig-input-angle value="0"
1212
- text="true"
1213
- full></fig-input-angle>
1214
- </fig-field>
1215
- <fig-field direction="horizontal">
1216
- <label>Align</label>
1217
- <fig-segmented-control full>
1218
- <fig-segment value="left">Left</fig-segment>
1219
- <fig-segment value="center"
1220
- selected>Center</fig-segment>
1221
- <fig-segment value="right">Right</fig-segment>
1222
- </fig-segmented-control>
1223
- </fig-field>
1224
- <fig-field direction="horizontal">
1225
- <label>Image</label>
1226
- <fig-image full="true"
1227
- upload="true"
1228
- label="Upload"
1229
- size="medium"></fig-image>
1230
- </fig-field>
1231
- <fig-field direction="horizontal">
1232
- <label>Tint</label>
1233
- <fig-input-color value="#FFFFFF"
1234
- text="true"
1235
- picker="figma"
1236
- picker-anchor="self"
1237
- full></fig-input-color>
1238
- </fig-field>
1239
- </div>
1240
- </div>
1241
- </section>
1242
-
1243
- <div class="propkit-code-view">
1244
- <div class="propkit-code-view-actions">
1245
- <fig-button variant="secondary"
1246
- class="copy-code-btn">Copy</fig-button>
1247
- <fig-button variant="secondary"
1248
- class="copy-prompt-btn">Copy prompt</fig-button>
1249
- </div>
1250
- <div id="propkit-code"></div>
1251
- </div>
1252
- </main>
1253
-
1254
- <dialog is="fig-toast"
1255
- id="prompt-copy-toast"
1256
- duration="1500"
1257
- theme="dark">Copied</dialog>
1258
-
1259
- <script type="module">
1260
- import { minimalSetup } from "codemirror";
1261
- import { EditorView, highlightActiveLine, highlightSpecialChars, drawSelection } from "@codemirror/view";
1262
- import { EditorState } from "@codemirror/state";
1263
- import { html as htmlLang } from "@codemirror/lang-html";
1264
- import { json as jsonLang } from "@codemirror/lang-json";
1265
- import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
1266
- import { closeBrackets } from "@codemirror/autocomplete";
1267
- import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
1268
- import { keymap } from "@codemirror/view";
1269
- import { tags } from "@lezer/highlight";
1270
-
1271
- // --- CodeMirror setup ---
1272
- const figmaTheme = EditorView.theme({
1273
- '&': {
1274
- fontSize: '11px',
1275
- backgroundColor: 'var(--figma-color-bg-secondary)',
1276
- color: 'var(--figma-color-text)',
1277
- },
1278
- '.cm-content': {
1279
- fontFamily: '"IBM Plex Mono", monospace',
1280
- fontWeight: '400',
1281
- padding: '8px 0',
1282
- caretColor: 'var(--figma-color-bg-brand)',
1283
- },
1284
- '&.cm-focused .cm-cursor': {
1285
- borderLeftColor: 'var(--figma-color-bg-brand)',
1286
- },
1287
- '.cm-selectionBackground': {
1288
- backgroundColor: 'var(--figma-color-bg-selected) !important',
1289
- },
1290
- '.cm-activeLine': {
1291
- backgroundColor: 'color-mix(in srgb, var(--figma-color-bg-hover) 50%, transparent)',
1292
- },
1293
- '.cm-selectionMatch': {
1294
- backgroundColor: 'var(--figma-color-bg-brand-tertiary)',
1295
- },
1296
- });
1297
-
1298
- const figmaHighlight = HighlightStyle.define([
1299
- { tag: tags.keyword, color: 'var(--figma-color-text-component)' },
1300
- { tag: tags.tagName, color: 'var(--figma-color-text-component)' },
1301
- { tag: tags.attributeName, color: 'var(--figma-color-text-brand)' },
1302
- { tag: tags.attributeValue, color: 'var(--figma-color-text-success)' },
1303
- { tag: tags.string, color: 'var(--figma-color-text-success)' },
1304
- { tag: tags.number, color: 'var(--figma-color-text-warning)' },
1305
- { tag: tags.bool, color: 'var(--figma-color-text-warning)' },
1306
- { tag: tags.comment, color: 'var(--figma-color-text-tertiary)', fontStyle: 'italic' },
1307
- { tag: tags.punctuation, color: 'var(--figma-color-text-secondary)' },
1308
- { tag: tags.bracket, color: 'var(--figma-color-text-secondary)' },
1309
- { tag: tags.angleBracket, color: 'var(--figma-color-text-secondary)' },
1310
- { tag: tags.propertyName, color: 'var(--figma-color-text-brand)' },
1311
- { tag: tags.operator, color: 'var(--figma-color-text-secondary)' },
1312
- { tag: tags.typeName, color: 'var(--figma-color-text-component)' },
1313
- { tag: tags.definition(tags.variableName), color: 'var(--figma-color-text-brand)' },
1314
- ]);
1315
-
1316
- const codeSetup = [
1317
- highlightSpecialChars(),
1318
- history(),
1319
- drawSelection(),
1320
- syntaxHighlighting(figmaHighlight),
1321
- closeBrackets(),
1322
- highlightActiveLine(),
1323
- keymap.of([...defaultKeymap, ...historyKeymap]),
1324
- ];
1325
-
1326
- function createEditor(parent, { lang, readOnly = false, minimal = false, doc = '' } = {}) {
1327
- if (!parent) return null;
1328
- const extensions = [
1329
- minimal ? minimalSetup : codeSetup,
1330
- lang,
1331
- figmaTheme,
1332
- EditorView.lineWrapping,
1333
- ];
1334
- if (minimal) extensions.push(syntaxHighlighting(figmaHighlight));
1335
- if (readOnly) {
1336
- extensions.push(EditorView.editable.of(false), EditorState.readOnly.of(true));
1337
- }
1338
- return new EditorView({
1339
- state: EditorState.create({ doc, extensions }),
1340
- parent,
1341
- });
1342
- }
1343
-
1344
- function replaceDoc(view, newDoc) {
1345
- if (!view) return;
1346
- view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: newDoc } });
1347
- }
1348
-
1349
- const codeEditor = createEditor(document.getElementById('propkit-code'), { lang: htmlLang() });
1350
- const easingDumpEditor = createEditor(document.getElementById('easing-curve-dump'), { lang: jsonLang(), readOnly: true, minimal: true });
1351
- const rotate3dDumpEditor = createEditor(document.getElementById('3d-rotate-dump'), { lang: jsonLang(), readOnly: true, minimal: true });
1352
-
1353
- // --- Code View --- (must be before Navigation so LEAF_TAGS exists when navigateTo runs)
1354
- const LEAF_TAGS = new Set([
1355
- 'fig-easing-curve', 'fig-3d-rotate', 'fig-input-color', 'fig-input-fill',
1356
- 'fig-slider', 'fig-switch', 'fig-input-angle', 'fig-image', 'fig-input-number',
1357
- 'fig-input-joystick', 'fig-button', 'fig-input-text', 'fig-avatar', 'fig-shimmer'
1358
- ]);
1359
-
1360
- function getCleanSource(exampleEl) {
1361
- if (!exampleEl) return '';
1362
- const container = exampleEl.querySelector('hstack') || exampleEl.querySelector('.prop-panel');
1363
- if (!container) return '';
1364
-
1365
- const clone = container.cloneNode(true);
1366
- clone.querySelectorAll('.event-dump').forEach(el => el.remove());
1367
- clone.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
1368
- clone.querySelectorAll('[style]').forEach(el => el.removeAttribute('style'));
1369
-
1370
- clone.querySelectorAll('*').forEach(el => {
1371
- const tag = el.tagName.toLowerCase();
1372
- if (LEAF_TAGS.has(tag)) {
1373
- const keep = el.querySelectorAll('[slot], option, datalist, fig-segment');
1374
- if (keep.length) {
1375
- const frag = document.createDocumentFragment();
1376
- keep.forEach(k => frag.appendChild(k.cloneNode(true)));
1377
- el.innerHTML = '';
1378
- el.appendChild(frag);
1379
- } else {
1380
- el.innerHTML = '';
1381
- }
1382
- }
1383
- });
1384
-
1385
- return formatHTML(clone.outerHTML);
1386
- }
1387
-
1388
- function formatHTML(src) {
1389
- let indent = 0;
1390
- const lines = [];
1391
- const tokens = src.replace(/>\s+</g, '><').replace(/></g, '>\n<').split('\n');
1392
- for (const token of tokens) {
1393
- const trimmed = token.trim();
1394
- if (!trimmed) continue;
1395
- if (trimmed.startsWith('</')) indent = Math.max(0, indent - 1);
1396
- lines.push(' '.repeat(indent) + trimmed);
1397
- if (trimmed.startsWith('<') && !trimmed.startsWith('</') && !trimmed.endsWith('/>') && !trimmed.includes('</')) {
1398
- indent++;
1399
- }
1400
- }
1401
- return lines.join('\n');
1402
- }
1403
-
1404
- function populateCodeView(exampleEl) {
1405
- if (!codeEditor || !exampleEl) return;
1406
- replaceDoc(codeEditor, getCleanSource(exampleEl));
1407
- }
1408
-
1409
- // --- Navigation ---
1410
- const navLayers = document.querySelectorAll('nav fig-layer[data-example]');
1411
- const sections = document.querySelectorAll('main > section');
1412
- const promptCopyToast = document.getElementById('prompt-copy-toast');
1413
-
1414
- function navigateTo(sectionId, exampleId) {
1415
- sections.forEach(s => s.classList.remove('active'));
1416
- document.querySelectorAll('.propkit-example').forEach(e => e.classList.remove('active'));
1417
- navLayers.forEach(l => l.removeAttribute('selected'));
1418
-
1419
- const section = document.getElementById(sectionId);
1420
- if (!section) return;
1421
- section.classList.add('active');
1422
-
1423
- const example = section.querySelector(`.propkit-example[data-example="${exampleId}"]`);
1424
- if (example) example.classList.add('active');
1425
-
1426
- const navLayer = document.querySelector(`nav fig-layer[data-section="${sectionId}"][data-example="${exampleId}"]`);
1427
- if (navLayer) {
1428
- navLayer.setAttribute('selected', 'true');
1429
- const parent = navLayer.parentElement?.closest('fig-layer');
1430
- if (parent && !parent.hasAttribute('open')) {
1431
- parent.setAttribute('open', 'true');
1432
- }
1433
- }
1434
-
1435
- populateCodeView(example);
1436
- history.replaceState(null, '', `#${sectionId}/${exampleId}`);
1437
- }
1438
-
1439
- navLayers.forEach(layer => {
1440
- const row = layer.querySelector(':scope > .fig-layer-row');
1441
- if (!row) return;
1442
- row.addEventListener('click', (e) => {
1443
- if (e.target.closest('.fig-layer-chevron')) return;
1444
- const sectionId = layer.dataset.section;
1445
- const exampleId = layer.dataset.example;
1446
- if (sectionId && exampleId) navigateTo(sectionId, exampleId);
1447
- });
1448
- });
1449
-
1450
- document.querySelectorAll('nav > .nav-links > fig-layer[data-section]').forEach(parentLayer => {
1451
- if (!parentLayer.dataset.example) {
1452
- const row = parentLayer.querySelector(':scope > .fig-layer-row');
1453
- if (!row) return;
1454
- row.addEventListener('click', (e) => {
1455
- if (e.target.closest('.fig-layer-chevron')) return;
1456
- parentLayer.setAttribute('open', 'true');
1457
- const firstChild = parentLayer.querySelector('fig-layer[data-example]');
1458
- if (firstChild) navigateTo(firstChild.dataset.section, firstChild.dataset.example);
1459
- });
1460
- }
1461
- });
1462
-
1463
- function navigateFromHash() {
1464
- const hash = location.hash.slice(1);
1465
- if (hash.includes('/')) {
1466
- const [sectionId, exampleId] = hash.split('/');
1467
- navigateTo(sectionId, exampleId);
1468
- return true;
1469
- }
1470
- return false;
1471
- }
1472
-
1473
- if (!navigateFromHash()) {
1474
- const first = document.querySelector('nav fig-layer[data-example]');
1475
- if (first) navigateTo(first.dataset.section, first.dataset.example);
1476
- }
1477
-
1478
- window.addEventListener('hashchange', navigateFromHash);
1479
-
1480
- // --- Theme toggle ---
1481
- const themeToggle = document.getElementById('theme-toggle');
1482
- const themeLightBtn = document.getElementById('theme-light-btn');
1483
- const themeDarkBtn = document.getElementById('theme-dark-btn');
1484
-
1485
- document.querySelectorAll('fig-slider').forEach(s => s.setAttribute('variant', 'neue'));
1486
-
1487
- function setTheme(isDark) {
1488
- document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
1489
- localStorage.setItem('theme', isDark ? 'dark' : 'light');
1490
- if (isDark) themeToggle.setAttribute('checked', 'true');
1491
- else themeToggle.removeAttribute('checked');
1492
- }
1493
-
1494
- const savedTheme = localStorage.getItem('theme');
1495
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
1496
- setTheme(savedTheme ? savedTheme === 'dark' : prefersDark);
1497
-
1498
- themeToggle.addEventListener('change', (e) => setTheme(e.target.checked));
1499
- themeLightBtn.addEventListener('click', () => setTheme(false));
1500
- themeDarkBtn.addEventListener('click', () => setTheme(true));
1501
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
1502
- if (!localStorage.getItem('theme')) setTheme(e.matches);
1503
- });
1504
-
1505
- // --- Event dumps ---
1506
- const easingCurveObserved = document.getElementById('easing-curve-observed');
1507
- const rotate3dObserved = document.getElementById('3d-rotate-observed');
1508
-
1509
- function updateEasingDump(eventName, detail = null) {
1510
- if (!easingDumpEditor || !easingCurveObserved) return;
1511
- replaceDoc(easingDumpEditor, JSON.stringify({
1512
- event: eventName,
1513
- mode: detail?.mode ?? null,
1514
- preset: detail?.preset ?? null,
1515
- value: detail?.value ?? easingCurveObserved.value,
1516
- cssValue: detail?.cssValue ?? easingCurveObserved.cssValue,
1517
- }, null, 2));
1518
- }
1519
-
1520
- if (easingCurveObserved) {
1521
- updateEasingDump('ready');
1522
- easingCurveObserved.addEventListener('input', (e) => updateEasingDump('input', e.detail));
1523
- easingCurveObserved.addEventListener('change', (e) => updateEasingDump('change', e.detail));
1524
- }
1525
-
1526
- function updateRotate3dDump(eventName, detail = null) {
1527
- if (!rotate3dDumpEditor || !rotate3dObserved) return;
1528
- replaceDoc(rotate3dDumpEditor, JSON.stringify({
1529
- event: eventName,
1530
- value: detail?.value ?? rotate3dObserved.value,
1531
- rotateX: detail?.rotateX ?? rotate3dObserved.rotateX,
1532
- rotateY: detail?.rotateY ?? rotate3dObserved.rotateY,
1533
- rotateZ: detail?.rotateZ ?? rotate3dObserved.rotateZ,
1534
- }, null, 2));
1535
- }
1536
-
1537
- if (rotate3dObserved) {
1538
- updateRotate3dDump('ready');
1539
- rotate3dObserved.addEventListener('input', (e) => updateRotate3dDump('input', e.detail));
1540
- rotate3dObserved.addEventListener('change', (e) => updateRotate3dDump('change', e.detail));
1541
- }
1542
-
1543
- // --- Copy buttons ---
1544
- function collectComponentTargets(exampleEl, maxTargets = 1) {
1545
- const targets = [];
1546
- exampleEl.querySelectorAll('fig-field').forEach(field => {
1547
- const component = Array.from(field.children).find(c => c.tagName !== 'LABEL');
1548
- const label = field.querySelector('label')?.textContent?.trim() || '';
1549
- if (component && targets.length < maxTargets) targets.push({ component, label });
1550
- });
1551
- return targets;
1552
- }
1553
-
1554
- function formatAttrs(el) {
1555
- return Array.from(el.attributes)
1556
- .filter(a => !['id', 'class', 'src', 'style', 'label', 'value'].includes(a.name))
1557
- .map(a => `${a.name}="${a.value}"`)
1558
- .join(' ');
1559
- }
1560
-
1561
- function buildPropkitPrompt(exampleEl) {
1562
- const targets = collectComponentTargets(exampleEl);
1563
- if (!targets.length) return 'Use a horizontal fig-field. With a label of [Label name].';
1564
- const { component: el, label } = targets[0];
1565
- const labelText = label || '[Label name]';
1566
- const tag = el.tagName.toLowerCase();
1567
-
1568
- if (tag === 'fig-image') {
1569
- const parts = [];
1570
- if (el.getAttribute('full') === 'true' || el.hasAttribute('full')) parts.push('full fig-image');
1571
- else parts.push('fig-image');
1572
- if (el.getAttribute('upload') === 'true') parts.push('upload');
1573
- if (el.getAttribute('size') === 'auto') parts.push('auto size');
1574
- if (el.hasAttribute('fit')) parts.push(`fit ${el.getAttribute('fit')}`);
1575
- if (el.hasAttribute('aspect-ratio')) parts.push(`aspect ratio ${el.getAttribute('aspect-ratio')}`);
1576
- return `Use a horizontal fig-field, with a ${parts.join(', ')}. With a label of ${labelText}.`;
1577
- }
1578
-
1579
- if (tag === 'fig-input-fill') {
1580
- try {
1581
- const val = JSON.parse(el.getAttribute('value') || '{}');
1582
- const parts = ['fig-input-fill'];
1583
- if (val.type === 'solid') {
1584
- parts.push(`solid fill, color=${val.color}`);
1585
- } else if (val.type === 'gradient' && val.gradient) {
1586
- parts.push(`${val.gradient.type} gradient`);
1587
- if (val.gradient.angle !== undefined) parts.push(`angle=${val.gradient.angle}`);
1588
- const colors = (val.gradient.stops || []).map(s => s.color).join(' → ');
1589
- if (colors) parts.push(`stops=${colors}`);
1590
- } else if (val.type === 'image') {
1591
- parts.push('image fill');
1592
- if (val.image?.scaleMode) parts.push(`scaleMode=${val.image.scaleMode}`);
1593
- if (val.image?.opacity !== undefined && val.image.opacity < 1) parts.push(`opacity=${val.image.opacity}`);
1594
- }
1595
- if (el.getAttribute('alpha') === 'false') parts.push('alpha=false');
1596
- return `Use a horizontal fig-field, with a ${parts.join(', ')}. With a label of ${labelText}.`;
1597
- } catch (e) { /* fall through */ }
1598
- }
1599
-
1600
- const attrs = formatAttrs(el);
1601
- if (!attrs) return `Use a horizontal fig-field, with a ${tag}. With a label of ${labelText}.`;
1602
- return `Use a horizontal fig-field, with a ${tag}, ${attrs.replaceAll('"', '')}. With a label of ${labelText}.`;
1603
- }
1604
-
1605
- async function copyText(text) {
1606
- if (navigator.clipboard?.writeText) {
1607
- await navigator.clipboard.writeText(text);
1608
- return;
1609
- }
1610
- const textarea = document.createElement('textarea');
1611
- textarea.value = text;
1612
- textarea.setAttribute('readonly', '');
1613
- textarea.style.cssText = 'position:fixed;opacity:0';
1614
- document.body.appendChild(textarea);
1615
- textarea.select();
1616
- document.execCommand('copy');
1617
- textarea.remove();
1618
- }
1619
-
1620
- document.addEventListener('click', async (e) => {
1621
- const copyCodeBtn = e.target.closest('.copy-code-btn');
1622
- const copyPromptBtn = e.target.closest('.copy-prompt-btn');
1623
- if (!copyCodeBtn && !copyPromptBtn) return;
1624
-
1625
- try {
1626
- const activeExample = document.querySelector('.propkit-example.active');
1627
- if (!activeExample) return;
1628
-
1629
- if (copyCodeBtn) {
1630
- await copyText(getCleanSource(activeExample));
1631
- } else {
1632
- await copyText(buildPropkitPrompt(activeExample));
1633
- }
1634
- promptCopyToast?.showToast();
1635
- } catch (err) {
1636
- console.error('Failed to copy', err);
1637
- }
1638
- });
1639
- </script>
1640
- </body>
1641
-
1642
- </html>