@stacksjs/defaults 0.75.195 → 0.75.196
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.
|
@@ -75,6 +75,8 @@ is gated by `prefers-reduced-motion`; the card remains readable without it.
|
|
|
75
75
|
label="Membership card" nameLabel="Member" :detail="planName" />
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
+
Pass `memberId` and a localized `memberIdLabel` to engrave a permanent account identifier. Keep IDs stable across plans and organizations. Increment the optional numeric `replay` prop to remount the reveal through a keyed signal loop; no DOM access or timers are needed. Reduced motion still displays the complete card without confetti.
|
|
79
|
+
|
|
78
80
|
## Gotchas
|
|
79
81
|
|
|
80
82
|
- `config/ui.ts` configures STX topology; `config/css.ts` configures utilities.
|
package/ide/vscode/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"publisher": "Stacks",
|
|
3
3
|
"name": "vscode-stacks",
|
|
4
4
|
"displayName": "Stacks",
|
|
5
|
-
"version": "0.75.
|
|
5
|
+
"version": "0.75.196",
|
|
6
6
|
"description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"funding": "https://github.com/sponsors/chrisbbreuer",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@stacksjs/defaults",
|
|
3
3
|
"type": "module",
|
|
4
4
|
"sideEffects": false,
|
|
5
|
-
"version": "0.75.
|
|
5
|
+
"version": "0.75.196",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
8
|
"url": "git+https://github.com/stacksjs/stacks.git",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@iconify-json/f7": "^1.2.2",
|
|
57
57
|
"@iconify-json/hugeicons": "^1.2.35",
|
|
58
|
-
"@stacksjs/mobile": "0.75.
|
|
58
|
+
"@stacksjs/mobile": "0.75.196",
|
|
59
59
|
"@stacksjs/sanitizer": "^0.2.534",
|
|
60
60
|
"@xterm/addon-fit": "^0.11.0",
|
|
61
61
|
"@xterm/xterm": "^6.0.0",
|
|
@@ -5,14 +5,18 @@
|
|
|
5
5
|
const mcDetail = useReactiveProp<string>('detail', '')
|
|
6
6
|
const mcLabel = useReactiveProp<string>('label', '')
|
|
7
7
|
const mcNameLabel = useReactiveProp<string>('nameLabel', '')
|
|
8
|
+
const mcMemberId = useReactiveProp<string>('memberId', '')
|
|
9
|
+
const mcMemberIdLabel = useReactiveProp<string>('memberIdLabel', '')
|
|
10
|
+
const mcReplay = useReactiveProp<number>('replay', 0)
|
|
11
|
+
const mcReveals = derived(() => [mcReplay()])
|
|
8
12
|
const mcCelebrate = useReactiveProp<boolean>('celebrate', true)
|
|
9
|
-
const mcPieces = Array
|
|
13
|
+
const mcPieces = [...Array(32).keys()].map(id => ({
|
|
10
14
|
id,
|
|
11
15
|
style: `--mc-x:${(id * 37 + 11) % 100}%;--mc-drift:${(id * 29 % 160) - 80}px;--mc-delay:${id % 8 * 65}ms;--mc-turn:${180 + id * 47}deg;--mc-color:${['#99f6e4', '#e2e8f0', '#5eead4', '#94a3b8'][id % 4]}`,
|
|
12
16
|
}))
|
|
13
17
|
</script>
|
|
14
18
|
|
|
15
|
-
<div class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
|
|
19
|
+
<div :for="reveal in mcReveals" :key="reveal" class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
|
|
16
20
|
<div :if="mcCelebrate" class="absolute inset-0 overflow-hidden pointer-events-none mc-confetti" aria-hidden="true">
|
|
17
21
|
<span :for="piece in mcPieces" :key="piece.id" class="mc-piece" :style="piece.style"></span>
|
|
18
22
|
</div>
|
|
@@ -25,10 +29,16 @@
|
|
|
25
29
|
</div>
|
|
26
30
|
<p class="relative mt-3 text-xs mc-label" :text="mcLabel"></p>
|
|
27
31
|
<div class="relative mc-holder">
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
<div class="mc-person">
|
|
33
|
+
<p class="mb-2 text-xs mc-label" :text="mcNameLabel"></p>
|
|
34
|
+
<p class="font-semibold mc-engraving" :text="mcName" data-membership-name></p>
|
|
35
|
+
</div>
|
|
36
|
+
<div :if="mcMemberId" class="mc-identity">
|
|
37
|
+
<p class="text-xs mc-label" :text="mcMemberIdLabel"></p>
|
|
38
|
+
<p class="font-semibold mc-serial" :text="mcMemberId" data-membership-id></p>
|
|
39
|
+
</div>
|
|
31
40
|
</div>
|
|
41
|
+
<p :if="mcDetail" class="relative mt-5 text-xs mc-detail" :text="mcDetail"></p>
|
|
32
42
|
</article>
|
|
33
43
|
</div>
|
|
34
44
|
|
|
@@ -40,17 +50,29 @@
|
|
|
40
50
|
background: linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%);
|
|
41
51
|
box-shadow: inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799;
|
|
42
52
|
}
|
|
53
|
+
.mc-metal p { margin: 0; }
|
|
54
|
+
.mc-metal > .mc-label { margin-top: 0.75rem; }
|
|
55
|
+
.mc-metal .mc-person .mc-label { margin-bottom: 0.5rem; }
|
|
56
|
+
.mc-metal .mc-serial { margin-top: 0.5rem; }
|
|
57
|
+
.mc-metal .mc-detail { margin-top: 1.25rem; }
|
|
43
58
|
.mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #cbd5e126; border-radius: 1rem; pointer-events: none; }
|
|
44
59
|
.mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, #cbd5e114 1px, #cbd5e114 2px); }
|
|
45
60
|
.mc-shine { transform: translateX(-150%) skewX(-20deg); background: linear-gradient(90deg, transparent 25%, #ffffff30 48%, #ffffff66 50%, #ffffff12 54%, transparent 75%); }
|
|
46
61
|
.mc-wordmark { font-size: clamp(1.3rem, 5vw, 1.75rem); letter-spacing: -0.06em; overflow-wrap: anywhere; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff55; }
|
|
47
62
|
.mc-emblem { color: #99f6e4; }
|
|
48
63
|
.mc-label { color: #cbd5e1; letter-spacing: 0.12em; }
|
|
49
|
-
.mc-holder { margin-top: 3rem; }
|
|
64
|
+
.mc-holder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end; margin-top: 3rem; }
|
|
65
|
+
.mc-person { min-width: 0; }
|
|
50
66
|
.mc-engraving { font-size: clamp(1.15rem, 4.8vw, 1.6rem); line-height: 1.3; letter-spacing: 0.025em; overflow-wrap: anywhere; color: #e2e8f0; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80, 0 2px 2px #02061780; }
|
|
67
|
+
.mc-identity { padding-left: 1rem; border-left: 1px solid #cbd5e133; }
|
|
68
|
+
.mc-serial { margin-top: 0.4rem; font-family: ui-monospace, monospace; font-size: clamp(1rem, 3.8vw, 1.2rem); letter-spacing: 0.1em; overflow-wrap: anywhere; color: #ccfbf1; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80; }
|
|
51
69
|
.mc-detail { color: #cbd5e1; overflow-wrap: anywhere; }
|
|
52
70
|
.mc-confetti { z-index: 2; }
|
|
53
71
|
.mc-piece { position: absolute; top: 0; left: var(--mc-x); width: 5px; height: 10px; border-radius: 1px; background: var(--mc-color); opacity: 0; }
|
|
72
|
+
@media (max-width: 360px) {
|
|
73
|
+
.mc-holder { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
|
|
74
|
+
.mc-identity { padding-left: 0; border-left: 0; }
|
|
75
|
+
}
|
|
54
76
|
@media (prefers-reduced-motion: no-preference) {
|
|
55
77
|
.mc-celebrate .mc-metal { animation: mc-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
56
78
|
.mc-celebrate .mc-shine { animation: mc-polish 1700ms ease-in-out 650ms both; }
|