@stacksjs/defaults 0.75.326 → 0.75.329

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 413 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 414 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, 413 components, and a multi-section layout.
+The Stacks admin dashboard provides a full-featured admin panel with 100+ route views, 414 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.326",
+  "version": "0.75.329",
   "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.326",
+  "version": "0.75.329",
   "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.326",
-    "@stacksjs/sanitizer": "0.2.711",
-    "@stacksjs/stx": "0.2.711",
+    "@stacksjs/mobile": "0.75.329",
+    "@stacksjs/sanitizer": "0.2.720",
+    "@stacksjs/stx": "0.2.720",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/Dashboard/Commerce/CommerceCouponBreakdown.stx

@@ -27,7 +27,7 @@ function mostUsed(): CouponRecord[] {
 }
 </script>
 
-<section aria-label="Coupon breakdowns" class="grid gap-3 lg:grid-cols-3">
+<section aria-label="Coupon breakdowns" class="grid gap-3 grid-cols-1 lg:grid-cols-3">
   <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><h2 class="font-semibold text-gray-900 text-sm dark:text-white">Status distribution</h2><div class="mt-4 space-y-3"><template :for="item in statuses()" :key="item.label"><div><div class="flex justify-between text-xs"><span class="text-gray-500 dark:text-neutral-400">{{ item.label }}</span><span class="font-mono text-gray-700 dark:text-neutral-200">{{ item.count }}</span></div><div class="mt-1 h-1.5 bg-gray-100 dark:bg-neutral-700 rounded-full"><div :class="'h-full rounded-full ' + item.color" :style="'width: ' + width(item.count)"></div></div></div></template></div></article>
   <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><h2 class="font-semibold text-gray-900 text-sm dark:text-white">Discount types</h2><dl class="mt-3 divide-gray-100 divide-y dark:divide-neutral-700"><template :for="item in discountTypes()" :key="item.label"><div class="flex items-center justify-between py-3"><dt class="text-gray-500 text-sm dark:text-neutral-400">{{ item.label }}</dt><dd class="font-mono text-gray-900 text-sm dark:text-white">{{ item.count }}</dd></div></template></dl></article>
   <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><h2 class="font-semibold text-gray-900 text-sm dark:text-white">Most redeemed</h2><p :if="mostUsed().length === 0" class="mt-4 text-gray-500 text-sm dark:text-neutral-400">No coupon usage recorded.</p><ol :else class="mt-3 divide-gray-100 divide-y dark:divide-neutral-700"><template :for="record in mostUsed()" :key="record.id"><li class="flex items-center justify-between py-2"><span class="font-mono text-gray-600 text-sm truncate dark:text-neutral-300">{{ record.code }}</span><span class="ml-3 font-mono text-gray-900 text-sm dark:text-white">{{ record.usageCount.toLocaleString() }}</span></li></template></ol></article>

package/resources/components/Dashboard/Content/AuthorsDashboard.stx

@@ -193,7 +193,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadAuthors()">Retry</Button></div>
 
-  <section aria-label="Author metrics" class="grid gap-3 sm:grid-cols-3">
+  <section aria-label="Author metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-3">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ authors().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Assigned posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ assignedPostCount() }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ authors()[0]?.name || 'None' }}</p></article>

package/resources/components/Dashboard/Content/ContentTaxonomyDashboard.stx

@@ -206,7 +206,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadRecords()">Retry</Button></div>
 
-  <section :aria-label="title() + ' metrics'" class="grid gap-3 sm:grid-cols-3">
+  <section :aria-label="title() + ' metrics'" class="grid gap-3 grid-cols-1 sm:grid-cols-3">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ records().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">{{ secondaryMetricLabel() }}</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ secondaryMetric() }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ records()[0]?.name || 'None' }}</p></article>

package/resources/components/Dashboard/Content/FileManagerDashboard.stx

@@ -77,7 +77,11 @@ const searchQuery = state('')
 const sortBy = state<'name' | 'lastModified' | 'size'>('name')
 const sortOrder = state<'asc' | 'desc'>('asc')
 const viewMode = state<'grid' | 'list'>('grid')
-const showSidePanel = state(true)
+// A wide screen shows the storage panel beside the files; a narrow one has
+// no room for it, so the same panel opens in a drawer instead.
+const sidePanelOpen = state(true)
+const storageDrawerOpen = state(false)
+const isWideScreen = useMediaQuery('(min-width: 1024px)')
 const loading = state(true)
 const loadError = state('')
 const truncated = state(false)
@@ -165,7 +169,7 @@ const typeRows = derived(() => [
   { key: 'videos', label: 'Videos', bytes: stats().byType.videos, color: 'bg-amber-500' },
   { key: 'audio', label: 'Audio', bytes: stats().byType.audio, color: 'bg-emerald-500' },
   { key: 'other', label: 'Other', bytes: stats().byType.other, color: 'bg-stone-400 dark:bg-neutral-500' },
-])
+].map(row => ({ key: row.key, label: row.label, color: row.color, size: formatFileSize(row.bytes), barStyle: typeBarStyle(row.bytes) })))
 
 const volumePercent = derived(() => {
   const total = stats().disk.totalBytes
@@ -173,9 +177,31 @@ const volumePercent = derived(() => {
   return total && used !== null ? Math.min(100, Math.max(0, used / total * 100)) : 0
 })
 const capacityKnown = derived(() => stats().disk.totalBytes !== null && stats().disk.availableBytes !== null)
+const storageSummary = derived(() => ({
+  files: stats().files,
+  folders: stats().folders,
+  contentSize: formatFileSize(stats().contentBytes),
+  capacityKnown: capacityKnown(),
+  capacityPercent: volumePercent(),
+  available: formatFileSize(stats().disk.availableBytes),
+  total: formatFileSize(stats().disk.totalBytes),
+}))
+const storageFolders = derived(() => topLevelFolders().map(folder => ({ path: folder.path, name: folder.name, count: (folder.items || []).length })))
 const currentFolderLabel = derived(() => currentFolderPath() || 'Storage root')
 const emptyHint = derived(() => searchQuery() ? 'No items match your search.' : 'This folder is empty.')
-const sidePanelClass = derived(() => `border-r border-black/[0.06] dark:border-white/[0.08] bg-[#F5F3EE]/70 dark:bg-neutral-900/40 backdrop-blur-2xl transition-all duration-300 ${showSidePanel() ? 'w-64' : 'w-0 overflow-hidden'}`)
+
+function toggleSidePanel(): void {
+  if (isWideScreen())
+    sidePanelOpen.set(!sidePanelOpen())
+  else
+    storageDrawerOpen.set(true)
+}
+
+effect(() => {
+  if (isWideScreen() && storageDrawerOpen())
+    storageDrawerOpen.set(false)
+})
+
 const segmentBase = 'inline-flex items-center px-2.5 py-1.5 rounded-md text-sm font-medium transition-colors'
 const segmentActive = 'bg-white dark:bg-neutral-700 text-stone-800 dark:text-white shadow-sm'
 const segmentInactive = 'text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200'
@@ -183,13 +209,6 @@ const gridViewClass = derived(() => `${segmentBase} ${viewMode() === 'grid' ? se
 const listViewClass = derived(() => `${segmentBase} ${viewMode() === 'list' ? segmentActive : segmentInactive}`)
 const sortOrderIconClass = derived(() => `${sortOrder() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02'} h-5 w-5`)
 
-function navRowClass(active: boolean): string {
-  const base = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
-  return active
-    ? `${base} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
-    : `${base} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
-}
-
 function gridCardClass(item: FileItem): string {
   const selected = selectedItem()?.id === item.id
   return `group relative overflow-hidden bg-white dark:bg-neutral-800 border rounded-lg shadow-sm hover:shadow-md transition-all cursor-pointer ${selected ? 'border-blue-400 ring-2 ring-blue-500/20' : 'border-gray-200 dark:border-neutral-700 hover:border-blue-300 dark:hover:border-blue-700'}`
@@ -275,6 +294,22 @@ function navigateToFolder(folder: FileItem): void {
   selectedItem.set(null)
 }
 
+function openStorageFolder(path: string): void {
+  currentFolderPath.set(path)
+  selectedItem.set(null)
+  storageDrawerOpen.set(false)
+}
+
+function selectStorageDisk(name: string): void {
+  selectedDisk.set(name)
+  changeDisk()
+}
+
+function uploadFromStoragePanel(): void {
+  storageDrawerOpen.set(false)
+  openUpload()
+}
+
 function onItemClick(item: FileItem): void {
   if (item.type === 'folder')
     navigateToFolder(item)
@@ -409,56 +444,9 @@ onMount(() => { void loadFiles() })
 </script>
 
 <div class="flex min-h-[calc(100dvh-3rem)] bg-white dark:bg-neutral-900">
-  <aside :class="sidePanelClass()">
-    <div class="flex flex-col h-full min-h-[calc(100dvh-3rem)] w-64">
-      <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-        <label class="block">
-          <span class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Storage disk</span>
-          <select x-model="selectedDisk" :disabled="loading()" class="mt-2 px-2.5 py-2 w-full text-sm text-stone-800 dark:text-white bg-white/80 dark:bg-neutral-800 border border-stone-200 rounded-lg dark:border-neutral-700 disabled:opacity-60" @change="changeDisk()">
-            <template :for="disk in disks"><option :value="disk.name">{{ disk.name }}{{ disk.public ? ' (public)' : '' }}</option></template>
-          </select>
-        </label>
-      </div>
-
-      <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-        <div class="flex items-center justify-between">
-          <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Stored content</p>
-          <span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ formatFileSize(stats().contentBytes) }}</span>
-        </div>
-        <div class="grid gap-2 grid-cols-2 mt-3">
-          <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ stats().files }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Files</p></div>
-          <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ stats().folders }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Folders</p></div>
-        </div>
-      </div>
-
-      <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-        <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Content by type</p>
-        <div class="mt-3 space-y-3">
-          <template :for="row in typeRows">
-            <div>
-              <div class="flex items-center justify-between text-[11px]"><span class="text-stone-600 dark:text-neutral-300">{{ row.label }}</span><span class="font-mono text-stone-400 dark:text-neutral-500">{{ formatFileSize(row.bytes) }}</span></div>
-              <div class="overflow-hidden mt-1 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div :class="'h-full rounded-full ' + row.color" :style="typeBarStyle(row.bytes)"></div></div>
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <div :if="capacityKnown()" class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
-        <div class="flex items-center justify-between"><p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Volume capacity</p><span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ volumePercent().toFixed(0) }}%</span></div>
-        <div class="overflow-hidden mt-2 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div class="h-full bg-blue-500 rounded-full" :style="'width: ' + volumePercent().toFixed(2) + '%'"></div></div>
-        <p class="mt-2 text-[11px] text-stone-500 dark:text-neutral-400">{{ formatFileSize(stats().disk.availableBytes) }} available of {{ formatFileSize(stats().disk.totalBytes) }}</p>
-      </div>
-
-      <nav aria-label="Storage folders" class="overflow-y-auto flex-1 p-2">
-        <button type="button" :class="navRowClass(currentFolderPath() === '')" @click="currentFolderPath.set('')"><span class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></span>Home</button>
-        <template :for="folder in topLevelFolders">
-          <button type="button" :class="navRowClass(currentFolderPath() === folder.path)" @click="navigateToFolder(folder)"><span class="h-[18px] w-[18px] text-amber-500 i-hugeicons-folder-02"></span><span class="truncate">{{ folder.name }}</span><span class="ml-auto tabular-nums text-[11px] text-stone-400 dark:text-neutral-500">{{ (folder.items || []).length }}</span></button>
-        </template>
-      </nav>
-
-      <div class="p-3 border-black/[0.06] border-t dark:border-white/[0.08]">
-        <Button :disabled="loading()" fullWidth @click="openUpload()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-upload-01"></span>Upload files</Button>
-      </div>
+  <aside class="hidden lg:block shrink-0 bg-[#F5F3EE]/70 dark:bg-neutral-900/40 border-black/[0.06] border-r dark:border-white/[0.08] backdrop-blur-2xl duration-300 transition-all" :class="sidePanelOpen() ? 'w-64' : 'w-0 overflow-hidden'">
+    <div class="h-full min-h-[calc(100dvh-3rem)] w-64">
+      <FileStoragePanel :disks="disks()" :disk="selectedDisk()" :busy="loading()" :summary="storageSummary()" :type-rows="typeRows()" :folders="storageFolders()" :current-path="currentFolderPath()" @disk="selectStorageDisk" @navigate="openStorageFolder" @upload="uploadFromStoragePanel()" />
     </div>
   </aside>
 
@@ -466,7 +454,7 @@ onMount(() => { void loadFiles() })
     <header class="sticky top-0 z-10 p-4 bg-white/85 dark:bg-neutral-900/85 border-b border-black/[0.06] dark:border-white/[0.08] backdrop-blur-xl">
       <div class="flex flex-wrap gap-3 items-center justify-between">
         <div class="flex items-center min-w-0">
-          <Button variant="ghost" iconOnly ariaLabel="Toggle storage sidebar" @click="showSidePanel.set(!showSidePanel())"><span class="block h-5 w-5 i-hugeicons-menu-01"></span></Button>
+          <Button variant="ghost" iconOnly ariaLabel="Toggle storage sidebar" @click="toggleSidePanel()"><span class="block h-5 w-5 i-hugeicons-menu-01"></span></Button>
           <div class="ml-3 min-w-0"><p class="font-semibold text-stone-900 truncate dark:text-white">{{ currentFolderLabel }}</p><p class="mt-0.5 text-stone-500 text-xs dark:text-neutral-400">{{ selectedDisk }} disk</p></div>
         </div>
         <div class="flex flex-wrap gap-2 items-center">
@@ -541,6 +529,10 @@ onMount(() => { void loadFiles() })
   </div>
 </div>
 
+<Drawer :isOpen="storageDrawerOpen()" title="Storage" :description="selectedDisk() + ' disk'" size="sm" @close="storageDrawerOpen.set(false)">
+  <FileStoragePanel :disks="disks()" :disk="selectedDisk()" :busy="loading()" :summary="storageSummary()" :type-rows="typeRows()" :folders="storageFolders()" :current-path="currentFolderPath()" @disk="selectStorageDisk" @navigate="openStorageFolder" @upload="uploadFromStoragePanel()" />
+</Drawer>
+
 <FileDetailsDrawer :item="selectedItem()" :disk="selectedDisk()" @close="selectedItem.set(null)" />
 
 <CreateFolderDialog

package/resources/components/Dashboard/Content/FileStoragePanel.stx

@@ -0,0 +1,99 @@
+<script client>
+interface StorageDisk {
+  name: string
+  public: boolean
+}
+
+interface StorageSummary {
+  files: number
+  folders: number
+  contentSize: string
+  capacityKnown: boolean
+  capacityPercent: number
+  available: string
+  total: string
+}
+
+interface StorageTypeRow {
+  key: string
+  label: string
+  size: string
+  color: string
+  barStyle: string
+}
+
+interface StorageFolder {
+  path: string
+  name: string
+  count: number
+}
+
+const emptySummary: StorageSummary = { files: 0, folders: 0, contentSize: '0 Bytes', capacityKnown: false, capacityPercent: 0, available: '', total: '' }
+
+const disks = useReactiveProp('disks', [] as StorageDisk[])
+const disk = useReactiveProp('disk', '')
+const busy = useReactiveProp('busy', false)
+const summary = useReactiveProp('summary', emptySummary)
+const typeRows = useReactiveProp('typeRows', [] as StorageTypeRow[])
+const folders = useReactiveProp('folders', [] as StorageFolder[])
+const currentPath = useReactiveProp('currentPath', '')
+const emit = defineEmits(['disk', 'navigate', 'upload'])
+
+function navRowClass(active: boolean): string {
+  const base = 'group flex items-center gap-2.5 px-2.5 py-1.5 w-full text-left font-medium text-[13px] rounded-lg transition-colors'
+  return active
+    ? `${base} bg-black/[0.06] dark:bg-white/[0.09] text-stone-900 dark:text-white`
+    : `${base} text-stone-600 dark:text-neutral-300 hover:bg-black/[0.04] dark:hover:bg-white/[0.06]`
+}
+</script>
+
+<div class="flex flex-col h-full">
+  <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+    <label class="block">
+      <span class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Storage disk</span>
+      <select x-model="disk" :disabled="busy()" class="mt-2 px-2.5 py-2 w-full text-sm text-stone-800 dark:text-white bg-white/80 dark:bg-neutral-800 border border-stone-200 rounded-lg dark:border-neutral-700 disabled:opacity-60" @change="emit('disk', $event.target.value)">
+        <template :for="option in disks"><option :value="option.name">{{ option.name }}{{ option.public ? ' (public)' : '' }}</option></template>
+      </select>
+    </label>
+  </div>
+
+  <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+    <div class="flex items-center justify-between">
+      <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Stored content</p>
+      <span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().contentSize }}</span>
+    </div>
+    <div class="grid gap-2 grid-cols-2 mt-3">
+      <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ summary().files }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Files</p></div>
+      <div class="p-2.5 bg-white/65 dark:bg-white/[0.05] rounded-lg"><p class="font-semibold text-lg text-stone-900 dark:text-white">{{ summary().folders }}</p><p class="text-[11px] text-stone-500 dark:text-neutral-400">Folders</p></div>
+    </div>
+  </div>
+
+  <div class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+    <p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Content by type</p>
+    <div class="mt-3 space-y-3">
+      <template :for="row in typeRows">
+        <div>
+          <div class="flex items-center justify-between text-[11px]"><span class="text-stone-600 dark:text-neutral-300">{{ row.label }}</span><span class="font-mono text-stone-400 dark:text-neutral-500">{{ row.size }}</span></div>
+          <div class="overflow-hidden mt-1 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div :class="'h-full rounded-full ' + row.color" :style="row.barStyle"></div></div>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <div :if="summary().capacityKnown" class="p-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+    <div class="flex items-center justify-between"><p class="font-semibold text-[11px] text-stone-400 tracking-wider uppercase dark:text-neutral-500">Volume capacity</p><span class="font-mono text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().capacityPercent.toFixed(0) }}%</span></div>
+    <div class="overflow-hidden mt-2 h-1.5 bg-black/[0.06] dark:bg-white/[0.08] rounded-full"><div class="h-full bg-blue-500 rounded-full" :style="'width: ' + summary().capacityPercent.toFixed(2) + '%'"></div></div>
+    <p class="mt-2 text-[11px] text-stone-500 dark:text-neutral-400">{{ summary().available }} available of {{ summary().total }}</p>
+  </div>
+
+  <nav aria-label="Storage folders" class="overflow-y-auto flex-1 p-2">
+    <button type="button" :class="navRowClass(currentPath() === '')" @click="emit('navigate', '')"><span class="h-[18px] w-[18px] text-blue-500 i-hugeicons-home-02"></span>Home</button>
+    <template :for="folder in folders">
+      <button type="button" :class="navRowClass(currentPath() === folder.path)" @click="emit('navigate', folder.path)"><span class="h-[18px] w-[18px] text-amber-500 i-hugeicons-folder-02"></span><span class="truncate">{{ folder.name }}</span><span class="ml-auto tabular-nums text-[11px] text-stone-400 dark:text-neutral-500">{{ folder.count }}</span></button>
+    </template>
+  </nav>
+
+  <div class="p-3 border-black/[0.06] border-t dark:border-white/[0.08]">
+    <Button :disabled="busy()" fullWidth @click="emit('upload')"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-upload-01"></span>Upload files</Button>
+  </div>
+</div>

package/resources/components/Dashboard/Content/PagesDashboard.stx

@@ -207,7 +207,7 @@ onMount(() => {
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPages()">Retry</Button></div>
 
-  <section aria-label="Page metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+  <section aria-label="Page metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ pages().length }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Conversions</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalConversions()) }}</p></article>

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

@@ -60,7 +60,7 @@ function formatBytes(value: number): string {
         </div>
         <div class="flex-shrink-0 text-right">
           <time class="block text-gray-500 text-xs dark:text-neutral-400" :datetime="selected()?.sentAt || ''">{{ formatDate(selected()?.sentAt || '') }}</time>
-          <span class="block mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ formatBytes(selected()?.size || 0) }}</span>
+          <span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ formatBytes(selected()?.size || 0) }}</span>
         </div>
       </div>
     </header>

package/resources/components/Dashboard/Infrastructure/ServerlessDashboard.stx

@@ -214,7 +214,7 @@ onMount(() => {
   <section :if="links().length > 0">
     <h2 class="font-semibold text-neutral-900 dark:text-white">Manifest relationships</h2>
     <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Accessible relationship records derived from the same manifests.</p>
-    <ul class="grid gap-3 md:grid-cols-2 mt-4">
+    <ul class="grid gap-3 grid-cols-1 md:grid-cols-2 mt-4">
       <li :for="link in links()" class="flex gap-3 items-center p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <span class="font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ relationshipName(link.source) }}</span>
         <span class="shrink-0 px-2 py-1 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">{{ link.type }}</span>

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

@@ -26,7 +26,10 @@ const sizeClasses: Record<TabsSize, string> = {
 }
 
 const containerClasses: Record<TabsVariant, string> = {
-  underline: 'border-b border-neutral-200 dark:border-neutral-700',
+  // An inset shadow, not a border: the list scrolls sideways on a narrow
+  // screen, and a scroller clips anything (like a tab pulled over a border)
+  // that hangs outside it. The selected tab's underline still covers it.
+  underline: 'shadow-[inset_0_-1px_0_#e5e5e5] dark:shadow-[inset_0_-1px_0_#404040]',
   pills: 'gap-2 bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg',
   boxed: 'border border-neutral-200 dark:border-neutral-700 rounded-lg p-1',
 }
@@ -48,7 +51,7 @@ function selectTab(tab: DashboardTab): void {
 function tabClass(tab: DashboardTab): string {
   const selected = activeTab() === tab.id
   const common = [
-    'inline-flex items-center justify-center gap-2 font-medium transition-all duration-150',
+    'inline-flex shrink-0 items-center justify-center gap-2 font-medium whitespace-nowrap transition-all duration-150 focus-visible:outline-offset-[-2px]',
     sizeClasses[size()],
     fullWidth() ? 'flex-1' : '',
     tab.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
@@ -67,7 +70,7 @@ function tabClass(tab: DashboardTab): string {
       : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800/50')
   }
   else {
-    common.push('-mb-px border-b-2')
+    common.push('border-b-2')
     common.push(selected
       ? 'border-blue-500 text-blue-600 dark:text-blue-400'
       : 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-200')
@@ -83,7 +86,7 @@ function badgeClass(tab: DashboardTab): string {
 }
 </script>
 
-<div role="tablist" :class="'flex ' + (fullWidth() ? 'w-full ' : '') + containerClasses[variant()]">
+<div role="tablist" :class="'flex overflow-x-auto ' + (fullWidth() ? 'w-full ' : '') + containerClasses[variant()]">
   <template :for="tab in tabs()">
     <button
       type="button"