@plutocms/core 0.39.2 → 0.41.0

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Changelog
 
 
+## [0.41.0](https://github.com/plutocms/pluto/compare/v0.40.0...v0.41.0) (2026-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* @plutocms/core does not extend @plutocms/utils anymore. Its auto-imports (formatCurrency, slugify, fileNameToKebabCase) are gone from apps that relied on core to bring them. domainFromUrl is now in core.
+
+### Features
+
+* **admin:** section tabs for every menu item with a submenu ([#315](https://github.com/plutocms/pluto/issues/315)) ([98afbe4](https://github.com/plutocms/pluto/commit/98afbe45833caa6f834aa70703611970eadd5ccb))
+* core no longer extends @plutocms/utils (retired); domainFromUrl is in core ([#314](https://github.com/plutocms/pluto/issues/314)) ([5fe3947](https://github.com/plutocms/pluto/commit/5fe394707c009d4686e6e7fe6f72af900dfe4035))
+
+## [0.40.0](https://github.com/plutocms/pluto/compare/v0.39.2...v0.40.0) (2026-10-31)
+
+
+### Features
+
+* **admin:** navbar menus in the bar color, palette overlay class, nav children with enabled ([#310](https://github.com/plutocms/pluto/issues/310)) ([cec92ac](https://github.com/plutocms/pluto/commit/cec92ac7061fdb8a209d832344328fae8838f826))
+
 ## [0.39.2](https://github.com/plutocms/pluto/compare/v0.39.1...v0.39.2) (2026-10-31)
 
 

package/app/assets/css/pluto-layer.css

@@ -69,12 +69,15 @@
 }
 
 /*
- * The overlay of the admin search (Cmd/Ctrl+K) is darker than the Nuxt UI
- * default and blurs the page under it. The overlay is the sibling just before
- * the modal content, which carries `pluto-admin-search` (app/layouts/admin.vue).
- * Other modals keep the Nuxt UI overlay.
+ * The overlay of a palette (the admin search, Cmd/Ctrl+K, and the palettes of
+ * the layers, such as the block palette) is darker than the Nuxt UI default and
+ * blurs the page under it. The overlay is the sibling just before the modal
+ * content. The content carries `pluto-admin-search` (app/layouts/admin.vue) or
+ * `pluto-palette`: a layer sets `:ui="{ content: 'pluto-palette' }"` on the
+ * `UModal` of its palette. Other modals keep the Nuxt UI overlay.
  */
-:root[data-pluto-admin] [data-slot='overlay']:has(+ .pluto-admin-search) {
+:root[data-pluto-admin]
+  [data-slot='overlay']:has(+ :is(.pluto-admin-search, .pluto-palette)) {
   background-color: oklch(13% 0.03 273 / 0.6);
   backdrop-filter: blur(6px);
 }

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// The tabs of the section of the page: the children of the menu item whose
+// submenu holds the page (usePlutoAdminNavTabs). The "new" child of the
+// section is a button at the end of the tabs, not a tab. Nothing shows when the
+// page is in no submenu. `page`: under the title of a page (Settings, Users).
+// `toolbar`: a bar under the toolbar of a list page.
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+withDefaults(
+  defineProps<{
+    variant?: 'page' | 'toolbar'
+  }>(),
+  { variant: 'page' }
+)
+
+const { tabs, action, label } = usePlutoAdminNavTabs()
+
+// The active tab is set by hand (`active`), not by the router: a parent path
+// such as `/admin/settings` must not be active on the pages below it.
+const items = computed<NavigationMenuItem[]>(() =>
+  tabs.value.map((tab) => ({
+    label: tab.label,
+    icon: tab.icon,
+    href: tab.to,
+    active: tab.active,
+    onSelect: () => navigateTo(tab.to),
+  }))
+)
+</script>
+
+<template>
+  <template v-if="items.length > 0">
+    <UDashboardToolbar
+      v-if="variant === 'toolbar'"
+      :ui="{ root: 'border-muted' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        :aria-label="label"
+        orientation="horizontal"
+        variant="link"
+        class="-mx-1 min-w-0 flex-1 overflow-x-auto"
+        highlight
+      />
+      <UButton
+        v-if="action"
+        :to="action.to"
+        :label="action.label"
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        class="shrink-0"
+      />
+    </UDashboardToolbar>
+
+    <div v-else class="border-default -mt-2 flex items-center gap-2 border-b">
+      <UNavigationMenu
+        :items="items"
+        :aria-label="label"
+        orientation="horizontal"
+        variant="link"
+        class="min-w-0 flex-1 overflow-x-auto"
+      />
+      <UButton
+        v-if="action"
+        :to="action.to"
+        :label="action.label"
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        class="shrink-0"
+      />
+    </div>
+  </template>
+</template>

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

@@ -135,7 +135,11 @@ const portalTarget = usePlutoAdminPortal()
   <div class="h-full">
     <UDropdownMenu
       :items="items"
-      :ui="{ content: 'w-64' }"
+      :content="{ sideOffset: 2 }"
+      :ui="{
+        content: 'w-64 bg-(--pluto-admin-navbar)',
+        arrow: 'fill-(--pluto-admin-navbar)',
+      }"
       :modal="false"
       :portal="portalTarget ?? true"
       :arrow="{ width: 14, height: 7 }"

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

@@ -214,10 +214,13 @@ const editButton = computed(() => {
     <UDropdownMenu
       :open="menuOpen"
       :items="newMenuItems"
-      :content="{ align: 'start', onCloseAutoFocus }"
+      :content="{ align: 'start', sideOffset: 2, onCloseAutoFocus }"
       :modal="false"
       :portal="portalTarget ?? true"
-      :ui="{ content: 'min-w-48' }"
+      :ui="{
+        content: 'min-w-48 bg-(--pluto-admin-navbar)',
+        arrow: 'fill-(--pluto-admin-navbar)',
+      }"
       :arrow="{ width: 14, height: 7 }"
       @update:open="onUpdateOpen"
     >

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

@@ -266,6 +266,8 @@ const footer = computed(() => {
           </UButton>
         </template>
       </PlutoViewToolbar>
+      <!-- The tabs of the menu item that holds this list (for example Pages). -->
+      <PlutoAdminNavTabs variant="toolbar" />
     </template>
 
     <PlutoSkeletonList

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

@@ -57,14 +57,23 @@ export function usePlutoAdminNav() {
 
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
-    const resolveLabels = (item: PlutoNavItem): PlutoNavItem => ({
-      ...item,
-      label: tx(item.label),
-      children: item.children?.map((child) => ({
-        ...child,
-        label: tx(child.label),
-      })),
-    })
+    // A child with `enabled` shows only when the test passes (for example a
+    // child for admins only). An item with its own `to` and one visible child
+    // stays a plain link, like Settings with one page.
+    const resolveLabels = (item: PlutoNavItem): PlutoNavItem => {
+      const children = item.children
+        ?.filter((child) => child.enabled?.() ?? true)
+        .map((child) => ({
+          ...child,
+          label: tx(child.label),
+        }))
+      return {
+        ...item,
+        label: tx(item.label),
+        children:
+          item.to && children && children.length < 2 ? undefined : children,
+      }
+    }
 
     const isVisible = (type: PlutoContentType): boolean =>
       !type.capabilities?.read || can(type.capabilities.read)
@@ -169,6 +178,7 @@ export function usePlutoAdminNav() {
             children: settingsPages.value.map((page) => ({
               label: page.label,
               to: page.to,
+              icon: page.icon,
             })),
           }
         : item
@@ -198,3 +208,96 @@ export function usePlutoAdminNav() {
 
   return { items }
 }
+
+/** One tab of the section of the current page. See usePlutoAdminNavTabs. */
+export interface PlutoAdminNavTab {
+  label: string
+  icon?: string
+  to: string
+  active: boolean
+}
+
+/** The "new" link of a section: a button at the end of its tabs. */
+export interface PlutoAdminNavAction {
+  label: string
+  to: string
+}
+
+// Trailing slashes off, so `/admin/users/` matches `/admin/users`.
+function trimPath(path: string): string {
+  return path.replace(/\/+$/, '') || '/'
+}
+
+/**
+ * The tabs of the section of the current page: the children of the menu item
+ * whose submenu holds the page. Settings, the Users item of a backend layer and
+ * a group of content types (Pages) all get them.
+ *
+ * - A child matches the path exactly, or as a prefix (`/admin/users` matches
+ *   `/admin/users/5`). The longest match wins, so General (`/admin/settings`)
+ *   is not active on `/admin/settings/email`.
+ * - A "new" child (its `to` is the `newTo` of the item, or ends with `/new`)
+ *   is not a tab: it is `action`, a button at the end of the tabs.
+ * - The tabs show only with two or more of them. A section of one list and its
+ *   "new" page (a content type: All posts, New post) shows none: the list page
+ *   has its own New button.
+ *
+ * `label` is the label of the section (for `aria-label`). A page shows the
+ * tabs with `PlutoAdminNavTabs`.
+ */
+export function usePlutoAdminNavTabs() {
+  const { items } = usePlutoAdminNav()
+  const route = useRoute()
+
+  const isNewChild = (item: PlutoNavItem, child: PlutoNavChild): boolean =>
+    (item.newTo !== undefined && trimPath(child.to) === trimPath(item.newTo)) ||
+    trimPath(child.to).endsWith('/new')
+
+  const section = computed(() => {
+    const path = trimPath(route.path)
+    let best: { item: PlutoNavItem; to: string } | undefined
+    for (const item of items.value) {
+      const pages = (item.children ?? []).filter(
+        (child) => !isNewChild(item, child)
+      )
+      if (pages.length < 2) {
+        continue
+      }
+      for (const child of pages) {
+        const to = trimPath(child.to)
+        const matches = path === to || path.startsWith(`${to}/`)
+        if (matches && (!best || to.length > best.to.length)) {
+          best = { item, to }
+        }
+      }
+    }
+    return best
+  })
+
+  const tabs = computed<PlutoAdminNavTab[]>(() => {
+    const current = section.value
+    if (!current) {
+      return []
+    }
+    return (current.item.children ?? [])
+      .filter((child) => !isNewChild(current.item, child))
+      .map((child) => ({
+        label: child.label,
+        icon: child.icon,
+        to: child.to,
+        active: trimPath(child.to) === current.to,
+      }))
+  })
+
+  const action = computed<PlutoAdminNavAction | undefined>(() => {
+    const item = section.value?.item
+    const child = item?.children?.find((entry) => isNewChild(item, entry))
+    return child ? { label: child.label, to: child.to } : undefined
+  })
+
+  return {
+    tabs,
+    action,
+    label: computed(() => section.value?.item.label ?? ''),
+  }
+}

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

@@ -8,12 +8,17 @@
  * 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`.
+ *
+ * The menus look like the bar: the target also carries `data-pluto-admin-dark`
+ * (the dark tokens in both color modes), and a menu sets the bar color
+ * (`bg-(--pluto-admin-navbar)`, also on its arrow) and `sideOffset: 2`.
  */
 export function usePlutoAdminPortal() {
   const portalTarget = shallowRef<HTMLElement>()
   onMounted(() => {
     const el = document.createElement('div')
     el.setAttribute('data-pluto-admin-scope', '')
+    el.setAttribute('data-pluto-admin-dark', '')
     document.body.append(el)
     portalTarget.value = el
   })

package/app/pages/admin/settings.vue

@@ -1,36 +1,16 @@
 <script setup lang="ts">
 // The parent of every Settings page: the title, the tabs, and the child route.
 // A layer adds a tab with a file at `pages/admin/settings/<x>.vue` and a
-// `settingsPages` entry. See the extension-registry skill.
-import type { NavigationMenuItem } from '@nuxt/ui'
-
+// `settingsPages` entry. The tabs are the children of the Settings item of the
+// menu (PlutoAdminNavTabs), like every item with a submenu. See the
+// extension-registry skill.
 const { t } = usePlutoI18n()
-const route = useRoute()
 
 useHead({
   title: () => t('pluto.pages.settings'),
 })
 
-const { items, current, allowed } = usePlutoSettingsPages()
-
-// Active state by hand: General (`/admin/settings`) matches exactly, so it is
-// not active on the pages below it. Any other tab matches by prefix.
-function isActive(to: string): boolean {
-  const path = route.path.replace(/\/+$/, '') || '/'
-  return to === '/admin/settings'
-    ? path === to
-    : path === to || path.startsWith(`${to}/`)
-}
-
-const tabs = computed<NavigationMenuItem[]>(() =>
-  items.value.map((page) => ({
-    label: page.label,
-    icon: page.icon,
-    href: page.to,
-    active: isActive(page.to),
-    onSelect: () => navigateTo(page.to),
-  }))
-)
+const { current, allowed } = usePlutoSettingsPages()
 </script>
 
 <template>
@@ -40,15 +20,8 @@ const tabs = computed<NavigationMenuItem[]>(() =>
         {{ t('pluto.pages.settings') }}
       </h1>
 
-      <!-- One page (General only) needs no tabs. -->
-      <UNavigationMenu
-        v-if="tabs.length >= 2"
-        :items="tabs"
-        :aria-label="t('pluto.settings.tabs.label')"
-        orientation="horizontal"
-        variant="link"
-        class="border-default -mt-2 overflow-x-auto border-b"
-      />
+      <!-- One page (General only) has no submenu, so no tabs. -->
+      <PlutoAdminNavTabs />
 
       <UAlert
         v-if="!allowed"

package/i18n/locales/en.json

@@ -167,7 +167,6 @@
         "saveFailedDescription": "The language changed on this device only. {reason}"
       },
       "tabs": {
-        "label": "Settings sections",
         "general": "General",
         "email": "Email",
         "github": "GitHub"

package/i18n/locales/pt-BR.json

@@ -167,7 +167,6 @@
         "saveFailedDescription": "O idioma mudou apenas neste dispositivo. {reason}"
       },
       "tabs": {
-        "label": "Seções das configurações",
         "general": "Geral",
         "email": "E-mail",
         "github": "GitHub"

package/layers.ts

@@ -28,7 +28,6 @@ export type PlutoLayerEntry = [source: string, options: PlutoLayerEntryOptions]
  * without the scope. A package of a monorepo is in a folder of its repo.
  */
 export const PLUTO_LAYER_PATHS: Readonly<Record<string, string>> = {
-  utils: 'utils',
   core: 'pluto/packages/core',
   supabase: 'supabase',
   'supabase-shop': 'supabase-shop',

package/nuxt.config.ts

@@ -1,13 +1,9 @@
 const websiteName = process.env.WEBSITE_NAME || 'Untitled'
 
-// Point PLUTO_UTILS_PATH at a local checkout (e.g. `../../../utils`) to test
-// unpublished changes; unset, it resolves to the published npm package.
-const utilsLayer = process.env.PLUTO_UTILS_PATH || '@plutocms/utils'
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
+// Core extends no other layer. The helpers of the retired `@plutocms/utils` that
+// core uses are in shared/utils (`domainFromUrl`).
 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: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/core",
   "type": "module",
-  "version": "0.39.2",
+  "version": "0.41.0",
   "description": "The base layer every Pluto app extends: the admin, the content model, and the GitHub CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -43,7 +43,6 @@
     "@lezer/highlight": "^1.2.5",
     "@nuxt/image": "^2.1.0",
     "@nuxt/ui": "^4.12.0",
-    "@plutocms/utils": ">=0.3.0 <1.0.0",
     "@tanstack/charts": "^1.1.0",
     "@vueuse/nuxt": "^15.0.0",
     "image-meta": "^0.3.0",

package/shared/types/registry.ts

@@ -59,6 +59,8 @@ export interface PlutoNavChild {
   newTo?: string
   /** The text of that "+" (`New <type>`). */
   newLabel?: string
+  /** Reactive visibility test, like `PlutoEntry.enabled`. A child without it shows. */
+  enabled?: () => boolean
 }
 
 export interface PlutoNavItem extends PlutoEntry {

package/shared/utils/content-slug.ts

@@ -6,8 +6,7 @@ export const SLUG_MAX_LENGTH = 100
  * "pao-de-mel". The result is lowercase ASCII, with single dashes. It can
  * be an empty string.
  *
- * The form and the GitHub CMS both use this function. Do not name it
- * `slugify`: `@plutocms/utils` already auto-imports that name.
+ * The form and the GitHub CMS both use this function.
  */
 export function slugifyTitle(value: string): string {
   return value

package/shared/utils/url.ts

@@ -0,0 +1,13 @@
+/**
+ * The host of a URL, without the scheme and `www.`: `https://www.example.com/a`
+ * gives `example.com`. No URL gives `undefined`; a value that does not parse
+ * gives an empty string. The admin bar shows it next to "View site".
+ */
+export function domainFromUrl(url: string | null | undefined) {
+  if (!url) {
+    return
+  }
+
+  const match = url.match(/^(?:https?:\/\/)?(?:www\.)?([^/]+)/i)
+  return match ? match[1] : ''
+}