@stacksjs/defaults 0.75.195 → 0.75.197

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 (4) hide show
  1. package/ai/skills/stacks-ui/SKILL.md +4 -0
  2. package/ide/vscode/package.json +1 -1
  3. package/package.json +2 -2
  4. package/resources/components/MembershipCard.stx +34 -10
package/ai/skills/stacks-ui/SKILL.md CHANGED
@@ -75,6 +75,10 @@ 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 `logo` to use your brand image in place of the text wordmark; `brand` remains its accessible name. The engraved name uses a cursive title treatment. Set `nameFont` to your self-hosted signature font family and load it through your app's fonts config (`font-display: swap`). Long names wrap without covering the Member ID.
79
+
80
+ 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.
81
+
78
82
  ## Gotchas
79
83
 
80
84
  - `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.195",
5
+ "version": "0.75.197",
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.195",
5
+ "version": "0.75.197",
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.195",
58
+ "@stacksjs/mobile": "0.75.197",
59
59
  "@stacksjs/sanitizer": "^0.2.534",
60
60
  "@xterm/addon-fit": "^0.11.0",
61
61
  "@xterm/xterm": "^6.0.0",
package/resources/components/MembershipCard.stx CHANGED
@@ -2,17 +2,23 @@
2
2
  /** A personalized keepsake. Mount after confirmed completion to play once. */
3
3
  const mcName = useReactiveProp<string>('name', '')
4
4
  const mcBrand = useReactiveProp<string>('brand', '')
5
+ const mcLogo = useReactiveProp<string>('logo', '')
6
+ const mcNameFont = useReactiveProp<string>('nameFont', "'Snell Roundhand', 'Apple Chancery', 'URW Chancery L', cursive")
5
7
  const mcDetail = useReactiveProp<string>('detail', '')
6
8
  const mcLabel = useReactiveProp<string>('label', '')
7
9
  const mcNameLabel = useReactiveProp<string>('nameLabel', '')
10
+ const mcMemberId = useReactiveProp<string>('memberId', '')
11
+ const mcMemberIdLabel = useReactiveProp<string>('memberIdLabel', '')
12
+ const mcReplay = useReactiveProp<number>('replay', 0)
13
+ const mcReveals = derived(() => [mcReplay()])
8
14
  const mcCelebrate = useReactiveProp<boolean>('celebrate', true)
9
- const mcPieces = Array.from({ length: 32 }, (_, id) => ({
15
+ const mcPieces = [...Array(32).keys()].map(id => ({
10
16
  id,
11
17
  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
18
  }))
13
19
  </script>
14
20
 
15
- <div class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
21
+ <div :for="reveal in mcReveals" :key="reveal" class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
16
22
  <div :if="mcCelebrate" class="absolute inset-0 overflow-hidden pointer-events-none mc-confetti" aria-hidden="true">
17
23
  <span :for="piece in mcPieces" :key="piece.id" class="mc-piece" :style="piece.style"></span>
18
24
  </div>
@@ -20,15 +26,21 @@
20
26
  <div class="absolute inset-0 pointer-events-none mc-grain" aria-hidden="true"></div>
21
27
  <div class="absolute inset-0 pointer-events-none mc-shine" aria-hidden="true"></div>
22
28
  <div class="flex relative gap-4 items-start justify-between">
23
- <span class="font-bold mc-wordmark" :text="mcBrand"></span>
24
- <i class="shrink-0 h-6 w-6 i-lucide-sparkles mc-emblem" aria-hidden="true"></i>
29
+ <img :if="mcLogo" class="mc-logo" :src="mcLogo" :alt="mcBrand" width="96" height="38" />
30
+ <span :if="!mcLogo" class="font-bold mc-wordmark" :text="mcBrand"></span>
25
31
  </div>
26
32
  <p class="relative mt-3 text-xs mc-label" :text="mcLabel"></p>
27
33
  <div class="relative mc-holder">
28
- <p class="mb-2 text-xs mc-label" :text="mcNameLabel"></p>
29
- <p class="font-semibold mc-engraving" :text="mcName" data-membership-name></p>
30
- <p :if="mcDetail" class="mt-3 text-xs mc-detail" :text="mcDetail"></p>
34
+ <div class="mc-person">
35
+ <p class="mb-2 text-xs mc-label" :text="mcNameLabel"></p>
36
+ <p class="mc-engraving" :style="{ fontFamily: mcNameFont }" :text="mcName" data-membership-name></p>
37
+ </div>
38
+ <div :if="mcMemberId" class="mc-identity">
39
+ <p class="text-xs mc-label" :text="mcMemberIdLabel"></p>
40
+ <p class="font-semibold mc-serial" :text="mcMemberId" data-membership-id></p>
41
+ </div>
31
42
  </div>
43
+ <p :if="mcDetail" class="relative mt-5 text-xs mc-detail" :text="mcDetail"></p>
32
44
  </article>
33
45
  </div>
34
46
 
@@ -40,17 +52,29 @@
40
52
  background: linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%);
41
53
  box-shadow: inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799;
42
54
  }
55
+ .mc-metal p { margin: 0; }
56
+ .mc-metal > .mc-label { margin-top: 0.75rem; }
57
+ .mc-metal .mc-person .mc-label { margin-bottom: 0.5rem; }
58
+ .mc-metal .mc-serial { margin-top: 0.5rem; }
59
+ .mc-metal .mc-detail { margin-top: 1.25rem; }
43
60
  .mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #cbd5e126; border-radius: 1rem; pointer-events: none; }
44
61
  .mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, #cbd5e114 1px, #cbd5e114 2px); }
45
62
  .mc-shine { transform: translateX(-150%) skewX(-20deg); background: linear-gradient(90deg, transparent 25%, #ffffff30 48%, #ffffff66 50%, #ffffff12 54%, transparent 75%); }
46
63
  .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
- .mc-emblem { color: #99f6e4; }
64
+ .mc-metal .mc-logo { display: block; width: 6rem; height: 2.375rem; margin: 0; object-fit: contain; object-position: left center; }
48
65
  .mc-label { color: #cbd5e1; letter-spacing: 0.12em; }
49
- .mc-holder { margin-top: 3rem; }
50
- .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; }
66
+ .mc-holder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end; margin-top: 2rem; }
67
+ .mc-person { min-width: 0; }
68
+ .mc-metal .mc-engraving { padding: 0 0 0.25rem; font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; color: #f1f5f9; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80, 0 2px 2px #02061780; }
69
+ .mc-identity { padding-left: 1rem; border-left: 1px solid #cbd5e133; }
70
+ .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
71
  .mc-detail { color: #cbd5e1; overflow-wrap: anywhere; }
52
72
  .mc-confetti { z-index: 2; }
53
73
  .mc-piece { position: absolute; top: 0; left: var(--mc-x); width: 5px; height: 10px; border-radius: 1px; background: var(--mc-color); opacity: 0; }
74
+ @media (max-width: 360px) {
75
+ .mc-holder { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
76
+ .mc-identity { padding-left: 0; border-left: 0; }
77
+ }
54
78
  @media (prefers-reduced-motion: no-preference) {
55
79
  .mc-celebrate .mc-metal { animation: mc-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
56
80
  .mc-celebrate .mc-shine { animation: mc-polish 1700ms ease-in-out 650ms both; }