@plutocms/pluto 0.11.0 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "@nuxt/eslint": "^1.17.0",
     "@nuxt/ui": "^4.12.0",
     "@plutocms/utils": "^0.2.1",
+    "@tanstack/charts": "^1.1.0",
     "@vueuse/nuxt": "^14.4.0",
     "reka-ui": "^2.11.0",
     "tailwind-merge": "^3.7.0"

package/scripts/generate-admin-theme.cjs

@@ -0,0 +1,110 @@
+// 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) }
+// Dark cards sit one step above the zinc-900 canvas: between zinc-900 and
+// zinc-800. The chart palette passes the dataviz checks on this surface.
+const CARD_DARK = 'oklch(24% 0.006 286)'
+// The dark sidebar sits between the zinc-950 navbar and the zinc-900 canvas.
+const SIDEBAR_DARK = 'oklch(17.5% 0.0055 286)'
+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': CARD_DARK, '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.
+ *
+ * \`[data-pluto-admin-dark]\` takes the dark tokens in both color modes. The
+ * admin navbar is near black in light mode too, so its text and buttons need
+ * the dark values.
+ *
+ * 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. The navbar is near black in both modes. */
+  --pluto-admin-canvas: #fff;
+  --pluto-admin-sidebar: ${v('zinc-50')};
+  --pluto-admin-navbar: ${v('zinc-950')};
+
+  --ui-radius: 0.375rem;
+  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+}
+
+:root[data-pluto-admin].dark,
+.dark [data-pluto-admin-scope],
+[data-pluto-admin-dark] {
+${semantic(400)}
+
+${tokens(neutralDark)}
+
+${chart(chartDark)}
+
+  /*
+   * Four steps, darkest at the top: a near-black navbar, a darker sidebar,
+   * a dim dark gray canvas (not pitch black), and cards (--ui-bg) one step
+   * above the canvas.
+   */
+  --pluto-admin-navbar: ${v('zinc-950')};
+  --pluto-admin-sidebar: ${SIDEBAR_DARK};
+  --pluto-admin-canvas: ${v('zinc-900')};
+}
+
+: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 })),
+  }
+}

package/shared/types/content.ts

@@ -289,4 +289,28 @@ export interface PlutoContentAdapter {
   /** Throws when `event`'s caller does not hold `capability`. Optional — see the fail-open rule in the content-model skill. */
   authorize?: (event: H3Event, capability: string) => Promise<void>
   describe?: (ctx: PlutoContentContext) => Promise<string[] | null>
+  /**
+   * Counts the items created from `range.from` (inclusive) to `range.to`
+   * (exclusive), both ISO timestamps. Optional. Return `null` when the
+   * content type has no created timestamp. The dashboard activity chart
+   * calls it once per week; without it, the chart leaves the type out.
+   */
+  countCreated?: (ctx: PlutoContentContext, range: {
+ from: string
+to: string
+}) => Promise<number | null>
+}
+
+/** One week of the content activity series. */
+export interface PlutoContentActivityPoint {
+  /** Start of the week, an ISO date (YYYY-MM-DD), Monday, UTC. */
+  start: string
+  count: number
+}
+
+export interface PlutoContentActivity {
+  /** `false` when the adapter, or this content type, cannot count by creation date. */
+  supported: boolean
+  interval: 'week'
+  points: PlutoContentActivityPoint[]
 }

package/app/assets/css/tailwind.css

@@ -1,26 +0,0 @@
-@import 'tailwindcss';
-@import '@nuxt/ui';
-
-@source '../..';
-
-@theme {
-  --color-admin-content: var(--color-zinc-800);
-  --color-admin-sidebar: var(--color-zinc-900);
-
-  --font-outfit: 'Outfit', sans-serif;
-}
-
-/*
- * Set the header height outside a layer. This overrides Nuxt UI's own
- * `@layer theme` value for the same variable. The values match the
- * navbar's own height classes (`h-14` / `lg:h-10`).
- */
-:root {
-  --ui-header-height: 3.5rem;
-}
-
-@media (width >= 64rem) {
-  :root {
-    --ui-header-height: 2.5rem;
-  }
-}