@stacksjs/defaults 0.75.93 → 0.75.95

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 409 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 410 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, 409 components, and a multi-section layout.
+The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 410 components, and a multi-section layout.
 
 ## Key Paths
 - Dashboard components: `storage/framework/defaults/resources/components/Dashboard/`

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.93",
+  "version": "0.75.95",
   "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",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.93",
+  "version": "0.75.95",
   "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.93",
+    "@stacksjs/mobile": "^0.75.95",
     "@stacksjs/sanitizer": "^0.2.395",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/NativeAccountButton.stx

@@ -0,0 +1,120 @@
+<script>
+interface NativeAccountButtonProps {
+  /** Where the account screen is, such as `/m/me`. */
+  href: string
+  /** The person's name; the button shows its initials. */
+  name?: string
+  /** A photo of them, shown instead of the initials. */
+  image?: string
+  /** A count on the button (unread notifications, say). Zero and empty draw nothing. */
+  badge?: string | number
+  /** What a screen reader calls the button. */
+  label?: string
+}
+
+defineProps<NativeAccountButtonProps>()
+</script>
+
+<script client>
+import { haptics } from '@stacksjs/mobile'
+
+// The account at the top right of a tab's screen, as iOS apps put it: the
+// tab bar keeps its tabs for the places the app is used from. Reactive, so it
+// follows the signed-in person and the count as they change.
+// Every prop through useReactiveProp, under names of its own: read as plain
+// {{ label }}, a host's client signal of the same name (a pull-to-refresh's
+// "Refreshing") was shown instead of the button's own.
+const accountHref = useReactiveProp<string>('href', '')
+const accountLabel = useReactiveProp<string>('label', 'Account')
+const accountName = useReactiveProp<string>('name', '')
+const accountImage = useReactiveProp<string>('image', '')
+const accountBadge = useReactiveProp<string | number>('badge', '')
+
+const accountInitials = derived(() => {
+  const parts = String(accountName() || '').trim().split(/\s+/).filter(Boolean)
+  const first = parts[0]?.[0] ?? ''
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''
+  return (first + last).toUpperCase()
+})
+const accountCount = derived(() => {
+  const value = accountBadge()
+  return value === '' || value === 0 || value === '0' || value == null ? '' : String(value)
+})
+const accountPhoto = derived(() => (accountImage() ? `background-image: url("${String(accountImage()).replace(/"/g, '%22')}")` : ''))
+
+function tapAccount(): void {
+  void haptics.selection()
+}
+</script>
+
+<a :href="accountHref()" class="native-account-button" draggable="false" data-stx-link data-stx-prefetch="eager" @click="tapAccount()">
+  <span class="native-account-label">{{ accountLabel() }}<span :if="accountCount()">, {{ accountCount() }}</span></span>
+  <span aria-hidden="true" class="native-account-face" :style="accountPhoto()">
+    <span :if="!accountImage() && accountInitials()">{{ accountInitials() }}</span>
+    <i :if="!accountImage() && !accountInitials()" class="i-lucide-circle-user-round native-account-glyph"></i>
+  </span>
+  <span :if="accountCount()" aria-hidden="true" class="native-account-badge"></span>
+</a>
+
+<style>
+  .native-account-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    transition: transform 120ms ease, opacity 120ms ease;
+  }
+
+  .native-account-button:active { transform: scale(0.94); opacity: 0.85; }
+
+  .native-account-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  .native-account-face {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    overflow: hidden;
+    border-radius: 999px;
+    color: var(--native-accent, rgb(29 78 216));
+    background: rgb(219 234 254) center / cover no-repeat;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .native-account-glyph { width: 1.25rem; height: 1.25rem; }
+
+  .native-account-badge {
+    position: absolute;
+    top: 0.375rem;
+    right: 0.375rem;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 999px;
+    background: rgb(225 29 72);
+    box-shadow: 0 0 0 2px var(--native-safe-area-background, white);
+  }
+
+  .dark .native-account-face {
+    color: var(--native-accent-dark, rgb(147 197 253));
+    background-color: rgb(30 58 138 / 0.45);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .native-account-button { transition: none; }
+  }
+</style>

package/resources/components/NativeComponents.test.ts

@@ -27,6 +27,17 @@ describe('Native components', () => {
     expect(shell).toContain('padding-bottom: calc(var(--craft-tab-bar-height, 6rem) + 0.75rem);')
   })
 
+  it('puts the account at the top right: initials or a photo, a count, a native press', () => {
+    const button = read('NativeAccountButton')
+    // Reactive, so it follows the signed-in person and the count.
+    expect(button).toContain("useReactiveProp<string>('name', '')")
+    expect(button).toContain("useReactiveProp<string | number>('badge', '')")
+    expect(button).toContain('data-stx-link data-stx-prefetch="eager"')
+    expect(button).toContain('void haptics.selection()')
+    // A photo is a background, not an <img>: apps check that every image goes through their delivery.
+    expect(button).not.toContain('<img')
+  })
+
   it('lifts the launch splash once the first screen has painted', () => {
     expect(read('NativeAppShell')).toContain('requestAnimationFrame(() => requestAnimationFrame(() => splash.hide()))')
   })