@plutocms/pluto 0.11.0 → 0.12.0

package/app/components/Pluto/Dashboard/PlutoDashboardContentOverview.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+// Core's own dashboard widget: one stat tile per content type. Counts are
+// a handful of headline numbers, so they show as tiles, not as a chart. A
+// type with a status workflow also shows a meter of its published share.
+// The meter has a text label next to it, so the share never depends on
+// color alone. "+N this week" comes from the shared activity data, so it
+// costs no extra request.
+const { items: contentTypes } = usePlutoContentTypes()
+const { stats, pending, error, refresh } = usePlutoContentStats()
+const { data: activity } = usePlutoContentActivity()
+
+const number = new Intl.NumberFormat()
+
+function retry() {
+  refresh().catch(() => {})
+}
+
+function publishedPercent(stat: PlutoContentStat): number {
+  return stat.total > 0 ? Math.round(((stat.published ?? 0) / stat.total) * 100) : 0
+}
+
+/** Items created this week, or `undefined` when activity is not available. */
+function thisWeek(stat: PlutoContentStat): number | undefined {
+  return activity.value.find((entry) => entry.name === stat.name)?.points.at(-1)?.count
+}
+</script>
+
+<template>
+  <section v-if="contentTypes.length" aria-label="Content overview">
+    <UAlert
+      v-if="error && !stats.length"
+      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-alert"
+      title="Could not load the content counts"
+    />
+
+    <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <template v-if="pending && !stats.length">
+        <UCard v-for="entry in contentTypes" :key="entry.id">
+          <div class="flex flex-col gap-3">
+            <USkeleton class="h-4 w-24" />
+            <USkeleton class="h-8 w-16" />
+            <USkeleton class="h-1.5 w-full" />
+          </div>
+        </UCard>
+      </template>
+
+      <NuxtLink
+        v-for="stat in stats"
+        v-else
+        :key="stat.name"
+        :to="stat.path"
+        class="group focus-visible:outline-primary rounded-lg focus-visible:outline-2"
+      >
+        <UCard class="group-hover:ring-accented h-full transition-shadow group-hover:shadow-sm">
+          <div class="flex flex-col gap-3">
+            <div class="flex items-start justify-between gap-3">
+              <p class="text-muted text-sm font-medium">{{ stat.labelPlural }}</p>
+              <span class="bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md">
+                <UIcon :name="stat.icon ?? 'lucide:file'" class="size-4" />
+              </span>
+            </div>
+
+            <div class="flex items-baseline gap-2">
+              <p class="text-highlighted text-3xl font-semibold tracking-tight tabular-nums">
+                {{ number.format(stat.total) }}
+              </p>
+              <p v-if="thisWeek(stat) !== undefined" class="text-sm">
+                <template v-if="thisWeek(stat)">
+                  <span class="text-success font-medium tabular-nums">+{{ number.format(thisWeek(stat)!) }}</span>
+                  <span class="text-muted"> this week</span>
+                </template>
+                <span v-else class="text-dimmed">none new this week</span>
+              </p>
+            </div>
+
+            <template v-if="stat.published !== undefined">
+              <div
+                :aria-valuenow="stat.published"
+                :aria-valuemax="stat.total"
+                :aria-label="`${stat.published} of ${stat.total} ${stat.labelPlural.toLowerCase()} published`"
+                role="meter"
+                aria-valuemin="0"
+                class="bg-accented flex h-1.5 overflow-hidden rounded-full"
+              >
+                <div :style="{ width: `${publishedPercent(stat)}%` }" class="bg-primary rounded-full" />
+              </div>
+
+              <p class="text-muted text-sm">
+                <span class="text-highlighted font-medium tabular-nums">{{ number.format(stat.published) }}</span>
+                published ·
+                <span class="tabular-nums">{{ number.format(stat.drafts ?? 0) }}</span>
+                {{ stat.drafts === 1 ? 'draft' : 'drafts' }}
+              </p>
+            </template>
+          </div>
+        </UCard>
+      </NuxtLink>
+    </div>
+  </section>
+</template>

package/app/components/Pluto/Dashboard/PlutoDashboardQuickActions.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// Core's quick actions widget. It reuses the command palette's commands, so
+// the two never disagree: every "New <label>" command the user can run, and
+// a few admin destinations.
+const groups = usePlutoCommandPalette()
+
+const create = computed(() => groups.value.find((group) => group.id === 'pluto-create')?.items ?? [])
+
+const goTo = computed(() =>
+  (groups.value.find((group) => group.id === 'pluto-go-to')?.items ?? [])
+    // Home is the page this widget is on.
+    .filter((item) => item.label !== 'Home')
+    .slice(0, 4)
+)
+
+function run(item: {
+ onSelect?: (event: Event) => void
+}) {
+  item.onSelect?.(new Event('select'))
+}
+</script>
+
+<template>
+  <UCard class="h-full">
+    <template #header>
+      <h3 class="text-highlighted font-semibold">Quick actions</h3>
+      <p class="text-muted text-sm">
+        Press
+        <UKbd value="meta" size="sm" />
+        <UKbd value="k" size="sm" />
+        to search everything.
+      </p>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <div v-if="create.length" class="flex flex-col gap-2">
+        <UButton
+          v-for="item in create"
+          :key="item.label"
+          :label="item.label"
+          icon="lucide:plus"
+          color="neutral"
+          variant="soft"
+          size="md"
+          class="justify-start"
+          block
+          @click="run(item)"
+        />
+      </div>
+
+      <div v-if="goTo.length" class="flex flex-col gap-1">
+        <p class="text-dimmed text-xs font-medium tracking-wide uppercase">Go to</p>
+        <UButton
+          v-for="item in goTo"
+          :key="item.label"
+          :label="item.label"
+          :icon="typeof item.icon === 'string' ? item.icon : 'lucide:arrow-right'"
+          :ui="{ trailingIcon: 'ms-auto text-dimmed' }"
+          trailing-icon="lucide:chevron-right"
+          color="neutral"
+          variant="ghost"
+          size="md"
+          class="justify-start"
+          block
+          @click="run(item)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts"></script>
 
 <template>
+  <!--
+    `data-pluto-admin-scope` keeps the admin theme on this bar when it shows
+    on the public site for a logged-in admin. See admin-theme.css.
+  -->
   <nav
-    class="light:bg-white light:border-black/10 font-outfit fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
+    class="text-default fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b border-default bg-(--pluto-admin-navbar)"
+    data-pluto-admin-scope
   >
     <slot />
   </nav>

package/app/components/Pluto/View/PlutoViewAdminPanel.vue

@@ -1,13 +1,72 @@
 <script setup lang="ts">
-withDefaults(
+import type { SplitterItem } from '@nuxt/ui'
+
+const props = withDefaults(
   defineProps<{
     /** Drop the max-width container in the main region. Default 'container'. */
     width?: 'container' | 'full'
+    /**
+     * Whether the aside is open. Pass the same value as the aside's
+     * `v-model:open`. While it is open on desktop, the aside sits in a
+     * resizable panel. The panel width persists across visits.
+     */
+    asideOpen?: boolean
   }>(),
   {
     width: 'container',
+    asideOpen: false,
   }
 )
+
+const slots = useSlots()
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+
+// The splitter works in percentages of the row width. The aside limits
+// are in px, so convert them against the measured row width. Do not use
+// the splitter's `sizeUnit: 'px'`: when the panel joins with the aside
+// already open (a reload), reka-ui skips the px conversion and reads the
+// px value as a raw size.
+const rowEl = ref<HTMLElement>()
+const { width: rowWidth } = useElementSize(rowEl)
+const toPercent = (px: number) => Math.min(100, (px / rowWidth.value) * 100)
+
+// On mobile the aside is a slideover, so it needs no panel. Wait for the
+// row to have a width, so the px-to-percent conversion is correct.
+const resizable = computed(() => rowWidth.value > 0 && Boolean(slots.aside) && props.asideOpen && isDesktop.value)
+provide(plutoViewAsideResizableKey, resizable)
+
+const ASIDE_MIN = 240
+const ASIDE_MAX = 560
+
+// Keep the aside width in px ourselves, so it stays the same when the
+// window size changes between visits.
+const asideWidth = useCookie<number>('pluto-view-aside-width', { default: () => 320 })
+const asideEl = ref<HTMLElement>()
+
+// Snapshot the width when the panel opens. A reactive `defaultSize` would
+// rebuild the panel on every save.
+const clampAside = (px: number) => Math.min(ASIDE_MAX, Math.max(ASIDE_MIN, px))
+const asideDefault = ref(0)
+watch(resizable, (value) => {
+  if (value) {
+    asideDefault.value = toPercent(clampAside(asideWidth.value))
+  }
+}, { immediate: true })
+
+function onDragging(_index: number, dragging: boolean) {
+  if (!dragging && asideEl.value) {
+    asideWidth.value = Math.round(asideEl.value.getBoundingClientRect().width)
+  }
+}
+
+// `id` and `order` let the splitter add and remove the aside panel as the
+// aside opens and closes.
+const items = computed<SplitterItem[]>(() => [
+  { id: 'pluto-view-main', slot: 'main', order: 1 },
+  ...(resizable.value
+    ? [{ id: 'pluto-view-aside', slot: 'aside', order: 2, defaultSize: asideDefault.value, minSize: toPercent(ASIDE_MIN), maxSize: toPercent(ASIDE_MAX) }]
+    : []),
+])
 </script>
 
 <template>
@@ -16,24 +75,43 @@ withDefaults(
       <slot name="toolbar" />
     </div>
 
-    <div class="flex flex-1 min-h-0 overflow-hidden">
-      <main class="flex-1 min-h-0 overflow-y-auto">
-        <!--
-          'container' matches AdminView's own padding/gap classes, so a view
-          moving from AdminView to this panel looks the same. 'full' adds
-          none — a focus-layout consumer (e.g. a rich text editor) supplies
-          its own padding instead.
-        -->
-        <UContainer
-          v-if="width === 'container'"
-          class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
-        >
-          <slot />
-        </UContainer>
-        <slot v-else />
-      </main>
-
-      <div class="shrink-0">
+    <div ref="rowEl" class="flex min-h-0 flex-1 overflow-hidden">
+      <USplitter
+        id="pluto-view"
+        :items="items"
+        :ui="{
+          root: 'min-h-0 flex-1',
+          handle: 'w-px bg-(--ui-border) transition-colors hover:bg-primary data-[resize-handle-state=drag]:bg-primary',
+        }"
+        @dragging="onDragging"
+      >
+        <template #main>
+          <main class="min-h-0 w-full overflow-y-auto">
+            <!--
+              'container' matches AdminView's own padding/gap classes, so a view
+              moving from AdminView to this panel looks the same. 'full' adds
+              none — a focus-layout consumer (e.g. a rich text editor) supplies
+              its own padding instead.
+            -->
+            <UContainer
+              v-if="width === 'container'"
+              class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
+            >
+              <slot />
+            </UContainer>
+            <slot v-else />
+          </main>
+        </template>
+
+        <template #aside>
+          <div ref="asideEl" class="h-full w-full">
+            <slot name="aside" />
+          </div>
+        </template>
+      </USplitter>
+
+      <!-- Closed or mobile: the aside renders outside the splitter. -->
+      <div v-if="!resizable" class="shrink-0">
         <slot name="aside" />
       </div>
     </div>

package/app/components/Pluto/View/PlutoViewAside.vue

@@ -8,7 +8,11 @@
 withDefaults(
   defineProps<{
     title?: string
-    /** Desktop width, in px. Default 320. */
+    /**
+     * Desktop width, in px. Default 320. Ignored inside a
+     * PlutoViewAdminPanel that gets `aside-open`: its resizable panel sets
+     * the width.
+     */
     width?: number
   }>(),
   {
@@ -28,6 +32,7 @@ function close() {
 // page then stops taking clicks as soon as the aside opens. It also mounts
 // the slot a second time.
 const isDesktop = useMediaQuery('(min-width: 64rem)')
+const resizable = inject(plutoViewAsideResizableKey, ref(false))
 const slideoverOpen = computed({
   get: () => open.value && !isDesktop.value,
   set: (value: boolean) => {
@@ -37,10 +42,15 @@ const slideoverOpen = computed({
 </script>
 
 <template>
+  <!--
+    Inside a resizable PlutoViewAdminPanel the splitter panel owns the
+    width and its handle draws the border. Elsewhere, keep the fixed width.
+  -->
   <aside
     v-if="open"
-    :style="{ width: `${width}px` }"
-    class="border-default hidden h-full shrink-0 flex-col border-s lg:flex"
+    :style="resizable ? undefined : { width: `${width}px` }"
+    :class="resizable ? 'w-full' : 'border-default shrink-0 border-s'"
+    class="hidden h-full flex-col lg:flex"
   >
     <div class="border-default flex h-12 shrink-0 items-center justify-between gap-1.5 border-b px-4">
       <h2 class="text-highlighted truncate text-sm font-semibold">{{ title }}</h2>

package/app/composables/pluto-admin-theme.ts

@@ -0,0 +1,14 @@
+/**
+ * Puts `data-pluto-admin` on <html> while the calling component is mounted.
+ * `app/assets/css/admin-theme.css` keys the admin's own palette, chart
+ * colors, surfaces, and font on that attribute, so the consumer app's
+ * public-site theme (its app.config colors and @theme) does not reach the
+ * admin. The attribute sits on <html>, not on a layout wrapper, so it also
+ * covers overlays that render at the end of <body>.
+ *
+ * Call it from every admin layout. `useHead` removes the attribute when the
+ * layout unmounts, so the public site never gets it.
+ */
+export function usePlutoAdminTheme() {
+  useHead({ htmlAttrs: { 'data-pluto-admin': '' } })
+}

package/app/composables/pluto-command-palette.ts

@@ -0,0 +1,59 @@
+import type { CommandPaletteGroup, CommandPaletteItem } from '@nuxt/ui'
+
+/**
+ * Builds the admin command palette groups (`UDashboardSearch` in the
+ * admin layout, opened with Cmd/Ctrl+K):
+ *
+ * - "Create": one "New <label>" command for each content type the user
+ *   can write.
+ * - "Go to": every admin nav item and nav child, from `usePlutoAdminNav`.
+ *
+ * Each destination shows once. A nav link to a create path (for example
+ * "Create new post") is dropped, because the "Create" group has it.
+ *
+ * Commands navigate with `navigateTo` in `onSelect`, not with `to`. `to`
+ * is typed per app through typed pages, so it differs in every app that
+ * extends this layer. The admin layout's sidebar uses the same approach.
+ */
+export function usePlutoCommandPalette() {
+  const { items: navItems } = usePlutoAdminNav()
+  const { items: contentTypes } = usePlutoContentTypes()
+  const { can } = usePlutoPermissions()
+
+  return computed<CommandPaletteGroup<CommandPaletteItem>[]>(() => {
+    const seen = new Set<string>()
+
+    function command(label: string, path: string, extra: Partial<CommandPaletteItem> = {}): CommandPaletteItem[] {
+      if (seen.has(path)) {
+        return []
+      }
+      seen.add(path)
+      return [{ label, ...extra, onSelect: () => navigateTo(path) }]
+    }
+
+    const create = contentTypes.value.flatMap(({ type }) => {
+      // "No capability declared" means the operation is open to anyone who
+      // can reach the admin, the same rule as PlutoContentForm.
+      if (type.capabilities?.write && !can(type.capabilities.write)) {
+        return []
+      }
+      const basePath = type.basePath ?? `/admin/content/${type.name}`
+      return command(`New ${type.label}`, type.newPath ?? `${basePath}/new`, {
+        icon: 'lucide:plus',
+        suffix: type.labelPlural,
+      })
+    })
+
+    const goTo = navItems.value.flatMap((item) => [
+      ...(item.to ? command(item.label, item.to, { icon: item.icon }) : []),
+      ...(item.children ?? []).flatMap((child) =>
+        child.to ? command(child.label, child.to, { icon: item.icon, suffix: item.label }) : []
+      ),
+    ])
+
+    return [
+      { id: 'pluto-create', label: 'Create', items: create },
+      { id: 'pluto-go-to', label: 'Go to', items: goTo },
+    ].filter((group) => group.items.length > 0)
+  })
+}

package/app/composables/pluto-content-activity.ts

@@ -0,0 +1,37 @@
+export interface PlutoContentActivitySeries {
+  name: string
+  label: string
+  labelPlural: string
+  icon?: string
+  points: PlutoContentActivityPoint[]
+}
+
+/**
+ * Weekly creation counts for every registered content type, from
+ * `GET /api/_pluto/content-activity/<type>`. Types whose adapter cannot count
+ * by creation date are left out.
+ *
+ * The fixed `useAsyncData` key shares one fetch between every caller, so the
+ * dashboard tiles ("+N this week") and the activity chart do not fetch twice.
+ */
+export function usePlutoContentActivity(weeks = 12) {
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  return useAsyncData(
+    `pluto-content-activity-${weeks}`,
+    async () => {
+      const series = await Promise.all(
+        contentTypes.value.map(async ({ type }): Promise<PlutoContentActivitySeries | null> => {
+          const activity = await $fetch<PlutoContentActivity>(`/api/_pluto/content-activity/${type.name}`, {
+            query: { weeks },
+          })
+          return activity.supported
+            ? { name: type.name, label: type.label, labelPlural: type.labelPlural, icon: type.icon, points: activity.points }
+            : null
+        })
+      )
+      return series.filter((entry): entry is PlutoContentActivitySeries => entry !== null)
+    },
+    { default: () => [] as PlutoContentActivitySeries[], server: false }
+  )
+}

package/app/composables/pluto-content-stats.ts

@@ -0,0 +1,78 @@
+export interface PlutoContentStat {
+  name: string
+  label: string
+  labelPlural: string
+  icon?: string
+  /** Admin list path for the content type. */
+  path: string
+  total: number
+  /** Present only for a content type with a status workflow. */
+  published?: number
+  /** Present only for a content type with a status workflow. */
+  drafts?: number
+}
+
+/**
+ * Counts the items of every registered content type, for the dashboard.
+ *
+ * Each count is a list request with `limit=1`, so the adapter returns the
+ * count without the rows. A type with a status workflow gets a second
+ * request with `published=1`. Drafts are the total minus the published
+ * count. An adapter that does not return `total` gets one request without
+ * a limit, and the count is the number of rows.
+ */
+export function usePlutoContentStats() {
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  const stats = ref<PlutoContentStat[]>([])
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function count(typeName: string, published: boolean): Promise<number> {
+    const url = `/api/_pluto/content/${typeName}`
+    const query = published ? { limit: 1, published: 1 } : { limit: 1 }
+    const result = await $fetch<PlutoContentListResult>(url, { query })
+    if (result.total !== undefined) {
+      return result.total
+    }
+    const all = await $fetch<PlutoContentListResult>(url, { query: published ? { published: 1 } : {} })
+    return all.data.length
+  }
+
+  async function refresh(): Promise<void> {
+    pending.value = true
+    error.value = null
+
+    try {
+      stats.value = await Promise.all(
+        contentTypes.value.map(async ({ type }) => {
+          const [total, published] = await Promise.all([
+            count(type.name, false),
+            type.status ? count(type.name, true) : Promise.resolve(undefined),
+          ])
+
+          return {
+            name: type.name,
+            label: type.label,
+            labelPlural: type.labelPlural,
+            icon: type.icon,
+            path: type.basePath ?? `/admin/content/${type.name}`,
+            total,
+            ...(published === undefined ? {} : { published, drafts: Math.max(0, total - published) }),
+          }
+        })
+      )
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Same pattern as usePlutoContentList: fetch right away, and keep a
+  // failure in `error` instead of an unhandled rejection.
+  refresh().catch(() => {})
+
+  return { stats, pending, error, refresh }
+}

package/app/composables/pluto-view.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * `PlutoViewAdminPanel` provides this key. It is `true` while the panel
+ * holds its aside in a resizable splitter panel (desktop, aside open).
+ * `PlutoViewAside` then fills that panel instead of using its own fixed
+ * `width`.
+ */
+export const plutoViewAsideResizableKey: InjectionKey<Ref<boolean>> = Symbol('plutoViewAsideResizable')

package/app/layouts/admin.vue

@@ -32,11 +32,23 @@ const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 // (`app/components/navbar/NavbarAdmin.vue`) writes to this exact state key
 // to open the sidebar from its own hamburger button. Keep the name as-is.
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
+
+const commandGroups = usePlutoCommandPalette()
+
+// Keep the consumer app's public-site theme out of the admin.
+usePlutoAdminTheme()
+
+// Start the dashboard group below the fixed admin navbar. An inline `top`
+// overrides the `top: 0` from the group's `inset-0` base class, whatever
+// order the classes merge in. Do not use a class replacer function here:
+// in @nuxt/ui 4.12 a replacer only runs for themes with slots, and the
+// group theme has only `base`, so the replacer was silently ignored.
+const groupStyle = { top: 'var(--ui-header-height)' }
 </script>
 
 <template>
   <UDashboardGroup
-    :class="(base: string) => base.replace('inset-0', 'inset-x-0 bottom-0 top-(--ui-header-height)')"
+    :style="groupStyle"
     storage="cookie"
     storage-key="pluto-admin"
     unit="rem"
@@ -48,23 +60,32 @@ const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
       :min-size="12"
       :max-size="24"
       :ui="{
-        root: 'min-h-0 dark:bg-admin-sidebar light:bg-zinc-100',
-        content: 'lg:hidden w-[min(18rem,85vw)]',
+        root: 'min-h-0 bg-(--pluto-admin-sidebar)',
+        content: 'lg:hidden w-[min(18rem,85vw)] bg-(--pluto-admin-sidebar)',
+        header: 'h-auto py-3',
       }"
       resizable
     >
+      <!--
+        The search button must sit inside UDashboardGroup. Outside it, the
+        button has no dashboard context and its click does nothing.
+      -->
+      <template #header>
+        <UDashboardSearchButton class="w-full" />
+      </template>
+
       <UNavigationMenu
         :items="menu"
-        :ui="{ link: 'text-base gap-x-3 font-normal' }"
+        :ui="{ link: 'gap-x-2.5 py-2', linkLeadingIcon: 'size-[18px]' }"
         orientation="vertical"
+        variant="pill"
         class="data-[orientation=vertical]:w-full"
-        highlight
       />
     </UDashboardSidebar>
 
     <UDashboardPanel
       :ui="{
-        root: 'min-h-0 dark:bg-admin-content light:bg-white font-outfit',
+        root: 'min-h-0 bg-(--pluto-admin-canvas)',
         body: 'p-0 gap-0 overflow-x-hidden',
       }"
     >
@@ -72,5 +93,8 @@ const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
         <slot />
       </template>
     </UDashboardPanel>
+
+    <!-- Cmd/Ctrl+K. See usePlutoCommandPalette for the commands. -->
+    <UDashboardSearch :groups="commandGroups" placeholder="Search pages and actions…" />
   </UDashboardGroup>
 </template>

package/app/layouts/auth.vue

@@ -1,7 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+usePlutoAdminTheme()
+</script>
 
 <template>
-  <div class="bg-admin-content font-outfit flex min-h-dvh grow flex-col">
+  <div class="flex min-h-dvh grow flex-col bg-(--pluto-admin-canvas)">
     <slot />
   </div>
 </template>