@plutocms/pluto 0.10.0 → 0.12.0

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: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -42,31 +42,32 @@
     "vue-demi"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.116",
-    "@iconify-json/simple-icons": "^1.2.89",
-    "@internationalized/date": "^3.12.2",
-    "@nuxt/eslint": "^1.16.0",
-    "@nuxt/ui": "^4.9.0",
+    "@iconify-json/lucide": "^1.2.144",
+    "@iconify-json/simple-icons": "^1.2.100",
+    "@internationalized/date": "^3.12.4",
+    "@nuxt/eslint": "^1.17.0",
+    "@nuxt/ui": "^4.12.0",
     "@plutocms/utils": "^0.2.1",
-    "@vueuse/nuxt": "^14.3.0",
-    "reka-ui": "^2.10.1",
-    "tailwind-merge": "^3.6.0"
+    "@tanstack/charts": "^1.1.0",
+    "@vueuse/nuxt": "^14.4.0",
+    "reka-ui": "^2.11.0",
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^9.1.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@types/bun": "^1.3.14",
-    "eslint": "^10.6.0",
-    "mysql2": "^3.22.6",
-    "nuxt": "^4.3.1",
-    "prettier": "^3.9.4",
-    "prettier-plugin-tailwindcss": "^0.8.0",
-    "tailwindcss": "^4.3.2",
+    "@antfu/eslint-config": "^9.5.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/bun": "^1.4.3",
+    "eslint": "^10.12.0",
+    "mysql2": "^3.24.6",
+    "nuxt": "^4.6.1",
+    "prettier": "^3.9.10",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "vitest": "^5.0.0",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.7"
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0",
+    "vue-tsc": "^3.3.13"
   },
   "overrides": {
     "eslint-flat-config-utils": "^3.2.0"

package/scripts/generate-admin-theme.cjs

@@ -0,0 +1,96 @@
+// Generates app/assets/css/admin-theme.css from the installed Tailwind
+// palette. Run from the repo root: node scripts/generate-admin-theme.cjs
+// See the admin-theme skill for the palette choices and how they were
+// validated.
+const fs = require('node:fs')
+const path = require('node:path')
+
+const theme = fs.readFileSync(path.join(path.dirname(require.resolve('tailwindcss/package.json', { paths: [process.cwd()] })), 'theme.css'), 'utf8')
+const v = (name) => theme.match(new RegExp(String.raw`--color-${name}: (oklch\([^)]*\))`))[1]
+const roles = { primary: 'indigo', secondary: 'violet', success: 'green', info: 'blue', warning: 'amber', error: 'red', neutral: 'zinc' }
+const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+const scales = Object.entries(roles).map(([role, hue]) => `  /* ${role}: ${hue} */\n${shades.map((s) => `  --ui-color-${role}-${s}: ${v(`${hue}-${s}`)};`).join('\n')}`).join('\n\n')
+const semantic = (shade) => Object.keys(roles).filter((r) => r !== 'neutral').map((r) => `  --ui-${r}: var(--ui-color-${r}-${shade});`).join('\n')
+const n = (s) => `var(--ui-color-neutral-${s})`
+const neutralLight = { 'text-dimmed': n(400), 'text-muted': n(500), 'text-toned': n(600), 'text': n(700), 'text-highlighted': n(900), 'text-inverted': '#fff', 'bg': '#fff', 'bg-muted': n(50), 'bg-elevated': n(100), 'bg-accented': n(200), 'bg-inverted': n(900), 'border': n(200), 'border-muted': n(200), 'border-accented': n(300), 'border-inverted': n(900) }
+const neutralDark = { 'text-dimmed': n(500), 'text-muted': n(400), 'text-toned': n(300), 'text': n(200), 'text-highlighted': '#fff', 'text-inverted': n(900), 'bg': n(900), 'bg-muted': n(800), 'bg-elevated': n(800), 'bg-accented': n(700), 'bg-inverted': '#fff', 'border': n(800), 'border-muted': n(700), 'border-accented': n(700), 'border-inverted': '#fff' }
+const tokens = (o) => Object.entries(o).map(([k, val]) => `  --ui-${k}: ${val};`).join('\n')
+// Validated with the dataviz palette checks on white (light) and zinc-900
+// (dark). Re-run the checks before you change a slot.
+const chartLight = ['amber-600', 'teal-600', 'rose-500', 'sky-600', 'lime-700']
+const chartDark = ['amber-600', 'teal-600', 'rose-500', 'sky-600', 'lime-600']
+const chart = (list) => `  --ui-chart-1: var(--ui-primary);\n${list.map((c, i) => `  --ui-chart-${i + 2}: ${v(c)}; /* ${c} */`).join('\n')}`
+
+const css = `/*
+ * The Pluto admin theme.
+ *
+ * Two selectors carry it:
+ * - \`:root[data-pluto-admin]\`: usePlutoAdminTheme() sets this attribute on
+ *   <html> while an admin layout is mounted, so the theme also covers
+ *   overlays (modals, slideovers, menus, toasts, the command palette) that
+ *   render at the end of <body>.
+ * - \`[data-pluto-admin-scope]\`: for admin chrome that also shows on the
+ *   public site, such as the admin navbar for a logged-in admin.
+ *
+ * Every value is a literal. The consumer app styles its public site through
+ * its own app.config colors and @theme. Both reach the admin unless the admin
+ * pins its own values: app.config colors set Nuxt UI's --ui-color-* scales on
+ * :root, and @theme can redefine a Tailwind color such as --color-red-400.
+ * These selectors are more specific than Nuxt UI's :root and .dark rules.
+ *
+ * The semantic tokens (--ui-primary, --ui-bg, --ui-text, ...) are declared
+ * again here, not only the color scales. A custom property inherits as a
+ * resolved value, so on a scoped element the :root tokens would still hold
+ * the app's colors.
+ *
+ * Chart colors are a validated categorical palette: lightness band, chroma
+ * floor, colorblind separation, and 3:1 contrast pass on white (light) and
+ * on zinc-900 (dark). This file is generated; keep the values in sync with
+ * scripts/generate-admin-theme.cjs: run it from the repo root, never edit this
+ * file by hand.
+ */
+:root[data-pluto-admin],
+[data-pluto-admin-scope] {
+${scales}
+
+${semantic(500)}
+
+${tokens(neutralLight)}
+
+${chart(chartLight)}
+
+  /* Surfaces */
+  --pluto-admin-canvas: #fff;
+  --pluto-admin-sidebar: ${v('zinc-50')};
+  --pluto-admin-navbar: #fff;
+
+  --ui-radius: 0.375rem;
+  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+}
+
+:root[data-pluto-admin].dark,
+.dark [data-pluto-admin-scope] {
+${semantic(400)}
+
+${tokens(neutralDark)}
+
+${chart(chartDark)}
+
+  /* Cards (--ui-bg, zinc-900) sit one step above the canvas (zinc-950). */
+  --pluto-admin-canvas: ${v('zinc-950')};
+  --pluto-admin-sidebar: ${v('zinc-950')};
+  --pluto-admin-navbar: ${v('zinc-950')};
+}
+
+:root[data-pluto-admin] body {
+  background-color: var(--pluto-admin-canvas);
+}
+
+:root[data-pluto-admin] body,
+[data-pluto-admin-scope] {
+  font-family: var(--font-sans);
+  color: var(--ui-text);
+}
+`
+fs.writeFileSync('app/assets/css/admin-theme.css', css)
+console.log('written', css.split('\n').length, 'lines')

package/server/api/_pluto/content/[type]/index.get.ts

@@ -11,6 +11,9 @@ export default defineEventHandler(async (event) => {
   const limit = query.limit === undefined ? undefined : Number.parseInt(query.limit as string, 10)
   const offset = query.offset === undefined ? undefined : Number.parseInt(query.offset as string, 10)
   const search = query.search === undefined ? undefined : String(query.search)
+  // `?published=1` (or `true`) narrows to published rows. Ignored for a
+  // type with no status workflow, which has no unpublished rows.
+  const published = type.status ? query.published === '1' || query.published === 'true' : undefined
 
-  return listContentItems({ event, type }, { limit, offset, search })
+  return listContentItems({ event, type }, { limit, offset, search, published })
 })

package/server/api/_pluto/content-activity/[type].get.ts

@@ -0,0 +1,15 @@
+/**
+ * Weekly creation counts for one content type, for the dashboard activity
+ * chart: `GET /api/_pluto/content-activity/<type>?weeks=12`. A separate path,
+ * not `/api/_pluto/content/<type>/activity`, so it never collides with the
+ * `[id]` item route for an item whose id or slug is "activity".
+ */
+export default defineEventHandler(async (event) => {
+  const typeName = getRouterParam(event, 'type')
+  const type = requireContentType(typeName ?? '')
+
+  const query = getQuery(event)
+  const weeks = query.weeks === undefined ? 12 : Number.parseInt(String(query.weeks), 10)
+
+  return contentActivity({ event, type }, { weeks: Number.isNaN(weeks) ? 12 : weeks })
+})

package/server/utils/pluto-content-handlers.ts

@@ -69,6 +69,10 @@ export async function authorizeContentOperation(event: H3Event, capability: stri
  * asks the adapter for everything, unfiltered by capability, because it is
  * admin-surface-only in intent — a public-facing read path is a layer's
  * own hand-written endpoint, not this generic one.
+ *
+ * `published: true` narrows the result to published rows. The dashboard
+ * uses it, with `limit: 1`, to count published rows next to the total.
+ * It only narrows the result, so it needs no capability check either.
  */
 export async function listContentItems(
   ctx: PlutoContentContext,
@@ -76,6 +80,7 @@ export async function listContentItems(
     limit?: number
     offset?: number
     search?: string
+    published?: boolean
   }
 ): Promise<PlutoContentListResult> {
   return requireContentAdapter().list(ctx, {
@@ -83,7 +88,7 @@ export async function listContentItems(
     offset: query.offset,
     search: query.search,
     sort: ctx.type.defaultSort,
-    includeUnpublished: true,
+    includeUnpublished: query.published !== true,
   })
 }
 
@@ -166,3 +171,62 @@ export async function deleteContentItem(ctx: PlutoContentContext, id: string | n
 
   await requireContentAdapter().remove(ctx, id)
 }
+
+/** Most weeks the activity route accepts. */
+export const CONTENT_ACTIVITY_MAX_WEEKS = 52
+
+/** Monday 00:00 UTC of the week that contains `date`. */
+function startOfWeekUtc(date: Date): Date {
+  const start = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()))
+  const daysSinceMonday = (start.getUTCDay() + 6) % 7
+  start.setUTCDate(start.getUTCDate() - daysSinceMonday)
+  return start
+}
+
+/**
+ * Counts the items created in each of the last `weeks` weeks, oldest first.
+ * The last point is the current week, so far. Weeks start on Monday, UTC.
+ *
+ * No capability check, for the same reason as `listContentItems`: it only
+ * returns counts, and the adapter's backing store already limits what the
+ * caller can see.
+ *
+ * Returns `supported: false` with no points when the adapter has no
+ * `countCreated`, or when it returns `null` for this content type.
+ */
+export async function contentActivity(
+  ctx: PlutoContentContext,
+  options: {
+ weeks: number
+now?: Date
+}
+): Promise<PlutoContentActivity> {
+  const adapter = requireContentAdapter()
+  const unsupported: PlutoContentActivity = { supported: false, interval: 'week', points: [] }
+
+  if (!adapter.countCreated) {
+    return unsupported
+  }
+
+  const weeks = Math.min(CONTENT_ACTIVITY_MAX_WEEKS, Math.max(1, Math.trunc(options.weeks)))
+  const thisWeek = startOfWeekUtc(options.now ?? new Date())
+  const DAY = 24 * 60 * 60 * 1000
+
+  const ranges = Array.from({ length: weeks }, (_, index) => {
+    const from = new Date(thisWeek.getTime() - (weeks - 1 - index) * 7 * DAY)
+    const to = new Date(from.getTime() + 7 * DAY)
+    return { from: from.toISOString(), to: to.toISOString() }
+  })
+
+  const counts = await Promise.all(ranges.map((range) => adapter.countCreated!(ctx, range)))
+
+  if (counts.includes(null)) {
+    return unsupported
+  }
+
+  return {
+    supported: true,
+    interval: 'week',
+    points: ranges.map((range, index) => ({ start: range.from.slice(0, 10), count: counts[index] as number })),
+  }
+}