@plutocms/core 0.38.2 → 0.39.1

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## [0.39.1](https://github.com/plutocms/pluto/compare/v0.39.0...v0.39.1) (2026-10-31)
+
+
+### Bug Fixes
+
+* **admin:** navbar spinner icon, no focus ring after a hover menu, Pluto mark only ([#299](https://github.com/plutocms/pluto/issues/299)) ([6c87c62](https://github.com/plutocms/pluto/commit/6c87c62e73b633607f3ab13e478aa9711709b446))
+
+## [0.39.0](https://github.com/plutocms/pluto/compare/v0.38.2...v0.39.0) (2026-10-31)
+
+
+### Features
+
+* **core:** one New menu in the admin bar and nav groups for content types ([#295](https://github.com/plutocms/pluto/issues/295)) ([ca60438](https://github.com/plutocms/pluto/commit/ca60438c8d3675f6f667f5bc177573ac9700ccfa))
+
 ## [0.38.2](https://github.com/plutocms/pluto/compare/v0.38.1...v0.38.2) (2026-10-30)
 
 

package/FEATURES.md

@@ -101,7 +101,7 @@ policies shared by every project here.
   `defineAsyncComponent`, shows a skeleton per field, widget and settings panel while a chunk
   loads, and warns in dev about a registered component that is not async.
   @.claude/skills/extension-registry/SKILL.md
-- Admin shell: core owns the `/admin` parent route, the `/admin/login` page, the route guard, the admin banners, the navbar and the user menu. A backend layer registers an auth driver, account menu items, site info and link actions. The admin is for staff only: a signed-in user with no capability goes to `/admin/no-access`. The bar shows on `/admin/**` for staff, and on public pages for staff only. A route hides the bar with the page meta `plutoAdminBar: false`, and `isPlutoPreviewPath` marks the preview path. The bar height is the token `--pluto-admin-bar-height`, and `<html>` gets `data-pluto-admin-bar` while the bar shows. A hint cookie puts the bar frame in the server HTML of a public page for staff (the actions and the user menu load after the mount). Content types with `adminBar` get "New <type>" and "Edit <type>" buttons (`usePlutoEditLink`). @.claude/skills/admin-shell/SKILL.md
+- Admin shell: core owns the `/admin` parent route, the `/admin/login` page, the route guard, the admin banners, the navbar and the user menu. A backend layer registers an auth driver, account menu items, site info and link actions. The admin is for staff only: a signed-in user with no capability goes to `/admin/no-access`. The bar shows on `/admin/**` for staff, and on public pages for staff only. A route hides the bar with the page meta `plutoAdminBar: false`, and `isPlutoPreviewPath` marks the preview path. The bar height is the token `--pluto-admin-bar-height`, and `<html>` gets `data-pluto-admin-bar` while the bar shows. A hint cookie puts the bar frame in the server HTML of a public page for staff (the actions and the user menu load after the mount). Content types with `adminBar` get "New <type>" and "Edit <type>" buttons (`usePlutoEditLink`). With two or more types, one "New" menu lists them, grouped by `navGroup`. A `navGroup` also puts related types under one sidebar item (registry bucket `navGroups`, core group `pages`). @.claude/skills/admin-shell/SKILL.md
 - Local layers helper: `plutoLayer(name)` from `@plutocms/core/layers` gives a Nuxt `extends` entry.
   With `PLUTO_LOCAL_ROOT`, it uses the local checkouts of the Pluto layers. @.claude/skills/local-layers/SKILL.md
 - Pluto logo: `PlutoLogo` draws the logo inline. The wordmark takes the text color, so the logo works

package/app/components/Pluto/Admin/PlutoAdminNavMenu.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// The admin sidebar menu (UNavigationMenu) with a "+" button at the right end of
+// each content type item (`newTo` of the menu item). See PlutoAdminNavNew for
+// why the button is not inside the item link. The `item` and `childItem` are
+// `relative`, so the button can sit on the row.
+//
+// The `item-trailing` slot replaces the default trailing content, so this
+// component draws the chevron of a group again, with the classes of Nuxt UI.
+defineProps<{
+  collapsed?: boolean
+}>()
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <UNavigationMenu
+    :collapsed="collapsed"
+    :ui="{
+      item: 'relative',
+      childItem: 'relative',
+      link: 'gap-x-2.5 py-2',
+      linkLeadingIcon: 'size-4.5',
+    }"
+  >
+    <template #item-trailing="{ item, active, ui }">
+      <PlutoAdminNavNew
+        v-if="item.newTo && !collapsed"
+        :label="item.newLabel ?? ''"
+        :to="item.newTo"
+        :chevron="Boolean(item.children?.length)"
+      />
+      <UIcon
+        v-if="item.children?.length"
+        :name="item.trailingIcon || appConfig.ui.icons.chevronDown"
+        :class="ui.linkTrailingIcon({ active })"
+        data-slot="linkTrailingIcon"
+      />
+    </template>
+  </UNavigationMenu>
+</template>

package/app/components/Pluto/Admin/PlutoAdminNavNew.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// The "+" button of a content type item in the admin sidebar. It renders in the
+// `item-trailing` slot of the item, so it knows the item. But a link cannot hold
+// a button (invalid HTML). So the slot holds only an empty spacer that keeps room
+// at the right end of the row. On mount, the component adds a host element right
+// after the item link (a sibling, inside the same <li>) and teleports the button
+// there. The button is then after its link in the tab order and does not sit in
+// it. A click on the button does not reach the link.
+//
+// The button is always in the tab order. It is invisible until the row is hovered,
+// or the link or the button has the focus. A hidden control that cannot be reached
+// would need a changing `tabindex`, and keyboard users would not know it is there.
+// Focus makes it show.
+const props = defineProps<{
+  label: string
+  to: string
+  /** The item has a group chevron at its right end, so the button sits left of it. */
+  chevron?: boolean
+}>()
+
+const anchor = useTemplateRef<HTMLElement>('anchor')
+const host = shallowRef<HTMLElement>()
+
+onMounted(() => {
+  const link = anchor.value?.closest('a, button')
+  if (!link) {
+    return
+  }
+  const el = document.createElement('div')
+  // The <li> is `relative` (the menu `ui`). The row is 34 px high (py-2 and a
+  // size-4.5 icon), so the host has that height and centers the button.
+  el.className = [
+    'absolute top-0 flex h-8.5 items-center opacity-0',
+    // Show on hover or focus of the link, and on hover or focus of the button.
+    '[:is(a,button):hover+&]:opacity-100 [:is(a,button):focus-visible+&]:opacity-100',
+    'hover:opacity-100 focus-within:opacity-100',
+    props.chevron ? 'right-9' : 'right-2.5',
+  ].join(' ')
+  link.after(el)
+  host.value = el
+})
+
+onBeforeUnmount(() => host.value?.remove())
+</script>
+
+<template>
+  <span ref="anchor" class="size-5 shrink-0" aria-hidden="true" />
+  <Teleport v-if="host" :to="host">
+    <UButton
+      :aria-label="label"
+      :title="label"
+      class="cursor-pointer"
+      icon="i-lucide-plus"
+      color="neutral"
+      variant="ghost"
+      size="xs"
+      square
+      @click="navigateTo(to)"
+    />
+  </Teleport>
+</template>

package/app/components/Pluto/Admin/PlutoAdminNavbar.vue

@@ -44,9 +44,12 @@ const siteDomain = computed(() => domainFromUrl(site.url.value) || host)
           <NuxtLink
             :title="t('pluto.navbar.goHome')"
             to="/admin/home"
-            class="group flex h-full items-center gap-x-2"
+            class="group outline-inverted/40 flex h-full items-center gap-x-2 rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2"
           >
-            <!-- A brand logo (white label), else the Pluto logo. The mark only on a small screen. -->
+            <!--
+              A brand logo (white label), its mark only on a small screen. Else the Pluto
+              mark: the site chip next to it names the site.
+            -->
             <template v-if="brandLogo">
               <img
                 :src="brandMark"
@@ -59,17 +62,12 @@ const siteDomain = computed(() => domainFromUrl(site.url.value) || host)
                 class="hidden h-7 w-auto max-w-40 object-contain sm:block"
               />
             </template>
-            <template v-else>
-              <PlutoLogo
-                aria-hidden="true"
-                class="block h-6.75 w-auto grayscale-100 group-hover:grayscale-0 sm:hidden"
-                mark
-              />
-              <PlutoLogo
-                aria-hidden="true"
-                class="text-highlighted hidden h-7.75 w-auto grayscale-100 group-hover:grayscale-0 sm:block"
-              />
-            </template>
+            <PlutoLogo
+              v-else
+              aria-hidden="true"
+              class="block h-6.75 w-auto grayscale-100 group-hover:grayscale-0"
+              mark
+            />
             <!-- The site that this admin edits, as a chip. -->
             <span
               v-if="siteName"
@@ -80,7 +78,12 @@ const siteDomain = computed(() => domainFromUrl(site.url.value) || host)
           </NuxtLink>
         </div>
 
-        <div class="h-full min-w-0 overflow-hidden">
+        <!--
+          The overflow clip keeps a long list of actions from pushing the bar. The
+          padding and the negative margin give the focus ring of the first and the last
+          action room inside the clip, without moving them.
+        -->
+        <div class="-mx-1 h-full min-w-0 overflow-hidden px-1">
           <ul class="flex h-full min-w-0 items-center gap-x-1 text-sm">
             <PlutoNavbarButton
               v-if="isAdmin"
@@ -97,7 +100,11 @@ const siteDomain = computed(() => domainFromUrl(site.url.value) || host)
                   <div
                     class="text-dimmed flex h-full items-center gap-x-2 rounded-sm px-2"
                   >
-                    <Icon name="svg-spinners:ring-resize" />
+                    <!-- Lucide: an app's icon bundle always has it. -->
+                    <Icon
+                      name="i-lucide-loader-circle"
+                      class="size-4 animate-spin"
+                    />
                   </div>
                 </li>
               </template>

package/app/components/Pluto/Admin/PlutoAdminUserMenu.vue

@@ -127,21 +127,8 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 defineShortcuts(computed(() => extractShortcuts(items.value)))
 
-// The default portal is the end of <body>, outside the admin scope. This
-// target carries `data-pluto-admin-scope`, so the menu gets the admin theme and
-// the admin radius on a public page too. The target is at the end of <body>,
-// not in the navbar: the navbar is fixed with a z-index, so it makes a
-// stacking context, and a menu inside it cannot show above a site header with
-// the same z-index. The component makes the element itself. A target that Vue
-// renders can appear after the portal looks for it.
-const portalTarget = shallowRef<HTMLElement>()
-onMounted(() => {
-  const el = document.createElement('div')
-  el.setAttribute('data-pluto-admin-scope', '')
-  document.body.append(el)
-  portalTarget.value = el
-})
-onUnmounted(() => portalTarget.value?.remove())
+// The portal target gives the menu the admin theme on a public page too.
+const portalTarget = usePlutoAdminPortal()
 </script>
 
 <template>
@@ -151,6 +138,7 @@ onUnmounted(() => portalTarget.value?.remove())
       :ui="{ content: 'w-64' }"
       :modal="false"
       :portal="portalTarget ?? true"
+      :arrow="{ width: 14, height: 7 }"
     >
       <!--
         The button fills the height of the bar. The pill inside it keeps the
@@ -162,7 +150,7 @@ onUnmounted(() => portalTarget.value?.remove())
         type="button"
       >
         <div
-          class="outline-inverted/25 group-hover:bg-elevated group-focus-visible:bg-elevated flex h-8 items-center gap-x-2 rounded-sm rounded-l-xl pr-2 pl-0.5 group-focus-visible:outline-3"
+          class="outline-inverted/25 group-hover:bg-elevated group-focus-visible:bg-elevated group-data-[state=open]:bg-elevated flex h-8 items-center gap-x-2 rounded-sm rounded-l-xl pr-2 pl-0.5 group-focus-visible:outline-3"
         >
           <UAvatar
             :src="avatar"

package/app/components/Pluto/Content/PlutoContentBarActions.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 // The admin bar buttons of the content types that set `adminBar`, for a user
 // with the `write` capability of the type:
-// - "New <type>" on every page where the bar shows.
+// - "New <type>" on every page where the bar shows. With two or more types, one
+//   "New" button opens a menu. The types without a group are direct items. A
+//   group (`navGroup`) with two or more types is a submenu.
 // - "Edit <type>" on a public page that called `usePlutoEditLink`. The admin
 //   form has its own View link, so it does not show on /admin.
 // Each button is an <li>, because the bar actions sit in a <ul>.
+import type { DropdownMenuItem } from '@nuxt/ui'
 import { isAdminPath } from '../../../composables/internal/admin-shell'
+import { buildNewMenu } from '../../../composables/internal/new-menu'
 
 const route = useRoute()
 const { items: contentTypes, byName } = usePlutoContentTypes()
@@ -13,21 +17,161 @@ const { can } = usePlutoPermissions()
 const { t } = usePlutoI18n()
 const texts = usePlutoContentTexts()
 const current = usePlutoCurrentContent()
+const registry = usePlutoRegistry()
+const { tx } = usePlutoI18n()
+const portalTarget = usePlutoAdminPortal()
+
+// The New menu also opens on hover, after a short delay, and closes a short
+// time after the pointer leaves the button and the menu. A pointer on the portal
+// target counts as inside, because the menu and its submenus render there. This
+// keeps the move from the button into the menu, and into a submenu, open.
+// Touch has no hover: a tap opens the menu as before. Click and keyboard use the
+// open state of the dropdown, so they work as before.
+const HOVER_OPEN_DELAY = 120
+const HOVER_CLOSE_DELAY = 200
+const menuOpen = ref(false)
+// True while the menu is open because of a hover. A click on the button then
+// keeps it open, instead of toggling it closed. The pointer leaving closes it.
+let openedByHover = false
+// True when the last open was a hover. Then the close does not move the focus
+// back to the button: the focus ring would stay on it after the pointer left.
+// A menu opened by a click or the keyboard returns the focus, as before.
+let skipFocusReturn = false
+let openTimer: ReturnType<typeof setTimeout> | undefined
+let closeTimer: ReturnType<typeof setTimeout> | undefined
+// The time until which a close request is ignored (see onUpdateOpen).
+let confirmUntil = 0
+
+function clearTimers() {
+  clearTimeout(openTimer)
+  clearTimeout(closeTimer)
+}
+
+function onHoverEnter(event: PointerEvent) {
+  if (event.pointerType === 'touch') {
+    return
+  }
+  clearTimers()
+  if (!menuOpen.value) {
+    openTimer = setTimeout(() => {
+      if (!menuOpen.value) {
+        openedByHover = true
+        skipFocusReturn = true
+        menuOpen.value = true
+      }
+    }, HOVER_OPEN_DELAY)
+  }
+}
+
+function onHoverLeave(event: PointerEvent) {
+  if (event.pointerType === 'touch') {
+    return
+  }
+  clearTimers()
+  if (menuOpen.value) {
+    closeTimer = setTimeout(() => {
+      menuOpen.value = false
+    }, HOVER_CLOSE_DELAY)
+  }
+}
+
+// The click confirms the menu that the hover opened. The dropdown must not
+// toggle it (pointerdown) and must not see the focus leave its content
+// (mousedown moves the focus to the button).
+function keepsHoverMenu(event: PointerEvent | MouseEvent): boolean {
+  return (
+    (!('pointerType' in event) || event.pointerType !== 'touch') &&
+    menuOpen.value &&
+    openedByHover
+  )
+}
+
+function onTriggerPointerDown(event: PointerEvent) {
+  // A click is faster than the hover delay: it decides, not the hover.
+  clearTimeout(openTimer)
+  if (keepsHoverMenu(event)) {
+    confirmUntil = Date.now() + 500
+    event.stopPropagation()
+  }
+}
+
+// The dropdown asks to close on the click that confirms a hover menu (a pointer
+// or focus event outside its content). Ignore that request for a moment.
+
+function onUpdateOpen(open: boolean) {
+  if (!open && Date.now() < confirmUntil) {
+    return
+  }
+  if (open) {
+    skipFocusReturn = false
+  }
+  menuOpen.value = open
+}
+
+function onCloseAutoFocus(event: Event) {
+  if (skipFocusReturn) {
+    event.preventDefault()
+  }
+}
+
+function onTriggerMouseDown(event: MouseEvent) {
+  if (keepsHoverMenu(event)) {
+    event.preventDefault()
+  }
+}
+
+watch(menuOpen, (open) => {
+  if (!open) {
+    openedByHover = false
+    clearTimers()
+  }
+})
+
+watch(portalTarget, (el, previous) => {
+  previous?.removeEventListener('pointerenter', onHoverEnter)
+  previous?.removeEventListener('pointerleave', onHoverLeave)
+  el?.addEventListener('pointerenter', onHoverEnter)
+  el?.addEventListener('pointerleave', onHoverLeave)
+})
+
+onBeforeUnmount(() => {
+  clearTimers()
+  portalTarget.value?.removeEventListener('pointerenter', onHoverEnter)
+  portalTarget.value?.removeEventListener('pointerleave', onHoverLeave)
+})
 
 // No capability declared means open to anyone who can reach the admin, like the form.
 function canWrite(type: PlutoContentType): boolean {
   return !type.capabilities?.write || can(type.capabilities.write)
 }
 
-const newButtons = computed(() =>
-  contentTypes.value
-    .map((entry) => entry.type)
-    .filter((type) => contentTypeAdminBar(type).new && canWrite(type))
-    .map((type) => ({
-      name: type.name,
-      label: texts(type.name).newLabel,
-      to: contentTypeNewPath(type),
-    }))
+const newEntries = computed(() =>
+  contentTypes.value.filter(
+    ({ type }) => contentTypeAdminBar(type).new && canWrite(type)
+  )
+)
+
+// One type: a "New <type>" button.
+const newButton = computed(() => {
+  const type = newEntries.value[0]?.type
+  return newEntries.value.length === 1 && type
+    ? {
+        label: texts(type.name).newLabel,
+        to: contentTypeNewPath(type),
+      }
+    : null
+})
+
+// Two or more types: one menu (see buildNewMenu). The types without a group are
+// direct items, and a group with two or more types is a submenu.
+const newMenuItems = computed<DropdownMenuItem[]>(() =>
+  newEntries.value.length < 2
+    ? []
+    : buildNewMenu(newEntries.value, registry.navGroups.list.value, {
+        label: (type) => texts(type.name).label,
+        groupLabel: (group) => tx(group.label),
+        to: contentTypeNewPath,
+      })
 )
 
 const editButton = computed(() => {
@@ -51,12 +195,41 @@ const editButton = computed(() => {
 
 <template>
   <PlutoNavbarButton
-    v-for="button in newButtons"
-    :key="button.name"
-    :label="button.label"
-    :to="button.to"
+    v-if="newButton"
+    :label="newButton.label"
+    :to="newButton.to"
     icon="i-lucide-plus"
   />
+  <li
+    v-else-if="newMenuItems.length > 0"
+    class="h-full shrink-0"
+    @pointerenter="onHoverEnter"
+    @pointerleave="onHoverLeave"
+    @pointerdown.capture="onTriggerPointerDown"
+    @mousedown.capture="onTriggerMouseDown"
+  >
+    <!--
+      The portal and the modal flag follow the user menu. See usePlutoAdminPortal.
+    -->
+    <UDropdownMenu
+      :open="menuOpen"
+      :items="newMenuItems"
+      :content="{ align: 'start', onCloseAutoFocus }"
+      :modal="false"
+      :portal="portalTarget ?? true"
+      :ui="{ content: 'min-w-48' }"
+      :arrow="{ width: 14, height: 7 }"
+      @update:open="onUpdateOpen"
+    >
+      <PlutoNavbarHit
+        :label="t('pluto.content.newMenu')"
+        icon="i-lucide-plus"
+        size="sm"
+      >
+        <span class="hidden lg:inline">{{ t('pluto.content.newMenu') }}</span>
+      </PlutoNavbarHit>
+    </UDropdownMenu>
+  </li>
   <PlutoNavbarButton
     v-if="editButton"
     :label="editButton.label"

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

@@ -37,10 +37,9 @@ const { t } = usePlutoI18n()
         </div>
 
         <div class="min-h-0 flex-1 overflow-y-auto px-2 pb-4">
-          <UNavigationMenu
+          <PlutoAdminNavMenu
             v-model="openGroups"
             :items="menu"
-            :ui="{ link: 'gap-x-2.5 py-2', linkLeadingIcon: 'size-4.5' }"
             orientation="vertical"
             variant="pill"
             class="data-[orientation=vertical]:w-full"

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

@@ -36,7 +36,7 @@ defineProps<{
       :size="size"
       :square="square"
       as="span"
-      class="group-hover:bg-elevated group-active:bg-elevated pointer-events-none group-focus-visible:outline-3"
+      class="group-hover:bg-elevated group-active:bg-elevated group-data-[state=open]:bg-elevated pointer-events-none group-focus-visible:outline-3"
       color="neutral"
       variant="ghost"
       aria-hidden="true"

package/app/composables/internal/nav-groups.ts

@@ -0,0 +1,54 @@
+import type { PlutoContentType } from '../../../shared/types/content'
+import type { PlutoNavGroup } from '../../../shared/types/registry'
+
+/**
+ * The group a content type names with `navGroup`. The full id of the group
+ * (`pluto:pages`) matches first. A bare id (`pages`) matches when one group
+ * has it. No match gives `undefined`, so the type stays a normal item.
+ */
+export function findNavGroup(
+  groups: readonly PlutoNavGroup[],
+  name: string | undefined
+): PlutoNavGroup | undefined {
+  if (!name) {
+    return undefined
+  }
+  const exact = groups.find((group) => group.id === name)
+  if (exact) {
+    return exact
+  }
+  const bare = groups.filter((group) => group.id.endsWith(`:${name}`))
+  return bare.length === 1 ? bare[0] : undefined
+}
+
+export interface NavGroupBucket<T> {
+  group: PlutoNavGroup
+  items: T[]
+}
+
+/**
+ * Splits content types into the ones without a known group and the buckets of
+ * each group. The buckets follow the order of `groups`. The order of the
+ * types inside each part stays as it is.
+ */
+export function splitByNavGroup<T extends { type: PlutoContentType }>(
+  entries: readonly T[],
+  groups: readonly PlutoNavGroup[]
+): { ungrouped: T[]; grouped: NavGroupBucket<T>[] } {
+  const ungrouped: T[] = []
+  const buckets = new Map<string, NavGroupBucket<T>>()
+  for (const entry of entries) {
+    const group = findNavGroup(groups, entry.type.navGroup)
+    if (!group) {
+      ungrouped.push(entry)
+      continue
+    }
+    const bucket = buckets.get(group.id) ?? { group, items: [] }
+    bucket.items.push(entry)
+    buckets.set(group.id, bucket)
+  }
+  return {
+    ungrouped,
+    grouped: groups.flatMap((group) => buckets.get(group.id) ?? []),
+  }
+}

package/app/composables/internal/new-menu.ts

@@ -0,0 +1,52 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { PlutoContentType } from '../../../shared/types/content'
+import type { PlutoNavGroup } from '../../../shared/types/registry'
+import { splitByNavGroup } from './nav-groups'
+
+export interface NewMenuOptions {
+  /** The singular label of a type. */
+  label: (type: PlutoContentType) => string
+  /** The label of a group (already translated). */
+  groupLabel: (group: PlutoNavGroup) => string
+  /** The link to the new page of a type. */
+  to: (type: PlutoContentType) => string
+}
+
+/**
+ * The items of the "New" menu of the admin bar, for the types that can show a
+ * New button. The types without a group come first, as direct links. Each group
+ * follows, in the order of `groups`. A group with two or more types is a
+ * submenu (label and icon of the group, one link per type). A group with one
+ * type shows that type as a direct link. When the only entry is one group, the
+ * menu shows the types of the group directly, without the submenu. The caller shows a plain button, not
+ * this menu, when there is one type in total.
+ */
+export function buildNewMenu(
+  entries: ReadonlyArray<{ type: PlutoContentType }>,
+  groups: readonly PlutoNavGroup[],
+  options: NewMenuOptions
+): DropdownMenuItem[] {
+  const link = ({ type }: { type: PlutoContentType }): DropdownMenuItem => ({
+    label: options.label(type),
+    icon: type.icon,
+    type: 'link',
+    to: options.to(type),
+  })
+  const { ungrouped, grouped } = splitByNavGroup(entries, groups)
+  const items: DropdownMenuItem[] = [
+    ...ungrouped.map(link),
+    ...grouped.flatMap(({ group, items }): DropdownMenuItem[] =>
+      items.length >= 2
+        ? [
+            {
+              label: options.groupLabel(group),
+              icon: group.icon,
+              children: items.map(link),
+            },
+          ]
+        : items.map(link)
+    ),
+  ]
+  const only = items.length === 1 ? items[0] : undefined
+  return only?.children ? (only.children as DropdownMenuItem[]) : items
+}

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

@@ -4,7 +4,11 @@ import { activeNavGroups, nextOpenGroups } from './internal/admin-menu'
 // `to` is typed per-app via Nuxt's typed pages, so it differs across every
 // app that extends this layer. This menu only ever uses `href`, so drop `to`
 // here to avoid a cross-app type mismatch on that field.
-export type PlutoAdminMenuItem = Omit<NavigationMenuItem, 'to'>
+export type PlutoAdminMenuItem = Omit<NavigationMenuItem, 'to'> & {
+  /** The new page of a content type. PlutoAdminNavMenu shows a "+" for it. */
+  newTo?: string
+  newLabel?: string
+}
 
 function toMenuItem(item: PlutoNavItem, active: boolean): PlutoAdminMenuItem {
   return {
@@ -17,12 +21,17 @@ function toMenuItem(item: PlutoNavItem, active: boolean): PlutoAdminMenuItem {
     label: item.label,
     icon: item.icon,
     href: item.to,
+    newTo: item.newTo,
+    newLabel: item.newLabel,
     // Top-level items SPA-navigate instead of doing a full page load.
     // Children stay href-only.
     onSelect: item.to ? () => navigateTo(item.to) : undefined,
     children: item.children?.map((child) => ({
       label: child.label,
+      icon: child.icon,
       href: child.to,
+      newTo: child.newTo,
+      newLabel: child.newLabel,
       // A child that points at its parent's own path (Settings > General)
       // must not stay active on the sibling pages below that path.
       exact: child.to === item.to ? true : undefined,

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

@@ -1,5 +1,8 @@
+import type { NavGroupBucket } from './internal/nav-groups'
+import { contentTypeNewPath } from '../../shared/utils/content-admin-paths'
 import { contentTypeMatches } from './internal/admin-menu'
 import { contentTextFor } from './internal/content-text'
+import { findNavGroup, splitByNavGroup } from './internal/nav-groups'
 
 // The id of core's Settings nav item (extension `pluto`, entry `settings`).
 const SETTINGS_NAV_ID = 'pluto:settings'
@@ -21,6 +24,12 @@ const SETTINGS_NAV_ID = 'pluto:settings'
  * labels come from `usePlutoContentText`, so the convention keys apply. The
  * `computed` reads the active locale, so a locale switch updates the labels.
  *
+ * A content type that names a group (`type.navGroup`, see the `navGroups`
+ * bucket) joins the group item when the group has two or more visible types.
+ * The item has the label and the icon of the group, and one child per type
+ * (its plural label, linked to its list page). It is active on the pages of its
+ * types. A group with one visible type shows that type as a normal item.
+ *
  * The Settings item (`pluto:settings`) gets one child per visible settings page
  * (`usePlutoSettingsPages`) when there are two or more. It opens by default
  * on `/admin/settings/**`.
@@ -36,12 +45,16 @@ const SETTINGS_NAV_ID = 'pluto:settings'
 export function usePlutoAdminNav() {
   const registry = usePlutoRegistry()
   const { items: contentTypes } = usePlutoContentTypes()
+  const navGroups = registry.navGroups.list
   const { can } = usePlutoPermissions()
   const { items: settingsPages, current: currentSettingsPage } =
     usePlutoSettingsPages()
   const i18n = usePlutoI18n()
   const { t, tx } = i18n
 
+  // Dev only. The groups already warned about, so each warns once.
+  const warnedGroups = new Set<string>()
+
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
     const resolveLabels = (item: PlutoNavItem): PlutoNavItem => ({
@@ -53,33 +66,98 @@ export function usePlutoAdminNav() {
       })),
     })
 
-    const contentNav: PlutoNavItem[] = contentTypes.value
-      .filter((entry) => entry.type.autoRoutes !== false)
-      .map((entry) => {
-        const type = entry.type
-        const text = contentTextFor(type, i18n)
-        const basePath = type.basePath ?? `/admin/content/${type.name}`
+    const isVisible = (type: PlutoContentType): boolean =>
+      !type.capabilities?.read || can(type.capabilities.read)
 
-        return {
-          id: `content:${type.name}`,
-          order: type.navOrder ?? 100,
-          label: text.labelPlural,
+    // The "+" of the sidebar: the new page of a type the user may write.
+    const canWrite = (type: PlutoContentType): boolean =>
+      !type.capabilities?.write || can(type.capabilities.write)
+    const newLink = (type: PlutoContentType) =>
+      canWrite(type)
+        ? {
+            newTo: contentTypeNewPath(type),
+            newLabel: contentTextFor(type, i18n).newLabel,
+          }
+        : {}
+
+    function typeNav(type: PlutoContentType): PlutoNavItem {
+      const text = contentTextFor(type, i18n)
+      const basePath = type.basePath ?? `/admin/content/${type.name}`
+
+      return {
+        id: `content:${type.name}`,
+        order: type.navOrder ?? 100,
+        label: text.labelPlural,
+        icon: type.icon,
+        to: basePath,
+        ...newLink(type),
+        enabled: () => isVisible(type),
+        children: [
+          {
+            label: t('pluto.content.all', { labelPlural: text.labelPlural }),
+            to: basePath,
+          },
+          {
+            label: t('pluto.content.createNew', { label: text.label }),
+            to: `${basePath}/new`,
+          },
+        ],
+      }
+    }
+
+    // One item for the visible types of a group. A child is the list page of a
+    // type. The `match` paths keep the item active on the new and edit pages.
+    function groupNav(bucket: NavGroupBucket<PlutoContentTypeEntry>) {
+      const types = bucket.items.map((entry) => entry.type)
+      const basePathOf = (type: PlutoContentType) =>
+        type.basePath ?? `/admin/content/${type.name}`
+      return {
+        id: `group:${bucket.group.id}`,
+        order: bucket.group.order ?? 100,
+        label: tx(bucket.group.label),
+        icon: bucket.group.icon,
+        children: types.map((type) => ({
+          label: contentTextFor(type, i18n).labelPlural,
+          to: basePathOf(type),
           icon: type.icon,
-          to: basePath,
-          enabled: () =>
-            !type.capabilities?.read || can(type.capabilities.read),
-          children: [
-            {
-              label: t('pluto.content.all', { labelPlural: text.labelPlural }),
-              to: basePath,
-            },
-            {
-              label: t('pluto.content.createNew', { label: text.label }),
-              to: `${basePath}/new`,
-            },
-          ],
-        }
-      })
+          ...newLink(type),
+        })),
+        match: types.flatMap((type) =>
+          [type.newPath, type.editPath?.('').replace(/\/+$/, '')].filter(
+            (path): path is string => Boolean(path)
+          )
+        ),
+      } satisfies PlutoNavItem
+    }
+
+    const autoRouted = contentTypes.value.filter(
+      (entry) => entry.type.autoRoutes !== false && isVisible(entry.type)
+    )
+    const { ungrouped, grouped } = splitByNavGroup(autoRouted, navGroups.value)
+    for (const entry of autoRouted) {
+      const name = entry.type.navGroup
+      if (
+        import.meta.dev &&
+        name &&
+        !findNavGroup(navGroups.value, name) &&
+        !warnedGroups.has(name)
+      ) {
+        warnedGroups.add(name)
+        console.warn(
+          `[pluto] The content type "${entry.type.name}" names the nav group "${name}", but no extension declares it.`
+        )
+      }
+    }
+
+    // A group with one visible type shows that type as a normal item.
+    const contentNav: PlutoNavItem[] = [
+      ...ungrouped.map((entry) => typeNav(entry.type)),
+      ...grouped.flatMap((bucket) =>
+        bucket.items.length >= 2
+          ? [groupNav(bucket)]
+          : bucket.items.map((entry) => typeNav(entry.type))
+      ),
+    ]
 
     // The Settings item lists one child per visible settings page, when there
     // are two or more. With one page (General), the item stays a plain link.

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

@@ -0,0 +1,22 @@
+/**
+ * A portal target for the dropdown menus of the admin bar. The default portal
+ * is the end of `<body>`, outside the admin scope. This target carries
+ * `data-pluto-admin-scope`, so a menu gets the admin theme and the admin
+ * radius on a public page too. The target is at the end of `<body>`, not in the
+ * navbar: the navbar is fixed with a z-index, so it makes a stacking context,
+ * and a menu inside it cannot show above a site header with the same z-index.
+ * The composable makes the element itself. A target that Vue renders can
+ * appear after the portal looks for it. Pass `portalTarget ?? true` to the
+ * `portal` prop of `UDropdownMenu`.
+ */
+export function usePlutoAdminPortal() {
+  const portalTarget = shallowRef<HTMLElement>()
+  onMounted(() => {
+    const el = document.createElement('div')
+    el.setAttribute('data-pluto-admin-scope', '')
+    document.body.append(el)
+    portalTarget.value = el
+  })
+  onUnmounted(() => portalTarget.value?.remove())
+  return portalTarget
+}

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

@@ -60,7 +60,7 @@ export function usePlutoCommandPalette() {
       ...(item.children ?? []).flatMap((child) =>
         child.to
           ? command(tx(child.label), child.to, {
-              icon: item.icon,
+              icon: child.icon ?? item.icon,
               suffix: tx(item.label),
             })
           : []

package/app/composables/pluto-extension.ts

@@ -54,6 +54,7 @@ export function definePlutoExtension(definition: PlutoExtension): void {
   )
   registry.contentActions.set(definition.id, definition.contentActions ?? [])
   registry.mediaKinds.set(definition.id, definition.mediaKinds ?? [])
+  registry.navGroups.set(definition.id, definition.navGroups ?? [])
   registry.contentToolbarItems.set(
     definition.id,
     definition.contentToolbarItems ?? []

package/app/composables/pluto-registry.ts

@@ -34,6 +34,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       contentActions: createOwnedRegistry<PlutoContentAction>(),
       contentToolbarItems: createOwnedRegistry<PlutoContentToolbarItem>(),
       mediaKinds: createOwnedRegistry<PlutoMediaKind>(),
+      navGroups: createOwnedRegistry<PlutoNavGroup>(),
     }
   }
 

package/app/layouts/admin.vue

@@ -63,11 +63,10 @@ const groupStyle = { top: 'var(--pluto-admin-bar-height)' }
           popover lists the children of a group. Nuxt UI keeps the state in the group cookie.
         -->
         <template #default="{ collapsed }">
-          <UNavigationMenu
+          <PlutoAdminNavMenu
             v-model="openGroups"
             :items="menu"
             :collapsed="collapsed"
-            :ui="{ link: 'gap-x-2.5 py-2', linkLeadingIcon: 'size-4.5' }"
             orientation="vertical"
             variant="pill"
             class="data-[orientation=vertical]:w-full"

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

@@ -69,8 +69,16 @@ export default defineNuxtPlugin(() => {
   definePlutoExtension({
     id: 'pluto',
     capabilities: [
-      { id: 'media-manage', key: 'media:manage', label: 'pluto.media.capabilities.manage' },
-      { id: 'media-delete', key: 'media:delete', label: 'pluto.media.capabilities.delete' },
+      {
+        id: 'media-manage',
+        key: 'media:manage',
+        label: 'pluto.media.capabilities.manage',
+      },
+      {
+        id: 'media-delete',
+        key: 'media:delete',
+        label: 'pluto.media.capabilities.delete',
+      },
     ],
     nav: [
       {
@@ -208,6 +216,16 @@ export default defineNuxtPlugin(() => {
         component: PlutoDashboardQuickActions,
       },
     ],
+    // The groups of content types in the sidebar and the admin bar. A type names one
+    // with `navGroup`. Order 100 puts the group with the content items.
+    navGroups: [
+      {
+        id: 'pages',
+        order: 100,
+        label: 'pluto.nav.pages',
+        icon: 'i-lucide-book-open',
+      },
+    ],
     // "New <type>" and "Edit <type>" for the content types that set `adminBar`.
     navbarActions: [
       { id: 'content', order: 50, component: PlutoContentBarActions },

package/i18n/locales/en.json

@@ -39,7 +39,8 @@
     "nav": {
       "home": "Home",
       "settings": "Settings",
-      "media": "Media"
+      "media": "Media",
+      "pages": "Pages"
     },
     "pages": {
       "dashboard": "Dashboard",
@@ -53,6 +54,7 @@
     "content": {
       "new": "New {label}",
       "edit": "Edit {label}",
+      "newMenu": "New",
       "all": "All {labelPlural}",
       "createNew": "Create new {label}",
       "typeNotFound": "Content type not found",

package/i18n/locales/pt-BR.json

@@ -39,7 +39,8 @@
     "nav": {
       "home": "Início",
       "settings": "Configurações",
-      "media": "Mídia"
+      "media": "Mídia",
+      "pages": "Páginas"
     },
     "pages": {
       "dashboard": "Painel",
@@ -53,6 +54,7 @@
     "content": {
       "new": "Criar {label}",
       "edit": "Editar {label}",
+      "newMenu": "Novo",
       "all": "Ver {labelPlural}",
       "createNew": "Criar {label}",
       "typeNotFound": "Tipo de conteúdo não encontrado",

package/nuxt.config.ts

@@ -8,8 +8,9 @@ const utilsLayer = process.env.PLUTO_UTILS_PATH || '@plutocms/utils'
 export default defineNuxtConfig({
   extends: [utilsLayer],
 
+  // No @nuxt/eslint: a module of a layer runs in every app that extends it. The
+  // repo lints with @nuxt/eslint-config (eslint.config.mjs at the root).
   modules: [
-    '@nuxt/eslint',
     '@nuxt/image',
     '@nuxt/ui',
     '@vueuse/nuxt',
@@ -107,15 +108,6 @@ export default defineNuxtConfig({
     typeCheck: false,
   },
 
-  eslint: {
-    config: {
-      nuxt: {
-        sortConfigKeys: true,
-      },
-      standalone: false,
-    },
-  },
-
   // Modules configurations
   fonts: {
     defaults: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/core",
   "type": "module",
-  "version": "0.38.2",
+  "version": "0.39.1",
   "description": "The base layer every Pluto app extends: the admin, the content model, and the GitHub CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -27,18 +27,10 @@
     "dev": "nuxt dev --no-fork",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
+    "dev:prepare": "nuxt prepare",
     "typecheck": "nuxt prepare && vue-tsc -b --noEmit",
     "test": "vitest run"
   },
-  "trustedDependencies": [
-    "@parcel/watcher",
-    "@plutocms/utils",
-    "@tailwindcss/oxide",
-    "esbuild",
-    "unrs-resolver",
-    "vue-demi"
-  ],
   "dependencies": {
     "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-markdown": "^6.5.2",
@@ -49,7 +41,6 @@
     "@iconify-json/lucide": "^1.2.144",
     "@internationalized/date": "^3.12.4",
     "@lezer/highlight": "^1.2.5",
-    "@nuxt/eslint": "^1.17.0",
     "@nuxt/image": "^2.1.0",
     "@nuxt/ui": "^4.12.0",
     "@plutocms/utils": ">=0.3.0 <1.0.0",

package/shared/types/content.ts

@@ -246,6 +246,15 @@ export interface PlutoContentType {
         edit?: boolean
       }
   navOrder?: number
+  /**
+   * The id of a nav group (the registry bucket `navGroups`), for example
+   * `'pluto:pages'`. The bare id of a group (`'pages'`) works when one group
+   * has it. The types of a group show as one sidebar item with one link per
+   * type, and in one "New" menu of the admin bar. A group with one visible type
+   * shows that type as a normal item. An unknown group is ignored. Unset: the
+   * type is its own item.
+   */
+  navGroup?: string
   i18n?: PlutoContentI18n
   /**
    * The public URL of an item, for the "View <label>" link in the form toolbar. Return

package/shared/types/registry.ts

@@ -30,6 +30,18 @@ export interface PlutoMediaKind extends PlutoEntry {
   inspect?: (file: Blob) => Promise<string | null>
 }
 
+/**
+ * A group of content types in the admin menus. A content type names its group
+ * with `navGroup`. The sidebar shows the types of a group as one item with one
+ * link per type, and the admin bar lists them in one "New" menu. Core declares
+ * the group `pages`. See the extension-registry skill.
+ */
+export interface PlutoNavGroup extends PlutoEntry {
+  /** A translation key or literal: the name of the group ("Pages"). */
+  label: string
+  icon?: string
+}
+
 export interface PlutoEntry {
   /** Unique inside this extension. Stored as `<extensionId>:<id>`. */
   id: string
@@ -42,6 +54,11 @@ export interface PlutoEntry {
 export interface PlutoNavChild {
   label: string
   to: string
+  icon?: string
+  /** The new page of a content type. The sidebar shows a "+" on hover. */
+  newTo?: string
+  /** The text of that "+" (`New <type>`). */
+  newLabel?: string
 }
 
 export interface PlutoNavItem extends PlutoEntry {
@@ -56,6 +73,10 @@ export interface PlutoNavItem extends PlutoEntry {
   match?: string[]
   children?: PlutoNavChild[]
   defaultOpen?: boolean
+  /** The new page of a content type, when the user may write it. The sidebar shows a "+" on hover. */
+  newTo?: string
+  /** The text of that "+" (`New <type>`). */
+  newLabel?: string
 }
 
 /** A navbar action that renders its own component. */
@@ -355,6 +376,7 @@ export interface PlutoExtension {
   contentActions?: PlutoContentAction[]
   contentToolbarItems?: PlutoContentToolbarItem[]
   mediaKinds?: PlutoMediaKind[]
+  navGroups?: PlutoNavGroup[]
 }
 
 /**
@@ -390,4 +412,5 @@ export interface PlutoRegistry {
   contentActions: PlutoRegistryBucket<PlutoContentAction>
   contentToolbarItems: PlutoRegistryBucket<PlutoContentToolbarItem>
   mediaKinds: PlutoRegistryBucket<PlutoMediaKind>
+  navGroups: PlutoRegistryBucket<PlutoNavGroup>
 }