@stacksjs/defaults 0.75.192 → 0.75.195

package/ai/skills/stacks-auth/SKILL.md

@@ -642,3 +642,11 @@ selected permissions, discovery and subject-owned disconnect. Mount protocol
 POST handlers with `parseBody(false)` and `skipCsrf()`; keep router login and CSRF
 protection on consent and connection management. Do not duplicate these HTTP
 boundaries in applications or accept a subject from client input.
+
+Delegated OAuth bearers are not ordinary login credentials. `Auth.validateToken`,
+`Auth.getUserFromToken`, `Auth.currentAccessToken` and `Auth.rotateToken` reject
+them even while their grant is active. Generic `auth` middleware therefore does
+not authenticate them. OAuth resource endpoints must explicitly use
+`authorizeOAuthDelegatedToken` with the exact resource, audience, workspace and
+required scopes. Ordinary refresh also refuses delegated refresh credentials;
+use the OAuth token endpoint and the registered client's protocol authentication.

package/ai/skills/stacks-dashboard/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: stacks-dashboard
-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 411 built-in dashboard components. Covers the dashboard system at storage/framework/defaults/.
+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/.
 license: MIT
 compatibility: Bun >= 1.3.0, TypeScript
 allowed-tools: Read Edit Write Bash Grep Glob
@@ -8,7 +8,7 @@ allowed-tools: Read Edit Write Bash Grep Glob
 
 # Stacks Dashboard
 
-The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 411 components, and a multi-section layout.
+The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 412 components, and a multi-section layout.
 
 ## Key Paths
 - Dashboard components: `storage/framework/defaults/resources/components/Dashboard/`

package/ai/skills/stacks-ui/SKILL.md

@@ -61,6 +61,20 @@ Full pagination provides counts and page jumps. Simple/cursor results do not
 have a last page; render previous/next controls using their URLs/cursors.
 Outside a request, missing URL context is normal rather than a broken query.
 
+## Membership completion
+
+`<MembershipCard>` renders a metal keepsake with an engraved name, a finite
+entrance and light sweep, and a brief confetti burst. Pass localized `brand`,
+`label`, `nameLabel`, `name` and optional `detail` props. Mount it only after
+the operation succeeds; it does not grant membership or represent a check-in
+credential. Set `:celebrate="false"` when displaying an existing card. Motion
+is gated by `prefers-reduced-motion`; the card remains readable without it.
+
+```stx
+<MembershipCard :if="joined" :name="memberName" brand="My club"
+  label="Membership card" nameLabel="Member" :detail="planName" />
+```
+
 ## Gotchas
 
 - `config/ui.ts` configures STX topology; `config/css.ts` configures utilities.

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.192",
+  "version": "0.75.195",
   "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.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",
@@ -144,6 +144,11 @@
         "command": "stx.reloadUtilityClasses",
         "title": "Reload Utility Class Configuration",
         "category": "stx"
+      },
+      {
+        "command": "stx.extractToComponent",
+        "title": "Extract to Component",
+        "category": "stx"
       }
     ],
     "menus": {
@@ -281,6 +286,11 @@
             "default": true,
             "description": "Validate that template paths in @include and @component directives exist"
           },
+          "stx.diagnostics.validateComponentProps": {
+            "type": "boolean",
+            "default": true,
+            "description": "Validate required and unknown props passed through @component directives"
+          },
           "stx.completion.enable": {
             "type": "boolean",
             "default": true,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.192",
+  "version": "0.75.195",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.192",
+    "@stacksjs/mobile": "0.75.195",
     "@stacksjs/sanitizer": "^0.2.534",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/MembershipCard.stx

@@ -0,0 +1,66 @@
+<script client>
+  /** A personalized keepsake. Mount after confirmed completion to play once. */
+  const mcName = useReactiveProp<string>('name', '')
+  const mcBrand = useReactiveProp<string>('brand', '')
+  const mcDetail = useReactiveProp<string>('detail', '')
+  const mcLabel = useReactiveProp<string>('label', '')
+  const mcNameLabel = useReactiveProp<string>('nameLabel', '')
+  const mcCelebrate = useReactiveProp<boolean>('celebrate', true)
+  const mcPieces = Array.from({ length: 32 }, (_, id) => ({
+    id,
+    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]}`,
+  }))
+</script>
+
+<div class="relative mx-auto w-full mc-stage" :class="mcCelebrate ? 'mc-celebrate' : ''" data-membership-reveal>
+  <div :if="mcCelebrate" class="absolute inset-0 overflow-hidden pointer-events-none mc-confetti" aria-hidden="true">
+    <span :for="piece in mcPieces" :key="piece.id" class="mc-piece" :style="piece.style"></span>
+  </div>
+  <article class="overflow-hidden relative mx-auto w-full mc-metal" :aria-label="mcLabel" data-membership-card>
+    <div class="absolute inset-0 pointer-events-none mc-grain" aria-hidden="true"></div>
+    <div class="absolute inset-0 pointer-events-none mc-shine" aria-hidden="true"></div>
+    <div class="flex relative gap-4 items-start justify-between">
+      <span class="font-bold mc-wordmark" :text="mcBrand"></span>
+      <i class="shrink-0 h-6 w-6 i-lucide-sparkles mc-emblem" aria-hidden="true"></i>
+    </div>
+    <p class="relative mt-3 text-xs mc-label" :text="mcLabel"></p>
+    <div class="relative mc-holder">
+      <p class="mb-2 text-xs mc-label" :text="mcNameLabel"></p>
+      <p class="font-semibold mc-engraving" :text="mcName" data-membership-name></p>
+      <p :if="mcDetail" class="mt-3 text-xs mc-detail" :text="mcDetail"></p>
+    </div>
+  </article>
+</div>
+
+<style>
+  .mc-stage { max-width: 28rem; padding: 2rem 0 2.5rem; perspective: 1000px; }
+  .mc-metal {
+    box-sizing: border-box; min-height: 15.5rem; padding: clamp(1.25rem, 5vw, 2rem); border-radius: 1.25rem;
+    color: #e2e8f0; border: 1px solid #87939d;
+    background: linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%);
+    box-shadow: inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799;
+  }
+  .mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #cbd5e126; border-radius: 1rem; pointer-events: none; }
+  .mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, #cbd5e114 1px, #cbd5e114 2px); }
+  .mc-shine { transform: translateX(-150%) skewX(-20deg); background: linear-gradient(90deg, transparent 25%, #ffffff30 48%, #ffffff66 50%, #ffffff12 54%, transparent 75%); }
+  .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; }
+  .mc-emblem { color: #99f6e4; }
+  .mc-label { color: #cbd5e1; letter-spacing: 0.12em; }
+  .mc-holder { margin-top: 3rem; }
+  .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; }
+  .mc-detail { color: #cbd5e1; overflow-wrap: anywhere; }
+  .mc-confetti { z-index: 2; }
+  .mc-piece { position: absolute; top: 0; left: var(--mc-x); width: 5px; height: 10px; border-radius: 1px; background: var(--mc-color); opacity: 0; }
+  @media (prefers-reduced-motion: no-preference) {
+    .mc-celebrate .mc-metal { animation: mc-arrive 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+    .mc-celebrate .mc-shine { animation: mc-polish 1700ms ease-in-out 650ms both; }
+    .mc-celebrate .mc-piece { animation: mc-fall 2400ms cubic-bezier(0.2, 0.65, 0.45, 1) var(--mc-delay) both; }
+    .mc-metal:hover .mc-shine { transform: translateX(150%) skewX(-20deg); transition: transform 1400ms ease; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mc-confetti, .mc-shine { display: none; }
+  }
+  @keyframes mc-arrive { from { opacity: 0; transform: translateY(32px) rotateX(16deg) rotateY(-12deg) scale(0.92); } to { opacity: 1; transform: none; } }
+  @keyframes mc-polish { from { transform: translateX(-150%) skewX(-20deg); } to { transform: translateX(150%) skewX(-20deg); } }
+  @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)); } }
+</style>