@stacksjs/defaults 0.75.243 → 0.75.245

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/functions/dashboard/toggles.ts

@@ -45,12 +45,46 @@ export interface ResolvedDashboardToggles {
   data: DashboardDataRowToggles
 }
 
-export function defaultDashboardToggles(): ResolvedDashboardToggles {
+/**
+ * Dashboard sections that mirror an installable feature.
+ *
+ * A section whose feature is off used to stay in the sidebar anyway, and every
+ * page under it failed: the models those pages query are never loaded, so the
+ * first call came back `Manufacturer.orderByDesc is not a function` and the
+ * endpoint 503'd. Switching commerce off took two edits in two files -
+ * `config/commerce.ts` and `config/dashboard.ts` - and missing the second left
+ * a Commerce section that could not load. See stacksjs/stacks#2928.
+ *
+ * `library`, `analytics`, `management` and `utilities` are deliberately absent:
+ * they have no feature of their own, so they stay on.
+ */
+const FEATURE_BACKED_SECTIONS = {
+  commerce: 'commerce',
+  content: 'cms',
+  marketing: 'marketing',
+} as const
+
+/**
+ * Reads whether a feature is on. Supplied by the caller rather than imported,
+ * because this module is loaded on the dashboard's synchronous path and stays
+ * free of `@stacksjs/*` imports - its sibling `sidebar.ts` says why.
+ *
+ * Omitted, every section defaults on exactly as it did before.
+ */
+export type FeatureResolver = (name: string) => boolean
+
+function sectionFallback(section: keyof typeof FEATURE_BACKED_SECTIONS, isFeatureEnabled?: FeatureResolver): boolean {
+  if (!isFeatureEnabled)
+    return true
+  return isFeatureEnabled(FEATURE_BACKED_SECTIONS[section])
+}
+
+export function defaultDashboardToggles(isFeatureEnabled?: FeatureResolver): ResolvedDashboardToggles {
   return {
     library: true,
-    content: true,
-    commerce: true,
-    marketing: true,
+    content: sectionFallback('content', isFeatureEnabled),
+    commerce: sectionFallback('commerce', isFeatureEnabled),
+    marketing: sectionFallback('marketing', isFeatureEnabled),
     analytics: true,
     management: true,
     utilities: true,
@@ -66,7 +100,7 @@ export function defaultDashboardToggles(): ResolvedDashboardToggles {
   }
 }
 
-export function resolveDashboardToggles(value: unknown): ResolvedDashboardToggles {
+export function resolveDashboardToggles(value: unknown, isFeatureEnabled?: FeatureResolver): ResolvedDashboardToggles {
   const config = objectValue(value, 'dashboard config')
   const sections = config.sections === undefined
     ? {}
@@ -77,9 +111,11 @@ export function resolveDashboardToggles(value: unknown): ResolvedDashboardToggle
 
   return {
     library: sectionEnabled(sections.library, 'library', true),
-    content: sectionEnabled(sections.content, 'content', true),
-    commerce: sectionEnabled(sections.commerce, 'commerce', true),
-    marketing: sectionEnabled(sections.marketing, 'marketing', true),
+    // An explicit `enabled` in config/dashboard.ts still wins, both ways: an
+    // app can show a section whose feature is off, or hide one that is on.
+    content: sectionEnabled(sections.content, 'content', sectionFallback('content', isFeatureEnabled)),
+    commerce: sectionEnabled(sections.commerce, 'commerce', sectionFallback('commerce', isFeatureEnabled)),
+    marketing: sectionEnabled(sections.marketing, 'marketing', sectionFallback('marketing', isFeatureEnabled)),
     analytics: sectionEnabled(sections.analytics, 'analytics', true),
     management: sectionEnabled(sections.management, 'management', true),
     utilities: sectionEnabled(sections.utilities, 'utilities', true),
@@ -157,16 +193,16 @@ export interface LoadedDashboardConfig {
  * One import rather than two: the config module is cache-busted on mtime, so a
  * second load of the same file would be a second evaluation of user code.
  */
-export async function loadDashboardConfig(configPath: string): Promise<LoadedDashboardConfig> {
+export async function loadDashboardConfig(configPath: string, isFeatureEnabled?: FeatureResolver): Promise<LoadedDashboardConfig> {
   if (!existsSync(configPath))
-    return { toggles: defaultDashboardToggles(), nav: [] }
+    return { toggles: defaultDashboardToggles(isFeatureEnabled), nav: [] }
 
   try {
     const moduleUrl = pathToFileURL(configPath)
     moduleUrl.searchParams.set('dashboard-config-mtime', String(statSync(configPath).mtimeMs))
     const configModule = await import(moduleUrl.href) as { default?: unknown }
     return {
-      toggles: resolveDashboardToggles(configModule.default),
+      toggles: resolveDashboardToggles(configModule.default, isFeatureEnabled),
       nav: resolveDashboardNav(configModule.default),
     }
   }

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.ts'
 
 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.ts'
+import type { CraftSidebarSelectEvent } from '@stacksjs/defaults/functions/craft.ts'
+import { useToasts, dismissToast } from '@stacksjs/defaults/functions/toasts.ts'
+import { ensureCraftNativeSidebarMarker, useCraftSidebarSelection } from '@stacksjs/defaults/functions/craft.ts'
+import { readStoredAppearance, useAppearance } from '@stacksjs/defaults/views/dashboard/composables/useAppearance.ts'
+import { authStore } from '@stacksjs/defaults/views/dashboard/stores/auth.ts'
+import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban.ts'
+import { rbacStore } from '@stacksjs/defaults/views/dashboard/stores/rbac.ts'
 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.ts'
 
 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>

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

@@ -1,62 +0,0 @@
-<script client>
-const searchPlaceholder = useReactiveProp('searchPlaceholder', 'Search...')
-const requestedSearch = useReactiveProp('searchValue', '')
-const requestedItemsPerPage = useReactiveProp('itemsPerPage', 10)
-const itemsPerPageOptions = useReactiveProp<number[]>('itemsPerPageOptions', [10, 25, 50, 100])
-const showItemsPerPage = useReactiveProp('showItemsPerPage', true)
-const searchValue = state(requestedSearch())
-const itemsPerPage = state(requestedItemsPerPage())
-const emit = defineEmits()
-
-effect(() => {
-  searchValue.set(requestedSearch())
-})
-
-effect(() => {
-  itemsPerPage.set(requestedItemsPerPage())
-})
-
-function emitSearch(event: Event): void {
-  const value = (event.target as HTMLInputElement).value
-  emit('update:searchValue', value)
-  emit('search', value)
-}
-
-function emitItemsPerPage(event: Event): void {
-  const value = Number((event.target as HTMLSelectElement).value)
-  emit('update:itemsPerPage', value)
-  emit('per-page', value)
-}
-</script>
-
-<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-  <div class="relative flex-1 max-w-sm">
-    <span aria-hidden="true" class="absolute inset-y-0 left-3 my-auto h-4 w-4 text-neutral-400 dark:text-neutral-500 i-hugeicons-search-01"></span>
-    <input
-      x-model="searchValue"
-      type="search"
-      :placeholder="searchPlaceholder()"
-      :aria-label="searchPlaceholder()"
-      class="block pl-9 pr-3 py-1.5 w-full text-[13px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 hover:border-black/20 dark:hover:border-white/25 duration-150 transition-all"
-      @input="emitSearch($event)"
-    />
-  </div>
-
-  <div class="flex flex-wrap gap-2 items-center">
-    <slot />
-  </div>
-
-  <label :if="showItemsPerPage()" class="flex gap-2 items-center ml-auto text-[12px] text-neutral-500 dark:text-neutral-400">
-    <span>Show</span>
-    <select
-      x-model.number="itemsPerPage"
-      aria-label="Items per page"
-      class="px-2 h-7 text-[12px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-500/50 focus:ring-blue-500/40"
-      @change="emitItemsPerPage($event)"
-    >
-      <template :for="option in itemsPerPageOptions()">
-        <option :value="option">{{ option }}</option>
-      </template>
-    </select>
-  </label>
-</div>