@stacksjs/defaults 0.75.243 → 0.75.245

package/resources/components/Dashboard/Library/ComponentsDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -25,18 +26,28 @@ const totalBytes = state(0)
 const sourceRoot = state('resources/components')
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const selectedCategory = state('All')
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
 
-function visibleComponents(): ComponentRow[] {
-  const query = search().trim().toLowerCase()
-  return components().filter(component => (
-    (selectedCategory() === 'All' || component.category === selectedCategory())
-    && (!query || [component.name, component.path, component.category].some(value => value.toLowerCase().includes(query)))
-  ))
+const COLUMNS = [
+  { key: 'name', label: 'Component', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  // A neutral pill with no per-value styling, which is what a badge column
+  // renders when it is given no `badgeClasses`.
+  { key: 'category', label: 'Category', type: 'badge' as const, sortable: true },
+  { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-xs text-gray-500 dark:text-neutral-400' },
+  // `sizeLabel` is what the cell shows; `bytes` stays on the row so a future
+  // numeric sort has something to read.
+  { key: 'sizeLabel', label: 'Size', sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+  { key: 'updatedAt', label: 'Updated', type: 'datetime' as const, sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+]
+
+/** `UI/Table` owns the search, so this applies only the category filter. */
+function visibleComponents(): Array<ComponentRow & { sizeLabel: string }> {
+  return components()
+    .filter(component => selectedCategory() === 'All' || component.category === selectedCategory())
+    .map(component => ({ ...component, sizeLabel: formatBytes(component.bytes) }))
 }
 
 function formatBytes(bytes: number): string {
@@ -45,13 +56,6 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024).toFixed(1)} kB`
 }
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
 async function loadComponents(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -167,73 +171,35 @@ onMount(() => {
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-    <div class="flex flex-col gap-3 sm:flex-row p-4 border-b border-gray-200 dark:border-neutral-700">
-      <label class="flex-1 min-w-0">
-        <span class="sr-only">Search components</span>
-        <input
-          x-model="search"
-          type="search"
-          placeholder="Search name, category, or path"
-          class="px-3 py-2 max-w-lg w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"
-        >
-      </label>
-      <label>
-        <span class="sr-only">Filter by category</span>
-        <select
-          x-model="selectedCategory"
-          aria-label="Filter by category"
-          class="px-3 py-2 w-full sm:w-48 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"
-        >
-          <option :for="category in categories()" :value="category">{{ category }}</option>
-        </select>
-      </label>
-    </div>
-
-    <div class="overflow-x-auto">
-      <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-gray-50 dark:bg-neutral-900/50">
-          <tr>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Component</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Category</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Path</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Size</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Updated</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :if="loading()">
-            <tr>
-              <td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">
-                <span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
-                Scanning component sources
-              </td>
-            </tr>
-          </template>
-          <template :else-if="visibleComponents().length === 0">
-            <tr>
-              <td colspan="5" class="px-4 py-14 text-center">
-                <span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-layout-table-01"></span>
-                <p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No components found</p>
-                <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create a component or adjust the filters.</p>
-              </td>
-            </tr>
-          </template>
-          <template :else>
-            <template :for="component in visibleComponents()">
-              <tr>
-                <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ component.name }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">
-                  <span class="px-2 py-1 text-xs bg-gray-100 dark:bg-neutral-700 rounded-full" :text="component.category"></span>
-                </td>
-                <td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ component.path }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatBytes(component.bytes) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(component.updatedAt) }}</td>
-              </tr>
-            </template>
-          </template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="COLUMNS"
+      :data="visibleComponents()"
+      :loading="loading()"
+      row-key="path"
+      searchable
+      search-placeholder="Search name, category, or path"
+      paginated
+      :page-size="25"
+      empty-title="No components found"
+      empty-description="Adjust the search or category filter."
+    >
+      <template #toolbar>
+        <label>
+          <span class="sr-only">Filter by category</span>
+          {{-- `x-text` rather than `{{ category }}`: an interpolation inside
+               slot content is preserved but never evaluated on the installed
+               stx, while the attribute forms read the loop variable fine.
+               See stacksjs/stx#2095. --}}
+          <select
+            x-model="selectedCategory"
+            aria-label="Filter by category"
+            class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600"
+          >
+            <option :for="category in categories()" :value="category" x-text="category"></option>
+          </select>
+        </label>
+      </template>
+    </Table>
   </section>
 </div>
 

package/resources/components/Dashboard/Library/FunctionsDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -18,14 +19,21 @@ const totalBytes = state(0)
 const sourceRoot = state('resources/functions')
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
 
-function visibleFunctions(): FunctionRow[] {
-  const query = search().trim().toLowerCase()
-  return functions().filter(fn => !query || [fn.name, fn.path, fn.extension].some(value => value.toLowerCase().includes(query)))
+const COLUMNS = [
+  { key: 'name', label: 'Function', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-xs text-gray-500 dark:text-neutral-400' },
+  // `bytes` so it sorts numerically; `sizeLabel` is what the cell shows.
+  { key: 'sizeLabel', label: 'Size', sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+  { key: 'updatedAt', label: 'Updated', type: 'datetime' as const, sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+]
+
+/** `UI/Table` owns the search, so this only shapes the rows it reads. */
+function visibleFunctions(): Array<FunctionRow & { sizeLabel: string }> {
+  return functions().map(fn => ({ ...fn, sizeLabel: formatBytes(fn.bytes) }))
 }
 
 function formatBytes(bytes: number): string {
@@ -34,11 +42,6 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024).toFixed(1)} kB`
 }
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
 async function loadFunctions(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -107,12 +110,18 @@ onMount(() => { void loadFunctions() })
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-    <div class="p-4 border-b border-gray-200 dark:border-neutral-700"><label><span class="sr-only">Search functions</span><input x-model="search" type="search" placeholder="Search name or path" class="px-3 py-2 max-w-md w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label></div>
-    <div class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Function</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Path</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Size</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Updated</th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-      <template :if="loading()"><tr><td colspan="4" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Scanning function sources</td></tr></template>
-      <template :else-if="visibleFunctions().length === 0"><tr><td colspan="4" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-function"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No functions found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create a function or adjust the search.</p></td></tr></template>
-      <template :else><template :for="fn in visibleFunctions()"><tr><td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ fn.name }}</td><td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ fn.path }}</td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatBytes(fn.bytes) }}</td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(fn.updatedAt) }}</td></tr></template></template>
-    </tbody></table></div>
+    <Table
+      :columns="COLUMNS"
+      :data="visibleFunctions()"
+      :loading="loading()"
+      row-key="path"
+      searchable
+      search-placeholder="Search name or path"
+      paginated
+      :page-size="25"
+      empty-title="No functions found"
+      empty-description="Create a function or adjust the search."
+    />
   </section>
 </div>
 

package/resources/components/Dashboard/Library/PackagesDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -21,15 +22,42 @@ const privateCount = state(0)
 const dependencyCount = state(0)
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const visibility = state('all')
 
-function visiblePackages(): PackageRow[] {
-  const query = search().trim().toLowerCase()
-  return packages().filter(pkg =>
-    (visibility() === 'all' || (visibility() === 'public' ? !pkg.private : pkg.private))
-    && (!query || [pkg.name, pkg.description, pkg.path].some(value => value.toLowerCase().includes(query))),
-  )
+const COLUMNS = [
+  // Slotted for the conditional link: a package with a `url` is a link to it,
+  // one without is plain text, and the description sits under either.
+  { key: 'name', label: 'Package', sortable: true, slotted: true, class: 'max-w-md' },
+  { key: 'version', label: 'Version', sortable: true, emptyText: 'Unversioned', class: 'font-mono text-gray-500 dark:text-neutral-400' },
+  {
+    key: 'visibility',
+    label: 'Visibility',
+    type: 'badge' as const,
+    sortable: true,
+    searchable: false,
+    badgeClasses: {
+      public: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      private: 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+    },
+  },
+  { key: 'dependencyCount', label: 'Dependencies', type: 'number' as const, sortable: true },
+  { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-xs text-gray-500 dark:text-neutral-400' },
+]
+
+/**
+ * `UI/Table` owns the search, so this only applies the visibility filter.
+ * `visibility` and `descriptionLabel` are computed per row because a column
+ * reads a field: a badge column maps a row value, and the description needs
+ * its own fallback wording.
+ */
+function visiblePackages(): Array<PackageRow & { visibility: string, descriptionLabel: string }> {
+  return packages()
+    .filter(pkg => visibility() === 'all' || (visibility() === 'public' ? !pkg.private : pkg.private))
+    .map(pkg => ({
+      ...pkg,
+      visibility: pkg.private ? 'private' : 'public',
+      descriptionLabel: pkg.description || 'No package description',
+    }))
 }
 
 async function loadPackages(): Promise<void> {
@@ -72,11 +100,38 @@ onMount(() => { void loadPackages() })
   </section>
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-    <div class="flex flex-col gap-3 sm:flex-row p-4 border-b border-gray-200 dark:border-neutral-700"><label class="flex-1"><span class="sr-only">Search packages</span><input x-model="search" type="search" placeholder="Search name, description, or path" class="px-3 py-2 max-w-xl w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="sr-only">Filter package visibility</span><select x-model="visibility" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All workspaces</option><option value="public">Public</option><option value="private">Private</option></select></label></div>
-    <div class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Package</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Version</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Visibility</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Dependencies</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Path</th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-      <template :if="loading()"><tr><td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Reading workspace manifests</td></tr></template>
-      <template :else-if="visiblePackages().length === 0"><tr><td colspan="5" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-package"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No packages found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or visibility filter.</p></td></tr></template>
-      <template :else><template :for="pkg in visiblePackages()"><tr><td class="px-4 py-3 max-w-md"><a :if="pkg.url" :href="pkg.url" target="_blank" rel="noreferrer" class="font-medium text-blue-700 text-sm dark:text-blue-300 hover:underline">{{ pkg.name }}</a><span :else class="font-medium text-gray-900 text-sm dark:text-white">{{ pkg.name }}</span><p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ pkg.description || 'No package description' }}</p></td><td class="px-4 py-3 font-mono text-gray-500 text-sm dark:text-neutral-400">{{ pkg.version || 'Unversioned' }}</td><td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (pkg.private ? 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700' : 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40')">{{ pkg.private ? 'Private' : 'Public' }}</span></td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ pkg.dependencyCount }}</td><td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ pkg.path }}</td></tr></template></template>
-    </tbody></table></div>
+    {{-- Slot bodies use `x-text` rather than `{{ }}`: a scoped slot binds
+         `row` at runtime, and the attribute forms read it, while an
+         interpolation in slot content is preserved but never evaluated.
+         See stacksjs/stx#2095. --}}
+    <Table
+      :columns="COLUMNS"
+      :data="visiblePackages()"
+      :loading="loading()"
+      row-key="path"
+      searchable
+      search-placeholder="Search name, description, or path"
+      paginated
+      :page-size="25"
+      empty-title="No packages found"
+      empty-description="Adjust the search or visibility filter."
+    >
+      <template #toolbar>
+        <label>
+          <span class="sr-only">Filter package visibility</span>
+          <select x-model="visibility" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600">
+            <option value="all">All workspaces</option>
+            <option value="public">Public</option>
+            <option value="private">Private</option>
+          </select>
+        </label>
+      </template>
+
+      <template #cell="{ row }">
+        <a :if="row.url" :href="row.url" target="_blank" rel="noreferrer" class="font-medium text-blue-700 text-sm dark:text-blue-300 hover:underline" x-text="row.name"></a>
+        <span :else class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.name"></span>
+        <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400" x-text="row.descriptionLabel"></p>
+      </template>
+    </Table>
   </section>
 </div>

package/resources/components/Dashboard/Management/PermissionsDashboard.stx

@@ -13,8 +13,8 @@
   //   - All state in the rbacStore; the page is pure presentation.
   //   - Mutations are optimistic with rollback on failure (store handles
   //     the snapshot/rollback dance).
-  import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
-  import { rbacStore } from '~/storage/framework/defaults/views/dashboard/stores/rbac'
+  import { useRole } from '@stacksjs/defaults/views/dashboard/composables/useRole.ts'
+  import { rbacStore } from '@stacksjs/defaults/views/dashboard/stores/rbac.ts'
 
   const rbac = rbacStore
   // Admin-only surface. Per `useRole.ts`, `isAdmin()` returns true for
@@ -63,12 +63,12 @@
 
   const activeTab = state('roles')
 
-  function tabClass(id: string) {
-    const base = 'px-4 py-2 font-medium text-sm whitespace-nowrap bg-transparent border-b-2 transition-colors cursor-pointer '
-    return activeTab() === id
-      ? base + 'border-violet-400 text-violet-600 dark:text-violet-400'
-      : base + 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
-  }
+  const PERMISSION_TABS = [
+    { id: 'roles', label: 'Roles' },
+    { id: 'permissions', label: 'Permissions' },
+    { id: 'users', label: 'Users' },
+    { id: 'matrix', label: 'Role × Permission' },
+  ]
 
   function selectTab(id: string) {
     activeTab.set(id)
@@ -356,13 +356,10 @@
     </div>
 
     <div :if="!loading">
-      <!-- Tabs -->
-      <div class="flex mb-6 border-b border-zinc-200 dark:border-zinc-800">
-        <button type="button" @click="selectTab('roles')" :class="tabClass('roles')">Roles</button>
-        <button type="button" @click="selectTab('permissions')" :class="tabClass('permissions')">Permissions</button>
-        <button type="button" @click="selectTab('users')" :class="tabClass('users')">Users</button>
-        <button type="button" @click="selectTab('matrix')" :class="tabClass('matrix')">Role × Permission</button>
-      </div>
+      {{-- `UI/Tabs` rather than four buttons: it carries the `role="tab"` /
+           `aria-selected` semantics this strip had none of, so the tab row is
+           navigable by assistive tech. See stacksjs/stacks#2924. --}}
+      <Tabs class="mb-6" :tabs="PERMISSION_TABS" :active-tab="activeTab()" @update:activeTab="selectTab($event)" />
 
       <!-- ─── Roles tab ─────────────────────────────────────── -->
       <div :if="activeTab() === 'roles'" class="space-y-6">

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

@@ -6,9 +6,9 @@
 // All querying is server-side (`GET /api/dashboard/models/{slug}`), so this
 // works the same on a table with 10 rows and one with a million. Rows and
 // writes go through the model, so scopes, casts and observers apply.
-import { useNavigation } from '~/storage/framework/defaults/views/dashboard/composables/useNavigation'
-import { DashboardApiError, dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
-import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+import { useNavigation } from '@stacksjs/defaults/views/dashboard/composables/useNavigation.ts'
+import { DashboardApiError, dashboardApi } from '@stacksjs/defaults/functions/dashboard-api.ts'
+import { pushToast } from '@stacksjs/defaults/functions/toasts.ts'
 
 interface ColumnMeta {
   name: string

package/resources/components/Dashboard/Settings/AppearanceSettingsDashboard.stx

@@ -3,7 +3,7 @@
 // layout uses, so the list can never drift from what the sidebar renders -
 // including sections a project has switched off in config/dashboard.ts, which
 // simply are not here to toggle.
-import { buildWebSidebarSections } from '~/storage/framework/defaults/resources/functions/dashboard/sidebar'
+import { buildWebSidebarSections } from '@stacksjs/defaults/resources/functions/dashboard/sidebar.ts'
 
 export const navSections = buildWebSidebarSections()
   .filter(section => section.label && section.items.length > 0)
@@ -19,12 +19,12 @@ defineClientPayload({ navSections })
 </script>
 
 <script client>
-import type { ColorMode, SidebarStyle } from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
+import type { ColorMode, SidebarStyle } from '@stacksjs/defaults/views/dashboard/composables/useAppearance.ts'
 import {
   COLOR_MODE_OPTIONS,
   SIDEBAR_STYLE_OPTIONS,
   useAppearance,
-} from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
+} from '@stacksjs/defaults/views/dashboard/composables/useAppearance.ts'
 
 const appearance = useAppearance()
 

package/resources/components/Dashboard/Settings/SettingsDashboard.stx

@@ -1,5 +1,5 @@
 <script client>
-import { dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
+import { dashboardApi } from '@stacksjs/defaults/functions/dashboard-api.ts'
 
 interface ConfigFile {
   name: string

package/resources/components/Dashboard/Teams/TeamInvitationDashboard.stx

@@ -1,6 +1,6 @@
 <script client>
-import { dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
-import { useAuth } from '~/storage/framework/defaults/functions/auth'
+import { dashboardApi } from '@stacksjs/defaults/functions/dashboard-api.ts'
+import { useAuth } from '@stacksjs/defaults/functions/auth.ts'
 
 interface Invitation {
   teamId: number

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

@@ -1,6 +1,6 @@
 <script server>
 interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning'
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning' | 'bare'
   size?: 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   loading?: boolean
@@ -40,7 +40,19 @@ const variantClasses = {
   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'
+  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
@@ -71,7 +83,8 @@ const buttonClass = [
     : '',
   customClass,
   fullWidth ? 'w-full' : '',
-  iconOnly ? iconOnlySizes[size] : sizeClasses[size],
+  // `bare` takes neither: its whole point is to impose no box.
+  variant === 'bare' ? '' : (iconOnly ? iconOnlySizes[size] : sizeClasses[size]),
   variantClasses[variant]
 ].filter(Boolean).join(' ')
 </script>
@@ -86,6 +99,17 @@ const liveRel = useReactiveProp('rel', '')
 const liveType = useReactiveProp('type', 'button')
 const liveForm = useReactiveProp('form', '')
 const liveAriaLabel = useReactiveProp('ariaLabel', '')
+/**
+ * For a button that opens a menu or a disclosure.
+ *
+ * An arbitrary `aria-*` attribute written on `<Button>` is not forwarded, so a
+ * caller that needs these has to be given them. The column-visibility toggle
+ * in `UI/Table` lost both when it moved off a raw `<button>` - the menu still
+ * worked and a screen reader no longer knew it was a popup, or whether it was
+ * open. See stacksjs/stacks#2926.
+ */
+const liveAriaHasPopup = useReactiveProp('ariaHasPopup', '')
+const liveAriaExpanded = useReactiveProp('ariaExpanded', '')
 </script>
 @if(tag === 'a' || (href && href.length > 0))
     <a
@@ -126,6 +150,8 @@ const liveAriaLabel = useReactiveProp('ariaLabel', '')
         :form="liveForm() || undefined"
         class="{{ buttonClass }}"
         :aria-label="liveAriaLabel() || undefined"
+        :aria-haspopup="liveAriaHasPopup() || undefined"
+        :aria-expanded="liveAriaExpanded() || undefined"
         :aria-busy="liveLoading() ? 'true' : 'false'"
         :disabled="liveDisabled() || liveLoading()"
       >

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

@@ -0,0 +1,46 @@
+<script client>
+/**
+ * The dashboard's search input.
+ *
+ * Promoted here from `Commerce/Delivery/` because it is the shape that won.
+ * `UI/FilterBar` offered the same input plus a slot for sibling filters and an
+ * items-per-page select, and had no callers at all after all this time, while
+ * this had seven - callers lay out their own filter grid and want one input to
+ * drop into it, not a bar that owns the row. FilterBar is deleted rather than
+ * kept unused. See stacksjs/stacks#2924.
+ *
+ * `searchValue` is the one thing FilterBar had right and this did not: the
+ * parent can seed the box, so a filter restored from the URL or from storage
+ * shows up in it instead of being invisible.
+ */
+const placeholder = useReactiveProp('placeholder', 'Search...')
+const requested = useReactiveProp('searchValue', '')
+const query = state(requested())
+const emit = defineEmits()
+
+effect(() => {
+  query.set(requested())
+})
+
+effect(() => {
+  emit('update:searchValue', query())
+  emit('search', query())
+})
+</script>
+
+<div>
+  <div class="relative rounded-md shadow-sm">
+    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+      <span class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></span>
+    </div>
+    <input
+      type="search"
+      name="search"
+      :placeholder="placeholder()"
+      :aria-label="placeholder()"
+      x-model="query"
+      autocomplete="off"
+      class="block pl-10 pr-3 py-2.5 w-full leading-6 text-gray-900 text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+    >
+  </div>
+</div>