@stacksjs/defaults 0.75.244 → 0.75.246

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'
+  import { rbacStore } from '@stacksjs/defaults/views/dashboard/stores/rbac'
 
   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'
+import { DashboardApiError, dashboardApi } from '@stacksjs/defaults/functions/dashboard-api'
+import { pushToast } from '@stacksjs/defaults/functions/toasts'
 
 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'
 
 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'
 import {
   COLOR_MODE_OPTIONS,
   SIDEBAR_STYLE_OPTIONS,
   useAppearance,
-} from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
+} from '@stacksjs/defaults/views/dashboard/composables/useAppearance'
 
 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'
 
 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'
+import { useAuth } from '@stacksjs/defaults/functions/auth'
 
 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>

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

@@ -77,6 +77,17 @@ interface DashboardTableColumn {
    * "On delivery".
    */
   badgeLabels?: Record<string, string>
+  /**
+   * Row field holding the pill's text, when it varies per row rather than per
+   * value.
+   *
+   * `badgeLabels` is a static map, which covers a status whose wording is
+   * fixed. It cannot cover a pill coloured by state but labelled with
+   * something row-specific - a publish pill that is green when published and
+   * grey when not, and reads as the date it happened. Wins over
+   * `badgeLabels` when both are given.
+   */
+  badgeLabelKey?: string
   /**
    * Row field rendered as a second, quieter line under the value.
    *
@@ -355,6 +366,12 @@ function badgeLabel(row: DashboardTableRow, column: DashboardTableColumn): strin
   if (value === null || value === undefined || value === '')
     return column.emptyText ?? '-'
 
+  if (column.badgeLabelKey) {
+    const label = rawValue(row, column.badgeLabelKey)
+    if (label !== null && label !== undefined && label !== '')
+      return String(label)
+  }
+
   const key = String(value)
   const mapped = column.badgeLabels?.[key]
   if (mapped)
@@ -696,16 +713,16 @@ function cellClass(column: DashboardTableColumn, index: number): string {
 
     <div class="flex gap-2 items-center">
       <div :if="columnToggle()" class="relative">
-        <button
-          type="button"
-          aria-haspopup="true"
-          :aria-expanded="columnMenuOpen() ? 'true' : 'false'"
+        <Button
+          variant="outline"
+          size="sm"
+          ariaHasPopup="true"
+          :ariaExpanded="columnMenuOpen() ? 'true' : 'false'"
           @click="columnMenuOpen.set(!columnMenuOpen())"
-          class="inline-flex gap-1.5 items-center px-2.5 py-1.5 text-neutral-600 text-xs dark:text-neutral-300 hover:bg-stone-50 dark:hover:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600"
         >
           <span aria-hidden="true" class="h-3.5 w-3.5 i-hugeicons-layout-table-01"></span>
           Columns
-        </button>
+        </Button>
 
         <div
           :if="columnMenuOpen()"
@@ -774,10 +791,14 @@ function cellClass(column: DashboardTableColumn, index: number): string {
               :style="column.width ? 'width: ' + column.width : undefined"
               :aria-sort="ariaSort(column)"
             >
-              <button
+              {{-- `bare`: a header button fills its `<th>` and carries no box
+                   of its own, so none of the sizes fit. It still comes through
+                   `UI/Button` for the shared focus ring and disabled handling.
+                   See stacksjs/stacks#2926. --}}
+              <Button
                 :if="column.sortable"
-                type="button"
-                :aria-label="sortLabel(column)"
+                variant="bare"
+                :ariaLabel="sortLabel(column)"
                 class="inline-flex gap-1.5 items-center hover:text-stone-700 dark:hover:text-neutral-200"
                 @click="sort(column)"
               >
@@ -786,7 +807,7 @@ function cellClass(column: DashboardTableColumn, index: number): string {
                   aria-hidden="true"
                   :class="'h-3.5 w-3.5 ' + (sortKey() === column.key ? (sortDirection() === 'asc' ? 'i-hugeicons-arrow-up-02' : 'i-hugeicons-arrow-down-02') : 'opacity-30 i-hugeicons-arrow-up-down')"
                 ></span>
-              </button>
+              </Button>
               <span :else>{{ column.label }}</span>
             </th>
           </template>
@@ -936,25 +957,27 @@ function cellClass(column: DashboardTableColumn, index: number): string {
     </div>
 
     <nav class="flex gap-1 items-center" aria-label="Pagination">
-      <button
-        type="button"
-        aria-label="Previous page"
+      <Button
+        variant="outline"
+        size="sm"
+        iconOnly
+        ariaLabel="Previous page"
         :disabled="page() <= 1"
         @click="goToPage(page() - 1)"
-        class="p-1.5 text-neutral-600 dark:text-neutral-300 hover:bg-white dark:hover:bg-neutral-800 border border-stone-300 rounded dark:border-neutral-600 disabled:opacity-40 disabled:cursor-not-allowed"
       >
         <span aria-hidden="true" class="h-4 w-4 i-hugeicons-arrow-left-01"></span>
-      </button>
+      </Button>
       <span class="px-2 tabular-nums text-neutral-600 text-sm dark:text-neutral-300">{{ page() }} / {{ pageCount() }}</span>
-      <button
-        type="button"
-        aria-label="Next page"
+      <Button
+        variant="outline"
+        size="sm"
+        iconOnly
+        ariaLabel="Next page"
         :disabled="page() >= pageCount()"
         @click="goToPage(page() + 1)"
-        class="p-1.5 text-neutral-600 dark:text-neutral-300 hover:bg-white dark:hover:bg-neutral-800 border border-stone-300 rounded dark:border-neutral-600 disabled:opacity-40 disabled:cursor-not-allowed"
       >
         <span aria-hidden="true" class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
-      </button>
+      </Button>
     </nav>
   </div>
 

package/resources/functions/dashboard/data.ts

@@ -21,15 +21,36 @@ import { basename, dirname, resolve } from 'node:path'
 
 let projectRootCache: string | null = null
 
+const VENDORED_DEFAULTS_PREFIX = 'storage/framework/defaults/'
+let defaultsRootCache: string | null = null
+
+/**
+ * The framework defaults tree: `storage/framework/defaults` in a project that
+ * vendors it, `node_modules/@stacksjs/defaults` in one that does not. Counted
+ * from this file first, which is inside that tree in both layouts; the project
+ * root is the fallback for a copy that was bundled somewhere else.
+ */
+function defaultsRoot(): string {
+  if (defaultsRootCache) return defaultsRootCache
+  const own = resolve(dirname(new URL(import.meta.url).pathname), '../../..')
+  const candidates = [
+    own,
+    resolve(projectRoot(), 'storage/framework/defaults'),
+    resolve(projectRoot(), 'node_modules/@stacksjs/defaults'),
+  ]
+  defaultsRootCache = candidates.find(candidate => existsSync(resolve(candidate, 'app/Models'))) ?? candidates[1]!
+  return defaultsRootCache
+}
+
 function projectRoot(): string {
   if (projectRootCache) return projectRootCache
   // Walk up from this file location to find the project root (the dir
-  // that contains `storage/framework/defaults`). This mirrors what
+  // that contains `storage/framework`). This mirrors what
   // `@stacksjs/path` does, but without pulling in the path package
   // (which has its own evaluation graph and would slow page renders).
   let dir = dirname(new URL(import.meta.url).pathname)
   for (let i = 0; i < 12; i++) {
-    if (existsSync(resolve(dir, 'storage/framework/defaults'))) {
+    if (existsSync(resolve(dir, 'storage/framework'))) {
       projectRootCache = dir
       return dir
     }
@@ -132,7 +153,7 @@ async function discoverModelPaths(): Promise<Map<string, string[]>> {
     const paths = new Map<string, string[]>()
     const modelRoots = [
       resolve(root, 'app/Models'),
-      resolve(root, 'storage/framework/defaults/app/Models'),
+      resolve(defaultsRoot(), 'app/Models'),
     ]
 
     for (const modelsRoot of modelRoots) {
@@ -159,7 +180,9 @@ async function discoverModelPaths(): Promise<Map<string, string[]>> {
 async function modelCandidatePaths(name: string): Promise<string[]> {
   const root = projectRoot()
   const discovered = (await discoverModelPaths()).get(name) ?? []
-  const explicit = (MODEL_PATHS[name] ?? []).map(path => resolve(root, path))
+  const explicit = (MODEL_PATHS[name] ?? []).map(path => path.startsWith(VENDORED_DEFAULTS_PREFIX)
+    ? resolve(defaultsRoot(), path.slice(VENDORED_DEFAULTS_PREFIX.length))
+    : resolve(root, path))
   return [...new Set([...discovered, ...explicit])]
 }
 

package/resources/functions/dashboard/sidebar.ts

@@ -111,12 +111,13 @@ interface NavItem {
 }
 
 /**
- * Pull the discovered-models manifest from the framework defaults dir.
+ * Pull the discovered-models manifest `buddy dev:dashboard` writes into the
+ * project's runtime state.
  * Returns the default empty payload when the file is absent (fresh project
  * before the first dashboard run regenerates it).
  */
 export function loadDiscoveredManifest(
-  manifestPath = resolve(process.cwd(), 'storage/framework/defaults/views/dashboard/.discovered-models.json'),
+  manifestPath = resolve(process.cwd(), 'storage/framework/runtime/dashboard/discovered-models.json'),
 ): DiscoveredManifest {
   if (!existsSync(manifestPath))
     return { models: [], sections: defaultToggles(), nav: [] }

package/resources/plugins/preloader.ts

@@ -166,13 +166,21 @@ if (!isRepl && !isPostinstall) {
   // `upgrade` that would fix it. Falling through leaves stx and ts-cloud on
   // their own defaults, which is degraded but recoverable.
   const pathPkg = '@stacksjs/' + 'path'
-  const { applyRuntimeDirectoryEnv } = await import('../../../core/path/src/index.ts')
+  const { applyRuntimeDirectoryEnv, linkPackagedDefaults } = await import('../../../core/path/src/index.ts')
     .catch(() => import(pathPkg))
 
   if (typeof applyRuntimeDirectoryEnv === 'function')
     applyRuntimeDirectoryEnv()
   else
     console.warn('[stacks] installed @stacksjs/path has no applyRuntimeDirectoryEnv; stx and ts-cloud will use their default state directories. Run `buddy upgrade` to refresh the framework packages.')
+
+  // An app that does not vendor the framework defaults gets a gitignored
+  // `storage/framework/defaults` link to the installed package. A fresh clone
+  // has no link until something makes one, so boot does: one lstat when it is
+  // already there, and a no-op for a vendored tree. Guarded for the same
+  // published-version reason as the helper above.
+  if (typeof linkPackagedDefaults === 'function')
+    linkPackagedDefaults()
 }
 
 // stx template engine plugin

package/views/dashboard/layouts/default.stx

@@ -9,10 +9,14 @@
 // now publishes its .stx sources, so the real component resolves and the
 // duplicate markup is gone.
 //
-// Project-root-anchored (`~/`), not relative: the stx client bundler resolves
-// a relative import against the PAGE that extends this layout, not against
-// this file, so `../../..` pointed somewhere different for every page depth.
-import { buildWebSidebarSections } from '~/storage/framework/defaults/resources/functions/dashboard/sidebar'
+// A package specifier, not relative: the stx client bundler resolves a
+// relative import against the PAGE that extends this layout, not against this
+// file, so `../../..` pointed somewhere different for every page depth. Nor
+// a path from the project root (`~/`), where the tree exists only while it is
+// vendored or linked. `@stacksjs/defaults/*` is mapped onto the vendored tree in
+// `storage/framework/tsconfig.app.json` and falls back to the installed
+// package when there is none, so it resolves in both layouts.
+import { buildWebSidebarSections } from '@stacksjs/defaults/resources/functions/dashboard/sidebar'
 
 export const sidebarSections = buildWebSidebarSections()
 
@@ -398,15 +402,15 @@ html[data-appearance="arc"] [data-sidebar-section] > div:first-child {
 // network requests fail or succeed; that signal is rendered in the
 // fixed-position container below the <main> slot. Mounted in the
 // layout so every dashboard page picks it up without opting in.
-// `~/`-anchored for the same reason as the sidebar import above.
-import type { ToastType } from '~/storage/framework/defaults/functions/toasts'
-import type { CraftSidebarSelectEvent } from '~/storage/framework/defaults/functions/craft'
-import { useToasts, dismissToast } from '~/storage/framework/defaults/functions/toasts'
-import { ensureCraftNativeSidebarMarker, useCraftSidebarSelection } from '~/storage/framework/defaults/functions/craft'
-import { readStoredAppearance, useAppearance } from '~/storage/framework/defaults/views/dashboard/composables/useAppearance'
-import { authStore } from '~/storage/framework/defaults/views/dashboard/stores/auth'
-import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
-import { rbacStore } from '~/storage/framework/defaults/views/dashboard/stores/rbac'
+// A package specifier for the same reason as the sidebar import above.
+import type { ToastType } from '@stacksjs/defaults/functions/toasts'
+import type { CraftSidebarSelectEvent } from '@stacksjs/defaults/functions/craft'
+import { useToasts, dismissToast } from '@stacksjs/defaults/functions/toasts'
+import { ensureCraftNativeSidebarMarker, useCraftSidebarSelection } from '@stacksjs/defaults/functions/craft'
+import { readStoredAppearance, useAppearance } from '@stacksjs/defaults/views/dashboard/composables/useAppearance'
+import { authStore } from '@stacksjs/defaults/views/dashboard/stores/auth'
+import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban'
+import { rbacStore } from '@stacksjs/defaults/views/dashboard/stores/rbac'
 const { toasts } = useToasts()
 registerStoresClient({ authStore, kanbanStore, rbacStore })
 

package/views/system-tray/index.stx

@@ -1,5 +1,5 @@
 <script client>
-import { installTrayMenu } from '~/storage/framework/defaults/resources/functions/system-tray'
+import { installTrayMenu } from '@stacksjs/defaults/resources/functions/system-tray'
 
 const projects = state<string[]>([])
 const selected = state('')

package/resources/components/Dashboard/Commerce/Delivery/SearchFilter.stx

@@ -1,24 +0,0 @@
-<script client>
-const placeholder = useReactiveProp('placeholder', 'Search...')
-const query = state('')
-const emit = defineEmits()
-
-effect(() => 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>