@plutocms/pluto 0.11.0 → 0.13.0

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

@@ -1,3 +1,13 @@
+export interface PlutoContentListOptions {
+  /**
+   * Rows per request. Set it to load the list page by page: the first page
+   * on creation, the next pages through `loadMore()`. Leave it unset for one
+   * request that returns every row (an adapter can cap that request; the
+   * Supabase adapter returns at most 1000 rows).
+   */
+  pageSize?: number
+}
+
 /**
  * Fetches one content type's list of items, for the generic list page
  * (`PlutoContentList`).
@@ -15,25 +25,86 @@
  * of `await`ing the composable's own return value through a hand-rolled
  * `.then()`.
  */
-export function usePlutoContentList(typeName: string) {
+export function usePlutoContentList(typeName: string, options: PlutoContentListOptions = {}) {
+  const { pageSize } = options
+  const url = `/api/_pluto/content/${typeName}`
+
   const items = ref<PlutoContentItem[]>([])
   const total = ref<number | undefined>(undefined)
   const pending = ref(false)
+  const loadingMore = ref(false)
+  /** `true` while more pages exist. Always `false` without `pageSize`. */
+  const hasMore = ref(false)
   const error = ref<unknown>(null)
 
+  // A refresh() while a page is in flight makes that page stale. Each fetch
+  // remembers the generation it started in, and drops its result when a
+  // newer refresh() has started since.
+  let generation = 0
+
+  function fetchPage(offset: number): Promise<PlutoContentListResult> {
+    return pageSize === undefined
+      ? $fetch<PlutoContentListResult>(url)
+      : $fetch<PlutoContentListResult>(url, { query: { limit: pageSize, offset } })
+  }
+
+  function updateHasMore(lastPageLength: number) {
+    if (pageSize === undefined) {
+      hasMore.value = false
+      return
+    }
+    // Without a total, a full page means there may be another one.
+    hasMore.value = total.value === undefined ? lastPageLength === pageSize : items.value.length < total.value
+  }
+
   async function refresh(): Promise<void> {
+    const current = ++generation
     pending.value = true
     error.value = null
 
     try {
-      const result = await $fetch<PlutoContentListResult>(`/api/_pluto/content/${typeName}`)
+      const result = await fetchPage(0)
+      if (current !== generation) {
+        return
+      }
       items.value = result.data
       total.value = result.total
+      updateHasMore(result.data.length)
     } catch (caught) {
-      error.value = caught
+      if (current === generation) {
+        error.value = caught
+      }
+      throw caught
+    } finally {
+      if (current === generation) {
+        pending.value = false
+      }
+    }
+  }
+
+  /** Appends the next page. Does nothing without `pageSize`, without more pages, or while a fetch runs. */
+  async function loadMore(): Promise<void> {
+    if (!hasMore.value || pending.value || loadingMore.value) {
+      return
+    }
+    const current = generation
+    loadingMore.value = true
+
+    try {
+      const result = await fetchPage(items.value.length)
+      if (current !== generation) {
+        return
+      }
+      items.value = [...items.value, ...result.data]
+      total.value = result.total ?? total.value
+      updateHasMore(result.data.length)
+    } catch (caught) {
+      if (current === generation) {
+        error.value = caught
+      }
       throw caught
     } finally {
-      pending.value = false
+      loadingMore.value = false
     }
   }
 
@@ -47,14 +118,24 @@ export function usePlutoContentList(typeName: string) {
 
   async function remove(id: string | number): Promise<void> {
     try {
-      await $fetch(`/api/_pluto/content/${typeName}/${id}`, { method: 'DELETE' })
+      await $fetch(`${url}/${id}`, { method: 'DELETE' })
     } catch (caught) {
       error.value = caught
       throw caught
     }
 
-    await refresh()
+    if (pageSize === undefined) {
+      await refresh()
+      return
+    }
+
+    // Paged: drop the row in place, so the user keeps the pages already
+    // loaded and the scroll position.
+    items.value = items.value.filter((item) => item.id !== id)
+    if (total.value !== undefined) {
+      total.value = Math.max(0, total.value - 1)
+    }
   }
 
-  return { items, total, pending, error, refresh, remove }
+  return { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove }
 }

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>

package/app/pages/admin/home.vue

@@ -1,15 +1,42 @@
 <script setup lang="ts">
 useHead({
-  title: `Admin`,
+  title: 'Dashboard',
 })
+
+const today = new Intl.DateTimeFormat(undefined, { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date())
+
+// The header's Create button reuses the command palette's Create commands.
+const groups = usePlutoCommandPalette()
+const createItems = computed(() => groups.value.find((group) => group.id === 'pluto-create')?.items ?? [])
+
+function run(item: {
+ onSelect?: (event: Event) => void
+}) {
+  item.onSelect?.(new Event('select'))
+}
 </script>
 
 <template>
-  <main>
-    <AdminView>
-      <h1 class="text-3xl font-bold lg:text-4xl">Admin Dashboard</h1>
+  <PlutoViewAdminPanel>
+    <header class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        <p class="text-muted text-sm">{{ today }}</p>
+        <h1 class="text-highlighted text-2xl font-semibold tracking-tight lg:text-3xl">Dashboard</h1>
+      </div>
+
+      <UButton
+        v-if="createItems.length === 1"
+        :label="createItems[0]!.label"
+        icon="lucide:plus"
+        size="md"
+        @click="run(createItems[0]!)"
+      />
+
+      <UDropdownMenu v-else-if="createItems.length > 1" :items="createItems" :content="{ align: 'end' }">
+        <UButton label="Create" icon="lucide:plus" trailing-icon="lucide:chevron-down" size="md" />
+      </UDropdownMenu>
+    </header>
 
-      <PlutoDashboardWidgets />
-    </AdminView>
-  </main>
+    <PlutoDashboardWidgets />
+  </PlutoViewAdminPanel>
 </template>

package/app/plugins/pluto-core-registrations.ts

@@ -5,6 +5,9 @@ import PlutoFieldReference from '../components/Pluto/Content/fields/PlutoFieldRe
 import PlutoFieldSelect from '../components/Pluto/Content/fields/PlutoFieldSelect.vue'
 import PlutoFieldSlug from '../components/Pluto/Content/fields/PlutoFieldSlug.vue'
 import PlutoFieldText from '../components/Pluto/Content/fields/PlutoFieldText.vue'
+import PlutoDashboardContentActivity from '../components/Pluto/Dashboard/PlutoDashboardContentActivity.vue'
+import PlutoDashboardContentOverview from '../components/Pluto/Dashboard/PlutoDashboardContentOverview.vue'
+import PlutoDashboardQuickActions from '../components/Pluto/Dashboard/PlutoDashboardQuickActions.vue'
 
 // Registers core's own Home and Settings anchors, plus the eight built-in
 // content field widgets. `order: 0` and `order: 1000` are reserved for the
@@ -41,5 +44,36 @@ export default defineNuxtPlugin(() => {
       { id: 'select', fieldType: 'select', component: PlutoFieldSelect },
       { id: 'reference', fieldType: 'reference', component: PlutoFieldReference },
     ],
+    // `order: 0` puts the content overview first. It spans the full row
+    // because it lays out its own grid of tiles. It is disabled while no
+    // content type is registered, so the dashboard shows its own empty
+    // message instead of a blank cell.
+    dashboardWidgets: [
+      {
+        id: 'content-overview',
+        order: 0,
+        title: 'Content',
+        colSpan: 3,
+        component: PlutoDashboardContentOverview,
+        enabled: () => usePlutoContentTypes().items.value.length > 0,
+      },
+      // The activity chart and the quick actions share the next row (2 + 1
+      // columns). A layer widget with the default order (100) goes below.
+      {
+        id: 'content-activity',
+        order: 10,
+        title: 'Content activity',
+        colSpan: 2,
+        component: PlutoDashboardContentActivity,
+        enabled: () => usePlutoContentTypes().items.value.length > 0,
+      },
+      {
+        id: 'quick-actions',
+        order: 20,
+        title: 'Quick actions',
+        colSpan: 1,
+        component: PlutoDashboardQuickActions,
+      },
+    ],
   })
 })

package/modules/pluto-css/css-entries.ts

@@ -0,0 +1,182 @@
+// Pure helpers for the pluto-css module. They do not import `nuxt/kit`, so
+// the unit tests can call them directly.
+import { dirname, isAbsolute, join, relative, resolve } from 'node:path'
+
+/** A layer's own CSS file, by convention. See the single-tailwind-build skill. */
+export const LAYER_CSS_FILE = 'assets/css/pluto-layer.css'
+
+function toPosix(path: string): string {
+  return path.replaceAll('\\', '/')
+}
+
+/**
+ * Returns the `pluto-layer.css` file of every layer that has one, base
+ * layer first. Nuxt lists the layers top first (the app, then each layer it
+ * extends), so the list is reversed: a higher layer's `@theme` then comes
+ * later in the build and wins.
+ */
+export function findLayerCssFiles(layerAppDirs: string[], exists: (path: string) => boolean): string[] {
+  return [...layerAppDirs]
+    .reverse()
+    .map((appDir) => toPosix(join(appDir, LAYER_CSS_FILE)))
+    .filter((file) => exists(file))
+}
+
+/**
+ * Renders `#build/pluto.css`: one `@import` for each layer CSS file. Each
+ * path is relative to the build dir, where the file is written. A path on
+ * another drive (Windows) stays absolute.
+ */
+export function renderPlutoCss(files: string[], buildDir: string): string {
+  const lines = files.map((file) => {
+    const fromBuild = toPosix(relative(buildDir, file))
+    const path = isAbsolute(fromBuild) ? fromBuild : fromBuild.startsWith('.') ? fromBuild : `./${fromBuild}`
+    return `@import "${path}";`
+  })
+  return [
+    '/* Generated by @plutocms/pluto (modules/pluto-css). Do not edit. */',
+    '/* Each Pluto layer\'s app/assets/css/pluto-layer.css, base layer first. */',
+    ...lines,
+    '',
+  ].join('\n')
+}
+
+/** The fallback entry, used only when the app has no Tailwind entry. */
+export function renderPlutoEntryCss(): string {
+  return [
+    '/* Generated by @plutocms/pluto (modules/pluto-css). Do not edit. */',
+    '/* Fallback Tailwind entry: the app has no CSS entry that imports Tailwind. */',
+    '@import "tailwindcss";',
+    '@import "@nuxt/ui";',
+    '@import "#build/pluto.css";',
+    '',
+  ].join('\n')
+}
+
+/** Removes CSS comments. */
+function stripComments(css: string): string {
+  return css.replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+/**
+ * Returns the specifier of every `@import` in a CSS text: `@import 'x'`,
+ * `@import "x" source(none)`, `@import url(x)`, and `@import url('x')`.
+ */
+export function parseCssImports(css: string): string[] {
+  const imports: string[] = []
+  // Two simple steps keep both patterns linear: take the body of each
+  // `@import ...;`, then read the specifier at its start.
+  for (const statement of stripComments(css).matchAll(/@import\s([^;]*);/g)) {
+    const body = statement[1]!.trim().replace(/^url\(\s*/, '')
+    const specifier = /^(['"])(.*?)\1/.exec(body)?.[2] ?? /^[^\s)]+/.exec(body)?.[0]
+    if (specifier) {
+      imports.push(specifier)
+    }
+  }
+  return imports
+}
+
+export interface CssEntryInfo {
+  /** The CSS entry, as resolved to a file. */
+  file: string
+  /** It imports Tailwind (`@import 'tailwindcss'`), so it is a Tailwind build. */
+  tailwind: boolean
+  /** It imports `@nuxt/ui`. */
+  nuxtUi: boolean
+  /** It imports `#build/pluto.css`. */
+  plutoCss: boolean
+}
+
+/**
+ * Follows the local `@import`s of a CSS entry, to `maxDepth`, and reports
+ * what it imports. `resolveImport` turns a specifier into a file path, or
+ * returns `undefined` for a package import (such as `tailwindcss`), which is
+ * not followed.
+ */
+export function analyzeCssEntry(
+  file: string,
+  read: (path: string) => string | undefined,
+  resolveImport: (specifier: string, fromFile: string) => string | undefined,
+  maxDepth = 3
+): CssEntryInfo {
+  const info: CssEntryInfo = { file, tailwind: false, nuxtUi: false, plutoCss: false }
+  const seen = new Set<string>()
+
+  function visit(path: string, depth: number) {
+    if (seen.has(path) || depth > maxDepth) {
+      return
+    }
+    seen.add(path)
+    const css = read(path)
+    if (css === undefined) {
+      return
+    }
+    for (const specifier of parseCssImports(css)) {
+      if (specifier === 'tailwindcss') {
+        info.tailwind = true
+      } else if (specifier === '@nuxt/ui') {
+        info.nuxtUi = true
+      } else if (/(?:^|\/)pluto\.css$/.test(specifier) && specifier.includes('#build')) {
+        info.plutoCss = true
+      } else {
+        const next = resolveImport(specifier, path)
+        if (next) {
+          visit(next, depth + 1)
+        }
+      }
+    }
+  }
+
+  visit(file, 0)
+  return info
+}
+
+/** Resolves a relative `@import` (`./x.css`, `../x.css`) against its file. */
+export function resolveRelativeImport(specifier: string, fromFile: string): string | undefined {
+  return specifier.startsWith('./') || specifier.startsWith('../') ? toPosix(resolve(dirname(fromFile), specifier)) : undefined
+}
+
+export interface CssSetupReport {
+  /** Inject the fallback entry: no CSS entry imports Tailwind. */
+  injectFallback: boolean
+  warnings: string[]
+}
+
+/**
+ * Checks the app's CSS setup against the single-build rules and returns
+ * what to do. `layerRoots` are the root dirs of every layer except the app.
+ */
+export function checkCssSetup(entries: CssEntryInfo[], layerRoots: string[]): CssSetupReport {
+  const warnings: string[] = []
+  const tailwindEntries = entries.filter((entry) => entry.tailwind)
+  const snippet = '  @import \'tailwindcss\';\n  @import \'@nuxt/ui\';\n  @import \'#build/pluto.css\';'
+
+  if (tailwindEntries.length === 0) {
+    return { injectFallback: true, warnings }
+  }
+
+  for (const entry of tailwindEntries) {
+    const layerRoot = layerRoots.find((root) => toPosix(entry.file).startsWith(toPosix(root)))
+    if (layerRoot) {
+      warnings.push(
+        `Layer ${layerRoot} registers its own Tailwind build (${entry.file}). Remove it from the layer's \`css\` option, and move its tokens to app/${LAYER_CSS_FILE}.`
+      )
+    }
+  }
+
+  if (tailwindEntries.length > 1) {
+    warnings.push(
+      `Found ${tailwindEntries.length} Tailwind builds. Keep one, in the app. Builds:\n${tailwindEntries.map((entry) => `  - ${entry.file}`).join('\n')}`
+    )
+  }
+
+  if (!tailwindEntries.some((entry) => entry.plutoCss)) {
+    warnings.push(`No CSS entry imports #build/pluto.css. The admin theme and layer tokens are missing. Start the app's CSS entry with:\n${snippet}`)
+  }
+
+  if (!tailwindEntries.some((entry) => entry.nuxtUi)) {
+    warnings.push(`No CSS entry imports @nuxt/ui. Nuxt UI styles, the \`light:\` variant, and the layer sources are missing. Start the app's CSS entry with:\n${snippet}`)
+  }
+
+  return { injectFallback: false, warnings }
+}

package/modules/pluto-css/index.ts

@@ -0,0 +1,86 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { addTemplate, defineNuxtModule, getLayerDirectories, resolvePath, useLogger } from '@nuxt/kit'
+import {
+  analyzeCssEntry,
+  checkCssSetup,
+  findLayerCssFiles,
+  renderPlutoCss,
+  renderPlutoEntryCss,
+  resolveRelativeImport,
+} from './css-entries'
+
+export interface PlutoCssOptions {
+  /** Warn at build time about a CSS setup that breaks the single build. Default true. */
+  check?: boolean
+}
+
+/**
+ * One Tailwind build per app. The app's CSS entry owns the build:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@nuxt/ui';
+ *   @import '#build/pluto.css';
+ *
+ * - `#build/pluto.css` imports each layer's app/assets/css/pluto-layer.css
+ *   (tokens, the admin theme). Nuxt UI already adds `@source` for every
+ *   layer's app/ dir, so this file adds no sources.
+ * - An app with no Tailwind entry (a layer repo run on its own, or an app
+ *   with no CSS) gets the fallback entry `#build/pluto-entry.css`.
+ * - The module warns about a layer that registers its own Tailwind build,
+ *   more than one build, or a missing import.
+ *
+ * See the single-tailwind-build skill.
+ */
+export default defineNuxtModule<PlutoCssOptions>({
+  meta: { name: 'pluto-css', configKey: 'plutoCss' },
+  defaults: { check: true },
+  async setup(options, nuxt) {
+    const logger = useLogger('pluto-css')
+    const layers = getLayerDirectories(nuxt)
+    const layerCssFiles = findLayerCssFiles(layers.map((layer) => layer.app), existsSync)
+
+    addTemplate({
+      filename: 'pluto.css',
+      write: true,
+      getContents: () => renderPlutoCss(layerCssFiles, nuxt.options.buildDir),
+    })
+
+    addTemplate({
+      filename: 'pluto-entry.css',
+      write: true,
+      getContents: renderPlutoEntryCss,
+    })
+
+    const entries = []
+    for (const entry of nuxt.options.css) {
+      const file = typeof entry === 'string' ? await resolvePath(entry).catch(() => undefined) : undefined
+      if (!file || !file.endsWith('.css') || !existsSync(file)) {
+        continue
+      }
+      entries.push(
+        analyzeCssEntry(
+          file,
+          (path) => (existsSync(path) ? readFileSync(path, 'utf8') : undefined),
+          resolveRelativeImport
+        )
+      )
+    }
+
+    const appRoot = nuxt.options.rootDir.replaceAll('\\', '/').replace(/\/?$/, '/')
+    const layerRoots = layers.map((layer) => layer.root.replaceAll('\\', '/')).filter((root) => root !== appRoot)
+    const report = checkCssSetup(entries, layerRoots)
+
+    if (report.injectFallback) {
+      nuxt.options.css.push('#build/pluto-entry.css')
+      if (!nuxt.options._prepare) {
+        logger.info('No CSS entry imports Tailwind. Using the Pluto fallback entry (#build/pluto-entry.css).')
+      }
+    }
+
+    if (options.check && !nuxt.options._prepare) {
+      for (const warning of report.warnings) {
+        logger.warn(warning)
+      }
+    }
+  },
+})

package/nuxt.config.ts

@@ -40,7 +40,9 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ['#layers/pluto/app/assets/css/tailwind.css'],
+  // No `css` entry: the app's CSS entry owns the one Tailwind build, and
+  // modules/pluto-css adds this layer's pluto-layer.css to it through
+  // #build/pluto.css. See the single-tailwind-build skill.
 
   runtimeConfig: {
     public: {