@stacksjs/defaults 0.75.193 → 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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: stacks-dashboard
|
|
3
|
-
description: Use when building or customizing the Stacks admin dashboard, including dashboard pages, model management views, analytics widgets, commerce dashboards, content management, settings panels, deployment monitoring, job/queue management, or the
|
|
3
|
+
description: Use when building or customizing the Stacks admin dashboard, including dashboard pages, model management views, analytics widgets, commerce dashboards, content management, settings panels, deployment monitoring, job/queue management, or the 412 built-in dashboard components. Covers the dashboard system at storage/framework/defaults/.
|
|
4
4
|
license: MIT
|
|
5
5
|
compatibility: Bun >= 1.3.0, TypeScript
|
|
6
6
|
allowed-tools: Read Edit Write Bash Grep Glob
|
|
@@ -8,7 +8,7 @@ allowed-tools: Read Edit Write Bash Grep Glob
|
|
|
8
8
|
|
|
9
9
|
# Stacks Dashboard
|
|
10
10
|
|
|
11
|
-
The Stacks admin dashboard provides a full-featured admin panel with 100+ route views,
|
|
11
|
+
The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 412 components, and a multi-section layout.
|
|
12
12
|
|
|
13
13
|
## Key Paths
|
|
14
14
|
- Dashboard components: `storage/framework/defaults/resources/components/Dashboard/`
|
|
@@ -61,6 +61,22 @@ Full pagination provides counts and page jumps. Simple/cursor results do not
|
|
|
61
61
|
have a last page; render previous/next controls using their URLs/cursors.
|
|
62
62
|
Outside a request, missing URL context is normal rather than a broken query.
|
|
63
63
|
|
|
64
|
+
## Membership completion
|
|
65
|
+
|
|
66
|
+
`<MembershipCard>` renders a metal keepsake with an engraved name, a finite
|
|
67
|
+
entrance and light sweep, and a brief confetti burst. Pass localized `brand`,
|
|
68
|
+
`label`, `nameLabel`, `name` and optional `detail` props. Mount it only after
|
|
69
|
+
the operation succeeds; it does not grant membership or represent a check-in
|
|
70
|
+
credential. Set `:celebrate="false"` when displaying an existing card. Motion
|
|
71
|
+
is gated by `prefers-reduced-motion`; the card remains readable without it.
|
|
72
|
+
|
|
73
|
+
```stx
|
|
74
|
+
<MembershipCard :if="joined" :name="memberName" brand="My club"
|
|
75
|
+
label="Membership card" nameLabel="Member" :detail="planName" />
|
|
76
|
+
```
|
|
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
|
+
|
|
64
80
|
## Gotchas
|
|
65
81
|
|
|
66
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",
|
|
@@ -144,6 +144,11 @@
|
|
|
144
144
|
"command": "stx.reloadUtilityClasses",
|
|
145
145
|
"title": "Reload Utility Class Configuration",
|
|
146
146
|
"category": "stx"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"command": "stx.extractToComponent",
|
|
150
|
+
"title": "Extract to Component",
|
|
151
|
+
"category": "stx"
|
|
147
152
|
}
|
|
148
153
|
],
|
|
149
154
|
"menus": {
|
|
@@ -281,6 +286,11 @@
|
|
|
281
286
|
"default": true,
|
|
282
287
|
"description": "Validate that template paths in @include and @component directives exist"
|
|
283
288
|
},
|
|
289
|
+
"stx.diagnostics.validateComponentProps": {
|
|
290
|
+
"type": "boolean",
|
|
291
|
+
"default": true,
|
|
292
|
+
"description": "Validate required and unknown props passed through @component directives"
|
|
293
|
+
},
|
|
284
294
|
"stx.completion.enable": {
|
|
285
295
|
"type": "boolean",
|
|
286
296
|
"default": true,
|
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",
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<script client>
|
|
2
|
+
/** A personalized keepsake. Mount after confirmed completion to play once. */
|
|
3
|
+
const mcName = useReactiveProp<string>('name', '')
|
|
4
|
+
const mcBrand = useReactiveProp<string>('brand', '')
|
|
5
|
+
const mcDetail = useReactiveProp<string>('detail', '')
|
|
6
|
+
const mcLabel = useReactiveProp<string>('label', '')
|
|
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()])
|
|
12
|
+
const mcCelebrate = useReactiveProp<boolean>('celebrate', true)
|
|
13
|
+
const mcPieces = [...Array(32).keys()].map(id => ({
|
|
14
|
+
id,
|
|
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]}`,
|
|
16
|
+
}))
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<div :for="reveal in mcReveals" :key="reveal" class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
|
|
20
|
+
<div :if="mcCelebrate" class="absolute inset-0 overflow-hidden pointer-events-none mc-confetti" aria-hidden="true">
|
|
21
|
+
<span :for="piece in mcPieces" :key="piece.id" class="mc-piece" :style="piece.style"></span>
|
|
22
|
+
</div>
|
|
23
|
+
<article class="overflow-hidden relative mx-auto w-full mc-metal" :aria-label="mcLabel" data-membership-card>
|
|
24
|
+
<div class="absolute inset-0 pointer-events-none mc-grain" aria-hidden="true"></div>
|
|
25
|
+
<div class="absolute inset-0 pointer-events-none mc-shine" aria-hidden="true"></div>
|
|
26
|
+
<div class="flex relative gap-4 items-start justify-between">
|
|
27
|
+
<span class="font-bold mc-wordmark" :text="mcBrand"></span>
|
|
28
|
+
<i class="shrink-0 h-6 w-6 i-lucide-sparkles mc-emblem" aria-hidden="true"></i>
|
|
29
|
+
</div>
|
|
30
|
+
<p class="relative mt-3 text-xs mc-label" :text="mcLabel"></p>
|
|
31
|
+
<div class="relative mc-holder">
|
|
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>
|
|
40
|
+
</div>
|
|
41
|
+
<p :if="mcDetail" class="relative mt-5 text-xs mc-detail" :text="mcDetail"></p>
|
|
42
|
+
</article>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<style>
|
|
46
|
+
.mc-stage { max-width: 28rem; padding: 2rem 0 2.5rem; perspective: 1000px; }
|
|
47
|
+
.mc-metal {
|
|
48
|
+
box-sizing: border-box; min-height: 15.5rem; padding: clamp(1.25rem, 5vw, 2rem); border-radius: 1.25rem;
|
|
49
|
+
color: #e2e8f0; border: 1px solid #87939d;
|
|
50
|
+
background: linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%);
|
|
51
|
+
box-shadow: inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799;
|
|
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; }
|
|
58
|
+
.mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #cbd5e126; border-radius: 1rem; pointer-events: none; }
|
|
59
|
+
.mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, #cbd5e114 1px, #cbd5e114 2px); }
|
|
60
|
+
.mc-shine { transform: translateX(-150%) skewX(-20deg); background: linear-gradient(90deg, transparent 25%, #ffffff30 48%, #ffffff66 50%, #ffffff12 54%, transparent 75%); }
|
|
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; }
|
|
62
|
+
.mc-emblem { color: #99f6e4; }
|
|
63
|
+
.mc-label { color: #cbd5e1; letter-spacing: 0.12em; }
|
|
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; }
|
|
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; }
|
|
69
|
+
.mc-detail { color: #cbd5e1; overflow-wrap: anywhere; }
|
|
70
|
+
.mc-confetti { z-index: 2; }
|
|
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
|
+
}
|
|
76
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
77
|
+
.mc-celebrate .mc-metal { animation: mc-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
78
|
+
.mc-celebrate .mc-shine { animation: mc-polish 1700ms ease-in-out 650ms both; }
|
|
79
|
+
.mc-celebrate .mc-piece { animation: mc-fall 2400ms cubic-bezier(0.2, 0.65, 0.45, 1) var(--mc-delay) both; }
|
|
80
|
+
.mc-metal:hover .mc-shine { transform: translateX(150%) skewX(-20deg); transition: transform 1400ms ease; }
|
|
81
|
+
}
|
|
82
|
+
@media (prefers-reduced-motion: reduce) {
|
|
83
|
+
.mc-confetti, .mc-shine { display: none; }
|
|
84
|
+
}
|
|
85
|
+
@keyframes mc-arrive { from { opacity: 0; transform: translateY(32px) rotateX(16deg) rotateY(-12deg) scale(0.92); } to { opacity: 1; transform: none; } }
|
|
86
|
+
@keyframes mc-polish { from { transform: translateX(-150%) skewX(-20deg); } to { transform: translateX(150%) skewX(-20deg); } }
|
|
87
|
+
@keyframes mc-fall { 0% { opacity: 0; transform: translateY(-12px) rotate(0deg); } 12% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--mc-drift), 340px) rotate(var(--mc-turn)); } }
|
|
88
|
+
</style>
|