@stacksjs/defaults 0.75.467 → 0.75.473

package/functions/dashboard-badge.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'bun:test'
+import { badgeClasses, badgeClassToggles, badgeDotClasses, badgeDotClassToggles, badgeShowsDot } from './dashboard-badge'
+
+describe('dashboard badge classes', () => {
+  test('a variant picks its colour', () => {
+    expect(badgeClasses('info')).toContain('bg-cyan-500/15 text-cyan-600')
+    expect(badgeClasses('success')).toContain('bg-green-500/15 text-green-600')
+    expect(badgeClasses('danger', 'sm', 'full', true)).toContain('border-red-500/40 text-red-600')
+    expect(badgeDotClasses('warning')).toContain('bg-orange-500')
+  })
+
+  test('an unknown or missing value falls back rather than printing undefined', () => {
+    expect(badgeClasses('nope', 'huge')).toBe(badgeClasses())
+    expect(badgeClasses(undefined)).toContain('bg-black/[0.06] text-neutral-600')
+    expect(badgeDotClasses('nope')).toBe(badgeDotClasses())
+    expect(badgeClasses()).not.toContain('undefined')
+  })
+
+  test('a flag that arrived as an attribute string reads as the attribute means', () => {
+    expect(badgeClasses('info', 'sm', 'full', 'false')).toBe(badgeClasses('info'))
+    expect(badgeClasses('info', 'sm', 'full', 'true')).toBe(badgeClasses('info', 'sm', 'full', true))
+    expect(badgeShowsDot('true')).toBe(true)
+    expect(badgeShowsDot('')).toBe(true)
+    expect(badgeShowsDot('false')).toBe(false)
+    expect(badgeShowsDot(undefined)).toBe(false)
+  })
+
+  test('the live toggles turn a grey first paint into exactly the bound variant', () => {
+    // What the browser does with an object `:class`: add the true keys, remove
+    // the false ones, leave every other class alone.
+    const apply = (start: string, toggles: Record<string, boolean>) => {
+      const list = new Set(start.split(' '))
+      for (const [token, on] of Object.entries(toggles)) on ? list.add(token) : list.delete(token)
+      return [...list].sort()
+    }
+    const sorted = (classes: string) => classes.split(' ').sort()
+
+    expect(apply(badgeClasses('default'), badgeClassToggles('info'))).toEqual(sorted(badgeClasses('info')))
+    expect(apply(badgeClasses('success', 'xs'), badgeClassToggles('danger', 'lg', 'default', 'true'))).toEqual(sorted(badgeClasses('danger', 'lg', 'default', true)))
+    expect(apply(badgeDotClasses('default'), badgeDotClassToggles('warning'))).toEqual(sorted(badgeDotClasses('warning')))
+  })
+})

package/functions/dashboard-badge.ts

@@ -0,0 +1,104 @@
+/**
+ * The classes a dashboard `<Badge>` renders.
+ *
+ * A pure function of the props, shared by the badge's server render (the first
+ * paint) and its client script (every later value). The client half is why
+ * this is a module: most callers bind `:variant` to data that arrives after
+ * hydration, the class computed at the server render never changed, and every
+ * such badge stayed the default grey (stacksjs/stacks#3179). A server script's
+ * function cannot cross to the client, so both halves import it from here.
+ */
+
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+const sizeClasses: Record<string, string> = {
+  xs: 'text-[10px] px-1.5 py-0.5',
+  sm: 'text-[11px] px-2 py-0.5',
+  md: 'text-[12px] px-2.5 py-0.5',
+  lg: 'text-[13px] px-3 py-1'
+}
+
+const solidVariants: Record<string, string> = {
+  default: 'bg-black/[0.06] text-neutral-600 dark:bg-white/10 dark:text-neutral-300',
+  primary: 'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
+  success: 'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
+  warning: 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
+  danger: 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
+  info: 'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400'
+}
+
+const outlineVariants: Record<string, string> = {
+  default: 'border border-black/15 text-neutral-600 dark:border-white/20 dark:text-neutral-300',
+  primary: 'border border-blue-500/40 text-blue-600 dark:border-blue-400/50 dark:text-blue-400',
+  success: 'border border-green-500/40 text-green-600 dark:border-green-400/50 dark:text-green-400',
+  warning: 'border border-orange-500/40 text-orange-600 dark:border-orange-400/50 dark:text-orange-400',
+  danger: 'border border-red-500/40 text-red-600 dark:border-red-400/50 dark:text-red-400',
+  info: 'border border-cyan-500/40 text-cyan-600 dark:border-cyan-400/50 dark:text-cyan-400'
+}
+
+const dotColors: Record<string, string> = {
+  default: 'bg-neutral-400 dark:bg-neutral-500',
+  primary: 'bg-blue-500 dark:bg-blue-400',
+  success: 'bg-green-500 dark:bg-green-400',
+  warning: 'bg-orange-500 dark:bg-orange-400',
+  danger: 'bg-red-500 dark:bg-red-400',
+  info: 'bg-cyan-500 dark:bg-cyan-400'
+}
+
+/**
+ * A prop that arrived as an attribute is a string, so `outline="false"` must
+ * not read as on.
+ */
+function flag(value: unknown): boolean {
+  return value === true || value === 'true' || value === ''
+}
+
+export function badgeClasses(variant: unknown = 'default', size: unknown = 'sm', rounded: unknown = 'full', outline: unknown = false): string {
+  return [
+    'inline-flex items-center font-medium tracking-tight',
+    'transition-all duration-150',
+    sizeClasses[String(size)] ?? sizeClasses.sm,
+    rounded === 'full' ? 'rounded-full' : 'rounded-md',
+    (flag(outline) ? outlineVariants : solidVariants)[String(variant)] ?? solidVariants.default,
+  ].join(' ')
+}
+
+export function badgeDotClasses(variant: unknown = 'default'): string {
+  return `w-1.5 h-1.5 rounded-full mr-1.5 ${dotColors[String(variant)] ?? dotColors.default}`
+}
+
+export function badgeShowsDot(dot: unknown): boolean {
+  return flag(dot)
+}
+
+function tokens(...classLists: string[]): string[] {
+  return [...new Set(classLists.flatMap(list => list.split(/\s+/)).filter(Boolean))]
+}
+
+const switchedTokens = tokens(
+  ...Object.values(sizeClasses),
+  ...Object.values(solidVariants),
+  ...Object.values(outlineVariants),
+  'rounded-full rounded-md',
+)
+const dotTokens = tokens(...Object.values(dotColors))
+
+/**
+ * The badge's classes as a `:class` object: every class any size, shape or
+ * variant can set, each on or off.
+ *
+ * Not a string. A string `:class` is appended to the classes the element was
+ * rendered with, so a badge first painted grey kept the grey classes next to
+ * its live ones, and which colour showed depended on stylesheet order. The
+ * object form removes what the current props do not want.
+ */
+export function badgeClassToggles(variant?: unknown, size?: unknown, rounded?: unknown, outline?: unknown): Record<string, boolean> {
+  const wanted = new Set(badgeClasses(variant, size, rounded, outline).split(/\s+/))
+  return Object.fromEntries(switchedTokens.map(token => [token, wanted.has(token)]))
+}
+
+export function badgeDotClassToggles(variant?: unknown): Record<string, boolean> {
+  const wanted = new Set(badgeDotClasses(variant).split(/\s+/))
+  return Object.fromEntries(dotTokens.map(token => [token, wanted.has(token)]))
+}

package/functions/dashboard-button.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, test } from 'bun:test'
+import { buttonVariantClasses, buttonVariantToggles } from './dashboard-button'
+
+// What the browser does with an object `:class`: add the true keys, remove the
+// false ones, leave every other class alone.
+function apply(start: string, toggles: Record<string, boolean>): string[] {
+  const list = new Set(start.split(/\s+/).filter(Boolean))
+  for (const [token, on] of Object.entries(toggles)) on ? list.add(token) : list.delete(token)
+  return [...list].sort()
+}
+
+const sorted = (classes: string) => classes.split(/\s+/).filter(Boolean).sort()
+
+describe('dashboard button variant toggles', () => {
+  test('a bound variant replaces the first paint\'s colour', () => {
+    const base = 'inline-flex items-center h-8'
+    const painted = `${base} ${buttonVariantClasses.primary}`
+    expect(apply(painted, buttonVariantToggles('danger'))).toEqual(sorted(`${base} ${buttonVariantClasses.danger}`))
+  })
+
+  test('the caller\'s own classes survive even when a variant uses them too', () => {
+    const caller = 'border shadow-sm w-full'
+    const painted = `${caller} ${buttonVariantClasses.secondary}`
+    const result = apply(painted, buttonVariantToggles('primary', caller))
+    for (const token of caller.split(' ')) expect(result).toContain(token)
+    expect(result).not.toContain('bg-white/80')
+  })
+
+  test('bare keeps nothing of a variant and an unknown one falls back to primary', () => {
+    expect(apply(buttonVariantClasses.success, buttonVariantToggles('bare'))).toEqual([])
+    expect(apply('', buttonVariantToggles('nope'))).toEqual(sorted(buttonVariantClasses.primary))
+  })
+})

package/functions/dashboard-button.ts

@@ -0,0 +1,44 @@
+/**
+ * The colour classes of a dashboard `<Button>` variant.
+ *
+ * Shared by the button's server render and its client script. The client half
+ * exists for callers that bind `:variant` to client state - the migration
+ * plan's confirm button turns `danger` when the plan is destructive - which
+ * the server render never sees, so the button kept the variant it was first
+ * painted with (stacksjs/stacks#3180).
+ */
+
+export const buttonVariantClasses: Record<string, string> = {
+  primary: 'bg-gradient-to-b from-blue-500 to-blue-600 text-white shadow-sm shadow-blue-600/25 hover:from-blue-400 hover:to-blue-500 active:from-blue-600 active:to-blue-700 dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-500 dark:hover:to-blue-600',
+  secondary: 'bg-white/80 dark:bg-white/10 text-neutral-800 dark:text-neutral-100 border border-black/10 dark:border-white/10 shadow-sm hover:bg-white dark:hover:bg-white/15 active:bg-neutral-100 dark:active:bg-white/5',
+  outline: 'bg-transparent text-neutral-700 dark:text-neutral-200 border border-black/15 dark:border-white/15 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/10',
+  ghost: 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/12',
+  danger: 'bg-gradient-to-b from-red-500 to-red-600 text-white shadow-sm shadow-red-600/25 hover:from-red-400 hover:to-red-500 active:from-red-600 active:to-red-700',
+  success: 'bg-gradient-to-b from-green-500 to-green-600 text-white shadow-sm shadow-green-600/25 hover:from-green-400 hover:to-green-500 active:from-green-600 active:to-green-700',
+  warning: 'bg-gradient-to-b from-orange-500 to-orange-600 text-white shadow-sm shadow-orange-600/25 hover:from-orange-400 hover:to-orange-500 active:from-orange-600 active:to-orange-700',
+  /**
+   * No chrome at all: the caller supplies every visual through `class`.
+   *
+   * For an affordance that has to sit inside someone else's layout and carry
+   * no box of its own - a sortable table header fills its `<th>`, and the
+   * padding and fixed height the sizes impose would change the header row.
+   * What it still gets, and the reason to come through this component rather
+   * than write a raw `<button>`, is the shared focus-visible ring, the
+   * disabled and aria-disabled handling, and the press feedback.
+   * See stacksjs/stacks#2926.
+   */
+  bare: ''
+}
+
+/**
+ * The variant's classes as a `:class` object: every class any variant sets,
+ * each on or off, so a live change removes the first paint's colour instead
+ * of stacking on it. Classes the caller passed in `class` are left alone even
+ * when a variant also uses them.
+ */
+export function buttonVariantToggles(variant: unknown, callerClass: unknown = ''): Record<string, boolean> {
+  const own = new Set(String(callerClass || '').split(/\s+/).filter(Boolean))
+  const wanted = new Set((buttonVariantClasses[String(variant)] ?? buttonVariantClasses.primary).split(/\s+/).filter(Boolean))
+  const all = new Set(Object.values(buttonVariantClasses).flatMap(list => list.split(/\s+/)).filter(Boolean))
+  return Object.fromEntries([...all].filter(token => !own.has(token)).map(token => [token, wanted.has(token)]))
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.467",
+  "version": "0.75.473",
   "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.467",
+  "version": "0.75.473",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.467",
-    "@stacksjs/sanitizer": "0.2.798",
-    "@stacksjs/stx": "0.2.798",
+    "@stacksjs/mobile": "0.75.473",
+    "@stacksjs/sanitizer": "0.2.800",
+    "@stacksjs/stx": "0.2.800",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/Dashboard/Analytics/AnalyticsHub.stx

@@ -1,3 +1,12 @@
+<script server>
+import { loadDiscoveredManifest } from '@stacksjs/defaults/resources/functions/dashboard/sidebar'
+
+// The Commerce card follows the sidebar's commerce section: with the feature
+// off its models are never loaded, so the page it opens could only answer
+// 503 (stacksjs/stacks#3183).
+export const commerceAnalytics = loadDiscoveredManifest().sections.commerce
+</script>
+
 <script client>
 import type { AnalyticsOverview } from '../../../../functions/analytics'
 import { fetchWebAnalytics } from '../../../../functions/analytics'
@@ -17,7 +26,7 @@ const analyticsCards = [
   { name: 'Countries', description: 'Geographic data when provided', icon: 'i-hugeicons-globe-02', to: '/analytics/countries' },
   { name: 'Devices', description: 'Device classes from user agents', icon: 'i-hugeicons-smart-phone-01', to: '/analytics/devices' },
   { name: 'Browsers', description: 'Browser families from user agents', icon: 'i-hugeicons-browser', to: '/analytics/browsers' },
-]
+].filter(card => commerceAnalytics || !card.to.startsWith('/analytics/commerce/'))
 
 function formatNumber(value: number | undefined): string {
   return new Intl.NumberFormat().format(value || 0)

package/resources/components/Dashboard/Data/DataRecords.stx

@@ -239,7 +239,7 @@ onMount(() => {
       </div>
       <label class="block relative w-full sm:w-72">
         <span class="sr-only">Search {{ page().title.toLowerCase() }}</span>
-        <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-neutral-400 i-hugeicons-search-01"></span>
+        <span aria-hidden="true" class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
         <input x-model="search" type="search" :placeholder="'Search ' + page().title.toLowerCase()" class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
       </label>
     </div>

package/resources/components/Dashboard/Email/InboxMessageList.stx

@@ -41,7 +41,7 @@ function listClass(): string {
   <div class="px-4 py-2 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
     <label for="inbox-search" class="sr-only">Search messages</label>
     <div class="relative">
-      <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-gray-400 pointer-events-none i-hugeicons-search-01"></span>
+      <span aria-hidden="true" class="absolute left-3 top-1/2 h-4 w-4 text-gray-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
       <input id="inbox-search" x-model="search" type="search" placeholder="Search messages" class="block placeholder-gray-500 dark:placeholder-gray-400 pl-10 pr-3 py-2 w-full text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" @input="emit('search', $event.target.value)" />
     </div>
   </div>

package/resources/components/Dashboard/MobileSidebar.stx

@@ -57,9 +57,12 @@ function handlePanelClick(event: MouseEvent): void {
     closeSidebar()
 }
 
+// Widening past the breakpoint closes the drawer the same way a tap does, so
+// the scroll lock is released and the layout gets its `close` to take its
+// sidebar back. Setting the state alone did neither.
 effect(() => {
   if (isDesktop() && isOpen())
-    isOpen.set(false)
+    closeSidebar()
 })
 
 useEventListener('keydown', handleKeydown)

package/resources/components/Dashboard/Models/ModelsOverview.stx

@@ -141,7 +141,7 @@ onMount(() => {
       <div class="flex flex-col gap-2 sm:flex-row w-full sm:w-auto">
         <label class="block relative w-full sm:w-64">
           <span class="sr-only">Search models</span>
-          <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-neutral-400 i-hugeicons-search-01"></span>
+          <span aria-hidden="true" class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
           <input x-model="search" type="search" placeholder="Search models" class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-neutral-300 rounded-lg dark:border-neutral-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20">
         </label>
         <label>

package/resources/components/Dashboard/UI/Badge.stx

@@ -1,4 +1,6 @@
 <script server>
+import { badgeClasses, badgeDotClasses } from '../../../../functions/dashboard-badge'
+
 interface BadgeProps {
   variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
   size?: 'xs' | 'sm' | 'md' | 'lg'
@@ -14,53 +16,28 @@ const { variant = 'default', size = 'sm', rounded = 'full', outline = false, dot
 // `{{ text }}` rendered the validator function source into every Badge.
 // Use the slot for the badge label instead.
 
-const sizeClasses = {
-  xs: 'text-[10px] px-1.5 py-0.5',
-  sm: 'text-[11px] px-2 py-0.5',
-  md: 'text-[12px] px-2.5 py-0.5',
-  lg: 'text-[13px] px-3 py-1'
-}
-
-const solidVariants = {
-  default: 'bg-black/[0.06] text-neutral-600 dark:bg-white/10 dark:text-neutral-300',
-  primary: 'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
-  success: 'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
-  warning: 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
-  danger: 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
-  info: 'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400'
-}
-
-const outlineVariants = {
-  default: 'border border-black/15 text-neutral-600 dark:border-white/20 dark:text-neutral-300',
-  primary: 'border border-blue-500/40 text-blue-600 dark:border-blue-400/50 dark:text-blue-400',
-  success: 'border border-green-500/40 text-green-600 dark:border-green-400/50 dark:text-green-400',
-  warning: 'border border-orange-500/40 text-orange-600 dark:border-orange-400/50 dark:text-orange-400',
-  danger: 'border border-red-500/40 text-red-600 dark:border-red-400/50 dark:text-red-400',
-  info: 'border border-cyan-500/40 text-cyan-600 dark:border-cyan-400/50 dark:text-cyan-400'
-}
-
-const dotColors = {
-  default: 'bg-neutral-400 dark:bg-neutral-500',
-  primary: 'bg-blue-500 dark:bg-blue-400',
-  success: 'bg-green-500 dark:bg-green-400',
-  warning: 'bg-orange-500 dark:bg-orange-400',
-  danger: 'bg-red-500 dark:bg-red-400',
-  info: 'bg-cyan-500 dark:bg-cyan-400'
-}
-
-const badgeClass = [
-  'inline-flex items-center font-medium tracking-tight',
-  'transition-all duration-150',
-  sizeClasses[size],
-  rounded === 'full' ? 'rounded-full' : 'rounded-md',
-  outline ? outlineVariants[variant] : solidVariants[variant]
-].join(' ')
+// The first paint. The client script keeps both in step afterwards.
+const badgeClass = badgeClasses(variant, size, rounded, outline)
+const dotClass = badgeDotClasses(variant)
+</script>
+<script client>
+import { badgeClassToggles, badgeDotClassToggles, badgeShowsDot } from '../../../../functions/dashboard-badge'
 
-const dotClass = 'w-1.5 h-1.5 rounded-full mr-1.5 ' + dotColors[variant]
+// Read live as well: callers bind `:variant` to data that arrives after
+// hydration, and the value the server render saw never changed
+// (stacksjs/stacks#3179).
+const liveVariant = useReactiveProp('variant', 'default')
+const liveSize = useReactiveProp('size', 'sm')
+const liveRounded = useReactiveProp('rounded', 'full')
+const liveOutline = useReactiveProp('outline', false)
+const liveDot = useReactiveProp('dot', false)
+const liveBadgeClass = derived(() => badgeClassToggles(liveVariant(), liveSize(), liveRounded(), liveOutline()))
+const liveDotClass = derived(() => badgeDotClassToggles(liveVariant()))
+const showDot = derived(() => badgeShowsDot(liveDot()))
 </script>
-<span class="{{ badgeClass }}">
+<span class="{{ badgeClass }}" :class="liveBadgeClass()">
     @if(dot)
-      <span class="{{ dotClass }}"></span>
+      <span class="{{ dotClass }}" :class="liveDotClass()" :if="showDot()"></span>
     @endif
     <slot />
   </span>

package/resources/components/Dashboard/UI/Button.stx

@@ -1,4 +1,6 @@
 <script server>
+import { buttonVariantClasses } from '../../../../functions/dashboard-button'
+
 interface ButtonProps {
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'bare'
   size?: 'xs' | 'sm' | 'md' | 'lg'
@@ -32,29 +34,6 @@ const {
   href = '',
 } = defineProps<ButtonProps>()
 
-// Variant classes
-const variantClasses = {
-  primary: 'bg-gradient-to-b from-blue-500 to-blue-600 text-white shadow-sm shadow-blue-600/25 hover:from-blue-400 hover:to-blue-500 active:from-blue-600 active:to-blue-700 dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-500 dark:hover:to-blue-600',
-  secondary: 'bg-white/80 dark:bg-white/10 text-neutral-800 dark:text-neutral-100 border border-black/10 dark:border-white/10 shadow-sm hover:bg-white dark:hover:bg-white/15 active:bg-neutral-100 dark:active:bg-white/5',
-  outline: 'bg-transparent text-neutral-700 dark:text-neutral-200 border border-black/15 dark:border-white/15 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/10',
-  ghost: 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/12',
-  danger: 'bg-gradient-to-b from-red-500 to-red-600 text-white shadow-sm shadow-red-600/25 hover:from-red-400 hover:to-red-500 active:from-red-600 active:to-red-700',
-  success: 'bg-gradient-to-b from-green-500 to-green-600 text-white shadow-sm shadow-green-600/25 hover:from-green-400 hover:to-green-500 active:from-green-600 active:to-green-700',
-  warning: 'bg-gradient-to-b from-orange-500 to-orange-600 text-white shadow-sm shadow-orange-600/25 hover:from-orange-400 hover:to-orange-500 active:from-orange-600 active:to-orange-700',
-  /**
-   * No chrome at all: the caller supplies every visual through `class`.
-   *
-   * For an affordance that has to sit inside someone else's layout and carry
-   * no box of its own - a sortable table header fills its `<th>`, and the
-   * padding and fixed height the sizes impose would change the header row.
-   * What it still gets, and the reason to come through this component rather
-   * than write a raw `<button>`, is the shared focus-visible ring, the
-   * disabled and aria-disabled handling, and the press feedback.
-   * See stacksjs/stacks#2926.
-   */
-  bare: ''
-}
-
 // Size classes
 const sizeClasses = {
   xs: 'text-[11px] px-2 py-1 rounded-md gap-1 h-6',
@@ -85,10 +64,17 @@ const buttonClass = [
   fullWidth ? 'w-full' : '',
   // `bare` takes neither: its whole point is to impose no box.
   variant === 'bare' ? '' : (iconOnly ? iconOnlySizes[size] : sizeClasses[size]),
-  variantClasses[variant]
+  buttonVariantClasses[variant]
 ].filter(Boolean).join(' ')
 </script>
 <script client>
+import { buttonVariantToggles } from '../../../../functions/dashboard-button'
+
+// A bound `:variant` changes after the server render; the toggles move the
+// colour with it (stacksjs/stacks#3180).
+const liveVariant = useReactiveProp('variant', 'primary')
+const liveCallerClass = useReactiveProp('class', '')
+const variantToggles = derived(() => buttonVariantToggles(liveVariant(), liveCallerClass()))
 const liveDisabled = useReactiveProp('disabled', false)
 const liveLoading = useReactiveProp('loading', false)
 const livePressed = useReactiveProp('pressed', false)
@@ -117,6 +103,7 @@ const liveAriaExpanded = useReactiveProp('ariaExpanded', '')
       :download="liveDownload() || undefined"
       :aria-label="liveAriaLabel() || undefined"
       class="{{ buttonClass }}"
+        :class="variantToggles()"
       :target="liveTarget() || undefined"
       :rel="liveRel() || undefined"
       :aria-busy="liveLoading() ? 'true' : 'false'"
@@ -134,6 +121,7 @@ const liveAriaExpanded = useReactiveProp('ariaExpanded', '')
         :type="liveType()"
         :form="liveForm() || undefined"
         class="{{ buttonClass }}"
+        :class="variantToggles()"
         :aria-label="liveAriaLabel() || undefined"
         :aria-busy="liveLoading() ? 'true' : 'false'"
         :aria-pressed="String(livePressed())"
@@ -149,6 +137,7 @@ const liveAriaExpanded = useReactiveProp('ariaExpanded', '')
         :type="liveType()"
         :form="liveForm() || undefined"
         class="{{ buttonClass }}"
+        :class="variantToggles()"
         :aria-label="liveAriaLabel() || undefined"
         :aria-haspopup="liveAriaHasPopup() || undefined"
         :aria-expanded="liveAriaExpanded() || undefined"

package/resources/components/Dashboard/UI/Card.stx

@@ -56,6 +56,12 @@ const cardClass = [
   clickableClass,
 ].join(' ')
 </script>
+<script client>
+// A bound `:subtitle` is empty when the card renders on the server, so the
+// line above never rendered at all; this one follows the value once it
+// arrives (stacksjs/stacks#3180). A static subtitle still paints first.
+const liveSubtitle = useReactiveProp('subtitle', '')
+</script>
 
 <article class="{{ cardClass }}" @if(clickable) role="button" tabindex="0" @endif>
   @if($slots.header)
@@ -70,6 +76,8 @@ const cardClass = [
         @endif
         @if(subtitle)
           <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ subtitle }}</p>
+        @else
+          <p :if="liveSubtitle()" class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ liveSubtitle() }}</p>
         @endif
       </div>
       @if($slots.actions)

package/resources/functions/dashboard/sidebar.ts

@@ -471,7 +471,9 @@ export function buildNavSections(
       { to: '/marketing/social-posts', icon: 'clock', text: 'Social Posts' },
       { to: '/marketing/campaigns', icon: 'rocket', text: 'Campaigns' },
       { to: '/marketing/abandoned-carts', icon: 'cart', text: 'Abandoned Carts' },
-      { to: '/marketing/reviews', icon: 'star', text: 'Reviews' },
+      // Product reviews are commerce records, so with commerce off this page
+      // could only say so (stacksjs/stacks#3186).
+      ...(toggles.commerce ? [{ to: '/marketing/reviews', icon: 'star', text: 'Reviews' }] : []),
       ...categoryNavItems(discoveredModels, 'marketing', new Set(['campaign'])),
     ]])
   }
@@ -491,8 +493,15 @@ export function buildNavSections(
       { to: '/analytics/browsers', icon: 'globe', text: 'Browsers' },
       { to: '/analytics/events', icon: 'bolt', text: 'Events' },
       { to: '/analytics/blog', icon: 'document', text: 'Blog' },
-      { to: '/analytics/commerce/web', icon: 'cart', text: 'Commerce' },
-      { to: '/analytics/commerce/sales', icon: 'sale-tag', text: 'Sales' },
+      // Commerce's analytics follow the commerce section. With the feature
+      // off its models are never loaded, so Sales could only answer 503
+      // (stacksjs/stacks#3183).
+      ...(toggles.commerce
+        ? [
+            { to: '/analytics/commerce/web', icon: 'cart', text: 'Commerce' },
+            { to: '/analytics/commerce/sales', icon: 'sale-tag', text: 'Sales' },
+          ]
+        : []),
       { to: '/analytics/marketing', icon: 'megaphone', text: 'Marketing' },
     ]])
   }

package/views/dashboard/layouts/default.stx

@@ -129,6 +129,20 @@ body {
   left: var(--stx-sidebar-width, 250px);
   transition: left 0.3s ease-out;
 }
+/*
+ * The window's sidebar pane while it is in the mobile drawer: it fills the
+ * drawer instead of sitting fixed at its window width, and gives up the
+ * window's z-index so the drawer's close button stays on top of it.
+ */
+[data-dashboard-mobile-sidebar] > [data-stx-component-wrapper] {
+  height: 100%;
+}
+[data-dashboard-mobile-sidebar] [data-stx-sidebar] {
+  position: relative;
+  z-index: auto;
+  width: 100% !important;
+  height: 100%;
+}
 @media (max-width: 1023px) {
   [data-stx-content] {
     margin-left: 0;
@@ -589,11 +603,34 @@ function handleSidebarItemClick(payload: { item?: { href?: string }, event?: { p
   navigate(href)
 }
 
-function syncMobileSidebar() {
+// Where the Sidebar sat in the window while it is lent to the drawer.
+let lentSidebar: { element: HTMLElement, parent: Node, next: Node | null } | null = null
+
+// The Sidebar's component wrapper moves, not just its pane: the wrapper is
+// where the layout's `@itemClick` listens, so a pane moved without it kept
+// selecting rows but never navigated.
+function showSidebarInDrawer() {
+  const pane = sidebarHost.current?.querySelector<HTMLElement>('[data-stx-sidebar]')
+  const element = pane?.closest<HTMLElement>('[data-stx-component-wrapper]') ?? pane
+  const drawer = mobileSidebarHost.current
+  if (element?.parentNode && drawer && !lentSidebar) {
+    lentSidebar = { element, parent: element.parentNode, next: element.nextSibling }
+    drawer.appendChild(element)
+  }
   applyRoleFilter()
   syncActiveSidebarRow()
 }
 
+// Back where it came from, before anything else looks for it. The drawer's
+// markup is already gone by now, so the Sidebar is put back from the
+// reference kept above rather than looked up.
+function returnSidebarFromDrawer() {
+  if (!lentSidebar) return
+  const { element, parent, next } = lentSidebar
+  lentSidebar = null
+  parent.insertBefore(element, next && next.parentNode === parent ? next : null)
+}
+
 function handleCraftSidebarSelection(event: CraftSidebarSelectEvent | undefined): void {
   if (!event?.itemId) return
   for (const pane of sidebarPanes()) {
@@ -658,23 +695,11 @@ onDestroy(() => {
   </Sidebar>
 </div>
 
-<MobileSidebar @open="syncMobileSidebar()">
-  <div ref="dashboardMobileSidebarHost" class="h-full">
-    <Sidebar
-      :sections="sidebarSections"
-      theme="macos"
-      width="320"
-      placement="static"
-      className="h-full max-w-full"
-      @itemClick="handleSidebarItemClick($event)"
-    >
-      <template #header>
-        <!-- A drawer, not the window edge: no window buttons land on it, so
-            there is nothing to draw and nothing to reserve. -->
-        <SidebarHeader windowControls="none" />
-      </template>
-    </Sidebar>
-  </div>
+<!-- The drawer holds the same Sidebar as the window, moved in while it is open
+    (`showSidebarInDrawer`). A second Sidebar here rendered all its rows again
+    on every page and doubled each page's first render (stacksjs/stacks#3177). -->
+<MobileSidebar @open="showSidebarInDrawer()" @close="returnSidebarFromDrawer()">
+  <div ref="dashboardMobileSidebarHost" data-dashboard-mobile-sidebar class="h-full"></div>
 </MobileSidebar>
 
 <main data-stx-content>